Web Design Articles

How To Make a Website
Web Design Articles

Submit a Web Design Article

Web Design Articles    |    Design    |    Basics

Here you will find articles about Web Design, Web Site Accessibility, Web Standards and Internet Marketing. If you would like to have an article you have written published on this site please use the form above to submit your article for publication. If your article is published, you will receive a credit with a byline linked to your website URL.


   Article

How To Make a Website

by Web Design From Scratch


Pages are made of HTML

Web pages are described with a markup language called HTML. This provides the content and structure of the pages. It also says where images and other stuff should be. The good news is that HTML is fairly easy to learn.


What software do you need to make HTML pages?

To have full control over your web pages (and to be able to create interactivity using scripting languages) it's best to code by hand. You can do this with any text editor (like Notepad), but there are some much better free text editors (like TextPad). You don't even have to know HTML to make a web page. There are lots of visual editors (sometimes called WYSIWYG editors). NVU is a free WYSIWYG editor that's fine for beginners.


Your first web page

HTML pages should always include the following. You may want to copy & paste this into a new text file...


index.html

<html>
<head>
<title>Page title</title>
</head>
<body>
Your visible content goes here...
</body>
</html>

Notice how everything is contained between <html> and </html> tags.


This is an example of a paired tag, which need a starting tag and a matching closing tag (indicated with the forward-slash). Paired tags describe the content between them. In the case of the <html> tag, it's telling a web browser that everything between the 2 tags is HTML.


The head section

The head section of an HTML page contains information about the page, like what it's title is, whether it should use stylesheets etc. Its contents are not seen in the browser window (well, the title appears in the title bar..).


The body section

The body is where the visible content goes. Anything you put in the body of your HTML will be displayed in the browser (unless it's hidden).


Saving your HTML pages

To make an HTML page, just save your text file with the extension .html. Then, a web browser will know exactly what to do with it.


Naming your HTML files

I recommend saving all your files with lowercase names. If you're developing on a Windows machine, it won't be strict about filenames being in the correct case (AboutUs.html is treated the same as aboutus.html). But if you upload your site to a Linux web server (which most of them are), it will mind. If you ask for Blah.html, and the file is called blah.html, you'll get a "page not found" error. Also, I recommend against having blank spaces in file names. I generally use hyphens (-) instead of spaces.


Index pages

Whenever you open up a web site, or a particular directory on a web site, without asking for a particular page, the web server will give you the default page or index page. All you need to know for now is that every folder in your site should have a file named something like index.html. Otherwise, if someone browses to your site/folder, they may be presented with a list of web pages to choose from (not very professional), or may possible be given an error message!


Viewing your page

Let's say you've saved your file to C:\websites\first\index.html. All you need to do is type that into your web browser address field, or use File > Open and browse for the file.


Linking pages together

Let's say we've created another page, for "Contact details". Here's the simple HTML...


contact-us.html

<html>
<head>
<title>Contact Sarah</title>
</head>
<body>
You can contact Sarah by opening the window and shouting very loud.
</body>
</html>

To link to this page, we first need something to act as the clickable "anchor", so we'll change our original page to


index.html

<html>
<head>
<title>Sarah's home page</title>
</head>
<body>
<p>
My first paragraph, describing what we do.
</p>
<p>
Why don't you contact us!
</p>
</body>
</html>

What I've changed:

  • I've made the title a bit more meaningful ("Sarah's home page")
  • I've changed the text, and put it into 2 separate paragraphs, using the <p></p> tags

Adding the link

All I need to do now is make the text "contact us" a hyperlink to the Contact Us page. In HTML, I do this with an anchor tag (<a></a>).


The anchor tag has a couple of uses, but its main one is to create hyperlinks to other places. To do this, we need to put something within the start <a> tag and the closing </a> tag. This will become the clickable target. The other thing I need to tell the anchor is where to link to. I do this by adding the href attribute to the opening <a> tag (href stands for "hypertext reference").


Here's how the HTML looks now...


index.html

<html>
<head>
<title>Sarah's home page</title>
</head>
<body>
<p>
My first paragraph, describing what we do.
</p>
<p>
Why don't you <a href="contact-us.html">contact us</a>!
</p>
</body>
</html>

And if you click on the "contact us", you should link through to the contact page (assuming you've created one).


Uploading Pages to the Web

This is great, we have two working web pages, linked together, which forms the basis of a web site. But, for other people to see our site, it needs to be hosted on a server that is connected to the World Wide Web.


The most common way of uploading web pages to a web server, is using FTP software. You can get FTP software for free too. If you use Mozilla Firefox, I recommend Fire FTP, which is a Firefox extension


Most FTP software works in a similar way.

  • First, you have to log in using details provided by your web host:
    • FTP location (e.g. "ftp.yoursite.com")
    • A username
    • And a password
  • On the left hand side of the window, you can browse your local computer.
  • On the right hand side, you browse the remote web server.
  • You can compare the local files to the files on the server, and upload or download between them.
  • The software will usually handle all the necessary stuff like logging in/out, managing connections, and trying again when it fails to transfer files. In the example above, it's telling you what it's doing in the bottom window.
  • Some offer helpful things like comparing the locations to see which files are different.

So, if your webspace is http://www.yourspace.com/yourusername/ and you upload the files you've just made, you ought to be able to browse to the web address and view both the index page and click through to the contact page. And that means everyone else can too!


posted on Jun 4, 2007

   Topics



   Google

Web Design Articles    |    Design    |    Basics