How Do I Build A Website

Tags: php learning, tutorials, web development

May 17, 2011 3

Chances are you’re reading this as a complete novice and would like to know the basics of creating your own website.

Here’s a guide to creating your first pages!

When I started out making websites I found everything very confusing, I didn’t know why certain code needed to go where it should go and why some bits of code closed its self and other bits didn’t. Over time of course I learnt these things and now I can create anything I want with HTML – within reason!

Down To Basics

First things first, HTML is an acronym for Hyper Text Markup Language. It consists of these things called tags which surround normal blocks of text, such as a title for the page or the content.

A tag is surrounded by Angle Brackets ( < and > ) also known as ‘greater than’ or ‘less than’ symbols in mathematics and programming. The first word or letter inside the tag defines what sort of tag it is. For instance:

This is a P tag, or otherwise known as a Paragraph tag. This sort of tag along with many others require it to be closed as well. To close a tag you simply put a forward slash before the letter or word inside the angle brackets. Like this:

You would place P tags around a block of text that you would like to appear in a paragraph. You would do this so that later on you could style it with CSS (Cascading Style Sheets – but that’s for another day!) The completed paragraph code would then look like this:

This text is inside P tags!

Most tags require to be closed in this fashion. There are a few tags that do not however. One such tag is the IMG tag, a.k.a the image tag, this displays an image on the screen. It works like so:

<img src=”http://www.website.com/image.jpg” />

You’ll notice this tag has a forward slash just before the closing angle bracket. This is how you close these kind of tags. The reason for it is because the IMG tag has nothing to contain where as the P tag contains a paragraph of text.

Tag Attributes

In the last example with the IMG tag, you’ll notice seeing the letters ‘SRC’. This stands for ‘Source’, and that means the source of where the image is located. This is an attribute of the IMG tag. It has an Equals symbol and then inside quotes it has the value to assign to that attribute. In this case the value is the full URL to the image you want to display.

Tags can have many attributes. We wont discuss them all now, just know that anything inside the angle brackets that is after the first word or letter (separated by a space) is indeed an Attribute.

Basic Code Framework

When you write any web page, there is a certain basic code framework which needs to be adhered to.

The whole page needs to be contained within HTML tags. You will have a HEAD section where you can put things like the TITLE and META data, and you will have the BODY section where everything goes that’s to be displayed on the page in a browser.

A basic web page looks like this in html:

<html>
<head>
<title>This is the title of the page</title>
</head>
<body>
This is some text in a paragraph tag, which is in the body tag
</body>
</html>

The TITLE tag tells the browser what to display in the very top bar of the browser (in-line with the minimize/maximize and close buttons)

If it’s easier to visualize, each page needs to work in this order:

OPEN HTML

HEAD Section

BODY Section

CLOSE HTML

You cannot put the BODY tags inside of the HEAD tags, and vica versa. Also, only certain kinds of tags are allowed in the HEAD section and the same for BODY. For example, you cannot put a P tag in the HEAD, and you cannot put a TITLE tag in the BODY.

Formatting Within The BODY

In the main body of your page, you might like to format your code to be easier to read and more functional for your purposes. This can include underlining, making bold, and italicizing text. As well as creating a link out of a section of text. You might also want to create some headings. We will cover this now.

Firstly to underline text you simply surround the text to be underlined with a U tag. For example:

This text is underlined and this text is not underlined.

That is all there is to underlining.

To make bold and italicize text is similar, except for bold you will use the STRONG tags, and for italics you will use the EM tags (EM stands for Emphasis). The example:

This text is bold. This text is Italic

You can combine tags in order to have a bold underline, or any other variation you choose. It’s good practice however to close the tags in the opposite order you opened them. To explain this, let me give you a wrong way of doing it and a right way of doing it. In our example we will create some bold underlined text.

Firstly the incorrect way of doing this:

This text is bold and underlined

The correct way would be to close the tags in the opposite order they were opened:

This text is bold and underlined

It’s just good practice to do it this way. Make it a habit now!

Hyperlinks

Hyperlinks, or just links, are simply a way of allowing the user to click through to another page from your web page.

For this you will use the A tag – the Anchor tag.

By default, an anchor tag requires an attribute called HREF in order for the tag to function as a link to somewhere. The value of the HREF attribute should contain the URL to where you want this link to send the user to. This is an example of creating a link:

<a href=”http://www.google.com”>Anchor Text</a>

As usual, because the A tag contains something – in this case text – it should be closed with a closing A tag. If you don’t close it, everything else on the page after the first A tag will become a link and the sky will fall on your head!

Additionally, the text within the A tag is commonly known as the Anchor Text (you will hear a lot about the anchor text in the area of Search Engine Optimization – but that’s for another day). It’s worth knowing that you can put IMG tags inside of A tags if you wish to make an image a link.

Headings

Finally, headings.

Heading tags come in 6 flavours. These are H1, H2, H3, H4, H5 and H6. Each one varies in size, starting at the biggest with H1 and reducing in size through to H6.

Their implementation is very simple:

<h1>This is a big heading</h1>

<h2>This is still a heading, but slightly smaller than the one above!</h2>

Tools

You will need a HTML editor to create web pages. Both Apple Mac and PC have a basic HTML editors built in that not many people truly know is an actual HTML editor.

On PC this is Notepad, and on Mac it’s TextEdit. There are additional steps for saving as HTML in these programs, I will instruct you on both below:

For Mac:

Write your HTML code as normal in TextEdit.
When saving, choose “Make Plain Text” from the Format menu before you try to save the file.
Then, when you go to save it, specify “.html” as the file name suffix.
Choose “Don’t Append” when TextEdit asks if you want to add the .txt extension or not.

For PC:

Write your HTML code as normal in Notepad.
When saving, choose “All Files (*.*)” from the “Save as type” drop down menu before you try to save the file.
Then, when you type the file name in, add “.html” to the end of your file name.

Both of these methods will produce a HTML file. This will work locally on your computer. If you want to put it on the internet you will need an FTP program and somewhere to host it, but that goes outside the scope of this basic tutorial.

My favourite program for making websites is Adobe Dreamweaver. This is because it has code highlighting and built in FTP. It also runs on both PC and Mac. There are other good programs too such as Coda, which is just for Mac. These programs do cost money though, it isn’t necessary for you to get these programs to do basic HTML for now however.

Conclusion

This concludes this very basic tutorial on making a web page. If you found it to be valuable, then please share it amongst your friends using the Facebook like button on this page and/or Twitter. Also please leave a comment, maybe suggesting that you’d be interested in more tutorials like this. If the demand is there, I will create a whole course on making websites.