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

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

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

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

<HTML>
<HEAD>
<TITLE>Example 3-1</TITLE>
</HEAD>
<BODY>
You can align text in left. You can align text in center. You can align text in right. </BODY>
</HTML>

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

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

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

<HTML>
<HEAD>
<TITLE>Example 3-3</TITLE> </HEAD>
<BODY BACKGROUND="image1.gif"> This is an image: <IMG SRC="abanner.gif">
</BODY>
</HTML>

In this example I 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 3-4:

<HTML>
<HEAD>
<TITLE>Example 3-4</TITLE>
</HEAD>
<BODY BACKGROUND="image1.gif">
This is an image: 
<IMG SRC="abanner.gif" WIDTH=234 HEIGHT=30> </BODY>
</HTML>

3-6 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 3-5:

<HTML>
<HEAD>
<TITLE>Example 3-5</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 3-6:

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

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

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

3-9 End

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.

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. Use left, right and centered paragraphs and block quote in a sample web page.

Use left, right and centered paragraphs and block quote in a sample web page.
Write a complete html page code with an image centered on it with a border size of 10.

Write a complete html page code with an image centered on it with a border size of 10.
We have an image that its size is 100*200. We want the image to be half the size it is on our page. Write a complete web page that centers this image on it with a border size of 5.

page. Write a complete web page that centers this image on it with a border size of 5.

a.

Write a <IMG> tag that uses an image file located 2 directory levels upper than html file directory.

Write a <IMG> tag that uses an image file located in b. "image" directory located in one level upper than
current html file directory.

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

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