HTML - Notes Unit 3 PDF

Computer Application-II
Notes
Unit - III
HTML is the predominant markup language for web pages. HTML is the basic building-blocks
of web pages.
HTML is short for HyperText Markup Language.
Hypertext is simply a piece of text that works as a link.
Markup Language is a way of writing layout information within documents.
Basically an HTML document is a plain text file that contains text and nothing else.
HTML is written in the form of HTML elements consisting of tags, enclosed in angle brackets
(like <html>), within the web page content. HTML tags normally come in pairs like <h1> and
</h1>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called
opening tags and closing tags).
The purpose of a web browser is to read HTML documents and compose them into visual or
audible web pages. The browser does not display the HTML tags, but uses the tags to interpret
the content of the page.When a browser opens an HTML file, the browser will look for HTML
codes in the text and use them to change the layout, insert images, or create links to other pages.
Since HTML documents are just text files they can be written in even the simplest text editor.
A more popular choice is to use a special HTML editor - maybe even one that puts focus on the
visual result rather than the codes - a so-called WYSIWYG editor ("What You See Is What You
Get").
Some of the most popular HTML editors, such as FrontPage or Dreamweaver will let you create
pages more or less as you write documents in Word or whatever text editor you're using.
A web page is an "HTML Document". This is a file format which usually uses the extension
".html" or ".htm". For example, if you use Microsoft Word, you will usually save your files with
the extension ".doc". However you can also save your files with many other extensions such as
".txt", ".wps" etc. Amongst the options is ".html".
HTML documents are actually just plain text, but contain snippets of code which carry vital
information about how the page should be displayed. You can create such a document using any
text editor - even a very simple one like Windows Notepad. In fact many web designers prefer to
use simple text editors.
This is what a very simple HTML document looks like:
<html>
<head>
<title>A Simple Web Page</title>
</head>
<body>
This is about as simple as a web page can get.
</body>
</html>
To view an HTML document, you must use a browser (or similar software). The browser opens
the HTML document in the background and "decodes" it before showing it to you. What you see
is your browser's interpretation of how the web page should look (note: this is actually an
important point - it's why you should test your site using a variety of browsers).
~1~
Prepared by: Ms Nidhi Goel
Notes
Unit - III
Tags and Page Structure

HTML uses a system of "tags" to record instructions on how the page should be displayed. Tags
are
placed
inside
angle
brackets
like
so:
<instruction>
Tags often exist in pairs: The "beginning tag" specifies the instruction and is placed where you
want the instruction to begin. The "end tag" is placed where you want the instruction to end, and
is identified by the inclusion of a forward slash like so: </instruction>. The instruction is applied
to everything between the two tags.
The most important tags are <html> and </html> - the entire document is contained within these
two tags. The instruction here is simply "This is an HTML document".
Within the document, there are two parts: the "head" and the "body". The head is contained
within the tags <head> and </head>, the body is contained within the tags <body> and </body>.
The head includes information about the document, and is not displayed by the browser. The
body contains all the contents for the page, and is what the browser displays.
HTML file extensions and the source document
When naming HTML files, keep in mind that some clients require your file name to have a
".html" extension (for DOS/Windows users, this is a ".htm" extension). To be safe, all HTML
files you create should use the ".html" naming convention.
You can view the HTML tags for any HTML document by looking at the "source" document that
contains the HTML tags, usually called "View Source" or "View Document Source" from the
"View" menu on most clients. Using this option is a nice way to learn new things as well as
refresh your memory when working with HTML tags.
TAGS
Basically, a computer sees an "A" as simply an "A" - whether it is bold, italic, big or small.
To tell the browser that an "A" should be bold we need to put a markup in front of the A.
Such a markup is called a Tag.
All HTML tags are enclosed in < and >.
Head
All normal webpages consist of a head and a body.
Body
The head is used for text and tags that do not
show directly on the
page.
The body is used for text and tags that are shown directly on the page.
Finally, all webpages have an <html> tag at the beginning and the end, telling the browser where
the document starts and where it stops.
The most basic code - the code you will use for any page you make, is shown below:
HEAD SECTION
The head section of the webpage includes all the stuff that does not show directly on the
resulting page.
~2~
Notes
Unit - III
The <title> and </title> tags encapsulate the title of your page. The title is what shows in the top
of your browser window when the page is loaded.
Right now it should say something like "Basics - Html Tutorial" on top of the window containing
this text.
Another thing you will often see in the head section is metatags. Metatags are used for, among
other things, to improve the rankings in search engines.
Quite often the head section contains javascript which is a programming language for more
complex HTML pages.
Finally, more and more pages contain codes for cascading style sheets (CSS).
CSS is a rather new technique for optimizing the layout of major websites.
Since these aspects are way out of reach at this stage we will proceed with explaining the body
section
BODY SECTION
The body of the document contains all that can be seen when the user loads the page.
In the rest of this tutorial you can learn in detail about all the different aspects of HTML,
including:
Text
o
o
o
o
Links
o
o
o
Formatting
Resizing
Layout
Listing
To local pages
To pages at other sites
To bookmarks
Images
Inserting images (GIF and jpg)
Adding a link to an image
Backgrounds
o Colors
o Images
o Fixed Image
Tables
Frames
Forms
Metatags
Hexadecimal Colors
o
o
~3~
Notes
Unit - III
Document Elements -- These are the tags that set up the sections of a web page, as well as
identifying it as a web page.
Base elements:
<html></html> -- defines the page as an html document
<head></head> -- area at the beginning that provides information to the browser, but does not
show on the page
<title></title> -- element within heading that shows the title of the page. This is the title that
shows on the top of the browser and for bookmark purposes, but does not appear on the page
itself.
<body></body> -- defines the actual body of the page
Here's how the basic format for a web page could look:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
Main body of the page, with text, pictures, etc.
</body>
</html>
Elements in the Body Tag:

You can add a lot of style to your document by adding or changing things within the body tag
(simply include them in the opening body tag before the ">"
Here are some optional elements: (in all cases, you may pick whatever color you wish).
text="#000000" makes text on the page black
link="#FF0000" makes unvisited links on the page red
vlink="#00FF00" makes previously visited links green
alink="#0000FF" makes links in the process of being clicked blue
bgcolor="#FFFFFF" makes the background color of the page white
background="URL.gif" uses a gif image and tiles it to be the background of the page
Here's how the body tag might look with several elements:
<body bgcolor="#FFFFFF" link="#FF0000" vlink="#00FF00" alink="#0000FF">
Note: There are a number of other tags which can go into the "head" tag (like the "meta" tag) for
various functions, but we'll wait for later to discuss those. What you have here is enough to
design most pages.
~4~
Notes
Unit - III
Container Tags -- Container tags are used to affect a certain portion of your material. They
utilize the on/off approach. Container tags operate on the material between the opening tag <
tag> and the closing tag </ tag>
Closed Tags:
Start tag
End Tag
Format of code used in

example
How it looks


This is for bold text
This is for bold text


Strong is
similar to bold but may
depend on the browser
Strong is similar to bold

but may depend on the
browser


This is for italic text
This is for italic text
<cite>
</cite>
<cite>Cite</cite> is similar to
italic
Cite is similar to italic


So is Emphasis
but may depend on browser
So is Emphasis but may

depend on browser
<center>
</center>
<center>Centers the
text</center>
Centers the text


Right aligned paragraph. You can use the
"p" tag as a container to align
text to the right
Right aligned
paragraph.
You can use the "p" tag
as a container to align
text to the right
<blockquote>
</blockquote>
<blockquote> Use blockquote

to indent a section of text
from both sides. Great for
quoted sections in a paper.
Also very effective to use on
an entire page to keep things
from getting too close to the
edge.</blockquote>
Use blockquote to
indent a section of text
from both sides. Great
for quoted sections in a
paper. Also very
effective to use on an
entire page to keep
things from getting too
close to the edge.
<h3>
</h3>
<H3>Use H1 or H2 or H3 etc.
for headings</H3>It
automatically adds a
Use H1 or H2 or H3
etc. for headings
It automatically adds a
~5~
Notes
Unit - III
paragraph break after the

heading. Note: 1 is largest.
paragraph break after

the heading. Note: 1 is
largest.


Increases font

size by the amount of
the number. You can also use
negative numbers.
Increases font size by

the amount of the
number. You can also
use negative numbers.


Changes font

size to a specific size.
Higher numbers are larger
font size.
Changes font size to a

specific size. Higher
numbers are larger font
size.


You can change the
font color within your
text. See the <A
HREF="tables2.html">section
on colors</A> for options of
color codes or experiment.
You can change the font

color within your text.
See the section on
colors for options of
color codes or
experiment.


You can change
the actual font used to some
extent within your
text. In this instance,
the browser will attempt to
use "Verdana" if the computer
has it; if not, "Arial"; if not,
"Helvetica"; if not, a generic
sans-serif font; if not, it will
ignore the instruction.
You can change the

actual font used to some
extent within your text.
In this instance, the
browser will attempt to
use "Verdana" if the
computer has it; if not,
"Arial"; if not,
"Helvetica"; if not, a
generic sans-serif font;
if not, it will ignore the
instruction.
<blink>
</blink>
Blink. The most

<blink>annoying</blink>
code in html.
Blink. The most

annoying code in html.
<ul>
</ul>
Unordered
List.<ul><li>Creates a list
with bullets<li>"li" is used to
denote list items<li>Each
appears with a bulletA
break with no "li" gives an
Unordered List.
Creates a list
with bullets
"li" is used to
denote list items
Each appears
~6~
Notes
Unit - III
item without bullet.</ul>
with a bullet
A break with no
"li" gives an
item without
bullet.
<ol>
</ol>
Ordered List.<ol><li>Creates
a list with numbers<li>"li" is
used to denote list
items<li>Each appears with a
consecutiveA break with
no "li" gives an item without a
number.</ol>
Ordered List.
1. Creates a list
with numbers
2. "li" is used to
denote list items
3. Each appears
with a number
A break with no
"li" gives an
item without a
number.
<dl>
</dl>
Definition
List.<dl><li>Creates a list
with bullets, but the list items
are not indented<li>"li" is
used to denote list
items<li>Each appears with a
bulletA break with no "li"
gives an item without
bullet.</dl>
Definition List.
Creates a list with
bullets, but the list items
are not indented
"li" is used to denote
list items
Each appears with a
bullet
A break with no "li"
gives an item without
bullet.
<tt>
</tt>
This changes to
<tt>typewriter style text</tt>
within your text.
This changes to
typewriter style text
within your text.
<pre>
</pre>
<pre> Within the preformatted tag, text and

numbers, etc. will be lined up
exactly as you typed them.
Good for lists and forms, etc.
</pre>
Within the preformatted

tag, text and numbers,
etc.
will be lined up
exactly
as you typed them.
Good for lists and
forms, etc.
Empty tag
~7~
Notes
Unit - III
An empty tag is a start tag that does not take an end tag.
In an empty tag, there is no data apart from that contained in the tag itself, either implicitly or by
the use of attributes.
EMPTY elements
In the HTML Document Type Definition, a very few elements are declared as EMPTY. This
means two things:
1. They do not contain any text. They are used simply as markers (and in some cases are
used for whatever is contained in their attributes.
2. EMPTY attributes are not permitted to have an end-tag. Thus <img
src="blahblah.gif"></img> is illegal.
Of the elements used in SUL/AIR, the only EMPTY elements are
hr Horizonal rule
br Line break
img Inline image
input Input
<Hr> and are used simply as markers and cause a horizontal rule or line break to be
inserted in the output. <img> and <input> (which is only used in forms), are used for the
attributes they carry. For example, <img src="globedfruit.gif"> tells the browser to insert the file
"globedfruit.gif" into the output.
There are several other EMPTY elements (<link>, <isindex>, <base>, <meta>, <nextid>), but
these are not normally used in SUL/AIR documents
Do not confuse an EMPTY element with an element that just happens to have nothing in it at the
moment.
Blockquote
The blockquote tag indents the text (both on the left and right) inside the tags. The blockquote
tag looks like this:
<blockquote>...</blockquote>
and displays like this:
Blockquoted text is often used for indenting big blocks of text such as quotations. The text will
be indented until the ending tag is encountered. Again, note that the text here is indented on both
the left and the right margins.
Anchors within the same document

To link to a specific section within the same document, you must define an anchor name inside
the document and then link to it. For example, if you were linking from the top of a document
titled "chapter2.html" to the fourth paragraph of this same document, you'd give the fourth
paragraph a name (any name, you make it up), in this case "important," and you'd create a link to
this name instead of a URL.
~8~
Notes
Unit - III
First, you would define the name "important" in the fourth paragraph with the name tag
<a name="important">First sentence in fourth paragraph</a>
Next, create the link to this "important" anchor (at the start of "chapter2.html"). It would look
like:
<a href="#important">link to important stuff</a>
The pound sign in front of the anchor name tells the browser to look for the link inside the
document already loaded instead of looking elsewhere in another file.
Note that anchor names are case sensitve, and that some kind of non-blank text must
appear in the named anchor tag.
Named anchors within another document
There may be times when you not only want to link to a specific document, but more precisely,
you want to link to a particular section of that other document. As an example, suppose you wish
to set up a link from the document "Our first HTML document" to a particular section in a
second document called "chapter2.html".
First, you set up a named anchor in the document you are linking to (chapter2.html). To do this,
go to the section in your second document where you want the reader to begin and define a
named anchor. Name this anchor "important". Insert the following tag in the appropriate place in
the second document:
<a name="important">some text</a>
Now to create the link in your first document. In your first document you need to include not
only the file name, but the name you defined for the anchor. This named anchor is separated
from the file name by a pound sign (#). Place this tag where you want the link to show up (the
highlighted text).
<a href="http://www.here.edu/chapter2.html#important">important part</a>
A user would see that the first document has the words "important part" highlighted. Clicking on
this highlighted text would take them to the "important" section in the second document.
Absolute and relative linking

If a new neighbor you just met on the street asked you where you lived, you wouldn't give them
your complete postal address. You'd say something like "two houses down on the left." Your
postal address is your "absolute" address -- anyone can find you using the information it
provides. The information you gave to your new neighbor is your "relative" address -- just
enough information to locate your house from where you were standing.
The same concept works with URL addresses. When linking from one document to another in
the same directory, only the second document name is necessary, not the entire URL. For
example
<a href="second_doc.html">Go to next page</a>
~9~
Notes
Unit - III
You can also link across directories to a document by relative position. For example
<a href="../third_doc.html">Go to third page</a>
links to a document in one directory hierarchy higher than the current document.
Relative links are strongly encouraged as they are easier to type and allow you to move groups
of files from one machine to another without editing the files at all. Naturally though, relative
linking becomes more and more dangerous the more directories you traverse. With that in mind,
it's usually best to use relative linking only within files that are part of a single project (such as
this HTML tutorial).
HTML Formatting
As you may have seen already, there are many ways to format text in HTML. Besides
paragraphs, here are two main commands for managing text in block form.
pre - Used to direct the browser to display a section of text exactly as it is typed with
spaces included.
blockquote - Used to format a block of text as a long quote indented more than the
surrounding text on the left and the right.
The PRE element
PRE element attributes
WIDTH="20" - (Depreciated). The WIDTH attribute specifies the number of characters

across the screen to display. This is very rarely used.
PRE element example
The PRE element is handy for showing program code or part of file content as in this example.
This is the HTML code:
Edit the file "/etc/auto.misc" adding lines like:<pre> cd -fstype=iso9660,ro :/dev/cdrom fl fstype=auto :/dev/fd0</pre>
This is how it looks:
Edit the file "/etc/auto.misc" adding lines like:
cd -fstype=iso9660,ro :/dev/cdrom fl -fstype=auto :/dev/fd0
http://www.comptechdoc.org/guides/htmlguide/htmlformatblock.html (1 of 3)7/21/2003 7:44:54
AM HTML Formatting
~ 10 ~
Notes
Unit - III
The BLOCKQUOTE element

This element may contain other block elements such as headers , paragraphs, preformat blocks
and tables. It should not be contained inside a paragraph element. It should not be used to
produce indentation. Style sheets should be used possibly with the CLASS attribute to create
indentation. Attribute:
cite="uri" - Specifies the URI of the source of the quote.

BLOCKQUOTE element example
This is the HTML code:
The preamble of the Constitution says: <blockquote>We the People of the United
States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility,
provide for the common defence, promote the general Welfare, and secure the Blessings of
Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United
States of America.</blockquote>
This is how it looks:
The preamble of the Constitution says:
We the People of the United States, in Order to form a more perfect Union, establish Justice,
insure domestic Tranquility, provide for the common defence, promote the general Welfare, and
secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this
Constitution for the United States of America.
HTML Line Formatting
There are several methods of managing lines which are:
BR - Line break. Start a new line.
HR - Used to draw lines across the page

The BR element
An example of use of the BR element
The BR element has no ending tag. Here are two lines as they may be written without using a
 tag.
This is line 1.This is line 2.
This is what you would see:
This is line 1. This is line 2.
Here are the same two lines as they are written with a tag.
This is line 1. This is line 2.
This is what you would see:
This is line 1.This is line 2.
The HR element
HR Element Attributes
http://www.comptechdoc.org/guides/htmlguide/htmlformatline.html (1 of 3)7/21/2003 7:44:55
AM HTML Line Formatting
~ 11 ~
Notes
Unit - III
The HR element has no ending tag.
SIZE=7 - (Depreciated). Sets the thickness or size of the line in pixels.
ALIGN="RIGHT" - (Depreciated). Sets the alignment of the line on the page to LEFT,
RIGHT, or CENTER. The default is CENTER. The alignment is without purpose if the line
width is 100%.
WIDTH="50%" - (Depreciated). Sets the width of the line across the page as a % or in
pixels. The default is 100%.
COLOR="green"; - (Depreciated). Sets the color of the line. It may be expressed as one
of the words, red, blue, green, etcetera, but may also be expressed in the #RRGGBB color
format.
NOSHADE - (Depreciated). A boolean value to set the line to a solid line.

An example using the HR element
Here is how the <hr> tag appears as HTML code:
Above the line.<hr>Below the line.
Here is how it looks:
Above the line.
Below the line.
The line, above, is set according to the defaults or the style sheet associated with this HTML
document. To change its characteristics, I only need to change the style sheet. Note: Attempting
to change the line characteristics using depreciated attributes such as ALIGN, WIDTH, or
COLOR will not override values set by the style sheet. Only the use of the STYLE attribute will
override those values.
Here's a colored line in HTML code (The top coding example uses HTML 3.2 without embedded
style commands and the bottom coding uses HTML 4.01 with embedded style commands:
<hr size="15" align="left" width="50%" color="blue"><hr style="color: 'blue'; height: '15'; textalign: 'left'; width: '50%'">
Here's how it looks:
http://www.comptechdoc.org/guides/htmlguide/htmlformatline.html (2 of 3)7/21/2003 7:44:55
AM HTML Line Formatting
.. - Sets bold text.

<big>..</big> - Sets larger than normal text.
.. - Sets text in italics and denotes emphasis.
.. - Sets text in italics.
.. - Makes text smaller than normal.
<strike>..</strike> - Draws a line through the text as a "strikeout".
.. - Same as bold but denotes strong emphasis.
<super>..</super> -Superscript.
<tt>..</tt> - Monospaced typewriter font.
.. - Underlined text.
~ 12 ~
Notes
Unit - III
This is an example of the tag.

This is an example of the <big> tag.
This is an example of the tag.
This is an example of the tag.
This is an example of the tag.
This is an example of the <strike> tag.
This is an example of the tag.
This is an example of the tag.
This is an example of the tag.
This is an example of the <TT> tag.
This is an example of the tag.
The FONT tag

The font element is being depreciated and replaced by style sheet attributes. The 
element is used to set a section of text with a specific font. It uses the tag to begin and
the for the end tag.
FONT Attributes and Tags
 - Begins the FONT element. SIZE="4" - Sets the font size using a value, between 1
and 7. The default value is 3. It can be specified with a "+n" value to set the size relative to the
current size.
COLOR="blue" - Sets the text color.
FACE="roman" - The font name to be used. If there is more than one font name
separated by commas the first font that can be found is used.
 - Ends the FONT element.
<BASEFONT> - Used to set the default font size on the current page. SIZE="2" Specifies default font size with a value between 1 and 7.
IMG:
The <IMG> tag is used to embed graphics in HTML pages. They may be embedded inside other
elements such as anchors. When embedded inside an anchor, then the user left clicks on the
image, they will go to the designated link (rather, their browser will load a file from the
designated link). The <IMG> element has no ending tag.
IMG Attributes
SRC="../greenhomebutton.gif" - The path and filename of the image which specifies its
location.
ALT="Home" - This is a message displayed if the image could not be found.
ALIGN="TOP" - (Depreciated). Sets the image alignment. The image is aligned to the
left or right column if the value is LEFT or RIGHT,The values, TOP, MIDDLE, BOTTOM,
ABSMIDDLE, and ABSBOTTOM, set the vertical alignment with items in the same line.
VSPACE=3 - (Depreciated). The space between the image and the text above and below
it in pixels.
~ 13 ~
Notes
Unit - III
HSPACE=5 - (Depreciated). The space between the image and the text to the left and
right of it in pixels.
BORDER=10 - (Depreciated). Sets a border of the specified width in pixels to be drawn

around the image.
HEIGHT=33 - The height of the image. If this is not specified, the image will be the size
as determined by the gif file. This can be set in pixels or a percentage of the browser window
height.
WIDTH=115 - The width of the image. If this is not specified, the image will be the size
as determined by the gif file. This can be set in pixels or a percentage of the browser window
width.
ISMAP - Identifies the image as an image map. The image map lets the user point and
click different parts of the image to load other web pages.
USEMAP - Specifies the client side image map file to be used.

The line break element, and the horizontal rule element <HR> may be placed inside the
<IMG> element.
Example 1
The following code will display a gif file:
<img src="MyPicture.gif" alt="Outdoor Scene">
This code sets an alternate text of "Outdoor Sceen" in the event the "MyPicture.gif" file is not
http://www.comptechdoc.org/guides/htmlguide/htmlgraphics.html.
~ 14 ~
Notes
Unit - III
displayable. This usually occur if it cannot be found or if the user has their browser controls set
not to display pictures.
Example 2
In this example the additional feature is added that sets the size of the picture relative to the size
of the browser window. The size of the picture is set to 20% of the height of the browser window
and 40% of the width.
<img src="MyPicture.gif" alt="Outdoor Scene" height="20%" width="40%">
<a href="Picture1.gif"><img src="SmallPicture.gif" ALT="Picture1" height="20%"
width="40%"></a>
Image areas and Maps

To use a web browser to click on various areas of an image file and go to a specific web page
depending on the area clicked upon requires the use of the <MAP> and <AREA> elements. The
<MAP> element has an ending tag, </MAP> while the <AREA> element does not.
MAP and IMAGE Tags and Attributes
<MAP> - Starts a client-side image map. This must be referenced in an image <IMG>
tag. This element will include <AREA> tags.
</MAP> - Ends the image map element.

<AREA> - Defines areas of an image map that the user may click on to establish a link.
SHAPE=RECT - Defines the shape of the click able area. Valid values are POLY, RECT, and
CIRCLE.
COORDS="2,50,102,101" - Defines, in pixels, the top-left and bottom-right coordinates
of the clickable linked region in the image.
HREF="leftwing.htm" - Defines the location of the web page that is loaded when the area
in the image is clicked.
~ 15 ~
Notes
Unit - III
Example Code
<img src="airplane.gif" ismap usemap="#airplane.map"></a> <map
name="airplane.map"><area shape="rect coordsS="2,50,102,101"
HREF="leftwing.html"><area shape="rect" coords="110,10,160,300" HREF="fusalage.html">
<area shape="rect" coords="162,50,262,101" HREF="rightwing.html"> </map>
http://www.
~ 16 ~
Notes
Unit - III
Here's another colored line in HTML code (The second line uses style commands to set attributes
rather than directly using some of the older attributes that are being depreciated):
<hr size="15" align="left" width="100%" color="#FF0000"><hr style="height: '15'; text-align:
'left'; color: '#FF0000'; width: '100%'">
~ 17 ~

HTML - Notes Unit 3 PDF

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML - Notes Unit 3 PDF

Transféré par

Droits d'auteur :

Formats disponibles

Computer Application-II

Prepared by: Ms Nidhi Goel

Tags and Page Structure

Prepared by: Ms Nidhi Goel

Prepared by: Ms Nidhi Goel

Elements in the Body Tag:

Prepared by: Ms Nidhi Goel

Format of code used in

This is for <b>bold</b> text

This is for bold text

Strong is similar to bold

This is for <i>italic</i> text

This is for italic text

Cite is similar to italic

So is Emphasis but may

Centers the text

Right aligned paragraph. <p

<blockquote> Use blockquote

Prepared by: Ms Nidhi Goel

paragraph break after the

paragraph break after

Increases <font size=+2>font

Increases font size by

Changes <font size=6>font

Changes font size to a

You can <font

You can change the font

You can <font

You can change the

Blink. The most

Blink. The most

Prepared by: Ms Nidhi Goel

item without bullet.</ul>

<pre> Within the preformatted tag, text and

Within the preformatted

Prepared by: Ms Nidhi Goel

Anchors within the same document

Prepared by: Ms Nidhi Goel

Absolute and relative linking

Prepared by: Ms Nidhi Goel

WIDTH="20" - (Depreciated). The WIDTH attribute specifies the number of characters

Prepared by: Ms Nidhi Goel

The BLOCKQUOTE element

cite="uri" - Specifies the URI of the source of the quote.

BR - Line break. Start a new line.

HR - Used to draw lines across the page

Prepared by: Ms Nidhi Goel

The HR element has no ending tag.

SIZE=7 - (Depreciated). Sets the thickness or size of the line in pixels.

NOSHADE - (Depreciated). A boolean value to set the line to a solid line.

<b>..</b> - Sets bold text.

Prepared by: Ms Nidhi Goel

This is an example of the <b> tag.

The FONT tag

COLOR="blue" - Sets the text color.

</FONT> - Ends the FONT element.

ALT="Home" - This is a message displayed if the image could not be found.

Prepared by: Ms Nidhi Goel

BORDER=10 - (Depreciated). Sets a border of the specified width in pixels to be drawn

USEMAP - Specifies the client side image map file to be used.

Prepared by: Ms Nidhi Goel

Image areas and Maps