Web Design

   

what is a web page?



main menus


help pages


Valid XHTML 1.0!

 

what is a web page? | what is HTML? | what is a web site?

what is a web page?

A web page is a data file so in many ways is no different from a Word document or a spreadsheet. The various programs on your PC -- word processors, spreadsheets, video players or anything else -- are properly known as applications. Think of them as like a car, with the hardware being the ground to drive on, and the operating system (which on most PCs is Microsoft Windows) being the traffic system and rules of the road. In the case of web surfing (and web design), the applications are web browsers. You are using one right now to look at this page and I talk about them a bit more on the page about tools.

Image: Jaguar E-type

But even the smartest car cannot run without fuel. When you work with a word processor, the application does nothing on its own. You also need a data file, in other words, the actual document you are writing or editing. Files are those things named something.doc (in Word), something.xls (in Excel) or something.html when reading or writing a web page. So at the simplest level, a web page is a data file with the extension .html. And like any other data file it can be edited, moved around between folders, renamed and so on. We saw that in the lecture.

When you're browsing a web page, therefore, you're not receiving a signal as if you were watching TV. You are simply opening a data file, just as if you were reading a Word document. Now, of course, when browsing the World Wide Web, as the name suggests, the HTML file you're opening could actually be located anywhere in the world. To make a browser find a file remotely, you type in the web page's address into the location bar: known as the Uniform Resource Locator, or URL. The URL of this page is:

    http://personalpages.manchester.ac.uk/staff/andrew.whitworth/webdesign/subj_whatsite.html

Typing something like this into the browser's location bar and pressing return instructs your computer to access a distant computer, known as a server, and to download the HTML file via the telephone line. But you can also't create your own HTML files on your own computer and access them locally. More information on how to do this is given on the page which discusses the tools you need.

Query!

"I sometimes see web pages which end in extensions other than .html, like .htm, .asp, .cfm or .cgi."

The reason for .htm is that older versions of Windows insisted on a maximum of three characters for extensions. This restriction has been removed. It actually doesn't matter which one you use, but .html is favoured. Whichever one you choose, though, be consistent as a computer won't think to look for mypage.html if you wrongly told it to look for mypage.htm.

If you see any other extensions what you are looking at is still a web page, but it is not written in HTML. This is usually because it uses more advanced technologies. We will touch on these in the more advanced parts of the course but for now they are best left to one side. At this point you should be calling all your web pages something.html.

Back to the top

what is HTML?

When you look at a web page online you are not actually seeing it in its proper form. To see what an HTML file really looks like, click on the right-hand mouse button anywhere on this page (except over an image). Then choose the option, "View Source". (If you are reading this page in Opera, press Ctrl+F3 instead.) That's an HTML file. (Remember that "View Source" routine - it's an important way to see what is going on on any web page, and you can use it to check the structure of not only the pages on this site, but pretty much any page on the web.)

HTML files are plain text. They contain only unadorned text and a few symbols, made up of the basic 255 ASCII characters (ASCII is the standard code for translating the binary digits computers use into basic text). They can't contain images, colours, or even simple formatting such as italics.

The term HTML stands for:

HyperText Markup Language.

The "language" part of the term is rather misleading. It makes it sound as if web design involves a long and difficult process, as is learning another human language (or a programming language). But it's much easier than that. Once you've learnt a few basic techniques, writing a basic web page is simple; no harder than writing a letter or essay.

"Hypertext" is the technical term for the way you can jump from one part of a passage of text to another, or to a different passage altogether. That is discussed in this web site's accompanying book (chapter 3), although you will see more of it in lesson 3.

The most important part of the term HTML is the M, for "markup". HTML is a way of "marking" plain text at the places you want the browser to apply some special formatting. Remember that in the lecture we used the example of punctuation to show how this is actually a fairly commonplace idea. When you want to point out to the reader that a passage of text is a quotation, "you enclose it in quotation marks like this". We don't use that many different punctuation marks, but computers are not intelligent beings (honestly) and they need information about every piece of formatting that you want to put onto a web page. When you want to tell a computer that, say, some plain text is meant to be bold text, you have to enclose the words in tags.

All formatting, or marking up, on a page is done with tags and associated attributes. Read those two pages for more details. If you understand them, you understand HTML and therefore web design! Of course it's not quite as simple as that - there are many different tags, and many ways of using them creatively and well - but tags are really all there is to it.

Why is it done this way? Why not just create files with pictures and colours and so on intact, and bypass the interpreting of a simpler version of the file? The answer is speed. A web page is usually read from one end of a telephone line and this means that the smaller the page is in memory terms, the better. Keeping web pages as plain text ensures that pages can be quickly transmitted and loaded; better for the reader, and indeed better for computer and telephone networks, which are like motorways, in that they are more pleasant to use and require less maintenance when traffic flows are light. It's true that more and more people have broadband access these days, but keeping things small is still an important part of writing a good site. More on this in lesson 6 and in chapter 5 of the course booklet.

Back to the top

what is a web site?

A web site, then, is a collection of web pages, or several HTML files. A site will usually (but not always) have a coherent theme, and probably a consistent visual style. But in the end the thing that defines a site is that all the files are stored in one place. You'll see that whenever you move around this site, most of the web address stays the same.

For information on how that URL was put together, see the page on URLs, but bear in mind for now that one reason it works is that the HTML files which make up this site are all stored in the same folder. This is a good habit to get into, although when your sites start getting very large you may start using subfolders as well (see the page on internal links).

Also bear in mind that a "web site" does not just include HTML files. Most web sites will also incorporate graphic images, and these are also stored in the folder alongside the HTML files. Also, there's a special kind of file called a style sheet, which contains information about the appearance (or style) of the site, and which we will look at in lesson 2.

Back to the top

Back to the menu for lesson 1



Material on this site is © Drew Whitworth, 2005 Permission will usually be given to reproduce material from this site for non-commercial purposes, if credit is given. For enquiries, e-mail Drew at andrew [dot] whitworth [at] manchester [dot] ac [dot] uk.