Some
Text.
(The Easy Way)
I wrote this to help you write documents for the World Wide Web. It's designed for people who want to put a page on the web but are less confident about most of the technical details and who don't want to read a book. I hope it's helpful. I will be adding to it on a regular basis, so keep watching this space!
The Hypertext Markup Language (or HTML) is the language used to create the documents for the World Wide Web. Although most browsers will display any document that is written in plain text, there are advantages that you get by writing documents using HTML. When HTML documents are read by applications specifically designed for the Web (usually called browsers or Web browsers) they can include formatting, graphics, and even links to other documents.
As a markup language, HTML is not so much concerned about the appearance of the documents, as about the structure of a document. Rich Text Format (RTF), on the other hand, is an example of a formatting language. The difference between them is that, in HTML, you would use commands which are known as "tags" to mark the headings, normal paragraphs, lists (and whether they are numbered or not), and even things like addresses. In RTF, you would use commands (usually the word processing program does this for you) to indicate the typeface, font size, and style of the text in a document.
HTML is simple enough to just type in. There is no need to use a purpose made HTML web authoring program, you can achieve just as much using the text editor on your computer. SimpleText or TeachText on the Macintosh or Windows Notepad will be quite sufficient to start with. (I wrote this page and all the following link pages using Notepad and now wouldn't use anything else thank you!) Once you have learned the basic rules and concepts of web page design then you can look for shortcuts and editors to make the work less tedious, especially if you have massive quantities of documents to write, but they are not necessary to get started.
Save all your documents as plain text files with the file extension .htm then the browser will know it is an HTML document.
In general, HTML commands begin with a < tag and end with a >tag. The commands are almost never case sensitive and are either "container" or "separator" commands (although there are numerous exceptions to both of those generalisations). By a container, I mean that there is usually a beginning command and an ending command. The commands would thus be applied to the text in-between the beginning and ending commands. An example of a container command is the title command, which surrounds the text that is designated as the document's title with <title> and </title>. An example of a separator command is the command used to separate paragraphs <p>.
To view more tags and their functions click here.
White space, meaning anything that is not a printable character, is generally ignored in HTML. Leaving a blank line in your document will generally not create a blank line when the document is displayed in a browser.
Finally, not every element common to typical documents is included in HTML. You will occasionally have problems converting some documents. For example, the version of HTML in common use today doesn't support equations.
Every HTML document should start by declaring itself as such. You do that with the <html> command at the very top of the document. The very last text in a document should be the ending command, </html>.
The top part of the document should also have a section for heading information which is surrounded by the <head> and </head> commands. There are several items of information that you can put in the header, but almost all of it is totally ignored by most browsers out there. One piece of information you should always have in the heading is the title. The title (as we mentioned earlier) is surrounded by the <title> and </title> commands.
The title of a document is not normally displayed as part of the page, but is often displayed at the top of the screen. However, the title is also used by most browsers when saving the user's "hotlist," so it should be both descriptive and short enough to fit comfortably on one line.
Finally, the "body" of the document should also be marked off with the <body> and </body> commands. This is the part of the document that is normally displayed as the page in most browsers.
This is what a typical document would look like so far:
<html> <head> <title>This is my title</title> </head> <body> </body> </html>
(Remember that white space doesn't matter, so this stuff could all be on one line if you wanted. It makes no difference.)
HTML is easiest to use with documents with a fairly rigid structure -- ones with a definite outline of headings, subheadings, sub-sub-headings, and lists. It is not required, but it is good practice to write your document so that the heading "levels" used reflect the organization of your document. For example, the first heading should be a "level 1" heading (I'll show you how to do this soon), subheadings should be "level 2," and so on.
Most browsers recognise at least four heading levels. There is support in HTML for more than that, but what I mean by "recognise" is that the browser gives up to four levels of headings a distinct style. After the fourth level, it gets difficult to tell the heading levels apart. If you get much beyond that, you should consider breaking up your document into multiple pages.
The heading commands look like <hX> and </hX>, where X is the heading level:
<html> <head> <title>This is my title</title> </head> <body> <h1>This is my title</h1> </body> </html>
Normal paragraphs are separated with the <p> command. This is one of those exceptional commands that is not a container, although it can be. At least one of the proposals for the next version of HTML made this a container, so that paragraphs begin with a <p> and end with a </p>. Very few documents actually use the <p> command this way, although most browsers will display paragraphs correctly if you choose to use this method.
Our sample document would look like this after we added a paragraph or two and a subheading:
<html> <head> <title>This is my title</title> </head> <body> <h1>This is my title</h1> This is a sample paragraph. The majority of most documents contain this type of construct. <p> <h2>This is a subheading</h2> The quick brown fox jumped over the slow lazy dogs. The quick brown fox jumped over the slow lazy dogs.<p> The quick brown fox jumped over the slow lazy dogs. The quick brown fox jumped over the slow lazy dogs.<p> </body> </html>
I put the paragraph marks after each paragraph in this example, but they can just as easily go in front of each paragraph. The <p> is just a separator.
The hard rule tag is another non-container tag and can be used alone. The command to insert a Hard Ruled line is <hr> which gives:
You can indent text in a document by using the <blockquote> code. The more <blockquote> <blockquote> <blockquote> you put in the more indented your text will be, for example the code:
<blockquote><blockquote><blockquote>
This is an indented piece of text
</blockquote></blockquote></blockquote>
should give you:
This is an indented piece of text
You can make your web page a little more exciting by emphasising text by using bold or italics. The bold tags are <b> at the start of the text you want in bold and </b> to close the emboldening. Use italics in exactly the same way <i> to start italicising and </i> to close.
Another text style you may like to use is Typewriter Font (similar to the old Courier font). The tags for this are <tt> at the beginning of the text and </tt> to close.
Click here to go to Text Colors , Background Colors and Background Images
There are three kinds of lists in HTML: ordered, unordered, and a special kind called a definition list. The ordered lists are numbered. Unordered ones typically just use bullets to mark each item.
In ordered lists the browsers take care of inserting the actual numbers. This behavior is convenient for authors because if you insert or delete items in a sorted list, you don't have to worry about renumbering everything. An ordered list begins with <ol> and ends with </ol>.
Unordered lists typically use bullets to mark off each item in the list, but this is up to the browser (a DOS browser may use asterixes or dashes, for example). An unordered list begins with <ul> and ends with </ul>.
In both kinds of lists, the individual items are designated with a <li> command. This is another one of those commands that isn't typically used as a container (i.e. it doesn't have a corresponding </li> command).
You can also nest lists to get an outline effect.
Here's our sample document with a few lists thrown in:
<html>
<head>
<title>This is my title</title>
</head>
<body>
<h1>This is my title</h1>
This is a sample paragraph. The majority of most documents contain
this type of construct. <p>
<h2>This is a subheading</h2>
The quick brown fox jumped over the slow lazy dogs.
The quick brown fox jumped over the slow lazy dogs.<p>
What you need to make a cup of tea:<p>
<ol>
<li> Boiling water.
<li> Good quality tea bags.
<li> A teapot.
</ol>
How to make a good cup of tea:<p>
<ul>
<li> Boil the kettle.
<li> Warm the teapot.
<li> Put teabags in teapot,
<ul>
<li> one per person
<li> and one for the pot.
</ul>
<li> Let the tea brew for three minutes.
</ul>
The quick brown fox jumped over the slow lazy dogs.
The quick brown fox jumped over the slow lazy dogs.<p>
</body>
</html>
This is what the list above would look like when rendered with your browser:
What you need to make a good cup of tea:
Here's an unordered list:
A definition list is a very flexible type of list that is more useful than its name implies. It's useful for lists where a bit of explanatory text should accompany each item. Each item in the list has two parts, a term (indicated with the <dt> command) and a definition (which uses the <dd> command). The list itself is started with a <dl> command and closed with a </dl> command.
Here's a sample definition list:
<dl> <dt> First Term <dd> First term's definition. <dt> Second term (or title, or whatever) <dd> Text that explains, expands or defines the second term. </dl>
And this is what it would look like in your browser:
Links are what make Web documents unique. Unfortunately, some of what is required to create a link is slightly complicated. The most complex part of it is the URL that points to the resource you're linking to.
A URL (or Universal Resource Location or Locator or something like that) is the address of a document or resource. It usually takes this form:
protocol://remote system.name/directory/document.name
The protocol is the Internet protocol used to reach the document or resource. On the Web, it is typically "http", but it can be any of numerous other things (such as ftp, gopher, telnet, etc). The remote system.name is just what you think it is: the name of the host where the document resides (such as www.).
The directory and document.name components of the URL are self explanatory.
The easiest way to get the URL of a document is to highlight it in the location box at the top of your browser and then copy the URL into your HTML document.
The HTML command for putting a link into a document takes this form:
<a href="URL">text of link</a>
You put the URL in the quotes following the "href=" and put the text of the link (the part that users will click or select to activate the link) after the > and before the </a>.
So, here's our document with a few links:
<html> <head> <title>This is my title</title> </head> <body> <h1>This is my title</h1> This is a sample paragraph. The majority of most documents contain this type of construct. Here's an embedded link to other college courses in this document right <a href="http://www.derwentside.ac.uk/course.htm">here </a>.<p> <h2>This is a subheading</h2> The quick brown fox ...and so on...And this is how it looks in your browser:
This is a sample paragraph. The majority of most documents contain this type of construct. Here's an embedded link to other college courses in this document right here .
You can set up a hypertext link to somewhere else in the current document, for example:
One of the great things about the web is the ability to create and share some good looking documents across platforms. However, you should restrain yourself somewhat. I've noticed that many people turn off in-line images to increase the performance of their computer. Even with fast network access to the Internet, some users find documents loaded down with images to be annoying.
However, a couple of colourful images can be interesting to the reader. Images are also often necessary to make a point that can't be made using text only.
To add an image to your document, you need to convert it first into GIF format. There are a number of graphics packages for doing this, one which is available as shareware is Paint Shop Pro. You'll probably find this on cover disks or available to download from the Internet.
To make things easier on yourself, put the images that you want to show in your page into the same directory as your document. It is possible to display a GIF images that is stored almost anywhere (even somewhere on the Internet), but that's for a more advanced tutorial.
The HTML command for inserting an image at the current position takes the following form:
<IMG SRC="/name_of_image.gif">
That's all there is to it to insert a GIF file into your document. Notice that the location is given relative to the current document. The location does not have to be a full URL (but it can be if you want).
There is also an optional alignment extra to the IMG command that you may want to use occasionally.
You can "suggest" to the browser that the image be aligned in a particular way with the surrounding text using the "align=" directive. The choices are "top", "middle", or "bottom", which indicate where the base of the image should be in relation to the base line of the surrounding text.
Here's a couple of examples:
<img src="./image.gif" align="top"> Some Text. <img src="./image.gif" align="middle"> Some Text. <img src="./image.gif" align="bottom"> Some Text.
Here's how it would look in your browser:
Some
Text.
Some Text.
Some Text.
Another useful option is to suggest a text-only alternative for browsers that don't support in-line images. The "alt" directive is used like this:
<img src="./image.gif" alt="*"> Some Text.
For users on a text-only browser, these items would appear as just "*" instead of something like [IMAGE].
There are large numbers of graphic images available to download from the internet. Try doing a search using the criteria "gif images" or "animated gifs". To download an image from the internet just click on the image with your right mouse button and choose save image as.
This document should get you started. To learn more remember to use the built-in "view source" option available in most browsers to view the HTML commands that make up some of your favorite pages on the web. I'm not advocating that you steal documents for your own use, but study the formatting commands that are used and try to use the same tricks in your own documents.
Practice writing HTML document and looking at them in your browser. When you are confident then you can go on to the live assignment.
Go to Unit 002 Developing Web Pages