HTML Lesson 2
Intro to writing HTML- simple project
This site (http://www.w3.org/MarkUp/Guide/) is an excellent guide to get you started. Read the first
three paragraphs, and then follow the instructions below.
1)
Open notepad on your computer:
a.
Click start, then all
programs, then accessories, then notepad.
2)
Type what is set out below in green into your notepad
document…you can also copy and paste if you like….it’s
fairly common in web design!
A.
Start with a title
Every HTML document needs a
title. Here is what you need to type:
<title>My first HTML document</title>
Change the text from "My
first HTML document" to suit your own needs. The title text is preceded by
the start tag <title> and ends with the matching end tag </title>.
The title should be placed at the beginning of your document.
Save the file on your desktop
as "test.html". Open Internet Explorer, go to FILE, OPEN, BROWSE …find the file on the desktop and select it. See what you
efforts look like! Find the title in the
caption bar at the top of the page.
NOTE:If the file extension
is ".html" or ".htm" then the
browser will recognize it as HTML.
Now go back to notepad and continue.
B.
Add headings and paragraphs
If you have used Microsoft
Word, you will be familiar with the built in styles for headings of differing
importance. In HTML there are six levels of headings. H1 is the most important, H2 is slightly less important, and so on down to
H6, the least important.
Here is how to add an
important heading:
<h1>An important heading</h1>
and here is a slightly less important
heading:
<h2>A slightly less important heading</h2>
Each paragraph you write
should start with a <p> tag. The </p> is optional, unlike the end
tags for elements like headings. For example:
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
Save your work and view your efforts in the
browser. Not bad for starters huh? You are on
your way... Continue with the instructions.
C.
Adding a bit of emphasis
You can emphasize one or more
words with the <em> tag, for instance:
This is a really <em>interesting</em> topic!
Since we are going to add an image in the next section, let’s put in a space
between what we have done so far and what will come. We do that with the line
break tag. In your notepad document, type <br> just below the last line. Save
your work and look at the file in your browser. Now move on with item D.
D.
Adding interest to your pages with images
Images can be used to make
your Web pages distinctive and greatly help to get your message across. The
simple way to add an image is using the <img>
tag. Let's assume you have an image file called "sunset.jpg"
in the same folder/directory as your HTML file (It is actually in the my pictures folder in WINDOWS). It is 400 pixels wide by
300 pixels high.
<img src="C:\Documents and
Settings\All Users\Documents\My Pictures\Sample Pictures\Sunset.jpg"
width="400" height="300">
The src
attribute names the image file. The width and height aren't strictly necessary
but help to speed the display of your Web page. Something is still missing!
People who can't see the image need a description they can read in its absence.
You can add a short description as follows:
<img src="C:\Documents and Settings\All Users\Documents\My
Pictures\Sample Pictures\Sunset.jpg" width="400" height="300"
alt="A Beautiful Sunset">
The alt attribute is used to
give the short description, in this case "A Beautiful Sunset". For
complex images, you may need to also give a longer description. Assuming this
has been written in the file "sunset.html", you can add one as
follows using the longdesc attribute:
<img src="C:\Documents and Settings\All Users\Documents\My
Pictures\Sample Pictures\Sunset.jpg" width="400" height="300"
alt="A Beautiful Sunset" longdesc="sunset.html">
You can create images in a
number of ways, for instance with a digital camera, by scanning an image in, or
creating one with a painting or drawing program. Most browsers understand GIF
and JPEG image formats, newer browsers also understand the PNG image format. To
avoid long delays while the image is downloaded over the network, you should
avoid using large image files.
Generally speaking, JPEG is
best for photographs and other smoothly varying images, while GIF and PNG are
good for graphics art involving flat areas of color, lines and text. All three
formats support options for progressive rendering where a crude version of the
image is sent first and progressively refined.
E.
Adding links to other pages
What makes the Web so effective
is the ability to define links from one page to another, and to follow links at
the click of a button. A single click can take you right across the world!
Links are defined with the
<a> tag. Let’s define a link to the page defined in the file "peter.html":
This a link to <a href="peter.html">Peter's page</a>.
Let’s add another line break
tag (<br>), then save your file and open it
again in the browser.
The text between the <a>
and the </a> is used as the caption for the link. It is common for the
caption to be in blue underlined text.
To link to a page on another
Web site you need to give the full Web address (commonly called a URL), for
instance to link to www.w3.org you need to write:
This is a link to <a href="http://www.w3.org/">W3C</a>.
You can turn an image into a
hypertext link, for example, the following allows you to click on the company
logo to get to the home page:
<a href="/"><img src="logo.gif" alt="home page"></a>
NOTE: This link will not actually work, since you
do not have a logo.gif file, or a “home Page”. You
can, however, see how the code is interpreted by your browser.
Let’s add another line break
tag (<br>), then save
your file.
F.
Three kinds of lists
Type or copy the following
code to your notepad document.
HTML supports three kinds of lists. The first kind is a bulletted
list, often called an unordered list. It uses the <ul> and <li> tags, for
instance:
<ul>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ul>
<br>
Note that you always need to
end the list with the </ul> end tag, but that
the </li> is optional and can be left off. The
second kind of list is a numbered list, often called an ordered list.
It uses the <ol> and <li>
tags. For instance:
<ol>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ol>
<br>
Like bulletted
lists, you always need to end the list with the </ol>
end tag, but the </li> end tag is optional and
can be left off.
The third and final kind of
list is the definition list. This allows you to list terms and their
definitions. This kind of list starts with a <dl> tag and ends with
</dl> Each term starts with a <dt> tag and each definition starts with a <dd>. For instance:
<dl>
<dt>the first term</dt>
<dd>its definition</dd>
<dt>the second term</dt>
<dd>its definition</dd>
<dt>the third term</dt>
<dd>its definition</dd>
</dl>
<br>
The end tags </dt> and </dd> are optional and can be left off. Note
that lists can be nested, one within another. For instance:
<ol>
<li>the first list item</li>
<li>
the second list item
<ul>
<li>first nested item</li>
<li>second nested item</li>
</ul>
</li>
<li>the third list item</li>
</ol>
<br>
You have now created a simple,
yet detailed web page using HTML code. Save your document and view it one more
time in the browser.
G.
Submit your work for grading.
Attach your
“index.html” file to an email then email to
[email protected] from your yahoo mail account.
Your work will be graded and
your grade will be sent to you in a reply.
Great Work! You are ready to move on to the next lesson
on the website.
Back