UNIT-V HTML Introduction

(1)

Hyper Text Markup Language

HTML Introduction:

HTML: HTML stands for Hyper-Text Markup Language. It allows us to create web pages. It does not include any control structure and can produce only static content. A HTML page consists of various tags that make a web page. The features, advantages and disadvantages of HTML page are listed below.

Features of HTML:

 It is a formatting language for text and images.

 It allows us to read the content nonlinearly by using hyperlinks to a file.  HTML is an application of SGML,XML and JAVA Script etc.

 HTML uses markup tags to describe web pages

 It is not case sensitive i.e. code can be written in small case or uppercase letters.

 All the HTML documents have “ .html ” or “.htm” extension.

 HTML documents can be edited using editors such as notepad or front page. The advantages of HTML:

 It can provide online documents with headings, text, tables, lists, photos etc.  It can incorporate images and sounds with the help of HTML tags.

 It facilitates Moving and layered text  It allows framed documents

 It allows absolute positioning of text and image.

 It facilitates to include spread sheets, video clips, sound clips and other applications directly in their documents.

The disadvantages of HTML:

 HTML can produce only static content

 It does not facilitate headers, footers, footnotes.  Mathematical typesetting is difficult

 It completely Browser Dependent

(2)

The most important two basic HTML Tools are discussed below.

1.HTML Editor: It is the program that uses to create and save HTML documents.

Text based creating a document e.g. Notepad. i.e.; the code can be written simply in a notepad.

Start Run Notepad.

2.Web Browser: It is a piece of software which is used to view the HTML page output.

e.g. Internet Explorer, Mozilla Firefox, Google Chrome etc. HTML Terminology:

Some of the most commonly used terms in HTML is shown below.

1.HTML Tags: It is a piece of text that is used to identify an element , so that browser realizes how to display its contents. Tags are always written within angle brackets(< Tag Name>).

e.g. <HTML> tag indicates the start of an HTML document and </HTML> tag indicates the end of an HTML document.

HTML tags can be of two types. They are:

a) Paired Tags: In this the first tag referred to as opening tag and second tag is referred to as closing tag.

e.g. <b> and </b>, <i> and </i> etc.

b) Unpaired Tags: In this does not have any closing tag. This tags are also known as Singular or Stand-alone tags.

e.g. <br>, <hr> etc.

2. Attribute: Attribute is the property of an HTML tag that is specified in the opening angle brackets. It supplies additional information like color, size, style etc. to the browser about a tag.

e.g. height, color, width, src, href, border, align, alt etc.

3.DTD: Document Type Definition. HTML is defined in terms of its DTDS. All the details of HTML tags, entities and the related document structure are defined in the DTDS.

(3)

Structure of a HTML Document:

A HTML document is basically separated in two parts: the head (HTML head tag) and the body (HTML body tag). The structure of a HTML document is shown below.

Structure of HTML program:

<! DOCTYPE …> Document type information <HTML>

<HEAD>

<TITLE>...Title name of the web page..</TITLE> </HEAD>

<BODY>

...Body of the document…. </BODY>

</HTML>

The Commenting !DOCTYPE declaration: This declaration is made using the! DOCTYPE tag and is to be written at the beginning of the document. It can also uses to give comments in HTML page.

Comments generally of two types.

1. Single line comments. <!DOCTYPE> 2. Multi line comments.

<! ...more than one line…….. ……….end>

<HTML> tag: This tag comes after the < ! DOCTYPE > tag and identifies the document as an HTML document. All other tags included within <HTML> and </ HTML> tags.

<HEAD> tag: This tag contains information about the document, including its title, scripts used, style definitions and document descriptions. The portion enclosed between <HEAD> and </HEAD> tags is called the header. It includes tags like title, script, style, meta and so on.

<TITLE> tag: This tag gives an HTML document a title by which it is known to browsers. The title is given between the tags <TITLE> and </TILTE>.

(4)

<!..SAMPLE PROGRAM...> <HTML>

<HEAD>

<TITLE> My first Page </TITLE> </HEAD>

<BODY>

<H1> Hello HTML <H1> </BODY>

</HTML>

The Document Head Tags:

This tag contains information about the document, including its title, scripts used, style definitions and document discriptions.The portion enclosed between <HEAD> and </HEAD> tags is called the header. It includes tags like title, script, style, meta and so on.

An HTML document's head is enclosed by the HTML head element and can contain some of these element definitions:

The document's title: Describes briefly what the document is about.

Style declarations: Group of class definitions (style sheets) used by other tags to setvisual characteristics.

Script functions: Set of functions declared inside the “HTML script element” toprovide functionality to the document.

Meta statements: Declared through the “HTML meta tag”, set custom attributes andvalues for the document.

Global links: Defined using the “HTML link tag” designates resources related to theactual document.

The Document Body tags: This tag encloses all tags, attributes and information that one wants the browser to display. To use <BODY> tag, enter it below the closing </HEAD> tag and above the closing </HTML> tag. Blocks:

Here are two major blocks of text in HTML document. They are

1. Paragraph. 2. Heading.

(5)

Syntax: <P align=”left”/”center”/”right”> Text

</P>

The “ align” attribute is optional. It defines the horizontal alignment of its content. Possible values are:

Left: Text is aligned to the left margin.

Right: Text is aligned to the right margin.

Center: Text is centered.

Justify: Text is justified to both margins.

2.Heading: The <h1> to <h6> tags are used to define HTML headings. <h1>

defines the most important heading and <h6> defines the least important heading.

Syntax to create <h1> to <h6> headings:

The “ align” attribute is optional. It defines the horizontal alignment of its content. Possible values are:

Left: Text is aligned to the left margin.

Right: Text is aligned to the right margin.

Center: Text is centered.

Justify: Text is justified to both margins.

Horizontal Line Tag: The HTML <hr> tag draws a horizontal line and that may be used asseparator. This tag has a set of attributes such as align, no shade, size and width and they are optional. The <hr> tag does not require and end tag.

(6)

left Specifies the alignment of a<hr> element

align center <hr align="left|center|right">

right

size pixels

<hr size="pixels"> Specifies the height of a<hr> element

pixels <hr width="pixels|%"> Specifies the width of a<hr>element.

width % <hr width="50%">

The width in pixels (like "100px" or

just "100").

The width in percent of the

available space (like "50%")

Ex: A Basic Example:

<! This code demonstrates the ---purpose of headers, paragraph, -- ---break and horizontal tags -->

(7)

<h1 align=”center”>This is heading…1</h1> <h2 align=”center”>This is heading…2</h2>

<h3 align=”center”>This is heading…3</h3>

<h4 align=”center”>This is heading…4</h4> <h5 align=”center”>This is heading…5</h5>

<h6 align=”center”>This is heading…6</h6>

<p align=”center”>This is Basic Web Page Example. <br>I am studying B. Sc III year(M.P.CS)<br>This is the first time I am learning HTML</p>

</html>

Output:

Text Formatting And Syntactic Based Tags in HTML:

In contrast to the Semantic Based style tags , Syntactic Based style tags allows you to tell the browser specifically how we want the text to appear on web page.

Some syntactic based or text formatting tags are shown below.

1.<B>: The bold tag <b> is used to make text in bold format. Syntax: <B>…..text….</B>

2.<I>: The italic tag <i> is used to make text in italic format.

Syntax: <I>…..text….</I>

3.<U>:The underline tag <u> is used to displaying the text with underline.

(8)

4.<STRONG>: The <strong> tag is used to display the given text in bright format i.e.; always text is emphasized.

Syntax: <STRONG>…..text….</STRONG>

5.<TT>: The <tt> tag is used to display the given text in type writer’s format in HTML.

Syntax: <TT>…..text….</TT>

6.<SUB>(subscript): This tag is used to display the text as a subscript. Syntax: text<SUB>…..text….</SUB>

7.<SUP>(superscript): This tag is used to display the text as a superscript. Syntax: text<SUP>…..text….</SUP>

8.<PRE>: It defines preformatted text. Text in a <pre> element is displayed in a fixed-width font (usually Courier),and it preserves both spaces and line breaks. Syntax: <PRE>…..text….</PRE>

9.<BLINK>:This tag is used to create the flashing text in web page.

Syntax: <BLINK>…..text….</BLINK>

10.<STRIKE>:This tag may be used for crossing out a word by having aline drawn through it.

Syntax: <STRIKE>…..text….</STRIKE>

Text Formatting Example:

<! This code demonstrates the ---purpose of syntactic tags-- >

<html> <head> <title>syntactic tag</title> </head> <body> <pre><strong>Note:</strong>This is

Raja <br> I am living in <sup>

Bhimavaram </sup> <br> I am

Studying in <sub> BVRICE </sub> <br>

<blink> My group is Computer Science </blink>

<tt> Thank You </tt>

(9)

</body> </html>

Output:

Escape Sequence Characters: These characters start with an ampersand (&) and terminated with semicolon (;). They are

& It Displays & < It Displays < > It Displays > " It Displays "

  It Displays blank space © It Displays ©

Example Program:

<html>

<head>

<title>Escape Sequences</title>

(10)

<body>

<h2 align=”center”>Special Characters</h2><br>

Ampersand-&<br>

Tab   space<br>

Less than-<<br>

Greater than-><br>

Quotes-"<br>

Copy-©

</body>

</html>

Output:

<Font> Tag: This tag is used to Specifies the font style, font size, and font color of text.

This <font> tag , we can use some attributes is shown below. Size: This attribute is used to change the size of the text.

(11)

Style: This attribute is used to format the face of the text.

Syntax: <font size=”+n”>…text…</font>

<font color=”color name”>…text…</font> <font style=”style name”>…text…</font>

Font Family: This is one of the property in <font> tag, which is used to set the format to our text.

Syntax: <font style=”font-family: format name”>….text….</font> Example Program for using <Font> tag:

<Html>

<head>

</head>

<body>

<h2>format</h2><br>

My name is ramu<br>

Iam studying in BVRICE

</font><br>

My father name is Dasarad<br>

My mother name is Yesodha

</font>

</body>

</html>

(12)

Hyperlink:

Hyperlinks are used to link documents in a HTML page. Anchor tags are used to place Hyperlinks in a HTML document. The beginning and ending of Hyperlink is represented with Anchor tag.

 i.e; <a>……….</a>

 We can also navigate to some website address (or) inter document linking with the help of Hyperlink of HTML page.

 We can create clickable text, images with the Hyperlink.

 Href is the attribute for the Anchor tag <a>, which specifies the destination address of the Hyperlink. i.e; where the browser should jump whenever the end user click on the Hyperlink.

Syntax:

<a href=”URL”>….some text….</a>

We can also use Hyperlinks to link to other websites as follows

<a href=”http://www.gmail.com”>click o this link</a>

Example: There are two Html pages i.e; one.html and two.html. In one.html the website details regarding the gadgets information will be displayed and it also displays Hyperlink, whenever the end user clicks on the Hyperlink the user has to navigate to another page.

i.e;two.html which provides contact details

(13)

<html>

<head>

<title>Hyperlinks</title>

</head>

<body>

<h2>our website provides latest gadgets</h2><br>

<h3>for further information click below link</h3><br>

<a href=”two.html”>contact us</a>

</body>

</html>

Html code for two.html:

<html>

<head>

<title>Information</title>

</head>

<body>

<pre>

Raja,<br>

13-5-5,<br>

Bhimavaram.

</pre>

</body>

</html>

(14)

Absolute and Relative paths:

In the Href attribute we need to mention the entire path from

source to destination to move to the destination file. This path is known as

Absolute path.

i.e; one.html is a source file and Two.html is destination file.

Ex: <a href=”http://www.gmail.com”>click o this link</a>

(15)

Inter Document Linking:

We can also create Hyperlink which leads to move to any part of the document by using the Inter Document Linking.

Name is the attribute which is used to handle Hyperlink with-in the document. Using this name attribute we can move to any portion of the document and that document will be visible on the top of the page temporarily.

Syntax: <a href=”# location-name”>…..text….</a> <a name=”location-name”></a>

HTML Program:

<html>

<head>

<title>Inter Document</title>

</head>

<body>

<p>

<a href="#c4">see als chapter 4.</a>

</p>

<h2>Chapter 1 </h2>

<p>this chapter explains ba bla bla</p>

<h2>Chapter 2 </h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 3 </h2>

<h2><a name="C4">Chapter 4 </a></h2>

<h2>Chapter 5 </h2>

<p> This chapter explains ba bla bla</p>

(16)

<h2>Chapter 7 </h2>

<h2>Chapter 8 </h2>

<h2>Chapter 9 </h2>

<h2>Chapter 10 </h2>

</body>

</html>

Output:

List: Lists are used to represent the information in a specific format. Lists can be used in many situations in the designing of a webpage.

(17)

2. Unordered List.

3. Definition List.

<li> tag which is used to create lists in our webpage.

1. Ordered List: An Ordered list follows the specific order infront of each list item. Different numbering schemes ,i.e; numbers, small-letter alphabets and capital-letter alphabets can be chosen in the Ordered List.

-<ol> tag is used represent Ordered List.

-Type is the attribute which is used to specify certain order for the Ordered List. The order may be numbers (or) capital letters (or) small letters.

-Start is another attribute of <ol> tag which is used to specify starting value of the Ordered List.

Syntax:

<ol type=”1”/”A”/”a” start=”n”> <li>………</li>

<li>………</li> <li>………</li> ……….</ol> HTML Program:

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<h1>Groups in BVRICE</h1>

(18)

</ol>

</body>

</html>

Output:

2. Unordered List: As the name specifies Unordered List does not follows any specific pattern. In this Unordered List also each List item is to be specified with

<li> tag.

-<ul> tag, which is used to specify Unordered List.

Syntax:

<ul type=”circle”/”square”/”disc”> <li>………</li>

<li>………</li> <li>………</li> ……….</ul>

(19)

<html>

<head>

<title>Unrdered List</title>

</head>

<body>

<h1>Courses in BVRICE</h1>

<li>Life Science</li>

</ul>

</body>

</html>

(20)

3. Definition List: Definition List is different previous two lists. This is basically used to provide heading and mention the contents for that related heading.

-<dl> is the tag which is used to place a Definition List in our HTML page. - In that <dl> tag we need to use <dt> tag which is used for heading and <dd>

tag which is used to provide the Definition for the heading.

-<dt> stands for Definition Term. -<dd> stands for Data Definition.

Syntax: <dl>

<dt>heading</dt> <dd>……… ………..</dd> </dl>

HTML Program:

<html>

<head>

<title>Definition List</title>

</head>

<body>

<dl>

<dd>B.V.Raju Institute of Computer Education</dd>

</dl>

</body>

(21)

Output:

Tables:

Tables in HTML page allows you to organize the information in the form of rows and columns.HTML tables are basically used to present any information in a tabular format. This tabular format is also known as Grid View type information.

 <table> is the tag which is used to create a table in our HTML page.

 <tr></tr> is the tag which is used to create a row in the table, tr-means table row.

<tr>……….</tr>

 <td></td> is the tag which is used to create a column in the table, td-means table data.

<td> text </td>

 We can create number of rows and columns in the table as per the requirement.

 <caption> is the tag which is used to assign name to the table.

 After creating number of rows and columns wemust close the </table>

tag.

 <th></th> is the tag which is used to create heading for each column.

Syntax to create a simple table in HTML: <table>

(22)

<th>column1 heding</th> <th>column2 heding</th> </tr>

<tr>

<td>column1 data</td> <td>column2 data</td> </tr>

</table>

Different attributes in <table> tag is shown below:

 Align , this attribute used to align our table to either left (or) right (or) center.

For e.g: Align=”left”/”center”/”right”

 Height, this attribute used to set height of the table.

For e.g: height=”400”

 Width, this attribute used to set width of the table.

For e.g: width=”300”

 Border, this attribute is used to set border to the table.

For e.g: border=”1”

 Cellspacing, this attribute is used to set the amount of wide spaces between cells.

 Cellpadding, this attribute is used to provide the amount of white spaces between cell and data.

For e.g: Cellspacing=”5” Cellpadding=”5”

Syntax to create table with different attributes:

<table Align=”left”/”center”/”right” border=”n” Cellspacing=”n” Cellpadding=”n” height=”n” width=”n”>

<caption>table-name</caption> <tr>

(23)

<tr>

<td>column1 data</td> <td>column2 data</td> </tr>

And so on………….. </table>

HTML Program:

<html>

<head>

<title>sample table</title>

</head>

<body>

<tr>

<th>register no</th>

<th>student name</th>

<th>address</th>

</tr>

<tr>

<td>kavya</td>

</tr>

<tr>

(24)

</tr>

</table>

</body>

</html>

Output:

Colspan and Rowspan Attributes in the table:

 These attributes of a table specifies number of rows (or) columns should spans.

 We can also apply require changes for the specify rows and columns with this rowspan and colspan attributes.

 We need to use colspan attribute of the table as colspan=”n”.  We need to use rowspan attribute of the table as rowspan=”n”.

HTML Program with colspan attribute:

<html>

<head>

<title>colspan example</title>

(25)

<caption>COLSPAN</caption>

<tr>

<th>Branch</th>

<th colspan=”3”>Group</th>

</tr>

<tr>

<td>computer science</td>

<td>electronics</td>

<td>physics</td>

<td>statistics</td>

</tr>

</table>

</body>

</html>

Output:

HTML Program with rowspan attribute:

<html>

(26)

</head>

<body>

<caption>ROWSPAN</caption>

<tr>

<th>Branch</th>

<th>Group</th>

</tr>

<tr>

<td rowspan=3>computer science</td>

<td>electronics</td>

</tr>

<tr>

<td>physics</td>

</tr>

<tr>

<td>statistics</td>

</tr>

</table>

</body>

(27)

Output:

HTML Colors:

HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (in HEX: 00). The highest value is 255 (in HEX: FF). HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign. The combination of Red, Green, and Blue values from 0 to 255, gives more than 16 million different colors (256 x 256 x 256).

The 17 standard colors are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

bgcolor attribute:

The “bgcolor” attribute specifies the background color of a document.

Ex:

<html>

(28)

</body>

</html>

When we execute the above code, the background color of the web page changes to red.

color attribute:

The color attribute specifies the color of the text inside a <font> element.

Ex:

<html>

<body>

(29)

Images in HTML:

In HTML, images are defined with the <img> tag. The img tag is empty, which means that it contains attributes only and it has no closing tag.

To display an image on a page, we need to use the src attribute. src

stands for

“ source”. The value of the src attribute is the URL of the image we want to display on our page.

Many browsers supports images with .gif (graphical interchange format) and

.jpg (joint photographic group)

Syntax:

<img src=”url” alt=”string” height=”n” width=”n”> Example:

<img src=”flower.jpg” height=”30px” width=”20px”>

attributes of <img> tag:

 Src: Src means source location , in this we need to mention the path of the image.

 Alt: alt is the attribute which is used to display some text .

 Height and Width: these attributes are used to set the picture height and width with pixels format.

 Align: this attribute is used to align image with left/right/center/top/bottom.

HTML program:

<html>

<body>

(30)

Output:

Including image links: we can use images as links to other pages. To add an image as a link just add the anchor tags <A> before the <IMG> tag and at the end add the closing anchor </A> tag. Now include the destination file name to the opening anchor tag by adding “href” attribute.

The following program illustrates including image links.

HTML program:

Type the following code and save it as “img4.html” .

<p>This is the First Page</p> <p>

<a href="E:/B.Sc-2013/JS/Examples/img5.html" alt="2nd Page"><img

src="E:/B.Sc-2013/JS/Examples/Harsha.gif" width="70" height="100"></a>

</p> </body> </html>

* Type the following code and save it as “img5.html” .

<p>This is the Second Page</p> <p>

<a href="E:/B.Sc-2013/JS/Examples/img4.html" alt="1st Page"><img

(31)

</p> </body> </html>

Output:

Including Background Images: we can specify a background image with in webpage using background attribute in the opening of <BODY> tag. This attribute will take the URL of the image as its value.

The following program illustrates background image.

HTML program:

<html> <body

background="E:/B.Sc-2013/JS/Examples/Shirdi SaiBaba.jpg"> <font color=”red”>

<h3>Look: A background image!</h3> <p>Both gif and jpg files can be used a HTML

backgrounds.</p>

<p>If the image is smaller than the page, the image will repeat itself.</p>

(32)

</html>

Output:

Including images within table: An image can either be included in a table cell or act as a background in a table.

1.To add a background image: Use “background” attribute in the opening <TABLE> tag. It will take the URL of the image as its value and the background images are titled throughout the available table space.

2.To include images within cells: Images can be included within data cells of the tables. For that add <IMG> attribute between the <TD> or <TH> cell tags with proper URL specifying the source of the image.

Frames in HTML:

We can work with more than one HTML document inside a single HTML page. Each HTML page is to be included in a main program which should use frame set tag.

Procedure:

 Write two individual HTML pages namely ONE.HTML and TWO.HTML.  Write MAIN.HTML by using <frameset> tag and also include individual

pages ONE.HTML and TWO.HTML with the <frame> tag.

 <frameset> is the tag which is used to include individual frames in a

HTML page.

 We can include individual frames as rows and columns.

 <frame> is the tag which is used to indicate individual frame in the

<frameset> tag.

 Name is the attribute of the frame, which indicates the name of the HTML

(33)

 Src is the frame attribute which indicates the source location of the individual page.

 Open the MAIN.HTML in the browser.

 Note: <frameset> tag does not use any <body> tag.

Syntax for <frameset> tag:

<frameset rows=”50%,50%” // cols=”50%,50%”>

<frame name=”ONE.HTML” src=”ONE.HTML” scrolling=”yes” // “no”> <frame name=”TWO.HTML” src=”TWO.HTML” scrolling=”yes” // “no”> </frameset>

Code for ONE.HTML:

<html>

<head>

<title>first page</title>

</head>

<body>

<h1>This is my first page</h1>

</body>

</html>

Code for TWO.HTML:

<html>

<head>

<title>second page</title>

</head>

<body>

<h1>This is my second page</h1>

</body>

(34)

Code for MAIN.HTML:

<html>

<head>

<title>Frames</title>

</head>

</frameset>