This first round of exercises is to get faimiliar with the most common HTML elements and how to use them in a
WWW document. You will use HTML-Kit editor whose basic properties will be reviewed. You will also use a HTML validator.
For examples of using XHTML-elements see the second leture.
- Log in to AGORANET with your own username.
- Start HTML-Kit (Start|Programs|HTML-Kit|HTML-Kit)
- Select Create a new file and click OK.
- Let's change some HTML-Kit settings to more reasonable ones: Select
Edit|Preferences.
Click the Proofing tab. Click off the first three check boxes to get rid of automatic
language check that may be disturbing (especially for the Finns as it can only spell English).
Select TIDY and option XML for Output:.
Now the HTML-tidy programme inside HTML-Kit can correct or notify you of possible errors you make.
Click OK to accept the changes.
- Copy the following code to clip board and paste it to your HTML-Kit document.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Charaterizing title</title>
</head>
<body>
<h1>Heading</h1>
</body>
</html>
You can use this as a base for all your HTML-documents. You can also insert it to the HTML-Kit settings:
Edit|Preferences|Startup|Insert following text into new documents.
- xml element shows the XML standard version in use.
- DOCTYPE elementti shows the document type in use.
- head element contains all metadata.
- title
element is for a title that describes the document. The title has to be understanable even if it would be
separated from the document itself.
- body
element contains all information that forms the skeleton of the document and what is actually shown on the
WWW page.
- h1 element is the first level
heading. Every page should have only one h1 element for the main title of the document.
- Save your document to U:\networks\ folder as demo1.html. Use the same folder for all
the documents in the future.
- Copy the news etiquette doument Fiksu lukeminen by
Jukka Korpela to clip board.
- Paste it inside the body element.
- Save. Use a browser to see how your document looks. Pressing F8 opens the HTML-Kit document
in you default browser. The document should be just contiuous text as the structure of the document has not been
defined so far.
- First write the title for the document. Write Fiksu lukeminen [Nyysiopas] inside the title element
(Smart reading [News instrutions]). The text is shown in the upper edge of the browser window.
- For the main title, use
h1 inside the body element. Select the text Fiksu lukeminen
from the beginnig of the body element with the mouse and press ALT-INSERT. HTML-Kit asks which elemet you want to use
for the selected area. Use h1.
- Save your document and see how it looks in the browser window. Click Reload or Refresh
on the browser window to update the document. The first heading should now be distinct from the rest of the text.
- Then back to HTML-Kit. Delete the text above the main title.
- Let's continue with the struture of the doument. Open the
page from where you copied the text next to the HTML-Kit
window. Find all the second level headings from Korpelas text. The first one is
Lukemisen tapoja: säännöllinen, satunnainen, kerrallinen. Find the respective sentences
in HTML-Kit and mark them with
h2 element. Use CTRL-H to find the text and ALT-INSERT for
setting the elements. When you are done with the headings, save the doument and see how it looks.
- Then mark all the paragraphs with the element
p as above. Save and compare the document to the
original article by Jukka Korpela.
- Of the block elements the list and the thread example are still missing.
- First make a list of the table of contents in the beginning of the document. Select all the text belonging
to the list with the mouse and mark it with the element
ul (unorganized list).
- Then mark every list element with
li.
- Use the browser to see if the list looks as it should.
An example of a list:
<ul>
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
</ul>
- The next list is unorganized just as the first one, thus use
ul and li.
- Then the next list is in the chapter about slang where Korpela has used an unorganized list even though it
might be structurally more correct to use a definition list
dl as it is about defining certain
abbreviations.
- Mark all the text belonging to the list with
dl.
- Mark all the defined words with
dt.
- Mark all the definitions of the abbreviations with
dd.
An example of a definition list:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
- Form an unorganized list of the list in the end of the document.
- Then there is the thread example. Since it is a copy of a view of some news programme it should be presented
as it is written to the HTML document. Normally the space bars and enters in between do not matter as the browser
adjusts the text to the window automatically. Pre-formatted text should be added using the
pre
element. This element is commonly used when presenting program codes. So, mark the whole thread with pre.
- Now that you are done with the block elements, check the document by a validator to see if you forgot something
or if there are any errors.
- First use the Tidy in HTML-Kit. Tidy is not a validator but still able to correct some errors. Press F9
to get HTML-Kit to do the Tidy check.
- A new window next to your doument will open. There you can see the document edited by Tidy. There is a notice of
possible errors in the status window at the bottom of the HTML-Kit window.
- Clik the error message and HTML-Kit jumps to the incorrect point.
- Tidy does not recognize the document type XHTML Basic you are using so you will get a warning you can just
ignore.
- Correct any errors found by Tidy and then try a validator.
- In case the Actions toolbar is not visible in your HTML-Kit you have to activate it: Select
View|Actions Bar.
- Select online from the toolbar that has the WDG-validator button.
First save your doument and then press this button.
- Wait a moment and you will see the validation results. If there are any errors, the validator gives the
number of the line where it thinks the error lies and a description of the error.
- Read the results and correct. You can alternate between the validator and your document by pressing
CTRL-TAB.
- If the errors are numerous, correct the first one and revalidate. Only one error can cause a load of
error messages when in a right place.
- After correcting the document continue by marking the inline elements. Next thing is to make the links in
the table of contents to work. First mark the headings where the links should lead. Add a unique id to every
h2 element. That can be done by adding an id attribute to the h2 elements.
An id has to start whit a letter. For example:
<h2 id="h1">Lukemisen tapoja: säännöllinen, satunnainen, kerrallinen</h2>
Add the id for every h2. The easiest way is to name them as heading1, heading2, heading3 and so fort.
- Then add the links to the table of contents. Hyperliks are marked by using the element
a
whose href attribute contains the address where the link should lead to. The element a
contains the text presented as the link. For example:
<li><a href="#h1">Lukemisen tapoja: säännöllinen, satunnainen, siltä väliltä</a></li>
If the link is only inside the same document, the address should start with #.
Add the links to all the headings to the table of contents and save. Use the browser to try if the links work.
Validate and correct the errors.
- In the original doument there are many links to other documents. Add a few of these links just for the
educational purpose.
- Find the comments concerning the Good Times virus in the list in the end of the doument.
- Copy the Good Times link from the original article by clicking the right button of the mouse.
- Use ALT-INSERT to add element
a around the same words as in the original artile.
- Insert the address you copied as the value of the
href attribute of the element a
- See if the link works and validate.
- In a similar way, form the links for Internet virus warnings, rumors, and hoaxes and
Hoax Warnings.
- Save the document and close HTML-Kit unless you are going to continue with the additional exercises.
Do these extra exercises if you still have the time or the enthusiam after the previous ones.
See the lecture page to learn how to create tables. Then make a table like the one below under the image.
