Practical introduction to HTML
Note: the majority of the work for this project is a group effort. This
exercise is an opportunity to for everyone to learn, so you will all be able
to do a fair share of the work. Feel free to help your colleagues find and
understand information and debug problems, but remember that you want each
member of your group to be able to contribute to the final report and
presentation, so don't do the work for them!
To give you a basic familiarity with HTML.
You should be able to reuse information you collect and write down for this
exercise when you come to write your final project report and presentation.
Working as individuals:
- Find out about HTML.
If you are not already familiar with HTML, start by creating a simple page,
and then try to improve on it.
If you do already know something about HTML, use this as an opportunity to
- Use HTML to create two web-pages (or two sets of web-pages):
You must write the pages "by hand", using a plain text editor such as Nedit,
rather than using a tool such as Mozilla Composer or DreamWeaver to generate
the HTML for you. The only exception to this is that you could use
LaTex2HTML to convert LaTex documents that you have already written.
- "What I know about HTML"
- "What I know about LaTex"
You probably need to:
- Find out how to use the WWW in this school, by looking in
- Find out about HTML:
You probably need a tutorial introduction (but some people might prefer
an essay or article about them, or even a reference manual). Decide what
would suit you best and try to locate some appropriate information - just
make sure that it is reasonably up-to-date and trustworthy!
For example, you could use Google
to search for
You could also look at the source for this web-page - try the "view" menu.
You should link together all the web pages you write in sensible ways.
You could create a simple home-page in "index.html" and link to your pages
from there. You could also link to pages about other students in your
group, your tutors, to relevant places on University sites, and so on.
As usual, you must list the information sources you used (including any
mentioned on this page):
Where you make use of anything written by someone else, you must make
it clear where you found it e.g.
Guidance on plagiarism and other forms of academic malpractice from Manchester University.
If you copy any text verbatim, you must also make it clear exactly which
words you have copied e.g. using quotation marks: "Plagiarism is
presenting the ideas, work or words of other people without proper, clear
and unambiguous acknowledgement."
Similarly, if you use any information about HTML or LaTex code, e.g. from an
on-line tutorial, you must add a comment in your code saying where
you found the original, and make it clear if you copy any code verbatim e.g.:
<!-- HTML copied from ... -->
% LaTex copied from ...
You should try to understand and make sensible use of the following
pieces of HTML:
- basic framework of a web page: <!DOCTYPE...> <html>
<head> <title> <meta> <body>
- comments: <!-- ... -->
- starts and ends:
<...> and </...> (and <..../> ?)
e.g. <html> and </html>
- sections, text and lists:
<h1> <h2> etc. <p> <br> <ul> <ol>
- links: <a href=...> <a name=...>
- absolute and relative URLs
- extra information: <... title=... >
- images: <img src=... alt=... height=... width=...>
- special characters: & < > etc.
- different kinds of text: <strong> <em> <quote>
<cite> <q> <pre> etc.
- (optional, but at least find out what they are for)
<table> <tr> <th> <td>
The poor people's web server
For test purpose, you should be able to send your HTML file with netcad (nc) to your browser:
while true; do nc -l 8080 < index.html; done
where 8080 is the port number and index.html is your file name.
After this, type localhost:8080 in your browser address field.