Introduction HTML (Hypertext Markup Language) is used to create document on the World Wide Web. HTML is not a programming language, it is a markup language

IntroductionHTML (Hypertext Markup Language) is used to create document on

the World Wide Web.

HTML is not a programming language, it is a markup language

A markup language is a set of markup tags

It is not case sensitive language.

HTML Historyv 1.0: early 90sHTML+: 1993v 2.0 (RFC 1866, forms): 1995v 3.0 (tables, frames): 1995, schism between Netscape

and Microsoftv 3.2 (style sheets): adopted 1996v 4: 1998, three versions proposed by W3C, but nothing

really adopted yetXHTML: 1999, a marriage of XML and HTMLV 5.0 : Under Construction

HTML FeaturesOperating system independent(Cross-platform

compatibility )Browser independentThe user controls the browserThe author controls organization

Html tagsTags are instruction that are embedded directly

into the text of document.Html Tags are signals to a browser that should do

something other than just through text upon the screen.

All HTML tags begin with an open angle bracket (<) and end with close angle bracket (>).

HTML tags can be a two types :- Paired Tag Singular Tags

Structure of HTML page <HTML>

<HEAD></HEAD><BODY></BODY>

</HTML>

HTML Tag <HTML>The <HTML> tag encloses all other HTML tags and associated text within your document. It is an optional tag. You can create an HTML document that omits these tags, and your browser can still read it and display it. But it is always a good form to include the start and stop tags.The format is:<HTML>Your Title and Document (contains text with HTML tags) goes here</HTML>

HEAD Tag <HEAD>HEAD tag comes after the HTML start tag. It contains TITLE tagto give the document a title that displays on the browsers title barat the top.The Format is:<HEAD>

<TITLE>Your title goes here

</TITLE></HEAD>

BODY Tag <BODY>The BODY tag contains all the text and graphics of the document with all the HTML tags that are used for control and formatting of the page.The Format is:<BODY>Your Document goes here</BODY>

Attribute of TagAttribute are used to say something about the

element that carries them and always appear on the opening tag of the element that carries them. All attributes are made-up two parts a name and a value.

The name is the property of the element that you want to set.

The value is what you want the value of property to be.

Syntax & ExampleSyntax-

<tagname attr_1= “value” attr_2= “value”>Content</tagname>

Example<body bgcolor=“red” text=”blue”>Text….</body>

Attribute of BODY tagBgcolorBackgroundTextBottommargin-Topmargin-Leftmargin-Rightmargin-Link-Vlink-

Text FormattingLine break <br>Paragraph <p>…</p>

Attribute of paragraph tag Align

Drawing line <hr>Attribute of <hr> tag

Align Size (thickness) Width (length) Color

Text Formatting (Conti.)Headings <H1>,<H2>…<H6>Bold <B>..</B>.Italics <i>…</I>Underline <U>…</U>Subscript <SUB>…</SUB>Superscript <SUP>..</SUP>Delete <DEL>…</DEL>Center <CENTER>…. </CENTER>Blinking text <BLINK>..</BLINK>Marquee <MARQUEE>… </MARQUEE>

Text Formatting (Conti.)Font <FONT>…</FONT>

Attribute of FONT tag Face Size (1to 7 default is 3) Color

Comment 

Special CharactersSpace- &- &>- ><- <©- &copy®- &reg

Inserting Image<IMG> tag is used to insert image on web

page , it support .gif,.png,.jpg image file.Attribute of <IMG> tag

Src Width Height Border Align Hspace Vspace Alt

Insert audio file<bgsound> tag is used to embed the sound

file in web page.Attribute of <bgsound>

Src Loop (-1….)

List in HtmlOrdered list <ol>..</ol>

Attribute of <ol> tag Type (“1”,”i”, “I”, “a”, “A”) Start (numeric)

Unordered list <ul>..</ul>Attribute of <ul> tag

type (“fillround”, “square”, “round”)List item <li>..</li>

Attribute of <li> tag value

Link in HTML<a> ..</a> tag is used to make link in html

documentthere are two types of link

Internal link External Link

Attribute of <a> tag Href Target Name

Table in HTMLTable <table></table>Table row <tr></tr>Table data <td></td>Table header<th></th>Caption <caption>

Attribute of <caption> tag Align: bottom, top

Attribute of Table tag

BorderAlignValignWidthHeightCellpaddingCellspacing

Attribute of <td> tagColspanRowspanBgcolorWidthHeight

Forms in HTML<Form></form> tag is used to create form

in HTML.Forms are used for data gathering in

webpage.It provide the full range of GUI controlsIt can automatically submit data collected in

its control through a web Server

Attribute of Form tagNameMethod

GetPost

Action

Form ElementsText – Text fields accept a single line of text entry.

<Input Type=“Text” name=“t1” value=“”>Password

<Input type=“password” name=“pass” value=“”>Button

<Input type=“Button” name=“but” value=“Ok”>Submit

<Input type=“submit” name=“s1” value=“UPDATE”>

Form Elements (cont.)Checkbox

<input type=“checkbox” name=“c1” value=“1” checked>

Radio Button<input type=“radio” name=“r1” value=“1”>(note) radio name are same for one group

TextArea<textarea name=“ta1”>….</textarea>Attribute of text area

Rows cols

Form Elements (cont.)Selection List

<select ><option> one</option><option> one</option><option> one</option>

</option>Attribute of select tag

SizeName

Frame in HTMLFrameset: <frameset> …</frameset>

It is used to dividing a webpage into sectionsAttribute of Frameset

Rows Cols

Frame: <frame>…</frame>It is used for inserting page into specific

section.Attribute of Frame

src name

Attribute of Frame (Conti.) Noresize Scrolling Marginheight Marginwidth Frameborder Border noframe

Documents

Introduction HTML (Hypertext Markup Language) is used to create document on the World Wide Web. HTML is not a programming language, it is a markup language