Experiment 11

Experiment: 11
AIM: Introduction to HTML and XHTML
HTML is the basis for all Web pages. Compared to regular programming languages, HTML is
easy to learn and simple to use. HTML only requires a simple text editor to start coding.
An HTML file contains “markup tags” that tell the Web browser how to follow the instructions
enclosed within the tags. The angular brackets “<” and “>” indicate that the text within the
brackets is a tag. The start of the tag and the end of the tag are identified using special formats.
For example, <p> indicates the start of a new paragraph, and </p> indicates the end of the
paragraph. Regular text, or other instructions depending on the tag type, is enclosed between
the starting and ending tags. Tags are not case sensitive, that is, <p> and <P> mean the same
thing. Each tag can have attributes. These provide additional formatting and other information
regarding the tag. For example, the <body> tag can have an attribute to specify the background
colour of the Web page. <body bgcolor=”blue”> will render the Web page with a blue
background. Every HTML document starts with the <html> tag indicating to the Web browser
the start of the HTML document, and ends with the </html> tag, which indicates the end of
the document.
A basic HTML document looks like this:
<html>
<head>
<title>My first HTML page</title>
</head>
<body>
This is my first homepage. <b>This text is
bold</b>
</body>
</html>
The <head> tags indicate header information, or information that is not displayed in your page.
The <title> tags enclose the text that will appear in the caption bar of Web browser. The text
between the <body> tags will be displayed in browser window.
<b> and </b> indicate to the Web browser that all text between this tag pair should be bold
There are six levels of headings in HTML. They start with the <h1> </h1> tag pair and go up to
the <h6> </h6> pair. <h1> </h1> can be used for the most important heading, and <h2> </h2>
for a sub-head, and so on. For example:
<h1>Important heading</h1>
<h2>Less important heading</h2>
The <p> and </p> tags enable specify the paragraph breaks in text.
<p> Paragraph one </p>

<p> Paragraph two </p>
The <br> and </br> tags introduce line breaks when one want to start a new line and not a
new paragraph. Thus
<p>Para three broken into<br>two lines</br></p>
will print the text in two lines. HTML supports three kinds of lists. A bulleted or unordered list
uses the <ul> and <li> tags. A numbered or ordered list uses the <ol> and <li> tags. And a
definition list lists terms and their definitions by using the <dl>, <dt> and <dd> tags.
A bulleted list:
<ul>
<li>list item one</li>
<li>list item two</li>
<li> list item three</li>
</ul>
A numbered list:
<ol>
<li>list item 1</li>
</ol>
A definition list:
<dl>
<dt>term one</dt>
<dd>definition for term one</dd>
<dt>term two</dt>
<dd>definition for term two</dd>
<dt>term three </dt>
<dd>definition for term three</dd>
</dl>
Tables are defined using the <table> tag. Rows are defined with the <tr> tag and each column
is divided into data cells with the <td> tag. Headings in a table are defined using the <th> tag.
Table can be specified without any borders, depending on layout requirements, Border
attribute can be used to specify the thickness of the border.
<table border=“1”>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
To link to a different site or page you use the <a> tag

<a href=“XYZ/xyz.html”>XYZ Page</a>
This code will display the text “XYZ Page”, usually in a blue font, and underlined to indicate a
link. To specify a link to another Web site, substitute the file name with the site’s URL.
1
<a href=“http://www.gcet.ac.in/”>GCET Home Page</a>
To add an image to your Web page, you use the <img> tag and specify a location to pick up
the image file from
<img src=“images/image.jpg” width=“200” height=“150” alt=“Just an image”>
The ‘src’ (source) attribute tells the browser to get the image file image.jpg from the ‘images’
folder for the Web site, and that it should be displayed in a 200 x 150 pixel area. While the
image is being loaded, the “alt” (alternate) attribute informs the browser to display the text
“Just an image”.
XHTML
XHTML stands for Extensible HyperText Markup Language and is the next step in the
evolution of the Internet. The XHTML 1.0 is the first document type in the XHTML family.
XHTML was developed by the W3C to help web developers make the transition from HTML
to XML. By migrating to XHTML today, web developers can enter the XML world with all of
its attendant benefits, while still remaining confident in their content's backward and future
compatibility.
Developers who migrate their content to XHTML 1.0 will realize the following benefits:
XHTML documents are XML conforming. As such, they are readily viewed, edited, and
validated with standard XML tools. XHTML documents can be written to operate better than
they did before in existing browsers as well as in new browsers.
XHTML documents can utilize applications like scripts and applets that rely upon either the
HTML Document Object Model or the XML Document Object Model.
LAB EXERCISE:11
Implement the following basic tags of HTML to design a student bio-data web
page mentioning Name, Address, Qualification (Table), hobbies and user inputs.
1)<html>
2
2)<head>
3)<title>this is my first page</title>
4)<body bgcolor=pink>
5)<h1>welcome to html</h1><br/>
6)<b>tag for bold</b><br/>
7)<i>tag for italic</b><br/>
8)<u>tag for underline</u><br/>
9)<del>tag for delete</del><br/>
10)<h2>creating tables</h2>
<table border="2">
<th>table head</th>
<tr>
<td>row1</td>
<tr>
<td>row2</td>
</tr>
</table>
11)<h2>creating text box</h2>
12)<input type="text" name"text"> password
<input type="password" name="pws"><br/> radio button<br/>

3
13)male<input type="radio" name="male">
female<input type="radio" name="female">
<br>
14) </br> checkbox<br/>
15)bike<input type=checkbox" name="bike"><br/> car<input type="check box" name="car">

<br>
16) <br/> submit button<br/>
<input type="submit" value="submit"><br/>
17)select box<br/>
18)<select>
<option>one </option>
<option> two </option>
<option>three </option>
<option>four </option>
</select>

Experiment 11

Uploaded by

Copyright:

Available Formats

Experiment 11

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Experiment 11

Uploaded by

Copyright:

Available Formats

Experiment: 11

AIM: Introduction to HTML and XHTML

<p> Paragraph one </p>

To link to a different site or page you use the <a> tag

<img src=“images/image.jpg” width=“200” height=“150” alt=“Just an image”>

3)<title>this is my first page</title>

6)<b>tag for bold</b><br/>

7)<i>tag for italic</b><br/>

8)<u>tag for underline</u><br/>

9)<del>tag for delete</del><br/>

11)<h2>creating text box</h2>

12)<input type="text" name"text"> password

<input type="password" name="pws"><br/> radio button<br/>

female<input type="radio" name="female">

14) </br> checkbox<br/>

15)bike<input type=checkbox" name="bike"><br/> car<input type="check box" name="car">

16) <br/> submit button<br/>

<input type="submit" value="submit"><br/>

<option> two </option>

You might also like