Scribd
Upload
3 views

Exercise - HTML Basics

This document provides a step-by-step guide to creating a basic HTML web page using a text editor. It covers folder organization, writing HTML code, formatting text, adding images, creating links, and building a simple table. The exercise culminates in creating a second web page and linking it to the first.

Uploaded by

Laura Palacio
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Exercise - HTML Basics

This document provides a step-by-step guide to creating a basic HTML web page using a text editor. It covers folder organization, writing HTML code, formatting text, adding images, creating links, and building a simple table. The exercise culminates in creating a second web page and linking it to the first.

Uploaded by

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

Exercise 2.

1 – HTML Basics
Objective
To learn how to code basic HTML using a text editor.

Important Note: to save typing time, you will be cutting and pasting code from this document. This
WILL NOT work properly if the PDF is opened in a Web browser. Please download this file to your local
drive D:\, open Adobe Acrobat DC (using MyApps) and then choose File > Open to open this file.

Instructions
Create a folder on your USB flash drive or on Drive D:\ of your
computer called Exercise 2.1.

Create a sub-folder within the Exercise 2.1 folder called images.

Download the rocket.gif file from the exercise folder on


BlackBoard into the images folder.

On your computer open Notepad and Internet Explorer.

Save your notepad file as type All files (*.*) with the name index.html in the Exercise 2.1 folder you
created earlier.

1
Type the following code into notepad:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Web Page</title>
</head>
<body>
</body>
</html>

Save the notepad document.

When complete open the notepad document using Internet Explorer by typing the full path to your
document in the browser address bar: D:\Exercise 2.1\index.html. You should see something similar to
the following:

Note the title in the tab. These are the words you put inside the <title></title> tags in the
<head> section of your HTML document.

2
Headings
Switch back to notepad and add the following code to your new Web page. Put your name and today’s
date in the appropriate places. When done save your file and reload the page in Internet Explorer to see
what happens:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Web Page</title>
</head>
<body>
<h1>My First Web Page</h1>
<h2>By: Student Name</h2>
<h3>January 1, 2017</h3>
<p>This is my first paragraph of text.</p>
</body>
</html>

When developing a Web page, designers often need to place text into the design to simulate the look
and feel of the finished work. One this is done is through the use of dummy text, referred to as Lorem
Ipsum.

Open a new tab in your Internet Explorer Web browser and go to the Web site http://www.lipsum.com .
Take a few minutes to read about Lorem Isum, its history and use as well as what this Web site does.
Use the site to generate 2 paragraphs of dummy text for you. Select the first paragraph of dummy text
and paste it into your Web page replacing the existing text between the <p> tags. Then copy and paste
the second paragraph of text between a new set of <p> tags.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Web Page</title>
</head>
<body>
<h1>My First Web Page</h1>
<h2>By: Student Name</h2>
<h3>January 1, 2017</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id
diam blandit, condimentum urna in, dapibus nisi. Morbi convallis eu
massa quis faucibus. In hac habitasse platea dictumst.</p>

<p>Mauris lacinia enim nec elementum gravida. Fusce pulvinar id eros


at molestie. Vestibulum feugiat lectus eget dolor condimentum, eu
porttitor magna porttitor. Mauris iaculis augue justo, a varius mi
blandit a. Fusce viverra neque nec dui tincidunt aliquet. Sed placerat
massa quis risus vestibulum, a porttitor libero mollis.</p>
</body>
</html>

3
Save your Web page then reload it in the browser to see the changes.

Formatting Text
Now that you have basic paragraphs, let’s look at adding bold, italic and underlined text.

Surround any two words in the first paragraph of your document with the following tags:

<strong></strong>

Save your Web page and reload your browser to see the results.

Using different words, try the following tag:

<em></em>

Now we will combine bold and italic and see what the results are. In the second paragraph, select a
sentence and surround it with the following tags:

<strong><em></em></strong>

Note that the underline tags are “nested” in the bold tags. This is an important point to remember, tags
should never overlap. Think of them like those Russian Nesting Dolls – tags must fit inside each other.

4
See my example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Web Page</title>
</head>
<body>
<h1>My First Web Page</h1>
<h2>By: Student Name</h2>
<h3>January 1, 2017</h3>
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing</strong>
elit. Duis id diam blandit, condimentum urna in, dapibus nisi.
<em>Morbi convallis eu massa quis faucibus</em>. In hac habitasse
platea dictumst.</p>
<p>Mauris lacinia enim nec elementum gravida. Fusce pulvinar id eros
at molestie. Vestibulum feugiat lectus eget dolor condimentum, eu
porttitor magna porttitor. <strong><em>Mauris iaculis augue justo, a
varius mi bandit a</em></strong>. Fusce viverra neque nec dui
tincidunt aliquet. Sed placerat massa quis risus vestibulum, a
porttitor libero mollis.</p>
</body>
</html>

Line Breaks and Spaces


So far we have covered headings, paragraphs and simple character attributes. Another useful tag is the
line break tag. This allows you to drop text to the next line without the empty row that occurs when you
use the <p> tag. This tag works a little differently in that it is not a container so can be simplified down
to a single element that looks like this:

</br>

Try inserting this tag after the first sentence in your first paragraph. Save your Web page and reload
your browser to see what happens.

One of the most confusing things to new users who are creating their own web page is that they cannot
press the spacebar multiple times make additional spaces. To create extra spaces before, after, or in-
between your text, use the &nbsp; (non-breaking space) extended HTML character.

For example, to achieve something like - "extra space" - we have to place the following code in our
HTML:

extra &nbsp;&nbsp; space

Try adding some extra spaces between words in one of your paragraphs to test it out.

5
Lists
There are 2 types of lists, ordered (numbered) and unordered (bullet). Let’s add a list to your Web page.

Directly after the closing </p> tag of your second paragraph enter the following:

<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>

Save your Web page and reload it in your Web browser to see the results.

Now let’s change the list to the ordered type.

Change the <ul> and </ul> tags to read <ol> and </ol>.

Save your Web page and reload it in your browser to see the results.

Inserting Images
Pictures are an important part of modern Web pages. To use images in a Web page, you must begin by
first obtaining your image and placing it in the same place as your Web page. Often Web developers
create a folder to contain images to help keep things neat and organized.

At the beginning of this exercise, you saved an image that we will now add to the page we have been
building. Later in the course we will learn how to collect and/or modify your own images for use on the
Web.

Under your second paragraph, insert the following code:

<p><img src="images\rocket.gif"></p>

Note that with the code above, the path to the images folder we created and placed the file into is
entered. By default linked files are presumed to be in the same folder as the Web page itself, so you
need to ensure you include relative paths to file locations if you use folders.

Save your Web page and reload your browser to see the result. One thing to note about images and
graphics on the Web is that by default only GIF, JPG and PNG files are supported. The image that we
inserted is called an animated GIF. This is actually a series of 2 or more images that have been linked
together and set to display sequentially to give the impression of motion – we will learn how to make
these in a later class!

6
Uniform Resource Locators (URL)
The power of the Web is the URL. This allows documents to be connected together allowing a viewer to
navigate through the linked documents. Words and graphics can be used as links.

We will create links on your Web page that point to other Web sites. We can then create a second Web
page and link to that.

Insert the following code between your first and second paragraphs:

<p><a href="http://www.google.ca">Click Here to go to Google</a></p>

Save your Web page and reload your browser to see the result. Click on the link to try it out. You will
need to use your browser’s Back button to return.

One thing you will notice is that Google opens in the same window that your Web page was in. If you
examine the <a> tag (and the <img> tag above) you will notice that unlike the earlier tags we have
included more information in the first part of the tag. These extra words are referred to as attributes
and they modify the way the tag is interpreted by the Web browser. Let’s add a tag to the <a> tag we
just created that will change the link from opening in the same window (or target) and instead open a
new, blank window. Modify the tag to look like this:

<p><a href="http://www.google.ca" target="_blank">Click Here to go to


Google</a></p>

Save your page and reload your browser. Click on the link to see the difference.

Images can also be used as links. This is how graphical buttons are created. Add the following code
around your <img> tag:

<p><a href="http://www.virgingalactic.com/" target="_blank"><img


src="images/rocket.gif"></a></p>

Save your Web page and reload your browser to see the results.

7
Creating Tables
We are going to learn how to create a simple tow column table and then use it to hold a navigation bar
at the bottom of our Web page. Insert the following code at the bottom of you document just before
the </body> tag.

<table border="1" style="width:50%">


<tr>
<td><a href="index.html">Home Page</a></td>
<td><a href="page2.html">Page Two</a></td>
</tr>
</table>

Note that we first define the table using the <table> container, then create rows using <tr> containers,
then define columns using <td> containers nested into the rows. There is much more you can do with
tables, but they can become quite complex. This is where a good WYSIWYG editor becomes useful.

8
Example Code
If you have completed the above steps correctly, your code should look like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Web Page</title>
</head>
<body>
<h1>My First Web Page</h1>
<h2>By: Student Name</h2>
<h3>January 1, 2017</h3>
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing</strong>
elit.</br> Duis id diam blandit,
condimentum urna in, dapibus nisi. <em>Morbi convallis eu massa quis
faucibus</em>. In hac habitasse platea dictumst.</p>
<p><a href="http://www.google.ca" target="_blank">Click here to go to
Google</a></p>
<p>Mauris lacinia enim nec elementum gravida. Fusce pulvinar id eros
at molestie. Vestibulum feugiat lectus eget dolor condimentum, eu
porttitor magna porttitor. <strong><em>Mauris iaculis augue justo, a
varius mi bandita</em></strong>. Fusce viverra neque nec dui tincidunt
aliquet. Sed placerat massa quis risus vestibulum, a porttitor libero
mollis.</p>
<ol>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ol>
<p><a href="http://www.virgingalactic.com/" target="_blank"><img
src="images\rocket.gif"></a></p>
<table border="1" style="width:50%">
<tr>
<td><a href="index.html">Home Page</a></td>
<td><a href="page2.html">Page Two</a></td>
</tr>
</table>
</body>
</html>
Your Web page should look like the image on the following page.

9
Create a Second Web Page
Now that we have navigation to a second page, we need to create the actual page. Open a new
notepad document and paste the following code into it.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Two</title>
</head>
<body>
<h1>Welcome to Page Two</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Duis id
diam blandit condimentum urna in, dapibus nisi. Morbi convallis eu
massa quis faucibus. In hac habitasse platea dictumst.</p>
<p><a href="http://www.yahoo.ca" target="_blank">Click here to go to
Yahoo</a></p>
<p>Mauris lacinia enim nec elementum gravida. Fusce pulvinar id eros
at molestie. Vestibulum feugiat lectus eget dolor condimentum, eu
porttitor magna porttitor. Mauris iaculis augue justo, a varius mi
bandita>. Fusce viverra neque nec dui tincidunt aliquet. Sed placerat
massa quis risus vestibulum, a porttitor libero mollis.</p>
<table border="1" style="width:50%">
<tr>
<td><a href="index.html">Home Page</a></td>
<td><a href="page2.html">Page Two</a></td>
</tr>
</table>
</body>
Remembering to change the file type to All Files, save this document as page2.html in the same folder as
the index.html file. Reload your index.html file and test out the navigation bar.

10
Summary
In this exercise you learned how to write basic HTML code to produce a Web page. Keep this page
handy, we will use it again later.

11

You might also like