 |
WEB DESIGN SKILLS Module Study Guide
|
Session 1
Introduction to HTML
On this page:
Using a browser
A browser is a program which allows you to view web pages on your computer. The most familiar browser is Internet Explorer (IE), and such is the power of Microsoft's advertising and marketing strategy that many people believe that IE is necessary if you want to 'surf' the net. In fact, there are many different browsers available, and at some stage you should try out at least one other, if only to see what the differences are.
(See wikipedia for a technical comparison of different browsers)
The main function of a browser is to take the HTML code which makes up a web page (see below) and turn it into something which is readable by a viewer. It's important to remember that even when using visual programs such as Dreamweaver, which we'll be looking at later on, the final output is always HTML or some other code (such as PHP or ASP). This has to be interpreted by the browser. So you always need to test out your web pages on a browser (or preferably several) before unleashing them on an unsuspecting world!
In this course, before introducing you to Dreamweaver, we will teach you how to produce web pages using only a simple text editor and a bit of know-how.
What is HTML?
HTML stands for Hyper Text Markup Languge. We can look at what this means in two parts: what is Hyper Text? and what is a Markup Language? We look at the latter first.
Markup Languages
A markup language is any system of marks or symbols used to indicate how a document should be formatted. It is not the content of the document. Printers have used a system of markup for hundreds of years to show on a type-written (or hand-written) document which parts of the text are to be typeset larger or in bold font etc.
Markup for electronic documents was introduced with GML (Generalized Markup Language) in 1969. From this SGML Standard Generalized Markup Language, was developed in 1974 and approved as an ISO standard in 1986.
HTML was developed by Tim Berners-Lee in the early 1990s, for use on the internet. Initially it contained a limited set of markup for text documents.
What is Hyper Text?
A Hyper Text document is one in which some part of the text acts as a link to another document. This is the key which makes the web possible. The hyper link is the highlighted text which you click to jump to another page (or another part of the same page).
There are a number of Hyper text formats, apart from HTML pages, for example pdf files can have hyper links embedded, and Windows Help files have hyper links.
HTML
HTML initially contained a limited number of formatting tags such as heading, bold, etc. and the ability to mark a part of the text as a hyper link to another text document. The early browsers displayed only text. When the first graphical browsers were released HTML was extended to allow the inclusion of images and more formatting controls. Later it was further extended to allow complex formatting controls and inclusion of all forms of electronic media (video, sound, etc.). The complexity of the formatting began to swamp the content, so style sheets (CSS) were developed to separate out the formatting details from the content. You will look at these later in the module.
Tags
In a normal HTML page, the 'mark-up' information is contained in tags, which
are always enclosed in angled brackets e.g. <p>. Some tags are single letters
(like the <p> above), some are two or three characters long (<h1>, <br>) and
some are whole words (<body>, <link>, <strong>).
Lets look at a simple HTML page and see how these tags work:
<html>
<head>
<title>A simple page</title>
</head>
<body>
<h1> Who are the Council? </h1>
<p> Any council is made up of councillors, who are elected from
the general population, and officers, who are paid employees.
The council will also employ a large number of other people who work to provide
its services, ranging from teachers through social workers to waste disposal
operatives.</p>
<p> Most councillors are part-time, and do not receive a salary for their work
on the council's behalf. They do get an allowance, the
amount of which surprisingly varies greatly throughout the country.</p>
</body>
</html>See what this page will look like on a browser (new window).
Now let's look at the code in more detail:
Tag pairs
Notice that most of the tags here are arranged in pairs, e.g. <p> ... </p>. The first one in a pair opens a section and the second one closes it. For instance, the <p> tag means 'paragraph', so a <p> means 'start a new paragraph' and a </p> means 'finish the paragraph here'.
In XHTML, all tags are required to be in a pair, so tags which have no partner are written with a dummy '/' to terminate them (e.g. <hr />
<html>
The whole of the document following the DOCTYPE is enclosed in a pair of <html> and </html> tags.
This is divided into two sections, the head and the body.
The head contains details about the page; the body contains the content which
is to appear on the page.
<html> <head>information about the page</head> <body>the page content</body> </html>
<head>
The only entry in the head of our simple page is the title which gives the text that appears in the title bar of the browser. This need not be the same as the heading in the body.
<head>
<title>My simple page</title>
</head>
<body>
This contains the content to be shown in the browser window. All the content
of the page must be in the <body> of the document, and there must only be one
<body> tag (and one </body>).
<body>... etc., etc., etc.
<h1> Who are the Council? </h1>
</body>
<h1>
The <h1> tag indicates a heading. There are six heading tags, ranging from
<h1> to <h6>. It is important to understand that this does not mean that you
can only have six headings in your page. The tags represent levels of heading,
<h1> being the biggest and <h6> the smallest. You can have as many of each
different type as you like.
<p>
As previously mentioned, the <p> and </p> tags identify paragraphs in the
text. All text which is not tagged in any other way (e.g. as a heading) should
be within a paragraph tag-pair.
Displaying the page
When you've created a page, or edited an existing one, you need to save it as an ordinary text file, but with a .html suffix. Be careful that you're not saving in RTF or Word formats, and also check that your resulting file does not have a double suffix like 'index.html.txt'. Also make sure you know exactly where on the system you've saved it (Grove House users - DON'T use 'My Documents', or you'll never find it again!)
Then you need to open it up in a browser. You can either locate the file using 'My Computer' and double-click on it, or you can open a browser in the normal way and use 'File>Load' or 'File>Open'. (There is an issue with doing it this way if you're using IE in Grove House - either use the first method or choose another browser.)
Once you've seen how it displays, don't close the window. Just minimise it, and then when you've made any changes to the code, all you have to do is maximise the window again and 'refresh'.
Exercises
- Save the sample page (above) on your disc or user area and open the file in a text editor (TextEdit, NotePad, TextPad, etc. Do NOT use a word processor such as Word.)
- Add a couple more paragraphs of text.
- Split the content of the page up with subheadings (and subsubheadings). (Use the
<h1>to<h6>tags.) - Save the file as a text-only file but with the suffix .html. Make sure you know where it is saved.
- Display the result in the browser.
- Try the following tags around sections of text to see their effect:
<strong> ... </strong><cite> ... </cite><code> ... </code>
