Home Affiliate Marketing Lessons Site Building Beginner Step-by-step: Building a Basic Web Page

Step-by-step: Building a Basic Web Page


Affilorama members only

 

Watch a preview Join for free

Step-by-step: Building a Basic Web Page

The aim of this lesson is to show you a step-by-step guide to building a basic webpage. Discover how easy it actually is to create basic web pages!

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

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 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

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.

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!

 


Questions & Comments + Add a comment

Reply Shelly-Ann Smalling732 days ago
Hi, there is no audio for this video. I have cleared my cookies and restarted the machine, but there is still no sound. Any other suggestions? Thanks...
Melissa Johnson730 days ago
Hi, Shelly-Ann! Looks like there might have been a glitch. The audio should be working again. If it's still not, you can reach out to our support team, and they should be able to help!

http://affilorama.com/support
Reply Robert KWalker711 days ago
No audio for Basic Web Design!
Robert K. Walker
Melissa Johnson710 days ago
Thanks for letting us know! I'll see what I can do about getting that fixed.
Reply Jonathan Erb657 days ago
It seems odd that you would not have a similar tutorial for WordPress given that the JetPack websites are done using that, not these other website building platforms!
Melissa Johnson653 days ago
Hi, Jonathan! Thanks for the suggestion -- you're right! However, we do like to give our affiliate options, hence the tutorials here.
Reply James Wani572 days ago
Hi Melissa, I am a newbie and right now I am going through the free lessons, I wonder if it is possible for you to provide us with links to some websites or resources related to introduction to dreamweaver, or html or wordpress...
Melissa Johnson570 days ago
Hi, James!

The thing about tutorials for any of these site builders is that there's an overwhelming number of tutorials out there for all of them, because each of them is quite versatile. A good place to look for tutorials in general is Lynda.com.

You might also find some of the following links helpful:
http://www.w3schools.com/html/
https://validator.w3.org/
https://learn.wordpress.com/
https://helpx.adobe.com/dreamweaver/tutorials.html

My personal experience in trying to learn Adobe products is to just kind of throw yourself into it and Google anything you want to do. You'll find probably at least 3-6 different ways to do any given thing. Some of them will be quick and effective, and some of them will be a roundabout way discovered by other people who are also learning as they go.
Reply Kate Owobu396 days ago
Just finished reading how to create a website. Thank you very much for the information, but my question is: firstly, can I create a website using a smart phone and secondly, where will one open to start the whole process? Because am a complete newbie when it comes to this. I hope this works for a product review website because am actually thinking of going into product review.
Melissa Johnson395 days ago
Hi, Kate!

I don't think there are many full-fledged apps that will let you completely build a website from a phone. However, Weebly does have a mobile app for it. There may be others, as well.

I recommend reaching out to others on the Affilorama forum. They'll be able to provide greater guidance on the process and help you decide which route you want to go.

https://www.affilorama.com/forum/
Reply Rizalde Dialogo314 days ago
hi im a newbie i purchase from Godaddy combo of domain+website+email now im stuck what to next..can you give the step by step procedure on how to move forward..Thank you and God bless
Beginner

Don't forget to follow us!

More topics

Essential Resources Every New Affilia... New to affiliate marketing? Not sure what it's all about? Then let us get you started!
Affiliate Outsourcing No one person can do everything on their own. Learn how to reduce (or even eliminate!) your workload with outsourcing.
Site Building As an affiliate, chances are you'll end up building a website or two. Here's your basic quickstart!
Marketing Ideas Needing inspiration? Wanting to go outside the box? Take a look in here for your next few marketing ideas!
Market Research for Affiliate Marketers To be a successful affiliate you must learn how to research their market before dedicating your precious time.
Pay Per Click Pay-per-click is one major method affiliates use to get traffic. Learn what it is and how you can use it effectively!
Search Engine Optimization Search engine optimization (SEO) is a major way of getting traffic to your site at minimal cost! Learn how to put it ...
Content Creation This section is all about content: How to write it, how to get it written for you, and other useful goodies!