CREATING A HTML WEBPAGE

a. Create an HTML file.

An HTML file is simply a text file saved with an .html or .htm extension (i.e. as opposed to a
.txt extension).
1. Open up your computer's normal plain text editor (this will probably be Notepad if
you're using Windows or TextEdit if you're using a Mac). You could use a specialized HTML
editor such as DreamWeaver or FrontPage if you prefer.
2. Create a new file (if one wasn't already created)
3. Save the file as html_tutorial_example.html
b.Type some HTML code.
Type the following code:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd" >
< html >
< head >
< title > HTML Tutorial Example </title >
</ head >
< body >
< p > Less than 5 minutes into this HTML tutorial and I've already created my first
homepage! </p >
</ body >
</ html >
c. View the result in your browser.
HTML ELEMENTS:
HTML elements are the fundamentals of HTML. HTML documents are simply a text file
made
up of HTML elements. These elements are defined using HTML tags. HTML tags tell your
browser which elements to present and how to present them. Where the element appears is
determined by the order in which the tags appear.
lets look more closely at the following example.
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN”
"http://www.w3.org/TR/html4/strict.dtd" >
< html >
< head >
< title > HTML Tutorial Example </title >
</ head >
< body >
< p > Less than 5 minutes into this HTML tutorial and I've already created my first
homepage!
</ body >
</ html >
Explanation of the above code:
● The < !DOCTYPE... > element tells the browser which version of HTML the
document is using.
● The < html> element can be thought of as a container that all other tags sit
inside (except for the !DOCTYPE tag).
 ● The < head > tag contains information that is not normally viewable within your
browser (such as meta tags, JavaScript and CSS), although the < title > tag is
an exception to this. The content of the < title > tag is displayed in the
browser's title bar (right at the very top of the browser).
● The < body > tag is the main area for your content. This is where most of your
code (and viewable elements) will go.
● The < p > tag declares a paragraph. This contains the body text.
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
HTML ATTRIBUTES:
● HTML elements can have attributes
● Attributes provide additional information about an element
● Attributes are always specified in the start tag
● Attributes come in name/value pairs like: name="value"
Example
Consider this example:
< body style="background-color:orange">
HTML HEADINGS:
There is a special tag for specifying headings in HTML. There are 6 levels of headings in
HTML ranging from h1 for the most important, to h6 for the least important.
Typing this code:
< h1 > Heading 1 < /h1 >
< h2 > Heading 1 < /h2 >
HTML LINES:
The < hr / > tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:
Example
< pThis is a paragraph </p >
< hr / >
< pThis is a paragraph </p >
< hr / >
< pThis is a paragraph </p >

HTML PARAGRAPHS:
Paragraphs are defined with the < p >tag.
Example:
< p >This is a paragraph < /p >
HTML Line Breaks
Use the < br / > tag if you want a line break (a new line) without starting a new
paragraph:
Example
< p > This is < br / > a para < br / >graph with line breaks < /p >
HTML COLORS:
 In HTML, colors can be added by using the style attribute. You can specify a color name
(eg,
blue), a hexadecimal value (eg, #0000ff), or an RGB value(egrgb(0,0,255)).Syntax
Foreground Color
To add color to an HTML element, you use style="color:{color}", where {color} is the color
value. For example:
< h3 style="color:blue" >HTML Colors < /h3 >
Background Color
To add a colored border to an HTML element, you use style="border: {width} {color}
{style}", where {width} is the width of the border, {color} is the color of the border, and
{style} is the style of the border. For example:
< h3 style="border:1px blue solid;" > HTML Colors < /h3 >
Using Hexadecimal Value for Color

The most common methods for specifying colors are by using the color name or the
hexadecimal value. Although color names are easier to remember, the hexadecimal values
and RGB values provide you with more color options.
Hexadecimal values are a combination of letters and numbers. The numbers go from 0 - 9
and the letters go from A to F. When using hexadecimal color values in your HTML/CSS, you
proceed the value with a hash (#). Different range of hexadecimal values for color you can
get from your Photoshop tools, you don't have to memorize the color code.
You can make up your own colors by simply entering any six digit hexadecimal value
(preceded by a hash). Check the following example , the only difference is that, instead of
using "blue" as the value, we're using its hexadecimal equivalent (which is #0000ff):
< h3 style="color:#0000ff" >HTML Colors < /h3 >
HTML LINKS:
Links are found in nearly all Web pages. Links allow users to click their way from page to
page.
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 tag.
The < a > tag can be used in two ways:
To create a link to another document, by using the href attribute
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.ejobindia.com/" > Visit ejobindia < /a >
Clicking on this hyperlink will send the user to ejobindia' homepage.
Tip: The "Link text" doesn't have to be text. You can link from an image or any other HTML
element.
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:
 Example
< a href="http://www.ejobindia.com/" target="_blank" > Visit ejobindia! < /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.
Bookmarks are not displayed in any special way. They are invisible to the reader.
Create a link to the "Useful Tips Section" inside the same document:
< a href="#tips" > Visit the Useful Tips Section < /a >
HTML IMAGES:
Images make up a large part of the web - most websites contain images. HTML makes it
very easy for you to embed images into your web page.

To embed an image into a web page, the image first needs to exist in either .jpg, .gif, or
.png format. You can create images in an image editor (such as Adobe Photoshop) and save
them in the correct format.
Once you've created an image, you need to embed it into your web page. To embed the
image into your web page, use the < img / > tag, specifying the actual location of the
image.
HTML The < img > Tag and the Src Attribute
In HTML, images are defined with the < img > tag.
The < img > tag.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:
< imgsrc="url" alt="some_text"/ >
The URL points to the location where the image is stored. An image named
" ejoblogo.jpg ", located in the "images" directory on " www.ejobindia.com " has the URL:
http://www.ejobindia.com/images/ejoblogo.jpg.
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 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:
< imgsrc= " http://www.ejobindia.com/images/ejoblogo.jpg " alt= " ejobindia " / >
The alt attribute provides alternative information for an image if a user for some reason
cannot view it .
HTML TABLES:
In HTML, the original purpose of tables was to present tabular data. Although they are still
used for this purpose today, many web designers tended to use tables for advanced layouts.
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 >
< td >row 1, cell 2 < /td >
< td >row 2, cell 1 < /td >
< td >row 2, cell 2 < /td >
< /tr >
< /table >
How the HTML code above looks in a browser:
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 >
Colspan
You can use the colspan attribute to make a cell span multiple columns.
HTML Code:
< table border="1" cellpadding="5" cellspacing="5" width="100%" >
< tr >
< th colspan="2" >Table header < /th >
< /tr >
< tr >
< td width="20%" > Table cell 1 < /td > < td >Table cell 2 < /td >
< /tr >
< /table >
Rowspan
Rowspan is for rows just what colspan is for columns (rowspan allows a cell to span multiple
rows).
HTML Code:
< table border="1" cellpadding="5" cellspacing="5" width="100%">
< tr >
< th rowspan="2" > Table header < /th >< td > Table cell 1 < /td >
< /tr >
< tr >
< td >Table cell 2 < /td >
< /tr >
< /table >
HTML FORMS:
HTML enables us to create forms. This is where our websites can become more than just a
nice advertising brochure. Forms allow us to build more dynamic websites that allow our
users to interact with it.
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. A form can also contain select lists, textarea, fieldset, legend, and label
elements.
The < form > tag is used to create an HTML form:
< form >
input elements
< /form >
HTML Forms - The Input Element
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 type text field, checkbox, password, radio button, submit button, and more.
The most used input types are described below.
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 >
How the HTML code above looks in a browser:
Note: The form itself is not visible. Also n\ACote that the default width of a text field is 20
characters.
Password Field
< input type="password" /> defines a password field:
<form >
Password: < input type="password" name="pwd" / >
< /form >
How the HTML code above looks in a browser:
Note: The characters in a password field are masked (shown as asterisks or circles).
Radio Buttons
< input type="radio" / > defines a radio button. Radio buttons let a user select ONLY ONE
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 >
How the HTML code above looks in a browser:
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 >
How the HTML code above looks in a browser:
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 <
How the HTML code above looks in a browser:
If you type some characters in the text field above, and click the "Submit" button, the
browser will send your input to a page called "html_form_action.asp". The page will show
you the received input.
WHAT IS CSS?
CSS stands for Cascading Style Sheets.
CSS is a language that you can use to define styles against any HTML element.
Advantages of CSS
● CSS saves time
When most of us first learn HTML, we get taught to set the font face, size, colour, style etc
every time it occurs on a page. This means we find ourselves typing (or copying & pasting)
the same thing over and over again. With CSS, you only have to specify these details once
for any element. CSS will automatically apply the specified styles whenever that element
occurs.you can change the appearance and layout of all the pages in your Web using
External style sheets , just by editing one single CSS document! CSS allows developers to
control the style and layout of multiple Web pages all at once so that it is a breakthrough in
Web design . It is possible to define a style for each HTML element and apply it to as many
Web pages as you want.To make a global change,all elements in the Web are updated
automatically by simply changing the style.
● Pages load faster
Less code means faster download times.
● Easy maintenance
To change the style of an element, you only have to make an edit in one place.
● Superior styles to HTML
CSS has a much wider array of attributes than HTML.
CSS SYNTAX
A style is a definition of fonts, colors, etc.
Each style has a unique name: a selector.
The selectors and their styles are defined in one place.
In your HTML contents you simply refer to the selectors whenever you want to activate a
certain style.
Selectors are the names that you give to your different styles.
In the style definition you define how each selector should work (font, color etc.).
Then, in the body of your pages, you refer to these selectors to activate the styles.
For example:
<HTML>
<HEAD>
<style type="text/css">
B.headline {color:red; font-size:22px; font-family:arial; text-decoration:underline}
</style>
 </HEAD>
<BODY>
<b>This is normal bold</b><br>
<b class="headline">This is headline style bold</b>
</BODY>
</HTML>
In this case B.headline is the selector.
The above example would result in this output:
There are three types of selectors:
HTML selectors
Used to define styles associated with HTML tags. (A way to redefine the look of tags)
Class selectors
Used to define styles that can be used without redefining plain HTML tags.
ID selectors
Used to define styles relating to objects with a unique ID (most often layers)
HTMLSelector {Property:Value;}
<HTML>
<HEAD>
<style type="text/css">
B {font-family:arial; font-size:14px; color:red}
</style>
</HEAD>
<BODY>
<b>This is a customized headline style bold</b>
</BODY>
</HTML>
.ClassSelector {Property:Value;}
<HTML>
<HEAD>
<style type="text/css">
.headline {font-family:arial; font-size:14px; color:red}
</style>
</HEAD>
<BODY>
<b class="headline">This is a bold tag carrying the headline class</b>
<br>
<i class="headline">This is an italics tag carrying the headline class</i>
</BODY>
</HTML>
Class selectors are used when you want to define a style that does not redefine an HTML
tag
entirely.
When referring to a Class selector you simply add the class to an HTML tag like in the
above
example (class="headline").
SPAN and DIV as carriers
Two tags are particularly useful in combination with class selectors: <SPAN> and<DIV>.
Both are "dummy" tags that don't do anything in themselves. Therefore, they are excellent
for carrying CSS styles.
<SPAN> is an "inline-tag" in HTML, meaning that no line breaks are inserted before or after
the use of it.
<DIV> is a "block tag", meaning that line breaks are automatically inserted to distance the
block from the surrounding content (like <P> or <TABLE> tags).
<DIV> has a particular importance for layers. Since layers are separate blocks of
information. <DIV> is an obvious choice when defining layers on your pages.
#IDSelector {Property:Value;}
<HTML>
<HEAD>
<style type="text/css">
#layer1 {position:absolute; left:100;top:100; z-Index:0}
#layer2 {position:absolute; left:140;top:140; z-Index:1}
</style>
</HEAD>
<BODY>
<div ID="layer1">
<table border="1" bgcolor="#FFCC00"><tr><td>THIS IS LAYER 1<br>POSITIONED AT
100,100</td></tr></table>
</div>
<div ID="layer2">
<table border="1" bgcolor="#00CCFF"><tr><td>THIS IS LAYER 2<br>POSITIONED AT
140,140</td></tr></table>
</div>
</BODY>
</HTML>
ID selectors are used when you want to define a style relating to an object with a unique ID.
This selector is most widely used with layers (as in the above example), since layers are
always defined with a unique ID.
CSS can be defined for single tags ( inline ) by simply adding
style="styledefinition:styleattribute;" to the tags.
Look at this example:
It is <b style="font-size:16px;">NOT</b> me.
CSS can be defined for entire pages by simply adding a style definition to the head section.
(Internal)
Look at this example:
<html>
<head>
<title>MY CSS PAGE</title>
<style type="text/css">
.headlines, .sublines, infotext {font-face:arial; color:black; background:yellow; font
weight:bold;}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size: 10pt;}
</style>
</head>
<body>
 <span class="headlines">Welcome</span><br>
<div class="sublines">
This is an example page using CSS.<br>
The example is really simple,<br>
and doesn't even look good,<br>
but it shows the technique.
</div>
<table border="2"><tr><td class="sublines">
As you can see:<br>
The styles even work on tables.
</td></tr></table>
<hr>
<div class="infotext">
Example from EchoEcho.Com.
</div>
<hr>
</body>
</html>
In the above example, although we used the sublines style twice, we only had to define it
once: in the <head>section.
By defining styles for entire pages, you will gain the freedom to easily change the styles
even after the entire page has been made.
This is an obvious advantage for you as a designer. But the advantage is on the visitors side
as well.
Since the styles are only defined in one place, the page size will be smaller, and thus faster
to load.
There is a way to emphasize these advantages even more: using external CSS styles that
work for entire sites.
● SS can be defined for entire sites by simply writing the CSS definitions in a
plain text file that is referred to from each of the pages in the site.
● Rather than writing the entire CSS definition on each page, as in the previous
examples, you can write it to a text file that is only loaded on the first page that
a visitor sees at your site.
● When the visitor jumps to other pages, the CSS text file will be cached and thus
doesn't have to be transferred via the internet for subsequent pages.
● This means that your pages will load faster while at the same time you will have
extreme flexibility to change the style for your entire site even after it has been
made.
● Look at this example:
●
● File: example.html
●
● <link rel=stylesheet href="whatever.css" type="text/css">
● </head>
● <body>
● <span class="headlines">Welcome</span><br>
●
● <div class="sublines">
 ● This is an example of a page using CSS.<br>
● The example is really simple,<br>
● and doesn't even look good,<br>
● but it shows the technique.
● </div>
●
● <table border="2"><tr><td class="sublines">
● As you can see:<br>
● The styles even work on tables.
● </td></tr></table>
●
● <hr>
●
● <div class="infotext">Example from EchoEcho.Com.</div>
●
● <hr>
● </body>
● </html>
The above example is the exact same as we used for CSS defined for entire pages, with
one
important exception:
There is no style definition on the page. Instead we added a reference to an external style
sheet:
<link rel=stylesheet href="whatever.css" type="text/css">
This means that the browser will look for a file called whatever.css and insert it at the place
where the reference was found in the
html document.
So in order to complete our example we need to have a file called whatever.css that looks
like this:
File: whatever.css
.headlines, .sublines, infotext {font-face:arial; color:black; background:yellow; font
weight:bold;}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size: 10pt;}
Setting background colors
Background colors are defined similar to the colors mentioned above. For example you can
set the background color of the entire page using the BODYselector:
BODY {background-color:#FF6666;}
Setting a background image.
CSS lets you set a background image for both the page and single elements on the page.
In addition, CSS offers several positioning methods for background images.
You can define the background image for the page like this:
BODY {background-image:url(myimage.gif);}
You can control the repetition of the image with the background-repeatproperty.
background-repeat:repeat
Tiles the image until the entire page is filled, just like an ordinary background image in plain
HTML.
 background-repeat:repeat-x
Repeats the image horizontally - but not vertically.
background-repeat:repeat-y
Repeats the image vertically - but not horizontally.
background-repeat:no-repeat
Does not tile the image at all.
Positioning a background
Background positioning is done by entering a value for the left position and top position
separated by a space.
In this example the image is positioned 75 pixels from the upper left corner of the page:
BODY {background-image:url(myimage.gif); background-position: 75px 75px;}
Note: Background positioning is not supported by Netscape 4 browsers.
Fixing a background
You can fixate an image at a certain position so that it doesn't move when scrolling occurs.
BODY {background-image:url(myimage.gif); background-attachment: fixed;}
Note: Background fixation is not supported by Netscape 4 browsers.
DEFINING STYLES FOR LINKS
As mentioned in the above table, there are four different selectors with respect to links.
You can specify whatever style you'd like to each of these selectors, just like you'd do with
normal text.
A:link
Defines the style for normal unvisited links.
A:visited
Defines the style for visited links.
A:active
Defines the style for active links.
A link becomes active once you click on it.
A:hover
Defines the style for hovered links.
A link is hovered when the mouse moves over it.
Note: Not supported by Netscape browsers prior to version 6.
Example: Hover
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;}
</style>
Another example would be to create links that are both underlined andoverlined.
Example: Underline/Overline
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline overline; color: red;}
</style>
With CSS, it is possible to work with layers: pieces of HTML that are placed on top of the
regular page with pixel precision.
 The advantages of this are obvious - but once again Netscape has very limited support of
CSS layers - and to top it off: the limited support it offers is quite often executed with
failures.
So the real challenge when working with layers is to make them work on Netscape browsers
as well.
LAYER BASICS
LAYER 1 ON TOP:
<div style="position:relative; font-size:50px; z-index:2;">LAYER 1</div>
<div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:1">LAYER
2</div>
LAYER 2 ON TOP:
<div style="position:relative; font-size:50px; z-index:3;">LAYER 1</div>
<div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:4">LAYER
2</div>
To create a layer all you need to do is assign the position attribute to your style. The
position can be either absolute or relative.
The position itself is defined with the top and left properties.
Finally, which layer is on top is defined with the z-index attribute.
RELATIVE VERSUS ABSOLUTE POSITIONING
You can either position your layer calculated from the upper left corner(absolute) or
calculated from the position where the layer itself is inserted (relative).
position:absolute
If you define the position to be absolute it will be calculated from the upper left corner of
the page - unless the layer is defined inside another layer, in which case it will be calculated
from the upper left corner of the parent layer.
position:relative
If you define the position to be relative it will be relative to the position of the tag that
carries the style.
That is, if you add a relatively positioned layer in the middle of the page, then the position
will be calculated from that exact spot in the middle of your page where it was added.
Valid values for the visibility property are: visible and hidden.
This example shows how to create an invisible layer:
<div style="position:relative; visibility:hidden;">HELLO!!!</div>