Hypertext Markup Language is the standard for documents for the World Wide Web. The HTML file contains:
Overview of Common Tags
An HTML file consists of text, that is, the words that you want to appear in your document and embedded instructions called HTML tags. The tags give the browser instructions that include formatting, display of images, and hyperlinks. The technical name for the type of data in an HTML file is ASCII text. We first go over some basic tags, and then there will be an exercise using NotePad. HTML tags begin with the < symbol and end with />. For example, an HTML file begins with <html> and ends with </html>. The letters inside the tags may be in either lower or upper case.
The tags, <html> and </html>, are examples of paired tags. The second one is like the first one except that it begins with a / symbol. A pair of tags affects how a browser will display the text between the first tag and the second tag. Leaving out the second tag usually changes the display of the rest of the document.
The standard format for an HTML file consists of the head and the body. The tags for these are:
The document title and other information used by search engines.
all the text and instructions for the document
The most common tag for the head part of an HTML file is the title tag. It is used to put information about the document in the title bar. Note: it is common to include a big, showy heading in an HTML document that you may refer to as the title, but in the technical language of HTML, the title is the text that shows up in the title bar at the top of the browser.
<title> My First HTML File </title>
In this example, the phrase ‘My First HTML File’ will show up in the title bar.
We now describe four common types of HTML tags that go in the body section of the file.
<h1> News Stories </h1>
The tags, <h1> and </h1>, will make the text large. Some browsers may even use a different font. H1 creates the largest text and H7 the smallest. Please be aware that the system does not expect or check for any consistency. There are not automatic line breaks after a heading change. You may nest different headings.
To insert an image, you use the single img tag as in the next example:
<img src = "name.ext">
Here name.ext is the file name and extension of the image file. The ext will be either .jpg or .gif. These are two types of images. You can also create your own images using products such as Paint Shop Pro or Adobe Photo Shop. You just have to save the file as a .gif or a .jpg. Similarly, you can use these tools as well as Microsoft Photo Editor to crop or resize an image.
To produce what appears to be a new paragraph, use the single tag <p>. There is also a tag, <br>, that creates a line break. In some browsers, they may have the same effect. In others, the paragraph tag will insert a blank line while the line break tag will not.
The <a> tag produces a link to another document or website. These come in pairs. The text between the <a> and the </a> forms the clickable part. If the URL for the site to be linked to is http://www.nytimes.com, then the format to use should be:
<a href = "http://www.nytimes.com"> A well-known newspaper’s online site.</a>
Notice that the text following href is surrounded by quotation marks. You also use the <a> tags for linking to local files or to HTML files in the same directory on the server. The format is
<a href = "secondfile.htm"> more information </a>
where secondfile.htm is the name of the other file. If the browser does not read the http:// then it knows to go to the same directory as the HTML file to find this new file. One more use of an <a> tag is for marking and also linking to different parts of the same document. This is done as follows:
<a name = "details"> Details </a>
This use of the <a> tag gives a name to a position in the HTML file. At any other point in the file, you can use
<a href = "#details"> Go to Details </a>
to go to a previously marked point in the file.
These tags are the most important, but there are many
others. You can look at the underlying HTML of any document by clicking
on View and then Page Source in Netscape. You can use this
to learn about new tags.
An HTML file can be created using any text editor. NotePad is such an editor and is part of the typical installation on Windows computers. Here is a simple example based on favorite or best Web sites for some special hobby or task. Before doing this exercise, you should select a topic and find two or three Web sites for the topic. You also need to download an image from each site. Images can be copied from a Web site to your own machine by positioning the cursor over the image and then clicking on the right mouse button. You will get a dialogue box with one option, Save Image As. You then get a chance to rename the image and also locate it in a specific folder.
<h1> The Best Web Sites for ...</h1>
Replace the three dots after the word, for, by the topic that you are using for this assignment.
If you are online and want or need to find out what is happening in the world, you can go to any of many news sites.
The site I use the most is the online New York Times.
One disadvantage of this site is that to go beyond the
first page, you need to subscribe. It is free, but you need to choose a
logon name and a password. However, you can arrange to save the information
on the computer that you typically use. If you do this, you do not need
to be concerned with logging on. The New York Times site is changed a few
times during the day. It contains audio and video.
Click on OK to close that dialogue box. Now (assuming
you are using Netscape), click on File and then Open Page
and Browse. You are opening a local file instead of going
to a Web site. Use the operating system’s procedure for finding the file
you just saved. Click on it and then click on Open. Your HTML file
should be displayed in the browser. Notice any problems and fix them in
NotePad. When you get back into the browser, you will have to click on
ReLoad to get the newest version. If reload does not work, hold
down the shift key while clicking on ReLoad. (In Internet Explorer,
use the control key.)
<img src="picture.gif" align = left width = 100>
will align the image to the left. It will also change the width of the image to 100 pixels and make the height whatever size that will preserve the proportions of the original image. You can use both width and height parameters to set both values.
Several products exist for producing HTML. The advertising for these tend to give the impression that producing HTML is difficult and these products will make it easy. The real situation is that writing evocative text is a challenge and so is designing layouts and choosing (and producing) appropriate images. Putting in the right HTML tag is not the hard part. With that caveat, here are comments about a few of these tools.
Using Specialized HTML Editors
Several specialized editors exist for producing HTML. The so-called HTML editors help to produce the HTML source and show it on the screen. For example, you select text and then click on Heading 1 on the toolbar and what you have selected is now between <h1> and </h1> tags. These editors also allow you to click on image and then go to a series of dialogue boxes to select the image. These tools are not what you see is what you get editors (WYSIWYG) because you need to go to a browser to see the results. One example in this class is HTML Assistant Pro.
Using Netscape Composer
You can also edit your HTML document using Netscape Composer, a component of Netscape Communicator. To edit an existing file, open the file in Netscape Navigator the usual way and then go to File and then Edit page. To start a new file, you can invoke Netscape Composer directly. In Composer, click on New. For existing files, what you will see is very like the display form of the HTML. There is a toolbar for putting in tags. This includes icons for inserting images and links. When you choose to insert an image, the following box will appear. You can find the image using the button marked Choose File... You can also make other changes, if you wish.
It can sometimes get tricky to do what you want in Composer and you may decide to return to NotePad where you can see all the tags. Another problem to be aware of is that Composer may put file addresses in a different form than you want. For example, it may insert the local drive name. This will prove problematic if and when you move the project to a server. Composer can be helpful for producing tables. The set of tags required here can get messy (not difficult, just complex).
After the image of the NY Times Logo has been inserted, the picture will show up in Composer much the same as it will appear in a browser. Composer will have inserted the html tag used to link to an image. In this example, it would appear as
<P><IMG SRC="nytlogo12.gif" HEIGHT=54 WIDTH=350>
You can see this for yourself by clicking on View and then on Page Source.
The following picture shows what the document will now look like in Composer.
Microsoft Word has an option to Save As HTML. This produces a reasonable version of the Word document. When you look at the HTML document, you will probably notice a lot of seemingly extra tags. The file will also contain special symbols such as for non-blank space. If you are really in a hurry and have put a lot of formatting into the Word document, this is an option. However, another option is to simply copy-and-paste the text in the Word document into NotePad and then proceed. This will make it easier to plan and then design the document specifically for Web publication.
Microsoft PowerPoint also has a facility to turn a presentation
into HTML form for publication on the Web. When you click on File
and then Save As HTML, this facility produces a large set of files
appropriately linked so that the PowerPoint presentation can be viewed
using a browser. You, the author, are asked several questions on the design
of the viewing and also background information to go on the first page,
which is similar to a table of contents. You should put all the files in
a brand new folder (directory) just for this presentation.