HTML Web Page Tutorial #1

In Previous posts we have gone over a few of the basics of HTML. Now its time to put those basics into practice and create an actual webpage. Over the coming tutorials we will create a basic HTML website with a few different pages. We will also be covering CSS within these coming tutorials. CSS (Cascading Stylesheet) is the styling template for HTML.

Create a folder somewhere on youre PC/Mac taking note of its location. This is how you will browse the files locally in your Web Browser. Within this newly created folder go ahead and create a file called home.html ensuring that the file extension is .html many text editors will automatically save the file as .txt format.

To begin your HTML webpage we first need to specify a document type. Copy the below code into your home.html file and save it.

After saving your file please open it in your browser by entering the file path into the browser address bar. There you will see your first, very simple webpage. Not very useful though is it? Lets make some changes to improve the layout first. Webpages dont normally start right up in the top corner. They normally have a centralised layout, so lets find out how this is achieved.

First off lets create another file inside your created folder. This time call it stylesheet.css again ensuring the file extension this time is .css and not .txt. This file is where will add styling rules for our HTML document.

The first lines i usually add to a stylesheet are:

This just helps remove any default spacing, padding or margins created by browsers. From here we have a blank canvas to add anything we need. In CSS classes are denoted using a dot (.) and id’s are denoted using a hash (#). Classes can be used on multiple tags whilst id’s are only used once within a document and are unique.

This CSS rule uses margin to center the container class and sets a fixed width of 1200px. Now lets add this class into our HTML and see what it does.

In your home.html file, just below the <html> tag you need to add the following <head> opening and closing tag along with its content. This simply links the stylesheet.css file to the HTML file so the rules can be picked up in your browser.

Now we need to wrap our content inside the <body> tags using a div with the class we outlined in our CSS file.

This should give you something like this:

Refresh your page and you will notice how the content has moved from the very edge to a more central location.

Ok now lets add a page title. The title goes in the head tag and once added you will end up with something like this:

Your webpage should now have the <!DOCTYPE html> defined. The <html> tag which outlines the entire contents of the document. The <head> tag which wraps meta information for your document and stylesheet. There should also now be <body> tag which holds all of the visible content for the webpage.

Lets try adding some structure to our page. Firstly with a header, usually this is where we have logos and menus on webpages.

Inside the div with the container class add a <header> section with a class of center.

Then within the header add a heading with the name of your webpage.

Now below the heading but still inside your header add an unordered list with the names of other pages we will add to this pracitce website during these tutorials.

This should leave you with an overall document looking something like this so far:

In the stylesheet we need to add something to utilise our newly added center class.

If you were to reload this page now you would see a page with a heading, a title in the tab in the browser and a list below the heading.
This list will become our menu. With some clever CSS rules and tweaks we can transform this ugly list into a nice little menu.

Wrap the list in a nav tag and then within each list element add an a tag linking to the files of each page. Although we dont currently have all of the files for the menu, it doesnt hurt to add the links now in preperation for this.

Now its all down to CSS and the styling of the menu. The following CSS adds rules to all different elements within the menu nav bar. Ive added some extra styling for colors, hover effects and font-sizes.

The margin around nav just adds extra spacing to improve on visibilit and usability of the navbar. list-style: none removes the bullet styling of the list. display:inline on the li tags forces the list to display horizontally instead of vertically. I also added some small padding to improve spacing and increased the font size to aid readability. I then also removed the underlining affect automatically added to links and changed the color slightly. Then using the :hover selector i then re-add the underline and slightly darken the text to give it a nice hover effect on the menu items.

For this tutorial that is enough. I will begin styling the pages, do the footer and create the other HTML files in the next one.

Here are the 2 files that you should have now if youve managed to follow along.



Add a Comment

Your email address will not be published. Required fields are marked *