Marking Up Text | Still Plugging Away

This is a rich, exciting lesson, covering lots of territory. It's our first chance to formally introduce some elements that actually define the content of a web page.

Along the way we touch on the style attribute, a couple of style properties, how to specify color values, the concept of events, and more.

The following video lesson covers:

The BODY, P, H1-H6, BR and PRE elements
Style properties
Introduction to the style attribute
Introduction to events and event handlers
Introduction to character entity references

Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.

Lesson 3: Marking Up Text

Click here for the video transcript

Supplemental materials

Here is a brief description of the concept of character entity references, which is a useful way of representing characters not available from your keyboard.

The above paper includes this link to the formal reference for character entity references.

Here is the W3C standard on color property specifications

A cumulative summary of the contents of the course so far: Click here

Hands on exercise

For those who want to practice using what we cover in this class, most lessons have an opportunity for you to learn on your PC. The exercise for this lesson is primarily concerned with testing the elements and concepts introduced in the video.

Modify your index.html file:

Add the following two paragraphs of text into the body:

Welcome to our Financial Activity and 
Resource Tracking System (FARTS). 

This system allows you to find a venue for 
meetings, training sessions. "war rooms", 
and any other legal activity requiring usable 
space away from regular office space.
Experiment with the tag to see how spacing works, including blank lines and other whitespace
Add headings at level h1 and h3 to see how they are represented in your browser
Add a title attribute to the main paragraph start tag, something like "Tool tip for main paragraph".
Test if your browser brings up the title when you hover the cursor over the paragraph.

Create a copy of your unirpt1.html - call it unirpt2.html

Change all the paragraph ('p') tags to be 'pre' tags (simplest way to do this is to replace all "p>" with "pre>").
Compare unirpt1.html and unirpt2.html in your browser.

Remember: each time you make a change, you must save your file, and then refresh your browser.

Lesson 3: The Body Element - Marking Up Text