Fundamentals of Web UNIT II

UNIT-II: Introduction to HTML
Origins and evaluation of HTML, Basic Syntax, Standard HTML

Document Structure and Basic Text Formatting, Images, Hypertext Links,
Lists, Tables, Frames, Forms, Multimedia in HTML
HTML
Before you begin, it's important that you know Windows or Unix. A working
knowledge ofWindows or Unix makes it much easier to learn HTML.
You should be familiar with:
 Basic word processing using any text editor.

 How to create directories and files.
 How to navigate through different directories.
 Basic understaning on internet browsing using a browser like Internet Explorer or
Firefox etc.
Introducing HTML:
HTML stands for Hypertext Markup Language, and it is the most widely used
language to writeWeb Pages. As its name suggests, HTML is a markup language.
 Hypertext refers to the way in which Web pages (HTML documents) are
linked together.When you click a link in a Web page, you are using hypertext.
 Markup Language describes how HTML works. With a markup language, you
simply "mark up" atext document with tags that tell a Web browser how to
structure it to display.
Originally, HTML was developed with the intent of defining the structure of
documents like headings, paragraphs, lists, and so forth to facilitate the sharing
of scientific information between researchers.
All you need to do to use HTML is to learn what type of markup to use to get the
results you want.
Creating HTML Document:

Creating an HTML document is easy. To begin coding HTML you need only two
things: a simple- text editor and a web browser. Notepad is the most basic of simple-
text editors and you will probably code a fair amount of HTML with it.
Here are the simple steps to create a baisc HTML document:

 Open Notepad or another text editor.
 At the top of the page type <html>.
 On the next line, indent five spaces and now add the opening header tag: <head>.
 On the next line, indent ten spaces and type <title> </title>.
 Go to the next line, indent five spaces from the margin and insert the closing header
tag:
</head>.
 Five spaces in from the margin on the next line, type<body>.
 Now drop down another line and type the closing tag right below its mate: </body>.
 Finally, go to the next line and type </html>.
 In the File menu, choose Save As.
 In the Save as Type option box, choose All Files.
 Name the file template.htm.
 Click Save.
You have basic HTML document now, to see some result put the following code
in title and bodytags.
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document description goes here.......</p>
</body>
</html>
Now you have created one HTML page and you can use a Web Browser to open
this HTML file to see the result. Hope you understood that Web Pages are nothing
but they are simple HTML files with some content which can be rendered using
Web Browsers.
Here <html>, <head>,...<p>, <h1> etc. are called HTML tags. HTML tags are
building blocks of an HTML document nd we will learn all the HTML tags in
subsequent chapters.
NOTE: One HTML file can have extension as .htm or .html. So you can use
either of thembased on your comfort.
HTML Document Structure:
An HTML document starts and ends with <html> and >/html> tags. These tags tell
the browser that the entire document is composed in HTML. Inside these two tags,
the document is split into two sections:
 The <head>...</head> elements, which contain information about the document

such as title ofthe document, author of the document etc. Information inside this
tag does not display outside.
 The <body>...</body> elements, which contain the real content of the document
that you see onyour screen.
HTML Tags and Elements:

HTML language is a markup language and we use many tags to markup text. In
the above example you have seen <html>, <body> etc. are called HTML tags or
HTML elements.
Every tag consists of a tag name, sometimes followed by an optional list of tag
attributes , allplaced between opening and closing brackets (< and >). The simplest
tag is nothing more than a name appropriately enclosed in brackets, such as <head>
and <i>. More complicated tags contain one or more attributes , which specify or
modify the behaviour of the tag.
According to the HTML standard, tag and attribute names are not case-sensitive.
There's nodifference in effect between <head>, <Head>, <HEAD>, or even <HeaD>;
they are all equivalent. But with XHTML, case is important: all current standard tag
and attribute names are in lowercase.
HTML Basic Tags

The basic structure for all HTML documents is simple and should include the
following minimum elements or tags:
 <html> - The main container for HTML pages

 <head> - The container for page header information
 <title> - The title of the page
 <body> - The main body of the page
Remember that before an opening <html> tag, an XHTML document can contain the
optional XML declaration, and it should always contain a DOCTYPE declaration
indicating which version of XHTML ituses.
Now we will explain each of these tags one by one. In this tutorial you will find
the terms element and tag are used interchangeably.
The <html> Element:

The <html> element is the containing element for the whole HTML document.
Each HTML document should have one <html> and each document should end with
a closing </html> tag.
Following two elements appear as direct children of an <html> element:

 <head>
 <body>
As such, start and end HTML tags enclose all the other HTML tags you use to
describe the Webpage.
The <head> Element:
The <head> element is just a container for all other header elements. It should
be the firstthing to appear after the opening <html> tag.
Each <head> element should contain a <title> element indicating the title of the
document.
The <title> Element:
You should specify a title for every page that you write inside the <title> element.
This element is achild of the <head> element). It is used in several ways:
 It displays at the very top of a browser window.

 It is used as the default name for a bookmark in browsers such as IE and Netscape.
 Its is used by search engines that use its content to help index pages.
Therefore it is important to use a title that really describes the content of your
site. The <title>element should contain only the text for the title and it may not
contain any other elements.
Example:
Here is the example of using title tag.
<head>
<title>HTML Basic tags</title>
</head>
The <body> Element:

The <body> element appears after the <head> element and contains the part of the
Web page that you actually see in the main browser window, which is sometimes
referred to as body content.
A <body> element may contain anything from a couple of paragraphs under a

heading to morecomplicated layouts containing forms and tables.
Most of what you will be learning in this and the following five chapters will be written
between theopening <body> tag and closing </body> tag.
Example:
Here is the example of using body tag.
<body>
<p>This is a paragraph tag.</p>
</body>
Putting all together:

Now if we will put all these tags together, it will constitute a complete
HTML document asfollows:
<html>
<head>
<title>HTML Basic tags</title>
</head>
<body>
<p>This is a paragraph tag.</p>
</body>
</html>
To Become more comfortable
HTML Attributes
Attributes are another important part of HTML markup. An attribute is used to
define the characteristics of an element and is placed inside the element's
opening tag. All attributes aremade up of two parts: a name and a value:
 The name is the property you want to set. For example, the <font> element in the
example carries an attribute whose name is face, which you can use to indicate
which typeface you wantthe text to appear in.
 The value is what you want the value of the property to be. The first example was
supposed to use the Arial typeface, so the value of the face attribute is Arial.
The value of the attribute should be put in double quotation marks, and is separated
from the name by the equals sign. You can see that a color for the text has been
specified as well as the typeface in this <font> element:
<font face="arial" color="#CC0000">
Many HTML tags have a unique set of their own attributes. These will be discussed
as each tag is introduced throughout the tutorial. Right now we want to focus on a
set of generic attributes that can be used with just about every HTML Tag in
existence.
Generic Attributes:
Here's a table of some other attributes that are readily usable with many of HTML's tags.
Attribute Options Function
align right, left, center Horizontally aligns tags
valign top, middle, bottom Vertically aligns tags within an HTML

element.
bgcolor numeric, hexidecimal, Places a background color behind an
RGBvalues element
backgroun URL Places an background image behind an

d element
id User Defined Names an element for use with Cascading
StyleSheets.
class User Defined Classifies an element for use with Cascading
StyleSheets.
width Numeric Value Specifies the width of tables, images, or
table cells.
height Numeric Value Specifies the height of tables, images, or

tablecells.
title User Defined "Pop-up" title for your elements.
HTML TEXT Formatting Tags
If you want people to read what you have written, then structuring your text well is
even more important on the Web than when writing for print. People have trouble
reading wide, long, paragraphs of text on Web sites unless they are broken up well.
This section will teach you basic text formatting elements like heading elements and
paragraph elements.
White space and Flow:
Before you start to mark up your text, it is best to understand what HTML does
when it comes across spaces and how browsers treat long sentences and paragraphs
of text.
You might think that if you put several consecutive spaces between two words,
the spaces would appear between those words onscreen, but this is not the case;
by default, only one space will be displayed. This is known as white space
collapsing. So you need to use special HTML tags to create multiple spaces.
Similarly, if you start a new line in your source document, or you have consecutive
empty lines, these will be ignored and simply treated as one space. So you need to
use special HTML tags to create more number of empty lines.
Create Headings - The <hn> Elements:
Any documents starts with a heading. You use different sizes for your headings.
HTML also have six levels of headings, which use the elements <h1>, <h2>, <h3>,
<h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before
and after that heading.
Example:
<h1>This is heading 1</h1>

This will display following result:

This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
Create Paragraph - The <p> Element:

The <p> element offers a way to structure your text. Each paragraph of text
should go inbetween an opening <p> and closing </p> tag as shown below in
the example:
<p>Here is a paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
This will produce following result:

Here is a paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text.
You can use align attribute to align your paragraphs.

<p align="left">This is left aligned.</p>
<p align="center">This is center aligned.</p>
<p align="right">This is right aligned.</p>

<p align="justify">This is jutified. This works when you have multiple lines in your paragraph
and you want to justfy all the lines so that they can look more nice.</p>
This is left aligned.
This is center aligned.
This is right aligned.
This is jutified. This works when you have multiple lines in your paragraph and you want to
justfy all the lines so that they can look more nice.
Create Line Breaks - The <br /> Element:
Whenever you use the <br /> element, anything following it starts on the next line.
This tag is an example of an empty element, where you do not need opening and
closing tags, as there is nothing to go in between them.
Note: The <br /> element has a space between the characters br and the forward
slash. If you omit this space, older browsers will have trouble rendering the line
break, while if you miss the forward slash character and just use <br> it is not valid
XHTML
Example:
Hello<br />
You come most carefully upon your hour.<br />
Thanks<br />
Mahnaz

Hello
You come most carefully upon your hour.
Thanks
Mahnaz
Centering Content - The <center> Element:

You can use <center> tag to put any content in the center of the page or any table cell.
Example:
<p>This is not in the center.</p>

<center>
<p>This is in the center.</p>
</center>
This is not in the center.
This is in the center.
Preserve Formatting - The <pre> Element:
Sometimes you want your text to follow the exact format of how it is
written in the HTMLdocument. In those cases, you can use the preformatted tag
(<pre>).
Any text between the opening <pre> tag and the closing </pre> tag will preserve
theformatting of the source document.
<pre>
*
* *
* * *
</pre>
*
* *
* * *
Horizontal Rules - The <hr /> Element

Horizontal rules are used to visually break up sections of a document. The <hr> tag
creates a linefrom the current position in the document to the right margin and
breaks the line accordingly.
For example you may want to give a line between two paragraphs as follows:
<p>This is paragraph one and should be on top</p>

<hr />
<p>This is paragraph two and should be at bottom</p>
This is paragraph one and should be on top
This is paragraph two and should be at bottom
Again <hr /> tag is an example of an empty element, where you do not need
opening andclosing tags, as there is nothing to go in between them.
Note: The <hr /> element has a space between the characters br and the forward
slash. If you omit this space, older browsers will have trouble rendering the line
break, while if you miss the forward slash character and just use <hr> it is not valid
XHTML
.
Presentational Tags:
If you use a word processor, you are familiar with the ability to make text bold,
italicized, or underlined; these are just three of the ten options available to indicate
how text can appear in HTML and XHTML.
Bold Text - The <b> Element:
Anything that appears in a <b>...</b> element is displayed in bold, like the word bold
here:
<p>The following word uses a <b>bold</b> typeface.</p>

The following word uses a bold typeface.
Italic Text - The <i> Element:
Anything that appears in a <i>...</i> element is displayed in italicized, like the

word italicizedhere:
<p>The following word uses a <i>italicized</i> typeface.</p>
The following word uses a italicized typeface.
Underlined Text - The <u> Element:
Anything that appears in a <u>...</u> element is displayed with underline,

like the wordunderlined here:
<p>The following word uses a <u>underlined</u> typeface.</p>
The following word uses a underlined typeface.
Strike Text - The <strike> Element:
Anything that appears in a <strike>...</strike> element is displayed with

strikethrough, which is athin line through the text:
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
The following word uses a strikethrough typeface.
To Become more comfortable -
Monospaced font - The <tt> Element:

The content of a <tt> element is written in monospaced font. Most fonts are
known as variable- width fonts because different letters are of different widths (for
example, the letter m is wider than the letter i). In a monospaced font, however, each
letter is the same width.
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
The following word uses a monospaced typeface.
Superscript Text - The <sup> Element:

The content of a <sup> element is written in superscript; the font size used is the
same size as the characters surrounding it but is displayed half a character.s height
above the other characters.
<p>The following word uses a <sup>superscript</sup> typeface.</p>
The following word uses a superscript

typeface.
Subscript Text - The <sub> Element:

The content of a <sub> element is written in subscript; the font size used is the same
as the characters surrounding it, but is displayed half a character.s height beneath
the other characters.
<p>The following word uses a <sub>subscript</sub> typeface.</p>
This will produce following results
The following word uses a subscript typeface.
Larger Text - The <big> Element:
The content of the <big> element is displayed one font size larger than the rest
of the text surrounding it.
<p>The following word uses a <big>big</big> typeface.</p>
The following word uses a big typeface.
Smaller Text - The <small> Element:
The content of the <small> element is displayed one font size smaller than the
rest of the text surrounding it.
<p>The following word uses a <small>small</small> typeface.</p>
The following word uses a small typeface.
HTML Phrase Tags
While some of these phrase elements are displayed in a similar manner to the <b>,
<i>,
<pre>, and <tt> elements you have already seen, they are designed for specific
purposes. For example, the <em> and <strong> elements give text emphasis and
strong emphasis respectively and there are several elements for marking up quotes.
We will see all phrase tags in this section with examples.
Emphasized Text - The <em> Element:
The content of an <em> element is intended to be a point of emphasis in your

document, and it is usually displayed in italicized text. The kind of emphasis
intended is on words such as "must" in the following sentence:
<p>You <em>must</em> remember to close elements in XHTML.</p>
You must remember to close elements in XHTML.
Strong Text - The <strong> Element:
The <strong> element is intended to show strong emphasis for its content; stronger
emphasis than the <em> element. As with the <em> element, the <strong> element
should be used only when you want to add strong emphasis to part of a document.
<p>You <strong>must</strong> remember to close elements in XHTML.</p>
You must remember to close elements in XHTML.
Block and Inline Elements:

We can categories all the elements into two sections:
 Block-level elements - Block-level elements appear on the screen as if they

have a carriagereturn or line break before and after them. For example the
<p>, <h1>,
<h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>,
and
<address> elements are all block level elements. They all start on their own
new line, andanything that follows them appears on its own new line.
 Inline elements - Inline elements, on the other hand, can appear within sentences
and do nothave to appear on a new line of their own. The <b>, <i>, <u>, <em>,
<strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>,
<dfn>, <kbd>, and <var> elements are all inline elements.
The elements which we have not discussed till now, will be discussed in subsequent
chapters.
HTML Comments
Comments are piece of code which is ignored by any web browser. It is good
practice to comment your code, especially in complex documents, to indicate
sections of a document, and any other notes to anyone looking at the code.
Comments help you and others understand your code.
HTML Comment lines are indicated by the special beginning tag  placed at the beginning and end of EVERY line to be treated as a comment.
Comments do not nest, and the double-dash sequence "--" may not appear inside a
comment except as part of the closing --> tag. You must also make sure that there are
no spaces in the start-of-comment string.
For example: Given line is a valid comment in HTML

But following line is not a valid comment and will be displayed by the borwser.
This is becausethere is a space between the left angle bracket and the
exclamation mark.
< !-- This is commented out -->
Be careful if you use comments to "comment out" HTML that would otherwise
be shown to the user, since some older browsers will still pay attention to angle
brackets inside the comment and close the comment prematurely -- so that some of
the text that was supposed to be inside the comment mistakenly appears as part of the
document.
Multiline Comments:
You have seen how to comment a single line in HTML. You can comment multiple
lines by the special beginning tag  placed before the first
line and end of the lastline tobe treated as a comment.
For example:

Using Comment tag
There are few browsers who supports <comment> tag to comment a part of code.
<p>This is <comment>not</comment> Internet Explorer.</p>
HTML Fonts
Font face and color depends entirely on the computer and browser that is being used
to view your page. But the <font> tag is used to add style, size, and color to the text
on your site. You can use a
<basefont> tag to set all of your text to the same size, face, and color.
The font tag is having three attributes called size, color, and face to customize your fonts.
To change any of the font attributes at any time within your page, simply use the
<font> tag. The text that follows will remain changed until you close with the
</font> tag. You can change any or all of the font attributes at the one time, by
including all the required changes within the one <font> tag.
NOTE: The font and basefont tags are deprecated and it is supposed to be
removed in a future version of HTML. So it should not be used. Its is suggested
to use css styles to manipulate your font.
Font Size:
You can set the size of your font with size attribute. The range of accepted
values is from1(smallest) to 7(largest). The default size of a font is 3.
Example:
<font size="1">Font size="1"</font>


Font size="1"
Font size="2"
Font size="3"
Font size="4"
Font size="5"
Font size="6"
Font size="7"
SPECIFY THE RELATIVE FONT SIZE. <font size="+n"> or <font
size="-n">: You can specify how many sizes larger or how many sizes smaller
than the preset font size shouldbe.
Example:
<font size="-1">Font size="-1"</font>

<font size="+1">Font size="+1"</font>
Font size="-1"
Font size="+1"
Font size="+2"
Font size="+3"
Font size="+4"
Font Face:
You can set any font you like using face attribute but be aware that if the user
viewing the page doesn't have the font installed, they will not be able to see it.
Instead they will default to Times New Roman of your font with size attribute. See
below few examples on using different font face
Example:
<font face="Times New Roman" size="5">Times New Roman</font>

<font face="Verdana" size="5">Verdana</font>
<font face="Comic sans MS" size="5">Comic Sans MS</font>
<font face="WildWest" size="5">WildWest</font>
<font face="Bedrock" size="5">Bedrock</font>
Times New Roman

Verdana
Comic Sans MS
WildWest
Bedrock
Font Color:
You can set any font color you like using color attribute. You can specify the color that
you want byeither the color name or hexadecimal code for that color. Check a
complete list of HTML
Example:
<font color="#FF00FF">This text is hexcolor #FF00FF</font>

<font color="red">This text is red</font>
This text is hexcolor #FF00FF

This text is red
HTML Images
Images are very important to beautify as well as to depicts many concepts on your
web page. Itsis true that one single image is worth than thuasands of words. So as a
Web Developer you should have clear understanding on how to use images in your
web pages.
Insert Image - The <img> Element:
You will insert any image in your web page by using <img> tag. Following is the
simple syntax touse this tag.
<img src="image URL" attr_name="attr_value"...more attributes />
Image Attributes:
Following are most frequently used attributes for <img> tag.
 width: sets width of the image. This will have a value like 10 or 20%etc.
 height: sets height of the image. This will have a value like 10 or 20% etc.
 border: sets a border around the image. This will have a value like 1 or 2 etc.
 src: specifies URL of the image file.
 alt: this is an alternate text which will be displayed if image is missing.
 align: this sets horizontal alignment of the image and takes value either left, right or
center.
 valign: this sets vertical alignment of the image and takes value either top, bottom or
center.
 hspace: horizontal space around the image. This will have a value like 10 or 20%etc.
 vspace: vertical space around the image. This will have a value like 10 or 20%etc.
 name: name of the image with in the document.
 id: id of the image with in the document.
 style: this will be used if you are using CSS.
 title: specifies a text title. The browser, perhaps flashing the title when the
mouse passes overthe link.
 ismap and usemap: These attributes for the <img> tag tell the browser that the
image is a special mouse-selectable visual map of one or more hyperlinks,
commonly known as an image map. We will see how to use these attributes in
Image Links chapter.
A Simple Example:
<img src="apple.jpg" alt="HTML Tutorial" />
Image Attributes - width, height, title, border and align:

Now let us try to set some more attributes:
<img src=" apple.jpg " alt="Apple Image" width="100" height="100" border="2" align="right"
title="Apple" />
Width and Height, or Style?

The width, height, and style attributes are all valid in HTML.
However, we suggest using the style attribute. It prevents styles sheets from changing the
size of images:
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Images in Another Folder

If you have your images in a sub-folder, you must include the folder name in the src
attribute:
Example
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Images on Another Server/Website

Some web sites point to an image on another server.
To point to an image on another server, you must specify an absolute (full) URL in the
src attribute:
Example
<img src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="W3Schools.com">
Animated Images
HTML allows animated GIFs:
Example
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Common Image Formats

Here are the most common image file types, which are supported in all browsers
(Chrome, Edge, Firefox, Safari, Opera):
Abbreviation File Format File Extension

APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon.ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg
HTML Tables
Tables are very useful to arrange in HTML and they are used very frequently by
almost all web developers. Tables are just like spreadsheets and they are made up of
rows and columns.
You will create a table in HTML/XHTML by using <table> tag. Inside <table>
element the table is written out row by row. A row is contained inside a <tr> tag .
which stands for table row. And each cell is then written inside the row element using
a <td> tag . which stands for table data.
Example:
<table border="1">
<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>
Row 1, Column Row 1, Column

1 2
Row 2, Column Row 2, Column
1 2
NOTE: In the above example border is an attribute of <table> and it will put border
across all the cells. If you do not need a border then you cal use border="0". The
border attribute and other attributes also mentione din this session are deprecated and
they have been replaced by CSS. So it is recommended to use CSS instead of using
any attribute directly.
Table Heading - The <th> Element:

Table heading can be defined using <th> element. This tag will be put to replace
<td> tag which is used to represent actual data. Normally you will put your top
row as table heading as shown below, otherwise you can use <th> element at any
place:
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
This will produce following result. You can see its making heading as a bold one:
Name Salar
y
Ramesh Raman 5000
ShabbirHussein 7000
NOTE: Each cell must, however, have either a <td> or a <th> element in order for
the table to display correctly even if that element is empty.
Table Cellpadding and Cellspacing:
There are two attribiutes called cellpadding and cellspacing which you will use to
adjust thewhite space in your table cell. Cellspacing defines the width of the border,
while cellpadding represents the distance between cell borders and the content within.
Following is the example:
<table border="1" cellpadding="5" cellspacing="5">

<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
Colspan and Rowspan Attributes:
You will use colspan attribute if you want to merge two or more columns into a
single column. Similar way you will use rowspan if you want to merge two or more
rows. Following is the example:
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
Tables Backgrounds
You can set table background using of the following two ways:
 Using bgcolor attribute - You can set background color for whole table or just for one
cell.
 Using background attribute - You can set background image for whole table or just for
one cell.
NOTE:You can set border color also using bordercolor attribute. Here is an example of
using bgcolor
attribute:
<table border="5" bordercolor="green" bgcolor="gray">

<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>

<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
Here is an example of using background attribute:
<table border="1" background="/images/home.gif">

<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td colspan="3" background="/images/pattern1.gif">
Row 3 Cell 1
</td></tr>
</table>
Table height and width:
You can set a table width and height using width and height attrubutes. You can
specify table width or height in terms of integer value or in terms of percentage of
available screen area. Following is the example:
<table border="1" width="400" height="150">
<tr>
</tr>
<tr>
</tr>
</table>
Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2
Using Table Caption:
The caption tags will serve as a title or explanation and show up at the top of the table.
This tag isdepracated in newer version of HTML/XHTML.
<table border="1">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
</table>
This is the caption

row 1, row 1,
column columnn
1 2
HTML LIST
Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered HTML List - Choose List Item Marker
The CSS list-style-type property is used to define the style of the list item marker. It can
have one of the following values:
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
Example - Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
OUTPUT:
Unordered List with Disc Bullets
 Coffee
 Tea
 Milk
Example - Circle
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
OUTPUT:
Unordered List with Circle Bullets
o Coffee
o Tea
o Milk
Example - Square
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
OUTPUT
Unordered List with Square Bullets
 Coffee
 Tea
 Milk
Nested HTML Lists

Lists can be nested (list inside list):
Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Numbers:
Ordered List with Numbers

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
OUTPUT
1. Coffee
2. Tea
3. Milk
Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
OUTPUT
Ordered List with Letters
A. Coffee
B. Tea
C. Milk
Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
OUTPUT
a. Coffee
b. Tea
c. Milk
Uppercase Roman Numbers:

<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
OUTPUT
I. Coffee
II. Tea
III. Milk
Lowercase Roman Numbers:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
OUTPUT
i. Coffee
ii. Tea
iii. Milk
Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from
a specified number, you can use the start attribute:
Example
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
OUTPUT
50. Coffee
51. Tea
52. Milk
Nested HTML Lists

Example
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
OUTPUT
A Nested List
1. Coffee
2. Tea
1. Black tea
2. Green tea
3. Milk
HTML Description Lists

HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the
<dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
OUTPUT
A Description List
Coffee
- black hot drink
Milk
- white cold drink
HTML ANCHOR TAG
Text Links
Web pages can contain links that take you directly to other pages and even
specific parts of agiven page. These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by clicking on words,
phrases, and images. Thus you can create hyperlinks using text or images available
on your any web page.
In this tutorial you will learn how to create text links between the different pages of
your site, links within pages of your sites, and how to link to other sites ( or external
sites). If you want to know more about URL then
Linking Documents - The <a> Element:

A link is specified using the <a> element. This element is called anchor tag as well.
Anything between the opening <a> tag and the closing </a> tag becomes part of the
link and a user can clickthat part to reach to the linked document.
Following is the simple syntax to use this tag.
<a href="Document URL" attr_name="attr_value"...more attributes />
Anchor Attributes:
Following are most frequently used attributes for <a> tag.
 href: specifies the URL of the target of a hyperlink. Its value is any valid
document URL, absolute or relative, including a fragment identifier or a JavaScript
code fragment.
 target: specify where to display the contents of a selected hyperlink. If set to
"_blank" then a new window will be opened to display the loaded page, if set to
"_top" or "_parent" then same window will be used to display the loaded document,
if set to "_self" then loads the new page in current window. By default its "_self".
 name & id: attributes places a label within a document. When that label is used in a
link to that document, it is the equivalent of telling the browser to goto that label.
 event: attributes like onClick, onMouseOver etc. are used to trigger any
Javascript ot VBscriptcode.
 title: attribute lets you specify a title for the document to which you are linking. The
value of the attribute is any string, enclosed in quotation marks. The browser might
use it when displaying the link, perhaps flashing the title when the mouse passes
over the link.
 accesskey: attribute attribute provides a keyboard shortcut that can be used to
activate a link. For example, you could make the T key an access key so that when
the user presses either the Alt or Ctrl key on his keyboard (depending on his
operating system) along with the T key, the linkgets activated.
A Simple Example:
<a href="http://www.kes.ac.in/" target="_blank" >TPB Home</a> |
<a href="http://www.amrood.com/" target="_self" >AMROOD Home</a> |
<a href="http://www.change-images.com/" target="_top" >Change Images Home</a>
This will produce following result, Click and come back to proceed with rest of the
tutorial:
Create Download Links:
You can create text link to make your PDF, or DOC or ZIP files
downloadable. This is verysimple, you just need to give complete URL of the
downloadable file as follows:
<a href="http://www.example.com/file.pdf">Download File</a>
This will produce following link and will be used to download a file.
Download File

Fundamentals of Web UNIT II

Uploaded by

Copyright:

Available Formats

Fundamentals of Web UNIT II

Uploaded by

Document Information

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

Fundamentals of Web UNIT II

Uploaded by

Copyright:

Available Formats

UNIT-II: Introduction to HTML

Origins and evaluation of HTML, Basic Syntax, Standard HTML

You should be familiar with:

 Basic word processing using any text editor.

Creating HTML Document:

Here are the simple steps to create a baisc HTML document:

HTML Document Structure:

 The <head>...</head> elements, which contain information about the document

HTML Tags and Elements:

HTML Basic Tags

 <html> - The main container for HTML pages

The <html> Element:

Following two elements appear as direct children of an <html> element:

The <title> Element:

 It displays at the very top of a browser window.

Here is the example of using title tag.

The <body> Element:

A <body> element may contain anything from a couple of paragraphs under a

Putting all together:

To Become more comfortable

<font face="arial" color="#CC0000">

align right, left, center Horizontally aligns tags

valign top, middle, bottom Vertically aligns tags within an HTML

backgroun URL Places an background image behind an

height Numeric Value Specifies the height of tables, images, or

HTML TEXT Formatting Tags

White space and Flow:

<h1>This is heading 1</h1>

This will display following result:

Create Paragraph - The <p> Element:

This will produce following result:

Here is a second paragraph of text.

Here is a third paragraph of text.

You can use align attribute to align your paragraphs.

<p align="right">This is right aligned.</p>

This will produce following result:

This is left aligned.

This is center aligned.

This is right aligned.

Create Line Breaks - The <br /> Element:

This will produce following result:

You come most carefully upon your hour.

Centering Content - The <center> Element:

<p>This is not in the center.</p>

This will produce following result:

This is not in the center.

This is in the center.

Preserve Formatting - The <pre> Element:

This will produce following result:

Horizontal Rules - The <hr /> Element

<p>This is paragraph one and should be on top</p>

This will produce following result:

This is paragraph one and should be on top

This is paragraph two and should be at bottom

Bold Text - The <b> Element:

<p>The following word uses a <b>bold</b> typeface.</p>

This will produce following result:

To Become more comfortable

Italic Text - The <i> Element:

Anything that appears in a <i>...</i> element is displayed in italicized, like the