www.dtp-aus.com

Session 2, page 2 of 2
The "First HTML Page" Tutorial

Return to Session 2 intro

After sweating over the first two very long pages, this one is a simple list about options and attributes additional to some of those already covered. You will need to create a second page ready for reciprocal hyperlinks. That second page does not have to be anything special and will only be used for practice.
 
00 Open your Text Editor and save a new page ready for code entry. Save this new page into your existing  'mysite' folder and name it what ever you want to. Include the basic tags as required for all browsers to recognise that it is indeed HTML code (html, head, and body tags etc). Of course practice with these bits by placing tag code and text in between the <body> and </body> tags (the pages "visible" part).

< >

Additional IMAGE-SIZE Information
01 When inserting an "<img src="...... tag, you must know the original image width and height in pixels. With this information you must include the width="??" and height="??" attributes.

WHY?
Have you come across pages that seem to jump and change annoyingly as images are loaded into the page and find it impossible to start reading the text? - which is probably the prime reason you want to look at the page anyway. Have you also come across pages that have only a few apparently fairly small images but take perhaps minutes to download?

Then read on so visitors won't prematurely leave your site because of these easily avoided annoyances; and it is true, they will.

No Size Stipulated
Yes, it saves typing when we leave out lots of tag 'attributes'. But visitors will also detect your laziness, or lack of knowledge!

Almost always, the page text objects appear before images (except text in Tables, but that is another story for later). When anything appears, the visitor starts reading, it's natural. But all of a sudden the paragraph moves on the page. The visitor starts reading again and perhaps the paragraph moves to yet another position on the page and so forth

Very quickly the Back Arrow is clicked and off they go to look elsewhere.

Then also consider the many visitors that surf the web with images switched off via their browser. You have the pictures, you placed them and other objects and text oh sooo very carefully where you want them and think it looks great and easy to read from text to text etc.

But all these visitors are likely to see is a bunched up lot text without any logical topic path! - yes, goodbye and there goes the old Back Arrow again.

Image Display Resized
Unless very experienced, it is true that you are not expected to have all your images refined to the smallest file size for efficient downloading (file size in bytes, not linear measurement).

However one of the biggest give-aways showing that you don't care about your visitors comfort is to obtain images by what ever means, place them in your pages, redesign the layout and make those images appear smaller than they really are (or heaven forbid, larger).

The 'img src' tag allows us to describe to the browser how wide and high to draw each image. This we can understand from the previous topic.

But by making the width= and height= attributes smaller than they really are for any given image, that image still has to be downloaded the same, will take just as long to download no matter what measurements you stipulate, and nine times out of ten will degrade more in picture quality compared to resizing a copy of the image in a clever painting program with refined interpolation algorithms. When I suspect I have come across this on sites I visit, I check the source code then copy the image(s) and view them in my painting programs. Rarely do I ever find that people have even bothered to reduce the image size on the page EXACTLY in proportion - further degradation.

So, one, the images take for ever to download when they shouldn't, and two, we easily notice how "crappy" (excuse me) they look.

A little extra time (improving with experience) will help you produce a beautiful page; so work like  a Pro when it comes to images, there are very good reasons to do so - and that goes for those simple personal pages too.


vline.gif (54 bytes)And now for a contradiction
Once we know the pitfalls of not using, or not correctly using, the image width and height attributes, there will be times when distorting an image can be to our advantage - as long as the distorted image is designed for the distortion.

Here we have two images. One is two pixels wide and ideal as a divider in a table. Don't worry that you have not learnt all about Tables yet, it is just the use of controlled image distortion that we are concerned with here, and to see how it can be a useful option. The other image I just knocked up for fun.

The images are actually 150 pixels high. I will place each image in two tables. The image heights are forced to 45 pixels (left-hand table) and 90 pixels (right-hand table). Using tables and a bit of colour shows the affect a little better than just images by them selves..

02
Just some text for the centre cell and it means nothing.
And here is more text for the centre cell and it contains more of just nothing but this nothing takes up a little more room.
03
Just some text add to the cell; it means nothing.
04

Not suitable for the task, but I have forced the third table's width by distorting the image WIDTH to 400 pixels. Now we know of an advanced trick that will, using special transparent images, force the width of table cells for all sorts of complex layout control.

So, one can distort or resize an image, as long as we have a specific reason for doing so. But still it remains that we do it NOT just because we can't be bothered creating a correct one.

THE BIGGER THE IMAGE the LONGER TO DOWNLOAD to the visitors browser, AND THE MORE BANDWIDTH you will probably eventually have to pay to your site's hosting company if you use too many unnecessarily over sized images.

When using this kind of option, as with all web design, view the results in some older browsers too. ie: I could set the image width correctly in pixels, and the image height to 100% (of the containing table cell), but versions 3 and earlier of Netscape cannot handle it. That option is a 'maverick' option of MS Explorer.

In other words there are some forms of image distortion that are acceptable, but make sure it is compliant with all browsers, NOT just your favourite - visitors could see a very different page.

< >

Defining FONT SIZE
05

Besides the <font color="??"> attribute and usually applied to all "font" tags is the "size" attribute...
<font color="#009933" face="arial,helvetica" size="2">some text</font>.

Fonts sizes are defined directly by attribute as ONE OF SEVEN display sizes. They are shown on the right as simply size="1", "2", "3", "4", "5", "6", and "7".

Note these size references are reversed compared to the <hr?> heading tag pairs where ?=1=largest and ?=6=smallest (there is no <hr7> heading tag size seven). Also note the maximum heading tag size <hr1> displays one size smaller than the maximum <font size="7">. However the "hr" tag has other special characteristics.

At this stage performing these tests , create a paragraph and font tag...
<p><font color="#009933" face="arial,helvetica">blah blah etc</font></p>.

View the page, then change to...
<p><font size="2" color="#009933" face="arial,helvetica">blah blah etc</font></p>.

Notice we have added the size="2" attribute and value. View the page again.

Now try size="5". Whoowa, that's quite a lot bigger.

Now add a <small> and </small> tag pair as....
<p><font size="2" color="#009933" face="arial,helvetica">blah blah <small>blah again and some more</small> etc</font></p>.

Hmmm. A bit of a mess but yes you can use <big> or <small> around any text already controlled by other sizing tags; including other tags like <strong> too.

NOTE: So long as the "nesting" of tags is correct then control with most tags (nested variations that is) is unlimited.
 

1
2
3
4
5
6
7
06

Jan '06 edit:
Before leaving font tags I will just list a few suggested <font face=???> combinations.

Early browsers were capable of accepting a combination of only three face names together in a face= attribute value..

These days that is no longer true. Four or five could be used.

We combine font face names in a hierarchical list in case the visitor does not have our primary choice(s) on their PC.

So...
  face="arial, geneva, helvetica, sans-serif"
  face="verdana, arial, Geneva, helvetica, sans-serif"
  face="times new roman, times, serif"
  face="georgia, times new roman, times, serif"

• Note: I always include "Geneva" with a sans-serif font to cover old Macs; and include it before helvetica which really looks yuk at smaller sizes.

Microsoft used to offer a basic font face package for download so people could bring older / other Operating Systems up to date. No longer, these days fortunately (it is early 2006 as I add this) it is not so much of an issue and both Macs and various Lynix flavour OS support much the same default set for web browsing.

< >

"Img Src" HSPACE and VSPACE Attributes
07




vspace="4"

hspace="4"
08 The difference in image spacing between the pairs of images above is obvious. With some Table cellspacing trickery we can divide objects with a controlled amount of space between. However this is not always suitable or practical.

What you can add to <img src.... tags are one or both of the attributes, hspace="??" and vspace="??". The ?? here would be replaced with the space ON BOTH sides or top AND bottom of the image in pixels.

Try it in your new test page with the 3 picture frames images downloaded for lesson 2 part 1. Place them as I have and adjust the space between each.

PS: Use the <BR> tag!
If you have forgotten how to place multiple objects below each other and without any space at all, don't use the <p> paragraph tag for it puts them all one text line apart.

Now, when you have tried that, place just one image on your test page and include some text either side of it. ie
<p>For he's a <img src="??" width="?? height="??" hspace="10"> jolly good whatsit!</p>

The result shows us that any object next to images with the vspace or hspace attributes will be "pushed" away from those images.

< >

What's an ENTITY or ISO::Number Character?
09

Ok, for this you can cheat a bit (hmmm! as if not already!!). Drag the cursor over the following paragraph <p>....</p> text on this page, right mouse click, and COPY that text. Then paste it in to your second page. People on Macs will have a simple click choice.

<p>     If you have forgotten how to place multiple objects below each other and without any space at all, don't use the paragraph tag for it puts      them all one text line apart.</p>

INCLUDE the multiple spaces. Everything including the <p>....</p>.

Ahhh copying, that helped. A bit simpler for simple exercises. Now VIEW the page AND drag the side of the browser window back and forth left and right and watch the paragraph line WRAP word by word.

Now, to ADD THESE weird words shown in red; that is, between ONLY the words as shown COPY THIS <p>.....</p> text off this page ALSO and paste it below the other..

<p>     If you have forgotten how to place multiple objects below each other and without any space at all, don't&nbsp;use&nbsp;the&nbsp;paragraph&nbsp;tag for it puts      them all one text line apart.</p>

Firstly, again viewing the page, where is all that weird stuff? AND, what happened to the multiple spaces??

As for the multiple spaces, browsers have to be designed to display as many spaces as you want just so long as what you want is ONE. ALSO, ANY spaces included at the start of a line will not show at all - them's the rules.

Secondly, now watch the paragraph as you again change the browser's width by dragging the side of it.

As soon as the wrapping gets to the "don't" word, suddenly a whole bunch of words through to the "tag" word get wrapped at once, and then the process reverts back to wrapping just one word at a time.

ENTITIES
That's what that character is about. In fact it is one; an "entity". In the "HTML Code Lab" I have a list of the many basic ones at the bottom of the "Some Common Basic Tags" page. These days there are thousands; supporting non-English languages too.

However &nbsp; is a VERY special character definition, it is called a NON-BREAKING SPACE. Perhaps now self evident from the last exercise any text or other objects for that matter will not be "wrapped" around to the next line at any point where that character (displayed as a space) occurs. We added them between a number of words so they all wrapped as one block. Below, I have used the same char to add spaces at the beginning of two lines 'cause as we now know spaces won't display.

We can code "entities" or ISO Number characters into our html to reliably display special characters like ©copyright (&#169;) and ®Registered (&#174;) and Trademark (&#153;) signs, bullets (&#149;), &ampersands (&#38;), "double quotes (&#34;), and heaps of other good gear often needed in our documents. In advanced programming for dynamic web pages some of these "entity" represented characters are integral to overcoming security issues where "it's an entity char or not acceptable.

You will come across two representations of the same character. They are:
   ISO::Number ( ' & ' = &#38; ) numbers
   HTML::Entity ( ' & ' = &amp; ) words
   ISO::Number ( ' " ' = &#34; ) numbers
   HTML::Entity ( ' " ' = &quot; ) words

   ISO::Number ( ' © ' = &#169; ) numbers
   HTML::Entity ( ' © ' = &copy; ) words

   ISO::Number ( '   ' = &#160; ) numbers
   HTML::Entity ( '   ' = &nbsp; ) words

NOTE they both always begin with an & and end with a ; semicolon when written in to the html code. The number method additionaly includes a defining # hash sign..

So if you didn't have a headache before, chances are you do now. BUT NO you are not expected to know all 42000+ characters. You will however soon pick up a common four or five; depending on the content of the documents produced perhaps a few more.

< >

A bit ABOUT LINKS
10

Right-oh, you have your 'you beaut' index.htm page and now another with a name of your own choosing holding all sorts of stuff from above.

• How do we link between the two pages?
• How do we keeping one page open, open the other in a NEW WINDOW?
• How do we jump from one place on a page to another; even in another page?

Observed amongst students too I even think I remember I got a kick out of finally coding to go from one page to another and back again. "linking" pages is what brings a web site alive - sorta; what power!

A link tag is made up of a pair; <a attributes>????</a>.

So, the "a" tag has a number of variations and uses. Some methods define hidden internal linking like jump from one topic to some other, or define the place of the other topic to be jumped to on the same or another page. Another is the most common hyperlink method for going to another page (on the same or another web site).

Therefive, on this other page of yours NEAR THE TOP add the following line.
<a href="#below">Go below</a>.

Assuming you have a fair bit of stuff on the page from the above exercises, down near the bottom add the following line.

<p><a name="below"></a>And here is some blurb at the bottom.</p>

Yes I know, that last one has no stuff before the closing tag. If it did it wouldn't display as a link anyway. What I hope you also noticed is the common word "below".

That can be anything just so long as in both places used the words are exactly identical (case sensitive). The "href=" hyperlink reference attribute is the command.

When the browser encounters a "#" hash character in a hyperlink the browser knows it is to look for something called an "anchor". The other link tag at the bottom of the page uses the "name=" attribute as an identifier - something the command is looking for and if one exists with that exact same word.

Now try it. View your page and see if the page scrolls down to the "name=" tag position on the page. If so do you think you can copy the idea? Only do so reversed so you can jump back up to the "Go below" position on the page.

Simple really all you need to do is duplicate the tags, change the common identifying word, and reverse the placement relative to the other tags.
 

11

Now for some fun. Add to the FIRST <a tag above as follows...
<a href="index.htm#below">Go below</a>, AND ADD near the bottom of your "index.htm" page the exact same tag you first placed at the foot of this page...
<p>
<a name="below"></a>And here is some blurb at the bottom.</p> .

Try viewing your page again and see if, instead of scrolling down on the same page, your "youbeaut" index page is auto opened and the window scrolls down to that line of text on the index.htm page.

Of course, I hope it all worked OK and you are amazed at your coding skills.

BUT IF there is a problem the most common where page names and other references are concerned is not just misspelled words BUT USE OF DIFFERENT CASE characters.

In fact one of the most troublesome areas of HTML web site programming for newbies is the use of "great long upper and lower case with spaces" naming habits picked up when using WinPC and Mac computers - keep them brief, all (preferably) lower case.

On the most common of web servers, the Unix flavours, character "case" is critical and often miss-matched because of the bad habits explained.

Here we have learnt the use of link tags as ANCHORS. That's right that's the correct term used to describe the <a name="below"> tag, "anchor". Anchors are invisible. The "href=" link command pairs with the # linked to them are not.
 

12

Howhoover, now remove the "#below" from that upper tag on this the second of your pages, i.e. <a href="index.htm">Go below</a>.

Simply by doing that you have turned that link tag pair into a good old fashioned hyperlink to another page; nothing special.

Imagine (or try it on your own with one of the already used images) replacing the text between <a href= tag pairs with images, more commonly but not only, button images.

Ahh but I promised to introduce the "in a new window" thingy.

Ok. Ready for some real heavy programming. Change that same hyperlink tag to include the following "target=" attribute...
<a href="index.htm" target="_blank">Go below</a>.

Expecting more? Heh. Not so heavy and complex after.all Try that change and you should now end up with the index.htm page opening in a new window keeping this other page open too. Wow aye. What power, what control.

There are a number of "target=" attribute values. When you advance to placing web pages in "frames" (multiple pages in the one browser window) the need for the other values will become clearer. Here they are in brief; values begin with an underscore.

  • target="_blank" open destination in a NEW Browser Window instance.
  • target="_top" open destination in the top most level of browser window; i.e. if the link resides in a page in just one of multiple "frames" then jump out of frames entirely displaying only the destination page.
  • target="_self" open the destination page in the same frame used by the page in which the link resides.
  • target="_parent" if a page is in a frame within a frame, replace the secondary '*frameset' page with destination *frameset page - "_top" is inappropriate..

*Framed window views are actually a number of pages each displayed within a master page which itself is invisible. That master is referred to as the frameset page. You can later learn more in my 'HTML Code Lab' "Creating Frame Sets" tutorial page..

Now you can believe me. By making a few simple changes to <a linking tags you can perform a number of different link tasks.

<

go to top of page

Return to Session 2 intro

Offline Link to this Tutorial @ dtp-aus.com


Over 120 pages: All major topics divided into Classrooms
Free Backgrounds & Buttons! DTP and HTML "My First Page" HTML lessons
Tutorial Text Search Perl CGI Scripts Typography & Layout
4 pages of Links Visitors Book Perl Scripts Forum n/a
Free Links page Feedback Form Q/A contact Forum

Associated Domains: hostingnet.com.au • hostingnet.com • hostingnet.net - HostingNet
pages Designed & Published - Ron F Woolley
e-mail 1997 - 2006