Hyper Text Markup Language

HTML
(Hyper Text Markup Language)

What is World Wide Web?
•The World Wide Web (WWW) is most often called the Web.
•The Web is a network of computers all over the world.
•All the computers in the Web can communicate with each other.
•All the computers use a.
•Computers reading the Web pages are caled Web clients.
•Web clients view the pages with a program called a Web browser.
•Popular browsers are Internet Explorer and Netscape Navigator.
How does the browser fetch the pages?
•A browser fetches a Web page from a server by a request.
•A request is a standard HTTP request containing a page address.
• A page address looks like this: http://www.someone.com/page.htm.
How does the browser display the pages?

•All Web pages contain instructions for display
•The browser displays the page by reading these instructions.
•The most common display instructions are called HTML tags.
• HTML tags look like this This is a Paragraph.
What is an HTML File?
•HTML stands for Hyper Text Markup Language
•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
Structure of a HTML File The first tag in your HTML document is <html>.
This tag tells your browser that this is the start of
<html> an HTML document. The last tag in your
<head> document is </html>. This tag tells your browser
that this is the end of the HTML document.
<title>Title of page</title>
</head> The text between the <head> tag and the
</head> tag is header information. Header
<body> information is not displayed in the browser
This is my first homepage. This text window.
is bold The text between the <title> tags is the title of
</body> your document. The title is displayed in your
</html> browser's caption.
The text between the <body> tags is the text that
will be displayed in your browser.
The text between the and tags will be
displayed in a bold font.
HTML Tags
•HTML tags are used to mark-up HTML elements
•HTML tags are surrounded by the two characters < and >
•The surrounding characters are called angle brackets
•HTML tags normally come in pairs like and 
•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, means the same as 
Tag Attributes
Tags can have attributes. Attributes can provide additional information about the HTML
elements on your page.
This tag defines the body element of your HTML page: <body>. With an added bgcolor
attribute, you can tell the browser that the background color of your page should be
red, like this: <body bgcolor="red">.
This tag defines an HTML table: <table>. With an added border attribute, you can tell
the browser that the table should have no borders: <table border="0">
Attributes always come in name/value pairs like this: name="value".
Attributes are always added to the start tag of an HTML element.
Headings
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>
HTML automatically adds an extra blank line before and after a heading.
Paragraphs
Paragraphs are defined with the tag.
This is a paragraph
This is another paragraph
HTML automatically adds an extra blank line before and after a paragraph.
Line Breaks
The tag is used when you want to end a line, but don't want to start a new
paragraph. The tag forces a line break wherever you place it.
This is a para graph with line breaks
The tag is an empty tag. It has no closing tag.
Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment
will be ignored by the browser. You can use comments to explain your code, which can
help you when you edit the source code at a later date

Note that you need an exclamation point after the opening bracket, but not before the
closing bracket.
Character Entities
Some characters have a special meaning in HTML, like the less than sign (<) that
defines the start of an HTML tag. If we want the browser to actually display these
characters we must insert character entities in the HTML source.
A character entity has three parts: an ampersand (&), an entity name or a # and an
entity number, and finally a semicolon (;).
To display a less than sign in an HTML document we must write: < or <
The advantage of using a name instead of a number is that a name is easier to
remember. The disadvantage is that not all browsers support the newest entity names,
while the support for entity numbers is very good in almost all browsers.
Note that the entities are case sensitive.
Non-breaking Space
The most common character entity in HTML is the non-breaking space.
Normally HTML will truncate spaces in your text. If you write 10 spaces in your text
HTML will remove 9 of them. To add spaces to your text, use the character
entity.
The Most Common Character Entities:
Result Description Entity Name Entity Number

non-breaking space
< Less than < <
> Greater than > >
& Ampersand & &
" quotation mark " "
' apostrophe '
Some Other Commonly Used Character Entities:
Result Description Entity Name Entity Number
¢ Cent ¢ ¢
£ Pound £ £
¥ Yen ¥ ¥

§ Section § §
© Copy right © ©
® registered trademark ® ®
× multiplication × ×
÷ division ÷ ÷
Aligning Text
You can use the tag to align text at the left, center or right side of a screen.
<HTML>
<HEAD>
<TITLE>Aligned Text</TITLE>
</HEAD>
<BODY>
 I am left.
 I am center.
 I am right.
</BODY>
</HTML>
By default the tag aligns text at the left side of the screen.
Creating Preformatted Text <HTML>
Another HTML tag that you can use to <HEAD>
position text is the <PRE> tag. Suppose <TITLE>Example</TITLE>
you have some text that you want to </HEAD>
format precisely, and you want every <BODY>
space to appear exactly as you typed it. <PRE>
e.g. I am the first line.
This would seem to be a very useful tag, I am the second line.
it also has its own drawbacks.The text I am the third line.
that occurs in the <PRE> tag is </PRE>
displayed in a browser, the browser </BODY>
displays it with an ugly fixed-pitch </HTML>
font.The text also won’t wrap to a new
line.
Basic Text Formatting with HTML
A web page containing only plain text would be boring. To create more attractive page,
you need to control such things as the size, color, and type face of the text you display.
Working with Fonts
The tag has three attributes: SIZE, COLOR and FACE.
You specify the size of a font by
<HTML>
<HEAD> setting the SIZE attribute to a number
<TITLE>Font Sizes</TITLE> between 1 and 7, in which 1 is the
</HEAD>
<BODY> smallest size and 7 is the largest. This
 I am small. is the way to provide absolute sizes,

 I am big! but you can also provide relative

 I am little bigger than the base font
sizes.In the e.g. SIZE=+1 tells the
 browser to make the font one size
 I am a little smaller than the base font larger than the base font.
</BODY>
</HTML>
The size of the base font is determined by the <BASEFONT> HTML tag. You are under
no obligation to use this tag. If you leave it out the base font will be set by the browser.
The <BASEFONT> tag works exactly like the tag, except that it applies to the
document as a whole. The <BASEFONT> tag should be used only once in a document
and should be appeared before any tags.
<HTML> The sentence I am big appears in the

<HEAD> size specified by the <BASEFONT> tag,
<TITLE>Base Font</TITLE> so its size is 6. The sentence I am
</HEAD> bigger! Appears one size larger than the
<BODY> base font, so its size is 7. You can’t
guarantee that your fonts will appear in
<BASEFONT SIZE=6>
the absolute sizes you specify. The size
I am big. of the fonts that appear in a browser
 can be set by the user of a browser and
 I am bigger! the user has the final word.
</BODY>
</HTML>
Creating Big and Small Text
If you don’t want to use the tag to control the size of your text, you can use the
<BIG> and tags to make your text big or small.The <BIG> tag makes your text
slightly bigger than the normal size, and the tag makes your text slightly
smaller.
<HTML>
<HEAD>
<TITLE>Big and Small</TITLE>
</HEAD>
<BODY>
<BIG> How big of you</BIG>

 How small of you. 
</BODY>
</HTML>
Bold, Italic, Underlined and Strikethrough Text
<HTML>
<HEAD>
<TITLE>Text Formatting</TITLE>
</HEAD>
<BODY>
 I am bold 

 I am in Italics 

 Strike through
</BODY>
<HTML>
Superscripts and Subscripts
In some occasions you may need to create superscript and subscript text such as
E=mc2 and H2O. We can do this with and container tags.
<HTML>
<HEAD>
<TITLE>Subscript and Superscript</TITLE>
</HEAD>
<BODY>
E=mc2

H2O.
</BODY>
</HTML>
Linking HTML Pages
The World Wide Web would not be a Web if not for the existence of hypertext links. Hypertext links enable you
to link one HTML document to another. They allow you to move from one Web page to another with a single
mouse click.
Understanding Internet Addresses

You can visit the Yahoo site by typing http://www.itoncorp.com into the address bar of your Web browser. When
you type http://www.yahoo.com , you are typing a Uniform Resource Locator (URL). URLs can be thought of as
addresses for web pages.
A URL has three parts.
The first part of the URL tells the browser what type of protocol you want to use to access whatever you are
trying to get over the Internet. When using a Web Browser, you almost always use the Hypertext Transfer
Protocol(HTTP), because normally you are retrieving HTML documents. HTTP is protocol for transferring HTML
files from one computer to another.
The second part of the URL provides the domain name of the resource you are attempting to access.For e.g.,
Yahoo is registered on the Internet with the domain name www.yahoo.com you can transfer the home page of
this website to your computer by typing http://www.yahoo.com into the address bar of your browser.
However, the Yahoo website has more than one webpage. I you need to access a particular web page on the
Yahoo site other than the home page, you need to provide additional information. In the third part of the URL,
you specify the location of particular HTML file that you are interested in retrieving.For e.g.
http://www.itoncorp.com/main.html
Linking Between Web Sites
To link your Web page to other page on the World Wide Web, you use something called
a hypertext anchor. To create a hypertext anchor, you use the <A> HTML tag.
<HTML>
<HEAD>
<TITLE>Inter-Site Anchor</TITLE>
</HEAD>
<BODY>
<A HREF=http://www.itoncorp.com>ITON</A>
</BODY>
</HTML>
The <A> tag is a container tag. The text that it contains becomes a hypertext link. In the
above e.g. the text ITON is displayed in a browser with an underline.This tells the viewer
of the page that the text is a hypertext link. You supply the Web address as the value of
the HREF attribute of the <A> tag. This address can be the URL of any page on any web
site in the world.
Linking within a Web Site
Your website probably will have more than one page, and you will want the users of
your website to able to move easily from one page to another. To allow this, you need
to add hypertext anchors that link your website’s pages together. You create links
within your web site in the same way that you create links between web sites.
<A href=“that.htm”>That</a>
<A href=“this.htm”>This</a>
Linking Within a Web Page
Some times its useful to have hypertext links that take you to a particular location within a page. For e.g., if you
have a table of contents at the top of a web page, you may want the users of your Web page to be able to click
different parts of the table of contents to arrive at particular sections of your document. You can use the <A> tag
to create this type of hypertext link as well.
<HTML>
<HEAD>
<TITLE> Linking within a web Page </TITLE>
</HEAD>
<BODY>
<H1> Contents </H1>
<A HREF=“#section1”> Section I </A>
 
<A HREF=“#section2”>Section II </A>

<A NAME=“section1”>Section I </A>
 
This is the first section.

<A NAME=“section2”>Section II</A>
 
This is the second section.
<A HREF=“that.htm”>That</A>
</BODY>
</HTML>
Linking to a named location within another document.
You can also use the <A> tag to create a hypertext link to a named location within another document.
For example, suppose you have created a location in the HTML file “that.htm” with the name “there_in_that”.
You can create a hypertext link to this named location by using the following tag in the this.htm file
<A HREF=“that.htm#there_in_that”> Go There </A>
Controlling the Color of Links
Prior to the first time a hypertext link is clicked the text appears in a bright blue color.
After the links is clicked and the destination has been visited, the color of the hypertext
link changes to purple. Finally, while the mouse button actually is being held down on
the hypertext link, the text appears red.
The three attributes that control the color of a hypertext link are the LINK, VLINK, and
ALINK attributes. All three of these are attributes of the <BODY> tag.
e.g. <BODY LINK=“lime” VLINK=“lime” ALINK=“lime”>
<A HREF=http://www.itoncorp.com>ITON</a>
</BODY>
</HTML>
LINK attribute determines the color of links that have yet to be visited.
VLINK attribute determines the color of visited links.
ALINK attribute determines the color of links that are actively being clicked.
Adding images to your Web Page
Adding images to your web page is easy. To add an image, use the <IMG> HTML tag.
<HTML>
<HEAD><TITLE>Image e.g.</TITLE></HEAD>
<BODY>
<IMG SRC=“iton.gif” width=10 height=12 ALT=“Iton Logo”>
</BODY>
</HTML>
Align = Top, middle, bottom, left, right
Creating Links with Images
<HTML>
<HEAD>
<TITLE>Image attributes</TITLE>
</HEAD>
<BODY>
<A HREF=http://www.itoncorp.com><img SRC=“itoncorp.gif”></A>

Hyper Text Markup Language

Uploaded by

Copyright:

Available Formats

Hyper Text Markup Language

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Hyper Text Markup Language

Uploaded by

Copyright:

Available Formats

HTML