HTML Tutor
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
iDragstor Lab
|
|
|
Lesson 5 - Links and Images
Link
HYPERLINK, or just the link, is used to navigate web pages and allows you to click on a word, group of words, or an image, and go to the url defined by the link.
When creating links, you will need the URL(Uniform Resouce Locator) to the page that you want to go to when you click on the link. URL is an internet address of a web page and it starts with http://.
You will need to give your link some creative wording and that's it, you're done creating the link. Look at the next example:
<A HREF="www.iDragstor.com">Come visit iDragstor.com</A> Result:
Come visit iDragstor.com
You have probably noticed by now, that links are underlined. You don't have to do anything special to produce this effect, the browser will automatically underline the text of your link. When you move your mouse over the link, the pointer will change from an arrow to a hand pointer.
Images (Image <IMG>)
Images are placed on web pages using the image tag(<IMG>). IMG tag is one of those that doesn't have the end-tag, and it requires two attributes:
SRC and ALIGN
SRC or the source is the location, or the url of the image in GIF or JPEG format.
<IMG SRC="url">
That address is normaly somewhere on your C-drive and you need to use quotes around it or it won't work. Look at the next example:
<IMG SRC="eLogo.gif">
ALIGN attribute determines the position of the text in relations to the image. It's values are top, middle or bottom.
<IMG SRC="url" ALIGN=top>
In this example the text is on the top of the image. Look at the next 3 examples:
<IMG SRC="Dancing_baby.gif" ALIGN=top>
First case is when you want to put the text on the top of the image. When you get to the end of the row, the text will move to the next line.
<IMG SRC="Dancing_baby.gif" ALIGN=middle>
Second case is when you want to put the text in the middle of the image. When you get to the end of the row, just like in the previous example, the text will move to the next line.
<IMG SRC="Dancing_baby.gif" ALIGN=bottom>
Third case is when you want to put the text to the bottom of the image. All your text will appear here.
If you would like the baby to start dancing in the middle or to the right of the page you need to set the value of ALIGN attribute to center or right.
<IMG SRC="Dancing_baby.gif" ALIGN=center>or
<IMG SRC="Dancing_baby.gif" ALIGN=right>
Here is your next excercise. Get the baby from this page by right clicking on the image, choose save as and save it in HTMLTutor directory. Copy the code from the above, and paste it to a new file called Lesson5.html in your HTMLTutor directory. Open the file with your favorite browser and watch the baby do the dance, to the right of your screen.
Second option is to execute the code in the lab, after you save the baby, but try to be a good HTML coder and do it the old fashion way. That's all. See you in the next lesson.
<HTML>
<HEAD>
<TITLE>Lekcija 5</TITLE>
</HEAD>
<BODY BGCOLOR=yellow TEXT=red>
<IMG SRC="Dancing_baby.gif" ALIGN=right>
</BODY>
</HTML>
|
|
|
