internet programming lab exercise 1

courtesy : B. Selvakumar ,
kamaraj college of engineering and technology,
virudhunagar

Ex.No : 1

HTML consists of elements, which are made up of tags, which in turn contains attributes, which often have values.

Elements and Tags

Elements are the structures that describe parts of an HTML document.

For example, the P element represents a paragraph while the EM element gives emphasized content.

An element has three parts:

a start tag,

content, and

an end tag.

A tag is special text--"markup"--that is delimited by "<" and ">". An end tag includes a "/" after the "<".

For example, the EM element has a start tag, <EM>, and an end tag, </EM>.

The start and end tags surround the content of the EM element:

<EM>
This is emphasized text </EM>

Elements cannot overlap each other. Some elements allow the start or end tag to be omitted.

Some elements have no end tag because they have no content. These elements, such as the BR element for line breaks, are represented only by a start tag and are said to be empty element.

There are two types of elements:

v Block element

v Inline element

v Block element

A block element usually creates a line break <br> or paragraph break <p> when they are opened or closed. The most common elements are the text paragraph, horizontal rules <hr>, heading tags <h#>.

v Inline element

These are elements that do not cause a line break or paragraph break. The <image> tag is an example for an inline element.

Attributes

An element's attributes define various properties for the element. An attribute is included in the start tag only--never the end tag--and takes the form

attribute-name= "attribute-value".

The attribute value is delimited by single or double quotes. The quotes are optional if the attribute value consists solely of letters in the range A-Z and a-z, digits (0-9), hyphens ("-"), and periods (".").

Special Characters

Certain characters in HTML are reserved for use as markup and must be escaped to appear literally. The "<" character may be represented with an entity, < Similarly, ">" is escaped as > and "&" is escaped as & If an attribute value contains a double quotation mark and is delimited by double quotation marks, then the quote should be escaped as "

Other entities exist for special characters that cannot easily be entered with some keyboards. For example, the copyright symbol ("©") may be represented with the entity ©.

As an alternative to entities, authors may also use numeric character references.

Comments

Comments in HTML have a complicated syntax that can be simplified by following this rule: Begin a comment with "", and do not use "--" within the comment.

<!-- An example comment
-->

HTML Elements

HTML documents are text files made up of HTML elements.

HTML elements are defined using HTML tags.

HTML Tags

HTML tags are used to mark-up HTML elements
HTML tags are surrounded by the two characters < and >
The surrounding characters are called angle brackets
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 text between the start and end tags is the element content
HTML tags are not case sensitive, <b> means the same as <B>

Tag Attributes

Tags can have attributes. Attributes can provide additional information about the HTML elements on your page.

<body> tag defines the body element of our HTML page. With an added bgcolor attribute, we can tell the browser that the background color of our page should be red, like this:

<body bgcolor="red">.

<table> tag defines an HTML table. With an added border attribute, we can tell the browser that the table should have no borders:

Attributes always come in name/value pairs like name="value". Attributes are always added to the start tag of an HTML element.

Basic Structure of the HTML Program:

<html>

<head>

<title>Title of the Web page </title>

</head>

<body>

</body>

</html>

Basic HTML Tags

Tag	Description
<html>	Defines an HTML document
<body>	Defines the document's body
<h1> to <h6>	Defines header 1 to header 6
<p>	Defines a paragraph
<br/>	Inserts a single line break
<hr/>	Defines a horizontal rule
<!-- -->	Defines a comment

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.

Paragraphs

Paragraphs are defined with the <p> tag.

Line Breaks

The <br/> tag is used when we want to end a line, but don't want to start a new paragraph. The <br/> tag forces a line break wherever we place it.

Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser.

Text Formatting Tags

Tag	Description
<b>	Defines bold text
<big>	Defines big text
<em>	Defines emphasized text
<i>	Defines italic text
<small>	Defines small text
<strong>	Defines strong text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<ins>	Defines inserted text
<del>	Defines deleted text

Citations, Quotations, and Definition Tags

Tag	Description
<abbr>	Defines an abbreviation
<acronym>	Defines an acronym
<address>	Defines an address element
<bdo>	Defines the text direction
<blockquote>	Defines a long quotation
<q>	Defines a short quotation
<cite>	Defines a citation
<dfn>	Defines a definition term

Address Tag

<html>

<body>

College name college of Engineering and Technology,<br>

S.P.G.C.Nagar,<br>

Virudhunagar.

</address>

</body>

</html>

Acronyms Tag

<html>

<body>

<br>

<acronym title="College name college of Engineering and Technology "> COLLEGE </acronym>

</body>

</html>

Text Direction <bdo> Tag

<html>

<body>

The Sun rises in the east

</bdo>

</body>

</html>

HTML Character Entities

Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source.

A character entity has three parts:

an ampersand (&),

an entity name (or) a # and an entity number,

and finally a semicolon (;).

To display a less than sign in an HTML document we must write: < or <. The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers.

Note: that the entities are case sensitive.

The Most Common Character Entities:

Result	Description	Entity Name	Entity Number
	non-breaking space
<	less than	<	<
>	greater than	>	>
&	Ampersand	&	&
"	quotation mark	"	"
'	apostrophe (not in IE)	'	'

Some Other Commonly Used Character Entities:

Result	Description	Entity Name	Entity Number
¢	Cent	¢	¢
£	Pound	£	£
¥	Yen	¥	¥
§	Section	§	§
©	Copyright	©	©
®	registered trademark	®	®
×	Multiplication	×	×
÷	Division	÷	÷

Non-breaking Space

The most common character entity in HTML is the non-breaking space. Normally HTML will truncate spaces in our text. If we write 10 spaces in our text, HTML will remove 9 of them. To add spaces to our text, use the   character entity.

HTML Links

The Anchor Tag and the Href Attribute

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 syntax of creating an anchor:

<a href="url"> Text to be displayed </a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

The Target Attribute

With the target attribute, we can define where the linked document will be opened. The line below will open the document in a new browser window:

<a href="http://www.yahoo.com/" target="_blank"> Visit Yahoo Website </a>

The Name Attribute

The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for.

The syntax of a named anchor is:

<a name="label"> Text to be displayed </a>

The name attribute is used to create a named anchor. The name of the anchor can be any text we care to use.

The line below defines a named anchor:

<a name="tips"> Yahoo Index Page </a>

We should notice that a named anchor is not displayed in a special way. To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL.

<a href="http://www.yahoo.com/index.html#tips">

Jump to the Yahoo Index Page</a>

To open a link in a new browser window

<html>

<body>

<!-- If you set the target attribute of a link to "_blank",

the link will open in a new window. -->

</body>

</html>

Link to a location on the same page (Internal Link )

<html>

<body>

<p>

<a href = "#C4"> See also Chapter 4. </a>

</p>

<p>

<h2> Chapter 1 </h2>

<p> Introduction </p>

<h2> Chapter 2 </h2>

<p> HTML Basics </p>

<h2> Chapter 3 </h2>

<h2> Chapter 4 </h2>

</a>

<p> HTML Advanced Tags </p>

<h2> Chapter 5 </h2>

<p> Conclusion </p>

</p>

</body>

</html>

HTML Frames

In HTML frame tags, we will see how to make vertical, horizontal, and mixed framesets. With frames, we can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.

The disadvantages of using frames are:

The web developer must keep track of more HTML documents.
It is difficult to print the entire page.

Frame Tags

Tag	Description
<frameset>	Defines a set of frames
<frame>	Defines a sub window (a frame)
<noframes>	Defines a noframe section for browsers that do not handle frames
<iframe>	Defines an inline sub window (frame)

The Frameset Tag

The <frameset> tag defines how to divide the window into frames.
Each frameset defines a set of rows or columns.
The values of the rows/columns indicate the amount of screen area each row/column will occupy.

The Frame Tag

The <frame> tag defines what HTML document to put into each frame

In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column:

<html>

<frameset cols = "25%, 75%">

   <frame src = "file_1.htm">

   <frame src = "file_2.htm">

</frameset>

</html>

The IFRAME tag

<html>

</html>

Example for Mixed Frameset

<html>

</frameset>

</html>

Jump to a specified section with frame navigation

The example below demonstrates two frames. The navigation frame (content.htm) to the left contains a list of links with the second frame (link.htm) as a target. The second frame shows the linked document. One of the links in the navigation frame is linked to a specified section in the target file.

The HTML code in the file "content.htm" looks like this:

<a href ="link.htm" target ="showframe"> Link without Anchor </a> <br>

<a href ="link.htm#C10" target ="showframe"> Link with Anchor </a>.

The HTML code in the file "link.htm" looks like this:

<html>

</frameset>

</html>

HTML Images

HTML image tags show how to insert an image, how to align an image. It also shows how to create an image-map with click-able regions. In HTML, images are defined with the <img> tag.

Image Tags

Tag	Description
<img>	Defines an image
<map>	Defines an image map
<area>	Defines an area inside an image map

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. The value of the src attribute is the URL of the image we want to display on our page.

The “Alt” Attribute

The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text:

The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of our document for people who have text-only browsers.

The background attribute

<html>

…

</body>

</html>

Image Hyperlink

<html>

<body>

<p>

We can also use an image as a link

</a>

</p>

</body>

</html>

ImageMap

<html>

<body>

<p> Click on one of the planets to watch it closer: </p>

</map>

</body>

</html>

HTML Lists

This chapter demonstrates different HTML lists. It shows different types of ordered and unordered lists. It also shows how we can nest lists in an HTML document.

List Tags

Tag	Description
<ol>	Defines an ordered list
<ul>	Defines an unordered list
<li>	Defines a list item
<dl>	Defines a definition list
<dt>	Defines a definition term
<dd>	Defines a definition description

Ordered Lists

An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<html>

<body>

<h4>Numbered list:</h4>

<ol>

<li>Apples</li>

<li>Bananas</li>

</ol>

<h4>Letters list:</h4>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Lowercase letters list:</h4>

<li>Apples</li>

<li>Bananas</li>

</ol>

<h4>Roman numbers list:</h4>

<li>Apples</li>

<li>Bananas</li>

</ol>

<h4>Lowercase Roman numbers list:</h4>

<li>Lemons</li>

<li>Oranges</li>

</ol>

</body>

</html>

Unordered Lists

An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<html>

<body>

<h4>A nested List:</h4>

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

</ul>

</body>

</html>

Definition Lists

A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.

<html>

<body>

<h4>A Definition List:</h4>

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dd>White cold drink</dd>

</dl>

</body>

</html>

HTML Tables

HTML tables show how to insert a table header, a table border, and an image in a table cell. It also shows how to define cells that span more than one row or column, and how to control the white space between the cell content and its borders.

Table Tags

Tag	Description
<table>	Defines a table
<th>	Defines a table header
<tr>	Defines a table row
<td>	Defines a table cell
<caption>	Defines a table caption
<colgroup>	Defines groups of table columns
<col>	Defines the attribute values for one or more columns in a table
<thead>	Defines a table head
<tbody>	Defines a table body
<tfoot>	Defines a table footer

The Table tag

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. If we do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, we want the borders to show.

To display a table with borders, we will have to use the border attribute.

Table Headings tag

Headings in a table are defined with the <th> tag.

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.

<html>

<body>

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td></td>

</tr>

</table>

</body>

</html>

Note that in the above example, the borders around the empty table cell are missing. To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders visible:

<html>

<body>

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>&nbsp;</td>

</tr>

</table>

</body>

</html>

Cell Padding & Spacing

Cell Padding	Cell Spacing
<html> <body> <h4> With cell padding </h4> <table border="1" cellpadding = "10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>	<html> <body> <h4> With cell spacing </h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>

Tables with background

<html>

<body>

<h4> A background image: </h4>

<tr>

<td> First </td>

</tr>

<tr>

<td> Second </td>

</tr>

</table>

</body>

</html>

Cell with background

<html>

<body>

<h4> Cell backgrounds: </h4>

<tr>

<td bgcolor="red">First</td>

</tr>

<tr>

<td background="bgdesert.jpg"> Second</td>

</tr>

</table>

</body>

</html>

Usage of thead, tbody, & tfoot tags

<html>

<body>

<thead>

<tr>

<td>This text is in the THEAD</td>
</tr>
</thead>

<tfoot>

<tr>

<td>This text is in the TFOOT</td>
</tr>
</tfoot>

<tbody>
<tr>
<td> This text is in the TBODY</td>
</tr>
</tbody>
</table>

</body>

</html>

HTML Forms

HTML forms and input tags show how to create text fields, check-boxes, and radio-buttons. It also shows how to put the input fields in a form with a submit button. When the submit button is pushed the "user-input" is sent to another file.

Form Tags

Tag	Description
<form>	Defines a form for user input
<input>	Defines an input field
<textarea>	Defines a text-area (a multi-line text input control)
<label>	Defines a label to a control
<select>	Defines a selectable list (a drop-down box)
<optgroup>	Defines an option group
<option>	Defines an option in the drop-down box
<button>	Defines a push button

The Form Tag

A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.

A form is defined with the <form> tag.

The Input Tag

The most used form tag is the <input> tag. The type of input is specified with the type attribute.

Text Fields

Text fields are used when we want the user to type letters, numbers, etc. in a form.

<form>

Username: <input type="text" name="txtUsername">

<br/>

Password: <input type="text" name="txtPassword">

</form>

Radio Buttons

Radio Buttons are used when we want the user to select one of a limited number of choices.

<form>

<input type="radio" name="rdoSex" checked=”checked” value="male"> Male

<br/>

<input type="radio" name="rdoSex" value="female"> Female

</form>

Checkboxes

Checkboxes are used when we want the user to select one or more options of a limited number of choices.

<form>

<input type="checkbox" name="chkBike" checked=”checked”> I have a bike

<br/>

<input type="checkbox" name="chkCar"> I have a car

</form>

Drop down list

<form>

<option value="Tamil" selected=”selected”>Tamil

<option value="English">English

<option value="Hindi">Hindi

<option value="Telugu">Telugu

</select>

</form>

The Form's Action Attribute and the Submit Button

When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

<form name="input" method="get" action="html_form_action.asp">

Username: <input type="text" name="txtUser">

     <input type="submit" value="Submit">

</form>

Menu Bar

Sunday, January 8, 2012