Skip to main content

Python for Everyone: The PreTeXt Interactive Edition

Section 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 1 .

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.

Checkpoint 13.9.2.

Click on the “Render” button to see the resulting web page.
<!DOCTYPE html>
<html>
    <head>
        <title>Page with Table</title>
    </head>
    <body>
        <h1>The First Page</h1>
        <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>
            <tr>
                <td>India</td>
                <td>2017</td>
                <td>3.52</td>
            </tr>
        </table>
    </body>
</html>

Checkpoint 13.9.3.

Checkpoint 13.9.4.

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.

Checkpoint 13.9.5.

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.

Checkpoint 13.9.7.

Render the HTML below.
<!DOCTYPE html>
<html>
    <head>
        <title>My First Page</title>
    </head>
    <body>
        <p> The img tag is used to include images in web pages.</p>
        <img src="https://i.ibb.co/WfcrzVn/beach.jpg" alt="A picture of a beach">
    </body>
</html>

Note 13.9.8.

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

Checkpoint 13.9.9.

Checkpoint 13.9.10.

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

Checkpoint 13.9.11.

Checkpoint 13.9.12.

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.

Checkpoint 13.9.13.

Render the HTML below.
<!DOCTYPE html>
<html>
    <head>
        <title>My First Page</title>
        <style>
            div {
                background-color: #EAF0F6;
                color: #33475B;
                border: 3px solid #00A4BD;
                padding: 5px;
            }
            span {
                 background-color: #F6FF33;
            }
        </style>
    </head>
    <body>
        <div> A div is a division or section in HTML.  It is a container for other HTML elements.
            <p> First paragraph </p>
            <p> Second <span>paragraph</span> with a span in it.</p>
            <p> Third paragraph</p>
        </div>
    </body>
</html>

Checkpoint 13.9.14.

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.

Checkpoint 13.9.15.

Render the HTML below.
<html>
    <head>
        <style>
             p.warning {
                 color: red;
             }

             p.large {
                 font-size: 150%;
             }
       </style>
   </head>
  <body>

      <h1>Demo using CSS classes</h1>
      <p>This is a normal paragraph</p>
      <p class="warning">This paragraph will be red.</p>
      <p class="warning large">This paragraph will be red and in a larger font-size.</p>

  </body>
</html>
Change the class warning to use an orange color instead and render the HTML again.

Checkpoint 13.9.16.

    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.
<div class="runestone sqcontainer %(optclass)s"> <div data-component="groupsub" id=html_more_groupsub data-size_limit=3> <div class="col-sm-6"> <select id="assignment_group" multiple class="assignment_partner_select" style="width: 100%"> </select> </div> <div id="groupsub_button" class="col-sm-6"> </div> <p>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.</p> </div> </div>
https://cspogil.org/Home
<Prev^TopNext>
Authored in PreTeXt
Powered by Runestone