Computer B.com III

INTRODUCTION
Webpages are written in HTML - a simple scripting language.
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.
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 Dream

weaver will let you create pages more or less as you write documents in
Word or whatever text editor you're using.
However, there are some very good reasons to create your own pages -
or parts of them - by hand...
1
WHY LEARN HTML?
It is possible to create web pages without knowing anything about

the HTML source behind the page.
There are excellent editors on the market that will take care of
the HTML parts. All you need to do is layout the page.
However, if you want to make it above average in web design, it is

strongly recommended that you understand these tags.
The most important benefits are:
You can use tags the editor does not support.
You can read the code of other people's pages, and "borrow"
the cool effects.
You can do the work yourself, when the editor simply refuses
to create the effects you want.
You can write your HTML by hand with almost any available text
editor, including notepad that comes as a standard program with
Windows.
All you need to do is type in the code, then save the document,
making sure to put an .html extension or an .htm extension to the
file (for instance "mypage.html").
2
THE HTML TAGS
Although not currently required by all clients, the <html> tag signals
the point where text should start being interpreted as HTML code.
It's probably a good idea to include it in all your documents now, so
you don't have to go back to your files and add it later.
The <html> tag is usually placed on the first line of your document.
At the end of your document you should close with the </html> tag.
HTML uses tags to communicate to the client (browser) how to

display text and images. Tags are contained in < > symbols. In most
cases you start with the beginning tag, put in the word or words
that will be affected by this tag, and at the end of the string of
word(s), you place a closing tag.
For example, to create a title for a document you would do the

following:
<title>My First HTML Document</title>
The closing tag normally contains a "/" before the directive to

indicate the termination of the action.
HTML tags are not case-sensitive, although URLs generally are. In

most cases (with the exception of preformatted text) HTML
collapses many spaces to one space and does not read blank lines.
However, when you write your text you should leave several blank
lines between paragraphs to make editing your HTML source
document easier.
3
THE HEAD TAG
Just like the header of a memo, the head of an HTML document

contains special information, like its title. The head of a document
is demarcated by <head> and </head> respectively.
For the purposes of this class, only the title tag, below, should be
included in the document head. A typical head section might look
like
<html>
<head>
</head>
OUTPUT SHOWN AS FOLLOWES
4
TITLES TAG
A title tag allows you to specify a Document Title in your browser

window. When people make hotlists, this title is what they see in
their list after they add your document. The format is:
Remember, the title usually doesn't appear in the document itself,

but in a title box or bar at the top of the window.
THE BODY TAG
Like you might expect, the body tags <body> and </body> define the
beginning and end of the bulk of your document. All your text,
images, and links will be in the body of the document.
The body should start after the head. A typical page might begin
like
<html>
<head>
</head>
<body>
5
HEADERS TAGS
There are up to six levels of headers that can be used in your

document, h1 through h6. Header 1 is the largest header and they
get progressively smaller through header 6. Below are each of the
six headers and how they usually appear in relation to one another.
It can be explained with the help of this example
<html>
<head>
<title> this is my first web</title>
</head>
<body><center> <h1><b>web designing</b></h1>

<h2>web designing</h2>
<h6>web designing</h6></center>
</body>
</html>
6
Output of This Are As Follows
7
PARAGRAPHS TAGS
In HTML, a paragraph tag <p> should be put at the end of every

paragraph of "normal" text (normal being defined as not already
having a tag associated with it).
<p> causes a line break and adds a trailing blank line
<br> causes a line break with no trailing blank line
As a convenience to yourself and others who might have to edit

your HTML documents, it's a very good idea to put two or three
blank lines between paragraphs to facilitate editing.
PREFORMATTED TEXT TAGS
The preformatted text tag allows you to include text in your

document that normally remains in a fixed-width font and retains
the spaces, lines, and tabs of your source document. In other
words, it leaves your text as it appears initially or just as you typed
it in. Most clients collapse multiple spaces into one space, even tabs
are collapsed to one space. The only way to circumvent this is to
use the preformatted tag. Visually, preformatted text looks like a
courier font.
<pre>this is an example
of a preformatted
text tag</pre>
And this is how it displays:

This is an example of a preformatted text tag
8
BOLDFACE AND ITALICS TAGS
You can add emphasis to text by using the boldface and italic tags
or the emphasis and strong tags.
There is an underline tag as well, but most people don't use it since
text that is linked is often underlined. The potential for confusion
and the archaic nature of underlining in general make it a poor
marker for emphasis.
When using these tags, you usually cannot (and probably should not)
have text that is both boldface and italics; the last tag
encountered is usually the tag that is displayed. For example, if you
had a boldface tag followed immediately by an italic tag, the tagged
word would appear in italics.
It can explain with the help of this example:
<html>
<head>
<title>friends</title>
</head>
<body><b>Hello...</b><i>How are you???</i>
</body>
</html>
Output of this as shown in the next page:
9
Physical tags
This is a <b>boldface</b> tag.

This is how boldfacing appears.
This is an <i>italic</i> tag.
This is how italics appear.
Logical tags
This is a <strong>strongly emphasized</strong> tag.

This is a strongly emphasized tag.
This is an <em>emphasized</em> tag.
This is an emphasized tag.
There is a subtle distinction between the above "physical" tags

which merely change the displayed font, and "logical" styles which
are used (or eventually will be) to make types of emphasis client
specific (for instance, using the <em> tag would make text red).
While either style is fine, be aware that differences in these two
kinds of tags may be more apparent with advances in HTML.
10
LISTS TAGS
There is an easy way in HTML to have numbered, unnumbered, and

definition lists. In addition, you can nest lists within lists.
When using lists, you have no control over the amount of space
between the bullet or list number, HTML automatically does this
for you. Neither (as yet) do you have control over what type of
bullet will be used as each browser is different.
Unnumbered lists Tags
Unnumbered lists are started with the <ul> tag, followed by the
actual list items, which are marked with the <li> tag. The list is
ended with the ending tag </ul>.
For example, here is an unnumbered list with three items:
<ul>
<li> list item 1
<li> list item 2
<li> list item 3
</ul>
Here is how that list would display:
list item 1
list item 2
list item 3
Numbered lists Tags
11
Here is the same list using a numbered list format:
<ol>
<li> list item 1
<li> list item 2
<li> list item 3 </ol>
list item 1
list item 2
list item 3
Definition lists Tags
Definition lists allow you to indent without necessarily having to use

bullets.
<dl>
<dt> This is a term
<dd> This is a definition
<dd> And yet another definition
<dt> Another term
<dd> Another definition
</dl>
And here is how this would be displayed:
This is a term
This is a definition.
And yet another definition.
Another term
Another definition
Nested lists Tags
12
Finally, here is a nested list within an unnumbered list (we could
just have easily had a nested list within a numbered list).
<ul>
<li> list item 1
<ul>
<li> nested item 1
<li> nested item 2
</ul>
<li> list item 2
<ul>
<li> nested item 1
<li> nested item 2
</ul>
<li> list item 3
<ul>
<li> nested item 1
<li> nested item 2
</ul>
</ul>
list item 1
nested item 1
nested item 2
list item 2
nested item 1
nested item 2
list item 3
nested item 1
nested item 2
BLOCKQUOTE TAGS
13
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.
CENTER TAGS
You can center text, images, and headings with the center tag:
<center>This is a centered sentence</center>
This is a centered sentence.
The center tag automatically inserts a line break after the closing
center tag.
ADDRESSES TAGS
The <address> tag normally appears at the end of a document and is

used most frequently to mark information on contacting the author
or institution that has supplied this information. Anything
contained within the address tag appears in italics. The address tag
is another example of a logical tag, and although it currently does
nothing but make text appear in italics, this could change as HTML
code advances.
Here is an example of how an address might appear as:
14
<body>What is sweet but not Honey,
Precious but not Money,
Bright but not Sunshine,
Improves with time but not Wine???
Its....MY FRIENDSHIP!!!
<address> akshay_style123yahoo.com
</body>
Output of this is as follows:
STRIKE-THROUGH
15
Should you want it, there is a strike-through tag which displays
text with a strike.
<strike>This is struck through text</strike>
displays as :
This is struck through text
HOW TO CREATE TABLE IN HTML
Tables are the lifeblood of HTML. They allow you to almost

perfectly place text, images, and other media, exactly where you
want it. You can make a table conform to the users screen width, or
you can be rigid and make the table any number of pixels wide. The
new standard is a 600 pixel wide table, since most people are using
640x480 resolution, they won't have to scroll both horizontally and
vertically.
There are really only three basic tags for a table. They are:
<table> = table tag <tr> = table row <td> = table data
Most important is that a <td> is always inside a <tr>, which is always

inside a <table>.
A very basic table would look like this
<table> <tr> <td> Hi Mom </td> </tr> </table>
Now the fun begins when we start to add to the table. Remember
when you were little and you would build playing card houses, that
the most important thing was the foundation? Well the same
applies to HTML Tables. By properly placing the tag, with the right
16
attributes you will build the solid foundation you need to make a
great card house, oops I mean table.
I would like to make a 3 column, 3 row table so you can see a basic
table, then we will add attributes to it, to flavor it up. So, lets get
started!
Here is the HTML code for the table above:

<table BORDER=1>
<TR><TD>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
</table>
It is at this point I would like to remind you that most HTML tags
require and en tag. This is especially important with table tags. One
missing </td> and the table might not show up or could be skewed.
From here on, I will only print the HTML Code that changes. This
will help you to see what has changed, and how it looks in both the
HTML and on screen.
First HTML change in the table will be to remove the border.

Change the border tag to read BORDER=0 and this is how the table
looks:
Cell 1 Cell 2 Cell 3

17
As you see, now there is no border. This is commonly referred to as

Borderless Tables.
Next we will add some cellpadding to the table. This gives each cell
some space to breathe. So add CELLSPACING=5 to the table tag.
There are loads of different options for tables. There are

Cellpadding, Cellspacing, border, align, valign, and many others.
Cellpadding - Space within the cells

Cellspacing - Space between the cells
Border - Puts a border around the cells and table
Align - aligns the content of the table (left, right, center)
Valign - vertically aligns the content (top, middle, bottom)
Align and Valign can be used in td,tr, and table tags. Cellpadding,
Cellspacing and Border should only be used in the table tag.
Next we will look at colspan and rowspan. Rowspan allows you to

stretch one cell to more than one cell.
Cell 1
18
To accomplish this, you have to use the colspan attribute. Just add
colspan=2 to the <td>, and bam!
Rowspan works similar.
Cell 2 Cell 3
Cell 8 Cell 9
To accomplish this, add ROWSPAN=3, to your <td> tag.
Here is a list of all table attributes; you should consider this your,
"cheat sheet."
Table Attribute List
Define Table <TABLE></TABLE>

Columns to Span <TH COLSPAN=?>
Rows to Span <TH ROWSPAN=?>
Desired Width <TH WIDTH=?> (in pixels)
Width Percent <TH WIDTH="%"> (percentage of
table)
Cell Color <TH BGCOLOR="#$$$$$$">
Table Caption <CAPTION></CAPTION>
Alignment <CAPTION ALIGN=TOP|BOTTOM> (above/below table)
Table Border <TABLE BORDER=?></TABLE>
Cell Spacing <TABLE CELLSPACING=?>
19
Cell Padding <TABLE CELLPADDING=?>
Desired Width <TABLE WIDTH=?> (in pixels)
Width Percent <TABLE WIDTH="%"> (percentage of
page)
Table Row <TR></TR>
Alignment <TR ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
Table Cell <TD></TD> (must appear within
table rows)
Alignment <TD ALIGN=LEFT|RIGHT|
No linebreaks <TD NOWRAP>
Columns to Span <TD COLSPAN=?>
Rows to Span <TD ROWSPAN=?>
Desired Width <TD WIDTH=?> (in pixels)
Width Percent <TD WIDTH="%"> (percentage of
table)
Cell Color <TD BGCOLOR="#$$$$$$">
Table Header <TH></TH> (same as data,
except bold
centered)
Alignment <TH ALIGN=LEFT|RIGHT|
No Linebreaks <TH NOWRAP>
EXAMPLE OF THIS TABLE CAN BE SHOWN WITH THE HELP

OF THESE TABLE TAGS
20
<html>
<head><b><center><h1><tt>This is my first
table</tt></h1></center></b></head><br><br><br><br>
<title>akshay</title>
<body BGcolor="sky blue"></body>
<table Border=5 width=60% align=center tablecolor="red">
<tr>
<th rowspan=2>name
<th colspan=3>marks
</tr>
<tr>
<th> english
<th> science
<th> punjabi
</tr>
<tr align=center>
<td> akshay
<td> 58
<td> 89
<td> 56
</tr>
<tr align=center>
<td> navjot
<td> 45
<td> 96
<td>78
</tr>
<captionalign=top><big><b><h2>marks
sheet</h2></big><b></caption></table></html>
THIS SHOWN AS FOLLOWS:
21
HTML COMMANDS FOR LINKS
The real power of HTML is its ability to link to other documents

and pieces of text, images, video or audio. Links are usually
highlighted or underlined in a document so that you know of their
existance. Clicking on the link opens up the document for viewing.
Linking to other documents
To link to a file on a Web server, your HTML tag would look

like:
<a href="http://www.ncsu.edu/">Welcome to NCSU</a>
22
The text that appears between the beginning and ending tags
("Welcome to NCSU" in the above example) is the text that is the
link the reader clicks on to go to that URL.
When you make a link, imagine you're creating two anchor points:
one exists in your document (the text to click on), while the other
is the document to which you're linking. You basically create a
thread between two points.
Here are what the parts mean:
<a -- starts the anchor

href -- stands for "hypertext reference"
http://www.ncsu.edu/ -- the URL of the other document
Welcome to NCSU -- the text that will appear and be
clickable
/a> -- ends the anchor
As long as you know the URL for a file, you can create a link to it.
Linking to a named anchor
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.
Continuing on with the above example. We are creating a link from

the top of "chapter2.html" to the fourth paragraph; we are going
to call this link "important". First, you would define the name
"important" in the fourth paragraph with the name tag
23
<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).
24
<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>
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
25
only within files that are part of a single project (such as this
HTML tutorial).
WE CAN EXPLAIN THIS LINKS WITH THE HELP OF THIS

EXAMPLE
<html>
<head>
<title>friends</title>
</head>
<bodybackground="E:\akshay\Gallery\3-Dimentional\3
Dimensionals 000052.jpg"> <center>"Today, tommorow and
yesterday there will be
one heart that would always beat for you<br>
You know Whose???<br>
your Own Stupid!!!"<br></center><img width=50 height=65 >
<center><h4>THIS IS THE LINKS.</H4>
<OL TYPE="1">
<LI><A HREF="nav.htm">HTML </A>
<LI><A HREF="akshay.htm">AKSHAY</A>
<LI><A HREF="89.htm">ATUL</A>
<LI><A HREF="ap.htm">PAWAN</A>
<LI><A HREF="n.html">ARTI</A>
<LI><A HREF="hr tag.htm">HASHIMA</A>
<LI><A HREF="font tag.htm">NAVJOT</A></OL></center>
</body>
</html>
THE OUTPUT OF LINKS ARE SHOWN AS WELL
26
27

Computer B.com III

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Computer B.com III

Hochgeladen von

Copyright:

Verfügbare Formate

INTRODUCTION

Webpages are written in HTML - a simple scripting language.

HTML is short for HyperText Markup Language.

is simply a piece of text that works as a link.

is a way of writing layout information within documents.

Some of the most popular HTML editors, such as FrontPage or Dream

It is possible to create web pages without knowing anything about

However, if you want to make it above average in web design, it is

The most important benefits are:

You can use tags the editor does not support.

HTML uses tags to communicate to the client (browser) how to

For example, to create a title for a document you would do the

<title>My First HTML Document</title>

The closing tag normally contains a "/" before the directive to

HTML tags are not case-sensitive, although URLs generally are. In

Just like the header of a memo, the head of an HTML document

OUTPUT SHOWN AS FOLLOWES

A title tag allows you to specify a Document Title in your browser

<title>My First HTML Document</title>

Remember, the title usually doesn't appear in the document itself,

THE BODY TAG

There are up to six levels of headers that can be used in your

It can be explained with the help of this example

<title> this is my first web</title>

<body><center> <h1><b>web designing</b></h1>

In HTML, a paragraph tag <p> should be put at the end of every

<p> causes a line break and adds a trailing blank line

<br> causes a line break with no trailing blank line

As a convenience to yourself and others who might have to edit

PREFORMATTED TEXT TAGS

The preformatted text tag allows you to include text in your

And this is how it displays:

It can explain with the help of this example:

Output of this as shown in the next page:

This is a <b>boldface</b> tag.

This is a <strong>strongly emphasized</strong> tag.

There is a subtle distinction between the above "physical" tags

There is an easy way in HTML to have numbered, unnumbered, and

Unnumbered lists Tags

For example, here is an unnumbered list with three items:

Here is how that list would display:

Numbered lists Tags

Here is how that list would display:

Definition lists Tags

Definition lists allow you to indent without necessarily having to use

And here is how this would be displayed:

Here is how that list would display:

and displays like this:

Blockquoted text is often used for indenting big blocks of text

<center>This is a centered sentence</center>

This is a centered sentence.

The <address> tag normally appears at the end of a document and is

Here is an example of how an address might appear as:

Output of this is as follows:

<strike>This is struck through text</strike>

This is struck through text

HOW TO CREATE TABLE IN HTML

Tables are the lifeblood of HTML. They allow you to almost

Most important is that a <td> is always inside a <tr>, which is always

A very basic table would look like this

<table> <tr> <td> Hi Mom </td> </tr> </table>

Here is the HTML code for the table above:

First HTML change in the table will be to remove the border.