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

4-1 Links Any object such as text, graphic images etc. that leads us to a new page on the web is called a link. Links can point to a page on our site or to a web page on another site. In this lesson we will learn how to make links.

4-2 Text links

Creating a text link is an easy task. We will use <A> </A> tag to do this. As before we will need extra parameters from
this tag. Look at example below :

Example 4-1:

<HTML>
<HEAD>
<TITLE>Example 4-1</TITLE>
</HEAD>
<BODY>
<A HREF="http://www.yahoo.com">Click here to visit Yahoo</A> </BODY>
</HTML>

Above code will create a link that clicking on it will send the user to Yahoo website. We have used HREF parameter to specify destination web page. Text between <A> and </A> is link text which user will click on it to go to destination page.

4-3 Image links

In previous section we used a text as a link point. It is possible to use an image instead of text. To do this, you must replace link text between <A> and </A> with an <IMG> tag that displays an image file.

<HTML>
<HEAD>
<TITLE>Example 4-1</TITLE>
</HEAD>
<BODY>
Click on below picture to visit my homepage. <A HREF="http://www.angelfire.com/nt/sarmadys"> <IMG SRC="me.gif">
</A>
</BODY>
</HTML>

In above example clicking on picture will bring surfer to the address of <A HREF=".."> tag.

If you see the result in a browser you will notice a blue border around the picture. This blue border ais dded to
image because it is a default for image links. If you don't want this border, use border=0 parameter.

Example 4-2:

<HTML>
<HEAD>
<TITLE>Example 4-2</TITLE>
</HEAD>
<BODY>
Click on below picture to visit my homepage. <A HREF="http://www.angelfire.com/nt/sarmadys"> <IMG SRC="me.gif">
</A>
 Without link border : 
<A HREF="http://www.angelfire.com/nt/sarmadys"> <IMG SRC="me.gif" border=0>
</A>
</BODY>
</HTML>

4-4 Email links

If you have surfed web for a while you have seen links that when you click on them your email program starts a "compose new message" window that its receiver address is entered from web page . This email address is the address you want email to be sent to.

Look at example below to see how you can make a link to an email address.

<BODY>

Click on below link to send an email to me <A HREF="mailto:webmaster@learnem.comt"> Email Me
</A>
</BODY>

It uses a "mailto:" string before desired email address to convert it into a link address.

If you want, you can use a subject for the email. This example will show you how to do this : Example 4-3:

<HTML>
<HEAD>
<TITLE>Example 4-2</TITLE>
</HEAD>
<BODY>
Click on below link to send us your comments . <A HREF="mailto:webmaster@learnem.com? subject:comments about your site">Email Me</A> </BODY>
</HTML>

Just know that some browsers and email programs do not support subject in email links.

4-5 Lists There are times that you want to insert items related to a subject in list form in your web page. HTML provides you with tags to do this. <UL></UL> tags are first choice of these tags.

Example 4-4:

<HTML>
<HEAD>
<TITLE>Example 4-3</TITLE>
</HEAD>
<BODY>
This is a list of subjects covered in this lesson : <UL>
<LI>Text Links
<LI>Image Links
<LI>Email Links
<LI>List of Items
</UL>
</BODY>
</HTML>

Result page will display list items in separate lines started with a small bullet. You see that we have entered list items started with a <LI> tag between <UL></UL> tags. <UL> tag is a part of list tags.

If you want the items to start with numbers instead of bullets, you must use <OL></OL> tags instead of <UL></UL> tags.

<OL>
<LI>Text Links <LI>Image Links <LI>Email Links <LI>List of Items </OL>

Be sure to write down codes in a file and view it with a browser.

4-6 Horizontal Separator Rule Another useful html tag that you will use, is <HR> tag. If you need to separate text in your web page by horizontal lines , you may use this tag.

<BODY>
First section <HR>
Second section </BODY>

Result is two lines of text separated by a horizontal rule. You can specify parameters for horizontal rule. If you want to change width of rule you can use width parameter.

<HR WIDTH="50%"> width in percent <HR WIDTH="100"> width in pixels

You can also determine line size parameter to change line diameter.

<HR size=5> It is obvious that you can mix parameters with each other.

Horizontal rule created by this tag is a line that has a shade. You can change the rule to a solid line instead of a shaded line, you can add a NOSHADE parameter.

You can also determine Color for your line: <HR color="#000000">

Above line will not have a shade and it is a solid line.

4-9 End In this lesson you learned how to use text links, image links, email links, lists and horizontal rule.

Until now we have covered general HTML tags. In next lesson we will cover more. We will then start more advanced subjects such as tables, frames and forms in next lessons. Now you must be able to design simple home pages. So why not start ?

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. Create a page with a link in it that points to yahoo site. Center the link in screen center. Use what you learned about paragraphs in previous lesson.

what you learned about paragraphs in previous lesson.
Change above example to use an image as a link that points to yahoo site. Remove blue border around the picture.

around the picture.
Insert both of the exercises above in a single page and separate text link from image link by a solid green line with 50% of the screen width.

solid green line with 50% of the screen width.
Create a complete contact page (html code) for yourself. People visiting this page must be able to send you comments about your homepage.

to send you comments about your homepage.
Create a complete web page that contains a numbered list of courses you are interested to find on the internet.

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

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