HTML Complete

Hyper Text Markup Language
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 Dreamweaver 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..
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.
PAGE STRUCTURE
All normal webpages consist of a head and a body.
Head
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:
<html>
<head>

</head>
<body>

</body>
</html>
HEAD SECTION
The head section of the webpage includes all the stuff that does not show directly on the
resulting page.
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 "Basic - Html" on top of the window containing this
text.
BODY SECTION
The body of the document contains all that can be seen when the user loads the page.
The <body> element defines the body of the HTML document.

The element has a start tag <body> and an end tag </body>.
The element content is another HTML element (a p element).
WHY LEARN HTML?

It is possible to create webpages 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 webdesign, 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").
HTML As Structured Language:

Html tags have a well defined sytax and Html document have a formal structure. Therefore
HTML is also serves as structured language.
HTML Webserver:
Your Windows PC as a Web Server

 If you want other people to view your pages, you must publish them.
 To publish your work, you must save your pages on a web server.
 Your own PC can act as a web server if you install IIS or PWS.
 IIS or PWS turns your computer into a web server.
 Microsoft IIS and PWS are free web server components.
IIS - Internet Information Server

IIS is a set of Internet-based services for servers created by Microsoft for use with Microsoft
Windows.
IIS comes with Windows 2000, XP, and Vista. It is also available for Windows NT.
IIS is easy to install and ideal for developing and testing web applications.
IIS includes Active Server Pages (ASP), a server-side scripting standard that can be used to
create dynamic and interactive web applications.
PWS - Personal Web Server

PWS is for older Windows system like Windows 95, 98, and NT.
PWS is easy to install and can be used for developing and testing web applications including
ASP.
Running PWS for anything is not recommended. It is outdated and has security issues.
Basic Elements of HTML:

HTML documents are defined by HTML elements.
HTML Elements
An HTML element is everything from the start tag to the end tag:
Start tag * Element content End tag *

<p> This is a paragraph </p>
<a href="default.htm" > This is a link </a>
<br />
* The start tag is often called the opening tag. The end tag is often called the closing tag.
HTML Element Syntax

 An HTML element starts with a start tag / opening tag
 An HTML element ends with an end tag / closing tag
 The element content is everything between the start and the end tag
 Some HTML elements have empty content
 Empty elements are closed in the start tag
 Most HTML elements can have attributes
Nested HTML Elements

Most HTML elements can be nested (can contain other HTML elements).
HTML documents consist of nested HTML elements.
HTML Document Example

<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
The example above contains 3 HTML elements
HTML Example Explained

The <p> element:
The <p> element defines a paragraph in the HTML document.

The element has a start tag <p> and an end tag </p>.
The element content is: This is my first paragraph.
The <body> element:
<body>
</body>
The <body> element defines the body of the HTML document.

The element has a start tag <body> and an end tag </body>.
The element content is another HTML element (a p element).
The <html> element:

<html>
<body>
</body>
</html>
The <html> element defines the whole HTML document.

The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).
Don't Forget the End Tag

Most browsers will display HTML correctly even if you forget the end tag:
<p>This is a paragraph
<p>This is a paragraph
The example above will work in most browsers, but don't rely on it. Forgetting the end tag can produce unexpected
results or errors.
Empty HTML Elements

HTML elements with no content are called empty elements. Empty elements can be closed in the start tag.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
In XHTML, XML, and future versions of HTML, all elements must be closed.
Headers
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.
<h1>This is a header 1 tag</h1>
This is a header 1 tag

Headers, as you notice, not only vary in size, they are also bold and have a blank line
inserted before and after them. It's important to use headers only for headings, not just to
make text bold.
Titles
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:
<title>My First HTML Document</title>
Remember, the title usually doesn't appear in the document itself, but in a title box or bar
at the top of the window.
Commonly Used
HTML Codes
Header tags
HTML Code Sample
<H1>Header 1</H1>
Header 1
<H2>Header 2</H2> Header 2
<H3>Header 3</H3>
Header 3
<H4>Header 4</H4>
Header 4
<H5>Header 5</H5>
Header 5
<H6>Header 6</H6>
Header 6
Text formatting tags

HTML Code Sample
<B>bold</B> bold
<U>underline</U> underline
<I>italic</I> italic
Alignment tags
HTML Code Sample
<P ALIGN=Left>your text your text
<P ALIGN=Center>your
your text
text
<P ALIGN=Right>your
your text
text
Ordered list (numbers)
HTML Code Sample
<OL> 1. First row
<LI>First row 2. Second row
<LI>Second row
</OL>
Unordered list (bullets)

HTML Code Sample
<UL>  First row
<LI>First row
 Second row
<LI>Second row
</UL>
Definition list
HTML Code Sample
<DL>
<DT>Term Term
<DD>Description Description
</DL>
Horizontal line tag

HTML Code Sample
<HR>
<HR SIZE=6
WIDTH=50%>
Break tags
HTML Code Description
<P> Paragraph break
<BR> Forced line break
Indentation tag
HTML Code Sample
Here is some text. <BR> Here is some text.
<BLOCKQUOTE>Here is Here is one line of indented
one line of indented text.
text.<BR> Here is another line of
Here is another line of indented text.
indented text.
</BLOCKQUOTE>
External link tags

HTML Code Sample
<A HREF="filename or
URL">description</A>
CNN
For example:
<A HREF="filename or
URL">CNN</A>
Internal link tag (anchor tag)

HTML Code Sample
<A NAME="anchor
name">Section name</A>
For example:
<A NAME="anchor
name">Introduction</A> Introduction
Internal link tag (link tag)

HTML Code Sample
<A HREF="#anchor
name">Destination</A>
For example:
<A HREF="#anchor
name">Introduction</A> Introduction
Graphic tags
HTML Code Sample
<IMG SRC="balloon.gif">
(By default, the graphic is left
aligned.)
<IMG SRC="balloon.gif"
Align=right>
<P ALIGN=Center>
<IMG SRC="balloon.gif">
<IMG
SRC="balloon.gif" Align=right
Vspace=20>
<IMG SRC="balloon.gif"
Align=left Hspace=30>
Text formats:
These are the tags for text formats:
<b>text</b> writes text as bold

<i>text</i> writes text in italics
<u>text</u> writes underlined text
<sub>text</sub> lowers text and makes it smaller
<sup>text</sup> lifts text and makes it smaller
<blink>text</blink> guess yourself! (Note: Netscape only.)
<strike>text</strike> strikes a line through the text
<tt>text</tt> writes text as on a classic typewriter
<pre>text</pre> writes text exactly as it is, including spaces.
<em>text</em> usually makes text italic
<strong>text<strong> usually makes text bold
Text Size
These are the tags for changing the font size.
<big>text</big> increase the size by one

<small>text</small> decrease the size by one
<h1> text</h1> writes text in biggest heading
<h6>text</h6> writes text in smallest heading

<font size="1">text</font> writes text in smallest fontsize. (8 pt)
<font size="7">
text </font>
writes text in biggest fontsize (36 pt)
Default font size is 3. The <small> and <big> tags are special in that they can be
repeated. If you want to increase the font size with a factor two, then you could do it
like this:
bla bla bla <big><big>whatever</big></big> bla bla bla

Text Layout
These tags will let you control the layout.
HTML EXPLANATION
<p>text</p>
Adds a paragraph break after the text.
(2 linebreaks).
<p align="left">text</p> Left justify text in paragraph.
<p align="center">text</p> Center text in paragraph.
<p align="right">text</p> Right justify text in paragraph.
text<br>
Adds a single linebreak where the tag
is.
Turns off automatic linebreaks
<nobr>text</nobr> - even if text is wider than the
window.
Allows the browser to insert a
text<wbr>
linebreak
at exactly this point
- even if the text is within <nobr> tags.
<center>text</center> Center text.
<div
align="center">text</div> Center text.
<div align="left">text</div> Left justify text.
<div align="right">text</div> Right justify text.
Example: the difference between layout tags:

HTML RESULT
Hello world -a Hello world- a linebreak does not
linebreak does not insert a linebreak in HTML
insert a linebreak in HTML
<p>you will need</p> you will need
<p align="right">to insert</p> to insert
<p align="left">special tags</p> special tags
that will insert<br> that will insert

linebreaks<br> linebreaks
where<br> where
you want it!<br> you want it!
<br>
Another method is of course to
write a sentence, that is long Another method is of course to
enough to force a linebreak.<br> write a sentence, that is long
<br> enough to force a linebreak.
.
<nobr>This option can however be
turned off<wbr>with the nobr This option can however be turned
tag,<wbr>unless a wbr is used to off
force it!</nobr>
with the nobr tag,
unless a wbr is used to force it!
<center>You can center</center>

And turn the center off You can also center
<div align="center">And on!</div> And turn the center off
<div align="left">Go left!</div> And on!
<div align="right">Go Right!</div> Go left!
Go right!
The <div> tag defines a division or a section in an HTML document. The <div>
tag is used to group block-elements to format them with styles.
Note in particular the difference between the <p> and the <div> tags. The <div> tag
allows you to justify content without being forced to add a double linebreak.
Also, note that these alignment tags are not limited to text. They work on text,
images, applets or whatever it is that you insert on the page.
HTML Links
How to Create Link in HTML Documents:
<html>
<body>
<p>
<a href="default.asp">HTML Tutorial</a> This is a link to a page on this website.
</p>
<p>
<a href="http://www.google.com/">Google</a> This is a link to a website on the World

Wide Web.
</p>
</body>
</html>
Output:
HTML Hyperlinks (Links)

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to
a new document or a new section within the current document.
When you move the cursor over a link in a Web page, the arrow will turn into a little
hand.
Links are specified in HTML using the <a> tag.
The <a> tag can be used in two ways:

1. To create a link to another document, by using the href attribute
2. To create a bookmark inside a document, by using the name attribute
HTML Link Syntax

The HTML code for a link is simple. It looks like this:
<a href="url">Link text</a>
The href attribute specifies the destination of a link.
Example
<a href="http://www.google.com/">Visit google</a>
which will display like this: www.google.com
HTML Links - The target Attribute

The target attribute specifies where to open the linked document.
The example below will open the linked document in a new browser window:
<a href="http://www.google.com/" target="_blank">Visit google!</a>
HTML Links - The name Attribute

The name attribute specifies the name of an anchor.
The name attribute is used to create a bookmark inside an HTML document.
Note:
The upcoming HTML5 standard suggest using the id attribute instead of the name
attribute for specifying the name of an anchor.
Using the id attribute actually works also for HTML4 in all modern browsers.
Bookmarks are not displayed in any special way. They are invisible to the reader.
Example
A named anchor inside an HTML document:
<a name="tips">Useful Tips Section</a>
Create a link to the "Useful Tips Section" inside the same document:
<a href="#tips">Visit the Useful Tips Section</a>
Or, create a link to the "Useful Tips Section" from another page:
<a href="http://www.googles.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
Images As Hyper Link:
<html>
<body>
<p>Create a link of an image:

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>
<p>No border around the image, but still a link:

<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32"
/>
</a></p>
</body>
</html>
Output:
HTML Lists
The most common HTML lists are ordered and unordered lists:
HTML Lists
An ordered list: An unordered list:
1. The first list item  List item

2. The second list item  List item
3. The third list item  List item
HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
How the HTML code above looks in a browser:
 Coffee
 Milk
HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
1. Coffee
2. Milk
HTML Definition Lists

A definition list is a list of items, with a description of each item.
The <dl> tag defines a definition list.
The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in
the list):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Coffee
- black hot drink
Milk
- white cold drink
Different Types of Ordered Lists:
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>

<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>

<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
Output of Above Program:

Numbered list:
1. Apples
2. Bananas
3. Lemons
4. Oranges
Letters list:
A. Apples
B. Bananas
C. Lemons
D. Oranges
Lowercase letters list:
a. Apples
b. Bananas
c. Lemons
d. Oranges
Roman numbers list:
I. Apples
II. Bananas
III. Lemons
IV. Oranges
Lowercase Roman numbers list:
i. Apples
ii. Bananas
iii. Lemons
iv. Oranges
Different Types of Unordered Lists:
<html>
<body>
<h4>Disc bullets list:</h4>

<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>

<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>

<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
Output of the Above Program:

Disc bullets list:
 Apples
 Bananas
 Lemons
 Oranges
Circle bullets list:
o Apples
o Bananas
o Lemons
o Oranges
Square bullets list:
 Apples
 Bananas
 Lemons
 Oranges
Images in HTML
HTML Images - The <img> Tag and the Src Attribute

In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no closing
tag.
To display an image on a page, you need to use the src attribute. Src stands for "source".
The value of the src attribute is the URL of the image you want to display.
Syntax for defining an image:
<img src="url" alt="some_text"/>
The URL points to the location where the image is stored. An image named "boat.gif",
located in the "images" directory on "www.website.com" has the URL:
http://www.website.com/images/boat.gif.
The browser displays the image where the <img> tag occurs in the document. If you put
an image tag between two paragraphs, the browser shows the first paragraph, then the
image, and then the second paragraph.
HTML Images - The Alt Attribute
The required alt attribute specifies an alternate text for an image, if the image cannot be
displayed.
The value of the alt attribute is an author-defined text:
<img src="boat.gif" alt="Big Boat" />
The alt attribute provides alternative information for an image if a user for some reason
cannot view it (because of slow connection, an error in the src attribute, or if the user uses
a screen reader).
HTML Images - Set Height and Width of an Image
The height and width attributes are used to specify the height and width of an image.
The attribute values are specified in pixels by default:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />
Tip: It is a good practice to specify both the height and width attributes for an image. If
these attributes are set, the space required for the image is reserved when the page is
loaded. However, without these attributes, the browser does not know the size of the
image. The effect will be that the page layout will change during loading (while the
images load).
Aligning the Images:

<html>
<body>
<p>An image
<img src="smiley.gif" alt="Smiley face" align="bottom" width="32" height="32"
/>
with align="bottom".</p>
<p>An image
<img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32"
/>
with align="middle".</p>
<p>An image
<img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32" />
with align="top".</p>
<p><b>Tip:</b> align="bottom" is default!</p>
<p><img src="smiley.gif" alt="Smiley face" width="32" height="32" />

An image before the text.</p>
<p>An image after the text.

<img src="smiley.gif" alt="Smiley face" width="32" height="32" /></p>
</body>
</html>
Floating the Images:

<html>
<body>
<p>
<img src="smiley.gif" alt="Smiley face" align="left" width="32" height="32" />
A paragraph with an image. The align attribute of the image is set to "left". The
image will float to the left of this text.
</p>
<p>
<img src="smiley.gif" alt="Smiley face" align="right" width="32" height="32" />
A paragraph with an image. The align attribute of the image is set to "right". The
image will float to the right of this text.
</p>
</body>
</html>
Mark Hyper Link of Image:

<html>
<body>
<p>Create a link of an image:

<img src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>
<p>No border around the image, but still a link:

<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32"
/>
</a></p>
</body>
</html>
HTML 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). td stands for "table data," and holds the content of a data cell. A <td>
tag can contain text, links, images, lists, forms, other tables, etc.
Table Example
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
row 1, cell 1 row 1, cell 2

HTML Tables and the Border Attribute

If you do not specify a border attribute, the table will be displayed without borders.
Sometimes this can be useful, but most of the time, we want the borders to show.
To display a table with borders, specify the border attribute:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML Table Headers
Header information in a table are defined with the <th> tag.
All major browsers will display the text in the <th> element as bold and centered.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
How the HTML code above looks in your browser:
Header 1 Header 2
Table with no Borders:

<html>
<body>
<h4>This table has no borders:</h4>

<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>And this table has no borders:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Output:
Table Header:
<html>
<body>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Table Cells that spans more than one row:

<html>
<body>
<h4>Cell that spans two columns:</h4>

<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>

<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
The Frame Attribute of Tables:
<html>
<body>
<p>
<b>Note:</b>
If you see no frames/borders around the tables below, your browser does not support
the "frame" attribute.
</p>
<h4>With frame="border":</h4>
<table frame="border">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="box":</h4>
<table frame="box">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="void":</h4>
<table frame="void">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="above":</h4>
<table frame="above">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="below":</h4>
<table frame="below">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="hsides":</h4>
<table frame="hsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="vsides":</h4>
<table frame="vsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="lhs":</h4>
<table frame="lhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="rhs":</h4>
<table frame="rhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Output:
Frames
Frames can divide the screen into separate windows.
Each of these windows can contain an HTML document.

A file that specifies how the screen is divided into frames is called a frameset.
If you want to make a homepage that uses frames you should:
 make an HTML document with the frameset
 make the normal HTML documents that should be loaded into each of these
frames.
When a frameset page is loaded, the browser automatically loads each of the pages
associated with the frames.
BASIC EXAMPLE
A frameset is simply an HTML document that tells the browser how to divide the screen into
split windows.
The HTML for the above frameset:

<html>
<head>
<title>My Frames Page</title>
</head>
<frameset cols="120,*">
<frame src="menupage.htm" name="menu">
<frameset rows="*,50">
<frame src="welcomepage.htm" name="main">
<frame src="bottombanner.htm" name="bottom">
</frameset>
</frameset>
</html>
Note that the frameset is only seven lines!

Let's split it all up and add the lines one by one...
CREATING A FRAMESET
As stated on the previous page, a frameset is simply an HTML document that tells the
browser how to divide the screen into split windows.
If the frameset looked like this:
The code would be:

<frameset cols="120,*">
</frameset>
DEFAULT PAGES
You can add default pages to frame windows with the src setting.
Default pages are the pages that will be loaded when the frameset is opened the
first time.
Furthermore, we can add names to each frame window using the name setting.
This will allow us to make a link in one frame window, open a page in another frame
window.
In this example we added names and default pages to the frame windows:
<frameset cols="120,*" >
<frame src="menu.htm" name="menu" >
<frame src="frontf.htm" name="main" >
</frameset>
The entire frameset will look like this:
m main
e
n
u
We still have the screen divided in two columns, the left being 120 pixels the right
using the rest of the screen. (some screens are set to 640 pixels across, some to
800 and some to 1024, thats why the * is needed).
But now we also have told the browser that the left frame window should load an
HTML page called menu.htm and that the right window should load an HTML
document called frontf.htm .
In addition we have assigned the names menu and main to the two frame windows,
so now we're even able to link to specific windows.
I called the frame windows menu and main, but you could name them whatever
you pleased.
The frameset with a menu window to the left and a main window to the right is the
most common frameset seen on the web.
There are a few more settings we could add to the frameset.

For instance you might want the frame borders to be invisible.
BORDERS
To make frame borders invisible you simply need to add the parameters "cols-line"
to the frameset :
<frameset cols="120,*" frameborder="0" border="0"

framespacing="0">
<frame src="menu.htm" name="menu" >
<frame src="frontf.htm" name="main" >
</frameset>
The entire frameset would now look like this:
m main
e
n
u
RESIZEABLE WINDOWS
If you don’t want the frame windows to be resizeable, you should add the parameter
"noresize" to the frame src lines:

framespacing="0">
<frame src="menu.htm" name="menu" noresize>
<frame src="frontf.htm" name="main" noresize>
</frameset>
SCROLLBARS
Let’s say you don’t want a scroll bar in the menu window.
Furthermore the main window should have a scrollbar if needed (if the HTML
document doesn’t fit in the window), but if not needed - there should be no
scrollbars.
Then the code should look like this:

framespacing="0">
<frame src="menu.htm" name="menu" noresize scrolling=no>
<frame src="frontf.htm" name="main" noresize scrolling=auto>
</frameset>
If you leave out the setting for scrolling, a scrollbar will appear if needed - otherwise
not.
LINKS WITHIN
If you have an HTML document with a hyperlink on the text "Analysis" for instance,
that links to a page called "analysis.htm" then it appears in the document as:
Jump to the <a href="analysis.htm">Analysis</a> of the

project
Now if the link was in the menu window of our example, and we wanted it to load a
page in the main window, the HTML code would be:
Jump to the <a href="analysis.htm" target="main">Analysis</a>

of the project
We simply added the parameter target="main" to the <a href> tag.

Now the link will be opened in the main frame window instead of the menu frame
window where the link itself is located.
Four target names are reserved, and will be interpreted by the browser in this way:
 _blank loads the page into a new browser window
 _self loads the page into the current window.
 _parent loads the page into the frame that is superior to the frame the
hyperlink is in.
 _top cancels all frames, loads in full browser window.
EXAMPLES
top
bottom
<frameset rows="16%,84%">
<frame src="top.htm" name="top">
<frame src="bottom.htm" name="bottom">
</frameset>
tl tr
bottom
<frameset cols="50%,50%">
<frame src="tl.htm" name="tl">
<frame src="tr.htm" name="tr">
</frameset>
<frame src="bottom.htm" name="bottom">
</frameset>
top
left right
<frame src="top.htm" name="top">
<frame src="left.htm" name="left">
<frame src="right.htm" name="right">
</frameset>
</frameset>
topleft topright
botleft botright
<frameset rows="50%,50%" cols="50%,50%">

<frame src="topleft.htm" name="topleft">
<frame src="topright.htm" name="topright">
<frame src="botleft.htm" name="botleft">
<frame src="botright.htm" name="botright">
</frameset>
topleft topright
brtl brtr
botleft botrbot
<frameset rows="50%,50%" cols="50%,50%">

<frame src="brtl.htm" name="brtl">
<frame src="brtr.htm" name="brtr">
</frameset>
<frame src="botrbot.htm" name="botrbot">
</frameset>
</frameset>
topleft topright
botleft botright
<frameset rows="240,240" cols="320,320">

</frameset>
topleft topright
botleft botright
<frameset rows="50%,*" cols="320,*">

</frameset>
Cascade Style Script
Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation semantics (the look and formatting) of a document written in a markup
language. It’s most common application is to style web pages written in HTML and
XHTML.
 CSS stands for Cascading Style Sheets
 Styles define how to display HTML elements
 Styles were added to HTML 4.0 to solve a problem
 External Style Sheets can save a lot of work
 External Style Sheets are stored in CSS files
Why Using Styles
HTML was never intended to contain tags for formatting a document. HTML was
intended to define the content of a document, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes 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 were added to every single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS. In HTML
4.0, all formatting could be removed from the HTML document, and stored in a separate
CSS file. All browsers support CSS today.
CSS Saves a Lot of Work!
CSS defines HOW HTML elements are to be displayed. Styles are normally saved in
external .css files. External style sheets enable you to change the appearance and layout
of all the pages in a Web site, just by editing one single file!
CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
The selector is normally the HTML element you want to style. Each declaration consists
of a property and a value. The property is the style attribute you want to change. Each
property has a value. CSS declarations always end with a semicolon, and declaration
groups are surrounded by curly brackets:
p { color:red; text-align:center; }
To make the CSS more readable, you can put one declaration on each line, like this:
<html>
<head>
<style type="text/css">
p
{ color:red;
text-align:center; }
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>
Output:
Example 1:
The HTML file below links to an external style sheet with the <link> tag:
<html>
<head>
<link rel="stylesheet" type="text/css" href="ex1.css" />
</head>
<body>
<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html>
This is the style sheet file (ex1.css):
body
{ background-color:yellow; }
h1
{ font-size:36pt; }
h2
{ color:blue; }
p
{ margin-left:50px; }
Output:
Example 2:
The HTML file below links to an external style sheet with the <link> tag:
<html>
<head>
<link rel="stylesheet" type="text/css"
href="ex2.css" />
</head>
<body>
<h1>This is a header 1</h1>
<hr />
<p>You can see that the style sheet formats the text</p>
<p><a href="http://www.w3schools.com" target="_blank">This is a
link</a></p>
</body>
</html>
This is the style sheet file (ex2.css):
body {background-color:tan;}
h1 {color:maroon;font-size:20pt;}
hr {color:navy;}
p {font-size:11pt;margin-left:15px;}
a:link {color:green;}
a:visited {color:yellow;}
a:hover {color:black;}
a:active {color:blue;}
The result is in the frame below:
CSS Id and Class

Selectors
In addition to setting a style for a HTML element, CSS allows you to specify your own
selectors called "id" and "class".
The id Selector
The id selector is used to specify a style for a single, unique element. The id selector uses
the id attribute of the HTML element, and is defined with ”#"(id). The style rule below
will be applied to the element with id="para1":
Coding Example:
<html>
<head>
#para1
{ text-align:center; color:red; }
</style>
</head>
<body>
<p id="para1">Hello World! </p>
<p>This paragraph is not affected by the style. </p>
</body>
</html>
Output:
The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id
selector, the class selector is most often used on several elements. This allows you to set
a particular style for many HTML elements with the same class. The class selector uses
the HTML class attribute, and is defined with a "." In the example below, all HTML
elements with class="center" will be center-aligned:
Coding Example:
<html>
<head>
.center
{ text-align:center; }
</style>
</head>
Output:
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>
Three Ways to Use CSS (Types)

Recall, the Style Declaration is at the heart of CSS. Now we will take a look at the three
different ways to use a Style, or 3 types of Styles we can create.
1. Internal / Embedded Styles

Internal Styles are placed inside the <head> section of a particular web page (we use the
style builder to accomplish this.) These Styles can be re-used only for the web page in
which they are embedded. Therefore, you would need to create these styles over and
over again for each web page you wish to style.
When using the style builder, define the style in the Current Page. This will create an
Internal Style. But, Internal Styles are not ideal. An External Style Sheet would be a
better choice.
Advanced Use of Internal Styles - taking advantage of the cascade may require the use of
internal styles. however, the main styles are best if placed on an external style sheets.
The <style> tag is used to write an Internal Style. Here's an Example:
2. Inline Styles
Inline Styles cannot be reused at all, period. Inline styles are placed directly inside an
HTML element in the code. We cannot use the Style Builder to make an Inline Style.
Instead, to purposely create an inline style requires you to go into the HTML code and
type the style yourself.
Note: Inline Styles do not have a Selector. Why not? The reason is because an inline
style is embedded directly inside the html element it styles. Therefore, there's no need for
a selector.
Quite frankly, Inline styles defeat the purpose of using CSS and negate most, if not all of
CSS's advantages, like the separation of content from presentation. Therefore, the use of
Inline Styles should be kept to an absolute minimum. Use Inline Styles only as a last
resort. One example of when using an inline style is useful: Let's say you want to over-
ride a style that's on your external style sheet. Using an inline style is one way to
accomplish this. Example of an Inline Style:
<p style="font-size: 14px; color: purple ;"> TEXT </p>
The style is embedded inside the HTML element using the style attribute. The above
style cannot be reused at all. It will only target that one paragraph. In order to style more
paragraphs with an inline style, you'd have to make one inline style per paragraph. That's
not efficient at all. And makes a mess of your code and certainly adds to the amount of
mark-up in your page.
3. External Style Sheet
For the most part, we will want to place the majority of our Style Rules on an External
Style Sheet. This will allow us to reuse the styles as many times as we would like
simply by linking the External Style Sheet to other web pages. It also means we only
have to create the Styles one time! An External Style Sheet is a separate page which is
then linked to the web page. Therefore, the styles are External to, or outside of, the Web
Page.
How to Create an External Style Sheet:

The External Style Sheet is basically a Text File that is Saved As a .css file. It is simply a
separate page from our html pages. We must Link the External Style Sheet to the Web
Page(s) in order for the External Styles to be applied as specified.
<link href="main.css" rel="stylesheet" type="text/css" >
HTML Forms and Input Tag
HTML Forms
HTML forms are used to pass data to a server. A form can contain input elements like
text fields, checkboxes, radio-buttons, submit buttons and more. The <form> tag is used
to create an HTML form:
<form>
.
input elements
.
</form>
HTML Forms – The Input Element (TAG)

The most important form element is the input element. The input element is used to select
user information. An input element can vary in many ways, depending on the type
attribute. An input element can be of the following types
1. text
2. password
3. radio
4. checkbox
5. submit
6. button
7. file
8. hidden
9. image
10. reset
Some of the most used input types are described below.
1. Text Fields
<input type="text" /> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
Note: The default width (size) of a text field is 20 characters.
2. Password Fields
<<input type="password" /> defines a password field:
<form>
Password: <input type="password" name="pwd" />
</form>
Note: The characters in a password field are masked (shown as asterisks or circles).
3. Radio Buttons
<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY
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>
4. Checkboxes
<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or
MORE options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
5. Submit Button
<input type="submit" /> defines a submit button. A submit button is used to send form
data to a server. The data is sent to the page specified in the form's action attribute. The
file defined in the action attribute usually does something with the received input:
<form name="input" action="html_form_action.asp" method="get">

Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

HTML Complete

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Complete

Uploaded by

Copyright:

Available Formats

Hyper Text Markup Language

Webpages are written in HTML - a simple scripting language.

 Markup Language is a way of writing layout information within documents.

HTML file extensions and the source document

The <body> element defines the body of the HTML document.

WHY LEARN HTML?

However, if you want to make it above average in webdesign, it is strongly recommended

The most important benefits are:

HTML As Structured Language:

Your Windows PC as a Web Server

IIS - Internet Information Server

PWS - Personal Web Server

Basic Elements of HTML:

Start tag * Element content End tag *

HTML Element Syntax

Nested HTML Elements

HTML documents consist of nested HTML elements.

HTML Document Example

The example above contains 3 HTML elements

HTML Example Explained

<p>This is my first paragraph.</p>

The <p> element defines a paragraph in the HTML document.

The <body> element:

The <body> element defines the body of the HTML document.

The <html> element:

The <html> element defines the whole HTML document.

Don't Forget the End Tag

Empty HTML Elements

This is a header 1 tag

<h2>This is a header 2 tag</h2>

This is a header 2 tag

<h3>This is a header 3 tag</h3>

This is a header 3 tag

This is a header 4 tag

<h5>This is a header 5 tag</h5>

This is a header 5 tag

<h6>This is a header 6 tag</h6>

This is a header 6 tag

Text formatting tags

Unordered list (bullets)

Horizontal line tag

External link tags

Internal link tag (anchor tag)

Internal link tag (link tag)

<b>text</b> writes text as bold

<big>text</big> increase the size by one

<h1> text</h1> writes text in biggest heading

<h6>text</h6> writes text in smallest heading

bla bla bla <big><big>whatever</big></big> bla bla bla

Example: the difference between layout tags:

<p>you will need</p> you will need

<p align="right">to insert</p> to insert

<p align="left">special tags</p> special tags

that will insert<br> that will insert

unless a wbr is used to force it!

<center>You can center</center>

<a href="default.asp">HTML Tutorial</a> This is a link to a page on this website.

<a href="http://www.google.com/">Google</a> This is a link to a website on the World

HTML Hyperlinks (Links)

Links are specified in HTML using the <a> tag.

The <a> tag can be used in two ways:

HTML Link Syntax

<a href="url">Link text</a>