Any web page can be broken into 3 parts.
- The content
- The appearance
- The behavior
The content is the words and pictures on the web site that give the page meaning. Not all words and images are content. For example the logo on ACME.com is not relevant to the content of the page. If the company changes its logo to something totally different is would not really change the meaning of the page. Articles and images relating to the article are content. If the article changed then so would the meaning. Titles, headers, footers are all examples of content. Content is controlled by HTML
Appearance is how the page looks. Colors, logos, background images, and even page layout are all aspects of the page’s appearance. Appearance is controller by CSS. We will cover CSS in the later lessons.
Then there is how the page behaves. Signing into a site, searching and submitting forms are all behaviors. Behavior is controlled by JavaScript. (JavaScript is an advanced lesson.)
HTML
HTML defines and describes content. Look at the following lines:
- Summer
- <FirstName>Summer</FirstName>
Line 1 is only the content. Line 2 is the content and a description of the content. Line 2 uses tags to describe the content and the tag <FirstName> gives the content Summer additional meaning.
HTML is a set of predefined tags that describe content on a web page. It tells the browser which parts of the content is the title, body of the web page, paragraphs, images, and links. But before we start diving into the different tags, we need to understand a little more about how tags work.
Tag Rules
Open and Close
A tag wraps content, so we need an opening tag and a closing tag. The open and close tags must have matching names and the closing tag must have ‘/’ before the name. <xyz> is an open tag and </xyz> is a closing tag.
<title> This is a web page! </title>
Some tags do not have any content (we will see why in a minute). For these types of tags we don’t need a open and close tag. These types of tags look like :
- <lineBreak/>.
- <image />
notice that we don’t have any content to wrap. These types of tags are more like flags and describe parts of the web page that can’t really be wrapped in open and close tags. Take the <image/> tag as an example. It tells the browser that an image goes here in the document. But <image/> doesn’t define which image! We need attributes to do that.
Attributes
Tags can have attributes that give us even more information about the content. We can give our image tag even more information by including which image to display.
<image source=”myFavoritePic.png” />
We added more information to our tag. Now the browser knows what images belongs in the web page. Tags can have many attributes. The following image tag has three – source, width and height. The browser will use this information when constructing the web page.
<image source=”myFavoritePic.png” width=”50” height=”50”/>
Nesting and Context
Tags by themselves add a lot of information to the content of a web page. But what really makes tags so powerful is how they work together. Lets say we were writing a letter and wanted to describe the letter using tags. We might need a <header>, <body>, <paragraph>, <signature>, and a <footer>. Perhaps our letter might look like the following:
<Letter date=”7/1/2012”>
<Header>Dear Mom and Dad, </Header>
<paragraph>Summer camp has been fun. I have been having a great time staying at the hospital near the camp. But don’t worry about me I escaped from the mother bear without a scratch.</paragraph>
<image source=”MeWithMyCast.png” />
<paragraph>And when I fell off the cliff, on account of that bear, I only got a few bumps and bruises. The real danger in the woods is Susie Jones – she broke my pinkie finger when <bold>I kissed her </bold>. </paragraph>
<Signature> Your Son, Timmy </Signature>
</Letter>
Notice that the tags have more meaning in relation to one another. Also notice that the tags are nested. All of the tags live inside of the <Letter> tag. Also notice the <bold> tags at the end of the second <paragraph>. The <bold> tags are nested inside of the <paragraph> tag and give the content additional meaning. Also notice the <image> tag. This tag is sandwiched in between the <paragraph> tags. This tag tells us where to place that image in relation to the other elements of the letter.
Now that we understand tags and how they work we can start using real HTML tags to create web pages.
milliken 