Lesson 3: The Body Element - Marking Up Text

 Signed in as:    
      Sign out



Your home page

Creating Websites home

   Introduction to the Web
   Introducing HTML
   Marking up text
   Setting Up
   FTP and FileZilla
   Links and anchors
   Getting some style

Intermediate topics
   Style sheets
   Testing and debugging
   Images and maps
   Audio and video
   Intro to JavaScript
   The DOM and scripting
   Logic and Arrays
   Functions and document.write
   Forms and INPUT
   Other controls
   HTML tables
   Structuring tables
   Scripting w/ tables
   Inline frames
   Loose ends


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:

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<br>
    Resource Tracking System (FARTS).<br><br>

    This system allows you to find a venue for<br>
    meetings, training sessions. "war rooms",<br>
    and any other legal activity requiring usable<br>
    space away from regular office space.

  • Experiment with the <p> 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 navigation 



Email us if you would like additional information. We would love to see your comments and recommendations for our site.