Website Making

This section is dedicated to help making websites!

Guide

For this guide, you will be making a very simple website that you can view on your PC. Uploading it to the web will be covered later.

You will need:

A text editor, such as notepad, vim, emacs, or TextEdit.
A browser

Web pages are written using a markup language called HTML. HTML is text-based, and uses tags to explain how your content should be displayed to the browser. A tag is a word or letter enclosed with “<” and “>”.

In order to start building your webpage, open your text editor, begin a new document, and copy the code below into it:

<html>
<head><title>your title here</title></head>

<body><p>paragraph text here</p></body>
</html>

In the section where it says, “your title here,” erase the text and type “My first webpage.”
In the section where it says, “paragraph text here,” erase the text and type “Hello world!”
Save the text file as “index.html” and store it in a place you'll remember. Make sure to use the “.html” file type, because this is what tells the computer it's a webpage and not a text file.
Open the index.html file you just created in a browser by double-clicking it.
Congratulations, you've created your first web page! You can add to the text you've created here and change the title to whatever you like.

Eventually you will want to add more info, multiple paragraphs, images, and introduce some styling, but before you start doing that, you'll need to know a little more about tags.

Basic Tags

HTML tag

In the example above, the first tag looks like this: “<html>.” This HTML tag tells the browser and other software that the page it's looking at is an HTML page, and should be interpreted as such. There are other types of tags that you can start your document with, such as “<xml>” that tell the browser to do other things, but for just a simple webpage, those aren't needed yet. Notice that at the end of the document, we've told the browser that we're done with this page by putting the ending tag: “</html>”. Always make sure to close your tags, or you'll end up with problems!

Head tag

The head tag contains information about how the page needs to be displayed by the browser. None of what's in here will show up on your page itself, but most of it is very important to include so that the page displays correctly. Right now we've just got a “<title>” tag, but eventually you'll be adding other things, like meta tags, script tags, links to your stylesheet, and more.

Title tag

The “<title>...<title>” tags tell your browser what name should show up in the browser's title bar. Title tags used to be considered very important for search engine rankings, and should clearly express what your page is about to make it easier for users to navigate your site. Keep them short, but descriptive.

Body tag

The “<body>...</body>” tags tell the browser what should be displayed in the main window, and just about everything you want users to be able to see will be put between these two tags. Your introduction, images, menu, fanfiction, whatever you decide to show off to the world, will be included here.

P tag

Right now, the only thing we have in our body tag is the "<p>...</p>" tags, which denote paragraphs. Current standards recommend that you put all text in between P tags so that the browser displays it properly. If you've written a full paragraph and would like the text to break and start a new one, simply close the tag with "</p>", and start with a new "<p>" tag. Try it, save your page, and then refresh the page to see what it looks like!

Link tag

Although not included in the tutorial above, the link tag is probably the most important tag you'll learn. It lets you link to other pages on your site and on the web. An example of a link is below:

<a href="https://wiki.melonland.net/website_making">How to make your own website</a>

If you add the above link to your page, it will link to this webpage! The href= attribute in the tag holds the location of the link. You can include a full link, like I've done above, or you can link to a page on your site. The text in between the <a> </a> tags is what the link will show to the user. If you're linking to a page in the same folder, you can leave off the first part of the address and just include the page, like below:

<a href="aboutme.html">Read about me</a>

Other tags

Below are a few other tags that you can experiment to add more things to your site.

Image tag

The image tag looks like this:

<img src="myimage.jpg" alt="Description of my image">

The image tag is unusual in that it doesn't have a closing tag; everything it needs to display an image is located between its brackets. Let's break it down so that you can learn how to use this in your own webpages:

The “src=” bit of the tag is called an attribute. It contains more instructions for the browser that won't necessarily be seen by visitors, but are still very important. Src, in this case, stands for “source,” and should be the address to your image, so it may look like “myimage.jpg” or “files/img/myimages.jpg” depending on where you've stored it.

The “alt=” attribute is necessary for both screen readers and for when your image can't be rendered on the page. In this event, the browser will display a broken image icon, and then the alt text that you've included here. This is important because if your content is dependent on the image you're showing (such as using images for menu navigation or similar), then users won't know how to interact with your website in the event that the images don't load. Make sure to always include the alt=“” attribute to ensure that your site is accessible for all users.

Table of Contents