HTML - Note

UNIT 06 WEB PAGE DEVELOPMENT
Introduction to HTML
All the web pages are written using a language called Hypertext Markup
Language.HTML commands controls how the information in a page is displayed, such
as font colours, size and how an item such as form, will be processed.HTML also allows
users to click on highlighted text or images and jump to other location on the same
page or ,other pages in the same site ,or to other sites and locations on the web.
HTML Editors:
You can easily edit HTML files using a WYSIWYG (what you see is what you get) editor
like FrontPage or Dream weaver, instead of writing your markup tags in a plain text
file. However, if you want to be a skillful Web developer, we strongly recommend that
you use a plain text editor to learn your primer HTML.
HTML Structure:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
How to start;
1) If you are running Windows, launch Notepad.
2) Type in the following text:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage.
</body>
</html>
3) Save the file as "mypage.html
4) Start your Internet browser. Select "Open" in the File menu of your browser.
Page 1
5) From the dialog box, select "Browse" and locate the HTML file you just created -
"mypage.htm"
6) Select it and click "Open". Now you should see an address in the dialog box,for
example "C:\MyDocuments\mypage.htm". Click OK, and the browser will display
the page.
7) To view the source file, Go to the browser window and select View Source
What is an HTML File?

An HTML file is a text file containing small markup tags
The markup tags tell the Web browser how to display the page
An HTML file must have an htm or html file extension
An HTML file can be created using a simple text editor
HTML Elements
Each HTML element has an element name (body, h1, p, br)
The start tag is the name surrounded by angle brackets: <h1>
The end tag is a slash and the name surrounded by angle brackets </h1>
Some HTML elements have no end tag
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
The text between the start and end tags is the element content
HTML tags are not case sensitive, <b> means the same as <B>
Basic HTML Tags
<HTML> and </HTML>

The <HTML> tag is used to indicate that this web page is written in HTML. This is
almost always first tag in the HTML page, and the </HTML> is the last tag. Everything
else in the web page goes between those two tags and is technically part of the
<HTML> element.
<HEAD> and </HEAD>

The head of the html document, which holds information about the document, such as
title for the web page
<BODY> and </BODY>

contain the body of the HTML document. This includes the content that actually
appears in the web page or web browser.
<TITLE> and </TITLE>

contain the title of the HTML document, which will appear in the web browsers title
bar and is used by the search engines to refer to the web page/ browser.
Page 2
Headings styles
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading.
<h6> defines the smallest heading.
<h1>This is a heading</h1>
Paragraphs
Paragraphs are defined with the <p> tag. HTML automatically adds an extra blank line
before and after a paragraph.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Line Breaks
The <br> tag is used when you want to break a line, but don't want to start a new
paragraph. The <br> tag forces a line break wherever you place it. The <br> tag is an
empty tag. It has no end tag like </br>, since a closing tag doesn't make any sense.
<p>This <br> is a para<br>graph with line breaks</p>
Horizontal Ruler
The <hr> tag is used when you want to draw a line on the web page
<hr>Horizontal Ruler </hr>
HTML Lists
Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically
small black circles).An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.
<li> - List items
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Here is how it looks in a browser:

Page 3
Coffee
Milk
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers. An
ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
1. Coffee
2. Milk
Definition Lists
A definition list is not a list of items. This is a list of terms and explanation of the
terms.
A definition list starts with the <dl> tag. Each definition-list term starts with the <dt>
tag. Each definition-list, definition starts with the <dd> tag to denote the terms .
<dt> - Definition Term
<dd> - Definition Description
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Coffee
Black hot drink
Milk
White cold drink
HTML Tag Attributes
HTML tags can have attributes. Attributes provide additional information to an HTML
element. Attributes always come in name/value pairs like this: name="value".
Attributes are always specified in the start tag of an HTML element.
Page 4
Attribute values should always be enclosed in quotes. Double style quotes are the most
common, but single style quotes are also allowed.
Example 1:
<h1> defines the start of a heading.
<h1 align="center"> has additional information about the alignment.
Example 2:
<body> defines the body of an HTML document.
<body bgcolor="yellow"> has additional information about the background

color.
The Image Tag and the Src Attribute
In HTML, images are defined with the <img> tag. To display an image on a page, you
need to use the src attribute. Src stands for "source".
General format of the HTML tag
<TAG_NAME ATTRIBUTE_1 ATTRIBUTE_2, etc> </TAG_NAME>
<img src="sky.jpeg"></img>
So as you see, the extra part of the HTML tag is known as an attribute (or properties)
of the <IMG> tag. Most of the HTML tags consists of attributes (I.e. <IMG>, <P>) .
For a tag like <IMG> you have to use at least the SRC attribute.
Some of the <IMG> tags attributes
SRC The source attribute specify from where the image is loading. For example it can
be in the same folder or it can be in another location Eg: C:\My
Documents\Pictures\Tree. GIF or The URL of the image you want to display on your
web page. Eg:http://www.images.com/nature/mountain.jpg).
WIDTH this specifies the width of the image. It can be in percentage or in pixels
Eg WIDTH = 50% or WIDTH = 100px
HEIGHT this for the height of the image. The values can be given just like the WIDTH
property.
Eg HEIGHT = 75% or HEIGHT = 100px
<img src="sky.jpeg" width="100" height="150">
The Alt Attribute
The alt attribute is used to define an "alternate text" for an image. The value of the alt
attribute is an author-defined text. The "alt" attribute tells the reader what he or she is
Page 5
missing on a page if the browser can't load images. The browser will then display the
alternate text instead of the image.
<img src="boat.gif" alt="Big Boat">
Linking Documents
The Anchor Tag and the Href Attribute
HTML uses the <a> (anchor) tag to create a link to another document. An anchor can
point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
<a href="url">Text to be displayed</a>
The <a> tag is used to create an anchor to link from, the href attribute is used to
address the document to link to, and the words between the open and close of the
anchor tag will be displayed as a hyperlink.
a href="lastpage.htm">Last Page</a>.
<a href="http://www.disneyworld.com ">Click here </a>
Frames
With frames, you can display more than one HTML document in the same browser
window. Each HTML document is called a frame, and each frame is independent of the
others.
The disadvantages of using frames are:
The web developer must keep track of more HTML documents

It is difficult to print the entire page
The Frameset Tag

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

The <frame> tag defines what HTML document to put into each frame
In the example below we have a frameset with two columns. The first column is set to
25% of the width of the browser window. The second column is set to 75% of the
width of the browser window. The HTML document "frame_a.htm" is put into the first
column, and the HTML document "frame_b.htm" is put into the second column:
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Page 6
You cannot use the <body></body> tags together with the <frameset></frameset>
tags
Backgrounds
A good background can make a Web site look really great. The <body> tag has two
attributes where you can specify backgrounds using color or an image.
Bgcolor Attribute
The bgcolor attribute specifies a background-color. The value of this attribute can be a
hexadecimal number, or a color name:
e.g <body bgcolor="#088888">
<body bgcolor="pink">
Background Attribute
The back ground attribute specifies a background image for an HTNL page.the value
of this attribute is the file name or the path or the URL of the image you want to use.
If the image is smaller than the browser window, the image will repeat itself until it fills
the entire browser window
Eg:<BODY BACKGROUND=clouds.jpeg>
<BODY BACKGROUND=http:// www.schoolnet.com/clouds.jpeg>
Text Formatting
Face - Sets the font to the specific font name
Size - Size of the text , can take values between 1 to 7. Default is 3.
Colour - Color of the text, can be set to an English language color name or hexa
decimal triplets.
Eg: <FONT FACE="Garamond" SIZE ="3" COLOR="088888">
Marquee
Marquees are text lines which scroll across the webpage. They can be set to start from
the left and to scroll to the right side or vice versa.
<Marquee> Text </Marquee>
Tables
Tables are defined with the <table> tag. A table is devided into rows (with the <tr>
tag) and each row is divided into data cells (with the <td> tag). A data cell can contain
text, images, lists, paragraphs, form, horizontal rules.
<Table>
<TR>
<TH>.</TH>
</TR>
<TR>
<TD>
<TD>
</TR>
</Table>
Page 7
<TR> - Table row
<TH> - Heading in a table
<TD> - Data row
Page 8

HTML - Note

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML - Note

Uploaded by

Copyright:

Available Formats

UNIT 06 WEB PAGE DEVELOPMENT

1) If you are running Windows, launch Notepad.

2) Type in the following text:

3) Save the file as "mypage.html

What is an HTML File?

Basic HTML Tags

<HTML> and </HTML>

<HEAD> and </HEAD>

<BODY> and </BODY>

<TITLE> and </TITLE>

<p>This <br> is a para<br>graph with line breaks</p>

<hr>Horizontal Ruler </hr>

<li> - List items

Here is how it looks in a browser:

Here is how it looks in a browser:

<dt> - Definition Term

<dd> - Definition Description

Here is how it looks in a browser:

HTML Tag Attributes

<h1> defines the start of a heading.

<h1 align="center"> has additional information about the alignment.

<body> defines the body of an HTML document.

<body bgcolor="yellow"> has additional information about the background

The Image Tag and the Src Attribute

General format of the HTML tag

<TAG_NAME ATTRIBUTE_1 ATTRIBUTE_2, etc> </TAG_NAME>

Some of the <IMG> tags attributes

<img src="sky.jpeg" width="100" height="150">

The Alt Attribute

<img src="boat.gif" alt="Big Boat">

The Anchor Tag and the Href Attribute

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

<a href="http://www.disneyworld.com ">Click here </a>

The disadvantages of using frames are:

The web developer must keep track of more HTML documents

The Frameset Tag

The Frame Tag

You might also like