HTML Parte2 PDF

Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
PARTE 2 DE HTML FOR BEGINNERS

Chapter 15. Insert bookmarks
Now you have made a quite neat small home page with three animal pictures. It works – or does it? You sure have to thumb up and down a lot in the page to
see all the pictures.
Then you would normally place some links in the top of the page to help the reader with the navigation. You are going to do that also:
1. You use bookmarks to link to defined positions on a page. Those are codes that can quickly be inserted: So place the cursor in the start of the line titled A
horse (before the <H3> code).
2. Enter the auto text bm followed by a space.
3. That opens a dialog box where you enter a name for the bookmark. Type horse and Enter:
4. That inserts the code <A NAME="horse"></A>:
5. This code inserts a bookmark that you can link to (either from the same HTML document or from another). We will get to that.
6. Insert a horizontal line above the bookmark by pressing phr.
7. Now insert similarly the bookmark goose just above the heading A goose.
8. Then insert the bookmark leopard above the heading A leopard.
9. Save the document. You can test it in the browser but you can not see the bookmarks, since they are not linked yet.
A list
Now you are going to make a small list of contents on top of the animal page.
1. You have the HTML document animals.htm open in NoteTab. The Autotext library is active in the left window.
2. Place the cursor in the line under the top heading (H1), and enter the following:
The contents: Enter p (space).
3. That inserts a P code and the cursor goes to the next line.
4. Now you need to insert another line. The code is still <LI> (list item). You can enter the code manually or use the autotext:
lin1 plus a space:
Chapter 16. The first links
Now you are going to make a link where the code will look like this:
<A HREF="#horde">See the horse</A>
First a brief explanation: code consists partly of a text (”See the horse”) and partly of a reference. The reference is where the link will lead to. In our case it is
the bookmark ”horse”.
When the reference is a bookmark, that is specified with the # symbol, which is made by pressing Shift+3.
1. Use autotext hl2 (for hyperlink). That opens a dialog box, where you first enter #horse
(remember the lower cases).
2. Then press Tab Tab to go to the field Link description. Enter this text: See the horse. Now it will look like this:
3. Click on OK or press Enter.
4. Press ArrowDown and lin1 plus a space to insert the next bullet.
5. Press the following sequence: hl2 space #goose Tab Tab See a goose Enter.
6. We insert the last item: Press ArrowDown and lin1 plus a space.
7. Press hl2 #leopard Tab Tab A leopard Enter.
8. Save the document. Now the code should look like Figure 41.
41. Three lines of code that contain three text links.
Chapter 17. Checking the links
Now you have placed three links in top of the HTML document animals.htm. Now let us see how they work.
1. Open the page in the browser. You can see from the cursor that the three texts are links. The cursor changes to a hand as you move it across one of the
three underlined texts.
2. Notice also the bullet list. Try to point to the bottom link:
3. Then look in the bottom of the browser window, where the status bar shows which link you are pointing at. Here you can see the file name animals.htm
that concludes with the text #leopard, which is the bookmark:
4. So you can read the link in the browser. Now try to click on it.
5. Now the browser ”thumbs” down the page and finds that line where the particular bookmark is:
6. Notice also the address as it appears in the browser window address field. That is the same, including the bookmark:
7. Click on the browser button Back to return to the top of the page again:
8. Try also the two other links.
Complete the page
Now you have a home page that contains pictures of the three animals. We need to expand that to cover five animals.
When you expand a home page with a new text section, it is often the fastest to copy a text block that includes a similar section. Then it is not a big problem
to edit the copy. Let us try that:
1. For every animal section we need among other things ahorizontal line and an IMG code. Select the bottom block in the document, that with the leopard.
Start the selection at the bookmark code and select these lines:
2. Make a copy with Control+c. Move the cursor to the bottom of the page, before the end code </BODY>.
3. Press Enter, and insert the copy with Control+v.
4. Press Enter Enter and insert the copy again with Control+v
5. That repeats the last text block, so you see it a total of three times. The last two paragraphs are the copies.
6. The last two paragraphs need to be edited. In the first we need to correct the following selected text:
7. The bookmark needs to be changed to hippo. The heading will be changed to A hippo. The file name will be changed to hippo.jpg, and the ALT code
changed to A noble animal.
8. In the second paragraph you similarly chance the bookmark to austrich. Change the heading to to An austrich. Change the file name to austrich.jpg, and
change the ALT code to This bird does not hide.
9. On top of the page add two bullets for the list of contents. Copy the bottom line twice and correct the link and text so they match the last two paragraphs
on the page. Change this:
10. Save the document, and test it in the browser. Now everything should work:
Figure 42. The animal page is now complete.
A tip about the austrich
Try to click on the link An austrich. Does the picture show in the very top of the browser window? If that is not the case it is because the page ”too short” so
to speak relative to the height of the screen image; but you only see that in the largest screen resolutions. You can correct that easily like this:
1. Enter a number of BR codes under the IMG code like here:
2. Save the document, and test it in the browser. Now the page has a suitable length, so a click on the ostrich link leads you to the correct place. The
picture appears in top of the window, since the is ”space” under it.
A summary page
Now you have made some pages that dear with animals: animals.htm, fishisgood.htm and zebra.htm. Why do we not combine them in a common summary
(we could almost call it a site)? We will do that:
1. We start as usual by creating the page. Open the template2.htm document
2. Save the document in the animals folder under the name index_animals.htm:
3. Enter both the page title and heading as:

All my animals …
4. Save the document again. Now we might as well reuse the summary you see in Figure 42. Look at the right side of NoteTab. Do you see the file list? If
not press F6, and it will appear. You see that NoteTab currently has more than one file open:
5. You can switch between the different open documents by pressing Control+Tab. Try that – and more than once.
6. Now you need to activate the document animals.htm. Select those lines that contain the index:
7. Make a copy with Control+c.
8. Now shift (Control+Tab) to the other document, index_animals.htm, and insert the copy the same place (after the heading H1). Save the document, and
test it in the browser. The five links do not work, right?
Nothing happens when you click on a link in the new document. Of course that is because the five pictures are not in the document; they are in a different
document.
Adjusting the links
In the original animal page (animals.htm) you worked with what we call internal links. Those are links from one position to another – in the same document.
External links lead from one document to another, and that is what we need now.
1. Place the cursor just before #horse in the first line of the bullet list.
2. Add the text: animals.htm, as shown here:
3. Now the link leads to a bookmark in the animals.htm document; can you see that?
4. Your cursor is right after the file name animals.htm (at least it should be). Now you can quickly and easily copy this text into the next four lines: Hold
both Control- and Shift-keys down and press three times ArrowLeft. That selects the file name.
5. Make a copy with Control+c. Press ArrowDown to get to the next line. Place the cursor in the right position, if it is not there already. Press Control+v to
insert the copy. Press ArrowDown again and insert the copy once more in the right place. Repeat in the next three lines.
Add two more links
Now you are going to add links to the two other HTML documents fishisgood.htm and zebra.htm.
1. Start by copying one of the five lines from the bullet list, and insert the copy twice, so the list will have a total of seven bullets.
2. Adjust the link in bullet number six, so it refers to zebra.htm:
3. Notice that there is no other bookmark in the link. The link goes directly to the page – not to a particular bookmark, for there is no such.
4. Save the page and test the last link in the browser. That does not work! That is because the zebra.htm page is not in the same folder as animals.htm.
5. You must add the path ../site1/ in the reference as shown here:
That specifies that zebra.htm shall be retrieved from a folder called site1, and that the folder is found by moving one step up (../) in the folder hierarchy.
6. Adjust the last link by yourself, so it refers to fishisgood.htm, which is also in the site1 folder.
7. Save the document.
In alphabetical order
Finally you have to edit the texts in the summary, so they appear as in Figure 43.
You also need to change the sequence so it becomes alphabetical. You can do that in this way
1. You work with one line at a time.
2. Select (the whole) line, which starts with

LI code. Remove it from this place with the shortcut Control+x.
3. Insert the page in the right position with the shortcut Control+v.
4. When you are done, the summary should be 100% like in Figure 43. Then save the document, and check that all links still work correctly!
5. Close all open documents.
You saw in the last exercise, that a document like index_animals.htm can consist exclusively of the text links. Here there are seven links altogether; five of
which goes to one specific HTML document that uses bookmarks for navigation. The two other links go to two other HTML documents.
Figure 43. The seven animal names are arranged in alphabetical order, and the document is now a tool for navigation relative to three other home pages.
Keyboard technique
I have covered this before and I will now reinforce that: It is very important that you know and use the keyboard options when you need to select text. This
whole book deals with home pages produced in a text-based environment. And when we work with pure text, the mouse is a very slow tool to use. For most
the keyboard will be much faster.
An especially important operation is to select text. We do that all the time; copy lines, code fragments, file names, whole sections etc. The copies are inserted
and adjusted. And it can be done very fast with the keyboard. Be especially aware of the Shift and Control keys that are used together with the six navigation
keys which are the four arrow keys ArrowLeft, ArrowRight, ArrowUp and ArrowDown together with Home and End.
When you hold the Shift key down and simultaneously use the navigation keys, you select text. The Control key can ”amplify” the use of the navigation keys
so they select larger blocks per key stroke. See the examples in the table below:
Example Meaning
Control+ArrowLeft/ArrowRight Moves the cursor one
word to the left/
right.
Control+Shift+ArrowLeft/ArrowRight Selects the word to the
left/right of the cursors
position.
Shift+End Selects from the cursors
position to th end of the
line.
Shift+ArrowUp, ArrowUp, ArrowUp Selects three lines above.
Figure 44. Examples of the very important keyboard operations.
I will very much recommend that you concentrate 100% on perfecting the use of just those 8 keys that I just described. There is nothing new in that; they
work in the described ways in all Windows programs. But when we work a lot with text like here, they are indispensable!
Chapter 18. Let's make a travellers homepage
Now you are going to make a brand new home page. In this exercise we will revive a long string of techniques that you have learned already. I try to make
the review as ”effective” as possible, so you get the feel for how you can create a home page fast with a specified layout. Among other things that mean that
we work in a sequence, which may not appear logic at fist.
But the finished product will be completed in an effective way, and that is my plan: You will be able to make home pages fast. We will widely use Note Tabs
clips from the Autotext library, which I presume that you are familiar with. Thus I expect that you can remember the table codes and other subjects that
have already been covered in this book.
Create the page
Your new page will contain tourist information about the southern French town Saint-Raphaël. You can find the pictures etc. that you need for this exercise on
the home page for this book.
1. Open the template2.htm document, and save it in the site1 folder under the new name
raphael.htm.
2. Change the page title to About Saint-Raphaël. Please remember the accent …
3. Enter the same text as heading. The fastest is to copy the text (press Control+Shift+ArrowLeft, ArrowLeft, ArrowLeft, ArrowLeft to select it) and insert
the copy between the H1 codes.
4. Then place the cursor above the heading and insert the bookmark top (use the autotext bm):
5. The result is a small A code that contains the parameter NAME=”top”. You can link to this code, and we will do that soon:
6. The save the document. Then you need to enter the following six bullets just below the heading. Use LI codes for the bullet list:
7. Press p for a new paragraph. Then use the img clip to insert the picture file raph01.jpg. Also get the picture from the home page for the book, and place
that in the site1 folder.
8. Finally insert a horizontal line. You need P codes above and below the horizontal line, and all this is combined in the autotext clip phr, which you can use.
9. Now you need to enter a new heading, but it needs to be placed in the left cell of a table. Enter a table with one row and two cells. You could use autotext
ta2, and select one row:
10. Place the cursor within the code for the first cell and type h3 to format to heading level 3. Then enter the text Introduction:
11. Move the cursor to cell two and enter the text To the top.
12. Now select this text:
13. Activate the clip hl2 by double clicking on it:
14. You must not type hl2, since that will erase the selected text.
15. The clip hl2 opens a dialog box where you can enter a so-called Link URL (an internet address). In this situation the link needs to go to a bookmark, and
that is specified with a ”garden gate symbol”. Enter #top in the dialog box and click OK:
16. Press ArrowRight to remove the selection. The result will be a small link code that will include the text ”To top”:
17. Finally you need to justify the text right. You need to do that in the cells TD start code. There you need to add the parameter ALIGN="right". The easiest
is probably that you enter it like here. Remember that you need a space before the parameter or it will not work:
18. Move the cursor above the table. Insert a bookmark (use the bm clip) and name it intro.
19. Save the site. Now test it in the browser. Try to change the browser window size and keep an eye on the link To top. It is always placed to the right.
Figure 45. The start of the site about Saint-Raphaël. It is far from finished yet.
Chapter 19. Copy text to the page
I chose to place the text that you need for the introduction on the home page for this book. That saves you the work of typing it, in stead you are going to try
to copy it.
1. Open the home page for this book in the browser, and click on the link Material for the exercises.
2. Then click on the link Text and graphics for the Saint-Raphaël page.
3. Click on the link Text for the introduction.
4. Now select (with the mouse) all the text that you see on the screen:
5. When the text is selected, you need to copy it with Control+c.
6. Shift to NoteTab and insert the copy (with Control+v) below the table with the heading Introduction.
7. When you insert text that you have copied from another home page, all the text comes in fine, but you have to add the paragraph format. So insert a P
code, so the text is broken into two paragraphs:
8. Finish the paragraph with a P code.
9. Then insert the picture file raph02.jpg, which you also need to get from the home page for this book.
10. Save the document and check it in the browser. That was the first section!
Figure 46. A heading with two text paragraphs and a picture. That is a quite typical type home page content.
Second section
The second section needs the heading Nature, and we will make that now.
1. Start by copying the lines that makes the heading for the Introduction section:
2. Insert the copy in the bottom of the page in a new line after the IMG code.
3. Change the text in the heading (H3) to The nature and edit the bookmark to nature.
4. Then copy the section’s text from the home page for this book:
5. Copy the text into the NoteTab window. The text needs to be inserted under the table with the heading.
6. Then insert a paragraph code.
7. Insert the picture file var03.jpg, which you also need to get from the home page for this book.
8. Save the page and test it in the browser. Now you can see the function of the link To top, which starts each section. That is good for navigation in long
documents!
The next three paragraphs
Now we need to make the next three paragraphs in the same way as the preceding:
1. Start by copying the 11 lines that make the heading of the paragraph Introduction..
2. Paste the copy, change the heading to

The city and the bookmark to city.
3. Please copy and paste the text from the book’s homepage and finish it with a paragraph code.
4. Include the image file raph03.jpg.
5. The fourth paragraph starts the same way: Copy the first 11 lines with the table etc. The headline should be Distances. And the bookmark km.
6. Then type this text under the table:
Saint-Raphaël is situated 30 km west of Cannes and 60 km from Nice:
7. Add a P code, and the image file var02.jpg.
8. Continue with another P code and this text:
Many people from Europe drive in the own car for the vacation. Here are some distances: <P>
9. Now please place a table of 5 rows and 2 cells in the document. The cells should hold these texts:
Route Distance
Hamburg – 495 km
Frankfurt
Frankfurt – 276 km
Mulhouse
Mulhouse – Lyon 420 km
Lyon – Saint- 404 km
Raphaël
The table needs a visible border, yellow background color and some space around the cells. You can correct that by adjusting the TABLE code:
10. Add the parameter BORDRE="1", BGCOLOR="yellow" and CELLPADDINNG="5".
11. The last two parameters could be inserted with the clips in the HTML library (check pages 68 and 69).
12. Delete the parameter WINDTH="80%" – still within the TABLE code.
13. Now we are approaching the end. The fifth paragraph needs to be made like de two previous. The heading should be A recommendation, and the
bookmark should be
recommend.
14. Now get the text for the section from the home page for this book.
15. Save the page and test the result in the browser. Now it is beginning to look like something:
16. The exercise continues in the next chapter.
Chapter 20. We need links
Now we need to finish the page, and it is logical to give the visitors some links to other websintes that also deal with Saint Raphaël and surroundings.
Insert external links
You are going to make the last main section in the raphael.htm document:
1. Start again by repeating the heading etc., like in the previous exercise. Text needs to be Links. and the bookmark is changed to links.
2. Now enter the following paragraph:
France has not as advanced as far with the net as one could expect, still there is a number of home pages relative to Saint Raphaël:
<P>
3. Now you could enter the various links, but that is not my plan. In stead you are going to ”steal” them from the home page for this book. Click on the
first, which goes to Saint Raphaëls official home page:
4. Now this page opens in a new browser window:

You probably have to maximize the windowif you want to study this site. There is much good information to find, but the layout is not particularly successful.
But that is not our problem; you need to copy the sites URL (internet address), and here is how you do that.
5. Select the address in the browsers address field. You can also press F4 F4 and it is selected:
6. Make a copy with Control+c.
7. Shift to the NoteTab window. Enter the following:
8. Select (highlight) the three words.
9. Activate the clip hl2 with a double click. Then press Control+v to insert the URL directly in the field Link URL.
10. Press Tab to go to the next field (Target).
11. Press ArrowDown, it reads blank in the field:
12. The click OK, or press Enter.
13. Save the page and test it in the browser. Click on the link; it needs to work like just like in the home page for this book.
Now you have made an external link. That goes to a ”foreign” home page, somewhere else on the net. In that situation it is very practical that the page does
not open in same browser window as your own page. As web master you are not interested in that the visitors leave your home page so it is smart to open
the external links in a new window. That is done with Target blank, which you selected in point 11 of the exercise. You can also see that in code for the link:
Figure 47. This link opens in a new browser window.

The last links
You can surely see that it is smart to copy URL’s directly from the browser. Then you do not have to enter
http://www.provenceweb.fr/e/var/straph/straph.htm, which is the address for our next link.
You now need to add the next four links from the home page for this book into the document raphael.htm. You can copy both texts and URL’s if you want to
(long live laziness!), and that can be done in different ways. First the least complicated:
1. Enter the four lines with <LI>-codes, like you did in the preceding exercise:
2. Then you must edit the four links individually: Select the text.
3. Copy the link from the browser window (with the quick entries F4 F4 Control+c).
4. Insert the URL with the clip hl2 (that can be activated very fast with Control+Space, when the clip is selected), just like in the previous exercise.
If you want to experiment with alternative procedures, there are certainly two other options:
• You can make four copies of the link line that already works. Then adjust the individual texts and URL’s.
• You can copy the texts from the home page for this book and insert them in your own page. Then you don’t have to type them in. Then you can follow
point two above.
Now finish the page. As mentioned there are different ways to do that but don’t let that mystify you. If you are in doubt then select the ”slave method” as
previously described.
And the webmaster …
The only thing lacking is that you need to insert your own e-mail address in the bottom of the page. That is a good habit, since it allows the reader to contact
the webmaster and for example report errors.
1. In the bottom of the page insert a horizontal line with the clip phr.
2. Type Webmaster and select this text.
3. Enter your own e-mail address as a link, and type mailto: before the address:
4. Links that start with mailtwo: are automatically interpreted as e-mail addresses when you click on them in a browser window.
5. Save the page and test the whole thing in the browser.
Conclusion
Now the page is almost ready. You just need to link the 6 points in the summary (page XX) to the 6 corresponding bookmarks (#intro, #nature, #city,
#where, #recommend and #links) in the document.
1. Do that now, connect the 6 points in the summary to the 6 bookmarks. First select text, then double click on the clip hl2. You have tried that before, so
that should not be a problem…
2. Save the document – hopefully you are finished now!
3. Then check that everything works. Check the links in the summary on top of the page.
4. Check that the five external links you made in the bottom of te page open the right pages, and that they open in a new browser window. If that is not the
case you must correct the errors!
5. Check and see that the link to webmaster works. When you click on that the e-mail program opens so you can send a message!
Figure 48. This link goes to an e-mail address like you also saw it in the browser status bar.
That was the conclusion of this long exercise. I hope you able to use it. At least you have tried to make a somewhat larger home page. You will be able to use
this format in a number of other subjects. So now you should be able to make your own home pages!
The travel page works as it should. You can navigate from the top of the page down to the individual section, and you can return to the top again. That is like
it should be. But I am certainly not satisfied with the appearance of the page (especially line length and fonts. They can be much improved, and we will look
at that in the next chapter!
Copyright Michael Karbo, Denmark, Europe.
• Next chapter.
• Previous chapter.
Chapter 21. Layout with table
You have made a large and well functioning home page in the previous exercise. And that was a good exercise, since you can to your advantage divide web
design in the two separate phases:
• Content/navigation
• Layout/design
Now we are at the second phase: We need to optimize the layout in an otherwise well designed home page. You can do that in many ways, and I will show
you two options. First we use the traditional HTML, where you with a little trick can make a much better design. Later I will show a more thorough solution
where you will try to play with CSS (Cascading Style Sheets).
Line length
I a previous chapter I mentioned how important it is to understand the break down of text in lines and paragraphs. Below I show the Raphael page as it will
appear on a screen with a resolution of 1280 X 1024 pixels:
You can surely see that this is not very smart. Actually the lines are more than 140 characters long. That is completely wrong – such a text is unreadable.
The problem is not so much in the large resolution 1024 x 768; here the line lengths are about 110 characters, but that is still way too much. Compare with
Figure 49 on page 115.
Our task is then to format the document so the line length is limited. And we do that by placing the content in a table!
The table width controls the text
Tables have the characteristic that you can specify their width. You have seen that before where we set a table width to 80%. That is a relative measure,
where the 80% adjusts itself to the actual width of the screen window, which will typically be 800, 1024 or 1280 pixels.
Here you need to specify an absolute table width. You could set it to a width of 650 pixels. And the table will maintain that size regardless of the screen
window size.
You will also create a table with just one cell that has a specified width. The trick is that all the contents of the raphael.htm document are placed in this cell.
Then the line length is no longer controlled by the screen resolution but by the table width.
1. Open the document raphael.htm in NoteTab.
2. Test it in the browser window, and notice the line length as it appears on your screen.
3. Save the document under a new name raphael_t.htm in the site1 folder. Then you still have the old document with the original settings available. Now we
will only work in the new.
4. Place the cursor in top of the document, between the bookmark top and the heading. Insert a couple of empty lines there:
5. Here you need to insert a table with one row and one cell. Use the autotext clip ta2, and select one row and one cell.
6. The code is inserted with the default parameter WINDTH="80%". Change it to WINDTH="650" like here:
7. Save the document, and the exercise continues.
Notice the cursors placement in the figure above. All of the documents content of text, pictures etc. needs to be inserted there!
Cut and move all the contents
Now you need to cut all the contents. That might sound dramatic, but it isn’t really. Then be careful and hit the keys very precisely!
1. Press ArrowDown a couple or time or three, so the cursor is under the table – but above the line with the H1 heading.
2. Then hold the Shift key down, because you now have to select. Then press the PgDn key a suitable number of times, so you reach the bottom of the
document.
3. Continue to hold the Shift key down, and press ArrowUp a couple of times, so the selection releases the HTML documents end codes:
4. Now you have a selection that includes all the contents. Then press Control+x to cut the selection away. Then there is not much left in the document.
5. Move the cursor a couple of lines up and into the cell:
6. Insert the cut section with Control+v.
7. Save the document, and test it in the browser.
I hope that the exercise works for you. The important thing is that you selected all of the big block precisely, like I described in point two and three of the
exercise. Then you moved the whole block into the table, which only consist of one cell.
Since the cell is defined with a fixed width of 650 pixels, the text is forced to spread over the same width, as seen in Figure 49.
Figure 49. Now you get a Line length that reads comfortably, and the home page will present itself well on any screen.
Left margin and font
If you see the raphael_t.htm page in the browser window, you might want an indent in the left sinde. That can be done in different ways; here is the easiest:
1. You need to place the cursor in the end of the of the BODY code, in top of the document.
2. Make a space like in the Figure here:
3. Enter the parameter leftmargin="40". The parameter will then be placed within the BODY code.
4. Save the document, and test it in the browser. Hopefully you can see the indent in the entire left side of the window:
5. Notice that the lines have the same lengths as before. The 40 pixels margin is thus added to the 650 pixels table, so the page now occupies a total of 690
pixels of width. That is still fine for all thee common screen resolutions.
6. The page is shown with the Times font, which in my experience is not very good in a graphic environment. I personally think that the fonts Arial or
Verdana are generally more suitable for home pages.
7. Place the cursor under the end of the BODY code. Then add this code (see page 38):
<BASEFONT FACE="Arial, Helvetica, Sans Serif">
8. Test the page in the browser. Is this not much better?
9. Then change the BASEFONT code so you add Vardana like here:
10. Save the page and test again.
Arial is the classical font for headings and text on colored back ground. It is called a grotesque. Verdana is a new font in the same family, and it is created for
screen use.
Home pages are often designed with lots of graphics and relatively limited amounts of text. For that use fonts like Arial and Verdana are obvious choices!
Find and replace
Find/replace routines are among the most effective tools when you work with HTML documents. Often there are many repetitions of one code block or
another that just needs a slight modification, and NoteTab is a good tool for that.
In your latest Raphael page there is an element that is repeated in different places, and I would like to change that. I am talking about the link To top, which
currently is not located in the right margin. It is indented, and that is not optimal:
The reason for this indent is that the text link is placed in a table that only has a width of 80% of the normal width. The table is thus not by the right margin;
but we can change that.
1. Press PgUp a few times in NoteTab, so you get to the top of the document.
2. Find the second TABLE code and select the parameter like here:
3. Then press Control+c to make a copy. Then press Control+r (to replace).
4. Now the dialog box Find and Replace opens, and in the search field (Find what) you can read just the selected text.
5. Press Tab to jump to the next field (Replace with).
6. Insert the copy there with Control+v. Press ArrowLeft a couple of times. The cursor is still in the field.
7. Adjust the replacement text to WIDTH="100%" like here:
8. Then click on the button Replace All:
9. Here you ask NoteTab to replace all

appearances of the text WIDTH="80%" with text WIDTH="100%". That happens instantly, and you are told that there were 6 appearances. Click on OK:
10. Then click on the Close button, to close the Find and Replace dialog box.
11. Save the page and test it in the browser.
Figure 50. Now the text is flush with the right margin.
The Find and Replace function is incredibly powerful in NoteTab. You can search for anything and replace that with something else. But you have to be alert,
since you can also destroy any document in no time with a thoughtless find/replace routine.
In the above instance there was no reason for hesitation; one parameter was changed to another, and that was done in 6 locations in one operation. The
result is that the link ToTop now is flush with texts right margin in the browser window (like you see in Figure 50).
Chapter 22. Layout with CSS
In the previous exercise yoou got your design ”kicked” in place with the use of a table, in which you placed all text, pictures etc. This trick works, but it is a
clumsy way to work. Why do we need all that text in one cell? That is not necessary. There are far better ways to control the layouts, that is CSS.
Introduction to CSS
CSS stands for Cascading Style Sheets. That is a collection of codes that you can use in HTML documents.
Technically CSS are not HTML; they are an extension to HTML. Together with JavaScript CSS makes for a big part of the so-called DHTML (dynamic HTML).
These introductory remarks do not have the big practical importance, since most browsers today support CSS. Must you must be principally aware that pages
with CSS can appear different in different browsers.
CSS reminds you of the typographics you can use in the word processing program Word. They are formatting that:
• Define a location in the document
• Work in the whole document.
If you would use H1 codes, you can with CSS in one place define which font, size and color will prevail each time a H1 code appears.
That holds true for most HTML codes; their appearance can be defined once and for all. Then you avoid having to provide the parameters in each individual
code that are used to specify the appearance.
CSS is an incredibly comprehensive system that can be used for everything. I am not able to cover the subject completely here, there could be thick books
written about that. But I will give a brief and effective introduction that will show the strength of CSS. The task is to fit the Raphael page to a fixed width (f or
example 620 pixels). This width must hold true regardless of the users screen resolution. At the same time we will to modify the font appearance.
What do we need?
We start with the raphael.htm file. Now you it in and out so you can surely evaluate which HTML code is actually included in the document. Those are the
codes that have to be governed by the style sheet.
We are talking about the codes: H1, H3, P, TD, IMG and HR. Can you see that? Those are the codes that are used in the document, and if we can control
them, then we can also control the document layout.
We start by working on the P code. That is used to create new paragraphs; here is the smart thing: We know the CSS can influence all the text following a P
code. That turns out to be about all of the document, since there are so many P codes.
1. You need to open the raphael.htm file in NoteTab.
2. Save it right away under the new name

raphael_css.htm in the folder site1.
3. Test it in the browser, so you refresh its appearance. Notice fonts and line lengths/margins.
4. When CSS codes need to be embedded in a HTML document, they need to be inserted in top of the document, in the HEAD section.
5. So place the cursor above the code </HEAD> and insert a couple of empty lines.
6. In the Autotext library you will find a clip called CSS_embed. Activate that with a double click:
7. That inserts this code block that forms the ”frame” around the style sheet:
8. The individual selectors need to be placed within the STYLE code, where the cursor is right now.
9. Double click on the CSS_p clip.
10. That inserts the code you see in Figure 51.
11. Notice the single ”p” to the far left in the first line. That says that this selector regards the P code.
12. Save the document, and test it in the browser. What changed?
Figure 51. The P code is redefined.
What happened?
If you check, you will see the following changes, which are the result of the small style sheet that you inserted in the Raphael page:
• The font has changed in most of the document.
• Line length has changed in all the regular paragraphs.
If you look closer at the style sheet, you will see that three properties are included. They are all written within brackets { }.
Each property is concluded with a semicolon (;). All three lines influence the text in the paragraph following the P code:
Property Effect
font-family: Arial, Specifies the font
Helvetica;
font-size: 9pt; Font size
Width:620; The paragraphs
width, here 620
pixels.
Figure 52. The content of the individual CSS property.
You also need to notice what was not changed. That is the heading and the bullet list on top of the page. That is since these paragraphs were not started with
a P code, so they remain unchanged.
Figure 53. Style Sheets control the appearance of the ordinary text.
The bullet list in the bottom of the page (in the Links paragraph) are not changed either. The horizontal lines have not been shortened, and finally the text in
the table (the one with the kilometer distances) has a different font size than the rest of the document. Most of the document is in point size 9, but that is not
the case in the table. We will correct that in a minute.
More formatting
Don’t despair if you think that the codes in Figure 51 look very complicated; I think they do also! But I want to point out that in reality it is quite easy to work
with CSS, at least at the level we do. You just try your way; I like to copy the selectors and correct them until I find something that works. That is simply the
method, and everyone can use that.
1. You need to move on. Select the three lines that are highlighted in Figure 51. Make a copy and insert the copy just above code – ->.
2. The selectors need to cover the LI codes. So change the first letter in the first line from p to li.
3. You also need to delete the line width:620;, so the code gets to look like this:
4. Now the text in the bullet list will appear with the same font as the rest of the document, check for yourself!
5. Place the cursor above the first selector and use the CSS_h1 clip to insert a H1 selector:
6. That results in a 6 line code that defines the appearance of all the headings that are formatted with the heading code H1:
7. If you check the code you can see that the font is bold, has point size 15, and the color is navy blue. Check also the appearance in the browser.
8. Now we also have to define the H3 headings. So copy the block with the 6 lines hat you see above and insert them below.
9. Adjust the copy so it looks like this:

10. Save the page and test it in the browser.
Start fine polishing
When you work with CSS you have a very precise tool that can control home page layout in the finest detail. That causes you to be more critical.
Now you have to adjust a couple of small details in the layout. Many would probably accept the appearance as is, but not we! We are still looking at the
tables that contain the headings for the 6 paragraphs.
Notice the text link To top; that does not have the same font as the H3 heading:
That is easy to correct since the text links are in a cell, meaning within a TD code. So let us tackle that …
1. The last selector that you dealt with the H3 codes. Copy this selector and insert the copy as a new selector.
2. Adjust the first line in the new selector from H3 to TD.
3. Save the document and test it. Now the fonts are in place, but there is an unreasonable difference in the spacing of the two texts in the table:
Figure 54. The fonts are the same, but the two texts are not spaced properly.
Chapter 23. Using the search/replace function
See Figure 54. The two texts are not lined up right. The text ”The nature” is formatted with the H3 heading, which the text ”To top” is not.
If you want both texts to appear alike, you need to format the text links also with H3. Fortunately that is quite easy, and I will show how to do that. Now
follow my instructions very precisely:
1. Press Control+Home to move the cursor to start of the document.
2. Press Control+r, to open the dialog box Find and Replace. That can be used for both search and replace, as we do now.
3. Enter the search string To the top in the first field, without entering a replacement text in the second field.
4. The click on the Find Next button:
5. Then the program finds the first appearance of the text, which will be selected.
6. Leave the dialog box Find and Replace open. Double click on the h3 clip:
7. Then the text in the document will be surrounded by H3 codes, and both codes and text are selected simultaneously:
8. Make a copy now with Control+c.
9. Click with the mouse in the dialog box in field number two (Replace with:). Insert the copy with Control+v:
10. Now both fields are ok. All other appearances of the text should be replaced, but be careful here:
11. Click twice on the button Find Next to go to the next instance of the search text.
12. Then please hit Replace All:
13. The other five occurrences of the search text are replaces with the new text string including the H3 codes:
14. Now the two texts in the beginning of every paragraph are formatted the same way.
Find/Replace is an extremely powerful tool. You can use for almost any type of re-formatting. You search for a specific string (text and/or code) and replace it
with something a little different.
NoteTab executes the replacements in no time. You just have to get used to cutting and pasting between the two fields in the box. You can also replace
across many open documents.
Square bullets
Here is a little detail I like my self:
1. You need to add a line in the CSS declaration to LI (list item). It should read List-style-type: square like here:
2. Save the change, and test the page. Now we use a square as bullet:
The last move
Now the small layout details are beginning to fall in place. The only thing I am still not satisfied with is the horizontal line and the pictures. Both ”reach
beyond” the right margin, where all text otherwise stays within:
We need to correct that, and we go again to the respective codes HR and IMG.
Enter the following two CSS statements. You could copy them from existing lines; that is up to you. They need to read:
HR { width: 620;
text-align: left;
color: navy;}
IMG { width: 620;}
Save the document and test page in the browser. Can you see now that everything on the page is confined to one specified width? The right margin is
straight down through the page, which was the objective!
Notice the HR definition. The line is specified to a width of 620 pixels, but it also needs to be left oriented.. That is done with the code text-align: left. That is
necessary, since the browser by default centers horizontal lines.
Now we are finished with this layout. I hope that you learned something from the review. CSS is probably the most powerful to
tool for HTML layout! Later in
the book, on pages 63 and 69, you can read more about the use of CSS.
Chapter 24. A frame set
Now you have made a number of home pages. Why not put them all together and give them a joint introductory page?
You will do that now, and that is done using frames.
What are frames?
Frames are a somewhat controversial concept in web design. We are talking about a design where more than one independent HTML document can be visible
simultaneously. Typically the screen is divided in two or possibly more sections, in which different documents
ents are shown. The most common version of frames
consists of a vertical ”window” in the left side of the screen that is used for navigation:
Figure 55. A typical frame. The links in the left window control the content of the right.
The user experiences frames like a home page, but actually they are ”screwed together” from different HTML documents.
Frames are controlled by a master file that among others defines the
e size of the windows. When the user wants to see a home page that consists of different
frames, the master file opens. You will see all of that soon.
Some ”experts” are very much against the use of frames, which also have certain problematic built-in side effects, among others relative to the Internet
search engines. Personally I am very enthused about frames that can be used as excellent navigation tools. I use them in all my own home pages.
If you are careful and stay with a simple frame set, the HTML code
ode is quite easy to control. And that gives great advantages!
Create a master file
You are going to make a frame set for your home pages. You will need three HTML documents: index.htm (that defines the frame set) plus left.htm and
start.htm:
So the master file is named index.htm, and that opens a frame set that (to begin with) consists of the two other HTML documen
documents (left.htm and start.htm).
Later I will go in depth about all of this, but let us start by creating the master file.
1. Open NoteTab.
2. Close all open HTML documents by pressing Control+Shift+F4.
3. Then open a new document with Control+n. Save it right away in the folder HTML (not in the folder site1) under the name index.htm:
It is important for the exercise that you save index.htm in the right place, and that is in the folder ”above” page1.
4. Now you have an empty HTML document. We need to fill that with the code that can create a frame set. On the home page for thi
this book you can find the
link The frameset. Click on it.
5. Then select the 11 line code and make a copy:

6. Insert the copy in index.htm and save the file.
7. Now you can test your frame set; hit F8, and check the result in the browser. For the time being it does not look very pretty:
Figure 56. Here the browse shows a frame set that does not work.
Understand the frame set
Were you disappointed about the result in Figure 56? Pretty it is not, but there is still some system in it. Notice that the screen image is divided in two
windows. A beam separates the two windows:
That is because of the code in index.htm. It defines that the screen shall be divided in two frames, and that the left shall be 145 pixels wide. The right shall
have a width of 620 pixels. You can see that here, where the code FRAMESET defines the two vertical windows:
In both windows you see an error message (”The page can not be shown”), and what causes that? Well, if you look again in the code for the index file, then it
”calls” the two other HTML documents. That is done with the two FRAME codes, where the parameter SRC specifies the individual file to be inserted in the
window:
Since the two HTML documents left.htm and start.htm do not exist, you get two error messages like in Figure 56. But you do not need to study the code that
creates the frameset in detail. It just has to work, and it does.
Make start.htm
Now you need to create the two pages so the frameset works.
1. Open the document template2.htm, and save it twice, first as left.htm and then as start.htm. Both files need to be placed in the same folder as
index.htm.
2. Reopen the file left.htm, so you have all three frameset files open in NoteTab:
3. Now you are going to work in the document in start.htm, so make that active. Enter this heading there:
Welcome to my private home page project!!
4. Change the heading code from H1 to H2 (remember both start- and end code).
5. Then click on left.htm in the Quick list panel in the right side of the screen to activate this document:
6. Delete the heading codes and type in stead the text My pages.
7. Save all documents. You do that easiest by pressing Alt f a. That activates the menu File à Save All.
8. Then shift to the index.htm document, and press F8 to see it in the browser. Now the frameset works; both documents are entered side by side. You can
not see the border between them, but it is there.
9. Correct the background color in left.htm to:

BGCOLOR="#7FFFD4", and save the correction.
10. Check the result in the browser again. Now you can see the two HTML documents clearly.
11. Now to try to insert a picture or some more text in the document start.htm, so it gets more interesting.
Figure 57. A frameset consisting of the two documents.
On with the project
Now your frameset is ready for use. You need to understand that start.htm is a start page that is read when the frameset opens. The idea is that you place
links to your various pages in left.htm. When the user clicks on them, the corresponding documents are opened in the right window instead of start.htm.
1. Start by entering this code in the HEAD section of the document left.htm:
<BASE TARGET="Main">
This code causes the documents selected in the left window (by clicking on links) will always be shown in the right window.
2. You are going to insert the first link in left.htm. Use the clip hl1 from the Autotext library.
3. That inserts a link code that you need to adjust to make it look like this:
Notice here that the reference to the HTML document fisharegoof.htm also includes the folder name page1. That is necessary, since the fish page is in
another folder than the frameset.
4. Test the link in the browser. If you have done it right the result will look fine when you click on the link. The fish page replaces start.htm in the right
window:
5. Now copy the code for the link and insert the copy three times in left.htm. Adjust the three links so they refer to the HTML documents: raphael_css.htm,
zebra.htm and venezia.htm, that all are placed in the site1 folder.
6. Use BR codes to separate the four links. The result should look like this in the browser:
7. Now you also link to the animals hippopotamus, goose, horse, leopard and ostrich, that are all found in the HTML document animals.htm, which is placed
in the animals folder.
8. Start with the hippopotamus. Insert again a copy of the code to the link and correct the reference to animals/animals.htm#hippo.
9. Notice that the HTML document animals.htm is in the folder animals, and that the reference goes to the documents bookmark #hippo. Both appear from
the code, can you see that?
10. Repeat the operation four times as you insert links to the animals Goose, Horse, Leopard and Austrich. If you forgot what the bookmarks are called, then
check in the document animals.htm.
Then give each link the

text you see to the right.
Arrange also the list

alphabetically. You do that
with ”cut” and ”insert”
(with Control+x and
Control+v), which allow
you to move the code lines
one by one to the right
position. The result should
look like here:
11. Save the document and test the frameset in the browser. All links must work and there has to be BR codes between the individual links!
12. The only thing lacking is a link to the start page. Make that yourself; it needs to be in top of the document left.htm like here, where it is followed by a P
code:
13. Save the file and test the home page again. Now the technical is ready; the page works, there is navigation to all your home pages from the left panel.
A quick shortcut to your page
Now you have made smart ”entrance” to your home pages. If you just open index.htm in the browser, you have access to all the home pages. So make a
”smart-button” that opens index.htm:
1. Open Windows Explorer. You could do that with keyboard shortcut Windows+e.
2. Find the folder C:\HTML (or the folder where you have saved your HTML documents), and select that in the left panel.
3. Then select the file index in the right panel:
4. Now drag this file down to the quick start line (to the right of the start button). While you hold the mouse button down find a space for it; you can see its
position like a black vertical beam. Release it:
5. Now you have made a shortcut (like a smart button) to the file index.htm. It can be activated with a single mouse click:
6. Try that – that opens your page in a new browser window. When you work with the same home pages, it is very practical to have easy access to open
them.
Chapter 25. A better design
Now it would be tempting to do something about the design. For example we can change the font as well as background and text colors in the left panel.
1. Insert a BASEFONT code in top of the document left.htm. Then select the font Arial in size -3.
2. Test the result in the browser. That looks quite suitable for the job, right?
3. Background color and color on the text links are controlled in BODY code. Start by changing the background color in the document left.htm to:
BGCOLOR="#0000FF".
4. Save the document, and check the page in the browser. That gives a pure blue color, which is quite usable; however it is not smart that the text links
appear in black font. The texts are not readable when the background is dark!
5. All texts need to be white – that looks good on the blue background. So change the four BODY code parameters TEXT, LINK, VLINK and ALINK to FFFFFF, which
is the code for pure white:
VLINK stands for visited link and ALINK stands for active link. These parameters specify the color on both the links that the user has employed before and the
link that is active. Here we color them all white.
6. Save the corrections and test the pages in the browser. Now there is a little more style in the design.
Links without underlining
You can remove the underlining in text links. Many people like that. You do that with a couple of CSS statement lines. So try:
1. You are going to work in the document left.htm. again.
2. Place the cursor under the BASEFONT code and enter the following CSS statement:
<STYLE TYPE="text/css">
a:hover { font-weight: bold;
color: white;
background-color: blue}
</style>
3. That was the first part. Then you have to add the following parameters to all the A codes (the links):
style="text-decoration: none"
Here you can see that I have added the parameter to the first text link:
4. Now add this parameter to all the 10 link codes.
5. Save the document and test your frameset in the browser. Now the links in the left frame are no longer underlined. Instead they are highlighted with bold
types when the mouse cursor is moved across them.
End of this exercise
Don’t do any more about the page for now. Of course there are numerous other options to modify layout and setup, but I think that you can do quite well
with what you have learned here.
Don’t forget that that the most important in any home page is its content. There we have shown the exercises as built of frames that can be used as an
excellent ”model” for other home page projects. Design and layout can be fitted to your desires and the model can be used for most any content.
Figure 58. In the left frame are all texts white on blue background. Notice that no links are underlined.

HTML Parte2 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Parte2 PDF

Uploaded by

Copyright:

Available Formats

Generated by Foxit PDF Creator © Foxit Software

http://www.foxitsoftware.com For evaluation only.

PARTE 2 DE HTML FOR BEGINNERS

2. Enter the auto text bm followed by a space.

4. That inserts the code <A NAME="horse"></A>:

6. Insert a horizontal line above the bookmark by pressing phr.

8. Then insert the bookmark leopard above the heading A leopard.

The contents: Enter p (space).

Chapter 16. The first links

<A HREF="#horde">See the horse</A>

3. Click on OK or press Enter.

7. Press hl2 #leopard Tab Tab A leopard Enter.

41. Three lines of code that contain three text links.

Chapter 17. Checking the links

8. Try also the two other links.

Complete the page

3. Press Enter, and insert the copy with Control+v.

Figure 42. The animal page is now complete.

A tip about the austrich

1. Enter a number of BR codes under the IMG code like here:

1. We start as usual by creating the page. Open the template2.htm document

3. Enter both the page title and heading as:

7. Make a copy with Control+c.

Adjusting the links

2. Add the text: animals.htm, as shown here:

Add two more links

2. Adjust the link in bullet number six, so it refers to zebra.htm:

7. Save the document.

1. You work with one line at a time.

2. Select (the whole) line, which starts with

5. Close all open documents.

Figure 44. Examples of the very important keyboard operations.

Chapter 18. Let's make a travellers homepage

Create the page

12. Now select this text:

13. Activate the clip hl2 by double clicking on it:

Chapter 19. Copy text to the page

3. Click on the link Text for the introduction.

5. When the text is selected, you need to copy it with Control+c.

8. Finish the paragraph with a P code.

6. Then insert a paragraph code.

The next three paragraphs

2. Paste the copy, change the heading to

4. Include the image file raph03.jpg.

6. Then type this text under the table:

Saint-Raphaël is situated 30 km west of Cannes and 60 km from Nice:

7. Add a P code, and the image file var02.jpg.

8. Continue with another P code and this text:

10. Add the parameter BORDRE="1", BGCOLOR="yellow" and CELLPADDINNG="5".

16. The exercise continues in the next chapter.

Chapter 20. We need links

Insert external links

2. Now enter the following paragraph:

4. Now this page opens in a new browser window:

6. Make a copy with Control+c.

7. Shift to the NoteTab window. Enter the following:

8. Select (highlight) the three words.

10. Press Tab to go to the next field (Target).

11. Press ArrowDown, it reads blank in the field:

12. The click OK, or press Enter.

Figure 47. This link opens in a new browser window.

And the webmaster …

2. Type Webmaster and select this text.