Web - Creating Web Pages for the Internet | Information Systems & Services

Creating Web Pages

These notes are designed to help DCU staff and students create their own WWW Pages. If you have any difficulties, please contact the Web Editor who will be happy to help.

Contents

  1. Introduction
  2. Basic HTML Page
  3. HTML Features
  4. Explanation of HTML Tags
  5. Further Help with Basic HTML
  6. Creating Webpages with Netscape Composer
    (A PDF Version is also available. 245K)
  7. Links to Further Information

  8. Putting up your Web page on the Server

Introduction

World Wide Web Pages are created using HTML - Hypertext Markup Language. Each page is basically a text file, with HTML 'tags' added to identify segments of text as a header, a paragraph, a list etc. No special software is necessary to create Web pages or HTML files, all that is needed is a text editor - such as Word or Notepad on your PC.

However, as use of the web has grown the number of tools to create web pages has also increased. HTML editors will now allow you to create web pages without you having to even see the code. Popular editors include Microsoft's Frontpage, Adobe's Pagemill, Homesite 4.0, WebEdit 3.1 or Hotdog Professional 5.1. However a perfectly good editor is provided by the Netscape browsing software itself, Netscape Composer. To open Composer got to File/New/Blank Page or to the Communicator menu and click Composer. For instructions on using Composer.

In many respects these editors look and act like word processors, so if you can create a Word document you should be able to create a HTML file. Indeed Microsoft Word itself can be used as a HTML editor and gives you the option of saving your Word document directly as HTML, (look on the File menu, or in the options for saving when you Save As).

Bearing in mind the ease with which the packages allow you to make your web pages, some of you may still want to code your pages directly. Hopefully what follows may start you off.

A few points are worth mentioning straight away:

  1. When working from a text editor such as Notepad, it is important to remember to save your file with the file extension .htm or .shtml and not text (.txt).
  2. You can view your HTML files locally as you are creating them by choosing File from the menu bar in Netscape, then Open File, and then choosing the relevant file. If you have made a change since you last viewed the file, choose Reload from the View menu or click on the Reload button so that updates will be included.
  3. You can view the raw HTML version, or source code, of any particular Web page you are viewing through Netscape, by choosing Source from the View menu. This can be useful if you see something you would like to use in your own pages.


A Basic HTML Page

Creating HTML involves simply surrounding text with tags which describe how that text should be formatted. The tags usually appear in pairs - open formatting, close formatting, as will become clear from the examples below.

There is a certain amount that must be included in every HTML page. In Example 1 below the basis of any Web Page is shown. Every Web Page must begin with a tag telling Web browsers that this is a HTML page (), and end with a tag indicating the end of HTML ().

Similarly each page has a head and a body. The head includes information on the title of the Web page. This information is very important, since it will be used by search engines to identify your page, it is what will appear in the bookmark list of anyone who bookmarks your page, and in the history list of anyone who visits your page. It is also what appears on the title bar in Netscape while the page is onscreen.

Example 1

Basic HTML Page This is the 'body' of the file, which is what will appear on screen.

This is what it will look like on screen

 



HTML Features

Inside the body of the HTML file, many features can be included to improve the presentation of your text. The sample home page in Example 2, includes many of these, by comparing the HTML code given below and how this appears on screen, you can learn a lot about creating Web Pages. The tags used are also explained below.

Sample Web Page

Sample Web Page

Welcome to this sample Web page. The purpose of this page is to show you the basic HTML Tags in action. Use this page for reference when you are creating your own pages. This is a basic paragraph.

This paragraph will include different style features. Some of this sentence is in bold, and some is in italics. Following this paragraph there is a bulleted or UnOrdered list.

  • This is a list item
  • this is another list item
  • and so on...



A subsection

This subsection contains a numbered or Ordered list.

  1. Item number one in the list
  2. Item number two in the list
  3. and so on...
DCU Logo

Above, we have inserted an image: DCU's logo. Here we will provide a link to the DCU home page.

Here is a link back to the Top Section of this page.

This is what the HTML code above will look like on screen



Explanation of HTML Tags

  • and

    enclose Paragraphs.
  • and enclose a Header of size n, where n can be any number between 1 and 5. H1 is the most significant header and H5 is the least significant.
  • and
    enclose text that should be centered on screen.
  • and enclose text that will appear in Bold.
  • and enclose text that will appear in Italics.
      • and
    enclose an Unordered List (or bulleted list). List Items are enclosed in
  • and
  • .
      1. and
    enclose an Ordered List (or numbered list). List Items are enclosed in
  • and
  • .

  • inserts a forced line BReak.

  • inserts a Horizontal Rule, or a line across the screen.

Hypertext Links

The whole of the power of the World Wide Web comes from the ability to provide links to other Web pages or sites. This is done using the Anchor Tag . Within this tag is given the address of the page to be jumped to, referred to using href. E.g. . This should be immediately followed by the text that will be 'clickable' and then by the closing tag . Note: The inverted commas are very important here, since some browsers will not be able to understand this HTML code without them.

As well as being able to jump to other pages, it is possible to jump to specific locations within a page, if that location has been given a name. To name a location the Anchor Tag is used again. E.g. . In this case it is not necessary to provide any text between the opening and closing anchor tags. A link to a location must indicate that it is a location not a file that is being sought. This is done using the hash sign #. E.g. Top of Page. It is also possible to jump to a specific location within another file, again using the hash sign to indicate a location.
E.g. Top of Next Page is a link to the location marked 'top' in the file newfile.shtml.

Images

The ability to combine text and images on screen is another feature which has helped to ensure the popularity of the World Wide Web. Images are included in a Web page at the simplest level using the tag. It is necessary to specify the location of the image file using SRC, i.e. the SouRCe of the image.
E.g. .

It is good practice to include a piece of text, which will appear on screen instead of the image if the user's browser is text only, or if the user has images switched off. This text is included using the ALT attribute.
E.g. DCU's Logo. This ALTernative information is particularly important if the image bears some essential meaning in terms of the content of the page.

It is important not to get carried away by including too many images on a page. Remember that images can be slow to load, and if there are too many on a page, that page could be so slow loading that the user does not bother to wait.


Further help with HTML

Help available on the WWW

Relevant books in the library

  • LeVitus, Bob and Evans, Jeff: Webmaster Windows: How to Build your own World Wide Web Server without really trying. AP Professional 1996. Chapter 3, App. C,D and E.
    Shelfmark: 004.67
  • Lemay, Laura: Teach yourself more Web publishing with HTML in a week. Sams Net Publishing, 1995.
    Shelfmark: 005.754

Links

HTML

Javascript