Creating Websites home
Introduction to the Web
Marking up text
FTP and FileZilla
Links and anchors
Getting some style
Testing and debugging
Images and maps
Audio and video
The DOM and scripting
Logic and Arrays
Functions and document.write
Forms and INPUT
Scripting w/ tables
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
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:
* 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.
back list forward