Lesson 1: Let's Get Started: What Is Needed?

Lesson 1: Let's get started
What is needed?
You have a "browser". A browser is the program that makes it possible to browse and open
websites. Right now you are looking at this page in your browser.
It is not important which browser you use. The most common is Microsoft Internet Explorer.
But there are others such as Opera and Mozilla Firefox and they can all be used.
You might have heard about, or even used, programs such as Microsoft FrontPage,
Macromedia Dreamweaver or even Microsoft Word, which can - or claim that they can -
create websites for you. Forget these programs for now! They are not of any help to you when
learning how to code your own website.
Instead, you need a simple text editor. If you are using Windows you can use Notepad, which
is usually found in the start menu under Programs in Accessories:
Lesson 2: What is HTML?
To make a long story short, HTML was invented in 1990 by a scientist called Tim Berners-
Lee. The purpose was to make it easier for scientists at different universities to gain access to
each other's research documents.
HTML is a language, which makes it possible to present information (e.g. scientific research)
on the Internet. What you see when you view a page on the Internet is your browser's
interpretation of HTML. To see the HTML code of a page on the Internet, simply click "View"
in the top menu of your browser and choose "Source".
HTML is an abbreviation of "HyperText Mark-up Language".
• Hyper is the opposite of linear. In the good old days - when a mouse was something the cat chased -
computer programs ran linearly: when the program had executed one action it went to the next line and
after that, the next line and so on. But HTML is different - you can go wherever you want and
whenever you want. For example, it is not necessary to visit MSN.com before you visit HTML.net.
• Text is self-explanatory.
• Mark-up is what you do with the text. You are marking up the text the same way you do in a text
editing program with headings, bullets and bold text and so on.
• Language is what HTML is. It uses many English words.
you will learn so-called XHTML (Extensible HyperText Mark-up Language) which, in short,
is a new and more well-structured way of writing HTML.
Lesson 3: Elements and tags
Elements give structure to a HTML document and tells the browser how you want your
website to be presented. Generally elements consists of a start tag, some content, and an end
tag.
"Tags"?
Tags are labels you use to mark up the begining and end of an element.
All tags have the same format: they begin with a less-than sign "<" and end with a greater-than
sign ">".
Generally speaking, there are two kinds of tags - opening tags: <html> and closing tags: </html>. The only
difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it
between an opening tag and a closing tag.
HTML is all about elements. To learn HTML is to learn and use different tags.
Okay, the element em emphasis text. All text between the opening tag <em> and the closing tag </em> is
emphasised in the browser. ("em" is short for "emphasis".)
<em>Emphasised text.</em> Emphasised text.
The elements h1, h2, h3, h4, h5 and h6 is used to make headings (h stands for "heading"),
where h1 is the first level and normally the largest text, h2 is the second level and normally
slightly smaller text, and h6 is the sixth and last in the hierarchy of headings and normally the
smallest text.
<h1>This is a heading</h1>
<h2>This is a subheading</h2>
Will look like this in the browser:
This is a heading
This is a subheading
So, I always need an opening tag and a closing tag?
As they say, there's an exception to every rule and in HTML the exception is that there are a
few elements which both open and close in the same tag. These so-called empty elements are
not connected to a specific passage in the text but rather are isolated labels, for example, a line
break which looks like this: <br />.
Should tags be typed in uppercase or lowercase?
Most browsers might not care if you type your tags in upper, lower or mixed cases. <HTML>, <html> or
<HtMl> will normally give the same result. However, the correct way is to type tags in lowercase. So get into
the habit of writing your tags in lowercase.
Where do I put all these tags?

You type your tags in an HTML document. A website contains one or more HTML documents. When you
surf the Web, you merely open different HTML documents.
Lesson 4: Create your first website

How?
HTML is simple and logical. The browser reads HTML like you read English: from the
top down and from left to right. Thus, an simple HTML document begins with what should
come first and ends with what should come last.
The first thing you need to do is to tell the browser that you will "talk" to it in the language
HTML. This is done with the tag <html> (no surprises there). So before you do anything else
type "<html>" in the first line of your document in Notepad.
As you may recall from the previous lessons, <html> is an opening tag and must be closed
with a closing tag when you are finished typing HTML. So to make sure you don't forget the
HTML close tag now type "</html>" a couple of lines down and write the rest of the
document between <html> and </html>.
The next thing your document needs is a "head", which provides information about your
document, and a "body", which is the content of the document. Since HTML is nothing if not
logical, the head (<head> and </head>) is on top of the body (<body> and </body>).
Your document should now look like this:
<html>
<head>
</head>
<body>
</body>
</html>
Note how we structured the tags with new lines (using the Enter key) as well as indents (using the Tab key). In
principle, it does not matter how you structure your HTML document. But to help you, and others reading
your coding, to keep an overview, it is strongly recommended that you structure your HTML
in a neat way with line breaks and indents, like the above example.
So far so good, but how do I add content to my website?
As you learnt earlier, your HTML document has two parts: a head and a body. In the head section you write
information about the page, while the body contains the information that constitutes the page.
For example, if you want to give the page a title which will appear in the top bar of the
browser, it should be done in the "head" section. The element used for a title is title. I.e.
write the title of the page between the opening tag <title> and the closing tag </title>:
<title>My first website</title>
Note that this title will not appear on the page itself. Anything you want to appear on the page
is content and must therefore be added between the "body" tags.
As promised, we want the page to say "Hurrah! This is my first website." This is the text that we want to
communicate and it therefore belongs in the body section. So in the body section, type the following:
<p>Hurrah! This is my first website.</p>

The p in <p> is short for "paragraph" which is exactly what it is - a text paragraph.
Your HTML document should now look like this:
<html> In Notepad choose "Save as..." under "File" in
the top menu.
Now go to <head>
the browser:
<title>My first website </title>
Choose "All Files" in the "Save as type" box.
</head>
• In the top menu choose This is very important - otherwise, you save it
"Open" under "File".
<body> as a text document and not as an HTML
• Click
<p>Hurrah!in This
"Browse" the boxis my website.</p> document.
that</body>
appears.
Now save your document as "page1.htm" (the
</html>
Now find your HTML document and ending ".htm" indicates that it is an HTML
click "Open document. ".html" gives the same result. I
always use ".htm"
Now go to the browser:

• In the top menu choose "Open" under "File".
• Click "Browse" in the box that appears.
• Now find your HTML document and click "Open".
Lesson 5: What have you learned so far?

Always start with the basic template we made in the previous lesson:
<html> In the head section, always write a title: <title>The
<head>
<title></title>
title of your page</title>. Notice how the title will
</head> be shown in the upper left corner of your browser:
<body>
</body>
</html>
The title is especially important because it is used by search engines (such as Google) to index your website
and is shown in the search results.
In the body section, you write the actual content of the page. You already know some of the most important
elements:
<p>Is used for paragraphs.</p>
<em>Emphasis text.</em>
<h1>Heading</h1>
<h2>Subhead</h2>
<h3>Sub-subhead</h3>
Lesson 6: A few more elements

<strong>Stronger emphasis.</strong>
In the same way you emphasise the text by putting it between the openning tag <em> and the closing tag
</em>, you can give stronger emphasis by using the openning tag <strong> and the closing tag </strong>.
Can I use several elements at the same time?

You can easily use several elements at the same time as long as you avoid overlapping elements. This is best
illustrated by an example:
Example 3:
If you want to emphasise small text, it must be done like this:
<em><small>Emphasised small text</small></em>

And NOT like
this:
<em><small>Emphasise small text</em></small>
More elements!
As mentioned in Lesson 3 there are elements which are opened and closed in the same tag. These so-
called empty elements are not connected to a specific passage in the text but rather are isolated labels. An
example of such a tag is <br /> which creates a forced line break:
Some text<br /> and some more text in a new line
Some text
and some more text in a new line
Notice that the tag is written as a contraction of an opening and closing tag with an empty space and a forward
slash at the end: <br />.
Another element that is opened and closed in the same tag is <hr /> which is used to draw a horizontal line
("hr" stands for "horizontal rule"):
Example 5:
Examples of elements that need both an opening tag and a closing tag - as most elements do -
is ul, ol and li. These elements are used when you want to make lists.
ul is short for "unordered list" and inserts bullets for each list item.
ol is short for "ordered list" and numbers each list item.
To make items in the list use the li tag ("list item"). Confused? See the examples:
<ul> •A list item

<li>A list item</li> • Another list
<li>Another list item</li>
<ol>
</ul> item
<li>First list item</li> 1. First list
<li>Second list item</li> item
</ol> 2. Second list
Lesson 7: Attributes
As you probably remember, elements give structure to a HTML document and tells the browser
how you want your website to be presented (for example, <br /> informs the browser to make a
line break). In some elements you can add more information. Such additional information is
called an attribute.
Code
<h2 style="background-color:#ff0000;">My friendship with HTML</h2>
Attributes are always written within a start tag and are followed by an equals sign and
the attribute details written between inverted commas. The semicolon after the
attribute is for separating different style commands.
What is the catch?
There are many different attributes. The first one you will learn is style. With the style attribute you can add
layout to your website. For instance a background colour:
CODE
<html> will show a completely red page in the browser.
<head>
Also, don't forget to always close the
</head> inverted commas (quotation marks) after
an attribute
<body style="background-color:#ff0000;">
</body>
</html>
How did the page become red?

In the above example, we asked for the background colour with the code
"#ff0000". This is the colour code for red using so called hexadecimal numbers.
Each colour has its own A hexadecimal colour code consists of # and six
hexadecimal number digits or letters. There are more than 1000 HEX
White: #ffffff codes and it is not easy to figure out which HEX
Black: #000000 code is tied to a specific colour. To make it easier
(zeros) we have made a chart of the 216 most commonly
Red: #ff0000 used colors.
Blue: #0000ff You can also use the English name for the most
Green: #00ff00 common colours (white, black, red, blue, green and
Yellow: #ffff00 yellow).
<body style="background-color: red;">
Which elements can use attributes?
Different attributes can be applied to most elements.
You will often use attributes in tags such as the body tag while you will rarely use attributes
in, for example, a <br/> tag since a line break normally is a line break without any parameters
to adjust.
Just as there are many different elements, so there are many different attributes.
Some attributes are tailor made for one particular element while others can be used for many
different elements. And vice versa: some elements can only contain one kind of attribute while
others can contain many.
Exactly what parts does an element consist of?
Generally an elements consist of a start tag with or without one or more attributes, some
content and an end tag. Simple as that. See the illustration below.
Lesson 8: Links
<a href="http://www.html.net/">Here is a link to HTML.net</a>
The element a stands for "anchor". And the attribute href is short for "hypertext reference",
which specifies where the link leads to - typically an address on the internet or a file name.
In the above example the attribute href has the value "http://www.html.net", which is the full
address of HTML.net and is called a URL (Uniform Resource Locator). Note that "http://"
must always be included in URLs. The sentence "Here is a link to HTML.net" is the text that
is shown in the browser as the link. Remember to close the element with an </a>.
What about links between my own pages?

If you want to make a link between pages on the same website, you do not need to spell out
the entire address (URL) for the document. For example, if you have made two pages (let us
call them page1.htm and page2.htm) and saved them in the same folder you can make a link
from one page to the other by only typing the name of the file in the link. Under such
circumstances a link from page1.htm to page2.htm could look like this:
<a href="page2.htm">Click here to go to page 2</a>
If page 2 were placed in a subfolder (named "subfolder"), the link could look
like this:
<a href="subfolder/page2.htm">Click here to go to page 2</a>
The other way around, a link from page 2 (in the subfolder) to page 1 would look
like this:
<a href="../page1.htm">A link to page 1</a>
"../" points to the folder one level up from position of the file from which the link
is made. Following the same system, you can also point two (or more) folders up
by writing "../../". Alternatively, you can always type the complete address
for the file (URL).
What about internal links within a page?

You can also create internal links within a page - for example a table of contents at the top
with links to each chapter below. All you need to use is a very useful attribute called id
(identification) and the symbol "#".
Use the id attribute to mark the element to which you want to link. For example:
<h1 id="heading1">heading 1</h1>
You can now create a link to that element by using "#" in the link attribute. The
"#" must be followed by the id of the tag you want to link to. For example:
<a href="#heading1">Link to heading 1</a>
Example 5:
<html>
<head>
</head>
<body>
<p><a href="#heading1">Link to heading 1</a></p>
<p><a href="#heading2">Link to heading 2</a></p>

<p>Text text text text</p>

<p>Text text text text</p>
</body>
</html>
will look like this in the browser (click on the two links):
Link to heading 1
Link to heading 2
Heading 1
Text text text text
Heading 2
Text text text text
(Note: An id attribut must start with a letter)
Can I link to anything else?

You can also make a link to an e-mail address. It is done in almost the same way as when you link to a
document:
Example 6:
<a href="mailto:[email protected]">Send an e-mail to nobody at HTML.net</a>
The only difference between a link to an e-mail and a link to a file is that
instead of typing the address of a document, you type mailto: followed by
an e-mail address.
When the link is clicked, the default e-mail program opens with a new
blank message addressed to the specified e-mail address. Please note that
this function will only work if there is an e-mail program installed on your
computer.
Are there any other attributes I should know of?
To create a link, you always have to use the href attribute. In addition, you can
also put a title on your link:
Example 7:
<a href="http://www.html.net/" title="Visit HTML.net and learn

HTML">HTML.net</a>
Would look like this in the browser:

HTML.net
The title attribute is used to type a short description of the link.
If you - without clicking - place the cursor over the link, you will see the text
"Visit HTML.net and learn HTML" appears
Lesson 9: Images
<img src="david.jpg" alt="David" />
All you need do is first tell the browser that you want to insert an image (img) and
then where it is located (src, short for "source"). Do you get the picture?
Notice how the img element is opened and closed using the same tag.
Like the <br /> tag, it is not tied to a piece of text.
"david.jpg" is the name of the image file you want to insert in your page. ".jpg" is the file type
of the image. Just like the extension ".htm" shows that a file is an HTML document, ".jpg"
tells the browser that a file is a picture. There are three different types of image file types you
can insert into your pages:
• GIF (Graphics Interchange Format)
• JPG / JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphics)
GIF images are usually best for graphics and drawings,
while JPEG images are usually better for photographs.
This is for two reasons:
1. GIF images only consist of 256 colours, while JPEG images
comprise of millions of colors and
2. second, the GIF format is better at compressing simple
images, than the JPEG format which is optimized for more
complex images. The better the compression, the smaller the
size of the image file, the faster your page will load. As you
probably know from your own experience, unnecessarily
'heavy' pages can be extremely annoying for the user.
Traditionally, the GIF and JPEG formats have been the two
dominant image types, but lately, the PNG format has become
more and more popular (primarily at the expense of the GIF
format).
The PNG format contains in many ways the best of both
the JPEG and GIF format: millions of colors and effective
compressing.
First, you can easily insert pictures located in other folders, or even pictures that
are located on other websites:
<img src="images/logo.png" />
OR directly
img src="http://www.html.net/logo.png" />
<a href="http://www.html.net">
<img src="logo.png" /></a>
will look like this in the browser (try clicking on the image):
Other attributes of images

The alt attribute is used to give an alternate description of an image if, for some
reason, the image is not shown for the user. This is especially important for users
with impaired vision, or if the page is loaded very slowly. Therefore, always use
the alt attribute:
<img src="logo.gif" alt="HTML.net logo" />
Some browsers let the text of the alt attribute appear as a small pop-up box when
the user places their cursor over the picture. Please note that when using the alt
attribute, the aim is to provide an alternative description of the picture. The alt
attribute should not be used to create special pop-up messages for the user since
then visually impaired users will hear the message without knowing what the
picture is.
The title attribute can be used to add information to the image:
Example 6:
<img src="logo.gif" title="Learn HTML from HTML.net" />
If you, without clicking, place the cursor over the image, you will see the text
"Learn HTML from HTML.net" appear as a pop-up box.
Two other important attributes are width and height:
Example 7:
<img src="logo.png" width="141px" height="32px" />
will look like this in the browser:
The width and height attributes can be used to set the height and width of an
image. The value that is used to set the width and height is pixels.
Pixels are the units of measurement used to measure the resolution of screens.
(The most common screen resolution is 1024x768 pixels).
Unlike centimetres, pixels are relative units of measurement which depend on the
resolution of the screen.
To a user with a high screen resolution, 25 pixels may correspond to 1 centimetre,
while the same 25 pixel in a low screen resolution may correspond to 1.5
centimetres on the screen.
If you do not set the width and height, the image will be inserted in its actual size.
But with width and height you can manipulate the size:
Example 8:
<img src="logo.gif" width="32px" height="32px" />
will look like this in the browser:
However, it is worth keeping in mind that the actual size in kilobytes of the image
file will remain the same so it will take the same time to load the image as it did
before, even though it appears smaller on the screen.
Therefore, you should never decrease the image size by using the width and
height attributes.
Instead, you should always resize your images in an image editing program to
make your pages lighter and faster.
That said, it is still a good idea to use the width and height attributes because the
browser will then be able to detect how much space the image will need in the
final page layout before the image is fully downloaded. This allows your browser
to set up the page nicely in a quicker way.
Lesson 10: Tables

http://www.html.net/tutorials/html/lesson10.php

Lesson 1: Let's Get Started: What Is Needed?

Uploaded by

Copyright:

Available Formats

Lesson 1: Let's Get Started: What Is Needed?

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lesson 1: Let's Get Started: What Is Needed?

Uploaded by

Copyright:

Available Formats

Lesson 1: Let's get started

Lesson 2: What is HTML?

HTML is an abbreviation of "HyperText Mark-up Language".

<em>Emphasised text.</em> Emphasised text.

Will look like this in the browser:

Where do I put all these tags?

Lesson 4: Create your first website

<p>Hurrah! This is my first website.</p>

Now go to the browser:

Lesson 5: What have you learned so far?

Lesson 6: A few more elements

Can I use several elements at the same time?

<em><small>Emphasised small text</small></em>

<ul> •A list item

How did the page become red?

What about links between my own pages?

What about internal links within a page?

<h1 id="heading1">heading 1</h1>

<h1 id="heading2">heading 2</h1>

Can I link to anything else?

<a href="http://www.html.net/" title="Visit HTML.net and learn

Would look like this in the browser:

Other attributes of images

<img src="logo.png" width="141px" height="32px" />

will look like this in the browser:

Lesson 10: Tables

You might also like