Basics: HowTo Make a Website
Welcome to our guide for making your first website.
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. See our Basics: Guide to HTML Tags.
You start a web site on your own local computer by creating one or more HTML pages, then linking them together.
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 v1
<html>
</head>
<body>
</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.
Within the HTML, there are 2 main bits that are part of every HTML page: the head section and the body section, marked up with the paired tags <head></head> and <body></body>.
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 vislble content goes. Anything you put in the body of your HTML will be displayed in the browser (unless it's hidden).
You may want to check out the basic HTML tags, and play with putting some of these into your HTML.
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
It is recommend that you save 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.
You should see something like this...
Note how the browser's title bar reads: "Page title" - the words we put in the
And the words we put inside the
tags are visible on the page.Linking Pages Together
Let's say we've created another page, for "Contact details".
Here's the simple HTML...
contact-us.html
<html>
</head>
<body>
</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 v2
<html>
</head>
<body>
</p>
<p>
</p>
</body>
</html>
What We've changed:
* We've made the title a bit more meaningful ("Scratchmedia's home page")
* We'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 v2
<html>
</head>
<body>
</p>
<p>
</p>
</body>
</html>
If you refresh the page in your web browser after making those changes, it should look more like this...
Adding the paragraph tags has spaced the text out, making sure it's easy to read.
The text inside the anchor tags is now an active link, which you can see by the blue, underlined style.
And if you click on the "contact us", you should link through to the contact page (assuming you've created one).
If you can see this, you've just created your first web site. Congratulations!
Uploading Your 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!
This guide came from: webdesignfromscratch.com
RSS
