Web Development 101

In this lesson, students are introduced to headings and images. Activities include solving challenge activities; building three different DIY (do-it-yourself) projects: a poster, poem, and photo gallery; and taking an 8-question multiple-choice quiz about "Lesson 2: Headings and Images" concepts. Note: Answers to all challenge activities (9 total) are located below the "Standards" section in this teacher guide.

HTML Elements

• < h1 > to*< h2 > :* There are six levels of HTML headings, where h1 is the largest heading and h6 is the smallest heading.
• < em > : Adds emphasis to the text.
• < strong > : Adds strong emphasis to the text.
• < img > : Adds an image.

HTML Attributes

• src: Tells the web browser the location of the image relative to the web page.
• alt: Contains a description of the image in text form.
• width: Specifies the width of the image displayed.
• height: Specifies the height of the image displayed.

CSS Styles

• font-family : Sets the font family to the specified font family name (e.g., monospace).
• font-size: Sets the font size to the specified pixel size (e.g., 14px).
• font-style: Sets the font style to the specified style (e.g., italic).
• font-weight: Sets the font weight to the specified weight (e.g., bold).
• text-align: Sets the text to the specified alignment (e.g., right).
• border-width: Sets the width of the border to the specified value (e.g., 4px).
• border-style: Sets the style of the border to the specified style (e.g., dotted).
• border-color: Sets the color of the border to the specified color (e.g., teal).

• Heading: A word, phrase, or sentence that's typically used at the beginning of a section and explains or gives a title to that section. In HTML, headings are defined with h1 to h6 tags.
• Image: A digital version of a picture. Common image formats include PNG, JPEG, GIF, BMP, and SVG.
• Typography: The style and appearance of text. Here is an example of how the same paragraph can look different by using different fonts and font sizes:

Studnets will...

• Apply coding concepts to complete provided challenge activities
• Apply concepts from this lesson to create a poem, poster, and photo gallery

• Computers or laptops (1 per student) with student account access to Tynker.com

• Ask students, "What do you do if you notice your code isn't working as expected, but you don't know how to fix it?" (Suggested answers: Ask a neighbor for help, check your spelling, check your syntax, use completed code from other examples as a reference)
• Optional: Get students excited for today's lesson by showing them the provided Project examples in "Modules 11-13."

• In this module, students will learn one new concept:
  • Heading Elements- Headings can be used to make text content on a web page stand out. There are six levels of heading elements in HTML, from h1 to h6, where h1 is the largest heading and h6 is the smallest heading:
    
• Here is an example of HTML heading syntax:

• Tell students to click the "Next" button (located at the bottom of the page) to move on to the next module.

• Direct your students' attention to the "Nested Headings Example," and point out how the different headings are used to show a table of contents.
• This module includes a challenge activity, where students will need to add the correct heading style to each line.
  • If students are struggling, check that they're carefully reading the listed criteria (e.g., "Use h1 for the Table of Contents").
  • If students continue to struggle, ask them to use the code in the "Nested Headings Example" as a reference.
  • Note: Answers to all challenge activities are located below the "Standards" section in this teacher guide.

• In this module, students will learn about using different text fonts using "font-family."
• Students are introduced to two new concepts:
  • Generic Fonts- Changing a font will change how the text looks:
    
  • Emphasize to students that they should select a font family (e.g., serif, sans-serif, fantasy) that works best for their web page. Here’s an example that uses the font family sans-serif:
    
  • Using Fonts by Name- The programmer has the option of using a very specific font for their web page. Here’s an example that uses the font family Arial:
    
• Check that students are changing the font family value to "monospace" in the "Changing Font Family" exercise.
• Optional: Ask students to change the font family from Arial to Impact in the "Changing a Font by Name" exercise. How did this change affect their code's output?
• This module includes a challenge activity. Students will need to change the h1 font from Arial to Palatino , add a style for the paragraph p element, and set the font family to Sans-Serif .

• In this module, students will learn how to change the text font size.
• Students are introduced to one new concept:
  • Font Size Syntax- Students can change the text size by using the CSS property font-size. For example, if you wanted to set the font size to 14 pixels, your syntax might look like this:
    
• Check that students are modifying their code to make the font size bigger and smaller in the "Changing Font Size Example" exercise
• To solve the challenge activity, students will need to double the font size of h1 and change the p font size to match the size of the h1 element.
• Are students struggling with the challenge activity? Give a hint: Tell them to add code inside the style tags. Also, ask students, "What value should we set our h1 font size to if we're doubling its size?" (Answer: 64px;)

• Students are introduced to three new concepts:
  • Font Style- The font-style property is used to change how the text looks. For example, you can make your font look slightly slanted to the right by setting the property value to italic:
    
  • Font Weight- The font-weight property in CSS can change the appearance of characters. For example, a bold font weight makes the text have thicker characters:
    
  • HTML Equivalents- The em element can be used to emphasize letters, giving the text italic characters. The strong element can be used to bold letters, giving the text thicker characters. Here's an example of the strong and em element syntax:
    
• Here's an example of output that uses the em and strong elements:
  
• Check that students are changing the font style (e.g., normal, italic) and weight (e.g., normal, bold) of other values in the "Changing Font Style and Weight" exercise.
• Check that students are adding opening < em > and closing < /em > tags in the "Using em and strong Elements" exercise. Here's what their code might look like:

• Students are introduced to two new concepts:
  • Image Element- The img (image) element can be used to add an image to a web page. Note: The img element does not require a closing tag.
  • Src Attribute- To load an image, the src attribute must be included. This tells the web browser the location of the image relative to the web page. Here's a syntax image example:
    
• To solve the challenge activity, students will need to add their own image using the *img element. If they are struggling to find an image, tell them to use the "tree-sunset-thumbnail.jpg" image or "/image/tynker-logo.png" image.

• Students are introduced to two new concepts:
  • Alt Attribute- The alt attribute contains a description of the image in text form.
  • Width and Height Attribute- Use the width and height attributes to change the size of the image displayed on a web page. Here's a syntax image example that uses alt, height, and width attributes:
    
• Check that students are changing the width and height attributes in the "Using the Width and Height Attributes" exercise. For example, what happens when they change the height value to "200" or "20"?
• To solve the challenge activity, students will need to add two or more images with different size and alt attributes. Give a hint: Tell students to use the code in the "Using the Width and Height Attributes" exercise as a reference.

• Students will learn that they can add multiple images and separate them using the br element.

• This module introduces two new concepts:

  • Image Formats- Most browsers support a wide range of image formats such as PNG, JPEG, GIF, BMP, and SVG.

  • Errors Loading Images- Some browsers may not be able to display an image on a web page for reasons such as the following: the src attribute is not specified, the image source file is corrupted, or the image format is not supported by the browser.

• Are students struggling with the "Show Images on Separate Lines" challenge activity? Give a hint: Tell them to add a br element between images.

• Are students struggling with the "Adding Text Descriptions to Images" challenge activity? Give a hint: Tell them to type a short image description between the p tags.

• Students are introduced to one new concept:

  • Aligning Content- Students can change the way text is aligned (e.g., left, center, right) using the text-align CSS property. Here’s a syntax image example:
    

• Check that students are changing the text-align to right in the "Aligning Text" exercise. Answer

• Are students struggling with the challenge activity? Give a hint: Point out that only the h1 and h2 headings are declared inside the tags--students need to include code for the h3 heading.

• Students will learn how to use the border property to draw a box that surrounds elements.

• This module introduces two new concepts:

  • Border Style- Students are provided a list of 9 different border style values and visual examples. Here's a syntax image example:
    
  • Border Color- Students will learn how the color property affects more than just text color--this property can also affect the border color. Here's a syntax image example:
    

• Check that students are changing the value of the border-style property in the "Using Border Style" exercise. Here's a list of different values they can choose from: dotted, solid, double, insert, outset. Here's an example of code with a paragraph element's border style set to dotted:

• This module includes a challenge activity where students will need to change the color of the border from "purple" to "teal." If students are struggling, direct their attention to this line of code:

• In this DIY (do-it-yourself) project, students will apply concepts from this lesson to create a poster web page that includes a title and image using the Text Code Editor. Note: Students are provided step-by-step directions in the Text Code Editor "Tutorial" tab, which will guide them through the project.
• Are students struggling to get started? Ask them to look at the provided example for inspiration and sketch out their project idea before they start coding.Did students finish early? Direct their attention to "Step 7" in the "Tutorial" tab, which provides two different bonus challenges.
• Here's a screen image sample of what their project might look like:

• In this DIY project, students will create an acrostic poem web page of their name using the Text Code Editor. Note: Students are provided step-by-step directions in the Text Code Editor "Tutorial" tab, which will guide them through the project.
• Are students struggling to get started? Ask them to create an annotated sketch of their project before they start coding. Make sure they include features such as headings, images, font size, and font family.
• Did students finish early? Ask them to create an acrostic poem of the name of their pet or their favorite animal. They can also check out the bonus challenges in "Step 7" of the "Tutorial" tab.
• Here's a screen image sample of what their project might look like:

• In this DIY project, students will create a web page of their favorite photos using the Text Code Editor. Note: Students are provided step-by-step directions in the Text Code Editor "Tutorial" tab, which will guide them through the project.
• Point out to students that they can select images from the Text Code Editor's Media Library by selecting this image button:

• If students finish early, ask them to explore the bonus challenges in "Step 7" of the "Tutorial" tab. Activities include adding a paragraph description for each picture; experimenting with different typography, backgrounds, and photos; and creating a black and white photo gallery.
• Here's a screen image sample of what their project might look like:

• Students will be asked 8 quiz questions to review concepts from this lesson.

More Practice:

• Ask students to work with a partner and brainstorm at least three different ways they can improve one of their DIY projects from today's lesson. Are there more colors they can add? What about aligning the text differently? Next, ask your students to make at least two improvements to one of their DIY projects using Tynker.