HTML

1
HTML
HTML Introduction
HTML Elements
HTML Basic Tags
HTML Formatting
HTML Entities
HTML Links
HTML Frames
HTML Tables
HTML Lists
HTML Forms
HTML Images
HTML Background
HTML Colors
HTML Colorvalues
HTML Colornames
HTML Quick List
HTML Layout
HTML Fonts
HTML 4.0 Why
HTML Styles
HTML Head
HTML Meta
HTML URLs
HTML Scripts
HTML Attributes
HTML Events
HTML URL-encode
HTML Webserver
HTML Summary
BS 502 Web Programming (05)
by: Haroon Akhtar
2
HTML Introduction
What is an HTML file

HTML Elements
HTML documents are text files made up of HTML elements

HTML Basic Tags
Basic tags used in HTML

HTML Formatting
How to format text using HTML

HTML Entities
Characters which have a special meaning in HTML

HTML Links
How to create and use links in an HTML document

HTML Frames
How to display more than one Web page in the same browser window
HTML Tables
Tables in an HTML document

HTML Lists
HTML supports ordered, unordered and definition lists

HTML Forms
HTML forms are used to select different kinds of user input

HTML Images
Displaying images in a document with HTML

HTML Background
Give a good background to make a Web site look great

HTML Colors
How to use colors in HTML

HTML Color values
HTML colors are defined using a hexadecimal notation

HTML Color names
On this page you will find a table of color names that are supported by most browsers.
HTML Quick List
HTML quick list from Us

HTML Layout
What is a layout in HTML
by: Haroon Akhtar
HTML Fonts
The tag is used to add style, size, and color to the text on your site
HTML 4.0 Why
Why use HTML 4.0?

HTML Styles
How to use styles

HTML Head
The head element in HTML

HTML Meta
The meta element

HTML URLs
HTML Uniform Resource Locators

HTML Scripts
Add scripts to HTML pages to make them more dynamic and interactive
HTML Attributes
HTML 4.0 standard attributes

HTML Events
HTML 4.0 event attributes

HTML URL-encode
HTML URL-encoding reference

HTML Web Server
How to publish your work

HTML Summary
Summary
by: Haroon Akhtar
Introduction to HTML
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
File extension: .HTML, .htm
MIME type: text/HTML
Type code: TEXT
Uniform Type Identifier: public.HTML
Developed by: W3C
Type of format: markup language
Extended to: XHTML
Standard(s): W3C HTML 4.01
What Is Markup Language

A markup
language combines
text
and
extra
information
about
the
text.
The extra information, for example about the text's structure or presentation, is expressed
using markup, which is intermingled with the primary text. The best-known markup language
in modern use is HTML (HyperText Markup Language), one of the foundations of the World
Wide Web. Historically, markup was (& is) used in the publishing industry in the
communication of printed work between authors, editors, and printers.
Creating an HTML document

Creating an HTML document is very easy. To begin coding HTML, need only two things: a
simple-text editor! Notepad is the most basic of simple-text editors and you will probably code
a good amount of HTML with it.
HTML is platform independent; you will need to save your HTML files in standard text format,
sometimes known as ASCII. The easy way to do this is use a program like notepad.exe in
Windows,
pico
in
Linux,
and
the
like.
If you'd prefer to use a word processor like Word or WordPerfect to write HTML code, you can
do so, but need to save your files as "Text" or "Text Only. " You will see this option in a drop
down box in your "Save As..." screen.
If you use a word processor and forget to save it as Text format, you will see only
garbled data when you try to view the page with a web browser.
The Most Common Mistake

The most common mistake for designers is the urge to put the d:\ in links and images. When
you are on the web, there is no d:\ to the rest of the world. When you start out, keep all your
HTML files and images in one folder, and don't use d:\ at all.
by: Haroon Akhtar
5
Quick example:
<img> loads an image into a web page. If you have a file called flower.jpg, use the code <img
src="flower.jpg"> to load it, not <img src="c:\My Documents\website\flower.jpg">
Frequently Asked Questions

What is HTML?
HyperText Markup Language: HTML is a plain text file with commands <markup tags> to tell
Web browsers how to display the file. Tim Berners-Lee created HTML while at CERN, (the
European Laboratory for Particle Physics) in Geneva.
My page looks good on one browser, but not on another.

There are slight differences between browsers, such as Netscape Navigator and Microsoft
Internet Explorer, in areas such as page margins. The only real answer is to use standard
HTML tags whenever possible, and view your pages in multiple browsers to see how they look.
Does my computer have to run Windows? What about a Mac?

You can do all your training on a non-Windows computer like a Mac. However, some of the
examples in our advanced classes require a newer version of Windows.
How do I know if my HTML is correct?

It's good to validate your HTML. Just because you can see the Web page ok on your browser
doesn't mean every browser will show it that way or even be able to access the Web page.
Browsers attempt to "work around" HTML errors, and the differences can be subtle or drastic.
That's why the folks at WC3 have worked up the specifications of what works for every
browser. Although some may display it a little different, at least you know they can access
your page. (The different browser programs have their own set of "whistles and bells" that just
won't do the same... especially Microsoft Internet Explorer and Netscape Navigator.)
After I have edited an HTML file, I cannot view the result in my browser.
Why?
Make sure that you have saved the file with a proper name and extension like
"c:\mypage.htm". Also make sure that you use the same name when you open the file in your
browser.
by: Haroon Akhtar
HTML Elements
What Is An HTML Element
An HTML element indicates structure in an HTML document and a way of arranging content
hierarchically. An HTML element is an SGML element that meets the requirements of one or
more of the HTML DTDs (Document Type Definitions). These elements have properties: both
attributes and content, as specified (both allowable and required) according to the appropriate
HTML DTD. Elements may represent paragraphs, headings, hypertext links, lists, embedded
media, and a variety of other structures.
Syntactically HTML elements are constructed with:

1)
2)
3)
4)
a start tag marking the beginning of an element;

any number of attributes (and their associated values);
some amount of content (characters and other elements)'; and
an end tag.
Many HTML elements include attributes in their start tags. Attributes are defining desired
behavior or indicating additional element properties. The end tag is optional for many
elements. There are a few elements that are not part of any official DTDs, yet are supported
by some browsers and used by some web pages. Such elements may be ignored or displayed
improperly on browsers not supporting them.
HTML Tags
Informally, HTML elements are sometimes referred to as "tags", though many prefer the term
tag strictly in reference to the semantic structures delimiting the start and end of an element.
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 <i> and </i>
The first tag in a pair is the start tag(<i>), the second tag is the end tag(</i>)
The element content is the text between the start and end tags
HTML tags are not case sensitive, <b> means the same as <B>
by: Haroon Akhtar
Why do We Use Lowercase Tags?

Start using lowercase tags, if you want to prepare yourself for the next generations of HTML.
The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4
recommendation, and XHTML - the next generation HTML - demands lowercase tags.
HTML Basic Tags

<HTML>
This tag is used to indicate that this is an HTML document. Most HTML documents should start
and end with this tag.
<head>
This tag is used to indicate the header section of the HTML document, which typically includes
the <title> and <meta> tags, and is not displayed in the main window of the browser.
<title>
This tag indicates the title of this HTML page. The title is what is displayed on the upper left
corner of the browser when you view a web page. The title tag is important when it comes to
search engine ranking. Many of the search engines pay special attention to the text in the
<title> tag. This is because (logically) that words in the <title> tag indicate what the page
content is.
<meta>
The <meta> tag information is not directly displayed when the page is rendered on the
browser. Rather, this is used for the author of the HTML page to record information related to
this page. Two common attributes are name and content. The <meta> tag used to hold
great importance in search engine optimization, with authors carefully drafting what's inside
the tag to gain better search engine ranking, but recently its importance has been decreasing
steadily.
<body>
The <body> tag includes the HTML body of the document. Everything inside the <body> tag
(other than those within the <script> tag) is displayed on the browser inside the main browser
window.
The <body> tag may contain several attributes. The most commonly used ones are listed
below:
bgcolor: This is the background color of the entire HTML document, and may be
specified either by the color name directly or by the six-digit hex code.
alink: The color of the links.
vlink: The color of the visited links.
topmargin: The margin from the top of the browser window.
leftmargin: The margin from the left of the browser window.
by: Haroon Akhtar
8
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6>
defines the smallest heading.
<h1>This
<h2>This
<h3>This
<h4>This
<h5>This
<h6>This
is
is
is
is
is
is
a
a
a
a
a
a
heading</h1>
heading</h2>
heading</h3>
heading</h4>
heading</h5>
heading</h6>
HTML automatically adds an extra blank line before and after a heading.
Line Breaks
The <br> tag is used when you want to end a line, but don't want to start a new paragraph.
The <br> tag forces a line break wherever you place it.
<p>This <br> is a para<br>graph with line breaks</p>
The <br> 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.
HTML Formatting
<font>
The <font> tag is used to change the format of the text on the web page. The most important
attributes are as follows:
face: The type of font. Common ones include "Time New Roman", "Verdana", and "Helvetica."
size: This indicates the size of the text. This can be absolute (0 .. 6), or relative ("+1", ... or
"-1",...)
color: This attribute indicates the color of the text. Either the color name or the six-character
color code may be used to specify color.
<font size=2 face="Helvetica" color=red>This illustrates the attributes of the font tag.</font>
Text Formatting Tags

<b>
The <b> tag will bold the text inside the tag.
by: Haroon Akhtar
9
<i>
The <i> tag will italicize the text inside the tag.
<u>
The <u> tag will underline the text inside the tag.
<center>
The <center> tag causes all the text within the tag to be centered.
<p>
The <p> tag indicates a new paragraph. It is the same as <br><br>. This tag is most often
used by itself, without a corresponding closing tag.
<big>
Defines big text
<em>
Defines emphasized text
<small>
Defines small text
<strong>
Defines strong text
<sub>
Defines subscripted text
<sup>
Defines superscripted text
<ins>
by: Haroon Akhtar
10
Defines inserted text
<del>
Defines deleted text
"Computer Output" Tags

<code>
Defines computer code text
<kbd>
Defines keyboard text
<samp>
Defines sample computer code
<tt>
Defines teletype text
<var>
Defines a variable
<pre>
Defines preformatted text
HTML Character Entities
Some characters like the < character, have a special meaning in HTML, and therefore
cannot be used in the text.
An entity is a fancy term for a symbol. Several symbols such as copyright, trademark,
or foreign cash symbols exist outside of the ones you see on your keyboard. In order
to display them. In order to display these characters, you need to know 4 parts.
In HTML we use less than and greater than characters to create tags, so to use them
on your web site you will need entities.
by: Haroon Akhtar
11
A Character Entity has three parts:
Each begins with an ampersand - &
An entity name or a # and an entity number
And finally a semicolon - ;
HTML Links
A link is a connection from one Web resource to another
A link has two ends (anchors) and a direction.
The link starts at the "source" anchor and points to the "destination" anchor,
which may be any Web resource (e.g., an image, a video clip, a sound bite, a
program, an HTML document, an element within an HTML document, etc.).
The Anchor Tag and the Href Attribute

HTML uses the anchor (<a>) 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. The syntax of creating an anchor:
<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.
The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. We can create links that can jump
directly into a specific section on a page, using named anchors instead of letting the user scroll
around to find what he/she is looking for. Below is the syntax of a named anchor:
<a name="label">Text to be displayed</a>
To create a named anchor the name attribute is used. The name of the anchor can be any text
you care to use. The line below defines a named anchor:
<a name="main">Main Section</a>
You should notice that a named anchor is not displayed in a special way.
To link directly to the a section, add a # sign and the name of the anchor to the end of a URL,
like this:
<a href="http://www.abc.com/def.asp#main"> Jump to the Main Section</a>
A hyperlink to the Main Section from within the file "def.asp" will look like this:
<a href="#main">Jump to the Main Section</a>
by: Haroon Akhtar
12
The Target Attribute

With the target attribute, you can define where the linked document will be
opened.
The line below will open the document in a new browser window:
Below is the syntax of a named anchor:
<a href="http://www.iub.edu.pk/" target="_blank">Visit IUB</a>
HTML Frames
With frames, you can display more than one Web page in the same browser
window.
Frames allow for multiple ".HTML" documents to be displayed inside one

browser window at a time.
Frames - A Generic Frame Page

Most typically frames are used to have a menu in one frame, and content in another
frame. When someone clicks a link on the menu then that web page is opened on the
content page.
Here is an example of a basic "index" frameset with a menu on the left and content on the
right.
<HTML> <head> </head>
<frameset rows="20%,*">
<frame src="title.HTML">
<frameset cols="30%,*">
<frame src="menu.HTML">
<frame src="content.HTML">
</frameset>
</HTML>
Using 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
by: Haroon Akhtar
13
The Frame Tag
The <frame> tag defines what HTML document to put into each frame
In the below example 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_x.htm" is put into the first column, and the HTML
document "frame_y.htm" is put into the second column:
<frameset cols="25%,75%">
<frame src="frame_x.htm">
<frame src="frame_y.htm">
</frameset>
HTML Tables
The HTML table model allows authors to arrange data -- text, preformatted text,
images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.
Tables
Tables are defined with the <table> tag.

A table is divided into rows (with the <tr> tag), and
each row is divided into data cells (with the <td> tag).
The letters td stands for "table data," which is the content of a data cell.
A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables,
etc.
<table border="1">
<tr>
<td>row 1, cell
<td>row 1, cell
</tr>
<tr>
<td>row 2, cell
<td>row 2, cell
</tr>
</table>
1</td>
2</td>
1</td>
2p</td>
Headings in a Table
Headings in a table are defined with the <th> tag.
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
<td>row 2, cell 2p</td>
by: Haroon Akhtar
14
</tr>
</table>
Tables and the Border Attribute

The table will be displayed without any borders if you do not specify a border attribute.
Sometimes this can be useful, but most of the time, you want to show the borders. To display
a table with borders, you will have to use the border attribute:
<table border="1">
<tr>
</tr>
</table>
Spanning Multiple Rows and Cells

Use rowspan to span multiple rows & colspan to span multiple columns. To display a table
with borders, you will have to use the border attribute:
<table border="1">
<tr>
<td>column1</td>
<td>column2</td>
<td>column3</td>
</tr>
<tr>
<td rowspan="2">row 1, cell 1</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="3">row 3, cell 1</td>
</tr>
</table>
O/P:
column1
column2
column3
row 1, cell 1
row 1, cell 2
row 1, cell 3
row 2, cell 2
row 2, cell 3
row 3, cell 1
by: Haroon Akhtar
15
Cell Padding and Spacing
You will be able to adjust the white space on your tables with the cellpadding and cellspacing
attributes .
Padding represents the distance between cell borders and the content within, while spacing
defines the width of the border.
<table border="1">
<tr>
<td >row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
O/P: Table without Cell Padding and Spacing
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
<table border="1" cellspacing="10">
<tr>
</tr>
<tr>
</tr>
</table>
O/P: Table with Cellspacing
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
<table border="1" cellpadding="10">
<tr>
</tr>
<tr>
</tr>
</table>
O/P: Table with Cellpadding
row 1, cell 1
row 1, cell 2
by: Haroon Akhtar
16
row 2, cell 1
row 2, cell 2
HTML Lists
HTML offers authors several mechanisms for specifying lists of information
There are 3 different types of lists.
<ul> - unordered list; bullets

<ol> - ordered list; numbers
<dl> - definition list; dictionary
Unordered Lists
An unordered list is a list of items. With bullets the list items are marked (typically small black
circles).
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<ul>
<li>list item1</li>
<li>list item2</li>
</ul>
In three flavors the bullet comes :
squares <ul type="square">
discs <ul type="disc">
circles <ul type="circle">
<ul type="square">
<li>list item1</li>
<li>list item2</li>
</ul>
O/P:

list item1
list item2
<ul type="disc">
<li>list item1</li>
<li>list item2</li>
</ul>
O/P:
list item1
list item2
<ul type="circle">
<li>list item1</li>
<li>list item2</li>
</ul>
by: Haroon Akhtar
17
O/P:
o
o
list item1
list item2
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers.
An unordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol>
<li>list item1</li>
<li>list item2</li>
</ol>
O/P:
1. list item1
2. list item2
Using the start attribute start your ordered list on any number besides 1.
<ol start="4" >
<li>list item1</li>
<li>list item2</li>
</ol>
O/P:
4. list item1
5. list item2
There are 4 other types of ordered lists. You can replace generic numbers with Roman
numberas or letters, both capital and lower-case. Use the type attribute to change the
numbering.
<ol type="a">
<li>list item1</li>
<li>list item2</li>
</ol>
O/P:
a.
b.
list item1
list item2
<ol type="A">
<li>list item1</li>
<li>list item2</li>
</ol>
O/P:
by: Haroon Akhtar
18
A. list item1
B. list item2
<ol type="i">
<li>list item1</li>
<li>list item2</li>
</ol>
O/P:
i.
ii.
list item1
list item2
<ol type="I">
<li>list item1</li>
<li>list item2</li>
</ol>
O/P:
I.
II.
list item1
list item2
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.
<dl>
<dt>Definition list term1</dt>
<dd>Definition list definition1</dd>
<dt>Definition list term1</dt>
<dd>Definition list definition1</dd>
</dl>
O/P:
Definition list term1
Definition list definition1
Definition list term2
Definition list definition1
by: Haroon Akhtar
19
HTML Forms and Input

A form is simply an area that can contain form fields.
Form fields are objects that allow the visitor to enter information - for
example text boxes, drop-down menus or radio buttons.
Forms
An HTML form is a section of a document containing normal content, markup, special elements
called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users
generally "complete" a form by modifying its controls (entering text, selecting menu items,
etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail
server, etc.)
A form is defined with the <form> tag.
<form name="input" action="HTML_form_action.asp" method="get">
<input type="text" name="user">
<input type="submit" value="Submit" >
</form>
Form's Action Attribute

This attribute specifies a form processing agent. User agent behavior for a value other than an
HTTP URI is undefined.
When the user clicks on the "Submit" button, the content of the form is sent to another file.
The form's action attribute defines the name of the file to send the content to. Usually the file
defined in the action attribute does something with the received input.
Form's Method Attribute

Method attribute specifies which HTTP method will be used to submit the form data set.
Possible
(case-insensitive)
values
are
"get"
(the
default)
and
"post".
One can specify two different submission methods for a form in HTML. The difference between
METHOD="GET" (the default) and METHOD="POST" is primarily defined in terms of form data
encoding. The official recommendations say that "GET" should be used if and only if the form
processing is idempotent, which typically means a pure query form. Generally it is advisable to
do so. There are, however, problems related to long URLs and non-ASCII character repertoires
which can make it necessary to use "POST" even for idempotent processing.
get: With the HTTP "get" method, the form data set is appended to the URI specified by the
action attribute (with a question-mark ("?") as separator) and this new URI is sent to the
processing agent.
post: With the HTTP "post" method, the form data set is included in the body of the form and
sent to the processing agent.
enctype
This attribute specifies the content type used to submit the form to the server (when the value
of method is "post"). The default value for this attribute is "application/x-www-form-url
by: Haroon Akhtar
20
encoded". The value "multipart/form-data" should be used in combination with the INPUT
element, type="file".
Input
The most used form tag is the <input> tag. The type of input is specified with the type
attribute.
Text Fields
Text fields are used when you want the user to type something (letters, numbers, etc.) in a
form. In most browsers, by default the width of the text field is 20 characters.
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
O/P:
First name:
Last name:
Password Fields
Password fields are a special type of <input /> tag. All that we need to do is change the type
attribute from text to password.
<form>
<input type="password">
<input type="password" size="5" maxlength="5">
<input type="password" size="15" maxlength="15" >
<input type="password" size="25" maxlength="25" >
</form>
O/P:
Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of choices.
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
by: Haroon Akhtar
21
O/P:
Male
Female
Checkboxes
Checkboxes are used when you want the user to select one or more options of a limited
number of choices.
<form>
<input type="checkbox" name="bike"> Bike
<br>
<input type="checkbox" name="car"> Car
</form>
O/P:
Bike
Car
Textarea
A text-area is a multi-line text input control. A user can write text in the text-area. In a textarea you can write an unlimited number of characters.
Rows and columns need to be specified as attributes to the <textarea> tag. Rows are
roughly 12pixels high, the same as in word programs and the value of the columns reflects
how many characters wide the text area will be.
Another attribute to be aware of is the wrap. Wrap has 3 values.
wrap=
"off"
"virtual"
"physical"
Virtual means that the viewer will see the words wrapping as they type their comments, but
when the page is submitted to you, the web host, the document sent will not have wrapping
words.
Physical means that the text will appear both to you, the web host, and the viewer including
any page breaks and additional spaces that may be inputed. The words come as they are.
Off turns off word wrapping within the text area. One ongoing line.
<form>
<textarea rows="5" cols="20" wrap="physical" name="comments">
Enter Comments Here
</textarea>
</form>
O/P:
by: Haroon Akhtar
22
Drop Down Lists

With
the <select> and <option> tags
drop
down
menus
are
<select> is the list itself and each <option> is an available choice for the user.
created.
<form>
<select name="ourSites">
<option>vyomworld.com</option>
<option>testsworld.com</option>
<option>jobsassist.com</option>
<option>vyomlinks.com</option>
<option>sourcecodesworld.com</option>
<option>coolinterview.com</option>
<option>tasty-food.com</option>
</select>
</form>
O/P:
Selection List
Selection list is basically just another type of way to get input from the user.
The size attribute selects how many options will be shown at once before needing to scroll,
and the selected option tells the browser which choice to select by default.
<form>
<select multiple name="ourSites" size="4">
<option>vyomworld.com</option>
<option>testsworld.com</option>
<option>jobsassist.com</option>
<option>vyomlinks.com</option>
<option>sourcecodesworld.com</option>
<option>coolinterview.com</option>
<option>tasty-food.com</option>
</select>
</form>
O/P:
by: Haroon Akhtar
23
vyomw orld.com
testsw orld.com
jobsassist.com
vyomlinks.com
Submit Button
The submit button will send all input form data to the destination declared in the form action
command. If you do not give your submit button a value the button will display Submit Query
by default. Placing any other text in the value will display within the button.
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
<br>
<input type="submit" value="Submit Here">
</form>
O/P:
First name:
Last name:
Submit Here
HTML Images
Placing An Image On Your Page
Here's the format for placing an image:
<IMG SRC="image.gif" ALT="some text" >
Here's What's Happening

IMG
IMG stands for "image."
It announces to the browser that an image will go here on the page. Yes, the image will pop
up right where you write in the image tag.
SRC
SRC stands for "source." This again is an attribute, a command inside a command. The value
of the src attribute is the URL of the image you want to display on your page. It's telling the
browser where to go to find the image. Again, it's best for you to place the images you want
to use in the same directory as the page. This way you can call for the image by name alone.
If you start to place your images all over the place, you'll have to start adding directories and
sub-directories to the SRC attribute. And at this point, that is way too confusing. Just place
by: Haroon Akhtar
24
the image in the same place as the HTML document that will call for it and then call for the
image by name alone. You can get fancy later. Right now, let's just get it to work.
image.gif
image.gif is the name of the image. Notice it's following the same type of format as your
HTML documents. There is a name (image) then a dot and then there is a suffix (gif).
ALT
ALT stands for "alternate text". This tells the browser that if it can't find the image, then just
display this text. It also tells anyone who can't view your image what the image is about. For
example a disabled user using a screen reader, or dare I mention it, Search Engines.
"some text"
"some text" is where you put the text describing your image.
Image Formats
There are four basic formats you will find on the World Wide Web
.gif
gif This is pronounced "jif" or "gif" (hard "G") depending on whom you speak to. I have
always said "jif", like the peanut butter. This is an acronym for Graphics Interchange Format.
The format was invented by CompuServe and it's very popular. The reason is that it's a simple
format. It's a series of colored picture elements, or dots, known as pixels, that line up to make
a picture. Your television's picture is created much the same way. Browsers can handle this
format quite easily.
.png
.png .png Pronounced as 'ping', this stands for Portable Network Graphic. This is ultimately
the replacement for .gif, with partial transparency options, but browser support is sometimes
disappointing, so try experimenting but don't expect miracles in older browsers! Even some of
the newer ones don't like partial transparency.
.jpeg or .jpg
.jpeg or .jpg (pronounced "j-peg") There are two names to denote this format because of the
PC and MAC formats allowing 3 and 4 letters after the dot. JPEG is an acronym for Joint
Photographic Experts Group, the organization that invented the format. The format is unique
in that it uses compression after it's been created. That's fancy computer talk that means that
when the computer is not using a .jpeg image it folds it up and puts it away. For example, if
the picture is 10K bytes when displayed, it may be only 4K bytes when stored. Nice trick, huh?
It saves on hard drive space, but also tends to require a bit of memory on your part to unfold
the image. Someone always writes to me to tell me that .gif images also use compression.
Yes, they do, but only when they are first created into that format. After that, no compression.
JPEG, on the other hand, uses compression throughout its life to fold up smaller than it really
is.
by: Haroon Akhtar
25
.bmp
.bmp (pronounced "bimp") This is a "bitmap." You will probably never place a bitmap as an
image, although now Internet Explorer browsers allow it. A bitmap is an image that a
computer
produces
and
places
for
you.
A
counter
is
an
example.
Even though Internet Explorer will allow you to place an image as a BMP, I wouldn't. No other
browsers will be able to display it. Go with .gif or JPEG.
HTML Backgrounds
Backgrounds
The <body> tag has two attributes where you can specify backgrounds. The background can
be a color or an image.
Bgcolor
This attribute specifies a background-color for an HTML page. The value of this attribute can
be a hexadecimal number, an RGB value, or a color name:
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
The lines above all set the background-color to black.
Background
The background attribute specifies a background-image for an HTML page. The value of this
attribute is 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.
<body background="clouds.gif">
<body background="http://www.abc.com/clouds.gif">
The URL can be relative (as in the first line above) or absolute (as in the second line above).
HTML Colors
Color Values
Colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue
color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The
highest value is 255 (hex #FF).
by: Haroon Akhtar
26
by: Haroon Akhtar
27
RGB Values
RGB stands for Red, Green, Blue. Each can have a value from 0 (none of that color) to 255
(fully that color). The format for RGB is - rgb(RED, GREEN, BLUE), just like the name implies.
We do not recommend that you use RGB for safe web design because non-IE browsers do not
support HTML RGB. However, if you plan on learning CSS then you should glance over this
topic.
bgcolor="rgb(255,255,255)" White
bgcolor="rgb(255,0,0)" Red
bgcolor="rgb(0,255,0)" Green
bgcolor="rgb(0,0,255)" Blue
bgcolor="rgb(0,0,0)" Black
Hexadecimal
Hexadecimals are far more reliable and widely compatible among web browsers and are the
standard for colors on the internet.
A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red
value, the next two are a green value(GG), and the last are the blue value(BB).
Hex numbers use 16 digits:
0123456789ABCDEF
Zero, "0", is the smallest representations of a color. It's almost the total absence of color. F is
15 times the intensity of the color of 0. Combinations of these digits create different shades of
a particular color. Double Zero, "00," is equal to zero hue. FF is equal to a pure color.
This color representation is done three times, once for red, once for green, and once for blue,
in that order. Put the three, two-digit, codes together and you get a 6-digit hex code. The hex
code is just a representation of the red, green, and blue intensity, in that order. The computer
creates the three intensities, mashes them together, and you get a single shade of color.
Color Names
Colors can be defined using color names also.
The 16 Basic Colors:
Black
Gray
Silver
White
Yellow
Lime
Aqua
Fuchsia
Red
Green
Blue
Purple
Maroon
Olive
Navy
Teal
by: Haroon Akhtar
28
HTML Color Values

Color Values
HTML colors are defined using a hexadecimal notation for the combination of Red, Green, and
Blue color values (RGB). The lowest value that can be given to one of the light sources is 0
(hex #00). The highest value is 255 (hex #FF).
by: Haroon Akhtar
29
HTML Color Names

HTML Color Names
The table below provides a list of color names.
by: Haroon Akhtar
30
HTML 4.01 Quick List

HTML Basic Document <HTML>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</HTML>
Heading Elements <h1>Largest Heading</h1>

<h2>
<h3>
<h4>
<h5> . . . </h5>
.
.
.
.
.
.
.
.
.
</h2>
</h3>
</h4>
<h6>Smallest Heading</h6>
Text Elements <p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>
Logical Styles <em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
Physical Styles <b>This text is bold</b>
<i>This text is italic</i>
Links, Anchors, and Image Elements <a href="http://www.abc.com/">This is a
Link</a>
<a href="http://www.abc.com/"><img src="URL" alt="Alternate Text"></a>
<a href="mailto:webmaster@abc.com">Send e-mail</a>
A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>
Unordered list <ul>
<li>First item</li>
<li>Next item</li>
</ul>
Ordered list<ol>
<li>First item</li>
by: Haroon Akhtar
31
<li>Next item</li>
</ol>
Definition list <dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
Tables
<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
Frames
<frameset cols="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
Forms
<form action="http://www.abc.com/test.asp" method="post/get">
<input type="text" name="lastname" value="Nixon" size="30"
maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
by: Haroon Akhtar
32
<textarea name="Comment" rows="60" cols="20"></textarea>
</form>
Entities < is the same as <
> is the same as >
© is the same as
Other Elements

<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>
HTML Layout
HTML Layout - Using Tables
One very common practice with HTML, is to use HTML tables to format the layout of an HTML
page. An HTML <table> is used to divide a part of this Web page into two columns. The trick
is to use a table without borders, and maybe a little extra cell-padding. No matter how much
text you add to the page, it will stay inside its column borders.
<table width="10%" cellpadding="10">

<tr>
<td>
Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1
Content1 Content1 Content1
</td>
<td>
</td>
</tr>
</table>
O/P:
Content1
Content1
Content2
Content2

Content1
Content2
by: Haroon Akhtar
33
Same Layout - Color Added
<table width="10%" cellpadding="10">
<tr>
<td>
</td>
<td bgcolor="yellow">
</td>
</tr>
</table>
O/P:
Content1
Content1
Content2
Content2

Content1
Content2
HTML Fonts
The <font> tag is used to add style, size, and color to the text on your site. Use the
size, color, and face attributes to customize your fonts. Use a <basefont> tag to set
all of your text to the same size, face, and color.
The <font> tag in HTML is deprecated. It is supposed to be removed in a future
version of HTML.
Even if a lot of people are using it, you should try to avoid it, and use styles instead.
The HTML <font> Tag

This tag is used to add style, size, and color to the text on your site. Use the color, size, and
face attributes to customize your fonts. Use a <basefont> tag to set all of your text to the
same size, face, and color.
<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>
<p>
<font size="4" face="Times" color="Red">
This is another paragraph.
</font>
</p>
O/P:
This is a paragraph.
This is another paragraph.
by: Haroon Akhtar
34
Font Attributes
Attribute
Example
Purpose
size="number"
size="2"
Defines the font size
size="+number"
size="+1"
Increases the font size
size="-number"
size="-1"
Decreases the font size
face="face-name"
face="Times"
Defines the font-name
color="color-value"
color="#eeff00"
Defines the font color
color="color-name"
color="red"
Defines the font color
Why use HTML 4.0 ?

HTML 3.2 Was Very Wrong !
The original HTML was never designed to contain tags for formatting a document. HTML tags
were
intended
to
define
the
content
of
the
document
like:
<p>This is a paragraph</p>
<h1>This is a heading</h1>
When color attributes and tags like <font> were added to the HTML 3.2 specification, it
started a nightmare for web developers. Development of large web sites where fonts and color
information had to be added to every single Web page, became a long, expensive and difficult
process.
Great About HTML 4.0 ?

All formatting can be removed from the HTML document and stored in a separate style
sheet in HTML 4.0 .
Because it separates the presentation from the document structure in HTML 4.0, we have what
we always needed: Total control of presentation layout without messing up the document
content.
What Should You do About it ?

Do not use presentation attributes inside your HTML tags if you can avoid it. Start using
styles!
Do not use deprecated tags.
by: Haroon Akhtar
35
Prepare Yourself for XHTML
XHTML is the "new" HTML. Start writing valid HTML 4.01. Also start writing your tags in lower
case. Always close your tag elements. Never end a paragraph without </p>.
The official HTML 4.01 recommends the use of lower case tags.
HTML Styles
All formatting can be moved out of the HTML document and into a separate
style sheet with HTML 4.0.
How to Use Styles

When a browser reads a style sheet, it will format the document according to it.
There are three ways of inserting a style sheet:
External Style Sheet

When the style is applied to many pages an external style sheet is ideal. Using an external
style sheet, you can change the look of an entire Web site by changing one file. Each page
must link to the style sheet using the <link> tag. The <link> tag goes inside the head
section.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Internal Style Sheet

When a single document has a unique style an internal style sheet should be used. You define
internal styles in the head section with the <style> tag.
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
Inline Styles
When a unique style is to be applied to a single occurrence of an element an inline style
should be used.
To use inline styles, use the style attribute in the relevant tag. The style attribute can contain
any CSS property. The example shows how to change the color and the left margin of a
paragraph:
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
by: Haroon Akhtar
36
Style Tags
Tag
Description
<style>
Defines a style definition
<link>
Defines a resource reference
<div>
Defines a section in a document
<span>
Defines a section in a document
<font>
Deprecated. Use styles instead
<basefont>
<center>
HTML Head
Within <HTML>, the document has two sections to it: <HEAD> and <BODY
...>.
<HEAD> is like the cover page of the document.
Just as the cover page of a book contains information about the book (such
as the title), the <HEAD> section contains information about the document.
This information is communicated through the <TITLE> tag (which is
required) and the <LINK ...> and <META ...> tags.
The title information inside a head element is not displayed in the browser
window.
Information Inside the Head Element

The head element contains general information, also called meta-information, about a
document. Meta means "information about".
The elements inside the head element should not be displayed by a browser.
According to the HTML standard, only a few tags are legal inside the head section.
These are: <base>, <link>, <meta>, <title>, <style>, and <script>.
<head>
<title>My page title</title>
</head>
by: Haroon Akhtar
37
Head Tags
Tag
Description
<head>
Defines information about the document
<title>
Defines the document title
<base>
Defines a base URL for all the links on a page
<link>
Defines a resource reference
<meta>
Defines meta information
Tag
Description
<!DOCTYPE>
Defines the document type. This tag goes before the <HTML> start
tag.
HTML Meta
The purpose of the meta element is to provide meta-information about the
document.
Meta tags are used to supply information for search engines that will not be
seen by the web surfer unless they were to view your web site's HTML.
In the past, meta tags were a primary way for the site to be recognized by
web spiders, but the internet community abused the meta tags to artificially
increase their ranking in the search engine databases.
Keywords for Search Engines

To index your pages some search engines on the WWW will use the name and content
attributes of the meta tag.
This meta element defines a description of your page:

<meta name="description" content="Web contents on HTML, CSS, XML, and XHTML">
This meta element defines keywords for your page:

<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
The intention of the name and content attributes is to describe the content of a page.
However, some search engines have stopped using them entirely, since too many webmasters
have used meta tags for spamming, like repeating keywords to give pages a higher ranking.
Unknown Meta Attributes

Sometimes you will see meta attributes that are unknown to you like this:
<meta name="security" content="low" >
Then you just have to accept that this is something unique to the site or to the author of the
site, and that it has probably no relevance to you.
by: Haroon Akhtar
38
HTML Uniform Resource Locators

The web got its spidery name from the plentiful connections between web
sites.
These connections are made using anchor tags to create links.
Text, Images, and Forms may be used to create these links.
HTML Links
In an HTML document when you click on a link, an underlying <a> tag points to a place (an
address) on the Web with an href attribute value like this: <a href="lastpage.htm">Last
Page</a>.
Hypertext Reference (href)

The href -Hypertext Reference- attribute defines reference that the link refers to. Basically this
is where the user will be taken if they wish to click this link.
Hypertext references can be Internal, Local, or Global.
Internal - Links to anchors on the current page

Local - Links to other pages within your domain
Global - Links to other domains outside of your site
Internal - href="#anchorname"
Local
- href="../pics/picturefile.jpg"
Global - href="http://www.abc.com/"
Uniform Resource Locators

Something called a Uniform Resource Locator (URL) is used to address a document (or other
data) on the World Wide Web. A full Web address like this:
http://www.abc.com/html/html-urls.asp follows these syntax rules:
scheme://host.domain:port/path/filename
The scheme is defining the type of Internet service. The most common type is http.
The domain is defining the Internet domain name like abc.com.
The host is defining the domain host. If omitted, the default host for http is www.
The :port is defining the port number at the host. The port number is normally omitted. The
default port number for http is 80.
The path is defining a path (a sub directory) at the server. If the path is omitted, the
resource (the document) must be located at the root directory of the Web site.
The filename is defining the name of a document. The default filename might be default.asp,
or index.HTML or something else depending on the settings of the Web server.
by: Haroon Akhtar
39
URL Schemes
Some examples of the most common schemes can be found below:
Schemes
Access
file
a file on your local PC
ftp
a file on an FTP server
http
a file on a World Wide Web Server
gopher
a file on a Gopher server
news
a Usenet newsgroup
telnet
a Telnet connection
WAIS
a file on a WAIS server
Accessing a Newsgroup
The following HTML code:
<a href="news:alt.HTML">HTML Newsgroup</a>
creates a link to a newsgroup like this HTML Newsgroup. HTML Newsgroup
Link to your Mail system

The following HTML code:
<a href="mailto:someone@abc.com">someone@abc.com</a>
creates a link to your own mail system like this:
someone@academictutorials.com
HTML Scripts
HTML Scripts
There are two popular scripts that are commonly used in HTML to make web pages come
alive. HTML javascript and HTML vbscript With HTML scripts you can create dynamic web
pages, make image rollovers for really cool menu effects, or even validate your HTML form's
data before you let the user submit.
Insert a Script into HTML Page

A script in HTML is defined with the <script> tag. To specify the scripting language you will
have to use the type attribute.
<HTML>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
by: Haroon Akhtar
40
</body>
</HTML>
The script above will produce this output:
Hello World!
How to Handle Older Browsers

A browser that does not recognize the <script> tag at all, will display the <script> tag's
content as text on the page. To prevent the browser from doing this, you should hide the
script in comment tags. An old browser (that does not recognize the <script> tag) will ignore
the comment and it will not write the tag's content on the page, while a new browser will
understand that the script should be executed, even if it is surrounded by comment tags.
Example
JavaScript:
<!-document.write("Hello World!")
//-->
</script>
VBScript:
<script type="text/vbscript">
'-->
</script>
The <noscript> Tag

In addition to hiding the script inside a comment, you can also add a <noscript> tag.
The <noscript> tag is used to define an alternate text if a script is NOT executed. This tag is
used for browsers that recognize the <script> tag, but do not support the script inside, so
these browsers will display the text inside the <noscript> tag instead. However, if a browser
supports the script inside the <script> tag it will ignore the <noscript> tag.
JavaScript:
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>
VBScript:
<script type="text/vbscript">
'-->
by: Haroon Akhtar
41
</script>
<noscript>Your browser does not support VBScript!</noscript>
Script Tags
Tag
Description
<script>
Defines a script
<noscript>
Defines an alternate text if the script is not executed
<object>
Defines an embedded object
<param>
Defines run-time settings (parameters) for an object
<applet>
Deprecated. Use <object> instead
HTML 4.0 Standard Attributes

To amplify tags attributes are used. What we mean by amplify is that when
a web browser interprets a tag, it will also search for set attributes and then
display the element (tags+attributes) in its entirety.
At some point you may want to give your body element a background color
or perhaps change the width or of a table. All of these things and more can
be achieved using Attributes.
The attributes listed here are the core and language attributes that are standard for all tags
(with a few exceptions):
Core Attributes
Not valid in base, HTML, head, meta, param, script, style, and title elements.
Attribute
Value
Description
class
class_rule or style_rule
The class of the element
id
id_name
A unique id for the element
style
style_definition
An inline style definition
title
tooltip_text
A text to display in a tool tip
Language Attributes
Not valid in base, br, hr, frame, frameset, iframe, param, and script elements.
Attribute
Value
Description
dir
ltr | rtl
Sets the text direction
by: Haroon Akhtar
42
lang
Sets the language code
language_code
Keyboard Attributes
Attribute
Value
Description
accesskey
character
Sets a keyboard shortcut to access an

element
tabindex
number
Sets the tab order of an element
HTML 4.0 Event Attributes

New to HTML 4.0 is the ability to let HTML events trigger actions in the
browser, like starting a JavaScript when a user clicks on an HTML element.
Below is a list of attributes that can be inserted into HTML tags to define
event actions.
Window Events
Only valid in body and frameset elements.
Attribute
Value
Description
onload
script
Script to be run when a document loads
onunload
script
Script to be run when a document unloads
Form Element Events

Only valid in form elements.
Attribute
Value
Description
onchange
script
Script to be run when the element changes
onsubmit
script
Script to be run when the form is submitted
onreset
script
Script to be run when the form is reset
onselect
script
Script to be run when the element is selected
onblur
script
Script to be run when the element loses focus
onfocus
script
Script to be run when the element gets focus
Keyboard Events
Not valid in base, bdo, br, frame, frameset, head, HTML, iframe, meta, param, script, style,
and title elements.
by: Haroon Akhtar
43
Attribute
Value
Description
onkeydown
script
What to do when key is pressed
onkeypress
script
What to do when key is pressed and released
onkeyup
script
What to do when key is released
Mouse Events
Not valid in base, bdo, br, frame, frameset, head, HTML, iframe, meta, param, script, style,
title elements.
Attribute
Value
Description
onclick
script
What to do on a mouse click
ondblclick
script
What to do on a mouse double-click
onmousedown
script
What to do when mouse button is pressed
onmousemove
script
What to do when mouse pointer moves
onmouseout
script
What to do when mouse pointer moves out of an

element
onmouseover
script
What to do when mouse pointer moves over an

element
onmouseup
script
What to do when mouse button is released
HTML URL-encoding Reference

To display non-standard letters and characters in browsers and plug-ins
hexadecimal values can be used.
URL-encoding from %00 to %8f

ASCII
Value
URLencode
ASCII
Value
URLencode
ASCII
Value
URLencode
%00
%30
%60
%01
%31
%61
%02
%32
%62
%03
%33
%63
%04
%34
%64
%05
%35
%65
%06
%36
%66
%07
%37
%67
backspace
%08
%38
%68
tab
%09
%39
%69
linefeed
%0a
%3a
%6a
by: Haroon Akhtar
44
%0b
%3b
%6b
%0c
<
%3c
%6c
%0d
%3d
%6d
%0e
>
%3e
%6e
%0f
%3f
%6f
%10
%40
%70
%11
%41
%71
%12
%42
%72
%13
%43
%73
%14
%44
%74
%15
%45
%75
%16
%46
%76
%17
%47
%77
%18
%48
%78
%19
%49
%79
%1a
%4a
%7a
%1b
%4b
%7b
%1c
%4c
%7c
%1d
%4d
%7d
%1e
%4e
%7e
%1f
%4f
space
%20
%50
%21
%51
"
%22
%52
%82
%23
%53
%83
%24
%54
%84
%25
%55
%85
&
%26
%56
%86
'
%27
%57
%87
%28
%58
%88
%29
%59
%89
%2a
%5a
%8a
%2b
%5b
%8b
%2c
%5c
%8c
%2d
%5d
%2e
%5e
%2f
%5f
c return
%7f
%80
%81
%8d
%8e
%8f
by: Haroon Akhtar
45
URL-encoding from %90 to %ff
ASCII
Value
URLencode
ASCII
Value
URLencode
ASCII
Value
URLencode
%90
%c0
%f0
%91
%c1
%f1
%92
%c2
%f2
%93
%c3
%f3
%94
%c4
%f4
%95
%c5
%f5
%96
%c6
%f6
%97
%c7
%f7
%98
%c8
%f8
%99
%c9
%f9
%9a
%ca
%fa
%9b
%cb
%fb
%9c
%cc
%fc
%9d
%cd
%fd
%9e
%ce
%fe
%9f
%cf
%ff
%a0
%d0
%a1
%d1
%a2
%d2
%a3
%d3
%a4
%d4
%a5
%d5
%a6
%d6
%a7
%a8
%d8
%a9
%d9
%aa
%da
%ab
%db
%ac
%dc
%ad
%dd
%ae
%de
%af
%df
%b0
%e0
%b1
%e1
%b2
%e2
%b3
%e3
%d7
by: Haroon Akhtar
46
%b4
%e4
%b5
%e5
%b6
%e6
%b7
%e7
%b8
%e8
%b9
%e9
%ba
%ea
%bb
%eb
%bc
%ec
%bd
%ed
%be
%ee
%bf
%ef
Web Server
Your First Step: A Personal Web Server
You must publish your pages, if you want other people to view them.
You have to copy your files to a web server, to publish your work.
Your own PC can act as a web server if it is connected to a network.
You can use the PWS (Personal Web Server), if you are running Windows 98.
PWS is hiding in the PWS folder in your Windows CD.
Personal Web Server (PWS)

PWS turns any Windows computer into a Web server. PWS is easy to install and ideal for
developing and testing Web applications. PWS has been optimized for workstation use, but has
all the requirements of a full Web server. It also runs Active Server Pages (ASP) just like its
larger brother IIS.
How to Install a Personal Web Server (PWS):
To see if you have installed PWS browse your Windows installation.

If not, install PWS from the PWS directory on your Windows CD.
Follow the instructions and get your Personal Web Server up and running.
Note: Microsoft Windows XP Home Edition does not come with the option to turn your
computer into a PWS!
by: Haroon Akhtar
47
Internet Information Server (IIS)
Windows 2000's built-in Web server IIS, makes it easy to build large applications for the Web.
Both PWS and IIS include ASP, a server-side scripting standard that can be used to create
dynamic and interactive Web applications. IIS is also available for Windows NT.
Note: Microsoft Windows XP Home Edition does not come with the option to turn your
computer into a PWS!
HTML Summary
HTML Summary
HTML is the universal markup language for the Web. HTML lets you format text, add graphics,
create links, input forms, frames and tables, etc., and save it all in a text file that any browser
can read and display.
by: Haroon Akhtar

HTML

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML

Загружено:

Авторское право:

Доступные форматы

1

BS 502 Web Programming (05)

by: Haroon Akhtar

What is an HTML file

HTML documents are text files made up of HTML elements

Basic tags used in HTML

How to format text using HTML

Characters which have a special meaning in HTML

How to create and use links in an HTML document

Tables in an HTML document

HTML supports ordered, unordered and definition lists

HTML forms are used to select different kinds of user input

Displaying images in a document with HTML

Give a good background to make a Web site look great

How to use colors in HTML

HTML colors are defined using a hexadecimal notation

HTML quick list from Us

What is a layout in HTML

BS 502 Web Programming (05)

by: Haroon Akhtar

Why use HTML 4.0?

How to use styles

The head element in HTML

The meta element

HTML Uniform Resource Locators

HTML 4.0 standard attributes

HTML 4.0 event attributes

HTML URL-encoding reference

How to publish your work

BS 502 Web Programming (05)

by: Haroon Akhtar

What Is Markup Language

Creating an HTML document

The Most Common Mistake

BS 502 Web Programming (05)

by: Haroon Akhtar

Frequently Asked Questions

My page looks good on one browser, but not on another.

Does my computer have to run Windows? What about a Mac?

How do I know if my HTML is correct?

BS 502 Web Programming (05)

by: Haroon Akhtar

Syntactically HTML elements are constructed with:

a start tag marking the beginning of an element;

HTML tags are used to mark-up HTML elements

BS 502 Web Programming (05)

by: Haroon Akhtar

Why do We Use Lowercase Tags?

HTML Basic Tags

BS 502 Web Programming (05)

by: Haroon Akhtar

Text Formatting Tags

BS 502 Web Programming (05)

by: Haroon Akhtar

BS 502 Web Programming (05)

by: Haroon Akhtar

"Computer Output" Tags

HTML Character Entities

BS 502 Web Programming (05)

by: Haroon Akhtar

A Character Entity has three parts:

Each begins with an ampersand - &

An entity name or a # and an entity number

And finally a semicolon - ;