HTML stands for HyperText Markup Language. All this means is that it takes a page of text (and maybe pictures and other content), and provides a means of marking it up so that a web browser (Internet Explorer, Firefox, Safari, Konqueror, whatever) can understand how to lay the page out on the screen. The "HyperText" part of it means that sections of the page (originally text, hence the "Text" part of the name) can be flagged to be active, to take you somewhere else when you activate the link by clicking on it or by pressing the enter key when the cursor is sitting on the link element.
<html> ... </html><head> ... </head> area at the
top of the file<title> element goes into the <head> ... </head> section of the file.
It puts text into the blue bar at the top of the browser. It also provides
a title in the browser's history, and in any bookmarks (favorites).<body> ... </body> section<html>
<head>
<title>This is my title</title></head><body>
Page content goes in here!
</body></html>This little bit is an aside, but we thought we should explain something you will see in the source code examples. It's something you can use to good effect for yourself.
In HTML, you can keep blocks of code from displaying in the page as it is rendered. This might be notes to yourself, explaining something about the page that you or some other editor need to know or to remember, or it might be as simple as named dividers within the code, so you know where you are. It can also be used to 'silence' temporarily (or permanently) some piece of code.
The syntax of comments in HTML is very simple ... a comment always begins with <!-- and always ends with -->. This, in effect, makes it one big specialised tag that the browser simply ignores!
There are a couple of things you need to remember, however:
--> should always be preceded by a space. Much of the time, you will see comments that don't observe this, and they seem to work. The W3C standard, however, specifies the space, and there is no guarantee that a browser will respect the closing part of the tag without it (although all the common ones today seem to do so).-->.< or > within a comment might cause trouble. It is unlikely, but if your page is critical and will be viewed using weird and wonderful browsers, you might like to consider deleting any, just in case.You can control text flow with the <br> tag (line break) which
simply provides a carriage return/new line and <p> ... </p>
(paragraph), which ensures a clear (empty) line above and below).
<div> ... </div> is almost the same as <p> ... </p>, except
that it only ensures a line break above and below, not a clear line.
(<span> ... </span> is in the same category, except that it does
ABSOLUTELY NOTHING! -- but it has its uses, as we will see further on!)
<br> is an example of an un-paired tag ... there are only a few of these in HTML. All other tags are paired, and must be closed by the form of the tag with the slash at the end of the text it encompasses.
Okay. Click on the "Show Page" button beneath the text-editing box (you might need to scroll that panel to find it!). What does the text look like? ... Not like a poem, I'll bet. This is because the browser does not show the source code "as is", but removes all excess "white-space" characters (space, tab, line feed), leaving only one single space to show where they might have been. Play with your poem, to see what effect the <br> tag has, the
<div> ... </div> tags and the <p> ... </p> tags.
By the way, you will see two forms of the <br> tag: <br> and <br />. The former is the HTML form, and the latter is the XML form. In XML, all tags must be closed, but tags can be "self-closing". As HTML simply ignores what it can't understand, it treats both of these as being identical.
Another layout issue is the horizontal rule <hr>.
This is an alternative to "white space" for
breaking up your page.
Here are a few variations of <hr> ...
<hr noshade>
<hr noshade size="1"><hr noshade size="6" width="40%"><hr noshade size="6" width="6">The size attribute controls the thickness of the line (in pixels)
The width attribute controls ... surprise! ... the width of the line, in pixels or as a percentage of the enclosing block (page, frame, table cell, whatever!)
The default for horizontal rules is to have 3-dimensional shading. The attribute noshade turns this off.
This is another unpaired tag, and again, we could use the XML syntax if we wanted ... <hr />. Any attributes would come before the closing slash, of course.
Later, when we cover the attributes align and color, you might like to come back and try them here, as they work well with <hr>.
These come in six sizes, from <h1> ... </h1> — the largest — to <h6> ... </h6> — you guessed it! — the smallest! Note the spacing above and below when these are displayed.
Now try out your headings — put <h1> ... </h1> round
the first line, <h2> ... </h2> round the next, etc.
HTML and the Web were born in 1989, at CERN in Geneva. At that stage, browsers were text-only animals, so the HTML markup was used only to define the structure of a page and to create hyperlinks.
In 1993 the first graphical browser Mosaic was released by Sun, and about a year later a commercial version was developed by NCSA. All of a sudden, HTML could be used to control the look of web pages! Oh boy, how the web writers took to this! But there was a lot of controversy as to whether HTML should be used to control the look of a page, or the define the structure of the page.
In late 1994, the World Wide Web Consortium (W3C) was formed. They took it onto themselves to be the defining body for HTML, and it was them who finally said that HTML will define the structure, and appearance can be controlled via "styles" or "style-sheets" ... you may have already heard of "CSS" or "Cascading Style Sheets". We will be looking at "styles" throughout this tutorial!
Now look back at those headings. The spacing, sizes and weights are all things that can be changed with styles. In the "bad old days" a web writer would choose, for example, <h2> for its size, even if it was the main heading on the page. This is no longer regarded as acceptable. The main heading on a page must be <h1>, a second-level heading <h2>, and so on. The size and appearance of the headings will be controlled by styles, as we will see as we go along.
If you want to read a little more on the early development of HTML, there is a good book chapter available at the W3C site - Raggett, D. Raggett on HTML 4. Chapter 2: a history of HTML. (Published in 1998, dated, but good for the early history of HTML!)
The tags <center> ... </center> will align
everything between them to the centre of the page.
Okay. Leave the first paragraph where it is, centre the the second.
Did it work? No? If it didn't, check the spelling of center. If you didn't spell it in the American way, nothing will happen. (Who says the Americans aren't trying to take over the world?) As a rule of thumb, if anything in HTML can have an American spelling, it will!
Now for the good news ... <center> is not the only way of doing this. It is the oldest, the simplest, and you will see it all over the place.
The next method is to use the align attribute allowed in a number of tags, including <p>, <div> and <hr>, amongst many others.
<p align="center"> ... </p>
<div align="justify"> ... </div>
<hr width="40%" align="left">
But the story doesn't end here. HTML is a movable feast! There is now a preference for using styles to control the way your HTML is rendered by the browser. Styles can be defined in external files that can be linked to by individual pages; they can be defined in a <style> declaration in the <head> section of your page, or they can be applied "on the fly" in a style attribute for any tag.
style syntax:<p style="text-align:center"> ... </p><div style="text-align:justify"> ... </div><hr> is trickier. Because text-align affects the text within the containing block, and because in this case <hr> is the relevant containing block, we need to use margin-left or margin-right instead:
<hr width="40%" style="margin-left:0">style:<hr style="width: 40%; margin-left:0">; to separate different elements in the style specification. You can also put one at the end ... in fact, it is good form to do so, so we will do this from here on!)This margin-left, margin-right is even more powerful. You can specify an actual width for the margin, using various units, amongst them being:
%margin-left: 10%;pxmargin-left: 100px;emmargin-left: 5em;0 (zero) needs no units, but all other values do!Go back to the last exercise and try it using the style method.
These come in a number of flavours.
<ul> ... </ul>
Each element of the list: <li> ... </li>
Note that the <ul> and </ul> have been set onto separate lines. It's not necessary, but it makes it easier for you to read, and easier to find any errors that might creep in.
Note also that the <li> ... </li> have not been set off on separate lines, but they could be if you want, particularly if the content of each is substantial. But notice that they have been indented (using Tabs, but we could just as well have used one or more Spaces each time). This is a common practice in programming, because it makes it easy to track where the beginning and end of the list might be. Not so critical in this simple case, but when your lists (and other structures) become more complex, this is a very good practice!
Now try out the type attribute available for <ul>. Available values include:
discsquarecircle or round<ol> ... </ol>
Each element of the list: <li> ... </li>
Layout issues are the same here as for Unordered Lists!
Now try out the type attribute available for <ul>. Available values include:
1 (the number 'one')aAiILook how this affects the bullets...
Right at the start of this tutorial we mentioned that HTML wtands for 'HyperText Markup Language' ... well, here is where the HyperText part of it comes in. WE will now start linking to other sites, other pages, and places within pages.
We introduce here the concept of the <a> (anchor) tag. This is a paired tag, so at the other end will come </a>. The anchor tag is useless without its attributes, the most common and most important being <href>, or HyperText Reference. This is a pointer to the place we want to link to. First we will deal with External links.
Reference to an external link contains three crucial elements: the file protocol to be used (i.e. the type of file we are linking to) and the address, or URL (Uniform Resource Locator), of that file or location, and the linking text (or image!) that will be used as the link point in your page.
<a href="http://www.library.uq.edu.au/">The University of Queensland Library</a><a href="www.learnthenet.com/english/html/12browser.htm">Web Browsers</a> at Learn The Net<a href="ftp://ftp.adobe.com/">The Adobe FTP site</a>http://ftp://gopher://These are all Web Sites (as opposed to specific pages within web sites). As such, they will all be sending back web pages and the protocol to use is http, so you need to use http://
The URLs are listed at the bottom, so you can cut and paste them into place.
It is useful to develop good habits right from the outset. We suggest that you first put the <a> and </a> at either end of the text you want to highlight. Remembering that the default is for links to be underlined, do you wish to undeline any punctuation (comma, full stop) coming after your link? ... probably not! Check where that closing </a> comes with respect to such punctuation. Then go back into the starting <a> tag and add the appropriate attribute(s).
These URLs all take you to the DEFAULT page of the website. This may have any name set up as the server default, and you don't know what it will be. You don't need to know, but the browser should be told that it is looking for a default file within a directory ... i.e that the URL is theoretically complete. You do that by adding the slash ( / ) to the end of the URL. The reason for this is that, if you don't add the slash, the browser sends the 'unslashed' query to the remote site and is rejected; it then sends the query, appending the slash, at which point it succeeds. Why send two requests when one will do?
These are links to pages/resources within the current website. They are simpler in format, because they need neither protocol specification (because it will always be http) nor the server URL (because it will always be the current server/filesystem). In fact, if you include either of these, the link will be treated as an external link which just happens to point to your own server ... this is valid, but it is slower and wasteful!
If your files reside on a Web Server, you have another option. The directory "/" is interpreted by the server as being the root of the website. You can use this to point to the default page of your website, or you can add a full path starting at the website root to lead to any file within that website. Very handy, as it allows you to move files around within your website without breaking relative links!
You can even make a link to somewhere INSIDE a page. At the top of the <BODY> part of this page is a target called "top".
This links to the top of this page.
(Use the browser's "Back" button to get back here if you decide to try it!)
The syntax for this is to provide a name link with the attribute name. In the link to that point, you simply put the name you have chosen, preceded by #.
<a href="#exercise"><a name="exercise"> </a> in the current file.<a href="library.html#contacts"><a name="contacts"> </a> in file 'library.html' in the current directory.<a href="/directions/maps.html#parking"><a name="parking"> </a> in file 'maps.html' in the directory '/directions' (remember, on a server, this would be the directory 'directions' sitting directly under the root of the server (or, another way, 'directions' is a directory located within the root directory).
Images can be used anywhere in your web pages. GIF, JPG (or JPEG) and PNG images are preferred, as they can be loaded by all web browsers.
The minimum syntax for an image is:
<img src="[source]">
where [source] is the location of the image in exactly the same way as you specify relative links. (You could even draw upon images located on remote servers as for External links, but this is inadvisable — the images may disappear and they may take time to load — and, as it adds load to the remote server, this practice is regarded as unfriendly!)
We advise you use at least
<img src="[source]" width="[width]" height="[height]" alt="[alternate text]">
Use the alt attribute to provide alternative text to be
displayed if the image is not loaded -- in non-graphic
browsers like Lynx, or if image loading is turned off for
any reason -- or until the image is loaded. If you don't
want any text to show, use alt="".
The alt attribute is particularly important for users with visual deficit, as the browser which reads out web pages for them reads out this alternate text, and if it can't find any, simply comes out with the word "image" — not particularly useful information!
width and height are self-explanatory. Normally you would give a number, which represents the dimension in pixels. If you do not provide this information to the browser, the page will still display, but not until the images are fully loaded. This can be an issue with slow connections and large images. If the HTML code specifies the area to be set aside for the image, the browser lay out the whole page leaving spaces for the images to be inserted once they arrive.
The align attribute works for images as well, but works
differently from text. Try out align="left", align="right".
Other values for align, which are used for (small) images within a
line of text, are "top", "texttop", "middle", "absmiddle",
"baseline", "bottom", "absbottom".
Put your image(s) in a lione of text and try these out at your leisure.
style can be used here as well. Where you had align="left" and align="right" you can use style="float: left" and align="right".
Please note the warning about image size given in the previous exercise. Remember the links we made earlier? They all had linking text that displayed within you page. But you aren't limited to text! You could just as easily hang an anchor tag round an image! You would normally choose an image representative of the content of the resource you are linking to. This brings up the concept of "thumbnail" images. If you have a large image that you want to make available to your readers, put it in a separate file that they can load if they want, or you can even link to a raw image, as the browsers can load these just as easily.
You will see a border around the thumbnail images. This is the equivalent of the underlining you see with links, and is the same colour. When an image is obviously a link, you might like to turn this border off. You need to turn it off in the <img> tag, not in the <a> anchor tag. The attribute to use is border-width, and it sets the width of any border in pixels. If you set it to 0 (zero), there will be no border.
Again, you might like to try the style approach. Check the examples, and try them out:
<img src=" " ... border="0"><img src=" " ... style="border-width:0;"><img src=" " ... style="border-width:1px 0 2px 0;">
border-width can have 1 to 4 parameters ...A word of warning
Be careful when using other people's images ... most images you will find on the web will be copyright, and you can't use them without seeking written permission from the owner! For images you can use, try searching on the net for "copyright free" or "public domain" images.
Here is summary on colour, on colour names, and an explanation of the hexadecimal codes used for colour specification.
The "HEX" specification of colours in HTML uses the # symbol, which in this context says that what follows is a hexadecimal number, and it is followed bt 3 or 6 hex "digits" (0-9, a-f). If it is 6 digits, the first pair indicate the red content of the colour, the next pair the green and the last the blue; if it is 3 digits, the order is the same, but it is as if each single digit was repeated ... i.e. #369 = #336699. The 3-digit format can only produce what are called "web-safe colours", which will display properly even on a 256-colour display!
The first thing you might like to try some colour manipulation with is text. This time, for a change, we will go straight to the style method, as the older <font> tag is thoroughly deprecated. (HTML is a moveable feast, and some parts of it are being phased out even as others are being introduced. font used to be the only way to manipulate the look of your text; now it is the one to avoid!) We mentioned the tag <span> ... </span> before, saying it did absolutely nothing. Well, here's how it becomes useful! Hang it around any text whose appearance you want to modify, and then give it the style attribute with the value(s) you want to apply to that text.
<span style="color: blue;">Your text</span> ... (named value)
<span style="color: #0000ff;">Your text</span> ... (hex)
<span style="color: #00f;">Your text</span> ... (abbreviated hex)
<span style="color: rgb(0,0,255);">Your text</span> ... (decimal)
<span style="color: rgb(0%,0%,100%);">Your text</span> ... (percentage)
<body> tag near the top. The syntax is<body bgcolor="#c0c0c0"> or<body bgcolor="silver">, etc.style,
<body style="background-color:#c0c0c0"> or<body style="background-color:silver">, etc.<b> ... </b> will bold the text between the tags.
<i> ... </i> will italicise.
<strong> ... </strong> and
<em> ... </em> (emphasised) have similar effects. Try them out.
These are old tags, but they are so simple that they are still very useful. On the other hand, particularly if you already are using one style on your text, you can easily add another ... don't forget to separate individual parts of the style definition with ; (semicolon).
<span style="font-style: italic">Your text</span><span style="font-weight: bold">Your text</span>smaller, larger — or percentages; orsmall, large, or sizes using units like px (pixels ... the most usual).<span style="font-size: smaller">Your text</span><span style="font-size: 80%">Your text</span><span style="font-size: large">Your text</span><span style="font-size: 20px">Your text</span>Note: When manipulating font sizes, be aware that many people adjust the default font size to accommodate sight deficits. If you then use absolute sizes, what you plan to be larger that the default may even end up smaller. We therefore recommend you use relative sizing unless you have some overriding reason to do otherwise.
You may find the <font> tag used in other people's code. Just to give you an idea of how it works (worked?), here is an example of (approximately) the same thing being done with <font> and with <span>:
<font face="Helvetica, sans-serif" color="red"
size="+1">Text with "font"</font><span style="font-family: Helvetica, sans-serif;
color: red; font-size: larger">Text with
"span"</span><font> but not when using <span>!)Note: This description of tables is a severely oversimplified version of the simpler of two ways of using tables. Use it as a starting point only!
<table> ... </table><tr> ... </tr><td> ... </td><th> ... </th> for Table Heading<td>, but defaulting to bolded and centred)When you first load this table, what do you see? ... There are no lines defining the borders of the cells. Change this by adding into the <table> tag the attribute border="1". Try it! Now you can see the edges of all the cells. The table itself has a border, and each cell (if it is not empty) has a border.
Tip: Even if you don't want borders in your finished table, it useful to turn them on while you are working on the table, so that you can see clearly where the cells lie. Then, at the end, you can either delete the border tag completely, or set it to border="0" (probably the better option, because if you ever want to go back in and "tweak" your table, you only need to change the 0 back to a 1).
You will see that there is space between the cells. You might want this, but you might not! In Firefox, this space defaults to 2 pixels (it might be different in other browsers!). You control this with the <table> attribute cellspacing. Set it to Zero to remove the spacing altogether, or use different values for different effects.
Now look into the individual cells. You will see that they size to fit the contents as efficiently as possible. Check the longest item in each column. What padding is there around it? None! You can control this as well forthe entire table with the <table> attribute cellpadding. Try something like cellpadding="5" and see what effect it has.
For the lazy, here is a possible example of the finished table...
Click here to load a completed table.Some more things to try out:
width ... eg. width="300". You only have to apply it to one cell in the column. Be aware, however, that each browser uses different algorithms to work out the column widths, and you might find that it overrides your set width. It will respect it as a minimum width for the column, but you can't depend on it if you are trying to set an exact width!bgcolor attribute in that particular <td> or <th>. You can set the background colour a whole row by putting bgcolor into the <tr> tag, or for the whole table by putting it into the <table> tag.colspan — eg. colspan="5". Just be sure that the total number of cells is still correct! You can also do the same thing for rows with rowspan — this is trickier, because you need to make sure that the next however many rows have the right number of cells, counting the one(s) you have spanned across a number of rows.Okay. All this can also be done with style, but is so tricky, and even unpredictable between browsers, that we won't go into it here.
| January 2012 | ||||||
|---|---|---|---|---|---|---|
| Monday | 2 | 9 | 16 | 23 | 30 | |
| Tuesday | 3 | 10 | 17 | 24 | 31 | |
| Wednesday | 4 | 11 | 18 | 25 | ||
| thursday | 5 | 12 | 19 | 26 | ||
| Friday | 6 | 13 | 20 | 27 | ||
| Saturday | 7 | 14 | 21 | 28 | ||
| Sunday | 1 | 8 | 15 | 22 | 29 | |
<table border cellpadding="5" bgcolor="white">
<tr>
<th colspan="7" style="background-color:darkblue; color:white">January
2012</th>
</tr>
<tr>
<td bgcolor="lightblue">Monday</td>
<td rowspan="6" bgcolor="silver" width="30"><br></td>
<td width="30">2</td>
<td width="30">9</td>
<td width="30">16</td>
<td width="30">23</td>
<td width="30">30</td>
</tr>
<tr>
<td bgcolor="lightblue">Tuesday</td>
<td>3</td>
<td>10</td>
<td>17</td>
<td>24</td>
<td>31</td>
</tr>
<tr>
<td bgcolor="lightblue">Wednesday</td>
<td>4</td>
<td>11</td>
<td>18</td>
<td>25</td>
<td rowspan="5" bgcolor="silver" width="30"><br></td>
</tr>
<tr>
<td bgcolor="lightblue">thursday</td>
<td>5</td>
<td>12</td>
<td>19</td>
<td>26</td>
</tr>
<tr>
<td bgcolor="lightblue">Friday</td>
<td>6</td>
<td>13</td>
<td>20</td>
<td>27</td>
</tr>
<tr>
<td bgcolor="lightblue">Saturday</td>
<td>7</td>
<td>14</td>
<td>21</td>
<td>28</td>
</tr>
<tr bgcolor="lightyellow">
<td bgcolor="yellow">Sunday</td>
<td>1</td>
<td>8</td>
<td>15</td>
<td>22</td>
<td>29</td>
</tr>
</table>