HTML and CSS Guide - DRAFT

Text-only Preview

HTML and CSS Guide____________________________________________________
This is going to be a nice and simple guide on how to use and maintain a website just by using
HTML and CSS. There are many websites that can teach you how to use each of these and they’ll
be listed at the end of this guide. If any help is needed, please do try and research as well as
asking someone with excellent knowledge in this field. There are endless tutorials on this so be
sure to check them out, also see references below.

The Basics
Getting to know the basics in HTML is pretty simple (CSS will be touched up on later), some
people who have never looked at it pretty much think ‘what the hell is that?’ Well, we’ll get to
know some basic everyday attributes and let’s look at their code. Essentially, when using HTML
you should always close off the tags. For example: <code here> </code here>
In the following table will be a few attributes you can use for your daily designs:
Attribute Names
Code (Open)
Code (Open) Result
Strike Out

Well these are your basic attributes to use, you can also have a few special ones which can be
used for fun use which will be referred to later on in this guide as well. Now, we need to simply
dissect a webpage. You can simply refer to a webpage being a human being, supporting this: A
webpage has a header, body and a footer. Now let’s begin to define these below:
A header is used to put all style properties for your website. This is to ensure these are loaded
before the body is used. In the example below, you’ll see what a header, body and footer looks
like. You can add your title, style sheets as well as other scripts into here.
This is what your user will see. Generally what is seen through the eyes of the internet. So for
example, if you went to and see what it looks like, then that’s their
Closes off the website, some scripts are usually permitted here but we’ll touch up on this later
In the example, you will see:
<title> </title>
This refers to the little text that is shown on the top of the web browser as well as on the
HTML and CSS Guide – Written in 2011 by Mathew Hutchison
Page 1

browsers tabs. This helps let the user know what page they are on as well if it is the correct

HTML Example
<title> Your website title can be here, feel free to change it </title>
<center> <b>Hi, this is a test page</b> </center>
You can grab the code above and put it in a Notepad/Wordpad document. When saving web
pages, you must always specify what type of code it will be. Since we’re looking at HTML for the
moment, you should save it as: “index.html” But why index.html? Why not testpage.html? Well,
it can be anything you like I guess, as long as it ends in the .html format. Essentially there are a
lot of other ones but let’s not get too detailed.. Yet. Index.html lets the web server know that this
would be the first file to come online when you go to a website.
Getting Into More Detail
Okay, so you’ve just learnt pretty much the basics of the HTML ways. We now need to consider,
what else can HTML do? I could provide HTML 5.0 but that’s up to you guys to do that
yourselves. In this section, some more codes will be provided for you to use. However, examples
will not be shown do to this guide being only text based. What will be provided are the names
and the effects that they can do.
Effect It Does
Makes text scroll, left to right
Header (h1 through to h6)
<h1> to <h6> Changes text size. H1 is the biggest

I didn’t add the closed tags because it’s pretty much the same thing except with the forward
slash added (/). Now particularly I left out one attribute out on purpose. I want to give this a
little bit of an explanation for this, not a lot but it’s should be a bit more than the small table.
The code that I am referring to is known as the A Href tag. This lets the coder to turn a piece of
text into a link which can lead to another page or website. The code for this would be: <a
href=”LINK GOES HERE”> You can put the text here</a> - See how this needs a bit more?
Another trick that you can do, is instead of using the ‘You can put text here’, you can also insert
another tag which is also the Image SRC tag. This lets you insert an image on your page using:
<img src=”Your image location here”> - You can put this code and then you’re a href tag will
become an image button. When inserting an image, it is always important to provide a stable
folder for the images to be located in. This is generally supported in the code by using: <img
HTML and CSS Guide – Written in 2011 by Mathew Hutchison
Page 2

In the next example, you will see the use of images and how you can use them to link to another
website or even a webpage on your current website. Do take note that mistakes can be easily
done when writing codes manually, so you should always check if there are any errors.
HTML Example with Images
<title> Your website title can be here, feel free to change it </title>
<center> <a href=><img src=”../images/google.png></a> </center>
Since this website has no folder attached, you can create this yourself and use it to your own
imagination. You can use this code and add whatever you like, like I said, it’s up to your own
Concluding HTML
As mentioned in the top part of this guide, there are other tutorials online that can provide extra
bits into different parts of HTML. This can include forms, tables and more. This is basic, but it
covers all the basics that you can use and what you need to know.
CSS seems tricky once HTML is learned. While the use of Cascading Style Sheets (CSS), it’s pretty
much simplifying the HTML provided and making it look cleaner and sexier. To use CSS, you use
div tags which help let the webpage know what properties to use.
In order to use DIVs, then we need to know what the div tag is. This is just simply using:
<div id=”DIV ID”> Any extra information here will be explained </div>
Like human identification, then DIVs need ‘personal’ ids. So now let me explain what simple
properties you need to know when using cascading style sheets which I’ll show in the table
What it does
Margin-Left/Right/Top/Bottom Margin-left: px;
Positions the div
Background-color: px;
Changes the bg color
Background-image: url(img); Changes the bg image
Color: #hex;
Changes the font color

When we use divs, they are a lot more different than using HTML codes. In the bolded ID, this
can be customised to however you want it. Below will be shown what the body div looks like
and then another content div looks like. Also note that CSS and HTML are using American
language so color is not colour!

HTML and CSS Guide – Written in 2011 by Mathew Hutchison
Page 3

CSS Example Code
body {



#content {



This is our basic body and content div stylesheet. We use the background color to change the
background to black while we use color to make the font white. When you use margin-left and
margin-right on auto, it centers the div to the middle of your screen. But wait, what do we save
this file as? How would it be inputted in our website? Using stylesheets, they use the .css format.
When you save the file, make sure to save it as style.css, alternatively you can use anything as
style but it’s more convenient.
When we use a separate stylesheet then we must use a separate link which is added onto the
<head> tags within the HTML page. The code for this we would use:
<link rel=”stylesheet/css” href=”style.css”>
Please do take note that you do not have to close off these tags.
There are a lot of tricks that CSS can provide. Adding in navigation bars, putting images on top
of others as well as layering. When using this, make sure you correctly layer your divs properly
so it looks neat and clean.
HTML and CSS______________________________________________________________________
We should utulise with the knowledge we have currently, if you’ve decided to research more
into this, then that’s probably a good idea. This is the last example providing a source code
showing two separate text files using CSS and HTML working together. You can put these codes
into notepad and edit it yourselves.
Before we start, we should make sure you have these checkpoints set:
Have You:
Learnt the basic HTML attributes

Covered the extra HTML attributes

Researched into more HTML codes
Learnt the basic CSS attributes
Know the CSS reference code

Understand everything in this document

HTML and CSS Guide – Written in 2011 by Mathew Hutchison
Page 4

Full Example Code
<title> HTML and CSS Source Guide </title>
<link rel=”stylesheet/css” href=”style.css”>


<div id=”container”>
Welcome to my site. <br>
<a href=”#”><img src=”image.png”></a>

body {

background-color: #000fff;


#container {




In this section, we can use some tutorial sites that can further your web design experiences and
knowledge. Some great sites include:

Other tutorials that use videos are great and give you a great sense of knowledge. Go out and
explore more information and have fun while doing so.
HTML and CSS Guide – Written in 2011 by Mathew Hutchison
Page 5