Skip to main content

Print preview

Paper size
Additional printing options
Print headers
Print footers

Worksheet 13.9 Group Work: More HTML

It is best to use a POGIL approach with the following. In POGIL students work in groups on activities and each member has an assigned role. For more information see https://cspogil.org/Home.

Note 13.9.1.

If you work in a group, have only one member of the group fill in the answers on this page. You will be able to share your answers with the group at the bottom of the page.
Learning Objectives
Students will know and be able to do the following.
Content Objectives:
  • How do you create a hyperlink in a HTML page with an <a> tag?
  • How do you include an image in a HTML page with a <img> tag?
  • What are tag attributes?
  • What is the difference between a <div> and a <span> tag?
  • How to change the look of the displayed HTML elements with Cascading Style Sheets (CSS).
Process Objectives:
  • Put HTML in order to define tables
  • Identify tag attribute names and values
  • Match terms to definitions

Subsection 13.9.1 Table Tags

HTML pages can include tables. Use the <table> tag.

Activity 13.9.1.

Click on the “Render” button to see the resulting web page.

Activity 13.9.2.

Activity 13.9.3.

Put the blocks into order to define just the body of simple HTML page with a table. The table has a header row and one row of data. Indent the blocks to show the structure.

Activity 13.9.4.

Put the blocks into order to define just the body of simple HTML page with a table. The table has two rows of data. The first row is data about the United Kingdom and the second is data about India. Indent the blocks to show the structure.

Subsection 13.9.3 Image Tag

Web pages can include images using the <img> tag. The image tag has an attribute src that specifies the URL for the image and can have an alt attribute to specify alternative text that describes the image.

Activity 13.9.6.

Render the HTML below.

Note 13.9.2.

An image tag, <img>, does not have an end tag. All of the information is in the start tag.

Activity 13.9.7.

Activity 13.9.8.

List the differences between the img tag and the a tag?

Subsection 13.9.4 Attributes

All HTML tags can have attributes. Attributes provide additional information about the tag such as the alternative text to use for an image as shown above by the alt attribute of the img tag. Attributes are specified by name and value pairs. The value should be in quotes.

Activity 13.9.9.

Activity 13.9.10.

Subsection 13.9.5 Div and Span tags

The div tag is used to contain other HTML tags (elements). It is often used to divide the HTML page into sections. The span tag is used for inline grouping or styling. You can use Cascading Style Sheets (CSS) to change the look of each HTML tag (element). You can add the CSS directly in the head section using the style tag, but the recommended approach is to use external CSS.

Activity 13.9.11.

Render the HTML below.

Activity 13.9.12.

Subsection 13.9.6 Using CSS Classes

You can define one or more classes in CSS and then use them to change the display of the HTML elements.

Activity 13.9.13.

Render the HTML below.
Change the class warning to use an orange color instead and render the HTML again.

Activity 13.9.14.

Which of the follow are true?
  • The root (start) of the elements in an HTML page is the html tag
  • The root is the html tag
  • All start tags must have an end tag
  • Some start tags do not have an end tag like <img>
  • All HTML tags can have attributes
  • All HTML tags can have attributes
  • You must start the HTML page with <!DOCTYPE html>
  • You do not have to start an HTML page with <!DOCTYPE html> but should
If you worked in a group, you can copy the answers from this page to the other group members. Select the group members below and click the button to share the answers.
You have attempted of activities on this page.
The Submit Group button will submit the answer for each each question on this page for each member of your group. It also logs you as the official group submitter.
PrevTopNext