How to Build a Web Page

HTML & CSS

To build a webpage you are going to need a few things

• A text editor such as programs called Notepad++, Sublime text, Microsoft’s Visual Studio or ever just the notepad program that comes in Windows

• A web browser like Google Chrome, Firefox or Internet Explorer

For this tutorial you do not need any experience in HTML, CSS or any other web development experience.

HTML stands for Hyper Text Mark-Up and is a scripting language used to make webpages. CSS stands for Cascading Style Sheet and works alongside HTML to style the website, I will talk about CSS later on in this tutorial.

Making a Website

First open the text editor you have chosen, in this tutorial I will be using Sublime text. Highlight and copy and paste the code below into the text editor I shall explain what’s happing within this shortly.

Next create a folder on your desktop, I called this ‘Tutorial’, now save this as ‘index.html’ and then right click and open this in the browser you have chosen. It should look like this.

Congratulations you have now made your first webpage.

What’s going on

In this section I will go back through the code you have just added and explain what it does as well as the basics.

Every element within HTML uses tags, as you can see the code sample code I have provided, uses a head tag, link tag, title tag, body tag, h1 tag and a p tag.

This tag is declaring the document is using the HTML language; this isn’t always necessary but is good practice to add it in to your page.

Next we have the head tag. The head tag sits at the top of the document and is used to add Meta data, information such as the document title and author, link other documents such as CSS style sheets and JavaScript along wi...

... middle of paper ...

...d

When using a style sheet it is important to remember that style sheets cascade, this means the style sheet you use can be overridden by and other style sheet or an inline style, an example of this is Bootstrap. Bootstrap is a CSS framework which essentially have styles, to make nice looking website, out the box. Bootstrap is linked to the document the same as a normal style sheet however it is vital to list bootstrap first because if you wanted to edit any styles they will be overridden as the web browser will always prioritise the most recent styles sheet and will cascade down the document and see that the last style sheet linked is the most recent styles.

References

Ed Tittle, Jeff Noble (2011). HTML, XHTML & CSS for Dummies. US: Wiley Publishing. 1-392.

http://www.w3schools.com visited 27th May 2014

http://stackoverflow.com/ Visited 29th May 2014