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

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

13.9.1. Table Tags¶

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

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

Q-2: Match each tag to its definition.

Read the information above and try again.

table
Used to create a table.
th
Used to specify a header (optional first row).
tr
Used to create a row in a table.
td
Used to identify data in a table.

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.

        <body>
---
    <table>
---
        <tr>
---
            <th>Country</th>
            <th>Year</th>
            <th>Unemployment Rate</th>
---
        </tr>
---
        <tr>
---
            <td>United Kingdom</td>
            <td>2017</td>
            <td>4.33</td>
---
        </tr>
---
    </table>
---
</body>

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.

        <body>
---
    <table>
---
        <tr>
---
            <td>United Kingdom</td>
            <td>2017</td>
            <td>4.33</td>
---
        </tr>
---
        <tr>
---
            <td>India</th>
            <td>2017</th>
            <td>3.52</th>
---
        </tr>
---
    </table>
---
</body>

13.9.2. Link Tag¶

Web pages can include hyperlinks to other web pages. They do this by including an anchor a tag which is also known as a link tag as shown below.

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

The start tag <a> contains an attribute href and value "https://www.w3schools.com/". The text of the tag is Visit W3Schools.com! which is the actual text of the link when it is displayed. If you click on the link you will be taken to the href value: https://www.w3schools.com/. The <a> tag has a closing </a> tag.

Render the HTML below.

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.

Render the HTML below.

Note

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

Q-7: Match each tag to its definition.

Read the information above and try again.

img
Tag to include an image.
div
Tag to define a division (section).
a
Tag to define a hyperlink (link)

Q-8: List the differences between the img tag and the a tag?

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.

Q-9: Click on all of the attribute names in the example HTML below.The attribute name is on the left side of the equal sign

<html>
    <head>
        <title>My First Page</title>
    </head>
    <body>
        <h1>The First Page</h1>
        <p>
            HTML is the language used to create web pages.
        </p>
        <a href="https://www.w3schools.com/"></a>
        <img src="https://i.ibb.co/WfcrzVn/beach.jpg" alt="A picture of a beach">
    </body>
</html>

Q-10: Click on all of the attribute values in the example HTML below.The attribute name is on the left side of the equal sign

<html>
    <head>
        <title>My First Page</title>
    </head>
    <body>
        <h1>The First Page</h1>
        <p>
            HTML is the language used to create web pages.
        </p>
        <a href="https://www.w3schools.com/"></a>
        <img src="https://i.ibb.co/WfcrzVn/beach.jpg" alt="A picture of a beach">
    </body>
</html>

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.

Render the HTML below.

Q-12: Match each term to its definition.

Read the information above and try again.

span
Tag to define an inline style or order.
div
Tag to define a block or section in an HTML page.
CSS
Is used to define styles to change how HTML elements are displayed.

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.

Render the HTML below.

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

Q-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.

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.

You have attempted of activities on this page