The Five Planes
HTML Basics
CSS Basics
My ENGH 375 Main Page
All information presented
on these pages is from:
The Elements of User Experience
Second Edition by Jesse James
Garret and what I've learned
throughout the semester in
ENGH 375 Web Authoring and
Design at George Mason University.
HTML Basics
Now that you know what kind of page you want to create we can move to the next step
Here I will teach you how to create the page itself.
For this you will just need to use HTML. What is it? HTML stands for "hypertext mark-up language."
This is the only thing necessary to create a standard webpage. It is the skeleton that will hold
everything together. The pretty stuff comes later - hint, hint CSS.
You will also need a wordprocessor. I would recommend Text Wrangler if you are a Mac user
(I have a Mac and have found that this works wonderfully for me) and Notepad ++ if you are a
Windows user.
In the wordprocessor of your choice you will input:
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta chartset= "utf-8">
<title>Title You Want For The Url Heading</title>
</head>
<body>
</body>
</html>
]]>
This will be your webpage, although right now it is blank. You will always need to
input the above to create one. The things that inclose each tag (ex:<>) are called brakets,
keep in mind that you will need to make sure they every time you use most tags that you need to
close them with a slash(ex:/) as shown above.
Now, within this html code you will be creating what will be seen on the site. You will
be able to do so with tags like:
<![CDATA[
<h1> = heading tag - this goes from h1 to h6 each on progressively smaller than the next
<p> = paragraph tag
<li></li> and <or></or> - these are tags for lists(bulleted) and ordered lists(numbered)
<div> = division/section tag - this will come more into play when you combine it with css
<img src="nameoffile"> - this is the tag to insert an image onto your website, you can
also change the size of the image within the html like this:
<img src="nameoffile" height="heighthere" width="widthhere" />
<a href="websitelink">Name of Link</a> - this is a tag for inserting a hyperlink
]]>
A Few Helpful Websites:
W3Schools HTML Tutorial
Simple HTML Guide
Now that you've got the basics of HTML down we can move on to CSS Basics.
