How to Create Your First Webpage

This small tutorial will give you a quick intro into Webpage creation. The first important point to understand is that creating webpages is actually very easy. Anyone can do it. All you need is a

In fact, it's usually those last two items on that list that cause people the most problems.

Requirements

Setting up your machine

The first thing to do is to configure your PC to make it easy for you to write HTML files. The following instructions will get your machine set up correctly.

The steps below aren't essential, but they will give you a handy shortcut when it comes to creating webpages. Follow them through... the instructions later on will make more sense if you've done this step.

First, we need to create a shortcut to the Windows Notepad program from clicking the right-mouse button. To do this:

Creating our first page

First we need to be able to see a blank part of the desktop. To do this, close all open applications except this one. Then, if this application is maximised, click on the Restore button in the top right (it's the one that looks like two squares, one behind the other. Then, drag the edge of the window so you can see a clear part of the desktop.

The first step is to understand that a webpage is created by HTML code. HTML is a very simple scripting language, designed to pass information from one computer to another. This code is very easy to learn, and that is why many people are publishing webpages on the World Wide Web every day.

Before we get typing our life story on the page, we have to put some very basic tags on the page first. In your blank Notepad window, type in the following, keeping the spaces and new lines approximately the same:

<html>
<head>
<title>My first digital missive</title>
</head>

<body>

</body>
</html>

This needs a little explanation. A browser needs to be given commands to tell it what to do; for example, where to put text on the page and what colour to make it.

The way we give the browser these commands is by enlosing them in less-than and greater-than signs; < and >. These commands we call tags.

<p>This paragraph has two tags<p>

Very often, but not always, they come in a pair; the first is the opening tag, and the second is the closing tag. The two tags and any content in between is referred to as an element.

<html>
<head>
<title>My first digital missive</title>
</head>

<body>

</body>
</html>

You can see in the code above that our webpages in enclosed by the HTML element. This tells the browser that it is looking at an HTML document.

The first tag, <html> is at the very top of the file, and its accompanying closing tag, </html>, is at the very bottom of our file. You can see that the html element is comprised of two tags, an opening tag and a closing tag.

Any closing tag is exactly the same as its opening tag, except that it has a forward slash, /, at the start.

Whatever we type between the TITLE tags on our page will appear in the blue bar at the top of the browser window, so write something descriptive of the page inbetween those tags.

The main action comes between the BODY tags; that is where we actually get to type something that is displayed on the screen.

and finally ...

Okay! Okay! This is where we get your message to the world onto the screen, so calm down :-)

Let's say you want to have a big heading to start the page with. The way to do that is to type in the text and enclose it in the <h1> element, like this:

<body>

<h1>My rambling spiel</h1>

</body>

This tells the browser to render the text between the Level 1 heading tags in a large and bold font, like a newspaper headline. The word "render" just means display.

Then, to have some text beneath the heading, type the text you want and enclose it with paragraph tags like this

<body>

<h1>My rambling spiel</h1>

<p>Life started for me in that most amazing decade, the 70's. It was the year 1972, to be exact. I was born in Coventry at Walsgrave Hospital which still stands there today.</p>

</body>

... and Congratulations! You've taken the first step in designing you own website.




	« tutorials
	How to Create Your First Webpage This small tutorial will give you a quick intro into Webpage creation. The first important point to understand is that creating webpages is actually very easy. Anyone can do it. All you need is a computer with a browser installed a simple text editor (Notepad or Simpletext is enough) an eye for layout, and something to say to the world In fact, it's usually those last two items on that list that cause people the most problems. Requirements This tutorial assumes you are/have: using a PC running Windows 95 or Windows 98 a browser installed, such as Netscape Navigator or Internet Explorer a good basic knowledge of using your PC Yeah, I got all that. Now what? Setting up your machine The first thing to do is to configure your PC to make it easy for you to write HTML files. The following instructions will get your machine set up correctly. Can't I just start writing pages? The steps below aren't essential, but they will give you a handy shortcut when it comes to creating webpages. Follow them through... the instructions later on will make more sense if you've done this step. Oh, OK, just get it over with First, we need to create a shortcut to the Windows Notepad program from clicking the right-mouse button. To do this: Click the Start button Select Programs Select Windows Explorer From the menu bar, select View \| Options Make sure the Hide MS-DOS file extensions for file types that are registered box is unchecked Click on the File Types tab Use the scroll bar to find the .HTML or .HTM file type (this may be called either Netscape Hypertext Document, or Microsoft Internet Document Highlight the HTML file type Select Edit on the right Select New In the top blank box, type Edit with Notepad Click on the Browse button Locate the Notepad program by navigating through the folders - it's defaul location is C:\Windows\Notepad.exe When you have found the Notepad program, highlight it, and select Open Select OK Select Close Select Close Great! Now we can set about creating our first webpage. Creating our first page First we need to be able to see a blank part of the desktop. To do this, close all open applications except this one. Then, if this application is maximised, click on the Restore button in the top right (it's the one that looks like two squares, one behind the other. Then, drag the edge of the window so you can see a clear part of the desktop. We are getting close now! The next steps are: Right-click on a blank part of the Desktop Select New \| Text Document Type in index.html Click Yes when it asks Are you sure you want to change it? Now, click once on our newly created file with the right mouse-button, and select Edit with Notepad Notepad will open our file for editng Now we have our blank canvas to create our masterpiece :-) OK, now what? The first step is to understand that a webpage is created by HTML code. HTML is a very simple scripting language, designed to pass information from one computer to another. This code is very easy to learn, and that is why many people are publishing webpages on the World Wide Web every day. Before we get typing our life story on the page, we have to put some very basic tags on the page first. In your blank Notepad window, type in the following, keeping the spaces and new lines approximately the same: <html> <head> <title>My first digital missive</title> </head> <body> </body> </html> And what the heck does that do? This needs a little explanation. A browser needs to be given commands to tell it what to do; for example, where to put text on the page and what colour to make it. The way we give the browser these commands is by enlosing them in less-than and greater-than signs; < and >. These commands we call tags. <p>This paragraph has two tags<p> Very often, but not always, they come in a pair; the first is the opening tag, and the second is the closing tag. The two tags and any content in between is referred to as an element. <html> <head> <title>My first digital missive</title> </head> <body> </body> </html> You can see in the code above that our webpages in enclosed by the HTML element. This tells the browser that it is looking at an HTML document. The first tag, <html> is at the very top of the file, and its accompanying closing tag, </html>, is at the very bottom of our file. You can see that the html element is comprised of two tags, an opening tag and a closing tag. Any closing tag is exactly the same as its opening tag, except that it has a forward slash, /, at the start. Whatever we type between the TITLE tags on our page will appear in the blue bar at the top of the browser window, so write something descriptive of the page inbetween those tags. The main action comes between the BODY tags; that is where we actually get to type something that is displayed on the screen. and finally ... Hurry up! I've got a great idea! Okay! Okay! This is where we get your message to the world onto the screen, so calm down :-) As I said, the interesting stuff happens between the BODY tags: <body> This bit here </body> Let's say you want to have a big heading to start the page with. The way to do that is to type in the text and enclose it in the <h1> element, like this: <body> <h1>My rambling spiel</h1> </body> This tells the browser to render the text between the Level 1 heading tags in a large and bold font, like a newspaper headline. The word "render" just means display. Then, to have some text beneath the heading, type the text you want and enclose it with paragraph tags like this <body> <h1>My rambling spiel</h1> <p>Life started for me in that most amazing decade, the 70's. It was the year 1972, to be exact. I was born in Coventry at Walsgrave Hospital which still stands there today.</p> </body> Now you've typed in enough to make an impression: Within Notepad, select File \| Save Move or Close Notepad so you can see the file index.html on your desktop Double-click the file This will open the file in your default browser Welcome to the world of Web publishing! ... and Congratulations! You've taken the first step in designing you own website.
	stylesheets »