Creating a simple web page

Contents

To TopHTML overview

The first thing to understand about HTML is that it is really a file format (i.e. a representation), not a programming language (i.e. a set of rules). HTML divides a text into labelled categories; it is up to a piece of software, i.e. a browser, to interpret these categories and provide a visual display. This is a fancy way of saying that the same HTML file will look different under different browsers. So, while text you label as <b> ("boldface") will probably display as bold in any browser, text you label as <h1> ("heading level one") will look different in Internet Explorer and Netscape Navigator. (This page, for instance, was designed and tested on Internet Explorer, and doesn't look quite right in Netscape.)

Moreover, your web page will look different on different computers, even when they're running the same version of the same browser. That's because different computers have different fonts, different video cards, and different monitors; the monitors have different resolutions (number of dots), sizes (size of dots), and color depths (number of colors per dot). So you never know exactly where the bottom or right side of your page will be, or what color anything will show up as, on someone else's computer.

So, if you're used to sharing your files by composing in a word processor on one computer, printing, and xeroxing, you're going to have to get used to forgoing a lot of control about how your document looks when you move to HTML.

One way to learn about HTML is to look at the "source code" (HTML text file) of other people's web pages. In Internet Explorer, you can select "View | Source"; in Navigator, it's "View | Page Source". This is a good way to see how people achieve effects you like.

In the following discussion, I'll format HTML expressions like this so they can be distinguished from regular text.

To TopTags and typing

HTML is ASCII text marked up with "tags". Tags are typed with a label surrounded by angled brakets. Tags specify how something should be formatted; for instance, <b> means "boldface the following text". Most tags also have corresponding end tags, prefixed with a forward slash: </b> means "stop boldfacing".

Most tags also have "attributes" -- actually attribute-value pairs, written with an equals sign between them -- which specify additional properties of the item. For instance, <p> means "begin a new paragraph"; <p color="blue" textalign="right"> means "begin a paragraph with right alignment and blue text". The attributes go in any order after the tag label and before the closing bracket. Values are enclosed in quotation marks, unless they're simple numbers.

HTML ignores any extra whitespace (spaces, tabs, carriage returns) you might insert in a document. For instance, if you try to add extra space between two paragraphs by typing extra carriage returns, you will only see one carriage return. On the plus side, you can use space to format your HTML code so it's readable without affecting the page.

  • To add extra spaces: use &nbsp; ("non-breaking space" -- this is a "special character", not a tag).

  • To add extra line breaks: use the <br> ("break") tag. (It has no closing tag.) Or, you can use <p>&nbsp;</p> to create an "empty" paragraph.

HTML also ignores capitalization. However, be aware that for anything within quotes, capitalization might matter -- especially URLs in links.

To TopA tiny HTML page

What follows is an example of a minimal HTML page, illustrating the use of the required tags <html>, <head>, <title>, and <body> to structure the file. The material between the <!-- and --> brackets is "comments" -- text you can use to comment on parts of your document without affecting what is displayed in the browser.

<html> <!-- This tells the browser this file is a web page. Required. -->

<head> <!-- This is for some preliminary material. Required. -->
<title>The truth about language</title> <!-- Displays in the browser's title bar. Required.-->
</head><!-- End of the head section.-->

<body> <!-- Here we go -- the actual contents of the page. Attributes placed in this tag (such as font and color) affect the whole page. -->

<p>This webpage contains everything there is to know about language.</p>
<!-- A paragraph of text. Attributes placed in the "p" tag affect the paragraph only.-->

</body> <!-- End of the body section. -->
</html> <!-- End of the document. -->

An HTML file must be a "plain ASCII" file. You can type it in a word processor if you choose the "save as text" option; however, most people prefer to play it safe by typing it in a text editor that doesn't add formatting, such as Notepad.exe (found in the Accessories folder on Windows systems).

If you want, you can copy the above HTML code to the clipboard, paste it into Notepad, save the file with the extension ".htm" or ".html", and double-click it in Windows Explorer to view it in your browser. While you're at it, change the title and the text between the paragraph tags, and you've composed your first web page!

To TopDreamweaver and other authoring tools

It isn't necessary to type all of this material by hand. There are several categories of alternatives:

  • WYSIWYG authoring tools such as Macromedia Dreamweaver. These let you compose a web page on the screen, seeing more or less what it will look like on the web as you do it. In Dreamweaver, producing a web page is as easy as choosing "File New" from the menu, and typing in the blank window that appears. Dreamweaver automatically inserts all the necessary tags. You can apply formatting much as you do in a word processor, by selecting text and clicking buttons, and see the results immediately. Dreamweaver also has very convenient functions for managing all the files that go with a website, keeping what's on your local computer with what's on the server and so forth. And it helps you reuse elements to achieve a consistent look across several pages with templates, libraries, and stylesheets.

    If you want the power of raw HTML, that is still available: Dreamweaver will display the HTML code in a split-screen view. Compared to other authoring programs on the market, Dreamweaver produces "clean" HTML: it doesn't include a lot of special markup that bloats the file size.

    Netscape Composer and Microsoft Frontpage Express are both WYSIWYG tools which come free with browsers, but both are significantly more limited than Dreamweaver, and they produce much "messier" html (it may not be possible to edit in other programs, and files may be larger, resulting in longer download times).

  • HTML editors such as Allaire Homesite (recently acquired by Macromedia). This is essentially a text editor like Notepad, souped up with lots of helpful features for typing HTML. For instance, when you type an opening tag, the closing tag will be inserted for you, and you can choose attributes and values from drop-down lists. There's also a preview window, so while you can't type directly into an image of your webpage, you can easily see the effects of anything you type.

  • Other applications that can output HTML as an export file format. This includes Microsoft Word and all the other Microsoft Office applications. A caveat though: Office applications produce large, complex files for even simple web pages; they take a long time to download; they can't be edited except in the source application; and they tend not to work well in browsers other than Microsoft's.

See LSIT's "Web Authorware Help" links at WebHelp for some comments on the plusses and minuses of various of these tools.

To TopAdditional basic HTML resources

For more information about what you can do with HTML and related issues, see More HTML and the links in Additional Resources.

UCSB Linguistics Department main page Susanna Cumming's department page Susanna Cumming's department page
University of California at Santa Barbara main page


 

Introduction
Get a Website
Create a Webpage
Upload a Webpage
Advanced Concepts
Additional Resources