the Concept Attainment Model (teaching thinking skills across the curriculum) As demonstrated by: Wendy Lewis, JoAnn Clark, & Jenny Bremen XHTML coding: Introduction to the eXtensible rules

CONCEPT: applying the eXtensible rules to HTML code RULE: XHTML pages must be well formed with critical structure, and must following the “critical attributes” CRITICAL ATTRIBUTES: All tags must close All attribute values must be in quotations Lowercase: All elements are lowercase All attributes are lowercase Context High School, grades Web Design A (beginning)

 EXtensible HyperText Markup Language  Originally aimed to replace HTML  almost identical to HTML 4.01  a stricter and cleaner version of HTML  HTML defined as an XML application  a W3C Recommendation as of the year 2000 Before you continue you should have a basic understanding of HTML and the basics of building web pages. XHTML is simply a stricter and cleaner version of HTML. XHTML is….

You have a basic understanding of HTML coding, we are now going to add the eXtensible rules to clean up your code. Some logistical information will help you decipher the examples on the following pages…. 1.Based on the following examples, you are going to define 3 of the main coding rules. We will add on the other rules at the conclusion of the lesson. 2.You can assume that file names that have been used for images and links are valid, those are not “tricks”. 3.When you see xxx – that represents text that would appear on the web page. It is the text that will be formatted by the surrounding tags.

There are 3 types of tags. Element tags – Begin an element section and can include attributes Closure tags – begin with a slash, they end the section started by the element tag Empty tags -- a stand alone tag that does not start an element and end it later. These tags close at the end. There are 3 types of tags. Element tags – Begin an element section and can include attributes Closure tags – begin with a slash, they end the section started by the element tag Empty tags -- a stand alone tag that does not start an element and end it later. These tags close at the end. On your codepage, there are only 2 things. There are tags and text. 1.TEXT actually appears on the webpage; 2.TAGS talk to the browser, and tell it how to present the text On your codepage, there are only 2 things. There are tags and text. 1.TEXT actually appears on the webpage; 2.TAGS talk to the browser, and tell it how to present the text

GECKO Elements Elements – the first entry in a tag is the element which tells the browser what is going to happen -- <font Attributes Attributes – attributes can be added to the element tag, (but are not required) and even several attributes can be added, each one separated by a space, attributes can be in any order. -- size= or color= Values Values – when an attribute is selected to change, the value tells it what to change to -- “7” or “red” Closing tags Closing tags – the closing tag that begins with the slash ends the action started by the original element. Closing tags do not include attributes. – GECKO

For the following slides, we will focus on the code behind this webpage:

The frog image here is represented by the tag above. The tags below represent the same image, but are not eXtensibly correct. How is each one different from the tag above?

This empty element is lacking closure! Both the elements & attributes should be lowercase The values are missing quotations…

Here’s the part of the page we will be coding this time:

George the Frog...which one is it?

George the Frog CORRECT! size=“6” Value should be in quotations….size=“6” & Tags are lacking closure …. & Closing tags don’t need attributes Lowercase!!!!

1) All elements must close 2) All attribute values must be in “quotations” 3) Lowercase -- All elements must be lowercase All attributes must be lowercase

1. All elements must close 2. All attribute values must be in “quotations” 3. Lowercase a) All elements must be lowercase b) All attributes must be lowercase the eXtensible RULES: For the purpose of this introductory lesson, we are going to focus on the first 3 rules only, as the others don’t really apply to our pages yet. 4. Proper nesting is required 5. “id” replaces “name” attributes 6. No attribute minimization 7. Documents must have only 1 root element 8. Pages must be “well-formed” 9. The XHTML DTD defines mandatory elements

Those are the rules…. Now, who’s ugly? Here are 1 example of “clean” code, and 3 examples of “ugly” code. Tell why each of the 3 are “ugly”.

Let’s look at the good & the ugly! Attributes are not in quotations! All elements must close… even “empty elements” such as IMG tags The element must pre-cede the attributes, AND all tags must be lowercase!

Find the eXtensibly Correct Codes: 2 are correct, 2 are incorrect… how are they different? Hi

Here They Are Hi In here, the “b” should not be capitalized and the nesting order is wrong. CORRECT! In here, the title, “tile.jpg”, should be in quotations. CORRECT!

Oops You Did It Again which of these are correct?

Here’s a look at a webpage we will be looking at along with the clean XHTML code page…

Every tag that opens, must close when the element is complete. {the / tells html to close the tag} There are no attributes in a closing tag. All elements must close 1) All elements must close Empty Tags: Empty tags are not allowed in XHTML. For instance, the and tags should be replaced with and. A few other tags (like the tag) were suffering from the same problem as above. We don’t close the tags with, but with /> at the end of the tag. is a properly closed img tag. For example: You can change the color of only one word. Or you can make bold an entire sentence. But both tags are closed when the action is completed. An interesting fact: Originally, introduction of the tag produced a problem with Netscape that misinterpreted the tag. We don't know why, but changing it to worked fine (with a space before the slash). Now, either tag is acceptable.

All 2) All attribute values must be in “quotations” As you know from HTML, tag attributes (seen in blue) are combinable – meaning you can add attributes, or arrange in any order, in the same tag. Attributes are simply separated by a space. As you also know from rule #1, the hr tag is an “empty element”; therefore, it must have closure at the end. = each attribute is set to a value… each value is listed in quotations This is what this tag would actually create on the webpage!

3) Lowercase All elements and attributes must be in lowercase. This is critical to compatibility with XML code. Earlier versions of HTML preferred UPPERCASE attributes and in some cases UPPPERCASE elements, but was not necessarily case-sensitive. XHTML is…. As you also know from rule #1, the hr tag is an “empty element”; therefore, it must have closure at the end. = each attribute is set to a value… each value is listed in quotations

1. All elements must close 2. All attribute values must be in “quotations” 3. Lowercase a) All elements must be lowercase b) All attributes must be lowercase 4. Proper nesting is required 5. “id” replaces “name” attributes 6. No attribute minimization 7. Documents must have only 1 root element 8. Pages must be “well-formed” 9. The XHTML DTD defines mandatory elements the eXtensible RULES: For the purpose of this introductory lesson, we are going to focus on the first 4 rules only, as the others don’t really apply to our pages yet.

Here They Are Hi In here, the “b” should not be capitalized and the nesting order is wrong. CORRECT! In here, the title, “tile.jpg”, should be in quotations. CORRECT!

References & Resources Allen, Janet. Words, Words, Words, Teaching Vocabulary in grades York, ME: Stenhouse Publishers, Arends, R.I. (2000). Learning to Teach (5 th Ed). McGraw-Hill Higher Education. Gallenstein, Nancy L.. "Createive Discovery through Classification." Teaching Children Mathematics Sep Jan 2007 Johnson, J., Carlson, Susan (1992). Developing Conceptual Thinking: The Concept Attainment Model”. Clearing House 66 (2): W3schools website guide Wyman, Todd. McCleery, Jennifer. Tindal, Gerald. Using Concepts to Frame History Content. The Journal of Experiment Education 74(4):

RESOURCES CORRECT!! WRONG!: The XHTML specification defines that the tag names and attributes need to be lower case. WRONG!: Non-empty elements must have an end tag. CORRECT !!

LIFO: Last in, first out… The BOLD element is the last element opened, so it is the first one closed… etc. That, my friends, is nesting. Let’s look specifically at this section of the page… GECKO These elements get out of order… That, my friends, is NOT nesting. Nesting? 4) Feel like Nesting?

Find the Correct Ones Hi