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. Please note that students have 20 megabytes of web space on the Camac webserver.
Contents
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:
- 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).
- 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.
- 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
<HTML> <HEAD> <TITLE>Basic HTML Page</TITLE> </HEAD> <BODY> This is the 'body' of the file, which is what will appear on screen. </BODY> </HTML>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. <HTML> <HEAD> <TITLE>Sample Web Page</TITLE> </HEAD> <BODY> <a NAME="top"></a> <CENTER><h1>Sample Web Page</h1></CENTER> <p>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.</p> <p>This paragraph will include different style features. Some of this sentence is in <b>bold</b>, and some is in <I>italics</I>. Following this paragraph there is a bulleted or UnOrdered list.</p> <ul> <li>This is a list item</li> <li>this is another list item</li> <li>and so on...</li> </ul> <br /> <HR> <br /> <h2>A subsection</h2> <p>This subsection contains a numbered or Ordered list.</p> <ol> <li>Item number one in the list</li> <li>Item number two in the list</li> <li>and so on...</li> </ol> <CENTER> <img src="http://www.DCU.ie/images/logo.gif" ALT="DCU Logo"> </CENTER> <p>Above, we have inserted an image: DCU's logo. Here we will provide a link to the <a href="http://www.DCU.ie">DCU home page</a>.</p> <p>Here is a link back to the <a href="#top"> Top Section</a> of this page.</p> </BODY> </HTML>
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
- and
- and
- 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. . 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 |
