Basic HTML

Backbone Of Webpages!
<html><head>
<script language=javascript>
var now=new
Date,t1=0,t2=0,t3=0,t4=0,t5=
0,t6=0,ie5=0,hp=0,ao=0,cc='';
t1=now.getTime();
function err(a,b,c) {
var img=new Image;
img.src='http://srd.yahoo.com
/hp5-
err/'+escape(a)+','+escape(b)
B
R
O
W
S
E
R
HTML File Web Page

HTML Definition
 HTML – H yper
T ext
M ark-up
L anguage
– The publishing language of the World Wide
Web(WWW); the standard used to create webpages.
HTML is a text formatting language.
Markup Language that defines the structure of information by
using a variety of tags and attributes.
HTML is maintained by World Wide Web Consortium(W3C).
Extended from SGML and extended to XHTML.

History Of HTML
• IBM (international business machines corporation)sowed
the seed of HTML in early 1980s,at that time it was
known as GML(general mark- up language).it was a
powerful language aimed at creating a document in
which one could mark title , headings ,text , fonts etc.
• In 1986,this concept got standardization by
ISO(international organization for standardization)and
was renamed to SGML(standard generalized mark-up
language).

This first official document which showed users
how to use HTML was called ‘HTML Tags’. It was
released in 1991 by Tim Berners-Lee and contained
information about 22 HTML elements.
Tim Berners-Lee (CERN physicist)
Creator of HTML &WWW
In 1989 Tim Berners Lee and his team redesigned SGML and
named it HTML(hyper text mark-up language).

Analyze HTML
HYPER TEXT:- hyper text is the text used to link
various web pages .It is the text on a web page ,
which on clicking opens a new web page.
MARK – UP:-it means highlighting the text either by
underlying or displaying it in different colors , or
both.
LANGUAGE :- it refers to the mode of communication
between web pages .HTML has its own syntax and
rules.

Different Types Of HYPER TEXT MARK-UP
Languages:
• Extended HTML (XHTML)
• Dynamic HTML (DHTML)
• Public_HTML (PHTML)
• Compact HTML (CHTML)

HTML Versions Year Versions
1991 HTML
1993 HTML+
1995 HTML 2.0
1997 HTML 3.2
1999 HTML 4.01
2000 XHTML
2012 HTML5
2013 XHTML5

Basic Tools Of HTML
HTML Editor – A word processor that has been specialized to make the writing
of HTML documents more effortless.
The most commonly used text editors are:
• Notepad (Windows) Simple text (Mac)
• WordPad (Windows) Adobe Dreamweaver (All)
• Web Browser : list and view the created webpages.
HTML Reference Book serve as guide for HTML tags.

The Basic HTML Rules:
• HTML tags are enclosed by brackets “ <>” ; for example <HTML>.
• Most tags require a closing tag <HTML>………</HTML>
• Tags must be nested correctly
<B> <I> The basic HTML rules</I> </B> first tag on last tag off.
• HTML treats all white space as a single blank space.
• Tags are not case sensitive but are generally written in uppercase, with the
attributes and values in small letters enclosed by quotation marks.
• Most tags have optional attributes with several possible values that modifies
the tag behaviour.
• File extension: Save file as “.htm” or “.html”

Tags
Tags are used to mark-up certain information to be displayed in
a browser. for the content to be marked-up it has to have an
opening tag (<tag>) before the content and a closing tag
(</tag>) afterwards.
• HTML tags are keywords (tag names) surrounded by angle
brackets like <html>
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag is the end
tag
• The end tag is written like the start tag, with a forward slash
before the tag name
• Start and end tags are also called opening tags and closing tags

Elements
An element consists of an opening tag, content and a closing tag. For
example: <strong>Bold Text</strong> would be classed as an
element (this HTML produces the
• output Bold Text).A HTML element starts with a start tag / opening
tag.
• A HTML element ends with an end tag / closing tag.
• The element content is everything between the start and the end tag.
• Some HTML elements have empty content.
• Empty elements are closed in the start tag.
• Most HTML elements can have attributes.
• For example: <p></p>
<img>
<body></body>
Start tag Element content End tag
<p> This is a paragraph </p>
<a
href="default.htm">
This is a link </a>
<br>

Attributes
An element can have one or several attributes. Attributes are
placed within tags and are used to determine certain values of
the HTML element.
• Attributes provide additional information about an element.
• Attributes are always specified in the start tag.
• Attribute values must be contained in quotes.
• Attributes come in name/value pairs like: name="value“.
• Example
<font size=“1” color=“green">This text would be green and
smaller</font>

•There are two types of markup tags:
• Empty/ ONE-SIDED tags – represent a single occurrence of an
instruction. For example, the <BR> or break tag is used to
indicate that you want to include a single space following the text.
Examples: Breaking line tag: <br/> Horizontal line tag: <hr/>
• Container /two-sided tags – Define a section of text using
a start tag and an end tag.
For example, text placed inside of these tags would appear
in bold:
<B>Hello</B>

HTML Syntax
• HTML syntax:
two-sided tag:
<tag attributes>document
content</tag>
Starting
tag
Properties of the tag.
Optional!
Actual content appears in
webpage. It could be empty
Closing
tag
Examples: <p> An Introduction to HTML </p>
<body bgcolor = “yellow”> HTML </body>

Structure Of The Web Page
• Starting with the tag <html>...</html>
<html>
……………
</html>
Everything
about the
web page
should be
enclosed
here

Structure of HTML
Inside the <html></html> tag
Each web page has a head part described in <head></head> tag.
Each web page has a body part described in <body></body> tag.
<HTML>
<HEAD>
<TITLE>
----------
</TITLE>
</HEAD>
<BODY>
---------------
---------------
---------------
</BODY>
</HTML>
Contains some
fundamental
information about
the Web page.
Title of the Web
page is given here.
Contains the tags
that specify how
the content
should be
displayed.
Specifies to the
browser that the
code enclosed is a
HTML code.
Head
Section
Body
SectionThe content of
the whole web
page should be
put here

Basic Tags
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<title> Defines a title for the document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
 Defines a comment

Sample Bare-Bones Document
<html>
<head>
<Title>A Simple HTML Example</Title>
</head>
<body>
<H1>HTML is Easy To Learn</H1>
<P>Welcome to the world of HTML. This is
the first paragraph. While short it is still a
paragraph!</P>
<P>And this is the second paragraph.</P>
</body>
</html>
sample.html
Open Notepad
Type the HTML code
Save the file with extension .html as sample.html/”htm”

Title
Body
Result:
Open sample.html in your browser.
You can do this by opening the file
via your browser or by opening the
sample.html file directly.

HTML Headings
Six Headers ( Header Elements): H1 Through H6
<body>
<h1>Level 1 Header</h1>
<h2>Level 2 header</h2>
</body>

Html Paragraph Tag
• HTML documents are divided into paragraphs.
• Paragraphs are defined with the <p> tag i.e.
<P>THIS IS A PARAGRAPH</P>
<P>THIS IS ANOTHER PARAGRAPH</P>
<PRE>THIS TEXT IS PREFORMATTED</PRE>

LINE BREAK & HORIZONTAL
LINE TAG
• For a line break or a new line without starting a new
paragraph Use the <br> tag.
• Defines a horizontal line use <hr>tag.
• <br> & <hr> element are empty HTML elements.
i.e. DEPARTMENT OF LIBRARY & INFORMATION
SCIENCE<hr>
UNIVERSITY OF <br> CALCUTTA

TEXT FORMATTING TAGS
<b>
<big>
<em>
<i>
<small>
<strong>
<sub>
<super>
<ins>
<del>
<tt>
<u>
<strike>
Defines bold text
Defines big text
Defines emphasized text
Defines italic text
Defines small text
Defines strong text
Defines subscripted text
Defines superscripted text
Defines inserted text
Defines deleted text
Defines teletype text
Defines underline text
Defines strike text

TEXT FORMATTING CODE & RESULT
<HTML>
<HEAD>
</HEAD>
<BODY>
<B>This text is Bold</B>
<BR><EM>This text is Emphasized</EM>
<BR><I>This text is italic</I>
<BR><SMALL>This text is small</SMALL>
<BR>This is<SUB> Subscript</SUB> AND
<SUP>Superscript</SUP>
<BR><STRONG>This text is strong</STRONG>
<BR><BIG>This text is big</BIG>
<BR><U>This text is Underline</U>
<BR><STRIKE>This text is Strike</STRIKE>
<BR><TT>This text is Teletype</TT>
</BODY>
</HTML>
Result of Text Formatting Code

Font Tag
• This element is used to format the size,
typeface and color of the enclosed text.
• The commonly used fonts for web pages
are Arial, Comic Sans MS , Lucida Sans
Unicode, Arial Black, Courier New, Times
New Roman, Arial Narrow, Impact,
Verdana.
• The size attribute in font tag takes values
from 1 to 7.

COLORS
• Background and text colors are attributes of the
“body” of the document.
• text=“#xxxxxx” determines your text color
• Bgcolor=“#xxxxxx” determines your background color
• Colors and codes for HTML can be found at
http://hotwired.lycos.com/webmonkey/reference/col
or_codes/

BASIC COLORS & COLOR CODES
1. WHITE
2. BLACK
3. RED
4. GREEN
5. BLUE
6. MAGENTA
7. CYAN
8. YELLOW
9. AQUAMARINE
10. BAKER’S
CHOCOLATE
11. VIOLET
12. BRASS
13. COPPER
14. PINK
15. ORANGE
1. #FFFFFF
2. #000000
3. #FF0000
4. #00FF00
5. #0000FF
6. #FF00FF
7. #00FFFF
8. #FFFF00
9. #70DB93
10. #5C3317
11. #9F5F9F
12. #B5A642
13. #B87333
14. #FF6EC7
15. #FF7F00

Font Tag Code
<HTML>
<HEAD><TITLE> FONTS</TITLE></HEAD>
<BODY>
<BR><FONT COLOR=“#00FF00" SIZE="7" FACE="ARIAL">
LIBRARY & INFORMATION SCIENCE </FONT>
<BR><FONT COLOR=“#000000" SIZE="6" FACE="COMIC
SANS MS "> LIBRARY & INFORMATION SCIENCE </FONT>
<BR><FONT COLOR=“#0000FF" SIZE="5" FACE="LUCIDA
SANS UNICODE"> LIBRARY & INFORMATION SCIENCE
</FONT>
<BR><FONT COLOR=“#FF00FF" SIZE="4" FACE="COURIER
NEW"> LIBRARY & INFORMATION SCIENCE </FONT>
<BR><FONT COLOR=“#00FFFF" SIZE="3" FACE="TIMES
NEW ROMAN"> LIBRARY & INFORMATION SCIENCE
</FONT>
<BR><FONT COLOR=“#FFFF00" SIZE="2" FACE="ARIAL
BLACK"> LIBRARY & INFORMATION SCIENCE</FONT>
<BR><FONT COLOR=“#FF6EC7" SIZE="1"
FACE="IMPACT"> LIBRARY & INFORMATION SCIENCE
</FONT>
</BODY>
</HTML>
Result of Font Code

Background & Text Color Tag
The attribute bgcolor is used for changing the back ground
color of the page.
<BODY BGCOLOR=“GREEN” >
Text is use to change the color of the enclosed text.
<BODY TEXT=“WHITE”>

Text Alignment Tag
It is use to alignment of the text.
Left alignment <align=“left”>
Right alignment <align=“right”>
Center alignment <align=“center”>

Hyperlink Tag
 The HTML <A> Tag Defines A Hyperlink.
 A Hyperlink (Or Link) Is A Word, Group Of Words, Or Image That You Can
Click On To Jump To Another Document.
 When You Move The Cursor Over A Link In A Web Page, The Arrow Will Turn
Into A Little Hand.
 The Most Important Attribute Of The <A> Element Is The Href Attribute,
Which Indicates The Link’s Destination.
 By Default, Links Will Appear As Follows In All Browsers:
 An Unvisited Link Is Underlined And Blue
 A Visited Link Is Underlined And Purple
 An Active Link Is Underlined And Red
EXAMPLE:
<A HREF="URL">LINK TEXT</A>

Creating Links
Two types of links
1. absolute: link to an outside website
2. relative: link to another page within your
website
HTML uses the <a> (anchor) tag to create a link to
another document
An anchor can point to any resource on the Web: an HTML
page, an image, a sound file, a movie, etc.
The correct Syntax of creating an anchor:
<a href="url">Text to be displayed</a>

Creating Absolute Links
<a href="url">Text to be displayed</a>
Anchor
Tag
Href
attribute
used to
address the
document to
link to
Where this
link will take
you
Text
hyperlink
that
appears in
browser
Closing
Anchor
Tag

Creating Relative Links
<a href=“nameofpage.html">Text to be
displayed</a>
Anchor
Tag
href
attribute
used to
address the
document
to link to
Where this link will
take you (page
within website name
Text
hyperlink
that
appears in
browser
Closing
Anchor
Tag

Image As A Link
<a href=“url or file name”><img src =
“imagefile.jpg” alt=“description”></a>
Insert the img src
tag in place of the
clickable text on a
normal link

Link Tag Example
Html Links : Html links are defined with the <a> tag
Syntax : <a href="http://www.gmil.com">Gmail</a>
Example :
<html>
<body>
<a href="http://www.gmail.com">Gmail</a>
</body>
</html>
GmailO/P :
If we click this link it goes to gmail
account

Image Tag
 IN HTML, IMAGES ARE DEFINED WITH THE <IMG> TAG.
 THE <IMG> TAG IS EMPTY, WHICH MEANS THAT IT CONTAINS ATTRIBUTES ONLY, AND
HAS NO CLOSING TAG.
 TO DISPLAY AN IMAGE ON A PAGE, YOU NEED TO USE THE SRC ATTRIBUTE. SRC STANDS
FOR "SOURCE". THE VALUE OF THE SRC ATTRIBUTE IS THE URL OF THE IMAGE YOU WANT
TO DISPLAY.
 <IMG SRC="URL" ALT="SOME_TEXT">
 THE HEIGHT AND WIDTH ATTRIBUTES ARE USED TO SPECIFY THE HEIGHT AND WIDTH OF
AN IMAGE.
 THE ATTRIBUTE VALUES ARE SPECIFIED IN PIXELS BY DEFAULT:
 THE ALT ATTRIBUTE PROVIDES ALTERNATIVE INFORMATION FOR AN IMAGE
 <IMG SRC="PULPIT.JPG" ALT="PULPIT ROCK" WIDTH="304" HEIGHT="228
EXAMPLE:
<IMG SRC ="URL">
<IMG SRC="PICTURE.GIF“>

Image Attributes - <Img> Tag
<IMG>
<SRC>
<ALT>
<WIDTH>
<HEIGHT>
<BORDER>
<HSPACE>
<VSPACE>
<ALIGN>
<BACKGROUND>
Defines an image
display an image on a page,Src stands for
"source".
Define "alternate text" for an image
Defines the width of the image
Defines the height of the image
Defines border of the image
Horizontal space of the image
Vertical space of the image
Align an image within the text
Add a background image to an HTML page

Code & Result Of The Image
<HTML>
<BODY>
<P><IMG
SRC="FILE:///C:/WINDOWS/ZAPOTEC.BMP"
ALIGN="LEFT" WIDTH="48" HEIGHT="48"> </P>
<P><IMG SRC
="FILE:///C:/WINDOWS/ZAPOTEC.BMP"
ALIGN="RIGHT" WIDTH="48" HEIGHT="48"></P>
</BODY></HTML>
<HTML>
<<BODY
BACKGROUND="FILE:///C:/WINDOWS/SOAP%20BUB
BLES.BMP" TEXT="WHITE">
<BR><BR><BR>
<H2> BACKGROUND IMAGE!</H2>
</BODY>
</HTML>

Code & Result Of The Image
<HTML>
<BODY>
<P><IMG
SRC="FILE:///C:/WINDOWS/ZAPOTEC.BMP"
ALIGN="BOTTOM" WIDTH="20" HEIGHT="20"> </P>
<P><IMG SRC
ALIGN="MIDDLE" WIDTH="40" HEIGHT="40"></P>
<P><IMG SRC
ALIGN="TOP" WIDTH="60" HEIGHT="60"></P>
<P><IMG SRC
WIDTH="80" HEIGHT="80"> </P>
<P><IMG SRC
WIDTH="100" HEIGHT="100"> </P>
</BODY>
</HTML>

HTML TABLE TAG
<TABLE>
<TR>
<TD>
<TH>
<CAPTION>
<COLGROUP>
<COL>
<THEAD>
<TBODY>
<TFOOT>
<CELLSPACING>
<CELLPADDING>
<COLSPAN>
<ROWSPAN>
<BORDER>
used to create table
table is divided into rows
each row is divided into data cells
Headings in a table
caption to the table
Defines groups of table columns
Defines the attribute values for one or
more columns in a table
Defines a table head
Defines a table body
Defines a table footer
amount of space between table cells.
space around the edges of each cell
No of column working with will span
No of rows working with will span
attribute takes a number

HOW TABLES WORK
<tr> </tr>
<table>
</table>
<td> </td><td> </td> </td><td>
<tr> </tr><td> </td><td> </td> </td><td>
<tr> </tr><td> </td><td> </td> </td><td>
 <table></table>
Creates a table
 <tr></tr>
Sets off each row in a
table
 <td></td>
Sets off each cell in a row
 <table border=#>
Sets width of border
around table cells
 <table width=“ ? %” or
height=“ ? %”>
Sets width and height of
table - in pixels or as a
percentage of document
width

CODE & RESULT OF THE TABLE
<HTML>
<BODY>
<H3>Table without border</H3>
<TABLE>
<TR> <TD>MILK</TD>
<TD>TEA</TD>
<TD>COFFEE</TD> </TR>
<TR> <TD>400</TD>
<TD>500</TD>
<TD>600</TD> </TR>
</TABLE>
</BODY>
</HTML>

Table Code With Border & Header
<HTML>
<BODY>
<H4>Horizontal Header:</H4>
<TABLE BORDER="1">
<TR> <TH>Name</TH>
<TH>Loan No</TH>
<TH>Amount</TH> </TR>
<TR> <TD>Jones</TD>
<TD>L-1</TD>
<TD>5000</TD></TR> </TABLE><BR><BR>
<H4>Vertical Header:</H4>
<TABLE BORDER="5">
<TR> <TH>Name</TH>
<TD>Jones</TD> </TR>
<TR> <TH>Loan No</TH>
<TD>L-1</TD> </TR>
<TR> <TH>Amount</TH>
<TD>5000</TD></TR> </TABLE>
</BODY>
</HTML>

Table Code With Colspan & Rowspan
<HTML>
<BODY>
<H4>Cell that spans two columns:</H4>
<TABLE BORDER="4">
<TR> <TH>Name</TH>
<TH COLSPAN="2">Loan No</TH> </TR>
<TR> <TD>Jones</TD>
<TD>L-1</TD>
<TD>L-2</TD> </TR> </TABLE>
<H4>Cell that spans two rows:</H4>
<TABLE BORDER="8">
<TR> <TH>Name</TH>
<TD>Jones</TD></TR><TR>
<TH ROWSPAN="2">LOAN NO</TH>
<TD>L-1</TD></TR><TR>
<TD>L-2</TD></TR></TABLE>
</BODY>
</HTML>
ROWSPAN - it is used to span multiple rows.
COLSPAN - it is used to span multiple columns.

Table Code With Caption & Cell Spacing
<HTML>
<BODY>
<TABLE BORDER="1">
<CAPTION>My Caption</CAPTION>
<TR>
<TD>Milk</TD>
<TD>Tea</TD>
</TR>
<TR>
<TD></TD>
<TD>Coffee</TD>
</TR>
</TABLE>
</BODY>
</HTML>
CELLSPACING - defines the width of the
border

Cell Padding , Image & Backcolour Code
<HTML><BODY>
<H3>Without cellpadding:</H3>
<TABLE BORDER="2" BGCOLOR="GREEN">
<TR> <TD>Jones</TD>
<TD>Smith</TD></TR>
<TR> <TD>Hayes</TD>
<TD>Jackson</TD></TR></TABLE>
<H4>With cellpadding:</H4>
<TABLE BORDER="8"
CELLPADDING="10"
BACKGROUND="FILE:///C:/WINDOWS/FEAT
HERTEXTURE.BMP">
<TR> <TD>Jones</TD>
<TD>Smith</TD></TR>
<TR> <TD>Hayes</TD>
<TD>Jackson</TD></TR></TABLE>
</BODY>
</HTML>
CELLPADDING - offers opportunities of
adjusting the white space of the table, that
means the distance between cell borders and
the content within.

HTML LIST TAG
 Lists Are A Useful Way Of Presenting
Information To The Reader In A More
Presentable And Easy To Read Way.
lists provide methods to show item or element
sequences in document content. there are three
main types of lists:->
1.unordered lists:-unordered lists are bulleted.
2.ordered lists:- ordered lists are numbered.
3.definition lists:- used to create a definition list.

List Tags
<LI>
<OL>
<UL>
<DL>
<DT>
<DD>
<LI> is an empty tag, it is used for
representing the list items
Ordered list
Unordered list
Defines a definition list
Defines a term (an item) in a definition
list
Defines a description of a term in a
definition list

Unordered List
 TYPE attribute to the <UL> tag to show
different bullets like:-
• Disc
• Circle
• Square
<UL TYPE =“DISC”>…..</UL>
The attribute TYPE can also be used with
<LI> element.

Code & Result Of The Unordered List
<HTML>
<BODY>
<H4>DISC BULLETS LIST:</H4>
<UL TYPE="DISC"> <LI>BLIS</LI>
<LI>MLIS</LI>
<LI>M.PHIL</LI>
<LI>PH.D.</LI></UL>
<H4>CIRCLE BULLETS LIST:</H4>
<UL TYPE="CIRCLE"> <LI>BLIS</LI>
<LI>MLIS</LI>
<LI>M.PHIL</LI>
<LI>PH.D.</LI></UL>
<H4>SQUARE BULLETS LIST:</H4>
<UL TYPE="SQUARE"> <LI>BLIS</LI>
<LI>MLIS</LI>
<LI>M.PHIL</LI>
<LI>PH.D.</LI></UL>
</BODY>
</HTML

Ordered List
The TYPE attribute has the following value like:-
1.TYPE = "1" (Arabic numbers)
2.TYPE = "a" (Lowercase alphanumeric)
3.TYPE = "A" (Uppercase alphanumeric)
4.TYPE = "i" (Lowercase Roman numbers)
5.TYPE = "I" (Uppercase Roman numbers)
By default Arabic numbers are used

54
LIST ELEMENTS
TYPE Numbering Styles
1 Arabic numbers 1,2,3, ……
a Lower alpha a, b, c, ……
A Upper alpha A, B, C, ……
i Lower roman i , ii, iii, ……
I Upper roman I, II, III, ……

Code & Result Of The Ordered List
<HTML>
<BODY>
<H4>NUMBERED LIST:</H4>
<OL> <LI>BLIS</LI>
<LI>MLIS</LI>
<LI>M.PHIL</LI>
<LI>PH.D.</LI></OL>
<H4>LETTERS LIST:</H4>
<OL TYPE="A"> <LI>BLIS</LI>
<LI>MLIS</LI>
<LI>M.PHIL</LI>
<LI>PH.D.</LI></OL>
<H4>ROMAN NUMBERS LIST:</H4>
<OL TYPE="I"> <LI>BLIS</LI>
<LI>MLIS</LI>
<LI>M.PHIL</LI>
<LI>PH.D.</LI></OL>
</BODY>
</HTML>

Definition List
• DL: Definition List. This kind of list is different from the others. Each item in
a DL consists of one or more Definition Terms (DT elements), followed by
one or more Definition Description (DD elements).
<DL>
<DT> HTML </DT>
<DD> Hyper Text Mark-up Language </DD>
</DL>
HTML
Hyper Text Mark-up Language

Nesting Lists
• User can nest lists by inserting a UL, OL, etc., inside a list
item (LI).
Example
<UL TYPE = “square”>
<LI> List item …</LI>
<LI> List item …
<OL TYPE=“i” START=“3”>
</OL>
</LI>

HTML FRAMES
• HTML frames help us to display multiple html documents in a
web page. This frames are independent one of the other. A
frameset is a file that specifies how the screen is divided into
frames or specifies the Web Pages to display in each frame of
the main web page. Here we have an example that divides the
page into two horizontal frames, one having 30% of the page
and other 70%.
• <FRAMESET ROWS="30%,*"> </FRAMESET>
FRAMESET ROWS - defines the height that each frame will
have;
FRAMESET COLS - defines the width that each frame will
have;
FRAME SRC - defines the location of the web page that will
be loaded into the frame.
58
<frame>
Defines a window
(a frame) in a
frameset
<frameset>
Defines a set of
frames
<noframes
>
Defines an
alternate content
for users that do
not support
frames
<iframe>
Defines an inline
frame

HTML Form
A form is an area that can contain form
elements.
Form elements are elements that allow the
user to enter information in a form. like
text fields, textarea fields, drop-down
menus, radio buttons and checkboxes etc
A form is defined with the <form> tag.
The syntax:-
<FORM>
.
Input Elements
.
</FORM>

FORM TAGS
<FORM>
<INPUT>
<TEXT>
<TEXTAREA>
<PASSWORD>
<LABEL>
<OPTION>
<SELECT>
<BUTTON>
<VALUE>
<CHECKBOX>
<DROPDOWN BOX>
Defines a form for user input
used to create an input field
Creates a single line text entry field
Defines a text-area (a multi-line text input control)
Creates a single line text entry field. And the characters
entered are shown as asterisks (*)
Defines a label to a control
Creates a Radio Button.
Defines a selectable list (a drop-down box)
Defines a push button
attribute of the option element.
select or unselect a checkbox
A drop-down box is a selectable list

CODE OF THE HTML FORM
<HTML><BODY><FORM>
<H1>Create a Internet Mail Account</H1>
<P>First Name <INPUT TYPE="TEXT" NAME="T1" SIZE="30"></P>
<P>LAST NAME <INPUT TYPE="TEXT" NAME="T2" SIZE="30"></P>
<P>Desired Login Name <INPUT TYPE="TEXT" NAME="T3"
SIZE="20">
@MAIL.COM</P>
<P>Password <INPUT TYPE="PASSWORD" NAME="T4"
SIZE="20"></P>
<INPUT TYPE="RADIO" CHECKED="CHECKED" NAME="SEX"
VALUE="Male" /> Male</BR>
<INPUT TYPE="RADIO" NAME="SEX" VALUE="Female" /> Female
<P>BIRTHDAY <INPUT TYPE="TEXT" NAME="T6" SIZE="05">
<SELECT SIZE="1" NAME="D2">
<OPTION>-SELECT ONE-</OPTION>
<OPTION>JANUARY</OPTION>
<OPTION>FEBRUARY</OPTION>
<OPTION>MARCH</OPTION> </SELECT>
<INPUT TYPE="TEXT" NAME="T7" SIZE="10"></P>
TypeYourself<TEXTAREA ROWS="4" NAME="S1"
COLS="20"></TEXTAREA>
<BR><INPUT TYPE="SUBMIT" VALUE="Accept" NAME="B1">
<INPUT TYPE="RESET“ VALUE="Cancel" NAME="B2"></BR>
</FORM>
</BODY>
</HTML>

Advantages & Disadvantages Of HTML:
• ADVANTAGES:
1. Ease to create a document.
2. Ease to tracing references.
3. Ease to displaying information
4. Ease to cresting new references.
5. Ease of information structuring.
6. Global views.
7. Ease for customising documents.
8. Ease of maintaining modularity of information.
9. Ease of maintaining consistency of information.
10.Task stacking facilities.
11.Collaboration.

• Disadvantages:
1. Users Non-interactivity.
2. Disorientation.
3. Cognitive overhead.

Some Shortcut Keys Of HTML
Description Window, Linux Mac OS
Edit attribute Click on name or value Click on name or value
Edit text node Click on text Click on text
Edit element Alt + Double-click tag
name
Alt + Double-Click tag
name
Next node in path Ctrl + . Ctrl + .
Previous node in path Ctrl + , Ctrl + ,

Reference & Tutorial Websites
• http://www.w3.org/html/ - World Wide Web Consortium W3C)
• http://validator.w3.org/ - Official W3C validation page.
• http://www.htmlcodetutorial.com/
• http://www.htmlgoodies.com/
• http://htmldog.com/
• http://reference.sitepoint.com/html
• http://www.w3schools.com/html/DEFAULT.asp
• http://www.tizag.com/htmlT/

Basic HTML

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Basic HTML

Similar to Basic HTML (20)

Recently uploaded

Recently uploaded (20)

Basic HTML