www.dtp-aus.com

Session 2 intro
The "First HTML Page" Tutorial

Return to Session 1 | Proceed to Session 2 page 2
Play with Copy and Paste Extras in a new window

. As you step through the tasks and detailed comments, copy supplied images into the same folder as your excellent first page on your computer. This is supposed to be a folder named 'mysite' described in the preparation notes.
00 Drag the index.htm file to your Text Editor Icon and open it ready for code entry (if not already open). Every step will be explained after the code is entered so you can refer to it, and read each paragraph fully before attempting any of the tasks.

Remember, be patient and take in all the explanations as you go and please, do not permanently alter the objects, except as instructed, because they will be needed while you progress towards the final tasks.

In case you really get stuck, I have included the current HTML text changes. Realise that simply copying these will not assist your learning very much at all. Learn to enter, read and check the code your self at an early stage.

< >

Tidy up that Code!
01 Now for some house keeping! I will let you cheat a little by asking you to view the text first, as it should appear (approximately) after the next changes. One of the best ways to assist your learning curve is to view the code of pages you visit on the Internet, but of course you have to be able to read it. This tutorial is designed in such a way as to teach you this as you go rather than only describe individual tags separately and hope you can put it all together and debug yourself - as many tutorials do. And few offer worthwhile explanations as you go.

You will view code similar to the code you have used for Session 1, layed out in an easy to read fashion with plenty of space and easily followed tag pairs and nesting.

Also added to the code is a handy new tag that does not display or do anything , except retain remarks or 'Comments' within the code. A pretty useful tag really and you will find it in the code of many web pages.

This 'Comment' tag is normally written as <!-- ????? --> where the left arrow and exclamation mark are mandatory as is the closing right arrow. It is a single tag without a closing pair but can be broken to encompass your written remarks or even hide page objects that the browser will ignore. If broken it must be nested correctly of course.

View the prepared code below, observe the layout and the 'Comments', then layout your index.htm code text for easy reading also, and as you understand the break-up of the tag commands - without referring back to the sample. Also enter a couple of comments as I have. i.e. <!-- blah blah  -->.
Simply, just make it easier to read similar to the sample.

Then Save your index.htm text file and Reload or Refresh it into your browser, or double click on the file name to open it in your browser. The page should look exactly the same as it did at the end of Session 1. Watch out for missing objects and portions of code appearing on your browser page as uncontrolled text, caused by mistakes chopping up the lines etc..

Now view the altered code here.

<!-- This a hidden Remark. The following text shows spaced and realigned formatting
to help you read your tags more clearly
-->

<html>
    <head>
         <title>This is my first HTML page</title>
    </head>

<body bgcolor="#000099" text="#FFFFFF" link="#CCFFFF" vlink="#800080">

<center>www.mypage.com</center>

<font color="#FFCC66">
     <h1 align="center">My Smart Page is Here</h1>
</font>

<p align="center"><strong>This is the first HTML page<br>
that I have ever seriously attempted in my life.</strong><br>
The teachers name is Ron and so far he has<br>
bored me to tears, but he promised that it will all come together soon.</p>

<hr width="75%" align="center">

<center>
<h3>This is my first list</h3>

<!-- Begin my first Table -->
<table border="0">
    <tr>
      <td align="left">
         <dl>
              <dt>My thoughts so far:
                  <dd>Now I am starting to see the light.
                  <dd>HTML coding may not be so hard afterall.
                  <dd>I will soon be able to read and understand other source code.
         </dl>
</td></tr></table>
<!-- End my first Table -->

</center>
<hr width=75%>

<center><a href="#top">go to Page Top</a></center>
</body>
</html>

Keep the formatting of your code open and easy to read from now on.

< >

RGB and Hexadecimal COLOUR OPTIONS
02 The next tasks are an introduction to how the Hexadecimal colour values are arrived at or assigned from RGB colour values

You will now change the page background colour to LightGoldenrodYellow and the body text to a darker colour by entering new Hexadecimal values. My 'Mini Colour Picker' will explain a little more about colour choosing for the web and the HTML Tutorials will later explain it in full.

Go to the Mini Colour Picker and record the Hexadecimal values of these patches:
(a light fawn, an ochre and dark green) then return here please!
ie first and second on the lower right hand side of the chart plus the dark green on the top row

03 Change the <body> bgcolor="#000099" option to bgcolor="#??????" (new value fawn) making sure that you keep the hash sign.
04 Change the <body> text="#FFFFFF" option to text="#??????" (new value ochre) making sure that you keep the hash sign.
05 Change the <font color="#FFCC66"> option before the <h1> tag to
<font color="#660033">
06 Insert into the <strong> line, the <font color="#??????" (new value dark green) tag and option. i.e. <font color="#??????"><strong>This is the first.....
07 Insert into the next line, the </font> closing tag.
i.e. .....in my life.</strong></font><br> with a correct nesting pattern as: <font....><strong>...</strong></font>
View of new Background and text coloursSave your text file and Reload or Refresh it into your browser. You have now changed the background to a light fawn colour, the body text should be a slightly darker ochre colour and the two bold lines of text under the main heading will be the dark green. The <h1> heading should have changed to a dark purple.

Always remember to include the hash sign (#) in any hexadecimal tag color= option.

Don't like the colours?. Be patient because you will have to change them later to suit other additions to the page.

<body bgcolor="#FAFAD2" text="#DAA520" link="#CCFFFF" vlink="#800080">

<center>www.mypage.com</center>

<font color="#660033">
     <h1 align="center">My Smart Page is Here</h1>
</font>

<p align="center">
<font color="#009933"><strong>This is the first HTML page<br>
that I have ever seriously attempted in my life.</strong>
</font><br>
The teachers name is Ron and so far he has<br>
bored me to tears, but he promised that it will all come together soon.
</p>

<hr width="75%" align="center">

The seemingly rather complex method of selecting colours for web pages is quite normal. Once used to the process it is little bother. Later, do pay attention to the tutorials on the Web Safe 216 colours and how the RGB values can also be used to match chosen colours in bitmap images.

Why haven't I?

Them what's in the know will be familiar with "RGB" and "NAMED" colour references often used in the font color= attribute too. Well, learning all this stuff is difficult enough with breaks to walk the impatient dog and eating dinner before it gets cold (and possibly wearing it if it does!) and blah etc. So LATER you can discover these alternatives within the "HTML Colour Lab" pages area.

< >

Changing a FONT FACE style
08 Fonts for computers are strange things, they make people want to have them. On the hard disk, floppy disks, in cupboards, under shelves, in fact Desktop Publishers seem to be surrounded by them even though most will never be used. However current and early HTML standards allow the reliable use of perhaps only four or five.

Consider that the default font face style used by browsers is a Roman style, an easily read face that has serifs on each character (little hooks and points around each character), plus each computer platform and even System Software version can have slightly different default Roman fonts. The Mac system might supply Times as the default while Win'95 could offer Times New Roman and earlier windows had Times Roman. Each of these usually have at the very least a slight difference in letter spacing and character widths which means that the same web page can layout differently on other computers.

A default non-serifed font (Sans Serif) is also made available by the System Software in each computer and they vary too. So our pages are rarely going to look the same as it is viewed by surfers around the world, and we must not lose sight of this fact. The number of pages I come across that look a little weird and I find they have embedded in their code, font tags referring to fonts that the designer had on his/her machine and thought looked terrific, yet few others around the world would have on their machines. The <font> tag option that gives us some relief is face="font name".

The widely used option found in many web professionals HTML code is face="Arial,Helvetica". Multiple choices are allowed, separated by a comma, and here Arial covers recent versions of Windows System Software, loaded by default when Windows is installed, and Helvetica which is likewise installed by Macintosh and Lynix System software.

Not including the face= option means "use the default Roman style" while Arial and Helvetica covers around 80%+ of computers when we want to include a Sans Serif font. Using anything else is taking a big risk for when the font face is not matched, the risk these days is that a Font Management System residing on many computers will decide on another totally different font altogether rather than the default serif.

Now lets try this multiple choice option in your page.

09 Insert in the <font> tag included previously in the first two lines of the once long paragraph, face="arial,helvetica".
i.e.
<font color="#009933" face="arial,helvetica"><strong>This is the first.....
Save your text file and Reload or Refresh it into your browser. You have now changed the dark green text to a Sans Serif (no serif) font - if either of those fonts are on your system. Mac owners might try adding ',Geneva' to the option also (note the comma). When successful return here - Back Arrow please!

Once you understand and accept all this theory, font usage should be the least of your problems because there is not much you can do about it!.

<p align="center">
<font color="#009933"
face="arial,helvetica"><strong>This is the first HTML page<br>
that I have ever seriously attempted in my life.</strong></font><br>
The teachers name is Ron and so far he has<br>
bored me to tears, but he promised that it will all come together soon.
</p>

The W3C is currently looking at ways to implement a wider font choice for HTML pages (download special net fonts to the browser with the page?? etc. etc.), but even if it appeared tomorrow, how long would it take before we could rely on most of the worlds computers using the required new browsers and HTML code. One year?, probably closer to two. Realise that only a portion of the worlds computer users have or need "you beaut" modern machines and software. So don't be too clever with fonts!

Just for fun while the <stong>?????</strong> tag pair is fresh in your mind try a sizing tag BY TEMPORARILY changing BOTH the "strong" tag pair to "small". Thta's right, to <small>?????</small>. Save and view the result.

No longer bold the text has gone real tiny in size. Neat huh! Well it is to nerds but maybe not so exciting to the rest of us. Still you have seen it in action.

NOW CHANGE the "small" tag pair to <big>?????</big>. Whoowa! that makes the text appear larger. So what those two tag pairs do is increase the tagged text DOWN one value in size and UP one value in size.

***NOW CHANGE the "big" tag pair BACK TO "strong".

< >

Including BITMAP IMAGES
10 Bitmaps. You can paint them (in a painting program), export a drawing as one (from a drawing program), scan an object as one with a scanner, and even download them from Digital Cameras. But after that you have to learn the tricks used to make them both suitable and efficient for the Internet.
>     >
   
Again just to wet your appetite, I have created two simple buttons. One using solid colours only (left) and the other using antialiasing (right). Antialiasing is a process where a foreground colour is mixed with the background colour to smooth the transition between contrasting pixels - seen in the enlarged right hand button. Both originals were created separately, I did not just blur the first button.

The outcome - one image's file size is 464% (4.6) times larger than the other - one has seven different pixel colours to record and the other has 100.

These images have been included just to make you aware at an early stage that there is more to web page creation than contolling the tags. And perhaps the reason many pages take so long to download is because all those pretty buttons and woozers often included are not optimised for telephone line transmission.

If it is a commercial site that takes forever to download, that site will lose many people that just couldn't wait and surfed on elsewhere. Studies have proved that a large proportion of surfers react this way, while many more simply view pages with the "show images" options turned off in their Browsers. Do not think that just having pictures, buttons and good layout will make your pages a success, no matter how much work went into their creation.

11 That was just a starter, as most of the learning about web bitmaps comes later, so for now you will make choices from images downloaded to your computer.

Click on an image below and the original should load into a new Browser window. Then click on the full sized image with your Right Mouse Button (Mac, hold the Mouse Button down when over the full sized image), and select 'Save As' or 'Save Image As' - depending upon which Browser you use. Save the file to your "mysite" folder/directory. Repeat for all of the images. If you are offline you will have to come back to www.dtp-aus.com and save while online. DO NOT USE these thumbnails. There are three other images further down the page that have to be saved also.

carpet.gif carpet.gif surface.jpg surface.jpg stripes.gif stripes.gif
leftgray.jpg
leftgray.jpg
leftred.gif
redleft.gif

12 Once you have the sample images in your folder:
Insert
into the <body> tag the new option background="???????.???". But this time you must make a choice from one of the samples displayed above, now residing in your 'mysite' folder. The question marks must be replaced with the exact name of the file, matching upper and lowercase!.
i.e.
<body background="???????.???" "bgcolor="#FAFAD2" text="#DAA520" link="#CCFFFF" vlink="#800080">.

Save the text file and review the new page background in your browser, (you can try all of the pics if you wish by replacing the name each time with one of the others).

Modern browsers are not case sensitive, but create a habit now for consistancy, use all capitols or all lowercase and make sure you name your bitmaps the same way. Out in the real world a lot of servers are case sensitive and bad habits now may produce frustrating problems further down the track. I think most web designers use lowercase for everything, and it is easy to type!.

A problem you are sure to come across on the net is one where a background image is covered in text that is almost unreadable. Unless you have been fidling with our lesson file it will be evident to some degree on your current page.

So go to the Mini Colour Picker and select/record the Hexadecimal values of a more suitable colour for the body text and change that too.
i.e.
<body .... text="#??????"

When you have decided on one image and a suitable text colour, return here.

Change and Save your text file and Reload or Refresh it into your browser.

Now, if all went well just sit and think about the importance of that Body Text colour when including tiled background images. The same goes for the Hyperlinked Text colour too. So if you did not fix this before and it needs changing, then have a go now.  link="#??????" using the Mini Colour Picker and return.

Placing a background image into a web page is so simple. Just make sure that the image is either in the same folder as the HTML page calling for it, or make sure the name also includes a path to the files location. Most people new to web page design keep the images in the same folder as the code files and this is fine. Larger sites usually include multiple folders for easy house keeping etc. and the 'Quick Start Common Tags' topic in the 'HTML Code Lab' describes the entries for various folder layouts.

Once again there are a few things to learn when creating web page background bitmaps. The samples supplied introduce the two basic types.

One is the small rectangular bimap that gets tiled both horizontaly and verticly. The other is designed to hopefully tile verticaly only. I say hopefully because if the second  image type is not wide enough to accomodate most video monitor resolutions, then it too will be tiled horizontaly with catastrophic results.

There are computer displays around the world that use resolutions higher than 1280 pixels horizontaly, but very few thankfully. So it is a fairly safe bet to make all 'full width' background images 1300 pixels wide and concentrate on keeping the file size as small as possible. This topic is covered in the 'Image & Background Hints' page via the HTML 'WEB BITMAPS' Lab

< >

Bitmap e-mail hyperlink
13 Before placing some real pictures on your page, you must setup an e-mail link for the many visitors to your page that want to write and congratulate you on such a clever job. To do this you will use a supplied bitmap - e-mail image links are very popular. Once set up, you will know how to write an e-mail hyperlink in HTML, and connect it to an image the visitor can click on.

e-mailSave this image into your "mysite" folder/directory. The same folder containing your index.htm code and the background images. Retain the file name - "mail.gif".   I obtained this image from one of the many "free web images" sites found on the internet.

At the foot of your code just above the local hyperlink that scrolls the page back to the top - <center><a href="#top">go to Page Top</a></center>  - add the following code.

i.e. <a href="mailto:??????@????.???"><img src="mail.gif" alt="??????@????.???" border="0" align="middle" width="45" height="52"></a>. The question marks are to be replaced by your e-mail address.
Note the full-colon after the word mailto.

That is quite a hand full so read and write it carefully and double check. Before testing this new code read through it and see if you can get some idea of what it might mean before I explain it. Don't worry one bit if it is beyond you.

Save your text file and Reload or Refresh it into your browser. If you then have an animated e-mail image near the bottom of the page every thing is OK, allmost! Return here - Back Arrow please!

<hr width=75%>

<a href="mailto:??????@????.???"><img src="mail.gif" alt="??????@????.???" border="0" align="middle" width="45" height="52"></a>

<center><a href="#top">go to Page Top</a></center>
</body>
</html>

Alignment: The e-mail image will be aligned at the left of the page by default. How can you place it neatly in the middle?  HINT: Move only the <center> tag currently on the next line. Try it and return here - Back Arrow please!

The <a href=.... tag is the hyperlink reference tag. This tag must be accompanied by its closing tag, and any objects(s) enclosed by the tag pair will become an active hyperlink. The 'mailto:' command tells the browser that when the image is clicked, the users e-mail program must open with the mailto: address inserted in the 'TO' box.

By replacing the image source tag with text, that text will appear on the page, hyperlink underlined, and will react the same as when the image is clicked.
ie
<a href="mailto:abcd@defg.hij">Send me e-mail</a>  ( Send me e-mail )

NOTE: Should you include an e-mail hyperlink requesting the visitor to respond to a specific subject, ie:
"Report
<a href="mailto:abcd@defg.hij">Errors</a> on this page", then you can prepare the Subject line by adding the following to the hyperlink:

"Report <a href="mailto:abcd@defg.hij?subject=Error Report for thepage.htm">Errors</a> on this page".

Try it by clicking here: ( Report Errors on this page ).

It is the extra ?subject=.... added to the hyperlink that makes this work - note the question mark immediately before the word 'subject'.

< >

Placing an image, and summary
14 Well, the secret is out. When asked to read the tags above after you entered them, you may have recognised the one single tag that tells the browser what image to use and how to draw it - <img src=?????>.

As you did before, click on each of these three images and copy them into your "mysite" folder/directory. DO NOT USE these thumbnails.

mypic1.gif  mypic2.gif  mypic3.gif

You are now going to place the three images on your page. Make some space just below the bottom <hr> tag in your source code (html text). Then on a new line in the space you have created:
insert
<p>My <img src="mypic1.gif" align="top" width="124" height="133" alt="My first picture"> picture 1</p>

On another new line:
insert
<p>My <img src="mypic2.gif" align="middle" width="124" height="133" alt="My second picture"> picture 2</p>

On another new line:
insert
<p>My <img src="mypic3.gif" align="bottom" width="126" height="136" alt="My third picture"> picture 3</p>

If the images have the right name, your text entry is acurate and the images are in the same folder as your index.htm, then Save your text file and Reload or Refresh it into your browser. When successful return here - Back Arrow please!

The text on each line relative to the images should have changed from top alignment to bottom alignment. Cool huh? ahem, sorry! Now add the align="center" to the <p> tag on the second new line of code and align="right" to the <p> tag on the third new line.
ie <p align="center"> and <p align="right">. Leave the first line alone because it defaults to left alignment.

Save your text file and Reload or Refresh it into your browser. When successful return here - Back Arrow please!

Whether you have text with the image or not, this is a simple way of placing images across the page.

To place multiple images on the one line, simply enter multiple image source tags.
ie
<p align="center"><img src="mypic1.gif" ...><img src="mypic2.gif" ...><img src="mypic3.gif"...></p>

To find out the width and height of a bitmap image in pixels, you will need a Painting program that will view the images and supply this information. Read the NOTE below.

Although an image source tag can do without them, the width=, height= and alt= image source attributes are very important options. Later, learn about them in the HTML 3.2 Tags tutorial. The align= attribute aligns an image relative to the text line the image is placed on (top, middle, bottom). There are other maverick Netscape attributes that generally should be avoided.

 
NOTE:
Now go over your code and turn it into some thing more presentable. Write your own paragraphs and lists etc.

I have included a simple page of copy and paste options that you can practice with. They do not have explanations, but at this stage you should be able to understand how they operate by example. Enjoy! And please give me feed back about these lessons, and how they have helped you master the basics of creating HTML Code.

The three frames used above are from the 'Free Web Images' and 'How to' pages accessed via the HTML Code Lab. The How To pages are an excellent introduction to Painting Programs and their common basic tools, and you will learn how to insert pictures and text into these and other frames - ideal for the person that has hardly/never used Photoshop/Paint Shop Pro etc.
 

Consider - On this page you have learnt:
  • that writing code in an open structured way eases debugging considerably.
  • how to read and convert RGB and Hexadecimal RGB values.
  • to consider the colour of text in relation to background colours/images.
  • how to include tiled background images
  • how to include font colour and style and size changes.
  • that it is best to include several popular font face names, and that few computers have the same fonts as yours.
  • how to implement basic images into the page layout, plus appreciate the extra learning necessary for creating web bitmaps.
  • how to include image and text e-mail hyperlinks.
  • the basic image source and alignment attributes for image placement.
  • that writing such simple! computer code can still be quite rewarding, perhaps fun

I hope you patiently followed the steps, and most importantly,
the comments and explanations
.

go to top of page

Return to Session 1 | Proceed to Session 2 page 2
Play with Copy and Paste Extras in a new window

Offline Link to this Tutorial @ dtp-aus.com

The Mini Colour Picker.

I have created this mini colour picker so that you can easily choose the colour values needed in the 'First Page' Tutorial. Included are 8 Web Safe colours and 8 non standard colours.

You can use any colour you want to in an HTML page but there is a standard 216 colour palette that offers a choice of colours which will appear unchanged on almost any computer platform / browser combination. The System colour palettes in Win '95 and the Mac are quite different and this occurs with many other computer systems too.

We must give such matters a lot of thought when creating web pages because it is highly likely that others will not see our page colours the same as we do when we create them. Web Safe Colours are covered in detail in the dtp-aus.com HTML Tutorials Colour Lab.

To use this chart read the paragraphs below, then record the Hexadecimal values of the desired colour(s) and return to the Lesson. Black = #000000, White = #FFFFFF.

Sample colours

Each patch displays the RGB red, green and blue colour values which can be used to match a colour in any Painting program like Photoshop or even PaintShop Pro. Under these patches are the references used to convert Web Safe RGB to Hexadecimal, others are listed below.

A Conversion Sample using the web-safe values:
i.e. values of 255R and 102G and 51B = 255|102|51 = FF|66|33 or #FF6633.

Here is a list of other Decimal-to-Hex values used in the chart above:

D| 32 | 43 | 122 | 127 | 135 | 138 | 152 | 160 | 165 |
H| 20 | 2B |  7A |  7F |  87 |  8A |  98 |  A0 |  A5 |
D| 206 | 210 | 212 | 218 | 221 | 226 | 250 | 252 |
H|  CE |  D2 |  D4 |  DA |  DD |  E2 |  FA |  FC |

As hexadecimal values are mostly used for web page colours, I have an 8bit Conversion Chart viewed via the HTML Colour Lab that can be used for general work.

This page was set with the Lucida Sans font. Other preferences are Arial and Helvetica.


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

pages Designed & Published - Ron F Woolley
e-mail 1997 '98. Last Revised:  Friday, 31 October 2003 22:04