Scribd
Upload
50 views85 pages

Basic HTML Workshop Module Guide

This document is a workshop module on Basic HTML concepts, covering topics such as HTML tags, document structure, comments, the document head, and body. It explains various HTML elements, including text formatting, hyperlinks, lists, and tables, along with practical examples. The module aims to provide foundational knowledge for creating web pages using HTML.

Uploaded by

Pankaj
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
50 views85 pages

Basic HTML Workshop Module Guide

This document is a workshop module on Basic HTML concepts, covering topics such as HTML tags, document structure, comments, the document head, and body. It explains various HTML elements, including text formatting, hyperlinks, lists, and tables, along with practical examples. The module aims to provide foundational knowledge for creating web pages using HTML.

Uploaded by

Pankaj
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

1

PHP WORKSHOP
MODULE

HTML

CIMAGE GROUP OF INSTITUTIONS Page 1


Module-1
concepts of Basic HTML.
HTML Tags:
Structure of an HTML Document:
Comments:
The Document Head:
Document Body.
Blocks:
Heading:
Horizontal Line Tag
Text Formatting tags.
Hyper Links.
Creating a mailto: Link
Relative Path and Absolute Path
LISTS in HTML
Tables in HTML.
HTML Colors:
Images in HTML
Exercise

CIMAGE GROUP OF INSTITUTIONS Page 2


Hyper Text Markup Language
concepts of Basic HTML.
HTML is a language for describing web pages.
• HTML stands for Hyper Text Markup Language
• HTML is a markup language
• A markup language is a set of markup tags
• The tags describe document content
• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages

HTML Tags:
HTML markup tags are usually called HTML tags
• HTML tags are keywords (tag names) surrounded by angle brackets like <html>
• 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 end tag is written like the start tag, with a forward slash before the tag name
• Start and end tags are also called opening tags and closing tags
• HTML tags are not case sensitive i.e., <HEAD>, <head> and <hEaD> are equal
• Styles must be switched off by an end tag
• Some characters have to be replaced in the text by escape sequences
• White space, tabs, and new lines are ignored by the browser
• If a browser doesn’t understand a tag it will usually ignore it
Structure of an HTML Document:
All HTML documents follow the same basic structure. The general structure of
HTML document (page) is as the following:

CIMAGE GROUP OF INSTITUTIONS Page 3


Web Technologies 2

• The entire document is surrounded by <html> . . . </html>


• The body contains the content that displays on the screen
• The tags control the formatting of content by the browser
Comments:

The comment tag is used to insert comments in the source code. Comments are not
displayed in the browsers. We can use comments to explain our code, which can help us
when we edit the source code at a later date. This is especially useful if we have a lot of code.

Comment tags start <! and end with >. Each comment can contain as many lines of
text as we like. If the comment runs over a number of lines, each must start with - - and must
not contain - - within its body.
Ex:
<!--This is a comment --
-- Comments are not displayed in the browser -->
Generally the software developers write the following information in the comments:
• The name of the application
• A description of the purpose of the code in the file
• The name of the author
• The original creation date
• A version number of the HTML
• Copyright information

The Document Head:

The document head holds control information to be used by browsers and servers.
Most of the people never use head tags except the title tag i.e., <title> . . . </title>. All
HTML documents have just one title which is displayed at the top of the browser.
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.

CIMAGE GROUP OF INSTITUTIONS Page 4


Web Technologies 3

• Style declarations: Group of class definitions (style sheets) used by other tags to set
visual characteristics.
• Script functions: Set of functions declared inside the “HTML script element” to
provide functionality to the document.
• Meta statements: Declared through the “HTML meta tag”, set custom attributes and
values for the document.
• Global links: Defined using the “HTML link tag” designates resources related to the
actual document.
Document Body.
The body is the container for the visual part of a document. All the things written here
(except for special cases) will be shown when the document preparation is over. Most of the
tags in HTML can be inserted in the body section (inside the HTML body element) and will
shape the visual aspects of the document.
Blocks:
In HTML, the documents are prepared as blocks of text and each block is formatted
independently. A block has no meaning outside of a particular document. The main two
blocks of HTML documents are paragraph and heading.
Paragraph: Paragraphs are block-level elements that constitute a basic structure of a
document. The <p> tag defines a paragraph. Browsers automatically add
some space (margin) before and after each <p> element. The margins
can be modified with CSS (with the margin properties). The syntax of
<p> tag is:
<p [align=”left” | “center” | “right” | “justify”] . . . </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.

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

CIMAGE GROUP OF INSTITUTIONS Page 5


Web Technologies 4

the most important heading and <h6> defines the least important heading.
The syntax of <h1> to <h6> tags are:
<h1 [align=”left” | “center” | “right” | “justify”] . . . </p>
The “align” attribute is optional. It defines the horizontal alignment of
its content.
<h1 [align=”left” | “center” | “right” | “justify”] . . . </h1>
<h2 [align=”left” | “center” | “right” | “justify”] . . . </h2>
<h3 [align=”left” | “center” | “right” | “justify”] . . . </h3>
<h4 [align=”left” | “center” | “right” | “justify”] . . . </h4>
<h5 [align=”left” | “center” | “right” | “justify”] . . . </h5>
<h6 [align=”left” | “center” | “right” | “justify”] . . . </h6>
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 as
separator. This tag has a set of attributes such as align, noshade, size
and width and they are optional. The <hr> tag does not require and
end tag.
Attribute Value Syntax Description
left Specifies the alignment of a <hr>
Align center <hr align="left|center|right"> element
right
Specifies that a <hr> element
should render in one solid color
Noshade noshade <hr noshade>
(noshaded), instead of a shaded
Color
<hr size="pixels"> Specifies the height of a <hr>
Size pixels element
<hr size="30">
Specifies the width of a <hr>
pixels <hr width="pixels|%">
element.
The width in pixels (like "100px" or
Width % <hr width="50%"> just "100").
The width in percent of the
available space (like "50%")

CIMAGE GROUP OF INSTITUTIONS Page 6


Web Technologies 5

Ex: A Basic Example:


<! -- This code demonstrates the --
-- purpose of headers, paragraph, --
-- break and horizontal tags -- >
<html>
<head>
<title> This is Sample Page</title>
</head>
<body>
<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([Link])<br>This is the first time I am learning HTML</p>
<hr width=”50%”>
</body>
</html>
Output:

CIMAGE GROUP OF INSTITUTIONS Page 7


Web Technologies 6

Text Formatting tags.


The text on an HTML page can be altered a number of ways. The following table
explains different generally used text formatting tags:
Tag Description
<b> Defines bold text
<i> Defines a part of text in an alternate voice or mood
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<tt> Defines teletype text
<br> Inserts a single line break
Defines preformatted text. Text in a <pre> element is
<pre> displayed in a fixed-width font (usually Courier), and it
preserves both spaces and line breaks.

Escape Sequence Characters: These characters start with an


ampersand (&) and terminated with semicolon (;). They are

&amp; Displays &


&lt; Displays <
&gt; Displays >
&quot; Displays "
&nbsp; Displays blank space
&copy; Displays ©
<basefont> Specifies a default font-color, font-size, or font-family
for all the text in a document. The syntax is <basefont
size=”n”> . . . </basefont>
<font> Specifies the font face, font size, and font color of text.

Ex:1 Changing Font Sizes


<html>
<head>
<title>Changing Font Sizes</title>
</head>
<body>
<h1>Changing Font Sizes</h1>
<basefont size=”3”>

CIMAGE GROUP OF INSTITUTIONS Page 8


Web Technologies 7

<p>Here is some text in size three


<p>And here is some <font size=”7”>larger</font>
<font size=”+3”>t</font>
<font size=”+2”>e</font>
<font size=”+1”>x</font>
<font size=”-1”>t</font>
</basefont>
</body>
</html>
Output:

Ex:2 Text Formatting


<html>
<head>
<title>Bill Smiggins Inc</title>
</head>
<body>
<h3>Placing Orders</h3>
<p>You can place <strong>orders</strong> via our
<font color=”#121212”>Web Site</font> or by using the

CIMAGE GROUP OF INSTITUTIONS Page 9


Web Technologies 8

<font size=”+2”>telephone</font>if you<i>must</i>.


Call in person for orders &lt; 50 dollars. <br><i>&quot;
We are always ready to help &quot;</i></p>
<h3>Our Address</h3>
<pre>
Unit 5,
Tax Havens Industrial Estate,
Enterprise City, USA
</pre>
</body>
</html>
Output:

Font Style Using HTML with CSS:


In HTML using CSS we can change font styles such as font face, color and size.
Ex:1 The background-color property defines the background color for an element:
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>

CIMAGE GROUP OF INSTITUTIONS Page 10


Web Technologies 9

Output:

Ex:2 The font-family, color, and font-size properties defines the font, color, and size of the
text in an element:
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
Output:

Ex:3 The text-align property specifies the horizontal alignment of text in an element:
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

CIMAGE GROUP OF INSTITUTIONS Page 11


Web Technologies 10

Output:

Hyper Links.
The HTML <a> tag defines a hyperlink.
A hyperlink (or link) is a word, group of words, or image that you can click on to
jump to another document.
When we move the cursor over a link in a Web page, the arrow will turn into a little
hand.
The most important attribute of the <a> element is the href attribute, which indicates
the link’s destination.
By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
HTML Link Syntax
The HTML code for a link is simple. It looks like this:
<a href="url">Link text</a>

The href attribute specifies the destination of a link.


Ex:
<a href="[Link] W3Schools</a>

Which will display like this: Visit [Link]


Clicking on this hyperlink will send the user to Google’s homepage.
Note: The "Link text" doesn't have to be text. It can be an image or any other HTML element.

CIMAGE GROUP OF INSTITUTIONS Page 12


Web Technologies 11

HTML Links - the target Attribute


The target attribute specifies where to open the linked document. The following
example will open the linked document in a new browser window or a new tab:
Ex:
<a href="[Link] target="_blank">Visit Google</a>
Ex: Linking to Other Pages
Step:1 Open the Notepad and type the following code and save it as “[Link]”.
<html>
<head>
<title>First Page</title>
</head>
<body>
<h3>Linking to another page</h3>
<p>This is Brahmarao KBV Assoc. Professor BVRICE Vishnupur Bhimavaram
<br>My remaining deatils are in next page.
<br><a href="[Link]">GoTo Second</a>
</body>
</html>
Step:2 Open the Notepad and type the following code and save it as “[Link]”.
<html>
<head>
<title>Second Page</title>
</head>
<body>
<h3>Linking to another page</h3>
<br>My age is 42 Years.
<br>I have 16 years Teaching experiance
<br>My qualification is MCA., [Link](CSE)., [Link](CS).
<br><a href="[Link]">GoTo first</a>
</body>
</html>

CIMAGE GROUP OF INSTITUTIONS Page 13


Web Technologies 12

Output:

Links on the Same Page:

The following code example demonstrates how to use a link to jump to another

part of a document.

Ex:

<html>

<body>

<p>

<a href="#C4">See also 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>

CIMAGE GROUP OF INSTITUTIONS Page 14


Web Technologies 13

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

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

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

<h2>Chapter 5</h2>

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

</body>

</html>

Output:

Creating a mailto: Link

The following example demonstrates how to link to an e-mail address and generate
a new e-mail message in your default e-mail application (this works only if you have mail
installed).
Ex:
<html>

<body>

<p>

This is a mail link:

<a href="[Link]

again">

CIMAGE GROUP OF INSTITUTIONS Page 15


Web Technologies 14

Send Mail</a>

</p>

<p>

<b>Note:</b> Spaces between words should be replaced by %20

to <b>ensure</b> that the browser will display your text

properly.

</p>

</body>

</html>
Output:

Relative Path and Absolute Path


Absolute Path:

A path is an absolute path if the entire URL and file name can be pasted into a
browser's address field to locate a specific page on the Internet. An absolute path specifies a
fully-qualified URL; the protocol ([Link] must be present in addition to the site's domain
name, and often a subfolder or specific file name is included as well.
This is an example of link to an absolute URL:
<a href="[Link] search engine</a>
The URL in the link above can be loaded regardless of the current page
displayed in a browser.

CIMAGE GROUP OF INSTITUTIONS Page 16


Web Technologies 15

Relative Path:

A relative path specifies the name of the file to be linked to only as it is related
to the current document.
For example, if all the files in our Web site are contained within the same
directory (or folder), and we want to establish a link from [Link] to [Link], the code
on [Link] will look like this:
<a href="[Link]">Go to page 2</a>
This link will be valid only from within the same directory that [Link] is
saved in. The browser receives the request for the new page, looks in the current directory
(folder) of the current page, and finds a file named [Link] to display.
LISTS in HTML.
HTML supports three types of lists. They are

1. Ordered Lists

2. Unordered Lists

3. Definition Lists

HTML List Tags:


Tag Description Syntax

<ol [type=”1”|”a”|”A”|”I”|”i”] [start=”n”]


<ol> Defines an Order List
[compact]. . .</ol>

<ul> Defines an Unordered List <ul [type=”disc”|”square”|”circle”]>. . .</ul>

<li> Defines a list item <li>. . .<li>

<dl> Defines a description List <dl [compact]. . .</dl>

Defines a term/name in a <dt>. . . </dt>


<dt>
description list

Defines a description of a <dd>. . .[</dd>]


<dd>
term/name in a description list

CIMAGE GROUP OF INSTITUTIONS Page 17


Web Technologies 16

1. Ordered Lists:

An ordered list can be numerical or alphabetical. The <ol> tag defines an ordered list.
The <li> tag is used to define list items.
Ex:

<html>
<body>
<h3> An Order List is</h3>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Output:

CIMAGE GROUP OF INSTITUTIONS Page 18


[Link] List:
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> [Link] Technologies 17

Ex:1

Output:

Ex:2

CIMAGE GROUP OF INSTITUTIONS Page 19


<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>

<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>

CIMAGE GROUP OF INSTITUTIONS Page 20


Web Technologies 18

<h4>Circle bullets list:</h4>


<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>
</body>
</html>
Output:

3. Definition Lists:
A definition list is not a list of single items. It is a list of items (terms), together
with a description of each item (term). A definition list starts with a <dl> tag (definition list).
Each term starts with a <dt> tag (definition term). Each description starts with a <dd> tag
(definition description).
Ex:
<html>
<body>
<h4>A Definition List:</h4>

CIMAGE GROUP OF INSTITUTIONS Page 21


Web Technologies 19

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
Output:

Nested Lists:
A nested list is a list within another list. Usually the second list is indented
another level and the item markers will appear differently than the original list.
Ex:
<html>
<body>
<h4>A Nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>

CIMAGE GROUP OF INSTITUTIONS Page 22


Web Technologies 20

</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Output:

Tables in HTML.
Tables are an excellent way to organize and display information on a page.
Tables are defined using the <table> tag. A table is divided into rows with the <tr> tag, and
each row is divided into data cells using the <td> tag. The letters td stand for “table data,”
which is the content of a data cell. A data cell can contain text, images, lists, paragraphs,
forms, horizontal rules, tables, and so on.
Ex:

CIMAGE GROUP OF INSTITUTIONS Page 23


Web Technologies 21

HTML Table Tags:


Tag Description Syntax
<table [align=”center”|”left”|”right”] [border=”n”]]
<table> Defines a table [cellpadding=”n”][width=”nn%”][cellspacing=”n”]> . .
. </table>
<th [align=”center”|”left”|”right”]
Defines a header cell in [border=”n”][valign=”top”|”center”|”bottom”][nowrap][
<th> colspan=”n”]
a table
[rowspan=”n”]. . .</th>
<tr [align=”center”|”left”|”right”]
<tr> Defines a row in a table [valign=”top”|”center”|”bottom”]> . . .</tr>
<td [align=”center”|”left”|”right”]
<td> Defines a cell in a table [valign=”top”|”center”|”bottom”]
[nowrap][colspan=n][rowspan=n]>. . .</td>
<caption> Defines a table caption <caption>string</caption>
Specifies a group of <colgroup [span=”n”][width=”n”]>. . .</colgroup>
<colgroup> one or more columns in
a table for formatting
Specifies column <col span=”n” [width=”n”]>. . .</col>
properties for each
<col>
column within a
<colgroup> element
Groups the header <thead>. . .</thead>
<thead>
content in a table
Groups the body <tbody>. . . </tbody>
<tbody>
content in a table
Groups the footer <tfoot>. . .</tfoot>
<tfoot>
content in a table

Note: nowrap - Specifies that the content inside a header cell should not wrap
valign-Vertical aligns the content in a header cell
width-Specifies the width of a header cell
Ex:1 The following code creates a table with one row and one column.
<html>
<body>
<h4>One column:</h4>
<table border="1">
<tr>

CIMAGE GROUP OF INSTITUTIONS Page 24


Web Technologies 22

<td>100</td>
</tr>
</table>
</body>
</html>
Output:

Ex:2 The following code creates a table with one row and three columns.
<html>
<body>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
</body>
</html>
Output:

CIMAGE GROUP OF INSTITUTIONS Page 25


Web Technologies 23

Ex:3 The following code creates a table with two rows and three columns.
<html>
<body>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Output:

Table Borders:
The border attribute controls the appearance of the table’s borders or lines. The
default border is 0, so if we do not specify a border attribute, the table is displayed without
any borders. Sometimes this is useful, but most of the time, we want the borders to be visible.
Ex:4 The following code demonstrates the use of different table borders.
<html>
<body>

CIMAGE GROUP OF INSTITUTIONS Page 26


Web Technologies 24

<h4>With a normal border:</h4>


<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With a thick border:</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With a very thick border:</h4>
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>

CIMAGE GROUP OF INSTITUTIONS Page 27


Web Technologies 25

Output:

Table with No Border:


If we don't provide a border attribute, the default is none. The following
example shows two ways to create a table with no borders.
Ex:5
<html>
<body>
<h4>This table has no borders:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>This table also has no borders:</h4>
<table border="0">
<tr>

CIMAGE GROUP OF INSTITUTIONS Page 28


Web Technologies 26

<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Output:

Headings in a Table:
Table headings are defined with the <th> tag.
Ex:6 The following explains how to use the headings in a table.
<html>
<body>
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>

CIMAGE GROUP OF INSTITUTIONS Page 29


Web Technologies 27

<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 777 1854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 777 1855</td>
</tr>
</table>
Output: </body>
</html>

CIMAGE GROUP OF INSTITUTIONS Page 30


Web Technologies 28

Table with a Caption:


The following example demonstrates how to create a table with a caption.
Ex:7
<html>
<body>
<h4>This table has a caption, and a thick border:</h4>
<table border="6">
<caption>My Caption</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Output:

CIMAGE GROUP OF INSTITUTIONS Page 31


Web Technologies 29

Tags Inside a Table:


The following example demonstrates how to display elements inside other
elements.
Ex:7

CIMAGE GROUP OF INSTITUTIONS Page 32


<html>
<body>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>

CIMAGE GROUP OF INSTITUTIONS Page 33


Web Technologies 30

</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
Output:

Aligning Cell Content:


The following code demonstrates how to use the align attribute to align the
content of cells to create a neatly organized table.
Ex:9
<html>
<body>
<table width="400" border="1">
<tr>
<th align="left">Money spent on ... </th>
<th align="right">January</th>
<th align="right">February</th>
</tr>
<tr>
<td align="left">Clothes</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>

CIMAGE GROUP OF INSTITUTIONS Page 34


Web Technologies 31

</tr>
<tr>
<td align="left">Make-Up</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">Food</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">Sum</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
</html>
Output:

Ex:10 An HTML table with a <thead>, <tfoot>, and a <tbody> element.


<html>
<body>
<table border="1">
<thead>
<tr>
<th>Month</th>

CIMAGE GROUP OF INSTITUTIONS Page 35


Web Technologies 32

<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
</body>
</html>
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).

CIMAGE GROUP OF INSTITUTIONS Page 36


Web Technologies 33

The 17 standard colors are: aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.
Sorted by Color Name:
141 color names are defined in the HTML and CSS color specification (17
standard colors plus 124 more). The table below lists them all, along with their hexadecimal
values.

Color Name HEX Color Name HEX


AliceBlue #F0F8FF LightPink #FFB6C1
AntiqueWhite #FAEBD7 LightSalmon #FFA07A
Aqua #00FFFF LightSeaGreen #20B2AA
Aquamarine #7FFFD4 LightSkyBlue #87CEFA
Azure #F0FFFF LightSlateGray #778899
Beige #F5F5DC LightSteelBlue #B0C4DE
Bisque #FFE4C4 LightYellow #FFFFE0
Black #000000 Lime #00FF00
BlanchedAlmond #FFEBCD LimeGreen #32CD32
Blue #0000FF Linen #FAF0E6
BlueViolet #8A2BE2 Magenta #FF00FF
Brown #A52A2A Maroon #800000
BurlyWood #DEB887 MediumAquaMarine #66CDAA

CadetBlue #5F9EA0 MediumBlue #0000CD


Chartreuse #7FFF00 MediumOrchid #BA55D3
Chocolate #D2691E MediumPurple #9370DB
Coral #FF7F50 MediumSeaGreen #3CB371

CornflowerBlue #6495ED MediumSlateBlue #7B68EE

Cornsilk #FFF8DC MediumSpringGreen #00FA9A

Crimson #DC143C MediumTurquoise #48D1CC

CIMAGE GROUP OF INSTITUTIONS Page 37


Web Technologies 34

Cyan #00FFFF MediumVioletRed #C71585

DarkBlue #00008B MidnightBlue #191970


DarkCyan #008B8B MintCream #F5FFFA
DarkGoldenRod #B8860B MistyRose #FFE4E1
DarkGray #A9A9A9 Moccasin #FFE4B5
DarkGreen #006400 NavajoWhite #FFDEAD
DarkKhaki #BDB76B Navy #000080
DarkMagenta #8B008B OldLace #FDF5E6
DarkOliveGreen #556B2F Olive #808000
Darkorange #FF8C00 OliveDrab #6B8E23
DarkOrchid #9932CC Orange #FFA500
DarkRed #8B0000 OrangeRed #FF4500
DarkSalmon #E9967A Orchid #DA70D6
DarkSeaGreen #8FBC8F PaleGoldenRod #EEE8AA
DarkSlateBlue #483D8B PaleGreen #98FB98
DarkSlateGray #2F4F4F PaleTurquoise #AFEEEE
DarkTurquoise #00CED1 PaleVioletRed #DB7093
DarkViolet #9400D3 PapayaWhip #FFEFD5
DeepPink #FF1493 PeachPuff #FFDAB9
DeepSkyBlue #00BFFF Peru #CD853F
DimGray #696969 Pink #FFC0CB
DimGrey #696969 Plum #DDA0DD
DodgerBlue #1E90FF PowderBlue #B0E0E6
FireBrick #B22222 Purple #800080
FloralWhite #FFFAF0 Red #FF0000
ForestGreen #228B22 RosyBrown #BC8F8F
Fuchsia #FF00FF RoyalBlue #4169E1
Gainsboro #DCDCDC SaddleBrown #8B4513
GhostWhite #F8F8FF Salmon #FA8072
Gold #FFD700 SandyBrown #F4A460

CIMAGE GROUP OF INSTITUTIONS Page 38


Web Technologies 35

GoldenRod #DAA520 SeaGreen #2E8B57


Gray #808080 SeaShell #FFF5EE
Green #008000 Sienna #A0522D
GreenYellow #ADFF2F Silver #C0C0C0
HoneyDew #F0FFF0 SkyBlue #87CEEB
HotPink #FF69B4 SlateBlue #6A5ACD
IndianRed #CD5C5C SlateGray #708090
Indigo #4B0082 Snow #FFFAFA
Ivory #FFFFF0 SpringGreen #00FF7F
Khaki #F0E68C SteelBlue #4682B4
Lavender #E6E6FA Tan #D2B48C
LavenderBlush #FFF0F5 Teal #008080
LawnGreen #7CFC00 Thistle #D8BFD8
LemonChiffon #FFFACD Tomato #FF6347
LightBlue #ADD8E6 Turquoise #40E0D0
LightCoral #F08080 Violet #EE82EE
LightCyan #E0FFFF Wheat #F5DEB3
LightGoldenRodYellow #FAFAD2 White #FFFFFF

LightGray #D3D3D3 WhiteSmoke #F5F5F5


LightGreen #90EE90 Yellow #FFFF00
YellowGreen #9ACD32

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

CIMAGE GROUP OF INSTITUTIONS Page 39


Ex:

<html>
<body bgcolor="red">
<h1>Hello world!</h1>
</body>
</html>Web Technologies 36

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:
<font color="red">This is some text!</font>
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. The syntax of defining an image:
<img src="url" />
The URL points to the location or address where the image is stored.
<img> Tag Syntaxes:
1. <body background=”URL”>…</body>
Sets the background of the page to use the given image.

2. <img src=”URL” | “name” height=”n” width=”n” [alt=”string’]


[align=”top”|”center”|”bottom” ] [usemap=”URL”]>
Displays an inline image i.e., an image appears in the body of the text.

3. <a href=”URL”>text message </a>


Uses an ordinary hypertext link and URL should point the image file.

4. <a href=”URL”><img src=”filename”></a>


Uses an image for hyper link.

CIMAGE GROUP OF INSTITUTIONS Page 40


5. <img src=”URL” usemap=”URL”>
To display the source image and to map the second [Link] Technologies 37

6. <area shape=”circle”|”rect”|”poly”|”default” href=”URL” cords=”string”


alt=”string”>
Creates a clickable area on an image map. The attribute “alt=”string”
indicates for the reader of where the link goes.

Ex:
<html>
<body>
<p>
An image:
</p>
<p>
<img src="E:/[Link]-2013/JS/Examples/[Link]" width="100"
height="100" />
</p>
</body>
</html>
Output:

Each shape is defined by co-ordinates pairs of the integers which give location
of the image in pixels.
• The default location does not require coordinates is used to indicate what
happens if the user clicks outside of the mapped areas. Each image map can
have only one default.
CIMAGE GROUP OF INSTITUTIONS Page 41
Web Technologies 38

• A rectangle has four coordinates which are paired . The first pair defines the
top left corner and second pair is the bottom right corner of the area.
• A circle is defined by its center and its radius. The center is given by a pair
of values , the radius by a single value. Therefore this requires just three
values in the coordinate string.
• A polygon is made from a set of coordinates with the last pair listed being
joined to the first to complete the shape.
Background Images:
The following example demonstrates how to add a background image to
an HTML page.
Ex:
<html>
<body background="E:/[Link]-2013/JS/Examples/[Link]">
<font color=”red”>
<h3>Look: A background image!</h3>
<p>Both gif and jpg files can be used as HTML
backgrounds.</p>
<p>If the image is smaller than the page, the image will repeat
itself.</p>
</font>
</body>
</html>
Output:

CIMAGE GROUP OF INSTITUTIONS Page 42


Web Technologies 39

alt Attribute:
The alt attribute is used to define an alternate text for an image. 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.
The value of the alt attribute is an author-defined text:
<img src="[Link]" alt="Big Boat" />
It is a good practice to include alternate text for every image on a page to
improve the display and usefulness of our document who have text-only browsers.
Ex: The following example shows what happens when the image file is not
available.
<html>
<body>
<p>
An image:
<img src="E:/[Link]" alt=”HAI” width="200" height="50">
</p>
</body>
</html>
Output:

CIMAGE GROUP OF INSTITUTIONS Page 43


Web Technologies 40

Hyperlink with an Image:


The hyperlink can also be created using an image. The following example
demonstrates how to use an image for hyperlink.
Ex: Type the following code and save it as “[Link]”.
<html>
<body>
<p>This is the First Page</p>
<p>
<a href="E:/[Link]-2013/JS/Examples/[Link]" alt="2nd
Page"><img src="E:/[Link]-2013/JS/Examples/[Link]"
width="70" height="100"></a>
</p>
</body>
</html>
* Type the following code and save it as “[Link]”.
<html>
<body>
<p>This is the Second Page</p>
<p>
<a href="E:/[Link]-2013/JS/Examples/[Link]" alt="1st
Page"><img src="E:/[Link]-2013/JS/Examples/[Link]"
width="70" height="100"></a>
</p>
</body>
</html>
Output:

CIMAGE GROUP OF INSTITUTIONS Page 44


Exercise
1. Create a webpage that prints your name to the screen.
2. Create a webpage that prints the numbers 1 - 10 to the screen.
3. Create a webpage and set its title to "This is a webpage".
4. Create a webpage that prints the message "When was this webpage created? Check page's
title for the answer." to the screen, and set the title of the page to the current date.
5. Create a webpage that prints any text of your choosing to the screen, do not include a head
section in the code.
6. Print your name in green.
7. Print the numbers 1 - 10, each number being a different color.
8. Prints your name in a Tahoma font.
9. Print a paragraph with 4 - 5 sentences. Each sentence should be a different font.
10. Print a paragraph that is a description of a book, include the title of the book as well as its
author. Names and titles should be underlined, adjectives should be italicized and bolded
11. Print your name to the screen with every letter being a different heading size
12. Print the squares of the numbers 1 - 20. Each number should be on a separate line, next to
it the number 2 superscripted, an equal sign and the result. (Example: 102 = 100)
13. Prints 10 names with a line break between each name. The list should be alphabetized,
and to do this place a subscripted number next to each name based on where it will go in
the alphabetized list. (Example: Alan1). Print first, the unalphabetized list with a subscript
number next to each name, then the alphabetized list. Both lists should have an <h1> level
heading.
14. Print two paragraphs that are both indented using the &nbsp; command.
15. Print two lists with any information you want. One list should be an ordered list, the other
list should be an unordered list.
16. Prints an h1 level heading followed by a horizontal line whose width is 100%. Below the
horizontal line print a paragraph relating to the text in the heading.
17. Print some deleted and inserted text of your choosing.
18. Print a definition list with 5 items.
19. Create some links to various search engines (google, yahoo, altavista, lycos, etc).
20. Create links to five different pages on five different websites that should all open in a new
window.

21. Create a page with a link at the top of it that when clicked will jump all the way to the
bottom of the page.

CIMAGE GROUP OF INSTITUTIONS Page 45


22. Create a page with a link at the bottom of it that when clicked will jump all the way to the
top of the page.
23. Create a page with a link at the top of it that when clicked will jump all the way to the
bottom of the page. At the bottom of the page there should be a link to jump back to the
top of the page.
24. Display five different images. Skip two lines between each image. Each image should
have a title.
25. Display an image that has a border of size 2, a width of 200, and a height of 200.
26. Display an image that when clicked will link to a search engine of your choice (should be
opened in a new window).
27.

28.

29.

CIMAGE GROUP OF INSTITUTIONS Page 46


30.

31.

32.

33.

CIMAGE GROUP OF INSTITUTIONS Page 47


Web Technologies 41

Module-2
Multimedia Objects
Applets:
Frame Tag in HTML
FORMS in HTML
HTML Document Head in detail.
<DOCTYPE> element
XHTML in brief.

CIMAGE GROUP OF INSTITUTIONS Page 48


Multimedia Objects are included in HTML document.
<object> Tag:

1. The <object> tag defines an embedded object within an HTML document. This
element inserts multimedia such as audio, video, Java applets, ActiveX, PDF, and
Flash in to the web pages.
Syntax:
<object classid=”URL” data=”URL” [codebase=”URL”]
type=”string” [standby=”string”] height=”n” width=”n”
[title=”string”]>…</object>
Where classid : Defines a class ID value as set in the Windows Registry or a URL
data : Specifies the URL of the resource to be used by the object
codebase : Defines where to find the code for the object
type : Specifies the MIME type of data specified in the data attribute
standby : Defines a text to display while the object is loading
height : Specifies the height of the object
width : Specifies the width of the object
title : This attribute is to provide a title for the element
2. We can also use the <object> tag to insert another webpage into our HTML
document.
3. We can use the <param> tag to pass parameters to plugins that have been embedded
with the <object> tag.
Syntax:
<param name=”string” value=”string” type=”string” valuetype=[“ref” | “object”
| “data”]>
Where name : Specifies the name of a parameter
value : Specifies the value of the parameter
type : Specifies the MIME type of the parameter
valuetype : Specifies the type of the value

CIMAGE GROUP OF INSTITUTIONS Page 49


Web Technologies HTML

Ex
:
<html>
<head>
<title>Embedded Object</title>
</head>
<body>
<p>The next paragraph contains and object and some
parameters</p>
<object classid="clsid:6bf52a52-394a-11d3-b153-00c04F79faa6"
width="300" height="265">
<param name="autostart" value="false">
<param name="stretchtofit" value="true">
<param name="urmode" value="full">
<param name="url" value="C:/Users/Public/Videos/Sample
Videos/[Link]">
<p>This browser does not support Windows Media Player using the
object tag.</p>
</object>
</body>
</html>
Output:

CIMAGE GROUP OF INSTITUTIONS Page 50


Web Technologies HTML

Applets:
“Applet is a java program which runs via java-enabled browser.” Applets are
embedded in HTML documents with the <applet> tag. When Java applet is compiled, a class
file (bytecode) will be generated. Applets have unique name and is used in applet tag.

Syntax:

<applet code=”classfile” [name=”string] width=”n” height=”n”


[codebase=”URL”]>…</applet>

Where code : Specifies the file name of a Java applet

name : Defines the name for an applet (to use in scripts)

width : Specifies the width of an applet

height : Specifies the height of an applet

codebase : Specifies a relative base URL for applets specified in the code attribute

Ex:

Step1: Open the Notepad and type the following Java code:

/*
Basic Java Applet Example
This Java example shows how to create a basic applet using Java Applet
class.
*/
import [Link];
import [Link];
public class BasicAppletExample extends Applet{
public void paint(Graphics g){
//write text using drawString method of Graphics class
[Link]("This is my First Applet",20,100);
}
}

Step 2: Save the above code as “[Link]”.


Step 3: Compile it using “javac” command and it creates “[Link]” file.
CIMAGE GROUP OF INSTITUTIONS Page 51
Web Technologies HTML

Step 4: Open new file in Notepad and type the following code:

<html>
<head>
<title>A Simple Applet</title>
</head>
<body>
<p>Here is the Simple Applet</p>
<p align=”center”>
<applet code=” [Link]” width=”200”
height=”50”></applet>
</p>
</body>
</html>
Step 5: Save the above file as “[Link]”.

Step 6: Open the “[Link]” file in the Internet Explorer Browser or any

browser. The output will be displayed as the following.

“We can also get the same thing using <object> tag instead of <applet> tag.”

Using <object> Tag:

Open the Notepad and type the following code:

<html>
<head>
<title>A Simple Applet</title>
</head>
<body>
<p>Here is the Simple Applet</p>
<p align=”center”>
<object code=” [Link]” width=”200”
height=”50”></object>
</p>
</body>
</html>

CIMAGE GROUP OF INSTITUTIONS Page 52


Web Technologies HTML

Output:

Frame Tag in HTML.


Frames allow for multiple .html documents to be displayed inside of one browser.
Each HTML document is called a frame, and each frame is independent of the others.

The <frame> tag defines one particular window (frame) within a <frameset>. Each
<frame> in a <frameset> can have different attributes, such as border, scrolling, the ability to
resize, etc.

The disadvantages of using frames are:

❖ The web developer must keep track of more HTML documents.


❖ It is difficult to print the entire page.
❖ Users often dislike them.
❖ It presents linking challenges.
❖ People often use frames to wrap their own ads and branding around
other
❖ people's content.

Syntax:
<frameset [cols=”%,%] [rows=”%,%]>. . .</frameset>

<frame [name=”name”] src=”filename” [scrolling=”yes”|”auto”|”no”]

[frameborder=”0”|”1”]>

Where cols : Specifies the number and size of columns in a frameset

rows : Specifies the number and size of rows in a frameset


CIMAGE GROUP OF INSTITUTIONS Page 53
Web Technologies HTML

name : Specifies the name of a frame

src : Specifies the URL of the document to show in a frame

scrolling : Specifies whether or not to display scrollbars in a frame

frameborder : Specifies whether or not to display a border around a frame


Ex
:
Step 1: Open the Notepad and type the following code:

<html>
<head>
<title>Frame A</title>
</head>
<body bgcolor=”blue”>
<h1 align=”center”>This is FRAME A</h1>
</body>
</html>
*** Save the above program as “[Link]”

Step 2: Open the Notepad and type the following code:

<html>
<head>
<title>Frame B</title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”>This is FRAME B</h1>
</body>
</html>
*** Save the above program as “[Link]”

Step 3: Open the Notepad and type the following code:

<html>
<head>
<title>Frame C</title>
</head>

CIMAGE GROUP OF INSTITUTIONS Page 54


Web Technologies HTML

<body bgcolor=”red”>
<h1 align=”center”>This is FRAME C</h1>
</body>
</html>
*** Save the above program as “[Link]”

Step 4: Open the Notepad and type the following code:

<html>

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

<frame src="[Link]">

<frame src="[Link]">

<frame src="[Link]">

</frameset>

</html>

*** Save the above program as “[Link]”

Output:

FORMS in HTML.
“A form is an area that can contain form elements.”
Forms are used to add an element of interactivity to website. HTML forms are used to
collect different kinds of user input. Form elements are elements that allow the user to enter

CIMAGE GROUP OF INSTITUTIONS Page 55


Web Technologies HTML

information in a form (like text fields, text area fields, drop-down menus, radio buttons,
check boxes, and so on).
Ex: A Simple form

General Format of FORM:


A form is defined with the <form> tag:

<form>
.
.
input elements
.
.
</form>
Syntax:
4. <form action=”URL” method=”post”|”get”>…</form>

The <form> tag is used to create an HTML form for user input.

Where action : Specifies where to send the form-data when a form is submitted
method : Specifies the HTTP method to use when sending form-data
GET - Requests data from a specified resource
POST - Submits data to be processed to a specified resource

5. <input type=”text” | “password” | “checkbox” | “radio” | “submit” |


“reset” | “button” | “image” name=”string” [value=”string”] [checked]
[size=”n”] [maxlength=”n”] [src=”url”] [align=”top” | “bottom” | “
middle” | “left” | “right”]>
CIMAGE GROUP OF INSTITUTIONS Page 56
Web Technologies HTML

The <input> tag specifies an input field where the user can enter data. <input>
elements are used within a <form> element to declare input controls that allow users to input
data. An input field can vary in many ways, depending on the type attribute.

Where type : Specifies the type <input> element to display


name : Specifies the name of an <input> element
value : Specifies the value of an <input> element
checked : Specifies that an <input> element should be pre-selected when the
page loads (for type="checkbox" or type="radio")
size : Specifies the width, in characters, of an <input> element
maxlength : Specifies the maximum number of characters allowed in an
<input> element
src : Specifies the URL of the image to use as a submit button (only for
type="image")
align : Specifies the alignment of an image input (only for type="image")

6. <select name=”string”>. . .</select>


The <select> element is used to create a drop-down list. The <option> tags
inside the <select> element define the available options in the list. The <select> element is a
form control and can be used in a form to collect user input.
Where name : Defines a name for the drop-down list

7. <option value=”string” [selected]>. . . </option>

The <option> tag defines an option in a select list. <option> elements go inside
a <select> or <datalist> element. The <option> tag can be used without any attributes, but we
usually need the value attribute, which indicates what is sent to the server. If we have a long
list of options, we can group related options with the <optgroup> tag.
Where value : Specifies the value to be sent to a server

8. <textarea name=”string” rows=”n” cols=”n”>. . .</textarea>

The <textarea> tag defines a multi-line text input control. A text area can hold an
unlimited number of characters, and the text renders in a fixed-width font (usually Courier).

CIMAGE GROUP OF INSTITUTIONS Page 57


Web Technologies 10HT H

The size of a text area can be specified by the cols and rows attributes, or even better; through
CSS' height and width properties.
Where name : Specifies a name for a text area
rows : Specifies the visible width of a text area
cols : Specifies the visible number of lines in a text area
input Tag and Attributes:
The most used form tag is the <input> tag. The type of input is specified with the type
attribute. The following types are the most commonly used input types.
Text Fields
Text fields are used when we want the user to type letters, numbers, and so on in
a form.
Ex:
<html>
<body>
<form action="">
First name:
<input type="text" name="firstname" />
<br><br>
Last name:
<input type="text" name="lastname" />
</form>
</body>
</html>

Output:

CIMAGE GROUP OF INSTITUTIONS Page 58


CIMAGE GROUP OF INSTITUTIONS Page 59
Web Technologies HTML

CheckBox
The following example demonstrates how to create check boxes on an HTML

page.

Ex: <html>
<body>
<form action="">
I have a bike:
<input type="checkbox" name="vehicle"
value="Bike">
<br><br>
I have a car:
<input type="checkbox" name="vehicle" value="Car">
<br><br>
I have an airplane:
<input type="checkbox" name="vehicle"
value="Airplane">
</form>
</body>
</html>

Output:

CIMAGE GROUP OF INSTITUTIONS Page 60


Web Technologies 12

Radio Buttons
When a user clicks a radio button, that button becomes selected, and all other
buttons in the same group become deselected. The following example demonstrates how to
create radio buttons on an HTML form.
Ex:
<html>
<body>
<form action="">
Male:
<input type="radio" checked="checked"
name="Sex" value="male">
<br><br>
Female:
<input type="radio" name="Sex" value="female">
</form>
</body>
</html>
Output:

Drop-Down List
The following example shows how to create a simple drop-down list on an
HTML page. A drop-down list is a selectable list.
Ex:
<html>
<body>

CIMAGE GROUP OF INSTITUTIONS Page 61


Web Technologies 13

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Output:

Text Area

Using a textarea (a multiline text input control), we can write an unlimited


number of characters. A textarea can be in a form or elsewhere on a page.
Ex:
<html>
<body>
<textarea rows="10" cols="30"> The cat was playing in the garden.
</textarea>
</body>
</html>
Output:

CIMAGE GROUP OF INSTITUTIONS Page 62


Web Technologies 14

Buttons
Buttons are common items on a form. The following example demonstrates
how to create a button. We can define our own text on the face of the button.
Ex:
<html>
<body>
<form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>

Output
:

Fieldset A fieldset is a grouping of data fields. The following example demonstrates


how to draw a border with a caption around our data.
Ex:
<html>
<body>
<fieldset>
<legend>
Health information:
</legend>
<form action="">
Height <input type="text" size="3">
Weight <input type="text" size="3">
</form>
</fieldset>
CIMAGE GROUP OF INSTITUTIONS Page 63
Web Technologies 15

<p>
If there is no border around the input form, our browser is
too old.
</p>
</body>
</html>
Output:

action Attribute:
When the user clicks the Submit button, the content of the form is sent to the
server. 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" action="html_form_submit.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
If we type some characters in the text field and click the Submit button, the
browser sends our input to a page called "html_form_submit.asp". The page will show us the
received input.

Ex: This example demonstrates how to add a form to a page. The form contains two input
fields and a Submit button.
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">

CIMAGE GROUP OF INSTITUTIONS Page 64


Web Technologies 16

:
Type our first name:
<input type="text" name="FirstName" value="Mickey"
size="20">
<br>Type our last name:
<input type="text" name="LastName" value="Mouse"
size="20">
<br>
<input type="submit" value="Submit">
</form>
<p>
If we click the "Submit" button, we will send our input to a new
page called html_form_action.asp.
</p>
</body>
Output
</html>

Form with Check Boxes:


The following form (example) contains three check boxes and a Submit
button.
Ex:

CIMAGE GROUP OF INSTITUTIONS Page 65


<html>
<body>
<form name="input" action="html_form_action.asp" method="get"> I have a bike:
<input type="checkbox" name="vehicle" value="Bike"

CIMAGE GROUP OF INSTITUTIONS Page 66


Web Technologies 17

checked="checked" />
<br><br>
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br><br>
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
<br><br>
<input type="submit" value="Submit" />
</form>
<p>
If we click the "Submit" button, we send our input to a new page
called html_form_action.asp.
</p>
</body>
Output </html>
:

Form with Radio Buttons:


The following example displays a form with two radio buttons and a Submit
button.
Ex:

CIMAGE GROUP OF INSTITUTIONS Page 67


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

CIMAGE GROUP OF INSTITUTIONS Page 68


Web Technologies 18

Male:
<input type="radio" name="Sex" value="Male"
checked="checked">
<br><br>
Female:
<input type="radio" name="Sex" value="Female">
<br><br>
<input type ="submit" value ="Submit">
</form>
<p>
If we click the "Submit" button, we will send our input to a new
page called html_form_action.asp.
</p>
</body>
</html>
Output
:

Send E-Mail from a Form:


The following example demonstrates how to send e-mail from a form.
Ex:

CIMAGE GROUP OF INSTITUTIONS Page 69


<html>
<body>
<form action="MAILTO:brahmaraokbv@[Link]" method="post"
enctype="text/plain">
<h3>This form sends an e-mail to Brahmarao KBV</h3> Name:<br>

CIMAGE GROUP OF INSTITUTIONS Page 70


Web Technologies 19

<input type="text" name="name"


value="cimage" size="20">
<br><br>
Mail:<br><br>
<input type="text" name="mail"
value="softwareneeraj@[Link]"
size="20">
<br><br>
Comment:<br><br>
<input type="text" name="comment" value="hello!"
size="40">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
Output </body>
: </html>

HTML Document Head in detail.


The HTML header contains several notable items which include:
1. doctype - This gives a description of the type of HTML document this is.
2. meta name=”description” -This gives a description of the page for search engine.
3. meta name=”keywords” -This line sets keywords which search engines may use to find our
page.
4. title - Defines the name of our document for our browser.

CIMAGE GROUP OF INSTITUTIONS Page 71


Web Technologies 20

Elements allowed in the HTML 4.0 strict HEAD are:


1. BASE – This tag is used to enforce relative links. Linking between pages and documents
will be explained in detail in the body section. This tag is optional.
Syntax:
<base href=”URI”>
Where Uniform Resource Identifier (URI) is a string of characters used to identify a name
or a web resource.
2. LINK - Used to set specific relationships of other documents with this document.
Syntax:
<link rel=”type” href=”URI” type=”string” media=”string”>
Where media specifies on what device the linked document will be displayed
3. META - Used to set specific characteristics of the web page and provide information to
readers and search engines.
Syntax:
<meta name | http-eqiv=”string” content=”string”>
Where name specifies a name for the metadata
http-eqiv provides an HTTP header for the information/value of the content attribute
content gives the value associated with the http-equiv or name attribute
4. SCRIPT- Used to embed script in the header of an HTML document.
5. STYLE - Used to embed a style sheet in the HTML document.
6. TITLE - Sets the document title.
Syntax:
<title> . . . </title>
The additional element allowed by the HTML 4.0 transactional standard is:
ISINDEX (Depreciated) - Allows a single line of text input. Use the INPUT element rather
than ISINDEX.
The <DOCTYPE> element
The <!DOCTYPE> declaration must be the very first thing in our HTML
document, before the <html> tag.
The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the
web browser about what version of HTML the page is written in.
In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD (Document

CIMAGE GROUP OF INSTITUTIONS Page 72


Type Declaration), because HTML 4.01 was based on SGML (Standard Generalized

CIMAGE GROUP OF INSTITUTIONS Page 73


Web Technologies 21

Markup Language). The DTD specifies the rules for the markup language, so that the
browsers render the content correctly.

Tip: Always add the <!DOCTYPE> declaration to our HTML documents, so that the
browser knows what type of document to expect.

Ex:1
<html>
<head>
<title>This is my Page</title>
</head>
<body>
<p>This text is displayed</p>
</body>
</html>
Output:

Ex:2
<html>
<head>
<base target="_blank">
</head>
<body>
<p>
<a href=[Link] target="_blank">This link</a>
will load in a new window because the target attribute is
set to "_blank".
</p>

CIMAGE GROUP OF INSTITUTIONS Page 74


Web Technologies 22

<p>
<a href="[Link]
This link</a>
will also load in a new window even without a target attribute.
</p>
</body>
</html>
Output
:

Ex:3 The meta attributes in the following example identify the document’s author, editor, and
the software used to create the page.
<html>
<head>
<meta name="author" content="Jan Egil Refsnes">
<meta name="revised" content="Michael Woodward,3/14/2010">
<meta name="generator" content="Microsoft FrontPage 5.0">
</head>
<body>
<p>All meta information goes in the head section...</p>
</body>
</html>
Output:

CIMAGE GROUP OF INSTITUTIONS Page 75


CIMAGE GROUP OF INSTITUTIONS Page 76
Web Technologies 23

XHTML in brief.
XHTML stands for eXtensable HyperText Markup Language and is a cross
between HTML and XML. XHTML was created for two main reasons:
1. To create a stricter standard for making web pages, reducing incompatibilities
between browsers.
2. To create a standard that can be used on a variety of different devices without
changes.
XHTML is same as HTML, although it is much more important that we create
our code correctly. XHTML is a web standard which has been agreed by the W3C.
Benefits of XHTML:
There are three very good reasons to update to XHTML:
➢ It will help we to create better formatted code on our site
➢ It will make our site more accessible (both in the future and now due to the fact that it
will also mean we have correct HTML and most browsers will show our page better)
➢ XHTML is planned to replace HTML 4 in the future
The Main Changes:
There are several main changes in XHTML from HTML:
• All tags must be in lower case
• All documents must have a doctype
• All documents must be properly formed
• All tags must be closed
• All attributes must be added properly
• The name attribute has changed
• Attributes cannot be shortened
• All tags must be properly nested
The Doctype:
The first change which will appear on the page is the Doctype. When using
HTML it is considered good practice to add a Doctype to the beginning of the page like this.
Although this was optional in HTML, XHTML requires adding a Doctype.
There are three available for use.
Strict - This is used mainly when the markup is very clean and there is no 'extra' markup to
aid the presentation of the document. This is best used if we are using Cascading Style Sheets

CIMAGE GROUP OF INSTITUTIONS Page 77


for presentation.

CIMAGE GROUP OF INSTITUTIONS Page 78


Web Technologies 24

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"[Link]
Transitional - This should be used if we want to use presentational features of HTML in the
web page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
Frameset - This should be used if we want to have frames on our page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"[Link]
The doctype should be the very first line of our document and should be the only
thing on that line. We don't need to worry about these confusing older browsers because the
Doctype is actually a comment tag. It is used to find out the code which the page is written in.
Document Formation:
After the Doctype line, the actual XHTML content can be placed. As with
HTML, XHTML has <html> <head> <title> and <body> tags but, unlike with HTML, they
must all be included in a valid XHTML document. The correct setup of our file is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html>
<head>
<title>Page Title</title>
OTHER HEAD DATA
</head>
<body>
CONTENT
</body>
</html>

It is important that our document follows this basic pattern. This example uses
the transitional Doctype.
XHTML Tags:
One of the major changes to HTML which was introduced to XHTML is that
tags must always be properly formed. With the old HTML specification we could be very

CIMAGE GROUP OF INSTITUTIONS Page 79


Web Technologies

poor in our coding, with missing tags and incorrect formation. These drawbacks we can
overcome in XHTML.
1. Tags and attributes have to be lowercase:
All of the tags and attributes have to be in lowercase. This is because XML is
case-sensitive — i.e. a tag in capitals is a different tag to one in small letters.
2. All tags must be closed:
Now all of those once-optional </p> and </li> tags are essential for our
XHTML documents to validate. Even empty elements like img, hr, and br must now be
closed. We can use a standard forward-slashed end tag, or just add in a forward slash to the
end of the tag.
<br /> or <br></br>
It's recommended that we use the former method here, and leave a space
before the slash so older browsers aren't confused. They'll just ignore the trailing slash as an
unrecognized attribute.
3. Documents must be well-formed:
'Well-formedness' is a dream that we were meant to try and make real from the
start, but many coders write badly-syntaxed code. We have to open and close tags correctly in
XHTML, and nest them properly.
Bad: <p>My coding is <b>bad</p></b> Good: <p>But
my coding is <b>good</b></p>
Remember the simple rule we should have been taught at the very start: The
first tag we open is the last tag we close.
4. Attribute values must be quoted:
Back in HTML we could leave out the quotes on a number value, like
HEIGHT=3, but now all values have to have quotation marks around them, so that would
become height="3".
5. Attribute Minimization:
Some HTML tags had one-word attributes, like HR's NOSHADE. We can't
use these anymore, and must add the attribute in as its own value, like so:
<hr noshade="noshade" />
Any browser compatible with HTML 4.01 shouldn't have a problem with
markup like this.

CIMAGE GROUP OF INSTITUTIONS Page 80


CIMAGE GROUP OF INSTITUTIONS Page 81
Web Technologies

6. Internal Links:
Internal links in HTML were made using a combination of the <a> tag and the
name attribute. In XHTML, to go along with XML, we use the id attribute to make these
links instead of the name attribute. For a while we should probably include both so that our
links still work on older browsers, but this will be the method used in future. The name
attribute has been deprecated.
<a href="#section">link</a>
<p id="section" name="section"></p>
Since all tags can take the id attribute, we can now make links to any element
on our page. Most helpful if we add the link to a heading or specific paragraph.
7. Alternative text in image:
While it has always been good practice to add the alt="..." attribute to our
images, now we must add some alternate text to every image on our page. If our image is
purely decorative we can give it a null alt attribute with a space:
<img src="[Link]" alt=" " />
We could also try adding the title="..." attribute to as many elements as
possible. It's a good accessibility aid, especially on links.
8. Ampersands in URLs:
Ampersand characters are frequently used in page addresses to carry variables,
like in PHP. When coding these addresses into our XHTML, we must escape them using the
entity value &amp;. They'll be displayed as ampersand characters (&) on screen, of course.
<a href="[Link]?page=27&style=blue">link</a> becomes
<a href="[Link]?page=27&amp;style=blue">link</a>
9. Content must be wrapped in a block-level element:
In XHTML Strict, when we add text to our page, we can’t add it directly into
the body element. All text needs to be within a suitable containing block-level element, such
as p(Paragraph), ul(Unordered list) or a div(Generic block-level container).
Ex:
<xml version=”1.0” encoding=”UTF-8>
<!Doctype html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

CIMAGE GROUP OF INSTITUTIONS Page 82


CIMAGE GROUP OF INSTITUTIONS Page 83
Web Technologies HTML

“DTD/[Link]”>
<html xmlns=[Link]
xml:lang=”en” lang=”en”>
<head>
<title>Sample XHTML Document</title>
</head>
<body>
<h1>Sample XHTML Document</h1>
<hr/>
<p>This is very Basic Document in XHTML</p>
<ul>
<li>It has an xml version identifier</li>
<li>It has a valid DTD</li>
<li>All tags are closed</li>
</ul>
<hr/>
</body>
</html>
Output:

Note: UTF-8  Universal Transformation Format-8 Bits which is an Encoding format.

*************************************

CIMAGE GROUP OF INSTITUTIONS Page 84


Exercise

1.

2.

CIMAGE GROUP OF INSTITUTIONS Page 85

You might also like