HTML Document Part 1

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML
HTML (HyperText Markup Language)
1)
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 :
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> SYNTAX : <TAG Attribute = value> ........ Content that the tag pair affects ........ </TAG> Closing Tag
!" #$%&'( )%'*+
)%,* .
TOOLS REQUIRED FOR HTML

Two basic tools that are required to developed & view the web page created using HTML code are : 1. HTML Editor 2. 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 Editor II. 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 documents 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. )%,* /
!" #$%&'( )%'*+
Graphical Browsers can display Text and Graphics both.
BENEFITS OF HTML
HTML is a simple but powerful formatting language to use. The simplicity of HTML allows 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 be used 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 than formatted 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 Section II. BODY Section )%,* 0
Heading Section
Actual Text
!" #$%&'( )%'*+
I. HEAD Section
HEAD part generally contains Title element of the document. Sometimes Script & Styles are also used in Head portion. Whatever Text, Audio, Video elements are displayed on the web browser are described in the 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 browsers title bar 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 many more. In every HTML document <HTML> and </HTML> tags marks the beginning and the end of the document. These tags inform the browser that the document is an HTML file. All other HTML tags must 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 documents layout and structure.
Web documents are saved with the .htm or .html extension. These documents can be displayed using Web Browser.
!" #$%&'( )%'*+
)%,* 1
HTML TAGS
The <HTML> Tag Type : Container Tag Use : 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 Tag Use : 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 Tag Use : 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 Tag Use : 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 document background. Eg. <BODY Background = \html\img1.jpg > !" #$%&'( )%'*+ )%,* 2
B) Bgcolor : It is used to specify background colour of page. Default bgcolor is White. 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 Tag Use : 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 of the 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 Tag Use : 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 the bottom of the paragraph. Attribute : A) Align : It is used to specify that all lines in the paragraph are flushed in the align value specified. Possible values are : Left ( Default Alignment ) !" #$%&'( )%'*+ )%,* 3
Right Center
The <BR> Tag

Type : Empty Tag Use : 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 Tag Use : 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 values Like Left ( Default Alignment ) Right Center . B) Size : It is specified as a number of pixels i.e. size = 100. the size denotes the thickness 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 Tag Use : 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 ) !" #$%&'( )%'*+ )%,* 4
Right Center HTML document supports 6 levels of Head Line tags <H1> to <H6>. The size of the text within the <H1> tag is the largest and <H6> tag is the smallest. Each of these headings always 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 Tag Use : 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 the number. 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. !" #$%&'( )%'*+ )%,* 5
Color
Red Green Blue White Black Gray Dark Red Dark Green Dark Blue Yellow Magenta Cyan
Hexadecimal Value
#FF0000 #00FF00 #0000FF #FFFFFF #000000 #808080 #800000 #008000 #000080 #FFFF00 #FF00FF #00FFFF
The <B> Tag

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

Type : Container Tag Use : It is used to display character, word or phase in Bold format. Attribute : It does not have any attributes.
The <I> Tag

!" #$%&'( )%'*+ )%,* -6
Type : Container Tag Use : It is used to display Text in Italic Format. Attribute : It does not have any attributes.
The <EM> Tag

Type : Container Tag Use : It is used to display Text in Emphasize Format or Italic Foramt. Attribute : It does not have any attributes.
The <U> Tag

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

Type : Container Tag Use : It is used to display Text with Strike Format. Attribute : It does not have any attributes.
The <STRIKE> Tag

Type : Container Tag Use : It is used to display Text with Strike Format. Attribute : It does not have any attributes.
The <BIG> Tag

Type : Container Tag Use : It is used to display character, word in a bigger font. Attribute : It does not have any attributes.
The <SMALL> Tag

!" #$%&'( )%'*+ )%,* --
Type : Container Tag Use : It is used to display character, word in a smaller font. Attribute : It does not have any attributes.
The <TT> Tag

Type : Container Tag Use : It is used for displaying Teletype or Typewriter style fixed pitch font. Attribute : It does not have any attributes.
The <BLOCKQUOTE> Tag

Type : Container Tag Use : 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 for HTML document. Address information is usually displayed in Italics. Attribute : It does not have any attributes.
The <PRE> Tag

Type : Container Tag Use : 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

Type : Container Tag !" #$%&'( )%'*+ )%,* -.
Use : It is used to display Text in Subscript. Attribute : It does not have any attributes.
The <SUP> Tag

Type : Container Tag Use : It is used to display Text in Superscript. Attribute : It does not have any attributes.
The <CENTER> Tag

Type : Container Tag Use : 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 Tag Use : It is used to specify the type of the list to display beside the item. !" #$%&'( )%'*+ )%,* -/
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
1 A a I i
Description
Arabic Number Uppercase Letters Lowercase Letters Uppercase Roman Numbers Lowercase Roman Numbers
The <LI> Tag

Type : Empty Tag Use : 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. Its values 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

!" #$%&'( )%'*+ )%,* -0
Type : Container Tag Use : 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 Tag Use : 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. Its values 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 Tag Use : It is used to define Definition Lists. Attribute : It does not have any attributes.
The <DT> Tag

!" #$%&'( )%'*+ )%,* -1
Type : Empty Tag Use : It is used for defining Definition Term. Attribute : It does not have any attributes.
The <DD> Tag

Type : Empty Tag Use : 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 : )%,* -2
!" #$%&'( )%'*+
Jump from one section to another within the same web page, which is called as Page Jump. Link to another page within your own Web site. Link to another web page from a different website.
The <A> Tag Type : Container 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 the address 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. !" #$%&'( )%'*+ )%,* -3
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 in html 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 Tag Use : 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. !" #$%&'( )%'*+ )%,* -4
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 Tag Use : 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 be path of the image file. Cellspacing : It is used to specify the space between two cells. !" #$%&'( )%'*+ )%,* -5
Cellpadding : It is used to specify the space between cell boundary and text. Height : It is used to specify the height of the table. Values can be given in pixels or percentages. E.g. height = 60% Width : It is used to specify the width of the table. Values can be given in pixels or percentages. E.g. width = 100%
The <TH> Tag

Type : Container Tag Use : It is used to display the table Header Attributes : Bgcolor : It is used to set the background color of the table heading. Value is given in hexadecimal value or color name. Colspan : It is used to merge two or more columns of the table header. Rowspan : It is used to merge two or more rows of the table header.
The <TR> Tag

Type : Container Tag Use : It is used to display the table row. Attributes : Bgcolor : It is used to set the background color of the table row. Value is given in hexadecimal value or color name.
The <TD> Tag

Type : Container Tag Use : It is used to display the text in the table cell.
Attributes :
Align : It is used to specify the alignment of the text in the cell. Its values are center, right & left (default). Bgcolor : It is used to set the background color of the cell. Value is given in hexadecimal value or color name. Colspan : It is used to merge two or more columns of the table header. Rowspan : It is used to merge two or more rows of the table header. )%,* .6
!" #$%&'( )%'*+
Valign : It is used specify the vertical alignment of the text in the cell. Its values are center (default), top & bottom.
The <CAPTION> Tag

Type : Container Tag Use : 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 table rows or cells. Captions are always horizontally centered with respect to the table, and they may 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 Registered Trademark Greater Than Less Than )%,* .-

TM
> <
!" #$%&'( )%'*+
≥ ≤ ‘ ’ " "
≥ ≤ ‘ ’ “ ”
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
!" #$%&'( )%'*+
)%,* ..

HTML Document Part 1

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML Document Part 1

Încărcat de

Drepturi de autor:

Formate disponibile

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML

HTML (HyperText Markup Language)

Web Page Contents:

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

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML

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

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML

TOOLS REQUIRED FOR HTML

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

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML

Graphical Browsers can display Text and Graphics both.

Structure of HTML Document

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

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML

II. BODY Section

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

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML

--> Tag (Comment Tag)

The <P> Tag

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML

The <BR> Tag

The <HR> Tag

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

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML

The <FONT> Tag

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML

The <B> Tag

The <STRONG> Tag

The <I> Tag

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML

The <EM> Tag

The <U> Tag

The <S> Tag

The <STRIKE> Tag

The <BIG> Tag

The <SMALL> Tag

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML

The <TT> Tag

The <BLOCKQUOTE> Tag

The <ADDRESS> Tag

The <PRE> Tag

The <SUB> Tag

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML

The <SUP> Tag

The <CENTER> Tag

The <LIST> Tag

1) Ordered List (Numbered List )

The <OL> Tag

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML

The <LI> Tag

2) Unordered List (Bulleted List)

The <UL> Tag

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML

The <LI> Tag

The <DL> Tag

The <DT> Tag

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML

The <DD> Tag

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

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML

The <IMG> Tag

Shri Sankalchand Patel College of Engineering, Visnagar Introduction to HTML

≥ ≤ ‘ ’ " "

≥ ≤ ‘ ’ “ ”