|Sub-Menu for Web Design and Creation:
Before you begin:
If you use Windows, you will need to change some settings
so that file extensions will show. Also, you'll need a
plain text editor. You can use Notepad (comes free with
Windows) or TextEdit (comes free with Macs) However, there
are a few adjustments that need to be made. The "Necessary Settings" page
explains what needs to be done and also contains a list of
alternate plain text editors you might want to download
Creating your HTML file
- Now open a file in Notepad or Textedit (or other plain
text editor). Save it as an html file - name it
whatever you want (no spaces, all lowercase), but save
it with the extension .html (period html) at the end
instead of .txt. Example: mywebpage.html
- You can use your browser to check your progress as you
- Go to ----> File ---> Open file --->and
then browse to find your file on your hard drive and
- Note: You won't see anything on the page until you
put something into the body section.
A web page needs some tags to tell the browser it is
about to read an html page and when the page is finished.
It also needs to specify the two main sections of the html
page. The following is an explanation of those tags.
<html>This identifies the page as an html page.
<head> This is the first section of an HTML page.
</head> Closes the head section
<body> This is the second section of the HTML page
</body> This closes the body section
</html> This is the ending tag for the whole html and comes at the end of everything.
Notice each tag has a beginning tag < > and an
ending tag </ >.
Type in the basic code. To make it easier, write it in a
list as shown. (Hint: You could copy and paste)
The title tag goes in the head section. Type in the title
you want for your web page after the title tag
<title> This is what shows up at the very very top
of a browser window when someone is viewing your page. It
is not what shows at the top of your web page. We use
"headings" for that and we'll discuss those later:
More can go in the head section. If you use css, this is
where you would put the code. Some scripts that you find
will tell you to put certain parts of the script in the
head section of your document and other parts in the body
section. There's other things that go here you can learn
about later. What you put in the head section does not
appear as writing on the web page, but it can control what
the writing looks like and where it appears. The head
section is like the brain or control center.
If you were to use your browser to try to check you
progress, your page would be blank. You haven't yet put
anything in the <body> section of the page.
The Body Section:
This is the place for your text, images and such. It's
like the box on Eons where you write your posts or
PM's - only much better!
Putting in Text:
Text goes in the body section between the body tags:
<body>The body section is the place where
all of the text, images, links, etc. go. Usually
you will want a title at the top of your page. This can
be the same words as what you put between the title tags
or it can be different. You can write whatever you want
here, but it will be in one unstyled block until
you put in tags for paragraphs,
etc. It will look something like the
Open your plain text editor. Copy and past the code from
the green box into a file. Go to "file" --> "save" and
save the file as a plain text file. Name it "practice" or
whatever. Then open the .txt file with your browser.
You should see all the text you just added all in one
block, similar to this:
The body section is the place where all of the text,
images, links, etc. go. Usually you will want a heading
at the top of your page. This can be the same words as
what you put between the title tags or it can be
different. You can write whatever you want here, but it
will be in one unstyled block until you put in tags for
paragraphs, etc. It will look something like the
Headings and Paragraphs
Headings come in sizes: 1-6 with 1 being the
Generally, the <h1> heading is used at the top
of the web page to give the page a "title" that folks can
see. Sort of like those essays we were priviledged to
write for high school English classes.
Use <p> at the beginning of the text you want in a
paragraph and use the </p> at the end of the
Here is an example of heading and paragraph tags being used
to separate text into "containers"
<p>This is the story of my life. </p>
<h3>Year 0 through Year 2</h3>
<p>My main activities were eating, sleeping, and
making my displeasure known.</p><p> I didn't
do much writing during this particular phase of my life.
It's not that there wasn't anything interesting going on.
It was just that my mind seemed to be blank most of the
time. Writer's Block, I think they call
it</p><p>However, things began to improve
towards the end of this phase when I discovered
crayolas.</p><h3>Year 3 through Year
Copy the code from the green box. Replace what you have
in the .txt file (or make a new .txt file). Save it. Open
it with your browser. You should see something similar to
This is the story of my life.
Year 0 through Year 2
My main activities were eating, sleeping, and making my
I didn't do much writing during this particular phase of
my life. It's not that there wasn't anything interesting
going on. It was just that my mind seemed to be blank most
of the time. Writer's Block, I think they call it
However, things began to improve towards the end of this
phase when I discovered crayolas.
Year 3 through Year 4
Congratulations! You've made a very simple webpage.
Of course, you don't want to stop here. You'll want to
learn more about what you can do. The next section has
some choices. Explore, play and have fun!
You have some different choices and different directions
you could take. If one choice doesn't seem to be what you
want, you can choose another. You could:
- Join a social network that allows HTML in posts and/or
PM's so you can play with code. Alas, my favorite site disappeared in
May of 2012.
- Choose some of the other tutorials or practice
exercises on this site such as :
- Website "A" Tutorial:
Step-by-step guide to hand code a very simple website
with an external CSS file.
- Pomodoro Template
Exercise - Using different images without making
changes to the code in the external css file.
- Connection Template Exercise -
Making a few changes in the css file to change color and
change the image used for the background logo.
- You could go to some other tutorials on the web, such
as w3schools, Tizag Tutorials or the HTML
Source and further explore writing HTML pages from
scratch or just learn more about HTML. They have TONS of
- You could check out The HTML5 Beginner's Guide
at Website Set up. Most main browsers will now generally render HTML5
correctly, except for Internet Explorer, of course. The Mighty Digital
site has links to "compatibility charts for web and mobile developers" which might help you decide whether to jump into HTML5 with both feet or to pick and choose what you wish to use
- You could download an HTML editor such as Kompozer (Versions
for Mac, Windows or Linux) or HTMLkit
(Windows only) to do some of the work for you. You can continue to use
the HTML coding tutorial sites as a learning tool as you
work with the editor.