HTML Document Part 1

8/13/2019 HTML Document Part 1

http://slidepdf.com/reader/full/html-document-part-1 1/22

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML

!" #$%&'( )%'*+ )%,* -

HTML (HyperText Markup Language)

• HTML is a set of tags & their attributes that define different parts of web document &inform web browsers how to display them.

• An HTML document is a text file that contains the information to publish.• It also contains embedded instructions called Elements.• These Elements indicate to the web browser how to present the document.• HTML has many static elements like text & list, hyperlink, images, tables & frame.• HTML also has dynamic elements like forms, multimedia, Java Applet, JavaScript, Style

Sheet & Dynamic HTML.• HTML is used to construct formatted pages for the web known as web pages.• HTML tags are the basic requirement for developing of web page.• A web page developed using these tags can be browsed using any browser. It consists of :

1) Markup Language: It refers to the tags which specify how to incorporate text, graphics, sound, and

also control visual elements such as fonts, font size and paragraph spacing.

2) Web Page Contents: The actual text information, that is displayed on the page.

HTML TAGS

• HTML elements are used to indicate the structure & format of a web document.• Elements in HTML consist of alphanumeric tags, which are located within angle brackets (

< > ).• The Alphanumeric tags are case – insensitive, which means that as far as Web Browsers

are concerned <BODY> is equal to <body>.




!" #$%&'( )%'*+ )%,* .

• Spaces are not allowed between text & angle brackets.

• The angle brackets inform web browsers that the text between them is HTML element.• HTML tags come in pairs with an opening tag <BODY> & closing tag </BODY>.• The closing tag is little bit different from the opening tag because it contains a Forward

Slash ( / ) before the element.• Some tags are special tags ( Eg. <IMG>) that do not require closing tag, which is known as

“Empty Tag”.

SYNTAX : <TAG> opening Tag. . . . . . . .

Content that the tag pair affects. . . . . . . .

</TAG> Closing Tag

SYNTAX :<TAG Attribute = ‘value’>

. . . . . . . .

Content that the tag pair affects. . . . . . . .</TAG>




!" #$%&'( )%'*+ )%,* /

TOOLS REQUIRED FOR HTML

• Two basic tools that are required to developed & view the web page created using HTMLcode are :

1. HTML Editor2. Web Browser

1. HTML Editor

• HTML Editor is required to create & save HTML document.• It can be classified in two categories :

I. Text based HTML EditorII. WYSIWYG based HTML Editor

• Text based HTML Editor allows to write HTML code, to develop the web page.• Eg. NotePad, WordPad, Edit plus & Ultra Edit.• WYSIWYG (What You See Is What You Get) based HTML Editor facilities to view the

output of the web document with its HTML code.• Eg. Front Page & Dreamweaver.

2. Web Browser

• Web Browser is software, which is used to view HTML document.• Microsoft Internet Explorer, Netscape Navigator, Mosaic & Opera are very well known

Web Browsers.• Web document’s appearance will vary from browser to browser & from computer to

computer.• Web browser can be classified in two categories :• Text based Browsers• Graphical Browsers• Text based Browsers can display only Text.




!" #$%&'( )%'*+ )%,* 0

• Graphical Browsers can display Text and Graphics both.

BENEFITS OF HTML

Ø HTML is a simple but powerful formatting language to use. The simplicity of HTMLallows anyone to create Web Pages.

Ø The Web Pages can be linked together using links. Hence controlled navigation is possible.Most important of all is the pages can be updated anytime & the appropriate links can beused without bothering about whether the links will get affected or not.

Ø HTML documents are device independent. (Works on any Platform)

LIMITATIONS OF HTML

Ø HTML does not have any Programming capabilities & cannot provide anything more thanformatted text, pictures and sound, which demands for other programming and scripting

languages, to be used along with it such as Perl, Java Scripts.

Structure of HTML Document

<HTML><HEAD>

------------</HEAD>

<BODY>------------

</BODY></HTML>

• HTML document starts with < HTML> tag & ends with </ HTML> tag.• Any HTML document can be divided into two parts –

I. HEAD or HEADER SectionII. BODY Section

Heading Section

Actual Text




!" #$%&'( )%'*+ )%,* 1

I. HEAD Section

• HEAD part generally contains Title element of the document. Sometimes Script & Stylesare also used in Head portion.

• Whatever Text, Audio, Video elements are displayed on the web browser are described inthe BODY of the HTML document.

• HEAD part includes different tags like <HEAD>, <TITLE>, <LINK>, <SCRIPT>,<STYLE>.

•

The text that exists between the TITLE tags, appears as the TITLE in the browser’s titlebar and length of it should not exceed beyond 60 characters.

II. BODY Section

• BODY part includes different tags like <BODY>, <P>, <H1> to <H6>, <BR> and manymore.

• In every HTML document <HTML> and </HTML> tags marks the beginning and the endof the document.

• These tags inform the browser that the document is an HTML file. All other HTML tagsmust reside within the <HTML> …….. </HTML> tags.

• The body of an HTML document contains the text that will show up on the Web Page.• The body section is enclosed within <BODY> and </BODY> tags. It gives a description of

the document’s layout and structure.

Ø Web documents are saved with the “ .htm ” or “ .html “ extension. These documents can bedisplayed using Web Browser.




!" #$%&'( )%'*+ )%,* 2

HTML TAGS

Ø The <HTML> Tag

Type : Container TagUse : The <HTML> tag is useful to identify document to the browser as HTML

document.Attribute : It does not have any attributes.

Ø The <HEAD> Tag :

Type : Container TagUse : The <HEAD> element encloses the head section of the web page. The <TITLE> and

<SCRIPT> elements are found within the <HEAD> section.Attribute : It does not have any attributes.

Ø The <TITLE> Tag :

Type : Container TagUse : The <TITLE> element encloses the string which should be displayed on the Title

Bar.Attribute : It does not have any attributes.

Ø The <BODY> Tag

Type : Container TagUse : The <BODY> element encloses the body section of the document. Most of the

Elements are found within the <BODY> section.Attributes :

A) Background : It is used to specify the source of an Image to tile as the documentbackground.Eg. <BODY Background = ”\html\img1.jpg” >




!" #$%&'( )%'*+ )%,* 3

B) Bgcolor : It is used to specify background colour of page. Default bgcolor isWhite.

Bgcolor = “color name” or bgcolor = “hexadecimal number”Eg. <BODY bgcolor = ”yellow” > or

<BODY bgcolor =”#A988D4” >C) Text : It is used to change the color of the Text displayed in web page. Default

Text color is Black.Eg. <BODY text = ”red> or

<BODY text = “#FF0000” >

Ø The  Tag (Comment Tag)

Type : Empty TagUse : The web browser do not display text, which is written between <!-- and -- > tag.

This tag is also known as comment tag & it is useful in developing documentation ofthe web page.

Attribute : It does not have any attributes.

Eg. <BODY><!-- Author : XYZ Patel

Title : Introduction to Internet & HTML -- ></BODY>

Here, it will not show author & title details which are written between <!-- and -- > tag.

Ø The <P> Tag

Type : Container TagUse : It is used to denote paragraphs. <P> tag indicates beginning of a new paragraph.

The Paragraph tag by default will display a blank line both on the top and thebottom of the paragraph.

Attribute :

A) Align : It is used to specify that all lines in the paragraph are flushed inthe align value specified. Possible values are :à Left ( Default Alignment )




!" #$%&'( )%'*+ )%,* 4

à Rightà Center

Ø The <BR> Tag

Type : Empty TagUse : It is used for breaking the line of the statement & information written after it will

be displayed in the next line.Attribute : It does not have any attributes.

Ø The <HR> Tag Type : Empty TagUse : It is used to draw horizontal line across the page.Attributes :

A) Align : It is used to specify the alignment of the horizontal rule. It has valuesLike

à Left ( Default Alignment )à Rightà Center

.

B) Size : It is specified as a number of pixels i.e. size = 100. the size denotes thethickness of the horizontal line.C) Width : It is specified as a length. It can be specified as a number of pixel or as a

percentage i.e. width = 30%D) Color : It is used to specify the color of the horizontal rule.

Ø The Heading Tag ( <H1> to <H6> )

Type : Container TagUse : It is used to specify the Headings or Titles in the HTML Document in various sizes.

These tags can be used for providing main and sub-headings to the web page.

Attribute : A) Align : It is used to specify the alignment of headline. Values are :à Left ( Default Alignment )




!" #$%&'( )%'*+ )%,* 5

à Rightà Center

HTML document supports 6 levels of Head Line tags <H1> to <H6>. The size of thetext within the <H1> tag is the largest and <H6> tag is the smallest. Each of these headingsalways begins on a new line.SYNTAX : <HTML> <HEAD>

<H1> This Heading is created using H1 tag </H1><H2> This Heading is created using H2 tag </H2><H3> This Heading is created using H3 tag </H3><H4> This Heading is created using H4 tag </H4><H5> This Heading is created using H5 tag </H5><H6> This Heading is created using H6 tag </H6>

</HEAD> </HTML>

Ø The <FONT> Tag

Type : Container TagUse : It is used to specify the size of the font being displayed.Attribute : It does not have any attributes.

A) Align : It is used to specify the alignment of the Font.Values are : à Left ( Default Alignment )

à Rightà Center

B) Size : To specify the size of the text. The value can be anywhere between 1 & 7.the default is 3. To make is relative font size, you can add + or – to thenumber. This will adjust the font relative to the base size of the font.

C) Face : It is used to specify the Font Type Like :• Times New Roman• Arial• Arial black• Courier•

Impact• Garamond

D) Color : It is used to specify the color of the Text.




!" #$%&'( )%'*+ )%,* -6

Color Hexadecimal Value

Red #FF0000Green #00FF00Blue #0000FF

White #FFFFFFBlack #000000Gray #808080

Dark Red #800000Dark Green #008000Dark Blue #000080

Yellow #FFFF00Magenta #FF00FF

Cyan #00FFFF

Ø The <B> Tag Type : Container TagUse : It is used to display Text in Bold Format.Attribute : It does not have any attributes.

Ø The <STRONG> Tag

Type : Container TagUse : It is used to display character, word or phase in Bold format.Attribute : It does not have any attributes.

Ø The <I> Tag




!" #$%&'( )%'*+ )%,* --

Type : Container TagUse : It is used to display Text in Italic Format.Attribute : It does not have any attributes.

Ø The <EM> Tag

Type : Container TagUse : It is used to display Text in Emphasize Format or Italic Foramt.Attribute : It does not have any attributes.

Ø The <U> Tag Type : Container TagUse : It is used to display Text with Underline.Attribute : It does not have any attributes.

Ø The <S> Tag

Type : Container TagUse : It is used to display Text with Strike Format.Attribute : It does not have any attributes.

Ø The <STRIKE> Tag

Type : Container TagUse : It is used to display Text with Strike Format.Attribute : It does not have any attributes.

Ø The <BIG> Tag

Type : Container TagUse : It is used to display character, word in a bigger font.Attribute : It does not have any attributes.

Ø The <SMALL> Tag




!" #$%&'( )%'*+ )%,* -.

Type : Container TagUse : It is used to display character, word in a smaller font.Attribute : It does not have any attributes.

Ø The <TT> Tag

Type : Container TagUse : It is used for displaying Teletype or Typewriter style fixed – pitch font.Attribute : It does not have any attributes.

Ø The <BLOCKQUOTE> Tag

Type : Container TagUse : It is used for displaying text which has margin at left side & right sides. It is used

for extended quotations.Attribute : It does not have any attributes.

Ø The <ADDRESS> Tag

Type : Container Tag

Use : It is used to identify information such as the Author, Address, Signature, etc forHTML document. Address information is usually displayed in Italics.Attribute : It does not have any attributes.

Ø The <PRE> Tag

Type : Container TagUse : It is used to designate a section of text that is already formatted for display.

Preformatted text is usually used for computer output.Attribute : It does not have any attributes.

Ø The <SUB> Tag





!" #$%&'( )%'*+ )%,* -/

Use : It is used to display Text in Subscript.Attribute : It does not have any attributes.

Ø The <SUP> Tag

Type : Container TagUse : It is used to display Text in Superscript.Attribute : It does not have any attributes.

Ø The <CENTER> Tag

Type : Container TagUse : It is used To make the text Centered.Attribute : It does not have any attributes.

Ø The <LIST> Tag

Use : It is helpful to provide structural information. Lists are easy to read & understand.HTML supports Three types of lists.

1) Ordered List ( Numbered List)2) Unordered List (Bulleted List)3) Definition List

1) Ordered List (Numbered List )

§ Ordered List is known as Numbered List.§ An Ordered List starts with <OL> tag & end with </OL> tag.§ <LI> tag specifies List Items & its Attribute helps to change the order of the list.§ The default sequence appears in Ordered List is 1, 2, 3,. . . , N.

Ø The <OL> Tag

Type : Container TagUse : It is used to specify the type of the list to display beside the item.




!" #$%&'( )%'*+ )%,* -0

Attributes :I ) start : Specifies the start value of the numbering sequence.

The possible values are 1, 2, 3 and so on.II ) type : Specifies the numbering sequence and numbering Type. Possible Types are :

Type Description1 Arabic NumberA Uppercase Lettersa Lowercase LettersI Uppercase Roman Numbersi Lowercase Roman Numbers

Ø The <LI> Tag

Type : Empty TagUse : It is used to list the items of the List.Attributes :

I ) type : It is used to specify the type of list to display beside the item. Itsvalues are : ‘1’, ‘A’, ‘a’, ‘I’, ‘i’.

II ) value : It is used to reset the sequence number of the List.

Syntax : <OL start = “Value” type = “Value”><LI> List Item-1</LI><LI> List Item-2</LI><LI> List Item-3</LI>

</OL>

2) Unordered List (Bulleted List)

§ Unordered List is known as Bulleted List.§ It can be developed using <UL> tag with List Items which are followed by <LI> tag.§ Due to that, Bullet appears before each List Item.§

The default Bullet appears in Unordered List is Solid Disc.Ø The <UL> Tag




!" #$%&'( )%'*+ )%,* -1

Type : Container TagUse : It is used to display items Bulleted List.Attribute :

I ) Type : It is used to specify an unordered list & values are :à disc : Specifies a Solid Round Bullet. ( Default List ) à square : Specifies a Square Bullet. à circle : Specifies a Hollow Bullet.

Ø The <LI> Tag

Type : Empty TagUse : It is used to list the items of the List.Attributes :

I ) type : It is used to specify the type of list to display beside the item. Itsvalues are : ‘disc’, ‘square’, ‘circle’.

SYNTAX : <UL Type = “value”><LI> List Item-1</LI><LI> List Item-2</LI><LI> List Item-3</LI>

</UL>

3) Definition List

§ Definition List is used to develop Glossary List.§ Definition List starts with <DL> tag & ends with </DL> tag.§ <DT> tag & <DD> tag are defined inside the <DL> tag.

Ø The <DL> Tag

Type : Container TagUse : It is used to define Definition Lists.

Attribute : It does not have any attributes.

Ø The <DT> Tag




!" #$%&'( )%'*+ )%,* -2

Type : Empty TagUse : It is used for defining Definition Term.Attribute : It does not have any attributes.

Ø The <DD> Tag

Type : Empty TagUse : It is used to define Definition of the given Terms.

Attribute : It does not have any attributes.Eg. <HTML> <BODY><DL>

<DT> HTML<DD> Hyper Text Markup Language

<DT> HTTP<DD> Hyper Text Transfer Protocol

<DL></BODY> </HTML>

Ø LINK TAG

§ Links allows linking other html document or imaging to the html document.§ Links are used for navigation between many different web pages containing html

documents & images.§ On clicking Hypertext, it will link to other web page.§ Hypertext will be displayed differently in the web browser.§ It will display with Blue color with Underline & when mouse cursor is rolled over it, the

standard arrow shaped mouse cursor changes into hand shaped mouse cursor.§ A hyperlink in a page is an area that, when the user clicks, takes you to another page or

site.§ Hyperlink can be generated by putting text between <A> tag & </A> tag.§ Clicking on the link will either :




!" #$%&'( )%'*+ )%,* -3

• Jump from one section to another within the same web page, which is called asPage Jump.

• Link to another page within your own Web site.• Link to another web page from a different website.

Ø The <A> Tag


Use : It is used to put Hyperlink in a web page. It is also useful in adding internal &external lins.<A> tag is the tag used to create an anchor. Anchor can be used for two purpose.

• Create Hyperlinks.• Name a target location in a document.

Syntax : <A href = ”URL” > Text to Click </A><A name = Value > -------- </A>

Attributes :

A ) href :§ It is used to specify path of the hyper document.

§ HREF stands for Hypertext REFerence that contains the URL which is theaddress or location of the link.

§ Value should be the source file name of the web page to be linked.§ If we wish to provide the internal link then name of the internal link should

be followed by #.Example :

Internal Link : <A href = ”#Overview” > Overview </A>External Link : <A HREF=”c:\html\p1.html”> Click Here </A>

B ) name :§ It is used to name the Link.§ It is useful in giving internal links.§ In other word it is used to identify a location within the same HTML

document.




!" #$%&'( )%'*+ )%,* -4

Example :<A href = ”#Overview” > Overview </A><A name = ”Overview” > Overview </A>

Linking in the same documents.

Ø ADDING IMAGES:

§ Images are used to make web page more user-friendly and attractive.§ Graphics Interchange Format (GIF), Joint Photographic Experts Group (JPEG) &

Portable Network Graphics (PNG) are well known image formats that are used inhtml document.

§ An image added to web page using <IMG> tag is known as Inline Image.§ The location (URL) of the image is specified in ‘src’ attribute of the <IMG> tag.

Ø The <IMG> Tag

Type : Empty TagUse : It is used to display image on the web page.Attributes :

§ Src : It is used to specify the path of the source of the image file.§ Height : It is used to specify the height of the image. Values can be given in pixels or

percentages. E.g. height = “200” or height = “50%”§ Width : It is used to specify the width of the image. Values can be given in pixels or

percentages. E.g. width = “100” or width = “40%”§ Alt : It is used to specify the alternate text message, which should be displayed in

absence of image.§ Border : It is used to set the image border. Values are to be given in pixel.

E.g. border = “3”§ Hspace : It is used to specify horizontal space between text & image.§ Vspace : It is used to specify vertical space between text & image.




!" #$%&'( )%'*+ )%,* -5

§ Align : It is used to specify the alignment of image. Values are top, middle, bottom,left (by default) & right.

Ø TABLE in HTML

§ A table is grid containing rows & columns.§ Each row & column can have a heading that identifies the type of information

contained in the row & column.§ Intersection of the row & column is known as ‘cell’, which stores data that is

displayed in the table.§ Table can be defined between <TABLE> …. </TABLE> tags.§ Table row can be described between <TR> …. </TR> tags.

Ø The <TABLE> Tag

Type : Container TagUse : It is used to display table on the web page.Attributes :

§ Align : It is used to specify the alignment of the table. Its values are center, right &left (default).

§ Border : It is used to set the table border. Values are to be given in pixels.E.g border = “3”

§ Bordercolor : It is used to specify the color of the table border.§ Bgcolor : It is used to set the background color of the table. Value is given in

hexadecimal value or color name.§

Background : It is used to set the image as background of the table. Value will bepath of the image file.§ Cellspacing : It is used to specify the space between two cells.






!" #$%&'( )%'*+ )%,* .-

§ Valign : It is used specify the vertical alignment of the text in the cell. Its values arecenter (default), top & bottom.

Ø The <CAPTION> Tag

Type : Container TagUse : It is used to display the title or caption of the table.Attribute :

§ Align : Specifies the location of the caption. Valid options are ‘top’ and ‘bottom’.

<CAPTION> element should appear inside the <TABLE> tag but not inside tablerows or cells. Captions are always horizontally centered with respect to the table, and theymay have their wrapped to fit within the width of the table.

SPECIAL HTML CHARACTERS

• Many special symbols are used in HTML document that are known as Character Entities.• HTML allows you to include them by writing an ampersand symbol (&) followed by a

keyword or number & ends with semicolon ( ; ).• Some characters which are used in HTML are described in below table :

Symbol Keywords Number Description

Blank Space© © © Copyright Sign

® ® ® RegisteredTM ™ ™ Trademark

> > ‹ Greater Than< < › Less Than




!" #$%&'( )%'*+ )%,* ..

≥ ≥ Greater Than or Equal To! ≤ ≤ Less Than or Equal To

‘ ‘ ‘ Left Single Quotation Mark

’ ’ ’ Right Single Quotation Mark

“ " “ Left Double Quotation Mark

” " ” Right Double Quotation Mark

Documents

HTML Document Part 1