Step-by-step: Building a Basic Web Page

In this lesson we're going to show you how to create a very basic webpage with a title, a header, a link and an image. But that's not all: we're going to create the same page twice using two different web authoring programs! The aim of this lesson is to show you a step-by-step guide to building a basic webpage - to learn how easy it actually is to create basic webpages, and to give you a peek inside two different authoring environments, so you can decide which one is best for you.

Here's the (very basic) page we're going to create:

Adobe Dreamweaver

Adobe Dreamweaver (originally Macromedia Dreamweaver) is the premiere web design and development tool in the industry; unfortunately, along with it's power comes some complexity, so it can take a bit to get used to.

Adobe supplies a fully functional 30-day trial that you can download for free from their website.

Things you may like about Dreamweaver:

It gives you the ability to do a lot of stuff without having to touch a web page's code
It works on both Mac and Windows

Things you may dislike about Dreamweaver:

It's expensive
It can be overwhelming, since it's designed to be very powerful

Creating a blank page

To get started, open Dreamweaver and select 'HTML' under the 'Create New' menu. This will give you a blank HTML page. Save this page into an appropriate location by going to the 'File' menu, and clicking 'Save';

Heading and Title

The next step is to give your page a heading and a title. Start by writing "Delicious Apple Pie Recipes". Now select this text and go into the 'Properties' panel at the bottom of your window and click on the box that says "Format: 'None' ". Select 'Heading 1' from this menu.

Now, go to the top of the page design window and click in the 'Title' box and give your page a title. This is the text that will appear at the top of your viewers' browser windows and in the search engine rankings (Now you can see why some websites have 'Untitled Document' in their titles - they forget this step! )

Image

Now we're going to insert an image; you will already need to know what image you wish to insert (we've chosen a delicious looking apple pie from Stock Exchange). To insert the image, go to the 'Insert' menu, and select 'Image'. Navigate to the location of the image, select it, then click 'Choose'.

You will then get a dialog asking about 'Alternate Text' and 'Long Description'. Although these are optional (you can just click 'OK' to skip them), we highly recommend filling out the Alternate Text box to describe the image (in this case, we described our image as 'Apple Pie'); these descriptions are very useful for people who browse the web without images - e.g. visually impaired viewers, or those on limited bandwidth connections. These descriptions are supposed to describe the image, and give the viewer and idea of what they might have been looking at.

Once you've finished writing the alternate text, click on 'OK' and your image will appear in the document! If your image appears next to your header, instead of under it, just click between the Header and the Image and press 'Enter' to put the image on the next line.

Links

The next step is to provide some sort of basic navigation for your website; although your website might not have other pages yet, it's still useful to place the navigation in the right place from the outset. Write in the names you think you might need for your other webpages next to one another; in order to provide some separation between them in this example we've used the "vertical bar" symbol.

Because you don't yet have pages to point your links at, we'll point your navigation at a 'dummy' location. To do this, select the text for the first link, go into the 'Properties' panel, then next to 'Link' type "#" - this will turn your text into a link (pointing at nothing). Repeat for all the items you want to turn into links. To change the link in future, just select the text again, go down to 'Link', and click the Folder icon to select the actual page you want to point to.

Write some text

The next step is to start writing some text - the main body of your website. This is the real meat and potatoes, and this is where you'd put your articles or main site content. For now we've just used some dummy text from a text generator, but you will probably want to put some real content here.

A little tidy-up

The final thing that we're going to do to this page is change how the text sits around the image. To do this, click on the image, go to the 'Properties' panel, click on the"Align: 'Default' " box, and select 'Left'. This will cause the image to sit to the left of your page, and the text (and links) to wrap around it to the right.

Taking it from here

You now have the ability to insert and modify images, write text, set heading and create links with Dreamweaver. You can now copy this page to create more pages for your website, insert more images, or insert links into the text of your website!

Old School

The second method of creating webpages is very different - writing HTML code directly.

Many people find the concept of writing a website in code somewhat daunting. However, this is the traditional method, and the method used by most professional web designers/developers (including our own Affilorama developers!). Thinking in code can take a little to get used to, but it is something you'll need to learn eventually so that you can do the advanced affiliate stuff like inserting AdSense code, or setting up your meta tags, so it always pays to learn.

Things you may like about going 'old school':

You have complete control over a web page
You only require a basic text editor

Things you may dislike about going 'old school':

It takes a lot of practice to get used to
You can't see the outcome of what you're editing as you make the edits

Creating a blank page

To get started, open the text editor of your choice, go 'File' > 'New', and the save the page in an appropriate location. Make sure you save the file with a '.htm', '.html' or '.php' extension (the first two are preferred, unless you are going to do some extra coding stuff, which is beyond this lesson)

Alas, that is not all; you need what is called "Boilerplate code" - the very basic code required to have a valid webpage. Fortunately, we've written up a basic one for you which you can just copy and paste into your document:

<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Untitled Page</title>
</head>
<body>
</body>
</html>

From here you can preview your page at any time by locating it on your computer (Either by using 'Windows Explorer' or 'Finder', depending on your operating system) and double-clicking it to open it in your browser.

Heading and Title

The next step is to give your page a heading and a title. In between the <body></body> tags on your page, write "Delicious Apple Pie Recipes". Now to make this text into a header, you simply put <h1> in front of it, and </h1> after it, like so:

...
<body>
<h1>Delicious Apple Pie Recipes</h1>
</body>
...

To set the title of your page, go into the <head> section and look for the text that says 'Untitled Document' between the <title> tags. Whatever you write in place of 'Untitled Document' is the text that will appear at the top of your viewers' browser windows and in the search engine rankings.

Image

Now we're going to place an image; you will already need to know what image you wish to insert, and you will have to have copied it into the same directory (or a nearby directory) as your webpage. Then, to 'insert' the image, type the following in:

...
<body>
<h1>Delicious Apple Pie Recipes</h1>

<img src="apple-pie.jpg" alt="A picture of Apple Pie"/>
</body>
...

This 'inserts' the image with the name 'apple-pie.jpg' which is in the same location as your file; obviously you will need to replace this with the name and location of your real file. The alt= is the alternative description text for people who browse the web without images - e.g. visually impaired viewers, or those on limited bandwidth connections. These descriptions are supposed to describe the image, and give the viewer and idea of what they might have been looking at.

Links

Because you don't yet have pages to point your links at, we'll point your navigation at a 'dummy' location. To create a link, you surround it with <a> tags, then point it at a specific location, as in the following example:

...

<img src="apple-pie.jpg" alt="A picture of Apple Pie"/>


<a href="#">A dummy navigation link</a> |
<a href="page.htm">Another link</a> |
<a href="http://example.com">Another Website</a>

...

As with the Dreamweaver page, '#' is just a dummy location, but page.htm and http://www.example.com are locations of pages and websites you actually want to point to. The bit in between the <a> </a> tags are what is actually shown on the page; for example, the first link that points to '#' will show up as 'A dummy navigation link'.

Write some text

But wait... it's not that simple

Unfortunately there's a small caveat to this; you may have noticed earlier in our Links example that the items were each on separate lines. However, if you view them in a web browser, they all showed up as being on the same line.

Indeed, it doesn't matter how your HTML is laid out, you must still be very specific about where you place newlines, using <p> (short for 'paragraph')and <br/> (short for 'line break') tags, as in the following:

...
<p>This is a paragraph (hence the p tags)</p>
If I do not have p tags, then one paragraph
 
will be joined with the *next* paragraph.
 
<p> This is a paragraph, but I want a newline partway through. <br/> I can
do that with the br tag.</p>

...

If you previewed that little code snippet, you would see:

This is a paragraph (hence the p tags)

If I do not have p tags, then one paragraph will be joined with the *next* paragraph.

This is a paragraph, but I want a newline partway through.
I can do that with the br tag.

A little tidy-up

The final thing that we're going to do to this page is change how the text sits around the image. To do this, we need to modify our image tag to look like the following:

...
<img src="apple-pie.jpg" alt="A picture of Apple Pie" align="left"/>
...

The new part is the align tag, which can contain the text "left" or "right" (or a couple of other options).

Taking it from here

You now have the ability to insert and modify images, write text, set heading and create links in code! You can now copy this page to create more pages for your website, insert more images, or insert links into the text of your website!

One more note

Although we've covered how to create a webpage completely in design mode as well as in code you probably want to use a combination of the two (unless you really take a liking to using code completely). Fortunately, Dreamweaver has the ability to switch between 'Code' and 'Design' mode (or a dual-mode called 'Split' which shows both at the same time)! You may find this feature to be more useful, especially when starting out with HTML.

However, one thing to be aware of is that Dreamweaver generated code is not generally as 'clean' as code you've written yourself, so it can add a lot of extra tags and code which may not make sense or which you may not have encountered; the best ways to learn are either by looking up the tags on the Internet, or playing around and editing/deleting the new bits to see what they change (after you've made a backup, of course!).

Lesson Summary

In this lesson we looked at how to create a webpage in both Dreamweaver and in code. We looked at adding the following parts:

Creating a blank page
Setting a heading and title
Inserting an image
Putting in some links
Writing your main text
A little bit of a tidyup

Learn something new? Share it with your friends!

" "

Search This Blog

INTERNET AFFILIATE MARKETING