Web Design in 7 Days Tutorial by Siamak Sarmady - HTML preview

/ Home / Web Design / Web Design in 7 Days Tutorial

PLEASE NOTE: This is an HTML preview only and some elements such as links or page numbers may be incorrect.
Download the book in PDF, ePub, Kindle for a complete version.

Web page design course

Course support : You can ask your course questions in Learnem support forums .

Please support us by visiting our support forums and asking your questions and answering questions of others.

Registration: You can also register for paid web design email course. If you register you will benefit from strong one to one student support, personal tutor, more facilities, discount for other courses, access to students area and many more. Course fee for web page design email course is $15 only. Paid students will receive 13 advanced lessons in addition to 7 general lessons. You can register for paid course at:

Course Registration Here

2-1 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.

2-2 Changing text 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 2-1:

<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.

2-3 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.

2-4 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.

2-5 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.

2-6 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.

Example 2-2

<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>

2-7 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 2-3:

<HTML>
<HEAD>
<TITLE>Example 3, Lesson 2</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 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.

...

2-8 Changing font colors

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:

example 2-4:

<HTML>
<HEAD>
<TITLE>Example 4, Lesson 2</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".

2-9 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.

BGCOLOR: Web page background TEXT: Text Color
LINK: Link Color
VLINK: Visited link
ALINK: Active link

2-11 End 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.

I always tell this sentence in my programming classes: "No one becomes a programmer without programming"
Notice: You can find examples of this lessons in our website. There you must go to resources section and then click on "Web email course example page."

Exercises:

Attention:
Do not use any html editing program like MS FrontPage . You must work on the codes yourself.

Course support:
Paid students must send exercises to their tutor. Tutor will return corrected exercise to the student. Others can ask their questions in Support forums in our web site.

in our web site. Write a html page that uses lines with these styles in separate output lines:

italic and bold
italic and underlined bold and underlined

bold and underlined

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". middle character size is 7 and last character size is 1 again. Banner text is "mylonglongname". Write a html page with 9 separate lines in different colors. State color of each line in its text.

============================================================

© 2000,2001 Siamak Sarmady and Learnem Group . All rights reserved. This text is written to be used as text material for "Web Page design Email Course". Any kind of reproduction, redistribution in any form without written permission of the writer is strictly prohibited. This special version is prepared in PDF form. You can redistribute this file without any changes either in contents or in file format. It can not be redistributed in printed form or any other media without permission of the writer.

Back Next

Back Next Lesson 3