the Concept Attainment Model (teaching thinking skills across the curriculum)

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

Context High School, grades 10-12 Web Design A (beginning) • 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

What You Should Already Know 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. What is XHTML? XHTML is…. • 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

Things you should know before we start... 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…. • 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. • You can assume that file names that have been used for images and links are valid, those are not “tricks”. • 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.

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

 GECKO  Elements – the first entry in a tag is the element which tells the browser what is going to happen -- <font 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 – when an attribute is selected to change, the value tells it what to change to -- “7” or “red” Closing tags – the closing tag that begins with the slash ends the action started by the original element. Closing tags do not include attributes. – <fontsize=“7”color=“red”> GECKO

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

<img src=“frog.jpg” width=“200” /> 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? <img src=“frog.jpg” width=“200”> <IMG SRC=“frog.jpg” width =“200” /> <img src=frog.jpg width=200 />

<img src=“frog.jpg” width=“200” /> This empty element is lacking closure! <img src=“frog.jpg” width=“200”> Both the elements & attributes should be lowercase <IMG SRC=“frog.jpg” width =“200” /> <img src=frog.jpg width=200 /> The values are missing quotations…

Try it Again! Here’s the part of the page we will be coding this time:

only ONE of these is correct ...which one is it? A George the Frog B George the Frog C George the Frog D George the Frog

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

Ready for the RuLes? 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

the eXtensible RULES: • All elements must close • All attribute values must be in “quotations” • Lowercase • All elements must be lowercase • All attributes must be lowercase • Proper nesting is required • “id” replaces “name” attributes • No attribute minimization • Documents must have only 1 root element • Pages must be “well-formed” • The XHTML DTD defines mandatory elements 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.

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”. <hr color=white width=60% /> <hr color="white" width="60%"> <hr width="60%" color="white" /> <color="white" HR width="60%" />

Let’s look at the good & the ugly! Attributes are not in quotations! <hr color=white width=60% /> All elements must close… even “empty elements” such as IMG tags <HR color="white" width="60%"> clean! <hr color="white" width="60%" /> The element must pre-cede the attributes, AND all tags must be lowercase! <width="60%" HR color="white" />

Find the eXtensibly Correct Codes: 2 are correct, 2 are incorrect… how are they different? <center>Hi</center> <center>Hi</center> <img src=tile.jpg /> <img src=“tile.jpg” />

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

Oops You Did It Againwhich of these are correct? <color=“red” background=“ashun_pride.gif” /> <HR WIDTH=“90%” COLOR=“888888” /> <img src="shades.jpg“ width="300px" height=275px />

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

1) All elements must close 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. For example: You can change thecolorof only one word. Or you can make bold an entire sentence. But both tags are closed when the action is completed. Empty Tags: Empty tags are not allowed in XHTML. For instance, the <hr> and tags should be replaced with <hr /> and . A few other tags (like the <img> tag) were suffering from the same problem as above. We don’t close the <img> tags with </img>, but with /> at the end of the tag. <img src=“tile.jpg” /> is a properly closed img tag. 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.

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. <hrwidth=“80%”color=“red”align=“center”/> 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…. <hrwidth=“80%”color=“red”align=“center”/> 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

the eXtensible RULES: • All elements must close • All attribute values must be in “quotations” • Lowercase • All elements must be lowercase • All attributes must be lowercase • Proper nesting is required • “id” replaces “name” attributes • No attribute minimization • Documents must have only 1 root element • Pages must be “well-formed” • The XHTML DTD defines mandatory elements 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 In here, the “b” should not be capitalized and the nesting order is wrong. <center>Hi</center> CORRECT! <center>Hi</center> In here, the title, “tile.jpg”, should be in quotations. <img src=tile.jpg /> CORRECT! <img src=“tile.jpg” />

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

Answers!! CORRECT!! <body background="black.jpg" vlink="ffffff" link="ffccC1"/> <body bg color=“ffffff”> </body> <hr size="7" color="white" width="70%“/> <a href="resources.html">RESOURCES</a> 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 !!

4) Feel like Nesting? Let’s look specifically at this section of the page… 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. <center> GECKO </center> These elements get out of order… That, my friends, is NOT nesting. <center> GECKO </center>

Find the Correct Ones <center>Hi</center> <center>Hi</center> <img src=tile.jpg /> <img src=“tile.jpg” />

the Concept Attainment Model (teaching thinking skills across the curriculum)