the Concept Attainment Model (teaching thinking skills across the curriculum) As demonstrated by:...

the Concept Attainment the Concept Attainment ModelModel

(teaching thinking skills across the (teaching thinking skills across the curriculum)curriculum)

As demonstrated by:As demonstrated by:Wendy Lewis, JoAnn Clark, & Jenny Wendy Lewis, JoAnn Clark, & Jenny

BremenBremen

XHTML coding:

Introduction to the

eXtensible ruleseXtensible 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

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

ContextContext High School, grades 10-12Web Design A (beginning)

ContextContext High School, grades 10-12Web Design A (beginning)

EEXXtensible tensible HHyperyperTText ext MMarkup arkup LLanguageanguage 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….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….

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.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. 

There are 3 types of tags.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. 

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 

ElementsElements – the first entry in a tag is the element which tells the browser what is going to happen -- <font

AttributesAttributes – 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 tagsClosing 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:

<img src=frog.jpg width=200 />

<img src=“frog.jpg” width=“200” />

<IMG SRC=“frog.jpg” width =“200” />

<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”>

This empty element is lacking closure!

Both the elements & attributes should be

lowercase

The values are missing

quotations…

<img src=“frog.jpg” width=“200” />

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

George the Frog 

 George the Frog 

 George the Frog 

 George the Frog 

...which one is it?

George the Frog 

 George the Frog 

 George the Frog 

 George the Frog 

CORRECT!

Value should be in quotations….size=“6”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. Lowercasea) All elements must be lowercase

b) All attributes must be lowercase

the eXtensible RULES: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”.

<color="white" HR width="60%" />

<hr width="60%" color="white" />

<hr color="white" width="60%">

<hr color=white width=60% />

Let’s look at the good & the Let’s look at the good & the ugly!ugly!

<hr color="white" width="60%" /><hr color="white" width="60%" />

<width="60%" HR color="white" />

<HR color="white" width="60%">

<hr color=white width=60% />

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?

<center>Hi</center>

<center>Hi</center>

<img src=tile.jpg />

<img src=“tile.jpg” />

Here They Are<center>Hi</center>


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 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…

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.

1) All elements must All elements must closeclose

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.

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.

2) All All attribute values must be in “quotations”

<hr width=“80%” color=“red” align=“center” />

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!This is what this tag would actually create on the webpage!

3) Lowercase

<hr width=“80%” color=“red” align=“center” />

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 required5. “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: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<center>Hi</center>


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 & ResourcesReferences & 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.

<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>

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…

<center> GECKO </center>

<center> GECKO </center> 

These elements get out of order… These elements get out of order…

That, my friends, is NOT nesting.That, my friends, is NOT nesting.

4) Feel like Nesting? Nesting?

Find the Correct Ones

<center>Hi</center>

the Concept Attainment Model (teaching thinking skills across the curriculum) As demonstrated by:...

Documents

Transcript of the Concept Attainment Model (teaching thinking skills across the curriculum) As demonstrated by:...