Professional Documents
Culture Documents
What is HTML?
TAGS
<HTML>.</HTML> IDENTIFIES THE AS AN
HTML DOCUMENT.
HTML DOCUMENT BEGINS WITH <HTML>
AND ENDS WITH </HTML>
TAGS
<TITLE>.</TITLE>
CONTAINS THE DOCUMENT TITLE WHICH IS
DISPLAYED IN THE BROWSERS TITLE BAR
<BODY>.</BODY>
CONTAINS ALL TAGS,ATTRIBUTES & INFORMATION
TO BE DISPLAYED IN THE WEB PAGE.
<BODY> TAG IS ENTERED BELOW THE CLOSING
</HEAD> TAG AND ABOVE THE CLOSING OF
<HTML> TAG
CSE 409 Advanced Internet Technology
Viewing HTML
HTML document can be viewed in a browser like IE,
Firefox, Opera, Safari etc.
Container Elements
These require starting and ending tags.
These are paired tags.
Eg: <HTML></HTML> ,
<HEAD></HEAD> , <TITLE></TITLE>
Empty Elements
These require starting tag.
Eg: <BR>, <HR>, <IMG>, <LINK>
CSE 409 Advanced Internet Technology
HEADINGS
Six levels of headings are available.
<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
PARAGRAPH
<P> defines a paragraph
Add ALIGN="position" (left, center, right)
But </P> is optional
PARAGRAPH ALIGNMENTS
< P ALIGN=LEFT> </P>
LINE BREAKS
<BR>
CENTRE TAG
<CENTER></CENTER>
CSE 409 Advanced Internet Technology
10
11
12
LISTS
Ordered Lists:
List of items are marked with numbers
An ordered lists start with the <OL> tag
Each list item start with the <LI> tag
13
LISTS
Ordered Lists:
<OL TYPE="1">
<LI> Item one </LI>
<LI> Item two </LI>
<OL TYPE="I" >
<LI> Sublist item one </LI>
<LI> Sublist item two </LI>
<OL TYPE="i">
<LI> Sub-sublist item one </LI>
<LI> Sub-sublist item two </LI>
</OL>
</OL>
</OL>
14
LISTS
UnOrdered Lists:
List of items are marked with bullets
An ordered lists start with the <UL> tag
Each list item start with the <LI> tag
Type Attribute can have the value:
TYPE= CIRCLE
TYPE=SQUARE
TYPE=DISC
CSE 409 Advanced Internet Technology
15
LISTS
Unordered Lists:
<UL TYPE="disc">
<LI> One </LI>
<LI> Two </LI>
<UL TYPE="circle">
<LI> Three </LI>
<LI> Four </LI>
<UL TYPE="square">
<LI> Five </LI>
<LI> Six </LI>
</UL>
</UL>
</UL>
16
LISTS
Definition Lists:
17
LISTS
Definition Lists:
<DL>
<DT> Coffee </DT>
<DD> Black Hot Drink </DD>
<DT> Milk </DT>
<DD> White Cold Drink </DD>
</DL>
CSE 409 Advanced Internet Technology
18
Formatting tags
<B>Bold</B><BR>
<I>Italic</I><BR>
<U>Underlined</U><BR>
Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR>
Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR>
<STRIKE>Strike Through</STRIKE><BR>
<B><I>Bold Italic</I></B><BR>
<FONT COLOR="GRAY">Gray</FONT><BR>
19
Images
20
Naming a Section
<H2> <A NAME="#references"> Our References </A> </H2>
URL (Uniform Resource Locator) is used to address a document on World Wide Web.
CSE 409 Advanced Internet Technology
21
HYPERLINKS
<BODY>
<H3>Welcome to <A HREF="http://www.manipal.edu">
<STRONG>Manipal Institute of Technology</STRONG></A>
</H3>
</BODY>
22
Tables
23
Tables
<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>
CSE 409 Advanced Internet Technology
24
25
TABLES
cellspacing=10
cellpadding=10
26
27
28
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
MARGINWIDTH left/right margins
MARGINHEIGHT top/bottom margins
SCROLLING yes or 1 adds scroll bar
NORESIZE yes or 1 disables resizing
CSE 409 Advanced Internet Technology
29
Frames
<FRAMESET ROWS="75%,25%">
<FRAMESET COLS="*,*,*">
<FRAME SRC="http://www.google.co.in">
<FRAME SRC="http:// www.google.co.in ">
<FRAME SRC="http:// www.google.co.in ">
</FRAMESET>
<FRAMESET COLS="*,*">
<FRAME SRC="http:// www.google.co.in ">
<FRAME SRC="http:// www.google.co.in ">
</FRAMESET>
</FRAMESET>
30
FORMS
Used to select different kind of user input.
Forms is an area that contain form elements
Form elements are elements that allow to enter
information in a form
Defined by < FORM> tag
Action attribute defines the name of the file to
which the contents are sent
31
FORMS
INPUT Tag:
Type of input is specified with TYPE attribute.
Text Fields:
Used when we want to type numbers or text.
<input type=text name=first name>
32
FORMS
Radio Buttons:
Used when we want user to select one of a limited number of
choices.
Check Boxes:
Used when we want user to select one or more options of a
limited number of choices.
Submit Button:
When user clicks on submit button, the content of the form is
send to the server.
CSE 409 Advanced Internet Technology
33
FORMS
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" /><br>
Password: <input type="password" name="pwd" /><br>
<input type="radio" name=gender" value="male" /> Male<br>
<input type="radio" name=gender" value="female" /> Female<br>
<input type="checkbox" name="vehicle" value="Car" /> I have <br>a car <br>
Username: <input type="text" name="user" />
<input type="submit" value="Submit" /></FORM>
</BODY>
</HTML>
CSE 409 Advanced Internet Technology
34
FORMS
<TEXTAREA rows=10 cols=30> Deifnes a text area
</TEXTAREA>
<SELECT> Defines a selectable list of items.
<SELECT name=cars>
<OPTION value=alto> ALTO </option>
<OPTION value=santro> SANTRO </option>
</SELECT>
35
END OF LECTURE
36