My First Webpage
Basic HTML Tutorial
(a.k.a. "so you want to learn how to make webpages...")
This is a little tutorial to help you get started making webpages. It assumes
you have no knowledge of making websites, but that you do know how to work a
computer (create documents/save files/etc.) and are comfortable browsing the
internet.
Here's what you will need to get started:
- a computer
- a browser (i.e. Mozilla
Firefox or
Microsoft Internet Explorer)
- a word processor (use Windows "Notepad" or "Wordpad"
to get started. If you're using a Mac, then use the "Simple Text"
program).
There are some very nice, advanced programs out there that are specifically
for creating webpages, but this tutorial will not cover those. Instead, we will
learn how to create a website by hand. The skills and tools you learn here can
be transferred to any program later on.
So let's get started!
First of all, what is HTML?
HTML stands for Hyper Text Markup Language.
It is what you will use to create your webpages.
- Hyper is a term that computer geeks use that means the opposite of
linear. In the old days, all computer programs had to move in a linear fashion
(do this first, then this, then this... etc. Reading a book is an example
of something that's linear -- you have to read page 1 before you read page
2, or it doesn't make any sense). The internet changed all that. HTML is more
like a "choose your own adventure" book, where you can skip around
and just read the bits you want. It progresses in a hyper (not linear) fashion
and allows people surfing the internet to go anywhere any time they want.
- Text is what you will use. Unlike other computer languages, you don't
need any special symbols or programming libraries. Just plain English, real
honest to goodness, every day normal English letters and numbers.
- Markup is what you will do. In other words, you'll write in plain
English and then mark up what you wrote. It's really very easy and you'll
get the hang of the basics quite quickly.
- Language is because you are basically "talking" to the
browser and telling it what to display. You create a webpage by writing an
HTML document in a word processor like Notepad/Wordpad/Simple Text. When you've
finished creating the HTML document, you open it in a browser, like Internet
Explorer. The browser will interpret the HTML that you've written and display
it as a web page.
Here's how you do it:
Step 1: Open up your word processor of choice. I'm going to use Windows Notepad.
(Start Menu >> Programs >> Accessories >> Notepad)
Step 2: Copy and paste the text below into the Notepad document. Don't worry
about what everything means right now -- I'll explain it all in a minute.
<html>
<head>
<title> My first webpage!</title>
</head>
<body>
<p>Hello Everybody!</p>
<br>
<p>This is my very first <b>HTML</b> page. </p>
</body>
</html>
Step 3: Save the Notepad document as "index.html". (Choose Text Documents
(*.txt) as the file type).
File name: index.html
Save as type: Text Documents (*.txt)
Step 4: Open your web browser tell it to open the index.html file you've just
made.
In Windows Explorer:
File >> Open (then tell it where you've saved your index.html file)
In Firefox:
File >> Open File (then tell it where you've saved your index.html file)
And, Taadaaaaaa!! You're looking at your very own webpage that you've just
created. Granted, it's incredibly boring and not very complicated, but we'll
soon fix that.
How it works:
HTML works in a very simple, logical format. The browser reads it just like you
do: top to bottom, left to right. It will do things in the order that you tell
it to. You tell the browser what to do by using these things called "tags".
All tags follow the same format: they start with "<" and end with
">". What goes inside the < and > is the tag.
Learning HTML is just learning the appropriate tag to do whatever it is you
want to do. The tags make the structure of the page, and you use them to shape
your content and make it look pretty. You use HTML to format your content into
different sections/fonts/colors by a series of tags that you write.
Let's start by explaining what was in all that stuff we copied and pasted into
Notepad:
<html> <---
this tag tells the browser that what it's about to read is HTML, and to interpret
it accordingly.
<head> <---
The head contains general information (also called meta-information) about
a document. Meta means "information about". This head section is where you'll
put information about your webpage for the browser. The browser reads it and
then uses it to display everything you have in the "body" of your
webpage. One thing you'll usually see in the "head" is the title of
your webpage. (see the next line)
<title> My first webpage!</title> <---
This tells the browser the title of your page. (In this case, it's "My
first webpage!"). The browser displays the title like this:
</head> <--- This tells the browser
that it has reached the end of the "head" section. In HTML, tags are
always used in pairs so you'll have a <head> to open the header and </head>
to close it. The "/" means "end".
<body> <--- This is the "open
body" tag, which tells the browser that what it's now about to read is
the actual body of your webpage. This section (between the <body> and
</body> tags) is where you'll put the actual content of your page.
<p>Hello Everybody!</p> <---
This is what your webpage actually displays in the browser. The <p> and
</p> tags are short for "open paragraph" and "close paragraph".
They tell the browser that you want it to write "Hello Everybody!"
in its own paragraph.
<br> <--- This tag means "break".
It tells the browser to start the next sentence on a new line.
<p>This is my very first <b>HTML</b> page. </p> <---
The <p> tag tells the browser to start a new paragraph and write "This
is my very first HTML page." The <b> and </b> tags around HTML
indicate that you want it to write HTML in bold. If you don't remember
to "close" the <b> tag with a </b> tag, then the browser
will continue to write everything in bold and the bold will just run on and
on and on... and your page won't look the way you want it to. Always remember
to close every tag you open.
</body> <--- This tag ends/closes
the "body" section
</html> <--- This ends/closes the
"html" section. You need to close both the "body" and "html"
sections, or else the browser won't display anything at all!
Okay, so now you've got the basics, how do we make this more interesting?
Font:
Here are some handy tags to spice up the fonts on your page...
| Effect |
Tag |
How to use the Tag |
What it does |
| Bold |
<b> ... </b> |
<b> Word(s) to be in Bold </b> |
Makes all the text between <b> and </b> bold |
| Italics |
<i> ... </i> |
<i> Word(s) to be in Italics </i> |
Makes all the text between <i> and </i> in italics |
| Emphasis |
<em> ... </em> |
<em> Word(s) to be in Emphasis </em> |
Makes all the text between <em> and </em> emphasized. |
| Paragraph |
<p>...</p> |
<p> Your new paragraph of text goes here </p> |
Formats your text into a nice paragraph. |
| Carriage Return (aka "Enter") |
<br>...</br> |
text text text.
<br> text that starts on a new line.
|
This BReaks the text and starts it again on a new line.
In an HTML document, the computer does not read carriage returns and so
you need to denote every carriage return with a <br>. (A "carriage
return" is the official name for what happens when you push "Return"
or "Enter" on the keyboard.) |
| Indent |
<blockquote>...</blockquote> |
text text text.
<blockquote> indented text </blockquote>
text text text
|
This starts your text on a new line and indents it. |
|
Center
|
<p style="text-align: center;">...</p> |
<p style="text-align: center;">All the text
in here will be centered</p> |
This tag tells the browser that the style of this paragraph
(<p style=) is centered. It will center everything between the tags.
Don't forget the semi-colon after "text-align: center;", or
the tag won't work! The semi-colon tells the browser that you've finished
defining the style of the paragraph.
|
|
Align Right
|
<p style="text-align: right;">...</p> |
<p style="text-align: right;">All the text
in here will be aligned to the right </p> |
Just like Center, except we tell the browser to align
the text to the right. Again, don't forget the semi-colon!
|
Font size:
Very often, you'll find that you want to change the size of your text in order
to distinguish one section from another. This can be done several ways. The
first is through "Headings". Heading tags are use to create... yes,
that's right... Headings! There are 6 heading tags: <h1> through <h6>.
<h1> is the largest, and <h6> is the smallest. Here are their relative
sizes:
<h1> This is Heading 1 </h1>
<h2> This is Heading 2 </h2>
<h3> This is Heading 3 </h3>
<h4> This is Heading 4 </h4>
<h5> This is Heading 5</h5>
<h6> This is Heading 6</h6>
Style Attributes
If you want more control over the size of your text, you can use the "Style
attribute" of the paragraph command. It looks like this:
<p style="font-size: 150%"> This
command tells the browser that you want this paragraph to be 150% larger
than the default text. </p>
Any % over 100 will make the font larger, and anything under 100 will make
it smaller. Here's the font at 62%:
<p style="font-size: 62%"> This
command tells the browser that you want this paragraph to be 62% of the
default text. </p>
You can use these style attributes to make your font any size that you'd like.
You can also use them to change the font color:
<p style="color: red;"> This will make your text
red! </p>
<p style="color: green;"> This will make your
text green! </p>
<p style="color: blue;"> This will make your
text blue! </p>
What if you want your text to be both small and red?
<p style="font-size: 75%; color:
red;"> Two styles applied! </p>
If you only wanted to apply the change of font size to a just single word
or phrase you could put the style attribute into a bold or em tag:
<p>One big word in <b style="font-size: 150%;">Bold</b></p>
<p>Two big, red words in <b style="font-size: 150%; color: red;"><i>Bold
italics </i></b></p>
You can use as many tags as you like, as long as you remember to open < >
and close < / > them properly.
Background Color:
Now that you know how to change your font color, how about changing the background
color of the website too? Although the background color of this page is white,
we could easily change it to yellow by finding the <body> tag and
modifying it to say <body bgcolor="yellow">.
bgcolor specifies the color of the background. You can set it equal to a
hexadecimal number, an RGB value, or a color name:
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
All the lines above are different ways of setting the background color to
black. Play around with the values of each one to see how you can affect the
background color on your webpage.
The background can also be an image. If the image you use is smaller than
the browser window, then it will repeat itself until it fills the entire window.
<body background="http://www.backyardgardener.com/plants/TulipAttila.gif">
Note: If you want to use an image as a background, here are some things
you should keep in mind:
- Is the background image big & bulky -- will it increase the loading
time too much?
- Will the background image look good with other images on the page?
- Will the background image look good with the text colors on the page?
- Will the background image look good when it is repeated on the page?
- Will the background image take away the focus from the text?
Adding Links:
Use the <a href> tag to add links to other pages. It works like
this:
<a href="http://www.google.com">click
here to go to Google</a>
the "a" stands for "anchor", and href is short for "Hypertext
Reference". You pronounce it "ay aitch-ref".
If you want to get fancy, you can modify the <a href> tag to
make the browser open a page in a new window or tab like
this using <a href="http://www.google.com" target="_blank">Google
in a new window or tab</a> This is handy if you want to provide links
to other sites, but don't want your viewers to leave your website.
Images:
What's a website without pictures? If you want to add images to your page, use
the <img> tag. 1st find an image that you'd like to use (you might
have one on your computer already, or you can find one online and link to it
directly (right-click on the image and choose "Copy Image Location"),
or save it to your hard drive by right-clicking on the picture and choosing
"save image as" or "save picture as".
.
To insert the picture into your page, use the <img> tag like
this
For an image on another website: <img src="http://farm3.static.flickr.com/2079/2494079951_a04e07878c.jpg?v=0">
For an image of your own (my_picture.jpg): <img src="images/my_picture.jpg">
*Note that <img> is one tag that you don't need to
end/close with </img>. It's enough just to say <img>.
It's a good idea to keep all of your images for your website in a folder
called "images", this keeps your files orderly and makes it easy
to find things later on.
You can modify the <img> tag in all sorts of ways:
Lists:
Lists are a handy way of organizing your webpage. You can have an "ordered
list" like this:
- Beans
- Cabbage
- Spinach
|
<ol>
<li> Beans
<li> Cabbage
<li> Spinach
</ol> |
The <ol> stands for "ordered list", and
each <li> tells the browser to keep consecutively numbering the
list. Remember that you have to both open (<ol>) and close (</ol>)
the list.
|
If you don't want a numbered list, you can make an "unordered list".
This just uses bullet points:
|
|
<ul>
<li> Beans
<li> Cabbage
<li> Spinach
</ul> |
The <ul> stands for "unordered list", and
each <li> tells the browser to add another bullet point. Remember
that, like the ordered list above, you have to both open (<ul>)
and close (</ul>) the list.
|
More advanced stuff:
A great way to learn how to do more is to view the source of websites you like/want
to imitate. You can actually see the code behind your favorite website by just
right-clicking on it and choosing "view source" or "view page
source".
Supplies
the browser with an alternative text if the image doesn't load for some
reason. (This picture is intentionally broken, so you can see the "alt").
.JPG "Three black circles in the air@New Haven Free Public Library Main Branch")
