Create a Simple Web Page


Open the  Notepad text editor (not any other word processor as they may add markup).

Copy and paste the following html code into a new notepad document.

<!DOCTYPE html>




Save the notepad document with the .html file extension. (eg page.html) to a folder on the desktop (or your working directory).

Notice that there are two sections, a head and a body, nested inside html tags. The information inside the <head> tags is not displayed on the page but is information about the document, its title and any other files, such as style sheets, that may be needed to open the page.

In between the head tags type the following:

<title>Your page title here</title>

In between the <body> tags type:

<h1>My first web page</h1>

Save the document

You can view your work in a web browser by simply clicking on the html file in the file browser. It should open it in the computers default web browser.

You can add blocks of text using the <p>...</p> tags, or sub headings using <h2>..</h2> etc.

To add an image you use an <image> tag with attributes, like this:

image src='yourimage.jpg'>

Hyperlinks using the <a ..> tag with the href attribute. For example you can create another html document (simply copy and paste what you have done so far into another document) and save it as page2.html

< a href='page2.html' > Go to page 2</href>

To make this work you need to have all the files in the same directory. In working situations you will have sub directories to store specific files. For instance:

<image src='mages/yourimage.gif'>

You can also refer to images and pages on the web.

<image src="">

Now we are going to create a style sheet and link it to our html document.

Create a new file in notepad. Save it as style.css

Let say we want to make all our h1 elements red. We do this by adding the following rule to our style sheet:

h1 color: red;

We can now link this style sheet to our html document by inserting the following between the <head> tags like this:

<link rel="stylesheet" href="/oswd/style.css">