Web Design and Authoring: Session one

Create Your First Web Page

Type your page

Open Notepad and type the following HTML markup:

<!DOCTYPE HTML public "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/HTML4/loose.dtd">

<html>

<head>

<body>

</body>
</html>

This code creates your basic document structure. The rest of your content will go in between the opening and closing <body> tags.

Add the following text (shown here in bold) to your html document. Replace the text in italics with your own text/information.

<!DOCTYPE HTML public "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/HTML4/loose.dtd">

<html>

<head>

<title> web publishing week one </title>

</head>
<body>

Your name homepage
This is my first html document.
I want to learn html because add your own reason.

</body>
</html>

Save As .html

Select the File menu option and select Save As. You must save your file with the .html file extension to enable a web browser to display it.

First, navigate to the location on your computer system where you want to save your website. Then make a folder called coursework. This will be the site's root folder, and will contain all of your site's files and sub-folders.

It is customary to save the homepage or first page of your website as index.html. This is because, by default, browsers search for an index.html file when users type in the basic server URL (e.g. www.bbc.co.uk typed in the browser's address bar will return the page www.bbc.co.uk/index.html).

Notepad, being a text editor, will try to save your file with the .txt file extension. To ensure that you don't end up with a file named index.html.txt (which won't work!), first select All Files from the Save as type menu:

shows 'Save as Type' selection of 'all files' option

Then type index.html in the File name text box, and click on Save.

Use lower case for file and folder names, and no spaces!

To ensure that the links and file references within your website work reliably on all types of server, it is important to write all folder and file names in lower case with no spaces.

The Windows operating system is not case-sensitive when it comes to file and folder names. Index.html is the same as index.html in Windows. To a Unix server, like the one we shall use here in Learn, Index.html is a completely different file from index.html. If you do use capitals in your file names you must be 100% accurate with every reference to every link on every page; it is far easier just to stick to lower case throughout!

Windows allows spaces in file and folder names. For example, the folder name course work is perfectly acceptable to Windows. On the Unix server spaces are absolutely not allowed: course work would simply not be found. You could use course_work if you wish, but coursework has the advantage of being easier to type!

View your web page in the browser

Having created and saved your HTML page, you will view it in a web browser.

Open Mozilla Firefox. From the File menu select Open File ...:

In Firefox, select Open File from the File menu

browse to find your .html file. Double click and there is your web page!

First web page viewed in Firefox

Hmmm, maybe not the result we expected, given what we typed into Notepad?

First page as typed in Notepad

Any formatting we do in Notepad (line breaks, paragraphs, tabs, additional whitespaces) has no effect at all on the browser's rendering of our page. To structure our HTML page we must add HTML tags to identify the various elements of our text; here, as a heading and two paragraphs:

First page with h1 and p tags added

Remember, when you make amendments to your page in Notepad, you must save the changes. Then, in the browser, Reload (or Refresh) to load the amended file. This looks a little better:

Amended page reloaded in browser

Use the Alt and Tab keys to swap between Notepad and Firefox. In Notepad, add more text to your document and experiment with adding these basic formatting tags:

HTML tag	Description
<p> </p>	encloses paragraph text
<h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4>	encloses the text of headings and sub-headings (there are 6 levels of headings from <h1> the most important, to <h6> the least important sub-heading) in practice, <h5> and <h6> level headings are rarely used
<br>	line break (in HTML the break tag is not closed; in XHTML it is self-closed: <br />)
<ul> <li> </li> <li> </li> <li> </li> <li> </li> </ul>	creates a bullet-point (unordered) list change the enclosing <ul> </ul> tags to <ol> </ol> to create a numbered (ordered) list the list item tag <li> </li> is the same for both types of list

Not sure why we're using the Firefox browser? Check out A Note on Web Browsers.