HTML
HYPERTEXT MARKUP LANGUAGE
A web page is made up of elements, each of which is defined by an HTML Code or Tags. A Tag
is always enclosed in angle brackets and most Tags come in pair, with an opening and closing
Tags. The closing Tag is the same as the opening Tag, but starts with a Forward Slash.
All HTML Document should include 5 structure Tags, nested and ordered as in the following-
And always type in Lower Case Alphabets.
<!DOCTYPE HTML “SHOULD INCLUDE 5 TAGS TRANSITIONAL // EN”>
<HTML>
<HEAD>
<TITLE>……………. </TITLE>
</HEAD>
<BODY>…………… </BODY>
</HTML>
<! DOCKTYPE……> = This Tag tells browsers the HTML version with which the
document compiles.
<HTML> = This tag identifies the document as an HTML document.
<HEAD> = This Tag contains information about the document, including its title,
scripts used, style definition, and document description.
<TITLE> = This Tag contains the document title. The title does not appear within the
browser window, it is usually visible in the browser title bar.
<BODY> = This Tag enclosed all the Tags, attributes, and information that you want a
visitor’s browser to display.
COMMON TAGS ARE-
<P> = This Tag is called Paragraph Tag which is appropriate for regular body text. This
Tag breaks the sentence to start a paragraph.
<BR> = This Tag are called Line Break Tag, it can be used to break the sentence in 2
piece.
EXAMPLE OF USING ALL THE TAGS.
<HTML>
<HEAD>
<TITLE>Used to create name in the Title Bar</TITLE>
</HEAD>
<BODY>
<P>To create new paragraph and <BR> used to break the line or sentence.</p>
<HR>See this tag.
</BODY>
</HTML>
COMMON CHARACTER FORMATTING TAGS ARE-
<B> = Applies Boldface.
<I> = Applies Italics.
<U> = Applies Underline.
<S>, <STRIKE> = Applies Strike through the text.
<UL> = Applies Tab.
<SUB> = Format text as subscript.
<SUP> = Format text as superscript.
EXAMPLE USED SOME CHARACTER FORMATTING TAGS ARE-
<BODY>
<P>
Bold=<B>Hello</B><BR>
Italics=<I>Hello</I><BR>
Underline=<U>Hello</U><BR>
Strike Through=<S>Hello</S><BR>
Tab=<UL>Hello</UL><BR>
Subscript=H<SUB>2</SUB>O<BR>
Superscript=MC<SUP>2</SUP>
</P>
</BODY>
CREATING HEADINGS-
Headings break up large area of text, announce topics to follow and arrange information
according to a logical hierarchy. HTML provides 6 level of heading, <H1> is the highest level
and <H6> is the smallest level.
<H1>…..</H1> Heading 1
<H2>…..</H2> Heading 2
<H3>…..</H3> Heading 3
<H4>…..</H4> Heading 4
<H5>…..</H5> heading 5
<H6>…..</H6> Heading 6
EXAMPLE USING HEADING
<BODY>
<H1>First Level Heading</H1>
<H2>Second Level Heading</H2>
<H3>Third Level Heading</H3>
<H4>Fourth Level Heading</H4>
<H5>Fifth Level Heading</H5>
<H6>Sixth Level Heading</H6>
</BODY>
ALIGNMENT EFFECT ATTRIBUTES
ALIGN=“LEFT” OR LEFT
ALIGN=“CENTER” OR CENTER
ALIGN=“RIGHT” OR RIGHT
ALIGN=“JUSTIFY” OR JUSTIFY
EXAMPLE OF USING ALIGNMENT
<BODY>
<H1 ALIGN=CENTER>Header</H1>
<P ALIGN=RIGHT>Paragraph</P>
</BODY>
POINT- Alignment are write inside the Tags but except some condition. Only
ALIGN=CENTER, we can write directly <CENTER> and write outside the Tag.
<CENTER>……</CENTER>
EXAMPLE USED OF ALIGNMENT CENTER
<BODY>
<H1><CENTER>Header</CENTER></H1>
<CENTER>Center</CENTER>
</BODY>
COMMON FONT CHARACTERISTICS
<FONT> = Set font characteristics for Text.
SIZE=“..” = Specifies relative font size on a scale of 1 through 7.3 is the default or
normal size. You can also specify the relative size by using + and -, for example +2.
COLOR=“..” = Specifies font color in #RRGGBB or with color name.
FACE=“..” = Specifies type face or font style.
EXAMPLE USING FONT CHARACTERISTICS
<BODY>
<P><FONT COLOR=“RED” SIZE=“5” FACE=“MONOTYPE CORSIVA”>Example of font
tags used</p>
</BODY>
HORIZONTAL RULE ATTRIBUTES
<HR> = Horizontal Ruler.
SIZE=“..” = Specifies rule height, measured in pixels.
WIDTH=“..” = Specifies rule width (length) measured in pixels.
WIDTH=“..%” = Specifies rule width (length) measured as a percentage of the
document width.
ALIGN=“..” = Left, Center, Right.
NOSHADE = Specifies that the rule has no shading.
EXAMPLE USING HORIZONTAL RULES
<BODY>
<H3>Fun with horizontal rules.</H3>
<P>Fat, Long, Shade</P>
<HR WIDTH=“80%” SIZE=8>
<P>Center, and Thin</P>
<HR ALIGN=CENTER WIDTH=“50%”>
<P>Noshade, Fat, Long</P>
<HR NOSHADE WIDTH= “200” SIZE= “8”>
</BODY>
SETTING BACKGROUND COLOR
<BODY BGCOLOR=“…”> = This Tag change the background color.
EXAMPLE SET BACKGROUND COLOR
<BODY BGCOLOR=“RED”>
SETTING BACKGROUND IMAGE
<BODY BACKGROUND=LOCATION\FILE [Link] TYPE> = This
Tag set the background image. Under this tag we can write anything.
EXAMPLE SET BACKGROUND IMAGE
<BODY BACKGROUND=“C:\USERS\PUBLIC\PICTURES\SAMPLE
PICTURE\[Link]”>
CREATING LISTS
Lists are a great way to provide information in a structured, easy to read format.
List comes in 2 categories
<OL> = Numbered (Ordered)
<UL> = Bulleted (Unordered).
LISTS AND LINE ITEM TAGS.
<UL> = Specifies that the information appears as an Unordered (Bulleted) lists.
<LI> = Specifies that the line item in either Ordered (Numbered) or Unordered
(Bulleted) lists.
ORDERED (NUMBERED) LISTS
<OL> = Specifies that the information appears as an Ordered (Numbered) lists.
EXAMPLE OF ORDERED LISTS
<BODY>
<OL>
<LI>List 1</LI>
<LI>List 2</LI>
</OL>
</BODY>
NOTE = Directly type <OL> default value Arabic Number.
LIST ATTRIBUTES OF ORDERED LIST.
TYPE=“A” = Upper Case Alphabets.
TYPE=“a” = Lower Case Alphabets.
TYPE=“I” = Upper Case Roman Numbers.
TYPE=“i” = Lower Case Roman Numbers.
TYPE=“1” = Arabic Numbers.
EXAMPLE OF ORDERED LIST WITH TYPE (Upper Case Roman Number)
<BODY>
<OL TYPE= “I”>
<LI>List 1</LI>
<LI>List 2</LI>
</OL>
</BODY>
EXAMPLE OF ORDERED LIST WITH TYPE (Lower Case Alphabets)
<BODY>
<OL TYPE= “a”>
<LI>List 1</LI>
<LI>List 2</LI>
</OL>
</BODY>
IMPORTANT ORDERED LIST TAGS.
<LI VALUE= “..”> = This Tag directly starts the number which we put.
<LI TYPE= “..” VALUE= “..”> = This Tag directly starts the number which we put
and with single value of Type= “..” and after that default value from…
<OL TYPE= “..” START= “..”> = This Tag directly start the number which we put
and so on with TYPE= “..”.
EXAMPLE OF ORDERED LIST TYPE AND VALUE.
<BODY>
<OL TYPE= “i”>
<LI VALUE=“5”>List 1</LI>
<LI> List 2</LI>
</OL>
</BODY>
OR
<BODY>
<OL>
<LI TYPE= “I” VALUE= “5”>List 1</LI>
<LI>List 2</LI>
</OL>
</BODY>
OR
<BODY>
<OL TYPE= “i” START= “5”>
<LI>List 1</LI>
<LI>List 2</LI>
</OL>
</BODY>
BULLETED (UNORDERED) LISTS
<UL> = Specifies that the information appears as an Unordered (Bulleted) lists.
EXAMPLE OF UNORDERED LISTS
<BODY>
<UL>
<LI>List 1</LI>
<LI>List 2</LI>
</UL>
</BODY>
LIST ATTRIBUTE OF UNORDERED LISTS
TYPE= “DISC”
TYPE= “SQUARE”
TYPE= “CIRCLE”
EXAMPLE OF BULLETED LIST WITH TYPE
<BODY>
<UL TYPE= “SQUARE”>
<LI>List 1</LI>
<LI>List 2</LI>
</UL>
</BODY>
USING OTHER SYMBOLS (=>, $, #....)
EXAMPLE USED OTHER SYMBOLS
<BODY>
=>List 1
% List 2
</BODY>
OR
<BODY>
<FONT FACE= “Webdings”>C List 1
<FONT FACE= “Webdings”>G List 2
</BODY>
HTML
HYPERTEXT MARKUP LANGUAGE
A web page is made up of elements, each of which is defined by an HTML Code or Tags. A Tag
is always enclosed in angle brackets and most Tags come in pair, with an opening and closing
Tags. The closing Tag is the same as the opening Tag, but starts with a Forward Slash.
All HTML Document should include 5 structure Tags, nested and ordered as in the following-
And always type in Lower Case Alphabets.
<!DOCTYPE HTML “SHOULD INCLUDE 5 TAGS TRANSITIONAL // EN”>
<HTML>
<HEAD>
<TITLE>……………. </TITLE>
</HEAD>
<BODY>…………… </BODY>
</HTML>
<! DOCKTYPE……> = This Tag tells browsers the HTML version with which the
document compiles.
<HTML> = This tag identifies the document as an HTML document.
<HEAD> = This Tag contains information about the document, including its title,
scripts used, style definition, and document description.
<TITLE> = This Tag contains the document title. The title does not appear within the
browser window, it is usually visible in the browser title bar.
<BODY> = This Tag enclosed all the Tags, attributes, and information that you want a
visitor’s browser to display.
COMMON TAGS ARE-
<P> = This Tag is called Paragraph Tag which is appropriate for regular body text. This
Tag breaks the sentence to start a paragraph.
<BR> = This Tag are called Line Break Tag, it can be used to break the sentence in 2
piece.
<HR> = This Tag are used to break a paragraph and so called horizontal ruler break.
EXAMPLE OF USING ALL THE TAGS.
<HTML>
<HEAD>
<TITLE>Used to create name in the Title Bar</TITLE>
</HEAD>
<BODY>
<P>To create new paragraph and <BR> used to break the line or sentence.</p>
<HR>See this tag.
</BODY>
</HTML>
OTHER PARAGRAPH FORMATTING TAGS ARE-
<ADDRESS> = Used for Address and Contact information, often appear in Italics.
<BLOCKQUOTE> = Used for formatting a Quotation, or in other words Tab use.
<PRE> = Usually appears in a fixed width font with ample space between words and
lines.
EXAMPLE USING PARAGRAPH FORMATTING TAGS ARE
<BODY>
<P><ADDRESS> Name …. <BR> Address …. <BR> City ….. <BR> </ADDRESS > </P>
<P><BLOCKQUOTE>Used Tab in the Line or Paragraph</BLOCKQUOTE></P>
<P><PRE>Appears in fixed width</PRE></P>
</BODY>
COMMON CHARACTER FORMATTING TAGS ARE-
<B> = Applies Boldface.
<I> = Applies Italics.
<U> = Applies Underline.
<S>, <STRIKE> = Applies Strike through the text.
<UL> = Applies Tab.
<CODE>, <PRE> = Display program code usually appears in fixed width.
<STRONG> = Applies strong emphasis usually display as bold.
<SUB> = Format text as subscript.
<SUP> = Format text as superscript.
<TT> = Applies a fixed width font.
<EM> = Applies emphasis, display as italics.
<VAR> = Display variables or arguments.
<CITE> = Indicate citation or reference.
<BLINK> = Makes text blink, usually considered highly unprofessional.
<BIG> = Text become bigger in size from normal size.
<SMALL> = Text becomes smaller in size from normal size.
<ACRONYM TITLE= “WHAT EVER WE WRITE”> = This indicate the
presence of abbreviation. Other word when the cursor put in the text it’s indicating the
title what we write.
<DNF> = Definition, used to mark the first time that we define a term.
<KBD> = Keyboard element, indicate text that the viewer type.
<SAMP> = Sample element, indicate sample output text from the computer program.
EXAMPLE USED SOME CHARACTER FORMATTING TAGS ARE-
<BODY>
<P>Bold=<B>Hello</B><BR>
Italics=<I>Hello</I><BR>
Underline=<U>Hello</U><BR>
Strike Through=<S>Hello</S><BR>
Tab=<UL>Hello</UL><BR>
Strong=<STRONG>Hello</STRONG><BR>
Subscript=H<SUB>2</SUB>O<BR>
Superscript=MC<SUP>2</SUP>
</P>
</BODY>
EXAMPLE 2 USED SOME CHARACTER FORMATTING TAGS ARE-
<BODY>
<P>CITE=Hello <CITE>How are u</CITE> Friend<BR>
CODE=Hello <CODE>How are u</CODE> Friend<BR>
HRU=Hello (HRU) <DFN>How Are You</DFN> Friend<BR>
EM=Hello <EM>How are u</EM> Friend<BR>
KBD=Hello <KBD>How are u</KBD> Friend<BR>
SAMP=Hello <SAMP>How are u</SAMP> Friend<BR>
VAR=Hello <VAR>How are u</VAR> Friend<BR>
</BODY>
PAGE LAYOUT TAGS <BODY> WITHIN BODY TAG WE CAN ADD THE
TAG-
TOPMARGIN= “N”
LEFTMARGIN= “N”
RIGHTMARGIN= “N”
BOTTOMMARGIN= “N”>
CREATING HEADINGS-
Headings break up large area of text, announce topics to follow and arrange information
according to a logical hierarchy. HTML provides 6 level of heading, <H1> is the highest level
and <H6> is the smallest level.
<H1>…..</H1> Heading 1
<H2>…..</H2> Heading 2
<H3>…..</H3> Heading 3
<H4>…..</H4> Heading 4
<H5>…..</H5> heading 5
<H6>…..</H6> Heading 6
EXAMPLE USING HEADING
<BODY>
<H1>First Level Heading</H1>
<H2>Second Level Heading</H2>
<H3>Third Level Heading</H3>
<H4>Fourth Level Heading</H4>
<H5>Fifth Level Heading</H5>
<H6>Sixth Level Heading</H6>
</BODY>
ALIGNMENT EFFECT ATTRIBUTES
ALIGN=“LEFT” OR LEFT
ALIGN=“CENTER” OR CENTER
ALIGN=“RIGHT” OR RIGHT
ALIGN=“JUSTIFY” OR JUSTIFY
ALIGN= “TOP”
ALIGN= “MIDDLE”
ALIGN= “BOTTOM”
EXAMPLE OF USING ALIGNMENT
<BODY>
<H1 ALIGN=CENTER>Header</H1>
<P ALIGN=RIGHT>Paragraph</P>
</BODY>
POINT- Alignment are write inside the Tags but except some condition. Only
<ALIGN=CENTER>, we can write directly or outside the Tag.
<CENTER>……</CENTER>
EXAMPLE USED OF ALIGNMENT CENTER
<BODY>
<H1><CENTER>Header</CENTER></H1>
<CENTER>Center</CENTER>
</BODY>
COMMON FONT CHARACTERISTICS
<FONT> = Set font characteristics for Text.
SIZE=“..” = Specifies relative font size on a scale of 1 through 7.3 is the default or
normal size. You can also specify the relative size by using + and -, for example +2.
COLOR=“..” = Specifies font color in #RRGGBB or with color name.
FACE=“..” = Specifies type face or font style.
<BASEFONT> = Set the text characteristics for the document.
EXAMPLE USING FONT CHARACTERISTICS
<BODY>
<P><FONT COLOR=“RED” SIZE=“5” FACE=“MONOTYPE CORSIVA”>Example of font
tags used</p>
</BODY>
HORIZONTAL RULE ATTRIBUTES
<HR> = Horizontal Ruler.
SIZE=“..” = Specifies rule height, measured in pixels.
WIDTH=“..” = Specifies rule width (length) measured in pixels.
WIDTH=“..%” = Specifies rule width (length) measured as a percentage of the
document width.
ALIGN=“..” = Left, Center, Right.
NOSHADE = Specifies that the rule has no shading.
EXAMPLE USING HORIZONTAL RULES
<BODY>
<H3>Fun with horizontal rules.</H3>
<P>Fat, Long, Shade</P>
<HR WIDTH=“80%” SIZE=8>
<P>Center, and Thin</P>
<HR ALIGN=CENTER WIDTH=“50%”>
<P>Noshade, Fat, Long</P>
<HR NOSHADE WIDTH= “200” SIZE= “8”>
</BODY>
SETTING TEXT COLOR ACTIVE LINK Within the Body Tags.
<BODY TEXT=“..” LINK=“..”>
TEXT AND LINK COLOR ATTRIBUTES
TEXT=“..” = Sets the color for all the text within the document with a color name or
#RRGGBB value.
ALINK=“..” = Sets the color for active links which the links at the time the visitor click
on them, with color name or #RRGGBB value.
VLINK=“..” = Sets the color for links the visitor has followed with a color name or
#RRGGBB value.
LINK=“..” = Sets the color for unvisited links.
SETTING BACKGROUND COLOR
<BODY BGCOLOR=“…”> = This Tag change the background color.
EXAMPLE SET BACKGROUND COLOR
<BODY BGCOLOR=“RED”>
SETTING BACKGROUND IMAGE
<BODY BACKGROUND=LOCATION\FILE [Link] TYPE> = This
Tag set the background image. Under this tag we can write anything.
EXAMPLE SET BACKGROUND IMAGE
<BODY BACKGROUND=“C:\USERS\PUBLIC\PICTURES\SAMPLE
PICTURE\[Link]”>
BACKGROUND PROPERTIES
BACKGROUND-REPEAT = REPEAT, REPEAT-X, REPEAT-Y, NO-
REPEAT
SETTING BACKGROUND SOUND
<BGSOUND SRC= “LOCATION\FILE [Link] TYPE”> = This Tag set
the background sound. Used in the document head of document.
<BGSOUND SRC= “LOCATION\FILE [Link] TYPE” LOOP=
“N”> = This Tag set the background sound and loop denote number of times a
background sound repeats, the value infinite is the default. It means repeats continuously.
AUDIO SOUND FILE FORMAT
MIDI = Musical Instrument Digital Interface
AIFF = Audio Interchange File Format.
AU = Basic Audio
WAV = Wave File
MP3 = Multimedia Protocol V.3
VIDEO SOUND FILE FORMAT-
AVI = Audio Video Interleave.
MPEG = Motion Picture Experts Group.
QUICK TIME
EXAMPLE SET BACKGROUND SOUND
<BGSOUND SRC= “C:\USERS\PUBLIC\MUSIC\SAMPLE MUSIC\MAID WITH THE
FLAXEN HAIR.MP3” LOOP=”INFINITE”>
EXAMPLE TO SET VIDEO
<EMBED SRC= “LOCATION\FILE [Link] TYPE”
MULTIMEDIA FILE TAGS ATTRIBUTES
<BGSOUND> = Embeds a background sound file.
<BMBED> = Places an embedded object into a document.
ALIGN= “..” = Indicates how the embedded object is positioned.
HEIGHT= “N” = Specifies the vertical dimension.
WIDTH= “N” = Indicate horizontal dimension.
HIDDEN = Should not visible.
NAME= “…” = Gives the object name.
AUTOSTART= “TRUE OR FALSE” = The value can be TRUE automatically
starts, or FALSE visitor must do something.
CREATING LISTS
Lists are a great way to provide information in a structured, easy to read format.
List comes in 2 categories
Numbered (Ordered).
Bulleted (Unordered).
LISTS AND LINE ITEM TAGS.
<UL> = Specifies that the information appears as an Unordered (Bulleted) lists.
<LI> = Specifies that the line item in either Ordered (Numbered) or Unordered
(Bulleted) lists.
ORDERED (NUMBERED) LISTS
<OL> = Specifies that the information appears as an Ordered (Numbered) lists.
EXAMPLE OF ORDERED LISTS
<BODY>
<OL>
<LI>List 1</LI>
<LI>List 2</LI>
</OL>
</BODY>
NOTE = Directly type <OL> default value Arabic Number.
LIST ATTRIBUTES OF ORDERED LIST.
TYPE=“A” = Upper Case Alphabets.
TYPE=“a” = Lower Case Alphabets.
TYPE=“I” = Upper Case Roman Numbers.
TYPE=“i” = Lower Case Roman Numbers.
TYPE=“1” = Arabic Numbers.
EXAMPLE OF ORDERED LIST WITH TYPE
<BODY>
<OL TYPE= “I”>
<LI>List 1</LI>
<LI>List 2</LI>
</OL>
</BODY>
IMPORTANT ORDERED LIST TAGS.
<LI VALUE= “..”> = This Tag directly starts the number which we put.
<LI TYPE= “..” VALUE= “..”> = This Tag directly starts the number which we put
and with single value of Type= “..” and after that default value from…
<OL TYPE= “..” START= “..”> = This Tag directly start the number which we put
and so on with TYPE= “..”.
EXAMPLE OF ORDERED LIST TYPE AND VALUE.
<BODY>
<OL TYPE= “i”>
<LI VALUE=“5”>List 1</LI>
<LI> List 2</LI>
</OL>
</BODY>
OR
<BODY>
<OL>
<LI TYPE= “I” VALUE= “5”>List 1</LI>
<LI>List 2</LI>
</OL>
</BODY>
OR
<BODY>
<OL TYPE= “i” START= “5”>
<LI>List 1</LI>
<LI>List 2</LI>
</OL>
</BODY>
BULLETED (UNORDERED) LISTS
<UL> = Specifies that the information appears as an Unordered (Bulleted) lists.
EXAMPLE OF UNORDERED LISTS
<BODY>
<UL>
<LI>List 1</LI>
<LI>List 2</LI>
</UL>
</BODY>
LIST ATTRIBUTE OF UNORDERED LISTS
TYPE= “DISC”
TYPE= “SQUARE”
TYPE= “CIRCLE”
EXAMPLE OF BULLETED LIST WITH TYPE
<BODY>
<UL TYPE= “SQUARE”>
<LI>List 1</LI>
<LI>List 2</LI>
</UL>
</BODY>
USING OTHER SYMBOLS (=>, $, #....)
EXAMPLE USED OTHER SYMBOLS
<BODY>
=>List 1
% List 2
</BODY>
OR
<BODY>
<FONT FACE= “Webdings”>C List 1
<FONT FACE= “Webdings”>G List 2
</BODY>
SETTING BACKGROUND FOR TAGS (<LI>, <I>, <B>, ETC)
STYLE=BACKGROUND=COLORSET
STYLE= “BACKGROUND: COLORSET”
NOTE = We can write inside the Tag.
EXAMPLE SETTING BACKGROUND FOR TAGS
<EM STYLE=“BACKGROUND: RED”>EMPHESIS</EM>
SETTING TITLE FOR TAGS
TITLE= “WHAT EVER WE WRITE/DEFINATION LIST”
EXAMPLE SETTING TITLE FOR TAGS
<I TITLE=ITALICS>TITLE</I>
SETTING BODY TEXT COLOR, LINK, VLINK, ALINK.
TEXT= “COLOR” = Used in the text of the body tags or whole document.
EXAMPLE USING SETTING BODY TEXTCOLOR
<BODY TEXT COLOR= “RED”>
LINK= “COLOR” = Add link attribute to set the link color.
EXAMPLE USING LINK ATTRIBUTE
<BODY LINK= “RED”
VLINK= “COLOR” = Attribute to set the color for visitor links.
EXAMPLE USING VLINK
<BODY VLINK= “RED”
ALINK= “COLOR” = Attribute to set active links color.
EXAMPLE USING ALINK
<BODY ALINK= “RED”>
INCLUDE PICTURE SEARCH IN THE PAGE
<ING SRC= “LOCATION\FILE [Link] TYPE” >
EXAMPLE IMAGE SEARCHING
<IMG SRC= =“C:\USERS\PUBLIC\PICTURES\SAMPLEPICTURE \ CHRYSTHEMUM .
JPG”>
EXAMPLE IMAGE SEARCH AND USED WIDTH, HEIGHT, ALIGN AND
OTERS..
<BODY>
WRITE ANYTHING……….
<IMG SRC= “LOCATION\FILE [Link] TYPE” WIDTH= “146” HEIGHT= “98”
ALIGN= “RIGHT” ALT= “NAME”>
<P>……. WRITE ANYTHING …..</P>
</BODY>
HYPERLINK WITHIN THE WEBPAGE
<A> = HTML ANCHOR TAG, DEFINE A HYPERLINK.
<A HREF= “LOCATION\FILE [Link] TYPE”>NAME</A>
TITLE= “NAME WHATEVER WE WANT”
<A HREF= “LOCATION\FILE [Link] TYPE” TITLE= “NAME” >
NAME</A>
EXAMPLE
<BODY>
A <A HREF= “LOCATION\FILE [Link] TYPE” TITLE= “NAME”>NAME</A> IS
HYPERLINK WITH OTHER.
</BODY>
EXAMPLE IMAGE SEARCH AND USED HYPERLINK
<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#FF0000" VLINK="#800080"
ALINK="#FF0000">
<DIV ALIGN="CENTER">
<A HREF="C:\Users\Public\Pictures\Sample Pictures\[Link]">
<IMG BORDER="0" SRC="C:\Users\Public\Pictures\Sample Pictures\[Link]" HEIGHT
= "323" WIDTH"423"></A>
</DIV>
</BODY>
ARRANGING ITENS WITHIN TABLE, BASIC HTML TABLE BUILDING
TAGS ARE
<CAPTION> = Optional description of table.
<TABLE> = Begins the table definition.
<TR> = Defines a new row in the table.
<TD> = Defines a single cell within the table.
EXAMPLE USING TABLE TAGS
<BODY>
<TABLE>
<TR>
<TD>Cell 1</TD> <TD>Cell A</TD>
<TD>Cell 2</TD> <TD>Cell B</TD>
</TR>
</TABLE>
</BODY>
NOTE = Without table Border table cannot display.
POINT = We can also write <TH> instead of <TD>.
INCLUDING TABLE BORDER
<TABLE BORDER= “N”> Where as N= 1, 2, 3, . . .
EXAMPLE USING TABLE TAGS AND TABLE BORDER
<BODY>
<TABLE BORDER=“3”>
<TR>
<TD>Cell 1</TD> <TD>Cell A</TD>
<TD>Cell 2</TD> <TD>Cell B</TD>
</TR>
</TABLE>
</BODY>
INCLUDING TABLE WIDTH AND HEIGHT
<TABLE BORDER= “N” WIDTH= “N” HEIGHT= “N”>
Where N= 1, 2, 3, ……
EXAMPLE USING TABLE TAGS
<BODY>
<TABLE BORDER= “3” WIDTH= “4” HEIGHT= “5”>
<TR>
<TD>Cell 1</TD> <TD>Cell A</TD>
<TD>Cell 2</TD> <TD>Cell B</TD>
</TR>
</TABLE>
</BODY>
IN TABLE WE CAN INCLUDE ALSO
<TD><IMG SRC= “LOCATION\FILE [Link] TYPE”></TD> = Add
image in table.
<TABLE ALIGN= “…”> = Add alignment attribute.
<TD><IMG SRC= “LOCATION\[Link]” ALT= “NAME”> = ALT
display name outside the border.
<TABLE BACKGROUND= “LOCATION\[Link]”> = Set background
picture.
<TABLE BGCOLOR= “COLOR” OR “#RRGGBB> = Set background color.
<TABLE BORDERCOLOR= “COLOR”> = Set border color.
<TABLE BORDERCOLORDARK OR LIGHT= “COLOR”> = Set border
color dark or light.
<TABLE CELLPADDING= “N”> = Specifies the space between the edges of table
cell and their contents.
<TABLE CELLSPACING= “N”> = Space between the border and border of
adjacent cell.
<TABLE CLASS= “CASUAL”> = Indicate which style applied to element.
<TABLE COLS= “N”> = Specifies number of columns in the table.
<TABLE RULES= “ALL” FRAME= “BOX”> =Specifies external border lines
around the table. (VOID, BORDER, ABOVE, BELOW, HSIDE, LHS, RHS, VSIDES,
BOX)
<TABLE ID= “N”> = Assign to unique ID selector.
<TABLE RULES= “BASIC”> = Specifies which rules line appear inside the table.
(NONE, ROWS, COLS, GROUPS, BASIC, ALL)
<TABLE STYLE= “BACKGROUND:COLOR” OR “BACKGROUND=
“COLOR” > = Style the cell with color or picture.
<TABLE BGCOLOR= ‘COLOR”> = Color to set table background.
<TABLE TITLE= “WHATEVER WE WRITE”> = Specifies text assigned to the
tags.
VERTICAL AND HORIZONTAL ALIGN
VALIGN= “TOP” = HALIGN
VALIGN= “MIDDLE” = HALIGN
VALIGN= “BOTTOM” = HALIGN
VALIGN= “BASELINE” = HALIGN
COLORING PART OF THE TABLE
<TABLE BGCOLOR= “COLOR”>
<TR BGCOLOR= “COLOR”>
<TD BGCOLOR= “COLOR”>
<TH BGCOLOR= “COLOR”>
SPANNING CELLS ATTRIBUTES
<TD COLSPAN= “N”>
<TH COLSPAN= “N”>
<TD ROWSPAN= “N”>
<TH ROWSPAN= “N”>
EXAMPLE
<TABLE>
<TR>
<TD ROWSPAN= “2”>Hello
<TD>Hello 1
<TD>Hello 2
<TR>
<TD>Hello 3
<TD>Hello 4
</TABLE>
EXAMPLE
<BODY>
<TABLE BORDER="0" CELLSPACING="20">
<CAPTION>HELLO123 AND HELLO321</CAPTION>
<TR><TD>
<TABLE BORDER="10" CELLPADDING="4">
<CAPTION>HELLO123</CAPTION>
<TR>
<TD>Hello 1
<TD>Hello 2
</TABLE>
</TD><TD>
<TABLE BORDER="3" CELLPADDING="4">
<CAPTION>HELLO321</CAPTION>
<TR>
<TD>Hello 1
<TD>Hello 2
</TABLE>
</TD></TR>
</TABLE>
FRAME ATTRIBUTES VALUE
FRAME= “ABOVE” = The top side.
FRAME= “BELOW” = The bottom side
FRAME= “BORDER” = All 4 sides.
FRAME= “BOX” = Same as frame border.
FRAME= “HSIDES” = The top and bottom side.
FRAME= “LHS” = The left hand side.
FRAME= “RHS” = The right hand side.
FRAME= “VOID” = No side
FRAME= “VSIDES” = The left and right side.
EXAMPLE
<TABLE BORDER= “1” FRAME= “ABOVE>
<TR>
<TD>Hello 1
<TD>Hello 2
<TR>
<TD>Hello 3
<TD>Hello 4
</TABLE>
RULES ATTRIBUTES VALUE
RULES= “NONE” = No cell borders
RULES= “GROUPS” = Cell border will appear between row groups and column
group only.
RULES= “ROWS” = Rules will appear between rows only.
RULES= “COLS” = Rules will appear between columns only.
RULES= “ALL” = Rules will appear between all rows and columns.
EXAMPLE
<TABLE BORDER= “1” RULES= “ROWS”>
<TR>
<TD>Hello 1
<TD>Hello 2
<TR>
<TD>Hello 3
<TD>Hello 4
</TABLE>
EXAMPLE USING TABLE FOR NAVIGATION BARS
<TABLE BORDER= “1” FRAME= “VSIDES” ALIGN= “CENTER” CELLPADDIND= “5”>
<TR>
<TD BGCOLOR= “AQUA”><A HREF= “LOCATION\FILE [Link] TYPE(HTML)>
HELLO 1</A></TD>
<TD BGCOLOR= “AQUA”><A HREF= “LOCATION\FILE [Link]
TYPE(HTML)>HELLO 2</A></TD>
<TD BGCOLOR= “AQUA”><A HREF= “LOCATION\FILE [Link]
TYPE(HTML)>HELLO 3</A></TD>
</TR>
</TABLE>
DESIGNING A FORM
<FORM> = Marks a form within an HTML document.
<INPUT TYPE= “TEXT”> = A one line data entry field.
<INPUT TYPE= “PASSWORD”> = A one line data entry field called password field in
which the character we type are display as asterisks to hide them.
<TEXTAREA> = Multiple line data entry field, enter a paragraph or more of text.
<INPUT TYPE= “CHECKBOX”> = Select an item by clicking its checkbox.
<INPUT TYPE= “RADIO”> = Select item one of a group of radio buttons.
<INPUT TYPE= “SUBMIT” VALUE= “…”> = When clicked send the form data to the
server. The VALUE attrite produces text on the button.
<INPUT TYPE= “RESET” VALUE= “…”> = When click reset all the controls and goes
to default. The VALUE attrite produces text on the button.
<INPUT TYPE= “IMAGE” NAME= “POINT” SRC= “…” BORDER= “0”> =
Provide a graphical submit button. The SRC attribute indicate the image source file, and the
BORDER attribute turns off the image border.
EXAMPLE
<FORM>
<OL>
<LI>NAME:<INPUT TYPE="TEXT" NAME="NAME" SIZE="25" MAXLENGTH="30">
<LI>ADDRESS:<TEXTAREA SIZE="30" MAXLENGTH="40" COLS= “15” ROWS= “3”
SIZE= “25”></TEXTAREA>
<LI>CATEGORY:<INPUT TYPE="RADIO" NAME="CATEGORY">GENERAL
<INPUT TYPE="RADIO" NAME="CATEGORY">OBC
<INPUT TYPE="RADIO" NAME="CATEGORY">ST
<INPUT TYPE="RADIO" NAME="CATEGORY">SC
<LI>QUALIFICATION:<SELECT NAME= “QUALIFICATION” >
<OPTION VALUE=""></OPTION>
<OPTION VALUE="HSLC">HSLC</OPTION>
<OPTION VALUE="HS">HS</OPTION>
<OPTION VALUE="DEGREE">DEGREE</OPTION>
<OPTION VALUE="OTHER">OTHER</OPTION>
</SELECT>
<LI>GENDER:<INPUT TYPE="CHECKBOX" NAME="GENDER">MALE
<INPUT TYPE="CHECKBOX" NAME="GENDER">FEMALE
<LI>PASSWORD:<INPUT TYPE="PASSWORD" NAME="PASSWORD"
MAXLENGTH="20">
CONFORM PASSWORD:<INPUT TYPE="PASSWORD" NAME="CONFORM
PASSWORD" MAXLENGTH="20">
<INPUT TYPE="SUBMIT" VALUE="SUBMIT">
<INPUT TYPE="RESET" VALUE="RESEND">
<INPUT TYPE="IMAGE" NAME="NAME" SRC="LOCATION\FILE [Link] TYPE"
BORDER="N" HEIGHT= “N” WIDTH= “N” ALIGN= “…”>
</FORM>
INCLUDING GENERAL INPUT FIELDS
<INPUT> = Set an area in a form for input.
TYPE= “…” = Set the type in input field. Possible value are TEXT, PASSWORD,
CHECKBOX, RADIO, FILE, HIDDEN, IMAGE, BUTTON, SUBMIT, and RESET.
NAME= “…” = Processes form result.
VALUE= “..” = Provides contents associated with NAME= “..” for CHECKBOX and
RADIO because they are not accepted other input.
SIZE= “N” = Sets the visible size for the field.
MAXLENGTH= “N” = set the longest set for a field.
SELECTED = Indicates the default selection to be presented when the form is initially
loaded or reset.
ACCEPT= “…. = Specifies the acceptable MIME types for file uploads wildcards are
acceptable, as in image.
MULTIPLE = Set the select field to accept more than one selection.
PROCESSING FORMS ATTRIBUTES FOR THE FORM TAGS
ACTION= “…” = Indicate the program on the HTTP server
METHOD= “…” = Tell the browsers how to send the data to the server, with either the
POST method or the GET method.
ALIGNING INLINE IMAGES
ALIGN= “TOP”
ALIGN= “MIDDLE”
ALIGN= “BOTTON”
DIVIDING WINDOWS WIT FRAMES
FRAESET ELEMENT= The frameset consists of <FRAME> Tags which contain one or more
frame elements. Te frameset element uses a couple of attributes ROW AND COLUMNS that
define the layout of the frames.
<FRAMESET> = This tag to set the frame.
<FRAME> = This tag argues individual frames.
<FRAMESET COLS= “N%, N% . . . .”> = Columns set
OR
<FRAMESET COLS= “N*, N* . . . .”> = Columns set
<FRAMESET ROWS= “N%, N% . . . .”> = Rows set.
OR
<FRAMESET ROWS= “N*, N* . . . .”> = Rows set.
<FRAMESET COLS= “N, N” ROWS= “N, N”> = Set columns and Rows.
EXAMPLE
<FRAMESET COLS= “50%, 50%”>
<FRAME SRC= “LOCATION\FILE [Link]”>
<FRAME SRC= “LOCATION\FILE [Link]”>
</FRAMESET>
EXAMPLE
<FRAMESET ROWS= “25%, 75%”
<FRAME SRC= “LOCATION\FILE [Link]”>
<FRAMESET COLS= “50%, 50%”>
<FRAME SRC= “LOCATION\FILE [Link]”>
<FRAME SRC= “LOCATION\FILE [Link]”>
</FRAMESET>
</FRAMESET>
SOME TAGS ARE
FRAMEBORDER= “N” = For frame border.
BORDERCOLOR= “COLOR” = For border color.
MARGINHEIGHT= “N” = For page height.
MARGINWIDTH= “N” = For page width.
FRAMESPACING= “N” = Control border width.
NAME= “NAME”
SCROLLING= “YES/NO/AUTO” = Each frame display vartical or horizontal
scroll bar if the content of the cell does won’t fit, the scrolling tag force them appear or
never appear.
EXAMPLE
<FRAMESET COLS= “50%, 50%”>
<FRAME FRAMEBORDER= “N” BORDERCOLOR= “COLOR” MARGINHEIGHT= “N”
MARGINWIDTH= “N” SCROLLING= “YES” SRC= “LOCATION\FILE [Link]”>
<FRAME SRC= “LOCATION\FILE [Link]”>
</FRAMESET>
EXAMPLES(TO SET FRAME PAGE)
------------------------------------------------------------------------------
FILE=[Link](SAVE)
{
<BODY>
<P>RED=Red is my favorites color.
</P>
</BODY>
}
FILE=[Link](SAVE)
{
<BODY>
<P>Primary color.
<UL>
<LI><A HREF= “[Link]” TARGET= “MAIN”>RED</LI>
<LI><A HREF= “[Link]” TARGET= “MAIN”>YELLOW</LI>
</UL>
</BODY>
}
FILE=FRAMESET
{
<FRAMESET COLS= “50%, 50%”>
<FRAME SRC= “[Link]”>
<FRAME SRC= “LOCATION\FILE [Link]”>
</FRAMESET>
}
-----------------------------------------------------------------------------
========= ============= ======== ===
EXAMPLE TO DISPLAY SAME WINDOWS FRAMES
FILE=[Link](SAVE)
<BODY>
HELLO1
</BODY>
FILE2=[Link](SAVE)
<BODY>
HELLO2
</BODY>
FILE3=[Link](SAVE)
<BASE TARGET= “RAN”>
<BODY>
<A HREF= “[Link]#A” TARGET= “DOC”>A</A>
<A HREF= “[Link]#B” TARGET = “DOC”>B</A>
</BODY>
FILE4=[Link](SAVE)
<BODY>
<P>HELLO33</P>
</BODY>
FILE5=[Link](SAVE)
<FRAMESET ROWS="8*, 2*">
<FRAME SRC= “[Link]” NAME= “DOC”>
<FRAME SRC= “[Link]”>
</FRAMESET>
======================= === ==========
USING SPECIAL TARGET NAMES
Four predefined names can also be targeted by an anchor these 4 targets have special meanings.
They all start with an underscore ( _ ) which is normally an illegal character for a target name.
TARGET= “_BLANK” = The document will be loaded on new windows.
TARGET= “_PARENT” = The document will be loaded in present frameset /
windows.
TARGET= “_SELF” = The document into the current frame / replace the current
frame.
TARGET= “_TOP” = The document would cancel all the frame, which removes
frames altogether.
USES OF SPECIAL TARGET NAMES
<BASE TARGET= “USING SPECIAL TARGET NAMES”>
<A HREF= “LOCATION\[Link] TYPE(HTML)” TARGET= “USING
SPECIAL TARGET NAMES”>
USING INLINE FRAME
<IFRAME> = The inline frames can show a separate document as part of a page.
EXAMPLE
<BODY>
<P>HELLO</P>
<IFRAME SRC= “LOCATION\FILE [Link] TYPE(HTML)” MARGINHEIGHT= “0”
FRAMEBORDER= “10” WIDTH= “300” HEIGHT=”25”>
</IFRAME>
<IFRAME SRC= “LOCATION\FILE [Link] TYPE(HTML)” MARGINHEIGHT= “0”
FRAMEBORDER= “10” WIDTH= “300” HEIGHT=”25”>
</IFRAME>
= = = = = = = = = = = = = == = = = = = = = = = =
FILE= [Link](SAVE)
<BODY BGCOLOR= “YELLOW”>
<P>YELLOW PAGE</P>
</BODY>
FILE= [Link](SAVE)
<BODY BGCOLOR= “BLUE”>
<P>BLUE PAGE</P>
</BODY>
FILE= [Link](SAVE)
<BODY>
<P>PRIMARY COLOR PICK ONE
<A HREF= “[Link]” TARGET= “CENTERFRAME”>YELLOW</A>
<A HREF= “[Link]” TARGET= “CENTERFRAME”>BLUE</A>
</P>
<CENTER>
<IFRAME WIDTH= “300” HEIGHT= “75” NAME= “CENTERFRAME”>
<P>CHOICE COLOR</P>
</IFRAME>
</CENTER>
</BODY>
FORMATTING TEXT INTO COLUMNS
<MULTICOL COLS= “N”> = This tags divide the paragraph into columns.
EXAMPLE
<BODY>
<MULTICOL COLS= “2”>
<P>……………………</P>
</BODY>
EXAMPLE
<BODY>
<MULTICOL COLS= “N” GUTER= “N(30)” WIDTH= “N%(80%)”>
<P>……………………….</P>
</BODY>