In the previous page we prepared a web page, but, admittedly, it doesn't look like much. In this page we will cover the ways to make our page look the way we want it to, by using tags contained into the BODY element - in other words we will format the text.
Headings
A heading (or more) will make our page look much better, and will make reading easier for our site's visitors.
For this we need the HEADING tag. There are 6 levels of heading: number one is the larger size and the most important and number six is the smaller and least important (if we decide to use all six levels). Headings are used in voice browsers as well, so we should choose the level appropriate for our content and not by appearance only. There are other ways to control its appearance. The syntax is:
<h1>Welcome to my Page</h1>
for a level 1 heading. For a level 2 heading, substitute "h2" for "h1" - and so on for all levels up to level 6.
This is how our test page will look with a
heading. A definitive improvement from the previous one.
Paragraphs
A page separated into paragraphs looks much neater and is easier to read. All we need is the PARAGRAPH tag. This is one of the tags with an exception from the general tag rules: it does not need an end tag. If you put an end tag no harm is done, though.
Many people always put an end tag in paragraphs, just to be consistent.
For the paragraph tag you just put <p> in front of each paragraph. Paragraphs in HTML are usually shown separated by a blank line. Our test page will look like this.
I would also like a change of line after "Hello", but I don't want to use a paragraph, because it will put a blank line after Hello.
Line breaks
A line break is different from a paragraph in that you start on a new line, but there is no blank line before, as in a paragraph. It uses a single tag, <br> inserted where you want to change your line - no end tag is used. See our example page (look after "Hello")
It is better, but rather monotonous. What I would like is a list with bullets for the 3 items that the page is supposed to include.
Lists
Desktop publishing programs in every operating system let you make many kinds of pretty and functional lists. In fact, this is what impressed me first (a long time ago) when I first used one. This can be done in HTML too, without special software.
There are three kinds of lists that can be done with HTML:
-
Ordered lists
These are the lists, where each list item is preceded by a number. As you add more items, the numbers are updated. There are two tags used, the one inside the other: <ol></ol> encloses the whole list. <li></li> encloses each individual list item.
Our page would look like this. It looks good and neat, but I find it too formal for a personal web page. I would rather have the next type of list. -
Unordered lists
This is a bulleted list. The only difference from ordered lists is in the tag which encloses the whole list; it is <ul></ul> - the one for list items is the same. So the test page has a new look.
That's it! this expresses me better.
There is a third kind of list though, that should not be omitted. -
Deginition list
These lists contain terms and their definition and have three kinds of tags, each one enclosing the next:
<dl></dl> encloses the whole list.
<dt></dt> encloses each definition term, and
<dd></dd> encloses each definition.
Definition lists can have the feel of a table. This is how a definition list would look in your browser (scroll down to the bottom of the page - it is getting long). I have also added a second level heading to the definition list.
Anchor Elements
What on earth is the anchor element, you may ask. I used to think that anchors belonged to boats, not web pages. Well, anchor is another word for a link. The (unimaginative) Click here that you press with your mouse (or choose in some other way) to get you to another page, site or just on another part of a too long page, is an anchor. Very useful stuff and the first good thing that made HTML so popular.
Links to a web page
In our example page we spoke of three kinds of information one could find in our site (namely: personal information, undefined pictures and some - hopefully interesting - links). So how does the visitor find this information?
By clicking on the links of course.
An anchor element consists of <a> and </a>, but it needs an attribute. This attribute for a link to another web page, whether on the same site or another site, (the one used most) is href (hypertext reference?). You must be careful in typing the link URL correctly.
Some people always use the full (or
absolute
) url in their HTML links (the one starting from
http:// ), even in those linking to pages in their own site. The latter is not so convenient.
When you make web pages, you want to check your links in your own computer first, and this is impossible with absolute urls. Also, when you host your pages in a different site, you must change all the links so that they point to the new site. That is why you can use a
relative
url for links in your own site.
If all the files of your site are in one directory, a relative url consists only of the file name and extension. If there are subdirectories, the name of the subdirectory must be added, so long as your HTML files are all in the root (top) directory of your site (a good idea usually). It might get too complicated if you have to go up and down directories for an url in your HTML. If your HTML file is in one subdirectory and your link is is another subdirectory of the same level, you put
../ before the second subdirectory name.
The syntax for a link to another web page is:
<a href="http://www.mysite.com/mypage.html">my link</a>
for another web site (absolute url) and,
<a href="mypage.html">my link</a>
for another page on the same site (relative url)
After going through all this, it is time to put it into practice in our poor web page. Don't click on the links though, because they will not work - the pages mentioned don't exist.
Links to a line in a web page
The same attribute (href) can point to a specific line in the same page or a different one. In that case, we need two sorts of tags, the one pointing to the link ( href ), with the below syntax:<a href="mypage.html#note">my link</a>links to a place in the page mypage.html, that we have named "note"
and the one on the target line ( name ), giving it its target name, with the syntax:
<a name="note">Notes</a> about ...
We will use this anchor in our test page for a very simple purpose: to let those that have reached the bottom of our page to go to the top.
Mail links
Some of us want as many people as possible to send us email, others approach paranoia from fear of spam mail; most fall somewhere in-between. But there must be an email address in a visible part of our site so that people are able to communicate with us. If we want to sell something, or just want feedback to improve our pages, an email link is necessary.
The email anchor is written like all other anchors. The syntax is below:
You can write to me at <a href="mailto:yourname@yourISP.com">yourname@yourISP.com</a>
Please notice that the email address is written twice: once on the link itself and once on the text that the visitor will see. We have not written: "click here", which is not much use anyway, because there are many people who use different browsers and email programs, or have not configured them to work together, so clicking on the link (if they have a mouse) will not launch their email program - they must see the address and copy it in order to send us a message.
So, after we have added all of the above, we have this page. There is much more in a web page body, but this one is getting awfully long. Part 2 of the BODY tags can be found in the next page.