Bautista,Louiegen S.A.

Jan/29/15

1.1.

Linking in HTML code is done with the anchor tag, the <A> tag. The letter "A"
in the tag is then followed by an attribute. For a link to another web page, the "A" is
followed by "HREF". To set a bookmark in the same page, the "A" is followed by
"NAME", which you'll see how to do later.
Take a look at this example, which is a link to the popular search engine Google:
<A HREF = "http://www.google.com/">Google Search Engine</A>
Notice where all the angle brackets (< >) are in the link. After the first one, we have the
"A" part of the tag. Then we have the HREF part, signifying a link to another web page.
After that comes an equals sign (=). After the equals sign comes the address of the web
page itself. The address is case sensitive, so if there is a capital letter in the address, make
sure to include it. This address www.google.com is different from this address
www.gOOgle.com.
After the address comes the right angle bracket ( > ). Next comes the text that people see,
the text you want them to click on. To close an anchor link, you use the end anchor tag.
Which is this: </A>
But let's get some practical work done.
Open up your template text file. Click File > Save As from the menu in Notepad (or
whatever text editor you are using). When the Save As dialogue box appears navigate to
your HTML folder:

So we are going to save the new web page outside of the pages folder.
In the file name box, type index.html. Make sure the Save As Type area says All Files, if
you use Windows. Before you click the Save button your Explorer window should look
like this:

When the Save button is clicked, you should then have a web page called index.html in
the HTML folder:

What we're going to do is to place a hyperlink on our index page. When this hyperlink is
clicked we'll tell the browser to load a page called about.html. We'll save this new about
page in our pages folder.
So, use your template text file to create a new web page. When you save the page, double
click the pages folder to move inside it. In the file name box, type about.html. Then save
your page:

So, we have a web page in the HTML folder and a web page in the pages folder. We now
need to link them together.
Open up you code for the index.html page. Insert the following line between the two
BODY tags:
<A HREF="pages/about.html">About this site</A>
Your code should look like this (we've added a TITLE):

Save your work and load the page in your browser. You should see this:

And that's a hyperlink! Notice that the only thing on the page viewable to the visitor is
the text "About this site". The code we wrote turns it from normal text into a link that
people can click on. The code itself was this:
<A HREF="pages/about.html">About this site</A>
So to turn text into a link you start with an angle bracket followed by the letter A. After a
space, type HREF. An equal sign comes next. The page you want to link to goes between
quotation marks. But notice we started with the folder name: pages/about.html. This
says, "Look for a page called about.html. This page is in the pages folder".

Type a right-pointing angle bracket to end the first part of the link code. The text you
want people to see comes next "About this site". To wrap it all up, you need the closing
hyperlinks tag : </A>.
When you click your link, you should find a blank page loads in the browser. If you look
at the address bar, you should see it says about.html on the end. You have successfully
linked to a new page!
To get back to the index page, you need another link.
Open up your code for the about.html page. For the about page, we need to construct the
correct HREF. We can't do this:
<A HREF="pages/index.html">Go to the Home Page</A>
The above HREF is pointing to an index page in the pages folder. But our index page is
not in this folder. It is in the HTML folder, which is one folder up from pages. Just like
we did for images, we can use two dots and a forward slash:
<A HREF="../index.html">
Two dots and a forward slash, remember, mean "Go up one folder".
So insert the following code in your about.html page:
<A HREF="../index.html">Go to the Home Page</A>
Save your work and refresh the page in your browser. Click your hyperlink on the
about.html page. You should find that the index page will load. When you click the link
on the index page, the about page will load.

Exercise
Create a third web page. Save it in your pages folder and call it contact.html. Create a
link from the index page to this new page. Create a link back from the contact page to
the index page.
When you complete the above exercise, you will have two links on the index page. They
might look like this:

You can use the HTML techniques you've learned so far to improve the look of these
links. For example, you may want the links going vertically instead of horizontally. In
which case, surround you hyperlinks code with P tags. Here's the code for two vertical
links on the index page:

The result would look like this:

However, don't worry too much about the presentation for now as you'll see how to
improve navigation links with CSS and HTML Lists a little later. But try this exercise.

Exercise
Have two links on each of your three pages. The about.html page should have links that
lead to the index page and the contact page. The conact.html page should have links to
the index page and the about page.
The tricky part about the exercise above is getting the HREF part right. Just remember
that when the html pages are in the same folder you only need to type the name of the
page you're linking to. So this:
HREF="page_name_here.html"
instead of this:
HREF="../page_name_here.html"
or this:
HREF="pages/page_name_here.html"
You're just using the same file referencing rules that you learned in the images section.

The Target Attribute

Just like the IMG tag, the A HREF tag can take attributes. One of these is called
TARGET. The TARGET attribute is used to tell the browser where you want to open the
link. For example, you can tell the browser to open the linked page in a new browser
window. There are several values to choose from:
_blank
_parent
_self
_top
However, the only really useful one in HTML version 5 is BLANK. The default is SELF,
so you don't need to specify a TARGET attribute most of the time. If you want the link to
open up in a new window, the code is this:
<A HREF="pages/about.html" TARGET="_blank">About this site</A>
Notice the underscore character before the word "blank". Miss this out and your
TARGET attribute won't work.
The other two TARGET attributes are for when your website uses something called
FRAMES. Frames are going out of use, though, and are not recommended for HTML5.

Hyperlink Colours
You can set up your own colours for hyperlinks. The default is whatever the user has set
in the browser, usually blue, with a blue underline. But you don't have to have blue. The
A tag comes with three attributes that can help you to override the browser default:
LINK
Set the colour of a link before it has been clicked on
ALINK
Set the colour of a link when the link is clicked on
VLINK
Set the colour of a link after it has been clicked on
The A and the V above stand for Active and Visited. You use them like this:
<A HREF="pages/about.html" LINK="red">About this site</A>
So you select the attribute you want to use, and then choose a colour for your links. This
can also be a hexadecimal or RGB value.
Try them out for yourself with the links in any of your three web pages. Bear in mind,
though, that people expect a hyperlink to be blue with an underline - it's a visual clue that
you're linking to some extra content. Also, link colours used this way are now out of
fashion. It's better to use CSS styles for your hyperlinks. You'll see how to do this in a
later lesson.

1.2

To create links to a link within the page, two HTML tags need to be used.

<A HREF="#top">Top</A>
This first tag is almost the same as any other HTML tag you would use to create
a link to another page. However, to create a bookmark, you must start the link
with a # (pound symbol,) which represents a name statement, used in the next
tag. When the user clicks on Top, the computer would then go to the name tag, if
found on the same page of the link
<A NAME="top"></A>

This next tag is where the first tag will go when the link is clicked. These are
commonly referred to as bookmark and anchor.
Tip: Today, all browsers recognize top as being the top of the page, if you want
the visitor to go to the very top of the page the above tag can be left out and the
A HREF link created earlier will still work.
<A HREF="http://www.computerhope.com/issues/chsafe.htm#02">Windows
2000 Safe Mode</a>
Finally, a link can contain a web page with a bookmark that is on that page. In the
above example, this code would create a link to our Safe Mode page and
automatically move down to the Windows 2000 Safe Mode section.

2. Creating tables in html

Steps
1

1.

1
2. Open a simple text editing program such as either Notepad or WordPad on
Windows, or, on a Mac open up TextEdit.
3.

4.
2
5. Type all preceding HTML text that you want before the table.
6.
3
7. Define the use of a table to the HTML doc by typing the <table> tag.

8.
9.
4
10. Press Enter.

11.
12.

13.
5
14. Type the table-row opening tag using the <tr> tag.
15.
6
16. Remember to construct all remaining items from left to right.
17.

18.

7
19. Press Enter.
20.

21.
8
22. Type the table header opening tag using the <th> tag.
23.

24.
9
25. Type the name that you'd like to use for the first initial column.
26.

27.
10
28. Type the closing tag for the table header item, using the </th> tag.
29.

30.
11
31. Press Enter.
32.

33.
12
34. Repeat these steps (constructing the items in columns from left to right.
35.

36.
13
37. Close that row off by typing the </tr> tag.
38.

39.
14
40. Press Enter.
41.

42.
15
43. Begin another row, with yet another <tr> tag.
44.

45.
16
46. Press Enter.
47.

48.
17
49. Type the table-data tag, using the <td> tag.
50.

51.
18
52. Type the table-data you'd like to input into each field.
53.
19
54. Work left to right, when filling in the data from the columns specified above.
55.

56.
20
57. Close each entry off with a </td> tag.
58.
21
59. Repeat for each table data entry that exists.
1. For those cells that don't require any entry, type the <td> and <td> with
nothing in between them. This should be more useful for cell in between
two other cells.

2.
60.

61.
22
62. Close each row off with yet another </tr> tag.
63.

64.
23
65. Repeat each row downwards from the addition of the <tr> and </td> lines until
each row is assembled.
66.

67.
24
68. Close off the table with the </table> tag.
69.

70.
25
71. Type the proceeding HTML text that you want for the remainder of the document.

3.Marquee code

 <marquee behavior="scroll" direction="up">Here is some scrolling text...

going up!</marquee>
<marquee behavior="scroll" direction="left" scrollamount="1">Very
slow...</marquee>
<marquee behavior="scroll" direction="left"
scrollamount="10">Faster...</marquee>
<marquee behavior="scroll" direction="left"
scrollamount="20">Fast...</marquee>
<marquee behavior="scroll" direction="left" scrollamount="50">Lightning!
</marquee>
<marquee behavior="scroll" direction="down">Here is some scrolling text...
going down!</marquee>
<marquee behavior="scroll" direction="right">Here is some scrolling text...
left to right!</marquee>