| Text only | |||||
 |
 |
||||
|
|||||
WWW Information Pack
Topics covered: HTML, XHTML, tags, CSS, images, headings, lists, hyperlinks, Dreamweaver, Contribute, FrontPage, FrontPage Express
When the web was first invented in 1989, all web documents were written in a language called HTML (Hypertext Markup Language) which was devised specially for this purpose.
In the following years, as the web became more popular, web pages became more visually elaborate and technically sophisticated. To support this evolution, the HTML language needed to be developed and expanded, which resulted in the establishment of a series of standard versions of HTML, culminating in version 4.
At the time of writing, HTML has recently been re-developed into a more flexible and complex language called XHTML (Extensible Hypertext Markup Language). This series of Factsheets will focus on XHTML, because it is now the preferred standard for web authoring. However, pages written in the older HTML version 4 are still common and perfectly valid, and it is quite straightforward to upgrade pages from HTML 4 to XHTML.
Figure 9.1 - A section of the University home page, together with a small piece of the XHTML source code in which it is written
Fortunately it is not necessary to be an expert in all of the complexities of XHTML in order to build web pages.
When faced with the challenge of writing your first ever web page, there are essentially two approaches from which to choose:
This Factsheet will deal first with the use of specialised web authoring software, so that you can achieve results as quickly and easily as possible. It will then provide an overview of the XHTML language, which should be useful for those who wish to understand the web authoring process at a deeper level.
There are many different web authoring programs in existence, all of which claim to simplify the process of creating web pages. However, at the time of writing, one of the most widely used and professionally respected products is Dreamweaver, which is published by Macromedia. Dreamweaver MX is available in the University classrooms, and is currently the recommended web authoring software for use at Aberdeen. To buy a specially discounted version of the software, please contact Julie Forbes of DIT on 27 3284.
Dreamweaver is a WYSIWYG ("what you see is what you get") web authoring tool. It enables you to type in the text for your web page, copy and paste it, and format its appearance in much the same way as a traditional word processor. Dreamweaver will display the page as it will look when it is published and loaded in a web browser - whilst hiding from you the complexity of the code that it is creating "behind the scenes".
If you want to, you can set Dreamweaver to provide a split-screen display, showing both the XHTML source code and the page's visual appearance (Figure 9.2).
Figure 9.2 - Dreamweaver MX showing both design and source code editing windows
Modern versions of Dreamweaver (MX) support the latest XHTML web coding standard. When creating a new document in Dreamweaver (using the command), it is advisable to check the box labelled so that Dreamweaver creates a valid XHTML document (rather than an older version of HTML).
Figure 9.3 - Specifying that Dreamweaver should create an XHTML document (a detail from the dialogue box)
Dreamweaver contains so many powerful features that you are unlikely to use all of them to start with:
(i) - it provides good support for formatting web pages with CSS (cascading stylesheets). CSS is an important and powerful way of controlling the appearance of web pages, and is dealt with in a separate Factsheet.
(ii) - if you are working on an entire collection of web pages, Dreamweaver can act as a complete site management tool. It can display all of the links between the web pages in your site, and can automatically upload and download files from the remote web server. It can check the validity of links between pages, and highlight any "broken links".
Figure 9.4 - Dreamweaver's site management window can display the linkages between all files used in the site
(iii) - Dreamweaver allows the use of page templates. These allow you to specify a common design for all of the pages in your site, whilst locking certain elements on the pages so that they cannot be edited. This prevents anyone else who might be editing the pages from accidentally "breaking" those page elements that need to remain consistent across the entire site (e.g. the main navigation bar).
(iv) - frequently used pieces of web page content (e.g. an address) can be stored in Dreamweaver's Library for easy re-use on many different pages (Figure 9.5). If you need to change the content of one of these Library items, you need do so only once - Dreamweaver remembers those pages in your site that have used the Library item, and automatically changes them all for you.
Figure 9.5 - The Library item named "address" can be dragged quickly into any page
This Factsheet cannot provide a comprehensive tutorial in the use of Dreamweaver. However, DISS runs a series of web authoring classes which provide a detailed introduction to its use - see: www.abdn.ac.uk/diss/training/
Recognising that Dreamweaver has now become extremely powerful and complex, Macromedia have recently released a much simpler "cut down" web editing product called Contribute. This is ideal for day-to-day maintenance of an existing web site, such as making simple text amendments. Contribute is also supported for use at the University of Aberdeen.
Contribute shields the user from the more complex aspects of file management, upload and download from the web server, which take place "behind the scenes". Instead, the user simply uses Contribute's built-in browser to navigate to the page they want to edit. Assuming they have the correct user account details to connect to the server and edit that page, they can click on an button, type their amendments directly onto the page, and then click on to save and publish these amendments.
Figure 9.6 - In Contribute, you simply navigate to your web page and click
Contribute is able to limit a user's permissions to edit web pages. For example, they can be given permission to edit existing pages but not to make new ones, or can be limited to changing only specified "editable regions" within a page. Permissions to edit different sub-sections of a web site may be allocated to different Contribute users.
Microsoft's main competitor to Dreamweaver is a web development system called FrontPage. This comprises a WYSIWYG web editing program, plus a complex suite of underlying components that allow the web developer to insert more complex "dynamic" elements into their site very easily - e.g. search engine, polls, discussion forums, and web page access ("hit") counters.
However it is important to realise that many of the functions of FrontPage require a set of Server Extensions to be installed on the hosting web server. Once the extensions are installed, FrontPage can communicate with the hosting server, enabling the user to publish and edit pages directly on the live web site. In addition, FrontPage 2002 includes a web-based collaborative product called SharePoint Team Services, which must also be installed on the server to support elements such as polls and discussion forums.
Some web managers have traditionally been wary of the security implications of installing the above proprietary extensions on their servers. There is therefore little chance that a site built upon Microsoft FrontPage components would work correctly if transferred to a different hosting server which lacked these features. FrontPage is not currently supported on the main University of Aberdeen web server, and University web authors are encouraged to use Dreamweaver in preference to FrontPage.
Older versions of FrontPage also attracted criticism for the poor quality of the HTML code that they generated: much of the code was redundant (unnecessary, and having no visual effect on the resultant web page) or non-standard (departing from the established international HTML/XHTML standards). Microsoft have, however, pledged to improve this in FrontPage 2003.
FrontPage 2002 is available as a stand-alone product, or as a part of Office
XP Developer edition.
FrontPage 2003 will be a stand-alone product, and Microsoft currently do not
plan to include it with Office 2003.
Further details about FrontPage are available from www.microsoft.com/frontpage/
or www.frontpageworld.com
Further details about SharePoint team services are available from www.microsoft.com/sharepoint/teamservices/
FrontPage Express is a very much simpler web editor, which Microsoft supplied free of charge with their Internet Explorer browser up until IE version 5.1. More recently Microsoft have stopped distributing FrontPage Express, and withdrawn support for it. However, many copies are still in use by people who prefer the simplicity of this editor over the full complexity and power of Dreamweaver or FrontPage. The HTML code that it produces is rather out of date by today's standards, since it lacks provision for the newer XHTML or CSS (cascading stylesheets).
FrontPage Express is another WYSIWYG editor, with a simple toolbar similar to that of Word.
Modern versions of Microsoft Office include the ability to export documents, data or presentations in HTML format. Although this can be a convenient way of converting information into web pages quickly, there are some major drawbacks to using Office in this way.
Most importantly, the code produced by MS Office is an extremely long and complex mixture of HTML and XML (a more advanced data markup language dealt with in Factsheet 27). This code is designed to display correctly in modern versions of Internet Explorer, but will seldom display as intended in older or non-Microsoft browsers.
The use of Microsoft Office to generate web pages is dealt with in more detail in Factsheet 17.
Although modern web authoring tools such as Dreamweaver now allow you to create sophisticated web pages without seeing any source code, there are sound arguments for gaining at least some understanding of the underlying XHTML language:
Although this section will focus on XHTML, the majority of the points below are also applicable to the older HTML 4 language.
XHTML files are always in plain text format (also known as ASCII). This means that you can write them in any simple text editor (like Notepad in Windows, BBEdit on a Macintosh, or emacs or vi in UNIX). You could also write them in Word, although this is not really recommended - you would need to remember to save them as plain text rather than as a Word document.
In general, you should save your web files with a filename ending in .htm or .html (e.g. mypage.htm or mypage.html), and it is best to be consistent about your choice of filename ending within a web site.
The basic functional elements of the XHTML language are called tags, and they are enclosed in angle-brackets. Tags control the way in which the content of a web page (e.g. text and images) is structured.
For example, <h1> is used to specify that the text following it is a heading (with "level 1", i.e. the most important level of heading).
XHTML tags come in pairs, with the second
tag closing the effect of the first one:
<h2>this text is displayed as a "second
level" heading</h2> but this text is not.
A few tags, however, create "standalone" page elements that do not need to enclose any text or other page contents. In these cases, rather than writing out pairs of opening and closing tags, XHTML allows you to enter the tag singly, with a finishing slash to indicate its closure, e.g.:
| <br /> | insert a line break: start the next sentence or image on a fresh line |
| <hr /> | insert a horizontal rule, to separate different sections of the page |
| <img src="photo.jpg" /> | insert an image, the file location of which (photo.jpg) is given between the quote-marks |
The requirement for a closing slash in the above tags is new in XHTML, and was not previously required in HTML. You will see plently of <br> tags in older HTML documents, but this would not be valid in XHTML. Note that you should insert a space before the final slash in the above examples.
Note also that the tags above are specified in lower-case. This is another new requirement of XHTML - older HTML was case-insensitive, often allowing the web author to get away with a jumbled mixture of upper and lower-case coding.
The overall structure of a basic XHTML document (deliberately omitting some lines of formal definition at the top of the document) is as follows:
<html>
<head>
<title>Document title is written here</title>
</head>
<body>
The main body of the document goes here: text, images, forms etc.
</body>
</html>
The head section of the document (between the <head> and </head> tags) contains information about the document that will not be displayed as a part of the main web page itself. For example, the title provides the document with a name, but is not displayed in the main web page - it is usually displayed by the browser in the blue bar at the very top of the window. The title is an important element of the document because search engines (see Factsheet 3) use it when indexing and searching through their databases of web pages.
The body section of the document is where you create the actual content of your web page. A wide range of elements can be placed into the body of a web page, using the appropriate tags. Some of the most common ones are listed below:
<h1>Insert header text here</h1>
Headings are used to create text which is highlighted as more important than
normal text. There are six levels of heading, with level one heading <h1>
being the most prominent, level two <h2>
the next prominent, and so on. Headings are usually displayed in a large,
bold font, although the exact size, font and colour of the heading will depend
on the browser being used to view it, and these settings can usually be altered
by the user. Many search engines will also give greater weight to text contained
in headings, when they index your pages.
Blocks of text are separated into paragraphs using the <p> paragraph tag. Remember that the </p> closing tag is also required in XHTML.
If you insert line breaks ("carriage returns"), tabs, or strings of spaces into the actual code of an XHTML document, these will usually just be ignored by the browser when it displays that text. So, for example, the following XHTML code will not display the two sentences as different paragraphs:
<p>This is sentence 1.
This is sentence 2.</p>
However, this code will display them as two separate paragraphs:
<p>This is sentence 1.</p><p>This is sentence 2.</p>
The two most commonly used list formats are "ordered" (or numbered) lists:
| code | displayed as |
|---|---|
| <ol> <li>list entry</li> <li>next list entry </li> <li>final list entry </li> </ol> |
|
and "unordered" lists:
| code | displayed as |
|---|---|
| <ul> <li>list entry</li> <li>next list entry </li> <li>final list entry </li> </ul> |
|
<img src="location of image file" alt="alternative text" />
This tag inserts an image into a web page by referring to its file location. The image does not form a part of the XHTML file itself: it is stored as a separate file (filename.gif or filename.jpg or filename.png). For the image to be displayed correctly when the page is published, you must make sure that this reference is correct, i.e. that the image file is also published in the correct location.
On the web, images often display some information, such as "click here to download our newsletter". If the web page is being viewed in a text-only browser, or interpreted by a speech browser (as used by a blind person), then it is necessary to provide an alternative text description of the image. The text defined by the alt=" " attribute is displayed (or spoken) as an alternative to the image itself, whenever the image cannot be shown.
For example: <img src="house.jpg" alt="photo of my house" />
<a href=" URL to be linked to "> your linking text </a>
Hypertext links enable the user to click on a piece of linking text in order to jump to a different web document (or to jump to specific sections within a single document). The target URL (i.e. the location of the new web page to which you want the link to take you) must be specified correctly between the quote-marks in the <a href=""> tag.
By default, linking text is usually displayed in a different colour from normal text, and underlined (although it is possible for the web author or the viewer to change these settings).
Images can also be made to function as hyperlinks. You can do this by placing
the image tag between the two hyperlink tags:
<a href="http://www.abdn.ac.uk/">
<img src="logo.gif" alt="Link to University of Aberdeen
Homepage" />
</a>
For completeness, the following code provides an example of a very basic XHTML document, including some lines of formal definition that are required at the start:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>A first document</title>
</head>
<body><h1>My first document</h1></body>
</html>
The rather intimidating code in the first three tags consists of formal statements identifying the document type as XHTML (which is itself a form of XML). You can expect these statements to remain constant in many XHTML pages that you work with, and so can simply copy and paste these lines into each new file. Do not be tempted to omit them - they will be necessary if you attempt to validate your XHTML document, to make sure that it does not contain any coding errors. Editors such as Dreamweaver will insert these tags automatically when you create a new XHTML page (see Section 9.3.1 above).
The web authoring classes run by DISS can provide you with practical training in web authoring, using both "raw" source code and Macromedia Dreamweaver. See www.abdn.ac.uk/diss/training/ for more details.
For a detailed reference guide to HTML, XHTML, and practical guidance on coding techniques, the book HTML & XHTML: The Definitive Guide is recommended, written by Chuck Musciano and Bill Kennedy, and published by O'Reilly. It is currently in its fifth edition (but be sure to check on-line for more recent editions before ordering).
Another O'Reilly book: Dreamweaver MX: The Missing Manual by David McFarland provides a very thorough guide to web site construction in Macromedia Dreamweaver.
There are many freely available tutorials to be found on the web, and a search
in Google
is a quick way of discovering these resources. At the time of writing, helpful
guides to HTML and XHTML are available at:
www.w3schools.com/xhtml/default.asp
www.webstartcenter.com/howto/
www.htmlhelp.com
A very useful piece of software to "tidy up" HTML or XHMTL code, and automatically repair any coding errors, is HTML Tidy. This is available for free at tidy.sourceforge.net/ and a detailed guide to its use is published at www.w3.org/People/Raggett/tidy/.
The official documentation to the XHTML language is maintained by the World Wide Web Consortium at: www.w3.org/MarkUp/, although this is considerably too technically detailed for most beginners.
Free on-line tutorials in Dreamweaver include:
www.macromedia.com/support/dreamweaver/tutorial_index.html
www.cbtcafe.com/dreamweaver/
 Contents page | Next Factsheet  |
