Hi guys ---

So after some very useful feedback today, I wanted to make sure to let you know what I really want you to know from the lab exercises on HTML coding over the last three weeks. For a lot of you, we have moved very quickly from simple HTML coding to more complex coding. It is really hard to assimilate, over so short a time, the structure and style of HTML pages. 1.5 hours a week in lab flies by, and it is hard to spend time dealing with pedagogy of web based coding versus giving you the time needed to practice and play in the lab. Soooo, based on frustration level in the lab today, I think I need to do more outside the lab to help you digest some of this.

To help get you there, I am going to try to provide you with a summary of things you should know. Attached to a document to follow later tonight is one of the midterm questions from the last time this course was taught. Something similar will end up the midterm this year. So you can see what to expect from the lab test.

Below is a reification of the last couple labs. I will try to post this to the website as well in case it comes through in weird formatting.

So, basic html concept reminder. All content and structure goes into the BODY of your HTML document. The HEAD of the HTML document contains stuff that doesn't directly appear in the window of the browser. For reasons of mostly historical accident, CSS and Javascript generally occurs in the HEAD part of the document. So the simplest well formed HTML document possible is this:

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

Note that all the tags (eg. <HTML>) are both opened and closed... closing a tag requires calling it the same way as you opened it but the the forward-slash before or after the tag name (eg. </HTML>).

These tags are read by the browser and the browser knows that anything in brackets is not supposed to be read as strictly text but interpreted by the browser. In the same way, there are some core formatting elements in the HTML language. These include headings, line breaks, paragraphs. There is also the "<img src=URL />" tag and the "<a href=URL></a>" tag, where URL is either a link to a website or file location on your computer.

So try making a page that has an image and link in it. Try making a page that has an image as a link! Below is an example.

If you can do this much, you have 50% of the way towards being able to do web design.

<html>

<body>

<p>

This text</a> is a link to a page on

the World Wide Web.

Below is an image as a link.

</body>

</html>

SO, the next issue is the world of CSS designing. The reason why we do CSS design is because it gets around some ugly ugly things you never need to learn in the BASIC HTML world. You never need to learn the horrible worlds of tables for example. This is a good thing. So when you are cursing CSS, IT COULD BE WORSE.

Ok, usually CSS is embedded in a <style> tag... remember you open and close that tag, so it is <style></style> Within this tag, you can define style properties for elements you use in the body of your text.

body {

color: purple;

background-color: #d8da3d }

</style>

The first line says that this is a style sheet and that it is written in CSS (“text/css”). The second line says that we add style to the “body” element. The third line sets the color of the text to purple and the next line sets the background to a sort of greenish yellow.

So, the background of the body element will also be the background of the whole document. We haven't given any of the other elements (p, li, address…) any explicit background, so by default they will have none (or: will be transparent). The 'color' property sets the color of the text for the body element, but all other elements inside the body inherit that color, unless explicitly overridden.

So, try adding that style information into an HTML document of your own. Just copy and paste it someplace within the <HEAD> open tag and your </HEAD> close tag. Remember that anything between those tags is header information.

SO, you are now 75% of the way towards being a web designer ready for the midterm. Next thing is to try PLAYING, on your own, with adding properties to different tags. Remember you can make a tag have different properties by adding CLASSES to each tag.

p.general {color: blue}

p.important {color: red; font-family: impact}

|p.quotation {color: black; font-style: italic; margin-left: 10px}

</style>

The above basically uses the <P> tag three separate times, defining three separate CLASSES (general, important, quotation) for that tag. To apply the different styles to the tag, you need to call the tag in the BODY of your document and the class. Like so:

<p class="general">This string of text is of class "general".</p>

<p class="important">This string of text is of class "important".</p>

<p class="quotation">This string of text is of class "quotation".</p>

|Take a look at the lab today and see if this makes sense to you. This is basically the first typed out example we did without the requisite BODY, HTML, HEAD tags in the right place.

You are 90% to being a web designer. The last piece is getting familiar with DIVs. DIVs are structutre that contain content that you can modify so that they are independent of other stuctures. You can think of them as a bit like lots of little <BODY> tags each containing a world that can be formatted separately of each other. You defined positioning and visibility and font styles etc etc.., using CSS just like any other element. One easy way to do this is as follows:

Put this in the BODY of an HTML document.

<DIV class="rob">CONTENT</DIV>

Now simple define the style of the DIV in your stylesheet just like you would for ANY OTHER element!

DIV.rob {color: black; font-style: italic; margin-left: 10px}

</style>

SO, easy peasy! Remember DIVs can be positioned and such. So, you can do stuff like this:

div.rob {color: black; font-style: italic; background-color:yellow; position:absolute; width:200px; height:100px; text-align: center; top:100px;}

This sets the position of the DIV to 100px below the top of the screen, defines the size of the DIV using width and height tags and centers the text. Neat huh. Try it out!

NOW, you are 100% ready to design your own pages. BUT I CAN'T HELP YOU ANYMORE! YOU HAVE TO PRACTICE ON YOUR OWN and get used to syntax and make mistakes and such. Start by remembering the simplest page (above) and adding to it slowly and methodically. Check to make sure you put new elements where they belong, either within the head or the body of the HTML page. Make sure that the HTML open and close tags open and close your document.

I hope this long email help you! I want you all to do great and learn how to do coding.

I will send the example lab practical/midterm question along very soon...