© 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. |
| 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 -->. 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.
Keep the formatting of your code open and easy to read from now on. |
| 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: |
| 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> |
 Save
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.
|
|
|
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. |
| 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!.
|
|
|
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". |
| 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.
|
| 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. 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 |
| 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.
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. 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!
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. 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?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'. |
| 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.
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: On
another new line: On
another new line: 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. 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. 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:
|
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.
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: 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 |
| ©1997 '98. Last Revised: Friday, 31 October 2003 22:04 |
