SUCCEED

10 minutes

Focus and Review

Ask the students to recall the first HTML lesson

• What are markup languages?
• What are the specific languages we worked learned about?
• What are the rules of XML?
  • Opening and closing tags, content, nesting, and attributes.

Tell the students:

• Today, we are going to be learning how to write web pages using Hyper Text Markup Language, or HTML.
• HTML is a more specific version of XML, so all the rules from XML still apply.
• But in HTML, there are specific tags that you use to format things in certain ways. We're going to be learning some of those tags.
• HTML represents the content and format of a web page. In another class, we'll talk about CSS, a language that works with HTML to define how a web page will look.
• HTML's simplicity makes creating or editing a web page easy.

30 minutes

Teacher Input

Tell the students:

• Make sure you have simplest.html open in your editors. You will be adding some HTML tags to this page as you learn them.
  • Open TextWrangler (or your text editor)
  • Open simplest.html in TextWrangler (drag it onto TextWrangler's icon in the dock). The code should look like what is on the projector.
  • Also open simplest.html in a browser (drag it onto the Firefox icon in the dock).
• You won't have to remember all this starting code, such as the code in the DOCTYPE clause, every time you create a new page.
• What you should notice is this:
  • Everything on the page is nested inside an html tag. This tag is called the "root" tag because everything else grows out of it.
  • The html tag always has two child tags: head and body.
  • Looking at your page so far, can you guess what the head and body do?
  • The body contains everything that should show up inside the (white) frame of the browser window - all the page content.
  • The head holds things that relate to the page, like the title, but that don't show up inside the frame, or may not show up anywhere.
• Now, we'll start adding items to the body section of the document so that they show up on our page.

Guided/Independent Practice

1. Header text. If you want to make header text for something, like a title of a section on your page, you can use <h1>, <h2>, <h3>, <h4>, or <h5> like this:

    
     <h1>My page title</h1> 
     <h2>Subtitle</h2> 
   

   As you may have figured, h1 is the largest, and h5 is the smallest.
2. Paragraphs. To make a paragraph of text, use the <p> tag:

   <p>Blah blah blah</p>

   Within a paragraph, you can use <i> to italicize, or <b> to bold.
3. Links. To make a hyperlink to some other page, use the <a> tag, like this:

   <a href=&quot;http://nsdl.org&quot;>National Science Digital Library</a>
   

   This means link the text, "National Science Digital Library," so that when you click on it, you go to http://nsdl.org.
4. Images. To insert an image into your page, use the <img> tag, like this:

   <img src=&quot;myimage.gif&quot; alt=&quot;My Image&quot; />
   

   The image tag requires two attributes:
   • src tells where to find the image - a filename or web URL.
   • alt provides alternate text for someone who can't see the image.
   There is something else special about this tag: there is only one of it. You can create a single tag that opens and closes by writing

   &quot;<tag ... />.&quot;
   

5. Line breaks. If you simply want a line break in your text (but not a new paragraph), use the <br /> tag. This is another example of a tag that is opened and closed at the same time.
6. Lists. To make an ordered list (i.e., a numbered list), use <ol>. For an unordered list, use <ul>.

   Inside your <ol> or <ul> tags, you can make a list item using <li>. Inside your list item, you can put text, another paragraph, another list, or other tags that could go in the body. Here is a sample ordered list:

   <ol>
   	<li> Read all this stuff about HTML.</li>
   	<li> Practice writing your own.</li>
   	<li> Take the challenge!</li>
   </ol>
   

   A great place to play around with lists to see how they work is the page below. Edit the HTML in the left-side box, and see what happens on the right side when you click the "Edit the text and click me" button. http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists4
7. Tables. To make a table, use <table>. A table is a grid of rows and columns for displaying information. You define a table by constructing rows (tr tags) inside of a table tag, and then a number of a header (th tags) or data (td tags) columns/cells inside of each row. http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables

5 minutes

If there is time, allow students to write and format some content for web pages about themselves.

Quality Check

• Now that you have written some HTML, we have to make sure that your markup is valid. If it is not, it may not work in all web browsers.
• To check, go to the following website: http://validator.w3.org
• Click on "Validate by Direct Input"
• From your editor, copy all of your HTML, then paste it into the validator's box and click "Check."
• The resulting page will be green if your HTML is valid.
• If you have errors, the validator will tell you exactly where they are.
• If there is time, lead a quick tutorial on validating a page.

5 minutes

Closure

Ask the students to review with you the key points from the lesson:

• What are the two main sections of an HTML page (the children of the "html" tag)?
• What are some examples of HTML tags?

optional

If there is extra time:

• Talk about divs and spans and what they are used for

Additional Reference Materials

There is an excellent HTML tutorial on the web at: http://www.w3schools.com.html.

On the left side of the screen, there is a list of contents. You can stick to the "HTML Basic" section, and you don't need to read everything there. Focus on "HTML Basic Tags," "HTML Links," "HTML Tables," "HTML Lists," "HTML Forms," "HTML Images," and "HTML Background." The rest of the pages you can skim.

If you see "Examples" on any of your pages, click on the link and try playing around with them-- they're really fun and helpful for learning.

A great review/summary page on this site for quick reference is: http://www.w3schools.com/html/html_quick.asp