Before you keep reading...
Runestone Academy can only continue if we get support from individuals like you. As a student you are well aware of the high cost of textbooks. Our mission is to provide great books to you for free, but we ask that you consider a $10 donation, more if you can or less if $10 is a burden.
Before you keep reading...
Making great stuff takes time and $$. If you appreciate the book you are reading now and want to keep quality materials free for other students please consider a donation to Runestone Academy. We ask that you consider a $10 donation, but if you can give more thats great, if $10 is too much for your budget we would be happy with whatever you can afford as a show of support.
13.7. Group Work: HTML Basics¶
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.
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.
Students will know and be able to do the following.
What is HTML?
What is a tag?
What are common HTML tags?
What is the structure of an HTML page?
Identify start and end tags
Fix incorrect HTML
Put HTML tags in order
Describe relationships between tags (parent, child, sibling)
HTML stands for Hyper Text Markup Language. It is used to create web pages. HTML describes the elements of the webpage such as the title, paragraphs, images, and links. For more information on HTML see the tutorial at https://www.w3schools.com/html/.
HTML uses tags to describe the elements of the document. Tags are enclosed in “<” and “>”.
HTML is not a programming language. It is a markup language for describing documents.
Click on the “Render” button to see the resulting web page.
Try adding a
h3 header to the HTML above after the paragraph.
Q-2: What happens to the text as the header level increases (h1, h2, h3)?
The first tag,
<!DOCTYPE html>, indicates that this is an HTML document.
While it is best to include this tag, the page will typically display
fine even if you don’t include it.
html tag is the root (start) tag for the document.
head tag contains meta information about the document such as the
body tag contains the items that will be displayed.
h1 tag is for a first-level (most important) header. There are additional types of headers:
p tag indicates a paragraph of text.
13.7.3. Tag Relationships: Parent, Child, Sibling¶
The HTML tag has
two children tags:
<body>. The head contains meta information
about the page including the page title. The body contains the elements
that are displayed in the page such as the headers and paragraphs.
Put the blocks into order to define a simple HTML page. Indent the blocks to show the structure.
Put the blocks into order to define a simple HTML page with a header and a paragraph in that order. Indent the blocks to show the structure.
In an HTML page the root element is the “html” tag. A root is the start of a structure. This type of structure
is called a tree. The
html tag has two children
body tags. These tags are called sibling tags since they share the same parent tag.
The parent for the
body tags is
html tag. The
body tag is the parent of the
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.