In the first page in this series, I cover how to set up an account, master FTP (to put your page on the server), and the basic skeleton of a web page.
In this page, I will show you some of the things you might want to put into your webpage. I always create my pages "by hand", with a text editor. Even if you aren't that techno-phobic, you will find information here that could be useful to you. However fancy your html generator is, "under the cover" the elements I am going to discuss will be present.
A few reminders....
1) When you prepare text for display on the web, you have to type the text, and you have to put things in to tell browsers how to display that text. For instance, the previous sentence has the following in it....
....type the text, <i><b>and</b></i> you have...
The <i>, and the matching </i> later in the line are called "HTML tags".
Tags usually come in pairs, although there are exceptions to that rule. When the pairs are tagged, the second tag of the pair has a "/" in front of the rest of the tag.
2) Pairs can be nested. In the example above, the <b>...</b> pair is nested within the <i>...</i> pair. It may help you to type both members of the pair before typing whatever you want to put between them.
3) Quick reminder: Please do not write things ALL IN CAPITALS. Neither things your readers will see, nor the tags that control how it appears, e.g. "head", not "HEAD", please.
4) Allow me to be "clever" for a moment? If you will, I can say that a webpage consists of....
<html> (or substitute) ... and some stuff... and... </html>
True! And "clever". Just not very helpful! But it is a start. Now all you have to do is master the "stuff". Let me help...
The two great blocks of any page are....
<html> (or substitute) <head> ... first part </head> <body> ... other part </body> </html>
Enough reminders! On to some new stuff!
Blocks of text, like this paragraph, and the short paragraph before it, and all the others on the page, are best enclosed in a <p>...</p> pair. Try to avoid creating the vertical spaces in your document with <br>s. If you use Firefox, click View ! Page source (or press ctrl-U) to see what your browser is using to create the page you are looking at. (Other browsers let you see the underlying page, too.)
You can put text into your page which you will see when you are editing the page, but which will not be shown when your page is displayed by a browser. Such text is called a comment. Use them generously. For instance, in the paragraph above, visible to me, but hidden from viewers is the comment "Check how to get other browsers to show page source."
You make text into a comment by putting a <!-- in front of it, and a --> after it. (Note that this is an exception to the usual <something>...</something> pattern.
Note also that using hyphens (-'s) inside a comment can lead to tears. I think you can get away with one or more hyphens separated by a space, but don't put two hyphens in, next to each other, unless it is as the start of the --> "end comment" tag.
You can use lovely, simple Notepad to edit the source of a webpage, but if you use Textpad, you get "syntax highlighting." This is very helpful. For instance, it displays the tags in a bright blue, and comments in green.
If you use no other comments, do yourself the following favor: Near the top of the page, insert something like....
<!-- Arunet hh.htm Revised 22 Dec 08 Spellchecked 18 May 07 hh.htm started 15 Dec 07-->
... and remember to keep the information up to date.
"Arunet hh.htm": The file this comment is in is called hh.htm, and it is on the Arunet server.
"Revised 22 Dec 08" This tells me the version of the file. If I change it again before the 23rd, the new version ID is "22 Dec 08b".
"Spellchecked..." Obvious, I hope!
The final comment tells me when I started the page in question. Not "important", but fun.
That's enough for now about comments!
You can skip over the information about links which starts on the next line.
Where would the world wide web (WWW) be without links! So how do you make them?
A moment ago, I created a link to the page for Textpad. This is a simple link, as explained in the first page of these "How to do HTML" pages. At the heart of it was....
...use <a href="http://www.textpad.com">Textpad</a>, you get...
It is "just" <a...> ... </a>... just like the HTML you've seen already!
Well, okay, it has a few extra bits...
Instead of just <a> as the start tag, you have <a href="(address)">
The href="(address)" is modifying, adding information to the <a tag. Such things aren't rare. For instance, I can make a paragraph hug the right hand margin.....
...like this simply by putting align=right...
... inside the <p> tag that starts the paragraph. I.e. I used <p align=right>.
Going back to creating links...
The text between the > ending the opening tag and the </a> closing tag is the text that will appear, with underlines and colors, on the viewer's page. Pretty straightforward, really.
We need to look at the "address" part for a moment.
If you want the viewer to be taken off to someplace else on the internet, you specify where in full, as I have done above for the Textpad site.
Other times, you will be sending the viewer to another page which is stored in the same place as the page he/ she is looking at. In those case, give just the page's name. For instance, if I want you to go to the first page in this series of "How to create HTML" lessons, I use....
go to <a href="hh5.htm">the first page</a> in this series
(hh5.htm is the page's filename.)
So that's links covered... mostly. Let me give you anther trick. If you put target="_blank" after the " ending the address specification (with a space between the " and the word "target", then the page will open in a new tab. I try not to overuse this opportunity. Do complain if you think I do overuse it!!
Just before we leave links, I want to show you how to do INTERNAL links... links between parts of a single page. At the start of the "links" information, there was a link saying "You can skip over the information about links." (It is considered bad form to say "click here to...", by the way.)
Arranging such internal jumps is done in two parts. The first is the link, which is very like "ordinary" links....
...You can <a href="#gotoAfterLinks">skip over</a> the information...
The "magic" is in the "#". That says "the name of an internal link anchor follows". In this case, the name was "gotoAfterLinks". The page's author makes the name up. "goto" is not required, I just find it helps me recognize the name for what it is.
Besides the link, you need to mark the place the browser should jump to. This you do with something like....
... which really isn't very complicated, is it?! I suppose it is a little "hard" in that there's nothing between the paired tags. Notice that we are again seeing something extra modifying the action of the basic tag, of the <a>. Also, note that there is no # in the text of the HTML at the destination for the jump.
I sometimes have trouble getting the jump just right... be careful that what you want at the top of the page is there after the jump.
Images: I told you that listing your eddress on your webpage with ordinary text is not a good idea; I suggested using an image.
Create an image. The jpeg and gif formats work well. Make the image no bigger than necessary... 500 pixels wide will probably suffice. Save it, let's say as eddress.gif, and upload that file to the same place your web pages live.
Once you've done the above, all you need in your webpage, to show the image, is....
... but you should add....
<img src="eddress.gif" alt="Graphic of eddress">
The text in the "alt" attribute is what users will see who have turned off images. (Some people do, you know... they may have a slow internet connection, or they may be blind. Blind people "look" at the internet? Yes... they have computers to read the screen to them. And the reader will "speak" whatever is in the alt attribute.)
And here's another attribute for the img tag...
<img src="eddress.gif" alt="Graphic of eddress" width="80%">
Don't let the width attribute make you lazy. In a maximized browser, look at the image with no "width" specified, or with width="100%". The image should be just about the right size. However, using Width keeps the image the size you want, as a proportion of the browser's window, even if the user has "restored" the window so that it isn't using the whole screen.
(If you have to use Width to get the image to fit on a full screen browser, then you are making your reader download an unnecessarily large file.)
"The correct form of (verbal) address to a Church of England bishop is "My Lord bishop...""
Who says so? Miss Manners? I've always wondered about these pronouncements of "rules".
Happily, in the world of computers, there are recognized authorities. Unhappily, as the Encyclopedia Britannica once whined, "If you have a computer and can fog a mirror, you can publish on the internet." If you want to know the right way to do HTML (version 4.01)... and you have a strong stomach... go to w3.org's page. (Don't, by the way, click on the links there... just scroll down the page to get into the Good Stuff.)
What you find there is the right way to use HTML... if you can decipher it. And if you can find the beginner's question answered in the comprehensive "Bible". But if you persevere, you'll soon be reading it quite easily. Try "looking up" something you already know the answer to.
For something a little easier to read, and just as authoritative, visit their beginner's guide to some of the key concepts
I don't have a favorite easy to use HTML reference site. Many, many sites try to help with how to create HTML. Just remember that what you read may be wrong. Wander in the wonderful world of Google. If I search on the tag I'm trying to use, I often stumble onto something to answer my question before too long. The WDG reference is pretty good.
You may not, at first, thank me for telling you this, but when you have "finished" a page, go to the W3 HTML Validator, enter your page's URL (www thingie) and prepare for a shock: Your page will probably be rejected as "terrible"!
But persevere! Once your page passes the W3 tests.. and you CAN get it to do so!!... it will start scoring better at Google, for a start, and you can be more confident that people who access it will see what you intended them to see.
When you submit your page, and the list of errors comes back, don't attempt to fix everything in one pass. Working from the top of the list, fix as many of the errors as make sense to you. When you've done a bunch, or when you start to encounter puzzles, re-save your page, re-post it to your server, and hit the "reload" button on your browser (assuming it is still displaying the report of what was wrong with your page.) Sometimes an error in, say, line 30 of a page makes perfectly legal things further down the page look illegal to the validator.
So much for the good news. Now for just a few little things you have to do before the Validator will be happy....
1) Replace the <html> at the top of your page with....
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2) In the <head> section of your page, include the following....
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
The nice people at W3 also have a link checking service. You just fill your page's URL in and wait about a minute (for a page with many links) and you get a report about whether any links are broken.
Remember the comments I suggested earlier? The ones giving the version ID of the page, when it was spellchecked last, etc? Once you start validating your HTML, also add comments like....
Validated (validator.w3.org) 21 Dec 08 Links (validator.w3.org/checklink) checked 21 Dec 08
(Putting the URL for the validator and the link checker in the comment saves you looking them up each time you go to re-validate, re-check!)
Page tested for compliance with INDUSTRY (not MS-only) standards, using the free, publicly accessible validator at validator.w3.org
....... P a g e . . . E n d s .....