Description

What You Will Learn

• How to create HTML documents

• Basic HTML structure

• How to creating hyperlinks

• How to add images to a web page

• HTML5 semantic tags

Approximate Time

The exercises in this lab should take approximately 30-50 minutes to complete.
2 Lab 3: Introduction to HTML

QUICK TOUR OF HTML

PREPARING DIRECTORIES

1 If you haven’t done so already, create a folder in your personal drive for all the labs for this book.

2 From the main labs folder (either downloaded from the textbook’s web site using code provided with book or in a common location provided by your instructor), copy the folder titled lab03 to your course folder created in step one.

Now we are ready to create our first web page.

E x e r c i s e 3 . 1 — F I R S T W E B P A G E

1 Using some type of text or HTML editor (such as Notepad, Notepad++, Brackets, Sublime, etc), type in the following:

 

 

This is a simple document with not much content

Note: these labs use the convention of red bolded text to indicate content to change/enter.

2 Save the file as lab03-exercise01.html in the lab03 folder on your personal drive (the folder you just created in the Preparing Directories step above).

3 Start up FireFox, Chrome, Internet Explorer or some other browser. Open the file lab03-exercise01.html. To do this, you could use the Open command in the menu, drag-and-drop the file from the file manager of the operating system, or double-click the file from the operating system file manager.

This will display the file created in step one in the browser window.

4 Switch back to your text editor. Position the cursor before “This is a simple” and then press Enter three times. Position cursor after the word “much”. Press space five times.

5 Save the changes and then switch back to browser. Refresh the page. Notice that the browser ignores extra spaces and paragraph returns.

6 Remove the extra spaces and returns added in step 4. Save changes.

Page 2 of 14
Fundamentals of Web Development 3

EXERCISE 3.2 — ADDITIONAL STRUCTURE TAGS

1 Create a new HTML document with the following content:

 

 

 

Share Your Travels

New York – Central Park

Description

Photo by Randy Connolly

This photo of Conservatory Pond in Central Park New York City was taken on October 22, 2011 with a Canon EOS 30D camera.

Reviews

---

 

 

Notice that this document has additional structure tags (,,) that were required in XHTML but are now optional in HTML5.

2 Save your file as lab03-exercise02.html and test file in browser. The result should look similar to that shown in Figure 3.1.

4 Lab 3: Introduction to HTML

Figure 3.1 – Exercise 3 Complete

EXERCISE 3.3 — MAKING MISTAKES

1 Open lab03-exercise03.html (which has the same content as the last exercise).

2 Before the text “Conservatory” (in the second paragraph tag), add the tag .

3 Save and then test in browser. After testing, remove the tag.

Sadly there is no tag in HTML. Your browser will simply ignore any tag it does not recognize.

4 Remove the trailing

end tag, save and then test.

Since the

tag is never closed, the browser assumes that the content after it should continue being displayed as a first-level heading.

5 Put back the trailing

end tag (i.e., after “Share Your Travels”).

6 Change the

tag to

, save and then test. Notice that HTML5 is case insensitive.

Page 4 of 14
Fundamentals of Web Development 5

LINKING

Hyperlinks are an essential feature of any web page. Links are created via the anchor () element.

EXERCISE 3.4 — LINKING

1 Open lab03-exercise04.html and add the following bolded text:

This photo of Conservatory Pond in

Central Park in New York City was taken on October 22, 2011 with a Canon EOS 30D camera.

This will create an external link.

2 Save changes and test in browser.

3 Modify the document by adding the following link and test.

This photo of Conservatory Pond in

Central Park in New York City was
taken on October 22, 2011 with a Canon EOS 30D camera.

This will create a relative link (i.e., a link to another page in the same web site).

ADDING IMAGES

E x e r c i s e 3 . 5 — A D D I N G I M A G E S

1 Add the following tag to your file from the previous exercise and then test:

Reviews

This instructs the browser to display the file central-park.jpg which is found in the images subfolder.

2 Modify the image tag as follows and test (be sure to move your mouse over the image).

Copyright © 2017 Randy Connolly and Ricardo Hoar
6 Lab 3: Introduction to HTML

The title attribute is used to display a tooltip; Internet Explorer, also displays the content of the alt attribute in a tooltip if there is no title attribute specified.

3 Change the src attribute to the following (i.e., add a slash before the folder name) and test.

You will no longer see the central park image. Why? Because the root reference does not work when tested locally.

Also, depending on the browser, you may or may not see a missing image icon, as shown in Figure 3.2. Notice that all three of the browsers in the Figure 3.2 will also display the alt attribute, but Firefox does not display a missing image icon.

What would we see in Firefox if the missing did not have an alt attribute defined? The answer is nothing. While this makes sense perhaps from an end-user perspective, from a developer’s perspective this behavior can be frustrating. This is one of the many reasons why we strongly recommend testing your pages in multiple browsers.

Figure 3.2 – Missing image indication in different browsers

4 Remove the slash added in step 3.

5 Add the following and then test:

 

 

This turns the Central Park image into a link (in this case, a link to a larger version of the Central Park image).

Page 6 of 14
Fundamentals of Web Development 7

6 Add the following after the Central Park image:

Share:

Notice that images are by default inline content in that they exist in the same flow as text.

7 Remove the returns between each tag, as shown below, and then test.

Share:

Notice that the browser interprets each (or multiple ones in a row) carriage return in the HTML as a single space, as shown in Figure 3.3.

Figure 3.3 – Carriage return treated as a space

8 Modify the following and test.

Share:

The
tag adds a line break.

Copyright © 2017 Randy Connolly and Ricardo Hoar
8 Lab 3: Introduction to HTML

LIST BASICS

Lists are a way of organizing information. HTML supports several different types of list: definition lists, ordered lists, and unordered lists.

EXERCISE 3.6 — MAKING A LIST

1 Open lab03-exercise06.html and add the following bolded text:

 

Share Your Travels

New York – Central Park

• Description
• Reviews

Description

Remember: these labs use the convention of red bolded text to indicate content to change/enter/insert.

This will add an unordered list to your page. Notice that it is a lowercase L not the number 1 in these new tags.

Also, the indenting shown in the list above doesn’t affect the output in the browser. It is added to make the markup more readable for us, the developers.

2 Save and test.

3 Change the

and

to

and

and then test in browser. This will change the list to an ordered list.

4 Change the list back to an unordered list.

It is common practice to create a list of related links. The next exercise demonstrates this technique.

Page 8 of 14
Fundamentals of Web Development 9

E x e r c i s e 3 . 7 — L I N K I N G W I T H L I S T S

1 Continue working with lab03-exercise06.html and add the following to the list and test:

• Description
• Reviews

Notice the target for the links (i.e., href=”#”). The # simply indicates the current page (i.e., it goes nowhere). This is a common technique for showing links whose destinations are not yet known.

2 Modify the list as follows:

• Description
• Reviews

These are now references to anchors on the existing page, which we will add in the next step.

3 Add the following anchors to your document as shown below.

• Description
• Reviews

Description

Photo by Randy Connolly

This photo of Conservatory Pond in

Central Park in New York City was
taken on October 22, 2011 with a Canon EOS 30D camera.

Reviews

Copyright © 2017 Randy Connolly and Ricardo Hoar
10 Lab 3: Introduction to HTML

4 Test by clicking on links in bulleted list.

You may need to shrink the vertical size of your browser to see these relative links work

.

HTML5 SEMANTIC ELEMENTS

HTML5 introduced a number of new semantic elements that can make your markup more understandable and thus easier to maintain. The next set of exercises introduces several of these elements.

E x e r c i s e 3 . 8 — H E A D E R A N D F O O T E R

1 Open lab03-exercise08.html and test.

2 Add the following and test.

 

Share Your Travels

New York – Central Park

• Description
• Reviews

You will notice that the browser does not add any formatting or spacing for the

element. It is used purely to make our markup more understandable. Later, once we learn CSS, we can give the header a particular look.3 At the end of our document, add the following and test.

 

 

Like the

element, the