Tutorial: Creating a Simple HTML Webpage
First WebPage
Are you new to HTML and CSS style sheets? Kick back for a moment and read this simple HTML tutorial which takes you from knowing nothing to creating a simple webpage with some pictures and text. What you learn in the next few minutes will give you the knowledge needed to open and understand many of the wonderful HTML templates currently available free to download.
What do you need to be able to create and edit websites? Many people will tell you to invest in software such as Dreamweaver or Frontpage, and that these will allow you to create a webpage to be proud of. This is true, but in this tutorial we’re going to use a basic text editor, such as Notepad for our Windows readers or TextEdit for Mac users.
These are free, they actually come bundled with your Operating System, and HTML isn’t that complex that we need to worry about buying expensive software right now. And anyway, with so many free templates available online, most people only need a text editor to insert their own content, so without any further rambling from me, click to read on.
<b>HTML Basics</b>
An HTML page is at its simplest only a text document with some extra bits of markup added to allow a web browser to display it correctly on your monitor. To do this we need to ensure that every HTML page includes the following elements <html>, <head>, and <body>. A basic HTML page without any content looks like this;
<code>
<html>
<head>
</head>
<body>
</body>
</html>
</code>
You’ll notice every piece of markup has < > around the code, and that if you look closely, you’ll see each bit of HTML also has two parts, for example <head> and </head>. The example above doesn’t actually do anything, you would simply see a bank screen inside your browser, but it is still a perfectly valid webpage.
The <html> at the very beginning, and the corresponding </html> at the very end of the document are required for every single HTML webpage. They tell your web browser to start interpreting the HTML in the page and to display the information the way you want it to be.
But let’s do something more with this to let you see how easy it is to write HTML pages.
<code>
<html>
<head>
</head>
<body>
<h1>Hello World</h1>
<p>Oops, our first example says ‘Hello World’, and I promised myself I wouldn’t use such a simple example.</p>
<!– a comment for my use –>
</body>
</html>
</code>
The <html> element simply tells your web browser that it is looking at an HTML formatted page. The <head> element must always be above the <body> and is used to tell your browser or search engines about your page, but this section will never be seen within the browser window. The <body> element contains everything that the browser needs to display on screen for your visitors, whilst the <h1> and <p> elements represent a heading and a paragraph.
Notice that every element is written twice, with the only difference being the addition of the forward slash ( ⁄ ), which tells your browser the section has finished. The less than sign, exclamation mark and double dash (<!–) signify a comment within the HTML, and must always be closed with a double dash and greater than sign (–>), and any content appearing within this will not be displayed by your browser. Comments are useful and help you remember what your trying to achieve.
<b>Creating the HTML Page</b>
Ok, without any further explanation, lets get to the nitty gritty of creating our first real HTML page. Obviously we’re going to use the last example as the basis, but we’re going to take out the ‘Hello World’ bits. I’m going to use some photos from a trip around Europe.
<code>
<html>
<head>
<title>First Gallery</title>
</head>
<body>
<h1>Sample Pictures of my Trip to Europe</h1>
<hr />
<img src=”images/frenchviaduct.jpg” />
<img src=”images/gaudiscathedral.jpg” />
<img src=”images/julietsbalcony.jpg” />
<img src=”images/rhodestown.jpg” />
<p>Photos taken whilst on a Contiki tour from London to Athens. They are a Roman viaduct in Southern France, Antoni Gaudi’s incomplete cathedral in Barcelona, Juliet’s balcony in Italy, and the headquarters of the crusaders on the island of Rhodes.</p>
</body>
</html>
</code>
Viewing this page in a browser looks quite unattractive, everything is squashed up against the left side of the browser, the font used is the standard font used by your browser, probably Times Roman, and the page generally isn’t appealing. But notice one difference between this example and the ‘hello world’ example. The <hr> and <img src=" "> elements don’t have separate closing tags. Some HTML elements, these two included, don’t need a separate closing tag. I don’t know why this is the case, I’m sure the people who write the HTML specification have their reasons, but notice they still contain the ‘/’.
<b>Adding the CSS Stylesheet</b>
I think you’ll agree the above example, whilst very impressive for a first webpage, lacks that certain something that would compare with a masterpiece.
To add some styling, so that our background colour, font, font color, spacing etc are better presented is easy to do, we need to add the CSS stylesheet we talked about earlier. This is a separate file that our browser will download, and then use to style every page that asks for it.
The HTML page needs the following line added to the <head> section;
<code>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</code>
This line tells the browser we are linking to an external file which is a stylesheet, and is named ‘style.css’. You can name your stylesheet anything you like, and sometimes a more descriptive name might be more appropriate, but you should always keep the extension (the .css part) the same.
<b>Styling our First HTML Webpage</b>
Now that we’ve added our stylesheet file, we need to actually write the styles we’re going to use. Stylesheets use a different coding convention from HTML pages, and I must warn you if you haven’t seen one before you might struggle the first time you write your own. Sorry.
So that we don’t overload your learning curve, I’m going to stick to a very basic stylesheet. I think you’ll find once you understand the basics that you’ll be able to recognise the essential elements within other websites, and don’t be afraid to copy the HTML and CSS of another website within your own pages.
The first gallery above uses the following HTML elements, <body>, <img src=” “>, <hr> <h1>, and <p>. Our stylesheet will include only these elements to give you a feel for how powerful stylesheets can be. The CSS code looks like this;
<code>
body {
background-color:#fffff;
width:800px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
color:#333333;
}
hr {
width:95%;
color:#efefef;
height:1px;
border:none;
}
h1 {
font-size:1.3em;
text-align:center;
line-height:120%;
color:#467aa7;
}
p {
font-size:13px;
text-align:center;
line-height:115%;
}
img {
border:1px solid #efefef;
margin:4px;
}
</code>
You can probably work out what each style does, they’re not all that complex. The W3C have defined the way that styles are to be formatted, and it goes like this. The selector (eg the body, or h1) is opened and closed by curly brackets, and all declarations must be within the curly brackets and written as property name, a colon, the value, and then a semi-colon.
If that seems needlessly complex, we all had to get used to it, and after the initial jolt it starts to make sense so keep with it. Read it twice if you have to.
<b>Centering the Images</b>
Having reached this stage, you should really be able to see some significant progress, although you’ll notice we have one final step to complete. The photographs are not centered on the page like our text is. This is an easy fix, but is requires adding an extra element to our HTML page. this particular element also includes a short style, so is a combination of both HTML and CSS stylesheet. Here’s an example;
<code>
<div style=”text-align: center;”>
<img src=”images/frenchviaduct.jpg”>
</div>
</code>
And now we can complete the rest of our first HTML webpage.
<code>
<html>
<head>
<title>First Gallery</title>
</head>
<body>
<div style=”text-align: center;”>
<h1>Sample Pictures of my Trip to Europe</h1>
</div>
<hr />
<div style=”text-align: center;”>
<img src=”images/frenchviaduct.jpg”>
<img src=”images/gaudiscathedral.jpg”>
<img src=”images/julietsbalcony.jpg”>
<img src=”images/rhodestown.jpg”>
</div>
<p>Photos taken whilst on a Contiki tour from London to Athens. They are a Roman viaduct in Southern France, Antoni Gaudi’s incomplete cathedral in Barcelona, Juliet’s balcony in Italy, and the headquarters of the crusaders on the island of Rhodes.</p>
</body>
</html>
</code>
That’s it for <em>Creating a Simple HTML Webpage</em>, I hope its been useful to you.
Tags: html
HTML and CSS | Pixabella | 
September 19, 2007 12:31 am
