Best html Tutorials: July 2008

Webdesign page1

Seems that you have decided to create web pages yourself!
Good! So let's begin quickly.
Web pages are basically files with .htm or .html file extensions. They contain a code named "Hyper Text Mark-up Language" or HTML. These codes when viewed in a browser like Mozilla Firefox or Internet Explorer will be seen as cool web pages no matter how complicated the underlying code is.

Tools you will need:

You will need a simple text editor to write html codes. For example you can use vi in Unix/Linux based operating systems or

notepad in windows. You will also need a browser like Mozilla Firefox or Internet Explorer. In this Tutorial we assume that you

are working in any of the popular Linux Distro or Windows 9X/NT/2000/XP.

Now open your text editor and type the following code:

<html>
Hello world!
</html>

Now save the text as "page1.html". Now Open the file. Congratulations! What You see is your first web page opened in your web browser.
and are called tags. First one is a start tag and second is an end tag. Tags are something like commands in programming languages. tag tells the browser that this is start of the HTML and marks its end.
mark start and end of an HTML page.

Webdesign page 2 >

Webdesign page2

0 comments

HTML code headers:

Every html page must have a header. Header contains important information about the page.
Different tags are used for different sections of a header. Header of an html page is specified by <HEAD> and </HEAD> tags.

We will enter header information between tags.

Page Title:

One of the most important parts of a header is title. Title is the small text that will appear in title bar of viewer's browser. So HTML document will be as below.

<HTML>
<HEAD>

<TITLE>Title of the page</TITLE>

</HEAD>
</HTML>

Web page body:

Now our web page needs a body in which we will enter web page content. As you may guess we will use these tags:

<BODY> </BODY>

Body will come right after header end tag. So our web page will be something like this
Example:
<HTML>
<HEAD>
<TITLE>My company web page</TITLE>
</HEAD>
<BODY>
Welcome to our homepage. More text here.
</BODY>
<My company web p/HTML>

Now type HTML code in notepad and save it as "page2.html". Then view html file in your web browser.

In the next section we learn some enhanced features associated with the <BODY> tag.

< page1 Webdesign page3 >

Webdesign page3

0 comments

Enhanced <BODY> tag:

Most of html tags we will learn have optional parameters and extensions. Here we will learn to
extensions for <BODY> tag.
1-9 Background color for body of web page
If you want you can change background color of your web page by extending <body> tag as
below.
Example:
" <HTML>
<HEAD>
<TITLE>Page with Back Color</TITLE>
</HEAD>
<BODY BGCOLOR="#00FF00">
Page with Back Color
</BODY>
</HTML>
This will change your background color to green. Format of color number is RRGGBB. You know
that each color is a combination of three main colors: Red, Green and Blue. In color format RR is
value of red component of the main color in hexadecimal format. GG is value of green
component and BB is the value of blue component.
Two digit hexadecimal number can be anything between 00 to FF i.e. 0 to 255 in decimal format.
So if we write 00FF00 we mean (red=0, green=255, blue=0) so the result is a pure green color.
You can produce 16 million colors in this way but pay attention that not all of the browsers will be
capable to show all these colors. So test your web page in 256 colors mode.

Background Image:

We can use a background picture for web page instead of background color. You must have a
ready image file in .gif or .jpg formats. Now you must extend <BODY> tag as below. "image1.gif"
is file name of he image we want to use as background image.
<BODY BACKGROUND="image1.gif">
Example:
<HTML>
<HEAD>
<TITLE>Page with background image</TITLE>
</HEAD>
<BODY BACKGROUND="image1.gif">
Page with background image.
</BODY>
</HTML>
Image file must be in the same folder as your html file. Otherwise browser will not be able to find it.

Exercises:

1- Write your web page code with image1.gif as its background picture.

2- Write above code with a blue color instead of image as its background.

3- List tags you learned in this lesson with a small description.

In the next section we will get into text manipulation and formatting.

< page2 Webdesign page4 >

Webdesign page4

0 comments

Text Formatting:

Until now we have learned to insert simple text into our web pages. In this lesson we will learn
text formatting
techniques. This part of html writing skills is the most important part of our whole web design
course. So you must learn it word by word.
Changing text font style
We can make a text bold, italic or underlined. If you want to make a text bold, you must inclose it
in ... tags.
<BODY>
This is very important 
</BODY>
In above text the word "important" is typed bold. You can make a text italic by inclosing it in
... tags.
And finally you can make some text underlined by inclosing it in ... tags.
Example:
<HTML>
<HEAD>
<TITLE>Example 1, Lesson 2</TITLE>
</HEAD>
<BODY>
This text is bold 
While this one is Italic 
and this text is underlined 
Look at this, this is both bold and italic
</BODY>
</HTML>
In above example you can see that how we can make a text both bold and italic or any other
combination.
You may notice the tag in the end of each line. Let's see what is this tag. If you insert enter
keys (new line characters) at the end of each line and wish that it will make new lines in your
output page you will soon be
disappointed.
All lines will be in a single line in output web page. No matter how html code is written in separate
lines. To break lines in output web page you must insert tags in breaking points. Also pay
attention that tag is one of few single tags in html language . It has not an ending tag.

Nested Tags
In previous section we saw a line of code with nested tags.
This is both bold and italic
When you use nested tags you must be sure that they do not overlap each other. They must be
nested exactly. For example some part of text may change to bold although it is not desired.

Text with fixed width font
As you may know, regular fonts use different horizontal space. For example letter 'w' uses more
space than the letter 'i'. Sometimes we need a font with exactly the same width for all letters . For
example if you want to make a table of numbers and you want the columns to be exactly under
each other in different rows, we will need this kind of text.
To specify this kind of text you must use <TT>...</TT> tags. TT means Typewriter Text.

Changing size and face of fonts
We can change face and size of fonts using ... tags. Also using this tag alone will
not change the text. You need to use parameters for this tag. This parameters specify what kind of
change you need in text font.

Size of font
To change size of font in a part of text, inclose it with a tag as below:
...,
n is size of font. size of font must be a number between 1 and 7. If you insert some text without
determining its size default size will be 3.

<HTML>
<HEAD>
<TITLE>Example 2, Lesson 2</TITLE>
</HEAD>
<BODY>
1This text is bold 
2This text is bold 
3This text is bold 
4This text is bold 
5This text is bold 
6This text is bold 
7This text is bold 
</BODY>
</HTML>

< page3 Webdesign page5 >

Webdesign page5

0 comments

Face of Fonts:

We can use a font for a part of text by specifying its name.
...
You must insert font name in double quotes in above tag.
Example:
<HTML>
<HEAD>
<TITLE>Example Illustrating Font Manipulation</TITLE>
</HEAD>
<BODY>
This text is in ARIAL font 
This text is in IMPACT font 
</BODY>
</HTML>
In above example we have used Arial and Impact fonts while you can use any font you want.
Warning: Fonts will be displayed on your viewer only if specified font is installed on your computer. So
be careful while using new fonts. It's better to use native windows fonts in your pages. Windows is
used by about %95 of web surfers.
Alternatively you can use several font faces for each part of your text. In this way your browser
will try alternative fonts if it can not find primary font.
...

Changing Font Colours:

In previous lesson you learned how to change web page background color. Here we will learn how
to change text
color. Look at this example:
<HTML>
<HEAD>
<TITLE>Example illustrating Font colour change </TITLE>
</HEAD>
<BODY>
This text is in red color. 
This text is in green color. 
This text is in blue color. 
</BODY>
</HTML>
In above text different colors are used. You can change text color by changing color number. If
you don't remember how to specify color numbers return to previous lesson and review section on
"web page background color".

Combining Font attributes:

We can obviously combine tag parameters as we wish. In this way we will be able to
have text with different colors, font faces and font sizes.
You can even use text styles with tag by nesting style and font tags.

How is this ?

2-10 Changing default font colors in a web page
Each browser has its own default settings for text color, link color, visited link color and active link
color.
Text color default is black. Links are usually blue. To change default settings for these values you
must use <BODY> tag with more parameters.
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF"
VLINK="#00FF00" ALINK="#FF0000">Some Text </BODY>
BGCOLOR: Web page background
TEXT: Text Color
LINK: Link Color
VLINK: Visited link
ALINK: Active link
This lesson included some of the most important techniques in html writing. Now you must be able
to use any kind of text in your web pages.
As remembering so much tags and parameters is difficult, you must use them repeatedly so that
you can remember them.

"No one becomes a programmer without programming"

Exercises:
1- Write a html page that uses lines with these styles in separate output lines:
italic and bold
italic and underlined
bold and underlined
2- Make a web page with a banner text on it. Our banner is made of characters in increasing sizes
to banner's middle and then decreasing size to its end. First character starts with the size 1,
middle character size is 7 and last character size is 1 again. Banner text is "mylonglongname".
3- Write a html page with 9 separate lines in different colors. State color of each line in its text.

< page4 Webdesign page6 >

Webdesign page6

0 comments

Line Breaks, Paragraphs

As we saw in previous lesson if we break lines in HTML code by simply inserting enter keys (new line characters) ,lines will not break in output result in browser. They will be printed in a single line in browser. We must use tag to do this as you used it in previous lesson. You can also divide text using paragraphs. A paragraph starts on a new line with one blank line after previous line.
Paragraph tag is 
First paragraph
Second paragraph
You will nest other tags inside paragraph tag for fonts, styles and other tags that will be used inside a paragraph.
There is another option in forming text that is using <PRE> tag. Text between <PRE> </PRE> tags will be displayed exactly
as it is typed in html source. Therefore you will not need tags to break lines. It is enough to
enter text in separate lines with enter key (new line character) at their end.
Space between texts
Browser does not show more than one space between to words even if you have entered a hundred spaces between them in
HTML source. If you want to enter more than one blank character between two words you will need to use a small code for this purpose. It is " " without the quotes.

<BODY>
Here we insert 5       extra spaces.
</BODY>

Paragraph alignments in your web page

You can determine how a paragraph will be aligned in a web page. You can align text in left, right or center of a web page. To specify alignment for a paragraph you must use an extra parameter for your paragraph tag.You can use one of these combinations:
 
 
 
Example:
<HTML>
<HEAD>
<TITLE>Example</TITLE>
</HEAD>
<BODY>
You can align text in left.
You can align text in center.
You can align text in right.
</BODY>
</HTML>

Indented Text

If you need a text that is indented from both sides of web page you can use <BLOCKQUOTE> tag.
Text that is enclosed in this tag will have a margin from left and right of your web page.
Example:
<HTML>
<HEAD>
<TITLE>Example</TITLE>
</HEAD>
<BODY>
We see block quotes here: 
<BLOCKQUOTE>
In cases that you want to emphasis on a paragraph in your
text you can use this tag. It will indent your text from
both sides.
</BLOCKQUOTE>
</BODY>
</HTML>

In the next session we are going to see how we can add images in your web pages.

< page5 Webdesign page7 >

Webdesign page7

0 comments

Images in your web page:

In previous lesson you learned how to use an image as a background for web pages. It was:
<BODY BACKGROUND="image.gif">
</BODY>
Here we want to learn how to add an image in a web page. Tag that will be used for this purpose
is <IMG> tag.
Actually we will need parameters for this tag that specify image file location, file name and other
optional parameters.
Look at this example:
Example:
<HTML>
<HEAD>
<TITLE>Example </TITLE>
</HEAD>
<BODY BACKGROUND="image1.gif">
This is an image: 
<IMG SRC="abanner.gif">
</BODY>
</HTML>
In this example We have used both a background image and an image between text.Also you may have noticed that this tag is also a single tag that does not need an ending tag.
If you want to show your image in a different size than its real size, you can specify its size as below.
Example:
<HTML>
<HEAD>
<TITLE>Example</TITLE>
</HEAD>
<BODY BACKGROUND="image1.gif">
This is an image: 
<IMG SRC="abanner.gif" WIDTH=234 HEIGHT=30>
</BODY>
</HTML>
Alignment and border size for images
You can align image in your web page by inclosing it in a paragraph that is aligned as aligned to left, right or center.
See example below.
Example:
<HTML>
<HEAD>
<TITLE>Example showing change in image attributes </TITLE>
</HEAD>
<BODY BACKGROUND="image1.gif">
This is an image: 

<IMG SRC="abanner.gif">

</BODY>
</HTML>
You can add a border to an image by adding a border parameter to <IMG> tag. See the results of this html code.
You can see examples of this lesson in our site. Go to email course section in our site to see ready examples.
Example:
<HTML>
<HEAD>
<TITLE>Example 3-6</TITLE>
</HEAD>

<IMG SRC="abanner.gif" border=3>

</HTML>
Some of options we use may not be supported on other browsers. As most of web surfers use "MS
Internet Explorer"
we will work around this browser.

Alternative text for images:

Some web surfers may use browsers that do not support graphics. An example is lynx browser that is used in Unix text environments. If you want to consider these users, you can enter a text as an alternative to each image in your web page. In this way image will be replaced by its alternative text.
It is very easy. Just add an ALT parameter to <IMG> tag.
<IMG SRC="abanner.gif" ALT="Learning Online">
You see it does not cost too much.

Path of image file:

In above examples, image file must be located in the same directory that html file is located.If our
image file resides in other directory , we must add a relational path or a complete URL to this
image.
See examples below:
<IMG SRC="images/abanner.gif"> Image is located in "images" directory below the directory that html file resides.
<IMG SRC="../abanner.gif"> Image is located in parent directory of the directory of html file.

In this lesson you learned more text formatting techniques. You also learned how to include images in your web pages.
In next lesson we will learn about links, image links and more.
Until then I suggest you to start designing a web page using the knowledge you have from these three lessons.

< page6 Webdesign

Newer Posts

Best html Tutorials

Webdesign page1

Webdesign page2

Webdesign page3

Webdesign page4

Webdesign page5

Webdesign page6

Webdesign page7

Must visit

Top Tech Site - Hottest Technological Innovations

Cheap Website Hosting

Blog Archive

Photoshop & Gimp Tutorials

Live Traffic Feed

Must visit

Subscribe To

Top Tech Site - Hottest Technological Innovations

Cheap Website Hosting

Blog Archive

Photoshop & Gimp Tutorials

Live Traffic Feed