Irving Independent School District Smart Solutions

Student material · Assignment · Unpublished in Canvas

Day 6: HTML Headings + Structure

Points
5
Submission
upload, media recording
Canvas state
Unpublished

Intro to CS · Day 6 of 10

HTML Headings and Structure

Use headings and lists to make the page's organization visible in the code and on the screen.

  • Tool: CS Discoveries Unit 2, Lesson 3
  • Time: one class period
  • Turn in: structured-page screenshot, outline, and reflection

English

Words for today: heading · list · nesting

What to do

  1. Open Headings and Lists and complete the assigned levels.
  2. Make a short outline for your page: one page title, at least two section headings, and the points that belong under each section.
  3. Build the outline in Web Lab with one h1, two or more h2 headings, paragraphs, and at least one list.
  4. Check the nesting. The content for each section should sit under the heading that names it.
  5. Capture the code and preview together so both are readable.

If your code is not working

  1. Compare the heading order in your outline with the order in your HTML.
  2. If a list does not work, check the opening and closing tags around the list and each item.
  3. Change one tag at a time and watch the preview.

Before you submit

  • Upload the page screenshot and your short outline.
  • In the submission comment, complete the reflection.

Reflection

Write 2 or 3 sentences: "I used my h1 for ____. My h2 headings divide the page into ____ and ____."

Word bank: heading · list · nesting · h1 · h2 · section · outline

Español

Palabras de hoy: heading (encabezado) · list (lista) · nesting (anidación)

Qué hacer

  1. Abre Headings and Lists y completa los niveles asignados.
  2. Haz un esquema corto para tu página: un título, al menos dos encabezados de sección y los puntos que van en cada sección.
  3. Construye el esquema en Web Lab con un h1, dos o más encabezados h2, párrafos y al menos una lista.
  4. Revisa la anidación. El contenido de cada sección debe quedar debajo del encabezado que la nombra.
  5. Toma una captura del código y la vista previa juntos para que los dos se puedan leer.

Si tu código no funciona

  1. Compara el orden de los encabezados en tu esquema con el orden del HTML.
  2. Si una lista no funciona, revisa las etiquetas de apertura y cierre de la lista y de cada elemento.
  3. Cambia una etiqueta a la vez y observa la vista previa.

Antes de entregar

  • Sube la captura de la página y tu esquema corto.
  • En el comentario, completa la reflexión.

Reflexión

Escribe 2 o 3 oraciones: "Usé mi h1 para ____. Mis encabezados h2 dividen la página en ____ y ____."

Banco de palabras: encabezado · lista · anidación · h1 · h2 · sección · esquema