HTML- Hyper Text MarkUp Language
This is the language which is used to design Web Pages.There are two types of tags in HTML.
· Paired Tags – open and closed tags.eg: <H1>,</H1>
· Unpaired Tags eg: <br>
The MarkUp describes the :
HTML Page Format:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transistional//EN”>
<HTML>
<HEAD>
<TITLE> HTML PAGE</TITLE>
</HEAD>
<BODY>
<H1> Hello World </H1>
<! Rest of page goes here. This is a comment. >
</BODY>
BODY Element
<BODY attributename="attributevalue">
n Deprecated attributes (but still used)
n BACKGROUND=“image.jpg” (can be tiled)
n BGCOLOR=color
n TEXT=color
n LINK=color (unvisited links)
n VLINK=color (visited links)
n ALINK=color (when selected )
Headings
<HTML>
<HEAD>
<TITLE>Document Headings</TITLE>
</HEAD>
<BODY>
Samples of the six heading types:
<H1>Level-1 (H1)</H1>
<H2 ALIGN="center">Level-2 (H2)</H2>
<H3><U>Level-3 (H3)</U></H3>
<H4 ALIGN="right">Level-4 (H4)</H4>
<H5>Level-5 (H5)</H5>
<H6>Level-6 (H6)</H6>
</BODY>
</HTML>
<H1 ...> text </H1> -- largest of the six
<H2 ...> text </H2>
<H3 ...> text </H3>
<H4 ...> text </H4>
<H5 ...> text </H5>
<H6 ...> text </H6> -- smallest of the six
ALIGN="position" --left (default), center or right
Paragraph
Ø <P> defines a paragraph.
Ø Add ALIGN="position" (left, center, right)
Ø Multiple <P>'s do not create blank lines.
Ø Use <BR> for blank line.
Ø Fully-specified text uses <P> and </P>.
Ø But </P> is optional.
How to Create and View an HTML document?
1.Use an text editor such as Editpad to write the document.
2.Save the file as filename.html on a PC. This is called the Document Source.
3.Open Netscape (or any browser) Off-Line .
4.Switch to Netscape.
5.Click on File, Open File and select the filename.html document that you just created.
6.Your HTML page should now appear just like any other Web page in Netscape.
7.You may now switch back and forth between the Source and the HTML Document .
HTML Tags
· <HEAD>...</HEAD>-- contains information about the document
· <TITLE>...</TITLE>-- puts text on the browser's title bar.
Create a List
· Unordered list : <UL><li>
· Ordered list: <OL><li>
· Nested
How to Add Images
· Use <IMG SRC=imagefilename> tags
· Attributes of IMG tag
· -width,height
· -Alt
· -Align
· -<Img src=my.gif width=50 height=50 align=right alt=“My image”>
How to add Link
<TABLE> table tag
<CAPTION> optional table title
<TR> table row
<TH> table column header
<TD> table data element
Example:
<TABLE BORDER=1>
<CAPTION>Table Caption</CAPTION>
<TR><TH>Heading1</TH> <TH>Heading2</TH></TR>
<TR><TD>Row1 Col1 Data</TD><TD>Row1 Col2 Data</TD></TR>
<TR><TD>Row2 Col1 Data</TD><TD>Row2 Col2 Data</TD></TR>
<TR><TD>Row3 Col1 Data</TD><TD>Row3 Col2 Data</TD></TR>
</TABLE>
TABLE Element Attributes
Table Row Attributes – TR
Valid for the table row:
ALIGN -- left, center, right
VALIGN -- top, middle, bottom
BGCOLOR -- background color
Example:
<TABLE ALIGN="center" WIDTH="300" HEIGHT="200">
<TR ALIGN="left" VALIGN="top" BGCOLOR="red"><TD>One</TD><TD>Two</TD>
<TR ALIGN="center" VALIGN="middle" BGCOLOR="blue"><TD>Three</TD><TD>Four</TD>
<TR ALIGN="right" VALIGN="bottom" BGCOLOR="yellow"><TD>Five</TD><TD>Six</TD>
</TABLE>
Table Cell Attributes – TD
Valid for the table cell:
colspan -- how many columns this cell occupies
rowspan – how many rows this cell occupies
Example:
<TABLE ALIGN="center" WIDTH="300" HEIGHT="200" border="1">
<TR>
<TD colspan="1" rowspan="2">a</TD>
<TD colspan="1" rowspan="1">b</TD>
</TR>
<TR>
<TD colspan="1" rowspan="1">c</TD>
</TR>
</TABLE>
Frames
· Frames help control navigation and display
· <FRAME> attributes include
· FRAMEBORDER – yes or 1 for borders
· FRAMESPACING – width of border
· BORDERCOLOR – color
· SRC – location of HTML to display in frame
· NAME – destination for TARGET attribute
This is the language which is used to design Web Pages.There are two types of tags in HTML.
· Paired Tags – open and closed tags.eg: <H1>,</H1>
· Unpaired Tags eg: <br>
The MarkUp describes the :
- Layout
- Appearance
- Content
HTML Page Format:
- HEAD
- BODY
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transistional//EN”>
<HTML>
<HEAD>
<TITLE> HTML PAGE</TITLE>
</HEAD>
<BODY>
<H1> Hello World </H1>
<! Rest of page goes here. This is a comment. >
</BODY>
BODY Element
<BODY attributename="attributevalue">
n Deprecated attributes (but still used)
n BACKGROUND=“image.jpg” (can be tiled)
n BGCOLOR=color
n TEXT=color
n LINK=color (unvisited links)
n VLINK=color (visited links)
n ALINK=color (when selected )
Headings
<HTML>
<HEAD>
<TITLE>Document Headings</TITLE>
</HEAD>
<BODY>
Samples of the six heading types:
<H1>Level-1 (H1)</H1>
<H2 ALIGN="center">Level-2 (H2)</H2>
<H3><U>Level-3 (H3)</U></H3>
<H4 ALIGN="right">Level-4 (H4)</H4>
<H5>Level-5 (H5)</H5>
<H6>Level-6 (H6)</H6>
</BODY>
</HTML>
<H1 ...> text </H1> -- largest of the six
<H2 ...> text </H2>
<H3 ...> text </H3>
<H4 ...> text </H4>
<H5 ...> text </H5>
<H6 ...> text </H6> -- smallest of the six
ALIGN="position" --left (default), center or right
Paragraph
Ø <P> defines a paragraph.
Ø Add ALIGN="position" (left, center, right)
Ø Multiple <P>'s do not create blank lines.
Ø Use <BR> for blank line.
Ø Fully-specified text uses <P> and </P>.
Ø But </P> is optional.
How to Create and View an HTML document?
1.Use an text editor such as Editpad to write the document.
2.Save the file as filename.html on a PC. This is called the Document Source.
3.Open Netscape (or any browser) Off-Line .
4.Switch to Netscape.
5.Click on File, Open File and select the filename.html document that you just created.
6.Your HTML page should now appear just like any other Web page in Netscape.
7.You may now switch back and forth between the Source and the HTML Document .
- switch to Notepad with the Document Source.
- make changes.
- save the document again..
- switch back to Netscape.
- click on RELOAD and view the new HTML Document.
- switch to Notepad with the Document Source.
HTML Tags
· <HEAD>...</HEAD>-- contains information about the document
· <TITLE>...</TITLE>-- puts text on the browser's title bar.
Create a List
· Unordered list : <UL><li>
· Ordered list: <OL><li>
· Nested
How to Add Images
· Use <IMG SRC=imagefilename> tags
· Attributes of IMG tag
· -width,height
· -Alt
· -Align
· -<Img src=my.gif width=50 height=50 align=right alt=“My image”>
How to add Link
- Use <A href=filename|URL></a>tags
<TABLE> table tag
<CAPTION> optional table title
<TR> table row
<TH> table column header
<TD> table data element
Example:
<TABLE BORDER=1>
<CAPTION>Table Caption</CAPTION>
<TR><TH>Heading1</TH> <TH>Heading2</TH></TR>
<TR><TD>Row1 Col1 Data</TD><TD>Row1 Col2 Data</TD></TR>
<TR><TD>Row2 Col1 Data</TD><TD>Row2 Col2 Data</TD></TR>
<TR><TD>Row3 Col1 Data</TD><TD>Row3 Col2 Data</TD></TR>
</TABLE>
TABLE Element Attributes
- ALIGN=position -- left, center, right for table.
- BORDER=number -- width in pixels of border (including any cell spacing, default 0).
- CELLSPACING=number -- spacing in pixels between cells, default about 3.
- CELLPADDING=number -- space in pixels between cell border and table element, default about 1.
- WIDTH=number[%]-- width in pixels or percentage of page/frame width.
Table Row Attributes – TR
Valid for the table row:
ALIGN -- left, center, right
VALIGN -- top, middle, bottom
BGCOLOR -- background color
Example:
<TABLE ALIGN="center" WIDTH="300" HEIGHT="200">
<TR ALIGN="left" VALIGN="top" BGCOLOR="red"><TD>One</TD><TD>Two</TD>
<TR ALIGN="center" VALIGN="middle" BGCOLOR="blue"><TD>Three</TD><TD>Four</TD>
<TR ALIGN="right" VALIGN="bottom" BGCOLOR="yellow"><TD>Five</TD><TD>Six</TD>
</TABLE>
Table Cell Attributes – TD
Valid for the table cell:
colspan -- how many columns this cell occupies
rowspan – how many rows this cell occupies
Example:
<TABLE ALIGN="center" WIDTH="300" HEIGHT="200" border="1">
<TR>
<TD colspan="1" rowspan="2">a</TD>
<TD colspan="1" rowspan="1">b</TD>
</TR>
<TR>
<TD colspan="1" rowspan="1">c</TD>
</TR>
</TABLE>
Frames
· Frames help control navigation and display
· <FRAME> attributes include
· FRAMEBORDER – yes or 1 for borders
· FRAMESPACING – width of border
· BORDERCOLOR – color
· SRC – location of HTML to display in frame
· NAME – destination for TARGET attribute