WEB DESIGINING
‘Web Designing’ is the process of creating web pages. Web pages are created for Internet. For this we have several techniques to create the web pages. Among them we take the means of programming and some new application software to modify the web pages. Traditionally, we use ‘HTML’ to create the website. ‘HTML’ stands for – ‘Hypertext Markup Language’. It is a documentation language to mark the headings, title, table and forms.
History of ‘HTML’
IBM wanted to set a documentation
system in which they could mark the title, headings, paragraphs and font type
selections in the year of 1980. They came out with a set of mark-up system
called it General Markup Language (GML). In 1986, ISO (International
Standardizing Organization) took up this concept and standardized it as
Standard Generalized Mark UP Language (SGML). In 1989 Tim Berners Lee and his
team in the European Laboratory for Particle Physics designed the present form
of the documentation language and called it HTML.
HTML TAGS
Generally, ‘HTML’ programming depends
on different tags (< Less , > greater sign). Such as:- <html>,
<title> etc.
When a web page is to be developed,
the following are to be planned:
· Content of page.
· Appearance of the page.
HTML
TAGS AND THEIR USAGES
· A tag is enclosed between
< and > symbols.
· Most of the tags start
with <html> and it must be ended with </html> but some of them are
written without its ending point. Such as :- <hr>, <p>
· HTML programming is
basically used in notepad but we have also some html editors in which we code
its programming.
· The <HTML>
TAG:-Actually, this tag denotes or through this we identify its platform that
we are using html programming or the code is used with html codes.
· <head> Tag:- This
tag is used for controlling all the tags used in the programming.
· <title> tag:- This
tag is used to show the title in the browser display.
· Note: -
o <html>,
<head>, <title> must have the ending tags means we must close these
tags using (/) slash. Such as:- </html>,</head>,</title>
· <P> Tag:- This tag
is used for paragraph. Generally, this tag is used without ending tag, when there
is no defining behavior point under the tag. But, when we use behavior within
the tag we use ending tag with it.
Assignment –
Write a program for a
letter format.
Note: -
- This command is used to
leave the space. For this, type this command before the word to leave the
space. Multiply this command if you have to leave more space by using copy and
paste command.
Assignment –
Write a program for
application format. Use paragraph tag with alignment and space command.
In this add a marquee for
“Don’t read this application. This is for official use” at the end of body.
Alignment:= ‘Alignment’ has been originated from the verb – ‘To
align’ means – ‘To carry one place to another’/’to move’. Alignments can be
used for various directions but generally, we use the following directions.
Such as:- Align = “Right”, Align = “Left”, Align = “Center”. Basically, this is
used with <font> tag. Example:-
<Font align=
“Center”> The Computer Programming</Font>
<Font> Tag:- This
tag is used for text editing. It is also starts with beginning and close tag.
Syntax:-
<font>………………………..</font>
Attributes of font tag
Attributes refer to the effect used
with any HTML tags.
In the <font> tag we can use
the following attributes.
Size = ‘Size’ attribute is used to
set the size of text which is used encloser of <font> tag. The smallest
size of text is 1 and the biggest size of the text is 7.
Face: - This attribute is
used for setting of the face of used text. Such as:- Arial, Times New Roman,
Georgia, Lucida Handwriting, Impact, Script MT Bold
Color:- This attribute is
used for setting the face color of the used text. There are two types of color settings:
- a. Color Name Such as:- Font color=
“Red”/ “Green”. B. Hexadecimal Value. Such:- “#fffff”
Styles
of Text
We use different styles
for the text in html programming. They are as follows:-
<b> Tag:- This tag
is used for making the text in bold
style.
<I> Tag:- This tag
is used for making the text in italic
style.
<u> Tag:- This tag
is used for making the text in underline style.
<Strike> tag:- This
tag is used for strikethrough text means by using this tag we can make line
through the middle of the text.
<strike>ETC</strike>
output = ETC
<Sup> tag:- This tag is used
for super script. Such as:-
<sup>………….</sup>
a2
a<sup>2</sup> = Output =
a2
<sub> tag:- This tag is used
for subscript.
H2SO4 =
H<sub>2</sub>SO<sub>4</sub>
Assignment –
Print the squares of the numbers 1 -
20. Each number should be on a separate line, next to it the number 2
superscripted, an equal sign and the result. (Example: 102 = 100)
Output =
12
= 1
22 = 4
32 = 9
42 = 16
52 = 25
62 = 36
72 = 49
82 = 64
92 = 81
102 = 100
112 = 121
122 = 144
132 = 169
142 = 196
152 = 225
162 = 256
172 = 289
182 = 324
192 = 361
202 = 400
Assignment –
Write a program to print
some molecular formulae from chemistry.
Note:- All the text style
text must be started with beginning tag and will be closed with ending tag.
<big> Tag:- This tag
is also used to show the text in bigger mode.
<big>……………………</big>
<Small> Tag:- This
tag is used to show the text in smaller mode.
<small>……………..</small>
Details of body tag =
<Body>……………</body>
Body tag is an important tag of the
HTML programming because it is the tag which is especially focus on the web
browser. The entire content of the web pages is placed in the page’s
<body> element.
Start tag/End Tag.
The
following tags can be attached with body tags which are as follows:-
Background Color = Bgcolor – This is
used to make color the background. It will set as - <body bgcolor=
“Red”>……………</body>
Margin :- There are four types of
margins are used -
Left, Right, Top, Bottom.
Leftmargin :- It is used to align
left the contained of body.
Rightmargin:- It is used to align
right the contained of body.
Topmargin:- It is used to align top
the contained of body.
Bottommargin:- It is used to align
bottom the contained to body.
· The <head> tag
· The <head> tag is what actually begins the head
section of an HTML document. The head section of an HTML document contains
several tags that specify important information about the webpage such as
title, keywords and descriptions (for search engines), location of stylesheets,
scripts, and more.
· Example:
· <html> <head> <!-- tags that specify important
information about the page here --> </head> <body> <!-- page content here -->
</body> </html>
·
The
<font> tag
With the <font> tag
you can set the size, color, and font of text.
Attributes of the
<font> tag
- size -
Takes a numerical value (1 (smallest) - 7 (biggest)) specifying the size
of the text.
- face -
Specifies the font of the text. Many possible values including Times New
Roman, Georgia, and Courier New.
- color -
Specifies the color of the text with a color name, hexadecimal value, or
RGB value.
Example:
<font
size="5">Text in font size 5</font> <font
size="4" face="Georgia" color="green">Green
text in a font size 4 in a Georgia font</font> <font
size="2" face="Arial" color="gray">Small gray
arial text</font>
Output:
Text in font
size 5 Green text in a font size 4 in a
Georgia font Small gray
arial text
The <font>
tag is deprecated. CSS should be used instead.
The <basefont> tag
The <basefont> tag can
be used to specify a general appearance for text on a webpage. It should be
placed right after the <body> tag.
NOTE: The <basefont> tag has the same attributes
as the <font> tag.
Example:
<html>
<head> <title>Basefont</title> </head> <body> <basefont size="5" face="Verdana, Arial,
Helvetica" color="blue" /> This text will be in a size of 5, have a Verdana font,
and will be blue </body> </html>
Output:
This text will be
in a size 5, have a Verdana font, and will be blue
NOTE: If you specify a list of fonts with the face
attribute like in the above example, the visitor's web browser will use the
first font in the list that is available on the visitor's computer. Meaning, if
someone is viewing a webpage and their computer does not support the first font
you specify, the browser will try the second font and so on until it gets to a
font that is supported. This applies to the <basefont> tag as well
as the <font> tag.
· Paragraph Tag =
<p>………………………..</p>
o This tag is used to break
the line of paragraph.
· <br> Tag – This tag
is used to give the line break without giving space.
· Bold Tag -
<b>…………..</b> - This tag is used to make bold the text.
· Italic Tag - <i>
…………..</i> - This tag is used to make italic the text.
· Underline Tag -
<u>……….</u> - This tag is used to make underline the text.
· Strike Tag -
<strike>…………..</strike> - This tag is used for strike through.
· Small Tag -
<small>………………………..</small> - This tag is used for smaller font.
· Big Tag -
<big>……………………………</big> - This tag is used for bigger font.
· Sup Tag -
<sup>…………………………………….</sup> - This tag is used for superscript.
· Sub Tag -
<sub>…………………………………….</sub> - This tag is used for subscript.
Emphasizing Text:- <em> This
tag is used to emphasizing the text and to render it as italic.
<em>……………</em>
Assignment
–
<html>
<head>
<title> Assignment for
Emphasising</title>
<body>
It is said that <em>honesty
appears to defeated at the beginning but it conquers on dishonesty.</em>
</body>
</head>
</html>
Strong Tag:- This is used as we use
<em> but it will display with strong and bold emphasizing text.
<strong>…………….</strong>
Assignment for Strong tag –
<html>
<head>
<title> Assignment for Strong
tag.</title>
<body>
<h1>
<font><center>The Life of
William Shakespeare</center></font>
</h1>
<h2>
There is no name like William Shakespeare
in the world’s history. <strong> He is not only for his country but for
all the countries, he is not for his age but for all the ages.</strong>
< /h2>
</body>
</head>
</html>
Details
of Marquee
Sometimes, we have to set the text in
scrolling style for different direction. For this we don’t have to choose the
default option always, we give our own settings. For our own settings we
require to understand its following different options which are as follows : -
Its different options are known as attributes
· Behavior- Behavior means
to set the text how it moves on the screen.
o Scroll – (The default,
text scrolls across the marquee)
o Slide – (Texts enters from
one side and stops at the other side)
o Alternate- (Text seems to
bounce from one side to the other.)
· Align – Top, Middle (Center),
Bottom.
· Bgcolor – We can change
the background under the setting of marquee.
· DIR:- It gives the
direction of directionally neutral text.
o LTR – Left-to-Right.
o RTL- Right- to-Left
· Direction:- It is set for
the direction the text that should scroll.
o Left (Default)
o Right.
o Down.
o Up
· Listing:- Generally,
listing is used for bullets and numbering. For this we use several types of
numbers and bullets for indicating the special sentences or text. We use the
following tag to use listing in HTML Programming. These are also known as order
list in HTML Programming. Tags are as follows:-
o Order Listing = <OL>
tag – This tag is used for – Order Listing. Such as:-
§ <OL Type = 1, A, I,
i……..>
·
<li>……
·
<li>…….
·
<li>….
§ </OL>
o Unordered Listing = <UL>
- This Tag is used for Unordered Listing. Such as:- Disc, Circle, Square
§ <UL Type= “Circle”/
“Disc” / “Square”>
·
<li>……
·
<li>…….
·
<li>….
§ </UL>
Assignment –
Write a program to display a notice board in html programming
in which apply order and unordered listing tags.
Assignment-
Create a sample paper of any question
in html programming.
Assignment –
Choose a program from the English
Newspaper in order or unordered lists have been used.
Assignment –
Revise all the taught tags and old assignment.
Image Insert in HTML programming
Image Inserting is one of the most
important parts of web programing. In current web developing, generally we use
photo shop to modify the format of picture. Without a correct format we cannot
insert the picture through HTML programming. For a common concept we use ‘jpg’
file as a picture insert. How to make ‘jpg’ file by the help of any ‘Photoshop’
or ‘CorelDraw’? Open any photo in ‘Photoshop’ or in ‘CorelDraw’ – Click on
‘Save As’ – Click on ‘Format’ option – Select ‘jpg’ and click on ‘Ok’.
Syntax for picture inserting:-
<img src= “// ………………” />
The <img> tag has several attributes
to inform the source. The following are the main attributes of it:-
· Src
· Height
· Width
· Align
· Alt
What
is an entity?
An
entity is a symbol that is displayed on a webpage such as the copyright symbol
( © ), the trademark symbol (™), and the ampersand symbol (&).
Each entity is displayed using a special code.
Entity
construction
Now
that you what entities are how do you go displaying them?
An HTML entity code has three parts:
- An ampersand ( &
)
- An entity name or a
# sign and an entity number
- A semicolon ( ;
)
For
example, to display a greater than sign on a webpage, we would write >
or >
Here is a greater than sign -
>
Here it is again - >
Output:
Here is a greater than sign - >
Here it is again - >
NOTE: While you
can use names or numbers for character entities, it is better to use names
because they are easier to remember.
NOTE: Entities are
case sensitive!
Common
entities
There
are many entities you can use; the ones below are very commonly used.
Common character entities and what they will display:
|
Common entities |
|||
|
Entity Name |
Entity Number |
Character |
Output |
|
|
  |
space |
|
|
< |
< |
less than sign |
< |
|
> |
> |
greater than sign |
> |
|
& |
& |
ampersand |
& |
|
" |
" |
quotation mark |
" |
|
' |
" |
apostrophe |
' |
|
© |
© |
copyright symbol |
© |
|
® |
® |
trademark symbol |
® |
|
× |
× |
multiplication symbol |
x |
|
÷ |
÷ |
division symbol |
÷ |
Introduction of Tables
Tables
are probably the most helpful tool in HTML when you are trying to change the
layout of a page or trying to make a page look exactly as you want it (which
can be very difficult). However, tables can be one of the most complicated
parts of HTML, so we'll start simple and get complex.
While
we are using tables, remember that table can be of any size, from the size of
the whole page, to just enough for a word to fit into it. Using tables
effectively will allow you to be able to put things exactly where you want
them.
Our First Table
<table>.........................................</table>
is the basic table tag. <tr>...</tr> is used to set a row in the
table. <td>...</td> is used to define the data inside each cell
from left to right. (note: the tag <!--...--> is a comment and is not
shown when viewed through a browser.)
<table border="1"><tr> <!--start row 1--><td>Cell 1, Row 1</td><td>Cell 2, Row 1</td><td>Cell 3, Row 1</td></tr> <!--end row 1--><tr> <!--start row 2--><td>Cell 1, Row 2</td><td>Cell 2, Row 2</td><td>Cell 3, Row 2</td></tr> <!--end row 2--></table>
You
should get the following table:
|
Cell 1, Row 1 |
Cell 2, Row 1 |
Cell 3, Row 1 |
|
Cell 1, Row 2 |
Cell 2, Row 2 |
Cell 3, Row 2 |
Setting
the border to 0 is a great way to use tables to format text and pictures
without being noticeable.
Table Attributes
|
|
|
|
|
Width of the table,
either in percent (ex. 90%) or pixels (ex. 500) |
|
|
Width in pixels of a border
around the table |
|
|
Spacing between
individual cells |
|
|
Spacing inside cells
between data and the edge of the cell |
|
|
Sets alignment (left,
right, center, justify) |
|
|
Sets background color
of table |
|
|
Sets the border
color |
|
|
Sets border highlight
color |
|
|
Sets the border shadow
color |
|
|
|
|
|
Horizontally aligns the
contents of the cells inside the row (left, center, right, justify) |
|
|
Vertically aligns the
contents of the cells inside the row (top, middle, bottom) |
|
|
Background color of the
row |
|
|
|
|
|
Width of the cell,
either in percent (ex. 90%) or pixels (ex. 500) |
|
|
Background color of the
cell. |
|
|
The number of rows spanned
by a cell |
|
|
The number of columns
spanned by a cell |
|
|
Horizontally aligns the
contents of the cell (left, center, right, justify) |
|
|
Vertically aligns the
contents of the cell (top, middle, bottom) |
Cell
Spanning
The rowspan and colspan
attributes are complicated but useful tools which are important to understand.
Let’s say we want to make a table that looks like this:
|
Title |
||
|
Left |
A |
B |
|
C |
D |
|
The
code for this table is as follows:
<table border="1"> <tr> <!--start row 1--><td colspan="3">Title</td><!--"Title" cell will span 3 columns--></tr> <!--end row 1--> <tr> <!--start row 2--><td rowspan="2">Left</td><!--"Left" cell will span 2 rows--><td>A</td> <!--row 2, col 2--><td>B</td> <!--row 2, col 3--></tr> <!--end row 2--> <tr> <!--start row 3--><!--skip col 1 of row 3, it is defined when we used rowspan!--><td>C</td> <!--row 3, col 2--><td>D</td> <!--row 3, col 3--></tr> <!--end row 3--> </table>
You can
make this table even more complicated by adding in background colors,
alignments, and widths.
HTML
allows tables (and many other things) to be embedded inside of each other! You
have to keep your HTML logically organized and pretty to make this work, or you
will be easily confused. Here is an example of the tables and then the code:
(Note: Here I use . This stands for nothing. :-) Literally nothing,
or a non-breaking space. If you leave a cell blank don't use you
might get undesired results! Try it yourself.)
|
|
|
|
||||
|
|
|
|
||||
|
|
|
|
<table width="75%" border="4" cellspacing="0"><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> <table align="center" width="90%" border="1" bordercolor="#FF00FF"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table>
Note
that the inside table has a width of 90% but does not take up 90% of the
screen. The inside table uses 90% of the space it has available, not total
space of the screen. Remember that you can put anything inside a table, text,
pictures, or links.
|
If
you are taking HTML seriously, you might want to read this note.
Otherwise skip down to the bottom of this page. There is a quirk in
Netscape Navigator (I'm not sure if it is in the new Navigator 6). At
the very beginning of this tour, we discussed how the layout of your HTML
doesn't effect the appearance seen in a browser. This quirk is the one
exception to that rule. This problem only happens when you put an image
inside a table. Using the following code might give you some problems: <TD> Depending
on how you are using your table, you might not experience problems, but if
you are trying to place pictures exactly how you want them, you will need to
change your code to: <TD><IMG
SRC="picture.jpg"></TD> I
imagine that this problem occurs is because white space (or returns) are
often interpreted as spaces (you can't have one continuous word stretch
across two lines of HTML, when the word starts on the next line, a space will
be inserted). So if you use the first example of HTML shown here, you
might encounter some spacing problems. This problem is often run into
by amateurs and they write it off as "Netscape being dumb" when in
fact the quirk is justified in a way. I just thought I would pass this
word onto you, this quirk (when I forget about it) has often made me wonder
for hours what was going on. |
Table
setup
A table
is created using the <table> tag and a closing </table>
tag. A table consists of rows and columns.
Attributes of the <table>
tag
- border - takes a numeric value denoting the
thickness of the border around the table.
- cellspacing - takes a numeric value denoting how
much space to put between cells.
- cellpadding - takes a numeric value denoting how
much padding to put between what is in the cells and the cell walls.
Table
setup:
<table border="1"
cellspacing="2" cellpadding="2"> <!-- table content
goes here --> </table>
Table
rows
Table
rows are created using the <tr> tag which should go inside the
<table> tag. Use an opening <tr> tag and its closing tag
</tr> for every row in the table.
Adding rows to the table:
<table border="1"
cellspacing="2" cellpadding="2"> <tr></tr>
<tr></tr> <tr></tr> </table>
Table
cells
Table
cells are created using the <td> tag which should go inside the
<tr> tag. Use an opening <td> tag and its closing tag </td>
for every cell in the table.
Adding cells to the table:
<table border="1"
cellspacing="2" cellpadding="2"> <tr> <td></td> <td></td>
</tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td>
</tr> </table>
Adding
content to the table
Now
that we have a structure for our table, we can add some content to it. The
content of a table is placed inside the table's cells..so inside the <td>
tags in the table.
Adding content to the
table:
<table border="1"
cellspacing="2" cellpadding="2"> <tr> <td>First row, first column</td> <td>First row, second column</td> </tr>
<tr> <td>HTML</td> <td>Javascript</td> </tr> <tr> <td>CSS</td> <td>PHP</td>
</tr> </table>
What the table will look
like:
|
First row, first column |
First row, second column |
|
HTML |
Javascript |
|
CSS |
PHP |
Read
our HTML table concepts tutorial for much more info on working with tables.
There
is alot you can do with tables. You can add headings & captions to tables,
male cells span multiple rows & columns, align the content within cells,
and more.
This tutorial focuses on:
- Empty
cells
- Headings
- Captions
- Cellspacing
& Cellpadding
- Spanning
multiple/rows columns
- Aligning
table content
Empty
cells
Sometimes
you may not need to place content inside of a table cell, instead you just need
the cell to be there. But a table cell may not appear unless it has content
inside of it.
You can
include empty cells in a table by placing the character entity
inside a table cell. This way a table cell technically has something inside of
it (just a space character) but it's not visible and the table cell will appear
empty on a webpage.
Empty table cell:
<table border="2">
<tr> <td>Four cells in this table</td> <td>One is
empty</td> </tr> <tr> <td>Three are filled</td>
<td> </td> </tr>
</table>
Output:
|
Four cells in this table |
One is empty |
|
Three are filled |
|
Headings
You can
display headings in a table using the <th> tag. A heading is an emphasized
cell in a table. Such an emphasis in tables can be important depending on your
situation. Use the <th> tag just like the <td> tag.
Table headings:
<table border="2">
<tr> <th>Web development</th> <th>Software development</th> </tr>
<tr> <td>HTML</td> <td>C++</td> </tr>
<tr> <td>PHP</td> <td>Fortran</td> </tr>
</table>
Output:
|
Web
development |
Software
development |
|
HTML |
C++ |
|
PHP |
Fortran |
Captions
A
caption is added to a table using the <caption> tag which should be
placed right below the <table> tag before the first <tr> tag.
Table caption:
<table border="2"> <caption>Computer languages</caption>
<tr> <th>Web development</th> <th>Software development</th> </tr>
<tr> <td>HTML</td> <td>C++</td> </tr>
<tr> <td>PHP</td> <td>Fortran</td> </tr>
</table>
Output:
|
Computer
languages |
|
|
Web
development |
Software
development |
|
HTML |
C++ |
|
PHP |
Fortran |
Cellspacing
& Cellpadding
By
default, the cells of a table look really stuffy and smashed together. To fix
this, the cellspacing and cellpadding properties are used.
The
cellspacing property takes a numeric value denoting how much space to put
between cells. The cellpadding property takes a numeric value denoting how much
padding is required between what is in the cells and the cell walls.
Using only cellspacing:
<table border="2" cellspacing="14"> <caption>Computer
languages</caption> <tr> <th>Web development</th>
<th>Software development</th> </tr> <tr>
<td>HTML</td> <td>C++</td> </tr> <tr>
<td>PHP</td> <td>Fortran</td> </tr>
</table>
Output:
|
Computer languages |
|
|
Web development |
Software development |
|
HTML |
C++ |
|
PHP |
Fortran |
Using only cellpadding:
<table border="2" cellpadding="14"> <caption>Computer
languages</caption> <tr> <th>Web development</th>
<th>Software development</th> </tr> <tr>
<td>HTML</td> <td>C++</td> </tr> <tr>
<td>PHP</td> <td>Fortran</td> </tr>
</table>
Output:
|
Computer languages |
|
|
Web development |
Software development |
|
HTML |
C++ |
|
PHP |
Fortran |
Spanning
multiple/rows columns
Table column spanning
Why
should all rows have the same number of columns in a table? There may be
situations where you need a cell or cells to span more than one column. This is
achieved using the colspan attribute of the <td> tag. The colspan
attribute takes a numeric value indicating how many columns a cell should span.
Example:
<table border="2"
cellspacing="4" cellpadding="10" width="80%"
align="center"> <caption>Web Languages</caption>
<tr> <th width="40%" align="center">Client-side</th>
<td align="center">HTML</td> <td align="center">CSS</td>
<td align="center">Javascript</td> </tr> <tr>
<th align="center">Server-side</th> <td
align="center">ColdFusion</td> <td align="center"
colspan="2">PHP</td> </tr>
</table>
Output:
|
Web Languages |
|||
|
Client-side |
HTML |
CSS |
Javascript |
|
Server-side |
ColdFusion |
PHP |
|
Table row spanning
If a
cell can span more than one column, why can't it span more than one row?
You can
make a cell span more than one row using the rowspan attribute of the <td>
tag. The rowspan attribute takes a numeric value indicating how many
rows it should span.
Example:
<table border="2"
cellspacing="4" cellpadding="10" width="90%"
align="center"> <caption>Computer Languages</caption>
<tr> <th align="center" rowspan="2">Web
languages</th> <td align="center">HTML</td> <td
align="center">CSS</td> </tr> <tr> <td
align="center">Javascript</td> <td
align="center">PHP</td> </tr> <tr> <tr>
<th align="center" rowspan="2">Software
languages</th> <td align="center">C</td> <td
align="center">C++</td> </tr> <tr> <td
align="center">FORTRAN</td> <td
align="center">Visual Basic</td> </tr> <tr>
</table>
Output:
|
Computer Languages |
|||
|
Web languages |
HTML |
CSS |
|
|
Javascript |
PHP |
|
|
|
|
|
|
|
|
Software languages |
C |
C++ |
|
|
FORTRAN |
Visual Basic |
|
|
Aligning
table content
You can
align table content using the align attribute inside the <td> tag.
This attribute can take the values "left" to align content to the
left, "center" to align content to the center, or "right"
to align content to the right.
Aligning table content:
<table border="2">
<caption>Computer languages</caption> <tr> <th>Web
development</th> <th>Software development</th> </tr>
<tr> <td align="center">HTML</td>
<td align="center">C++</td>
</tr> <tr> <td align="left">PHP</td>
<td align="right">Fortran</td>
</tr> </table>
Output:
|
Computer languages |
|
|
Web development |
Software development |
|
HTML |
C++ |
|
PHP |
Fortran |
Aligning the table itself
Just as
you can set the alignment of table content, you can set the alignment of the
table itself. This is done the same way as setting the alignment of table
content.
<table border="2" align="right"> <caption>Computer
languages</caption> <tr> <th>Web development</th>
<th>Software development</th> </tr> <tr>
<td>HTML</td> <td>C++</td> </tr> <tr>
<td>PHP</td> <td>Fortran</td> </tr>
</table>
|
Computer
languages |
|
|
Web
development |
Software
development |
|
HTML |
C++ |
|
PHP |
Fortran |
Output:
NAVIGATION IN HTML
PROGRAMMING
A ‘navigation
bar’ is a set of hyperlinks that connect to the major pages of our Web
site. A navigation bar
should contain links to the most important sections of the Web site, plus a
link to the Home page.
HTML Definition Lists
HTML and XHTML support a list
style which is called definition lists where entries are listed like in
a dictionary or encyclopedia. The definition list is the ideal way to present a
glossary, list of terms, or other name/value list.
Definition List makes use of
following three tags.
<dl> - Defines the start of the list
<dt> - A term
<dd> - Term definition
</dl> - Defines the
end of the list
Example:-
<html>
<head>
<title>HTML Definition List</title>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup
Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</head>
</html>
HTML Text Links
A
webpage can contains various links that take you directly to other pages and
even specific parts of a given page. These links are known as hyperlinks.
Hyperlinks allow visitors to
navigate between Web sites by clicking on words, phrases, and images. Thus you
can create hyperlinks using text or images available on a webpage.
Linking Documents
A
link is specified using HTML tag <a>. This tag is called anchor
tag and anything between the opening <a> tag and the closing
</a> tag becomes part of the link and a user can click that part to reach
to the linked document. Following is the simple syntax to use <a> tag.
<a
href="Document URL" ... attributes-list>Link Text</a>
Example
Let's try following example which
links http://www.tutorialspoint
How to convert Word File into HTML
file?
Step:- Click on File Menu – Click on Export - Click on Change File Type – Click on Single
File Web Page – Click on Save As – Type File
Name and Click on Ok.
Working with Frames
The HTML tags that divide
a browser screen into two or more HTML recognizable unique regions which are
tagged with <FRAMESET>……….</FRAMESET>. This each unique region is
called a frame. Each frame can be loaded with a different document and allow
multiple HTML document to be seen currently.
The HTML frame is a powerful feature that enables a web page
to be broken into different unique sections that, although related, operated
independently of each other. The <FRAMESET> and </FRMESET> tags
require one of the following two attributes depending on whether the screen has
to be divided into rows or columns.
ATTRIBUTES
ROWS:- This attributes is used to divide the
screen into multiple rows. It can be set equal to a list of values. It depends
on the required size of each row. The value can be – A number of pixels,
Expressed as a percentage of the screen resolution, The symbol *, which
indicates the remaining space.
COLUMNS:- (COLS) – This attribute is used to divide the
screen into multiple columns. It can be set equal to a list of values. It also
depends on the required size of each column. Its value also be same we use for
rows.
For examples:-
<HTML>
<HEAD>
<TITLE> THE
INTRODUCTION PART FOR THE FREMES </TITLE>
<FRAMESET Cols = 30%,
70%>
<FRAME NAME = “MAIN
PART”>
<FRAME NAME = “SUB
PART”>
</FRAMESET>
</HEAD>
</HTML>
Disadvantages of
Frames
There are few drawbacks with using frames,
so it’s never recommended to use frames in your webpages:
Some smaller devices cannot cope with
frames often because their screen is not big enough to be divided up.
Sometimes your page will be displayed
differently on different computers due to different screen resolution.
The browser's back button might
not work as the user hopes.
There are still few browsers that do not
support frame technology.
Creating Frames
To use frames on a
page we use <frameset> tag instead of <body> tag. The
<frameset> tag defines how to divide the window into frames. The rows attribute
of <frameset> tag defines horizontal frames and cols attribute
defines vertical frames. Each frame is indicated by <frame> tag and it
defines which HTML document shall open into the frame.
The <frameset>
Tag Attributes
|
Following are
important attributes of the <frameset> tag: Attribute |
Description |
|
cols |
specifies how many
columns are contained in the frameset and the size of each column. You can
specify the width of each column in one of four ways: Absolute values in
pixels. For example to create three vertical frames, use cols="100,
500,100". A percentage of
the browser window. For example to create three vertical frames, use cols="10%,
80%,10%". Using a wildcard
symbol. For example to create three vertical frames, use cols="10%,
*,10%". In this case wildcard takes remainder of the window. As relative widths
of the browser window. For example to create three vertical frames, use cols="3*,2*,1*".
This is an alternative to percentages. You can use relative widths of the
browser window. Here the window is divided into sixths: the first column
takes up half of the window, the second takes one third, and the third takes
one sixth. |
|
rows |
This attribute works
just like the cols attribute and takes the same values, but it is used to specify
the rows in the frameset. |
Border:- Border attribute is
used for border setting for frame. The value is enter from ‘1’ to ‘5’. The
value ‘0’ shows no border for the frame.
Frameborder:- This attribute is for
third dimensional border (3D). The value is enter from‘1’ to ‘5’.
Framespacing:- This attribute is used
for giving the spacing between frames. It also accept the integer value such
as:- “10”, “15”, “5” etc.
Name:- By using this attribute we put the
name of frame in the frameset.
Src:- By using this attribute we can put
the source for html document for the particular frame.
Marginwidth:- This attribute is used
for leaving the margins in widthwise for the frames used on the webpage.
Marginheight:- By using this attribute
we can modify the margins accordance with heightwise.
Note:-
Use the command given
below for supporting or not supporting frameset tag to a particular browser –
<noframes>
This browser does not support
frameset tag.
</noframes>
Form
Designing in HTML programming language
Forms are require to collect some
data from the side of site visitors. Such as:- Bio data, Review, Mail, or other
details for back-end use.
A form requires input data from the side of
visitors to send the necessary or important details to the back-end of the
particular site. The back-end application will perform
required processing on the passed data based on defined business logic inside
the application.
There are various form elements available
like text fields, text area fields, drop-down menus, radio buttons, checkboxes,
etc.
The HTML <form> tag
is used to create an HTML form and it has following syntax:
<form action="Script
URL" method="GET|POST">
form elements like input,
textarea etc.
</form>
Assignment –
<html>
<head>
<title>Normal Formal
Desigining</title>
<body>
<center><b><u>Fill
Your Details as given below </center></b></u> <p>
<form>
First Name : <input
type="text" name="first_name"/>
Middle Name : <input
type="text" name="middel_name"/>
Last Name : <input
type="text" name="last_name"/>
</form>
</body>
</head>
</html>
Assignment –
Create form for the following thing as
given below:-
Fill up your enquiry form:-
Applicant Name-
Father’s Name-
DOB –
NATIONLALITY-
HOBBIES –
HEIGHT –
ADDRESS
AT –
PO –
VIA –
PS –
DIST –
STATE –
PIN
MOB-
SIGNATURE
In HTML, we use different types of
‘Form Controls which are as follows:-
·
Text Input Control
·
Checkboxes Control
·
Radio Box Control
·
Select Box Control
·
File Select Control
·
Hidden Control
·
Clickable Button
·
Submit Button and
·
Reset Button
All the above controls are created
through ‘Form Tags’ in ‘html programming.
Details of All the above Controls
·
Text Input Control – In this we use three types of text input
controls –
o Single-line text input controls – This
control is used for the item that requires only one line user input. As for
example:-<input type= “text” name= “First _name”/> etc
o Attributes for ‘Input Tag’.
|
type |
Indicates the type of input
control and for text input control it will be set to text. |
||
|
name |
Used to give a name to the
control which is sent to the server to be recognized and get the value. |
||
|
value |
This can be used to provide
an initial value inside the control. |
||
|
size |
Allows to specify the width
of the text-input control in terms of characters.
|
·
Password Input Controls:- This is also
a single line input control which is used for creating a password. Syntax:-
By the following example we can easily
understands the password input control –
<html>
<head>
<title>Password
Input Control</title>
</head>
<body>
<form
>
User ID :
<input type="text" name="user_id" />
<br>
Password:
<input type="password" name="password" />
</form>
</body>
</html>
Multiple-line text input control:-
This option is used when we input more than one lines. Multiple-line control is
used by html <textarea> tag. Try the given below for multiple line-
<html>
<head>
<title>Multiple-Line
Input Control</title>
</head>
<body>
<form>
Description
: <br />
<textarea
rows="5" cols="50" name="description">
Enter
description here...
</textarea>
</form>
</body>
</html>
Checkbox Control:- Check Boxes
are used when we have to choose more than one option. In ‘HTML’ programming we
used <input> to modify this option. To follow the example given below to
command this option:-
<html>
<head>
<title>Checkbox
Control</title>
</head>
<body>
<form>
<input
type="checkbox" name="maths" value="on"> Maths
<input
type="checkbox" name="physics" value="on">
Physics
</form>
</body>
</html>
Radio Button Control:- This
option is used when we have choose one of the many options. In this, we also
use <input> tag in html programming. We can understand this option by the
example given below:-
<html>
<head>
<title>Radio
Box Control</title>
</head>
<body>
<form>
<input
type="radio" name="subject" value="maths">
Maths
<input
type="radio" name="subject" value="physics">
Physics
</form>
</body>
</html>
Select Box Control:- This option is
used for making a drop down button to select the option from the list in HTML
programming. For this we use <option> tag with <form> tag. This can
be understood by the example given
below:-
<html>
<head>
<title>Select
Box Control</title>
</head>
<body>
<form>
<select
name="dropdown">
<option
value="Maths" selected>Maths</option>
<option
value="Physics">Physics</option>
</select>
</form>
</body>
</html>
File Upload Box:- This option is used to upload files form the appropriate
drive or location. For this, we have to create a path for file selection which
is known as ‘File Upload Box’. By the help following example we can apply ‘File
Upload Box’ in HTML Programming:-
<html>
<head>
<title>File Upload Option in
HTML programming </title>
<body>
Upload your file from your location
</p>
<form>
<input type="File"
Name="fileupload" accept="image/*" />
</body>
</head>
</html>
Clickable Button in HTML Programming
through form designing
In
HTML Programming sometimes we have to create some clickable buttons like –
Submit Button, Reset, Button, Image etc these are created by the help of
<input> tag. By the following examples we can understand these
programming techniques –
<html>
<head>
<title>File
Upload Box</title>
</head>
<body>
<form>
<input
type="submit" name="submit" value="Submit" />
<input
type="reset" name="reset" value="Reset" />
<input
type="button" name="ok" value="OK" />
<input
type="image" name="imagebutton" src="/html/images/logo.png"
/>
</form>
</body>
</head>
</html>
JAVASCRIPT
JavaScript is also a programming language like
other programming languages which is mainly %used with Web %, Pages. This
language is very useful because it gives the interactivity to a web page. The
previous name of JavaScript is LiveScript.
A
JavaScript is a program which is included on an HTML page. On HTML page we
enclose the JavaScript program within <SCRIPT> and end it up with
</SCRIPT>. When we run it with a browser, it knows that this is a program
written under JavaScript it runs it to give us the result instead of just
giving the text of the script. The <SCRIPT> tag is most often found within the
<HEAD> section of the HTML page, though we can, if we wish have scripts
under the <BODY> section.
What we can do with JavaScript
There are lots of things which we can
do with JavaScript to enhance our Web page besides making it more interactive.
It allows us to have Web pages feedback by providing buttons on the Web pages.
We can create forms which the users of the Web page can fill to provide us with
the information needed by us. We can even do calculations on these forms using
CGI. It also allows us to create new windows, display alert boxes and messages
on the Web page.
Java and JavaScript
Java and JavaScript have only name in
common and nothing else. They are poles apart. Java is basically a programming
language which is enhancement of C++ having a distinctive feature of being able
to run on various machines and operating system like Windows NT, Mac OS or even
Unix.
JavaScript As Object Oriented Language
An object is some kind of a thing. A
computer, a mouse, etc., are all objects to JavaScript they are all objects it
deals with in Web browsers such as widows, forms and elements of the form such
as buttons and check boxes.
Events
Events are actions that the user
performs while visiting our page. Submitting a form and moving a mouse over an
image are two examples of events. JavaScript deals with commands called event
handlers. There are many as 12 JavaScript event handlers, as listed below. An
action by the user on the page triggers an event handler in your script.
Event Handlers
Event What
it handles
OnAbort - The user aborts loading the page
OnBlur - The user leaves the object.
OnChange – The user change
the object.
OnClick – The
user clicks on an object.
OnError - The
script encounters an error.
OnFocus - The
user makes an object active.
OnLoad - The object finishes loading.
OnMouseOver - The cursor moves over
an object.
OnMouseOut - The cursor moves off
an object.
OnSelect - The user selects the contents of an
object.
OnSubmit -
The user submits the form.
OnUnload - The user leaves the window.
Variables
In JavaScript variables are used as
we used in other programming language. “Variable” is a name that can be used to
store values. Variables can take different values but one at a time. These
values can be changed during the program execution.
Variable
names may be consisted of uppercase character, lowercase character and
underscore (_). Rules for giving the name to the variable are as follows:-
1.
First letter should be a letter or underscore.
2.
The variable names cannot be a keyword.
3.
Uppercase and lowercase letters are significant.
Constant/Literals
Constant is a value that can be
stored in the memory and can be changed during execution of the program. There
are generally three types of constants:-
1.
Numeric Constant – Numeric Constants are numeric digits which
may or may not have decimal point (.). These are the rules for defining numeric
constant.
a. Numeric Constant must have
at least one digit.
b. No comma and space are
allowed within the numeric constant.
c. Numeric
constants can either be positive or negative but default sign is always
positive. There are two types of Numeric Constants:-
i.
Integer Constant – Integers Constants are whole numbers which
has no decimal point.
ii.
Real Constant (Floating Point) – Real Constant are the
numbers which hold the decimal point.
iii.
Character Constant – A character constant is a single
character that is enclosed within single quote (‘…..’).
iv.
String Constant – A string constant has a zero, one or more
than one character. A string constant is enclosed within double quotes
(“……..”).
v.
Symbolic Constant – A symbolic constant is a name that
substitutes for a sequence of characters. The character may represent a numeric
constant, character constant or a string constant.
0 Comments