SUCCEED

10 minutes

Overview

Tell the students:

• There are many types of computer languages.
• Some are procedural languages that specify a set of steps-a "procedure"-for the computer to carry out.
• Do you know some examples of procedural languages? - C, Java, etc.
• Another type of language is a markup language (ML), which defines a set of data.
• MLs are popular because they are powerful and flexible, yet simple.
• People can read, write, and understand them quickly and easily.
• Do you know any examples of markup languages? - XML, HTML, etc.

Tell the students:

• Today, you will be learning about markup languages (MLs).
  • First, we will talk about how MLs work.
  • Then, we will learn the rules of a particular ML: XML.
  • Finally, we will spend most of our time learning HTML, which is actually a more specific version of XML.

How MLs Work

• As an example, let's say that I'm writing a newspaper article.
• How can an ML store all the data that represents the article?
• There are two basic sets of information I need to represent. Any ideas?
  • Content: The text of the news article, title, byline, and date.
  • Formatting: Which part of the text is the title vs. the article? where are the paragraph breaks?
• MLs represent these two sets of information as follows:
  • Content: In an ML, you just write content as plain text. Easy!
  • Formatting: To format a piece of content, you surround it with markup tags. For instance, if the author of the article was Bob, I might surround his name with "author" tags:

     <author>Bob</author> 

  • The first tag means, "I'm about to tell you who the author is."
  • The closing tag means, "I'm now finished telling you who the author is."

Tell the students:

• The example I just showed was actually a particular ML: XML.
• There are only a few rules for writing XML, but they cannot be broken.
• Making the smallest mistake - a misspelling or a missing slash - will cause the computer not to understand your file.

Tell the students, let's look at the specific rules:

• Opening tags consist of a tag name (without spaces) surrounded by angle brackets.

  <tag>

• Closing tags are the same, except they have a forward slash before the tag name.

  </tag>

• Every tag that is opened must be closed.
• Tags can be nested, but must be opened and closed in the correct order. For example:

  • <a><b>Hello</b></a>

    is correct

  • <a><b>Hello</a></b>

    is not correct (because b is no longer nested inside a)
• Tags can have modifying information called attributes. The attribute only shows up on the opening tag, like this:

  <tag attributeName=&quot;attributeValue&quot;></tag>

• With attributes, you have an attribute name, an equals sign, and then an attribute value in quotes. We'll use attributes later. Here are some more examples:

  • <span id=&quot;5&quot; class=&quot;regular&quot;>content</span>

  • <a name=&quot;myName&quot;></a>

• XML is case-sensitive (upper and lower case are two different things).

Write a few simple examples of markup language errors on the board, and let the students tell you how to correct them.

20 minutes

Independent Practice (if time permits)

• Create a new text file (use TextWrangler in the Applications folder: click on "Finder" at the bottom of the screen, then "Applications" in the left bar. Find TextWrangler and double-click it.)
• Get the sample XML and paste it into TextWrangler, then save the file as something ending in ".xml" on the Desktop.
• Open Firefox from Applications
• Find your .xml file on the desktop and drag it onto the Firefox window.
• If your XML file shows up in purple and black text in the browser, you know you have followed the rules of XML. If you get a yellow screen, you have broken the rules.
• Make some modifications to the file in TextWrangler. Save your file again, and reload it in Firefox. See if you can break the file and fix it again, and see what else you can add and still make it "work" (try adding new tags, new attributes, etc.)

20 minutes

Discussion

What is HTML?

Tell the students:

• Probably the best-known ML is HyperText Markup Language (HTML), which is used to write web pages.
• 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.

Tell the students:

• Here is the simplest HTML file you can have.
• You can see clearly that it is a subset of XML - it has all the features we talked about from XML: opening and closing tags, content, nesting, and attributes.
• Ask the students to point out these different features of the page.

Guided Practice

Load a Sample HTML Page

• What do you expect a web browser to do with the above file?
• Try this:
  • 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).
• What from the HTML do you see displayed in the browser?
• Try changing the title of the page in your editor and pressing "Reload" in your browser.

10 minutes

Independent Practice

Tell the students:

• Now that you know how to edit an HTML file, try changing some of the text in the HTML document. Try adding text in different locations in the file.
• Every time you make a change, save your file in TextWrangler and then Reload your file in the web browser. Pay close attention to what the effects of your changes are.

Sample Web Page

10 minutes

Closure

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

• What are markup languages?
• How and when are they used?
• How do they work?

Now you know the general rules for how markup languages (XML and HTML in particular) work. In the next lesson, we will learn what HTML tags you can use to format your content in different ways.