Scribd
Upload
4 views

HTML Tutorial

Uploaded by

danialisaboy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

HTML Tutorial

Uploaded by

danialisaboy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

HTML MADE EASY

You can do it...honest

You don't need to spend money on web design programs or enroll in expensive courses to learn
how to make a website. Although HTML, the code for making webpages, may look complicated,
it's quite easy to learn, In fact it's easier than learning how to use web design software. Really, it
is, and by the time you're done with the tutorial you'll want to find a web hosting service for the
site you put together.

So are you ready to make your first webpage without any web design software? Sure you are,
let's get started.

Getting down to business


The only thing needed to make a website is a browser and a simple word processor such as
Notepad. Yup, Notepad, even for fancy pancy websites. You Macheads can use Simple Text.

Access Notepad by clicking Start > All Programs > Accessories > Notepad

Before embarking on making your first webpage you need to know how to turn a regular text file
into an HTML file: From the File menu in Notepad choose Save As, give your file a name, any
name you like, for example mypage, and add the .html extension to it like so:

mypage.html

The .html extension is what turns a regular text file into an HTML file. It only needs to be added
at the time you create the file, once it's made you simply save it because Notepad will already
know that it's an HTML file. Save your file in a folder where you can easily find it.

The saved code can be opened and edited from within Notepad or depending on the browser
being used, by right-clicking on the opened web page and choosing View Source from the pop
up menu. Opening a webpage is done by going to the folder it is saved in and double clicking on
the HTML file so that it opens in the browser.

Important Note
The file name for the main web page of any website must be index.html All other pages within
a site can be given any name you like.

Page 1
MA-BPPAC12
Lesson 1: Tags
Opening and Closing Tags
HTML code is most commonly referred to as tags. The majority of tags have both an opening
tag and a corresponding closing tag. Every HTML file begins with this opening tag:

<html>

Every HTML file ends with the corresponding closing tag:

</html>

Notice the / in the closing tag? All closing tags must have this slash. You know why? Because
it's a closing tag, that's why. Below the opening html tag come the opening and closing head
tags:

<head> </head>

The head tag doesn't have any affect on what appears on the web page, it's job is to hold certain
other types of tags, one being the title tag:

<title>My First Webpage</title>

Ah, look at that, there's some text between the opening and closing title tags, this is where the
title of a web page is entered, it will appear in the browser's title bar:

Next comes the closing head tag. Remember, a closing tag has a slash ( this thing / ). So this is
what the code should look like so far:

<html>
<head>
<title>My First Webpage</title>
</head>

Now let's get to putting something on the webpage. Everything that is seen on web pages is
found between the opening and closing body tags:

<body> </body>

Page 2
MA-BPPAC12
Example:

<html>
<head>
<title>My First Webpage</title>
</head>>

<body>
Look Ma, I'm Making my first webpage
</body>
</html>

Notice in the example that the closing html tag was added to the code. This means we are
finished (at least for now), so save your code following the instructions given in the introduction
of this tutorial.

Curious to see how the webpage looks? Open the webpage in your browser and have a look.
See? The text between the body tags is what shows on the webpage. In the next lesson you will
learn more tags and what they do

Page 3
MA-BPPAC12
Lesson 2: Block Tags

Making Headings
Let’s make the web page a little more eye catching by adding a large, bold heading
using the heading tags:

<h1></h1>

Remember from the previous lesson, things which appear on web pages are enclosed
between the opening and closing body tags, that also includes other tags which affect
how things are seen on web pages:

<body>
<h1>Learning HTML</h1>
</body>

The number 1 beside the letter h determines how large the heading will be. Any number
from 1 to 6 can be used, 1 makes the largest heading, and 6 makes the smallest.

Heading tags belong to what are called “block” tags. These kind of tags don’t allow any
outside text to line up beside them, you will see the effect in a moment but first let’s see
how our HTML file is shaping up:

<html>
<head>
<title>My First Webpage</title>
</head>

<body>
<h1>Learning HTML</h1> Look Ma, I'm making a webpage!
</body>
</html>

Open your web page and this is what it should look like:

Page 4
MA-BPPAC12
See how the text outside the h1 tags is on a separate line? This is what block tags do,
they force the stuff they don’t enclose to be on a separate line. Another block tag is the
paragraph tag:

<p></p>

Any text put between the opening and closing p tags makes one paragraph.

Hitting the “Enter” key has no effect on web pages, to start a new line within a
paragraph the br tag is needed:

<br>

The br tag is one of the few HTML tags which does not have a corresponding closing
tag. These kind of tags are called “single” tags. Here is an example of how the br tag
can be used in a paragraph:

<p>Look Ma,<br>I’m making a webpage!</p>

The result would look like this:

Look Ma,
I’m making a webpage!

Page 5
MA-BPPAC12
Lesson 3: Inline Tags

Formatting Text
Words within a sentence or paragraph can be made bold with the strong tag like so:

<p>
One word in this sentence will be bold <strong> guess</strong> which one?
</p>

Did you pick "guess"? Then you passed the grade, give yourself a pat on the back.

Italicized words are made by enclosing them in em tags:

<em>Your text here</em>

The strong and em tags belong to a group of tags known as “inline” tags, these kind of
tags don’t force text to start on a separate line the way block tags do. They can be used
together to make text both bold and italicized:

<strong> <em>Your text here</em></strong>

It doesn’t matter which tag is used first but it is important to note that when using
combination of tags their corresponding closing tag should be listed in the correct order,
if the order starts with the opening em tag, it should end with the closing em tag, for
example:

this is correct - <em><strong>text here</strong></em>


this is not correct - <em><strong>text here</em></strong>

Another inline tag is the span tag:

<span></span>

The span tag alone doesn’t do anything but when combined with CSS it can change
the appearance of text within a sentence, so let's see how we can add some CSS code
to our tags in lesson 4.

Page 6
MA-BPPAC12
Lesson 4: Attributes

Telling Tags What To Do


We can change the way tags display things on web pages by putting what’s called an
"attribute" into an opening tag. Many of the things that were done with attibutes are now
done with CSS, so this lesson will show you how to put CSS code into tags by the use
of the style attribute:

<h1 style="text-align:center;">My Webpage</h1>

The style attribute’s job is to hold CSS code, that’s the stuff in the quotation marks. In
the above example it's telling the h1 tag to center the text on the web page. Notice that
there is a colon between text-align and center and at the end of center there is a semi
colon. This is how CSS commands are structured.

The text in our example can further be changed by adding another CSS command to
the style attribute:

<h1 style="text-align:center; color:red;">My Webpage</h1>

The result would be red text centered on the web page. An unlimited amount of CSS
commands can be added to the style attribute as long as they are enclosed between
the quotation marks and each command ends with a semi colon.

The style attribute can be put in just any opening tag to change some aspect of the tag,
for instance when used with the body tag, all the text on a web page can be displayed
in a different font:

<body style="font-family:arial;">

The font-family command changes the text font, in this example it’s in Arial
style.Adding a CSS background command in the body tag changes the page's
background color:

<body style="background:red;">

That would give your web page a red background (you don’t really want a red web page
do you?). Colors can be specified by either using the name of the color or its color
code, for example #ff0000 is the color code for red:

<body style="background:#ff0000;">

The number sign, # must be included in front of the code when specifying colors by
their color code.

Page 7
MA-BPPAC12
Changing Font Size
Changing the size of text is easy with the CSS font-size command:

<em style="font-size:40px;">I’m bigger</em> than you

The result would look like this:

I'm bigger than you

Size of text is determined by the number, the larger the number the bigger the text, px
stands for "pixels".

CSS commands are usually put in a CSS file called an "external style sheet" but the
style attribute is a simple way to use CSS directly in the HTML code until you get to
know more about CSS.

Page 8
MA-BPPAC12
Lesson 5: Graphics

Putting A Picture On The Web Page


Placing a picture on a web page is done with the img tag. The img tag is a single tag
so does not require a closing tag:

<img src="filename.jpg">

The img stands for "image", src is an attribute, it tells the browser where to find the
picture. The stuff in the quotation marks is the file name of the graphic, replace
filename.jpg with the file name of your picture and be sure it’s between the quotes.

To keep things simple, for now store your pictures in the same place as your web
pages, for example if you keep your HTML files in a folder called "my pages", put your
pictures there too.

Every picture on a web page has its very own img tag:

<img src="button.gif">
<img src="button2.gif">

That will put two pictures side by side on the page:

If an img tag is enclosed between the opening and closing p tags, the other image will
start on a new line:

<p><img src="button.gif" /></p>


<img src="button2.gif">

Result:

Give your pictures a description by adding an alt attribute to the img tag like so:

<img src="button2.gif" alt="light blue button">

The alt attribute will make the description appear when a mouse pointer is moved over
the picture.

Image Format

Page 9
MA-BPPAC12
Images used on websites need to be in the proper format which is either the gif or jpg
format. The gif format is mostly used for pictures with solid blocks of color such as
charts, or when an image requires a transparent background. The jpg format is suitable
for pictures with subtle color changes such as photos.

In addition to the proper format, images on websites also need to be optimized, that is,
the picture's file size needs to be lowered so that it won't take too long to load

Page 10
MA-BPPAC12
Lesson 6: Links

Putting It All Together


Links, this is what the web is all about and it’s simple to do with anchor tags:

<a></a>

The anchor tag comes with the href attribute. It means “hpertext reference”. This
attribute tells the browser where to find a link. A link to a web page within the same
directory (folder) of the website would look like this:

<a href="filename.html">here goes text to be clicked</a>

The href attribute contains the file name of the destination web page. The file name is
enclosed in quotation marks and it includes the html extension. The text between the
opening and closing a tag is the link people will click. To keep things simple, for now
place all your web pages in the same folder (directory).

Linking to another website is done by putting the entire website address (url) into the
href attribute:

<a href="http://www.siteaddress.com">text to be clicked here</a>

Be sure that http:// is included in the website address. Turning an image into a link is
done by surrounding the img tag with the opening and closing a tags:

<a href="filename.html"><img src="filename.jpg" /></a>

Replace filename.html with the file name of the page or website address, and replace
filename.jpg with the file name of your picture.

By default image links have a blue border around them, the border can be removed by
adding the style attribute with a CSS border command:

<img src="filename.jpg" style="border:0;" />

Email Link
Putting an email link on web pages is done by entering the email address in the href
attribute preceded by a mailto: command like so:

<a href="mailto:waterart.bizland.com">here goes what people click</a>

Notice there is a colon between mailto and the email address and that they are
enclosed in quotation marks. By the way, in case you haven’t noticed by now, there is a
space between the a and the href attribute

Page 11
MA-BPPAC12
Lesson 7: Lists

Making a Bulleted List

There may come a time when you would like to add a list to a web page, or maybe not, but just
in case here is how to make a list. A list starts and ends with the "unordered" list tags:

<ul></ul>

The ul stands for “unordered list”, it will get you bulleted text, you know, a dot beside
the text. The opening ul tag starts the list and the closing ul tag ends the list, in
between goes the text surrounded by the opening and closing "list item" tag:

<li></li>

Example:

<ul>

<li>Beagle</li>
<li>Terrier</li>
<li>Chihuahua</li>

</ul>

Result:

• Beagle
• Terrier
• Chihuahua

Any number of items can be added to the list as long as they are enclosed by the
opening and closing li tags. And that's how to make a list, let's now move on to making
tables, don't worry no carpentry skills required. Next: lesson 8.

Page 12
MA-BPPAC12
Lesson 8: Tables

Making A Table

We’re talking here tables for holding data not the dinner table. Tables are useful in laying out
the design of web pages so it’s well worth the time to learn how to make them. A table starts
and ends with the table tag:

<table></table>

Between the opening and closing table tags go a couple of other tags, the tr tag:

<tr></tr>

It stands for “table row” and will make up one row across the table. Between the tr tags
are found the td tags:

<td></td>

The td stands for “table data” it forms one box called a “cell” which contains content
seen on the web page such as text or graphics. Here’s how the table code is put
together:

<table border="1">

<tr>
<td>Beagle</td>
<td>Chihuahua</td>
</tr>

<tr>
<td>Terrier</td>
<td>Collie</td>
</tr>

</table>

Putting a border attribute in the table tag will help you see how the table and cells are
formed, setting the border attribute to "0" will remove the borders altogether.

Take a close look at the code, this table will have 2 rows with 2 cells in each row. The
stuff between the opening and closing td tags is what will be in each cell. Note that
each row is finished off with the closing tr tag. Finally the table is finished by ending it
with the closing table tag.

Result:

Page 13
MA-BPPAC12
Beagle Chihuahua

Terrier Collie

Remember the style attribute from lesson 4? Put it into the opening td tags with a CSS
padding command to add some space around the content of the cells:

<td style="padding:10px;">Beagle</td>

Result:

Beagle Chihuahua

Terrier Collie

We can make a table larger by putting the style attribute into the opening table tag and
giving it a CSS width command:

<table border="1" style="width:300px;">

Result:

Beagle Chihuahua

Terrier Collie

Add the a CSS vertical-align command to a td tag and the content of that cell will start
at the top of the cell:

<td style="vertical-align:top;">Chihuahua</td>

Result:

Beagle Chihuahua

Terrier Collie

Let's change the color of a cell with CSS background command:

<td style="background:silver;">Terrier</td>

Page 14
MA-BPPAC12
Result:

Beagle Chihuahua

Terrier Collie

By now you have all the tags you need to put together a website, I hope you enjoyed
the lessons enough to buy my book

Page 15
MA-BPPAC12
Lesson 9: Frames
Do You Really Want Them?
Scroll down the page, see what happened? The top part of the page remained stationary while
the rest of the page moved. That's what's called frames. A webpage with frames may look
interesting but it can pose problems, not all browsers support frames, some search engines ignore
web pages with frames, and HTML 5, the newest version of HTML code that's in the works,
won’t support frame tags. But if you still want to know how they are made read on.
More Than One Page
A web page with frames is actually made up of several pages put together into one. This page for
example is made of three pages: One for the top, another for the main section, and a third one
which brings them together.

You can see that this page has two frames, the top frame containing the page with the title, and
the bottom frame containing the page with the sidebar and main content. Webpages within the
frames are written just like any other html file but the page which brings them together has it's
own set of html tags. Here's how the code looks for this page:

<html>

<head>
<title>frames</title>
<head>

<frameset rows="30%,70%">
<frame src="title.html" />
<frame src="main.html" />
</frameset>

</html>

Notice that the html file starts out just like any other web page except there are no body tags. In
their place are the opening and closing frameset tags.

The rows attribute in the frameset tag makes horizontal frames, vertical frames are made with
the cols attribute. The numbers determine how much of the web page the frames will take up, in
the example the top frame takes 25% and the second frame 75% of space. The percentages need
to be distributed so that they add up to 100% and notice they are enclosed in quotation marks.
Each percentage is separated by a comma.

Next come the frame tags, they are single tags so they have a slash at the end. The src attribute
is telling the browser which web page is to display in the frame by default (when the visitor
arrives on the web page). In the example the first frame holds a web page with the file name
"title.html" and the second frame holds a web page named "main.html".

More frames can be put on a web page by adding more frame tags to the code. To remove frame
borders add the border="0" attribute into the opening frameset tag like so:

<frameset rows="25%,75%" frameborder="0">

Page 16
MA-BPPAC12
Linking From Framed Web Pages
To get links working properly on framed web pages, each frame needs to be named so that the
anchor tags will know into which frame to send the destination web page when a link is clicked.
This is done by putting the name attribute into the frame tags like so:

<frame src="main.html" name="myframe" />

The name of the frame can be anything, once the frame is named, the link is directed to it
through the target attribute in the anchor tags:

<a href="testage.html" target="myframe">Your link</a>

The target attribute told the link to send the web page into a frame named myframe. The target
attribute can also force links to break out of frames completely and load like a regular web page
when its value is set to "_top" like so:

<a href="testage.html" target="_top">Your link</a>

And that's how a web page with frames is made. So do you still want them?

Page 17
MA-BPPAC12

You might also like