Monitor

Lesson 7: Getting Some Style

 Signed in as:    
      Sign out

 

Links

Your home page

Creating Websites home

Beginnings
   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
   Lists
   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
   Cookies
   HTML tables
   Structuring tables
   Scripting w/ tables
   Inline frames
   Loose ends

   Support

Quick links to videos on this page

   * Text formatting
   * More formatting
   * Page layout

 

The video below begins a discussion on the use of style:

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 7: Getting Some Style
part 1: text formatting

Click here for the video transcript

 

Hands on exercise

There are three videos in this lesson, and I've provided a set of suggested exercises for each video. This should help in not getting too much lab work at once.

The goal here is become comfortable with the markup elements, style properties, the style attribute, and the class attribute.

Part 1: In the MyWebFiles directory on your computer are two files to use as input to a new web page:

"locs.txt" contains data about available meeting rooms for a corporation, and "html_skel" contains starter code for HTML pages (we'll use this a lot).

Open 'locs.txt' in your editor and copy the entire file in to the clipboard

close the editor

then open 'html_skel' in your editor

paste the contents of the clipboard in the <body> element

save the file as 'locs.html'.

Change the <title> element content to be "Available Rooms"

In the <head> element add a <style> element with these rules:

* h1 elements should be 16 pt red text

* h2 elements should be 12 pt blue text

* h3 elements should be 10 pt purple text

* pre elements of class dot should be 10 pt green courier font

In the body of 'locs.html', make the following changes:

Mark up the three lines beginning with "Location:" - remove "Location:" and make the rest of the text be the content of h1 elements

Mark up the three lines beginning with "Address:" - remove "Address" and make the rest of the text be the content of h2 elements

   Note: make sure each address still has three separate lines (hint: think <br>)

Mark up the three lines beginning with "Switchboard:" - markup each such line to be the content of h3 elements

Mark up the three blocks of lines beginning with "Meeting spaces:" as being pre text with class dot

For those entries that have available pictures, convert the simple text of the name to be an a element with the href value to be the same as the name, and the content to be the name without the '.jpg' extension; for example:

   myroom.jpg would become <a href=myroom.jpg>myroom</a>

Insert a blank line between each location's entry (hint: think p entry using a non-breaking space content)

View this page in your browser; test the links to the jpg's work; when you have it the way you want it to look, set a link in your index.html page to point to locs.html

 

In MyWebFiles on your computer: Open 'locs.html' in your editor and replace all occurences of the string 'pre' with 'p' then save the file as 'locs2.html'

then view 'locs2.html' in your browser

insert <hr> elements between the first and second and the second and third locations

View this page in your browser; test the links to the jpg's work; when you have it the way you want it to look, set a link in your index.html page to point to locs.html

 

Part 2: Also in your MyWebFiles directory are two files to use as input to another new web page:

"textTest.txt" contains text to experiment on, and, again, "html_skel" contains starter code for HTML pages.

Open 'textTest.txt' in your editor and copy the entire file in to the clipboard

close the editor

then open 'html_skel' in your editor

paste the contents of the clipboard in the <body> element

save the file as 'textTest.html'.

Change the <title> element content to be "Text testing"

In the <head> element add a <style> element with these rules (classes):

  in10x elements should have text-indent of 10px
  in10t elements should have text-indent of 10pt
  center elements should have text-align be center
  right elements should have text-align be right
  over elements should have text-decoration be overline
  under elements should have text-decoration be underline
  through elements should have text-decoration be line-through
  blink elements should have text-decoration be blink
  caps elements should have text-transform be capitalize
  upper elements should have text-transform be uppercase
  lower elements should have text-transform be lowercase
    Hint: remember to put a '.' in front of the style_rule name in the style element

Follow the instructions for markup in the testText.html file;

View this page in your browser. (Note: browsers are not required to implement 'blink'.) Feel free to add other tests / experiments.

 

Quick links to videos on this page

   * Text formatting
   * More formatting
   * Page layout

 

This next video covers more text formatting:

  • The SPAN element
  • The DIV element
  • The HR element
  • How to line up text in columns

 


Lesson 7: Getting Some Style
part 2: more text formatting

Click here for the video transcript

 

Hands on exercise

The goal here is become comfortable with the hr element and making data line up in columns

In MyWebFiles on your computer: Open 'locs.html' in your editor and replace all occurences of the string 'pre' with 'p' then save the file as 'locs2.html'

then view 'locs2.html' in your browser

insert <hr> elements between the first and second and the second and third locations

Use <br> elements for new lines in the location lists to force line breaks after each location's entry except the last then view the result in your browser

Insert &nbsp; strings to line up text using the approach in the video; then view the result in your browser and retry as necessary to get it right.

Note: this is tedious, detail work; while you do this, look for techniques to make it easier; for example: 1) copy a &nbsp; character into the clipboard then count while you delete spaces and use Ctrl+v to paste that many &nbsp; characters; 2) note that the header for each group is the same: get the first header right and then copy-and-paste that string for the second and third header; 3) test frequently: check your progress so you don't go too far off the path.

 

Quick links to videos on this page

   * Text formatting
   * More formatting
   * Page layout

 

This last video explores page layout:

  • Visual model
  • Box model
  • Padding properties
  • Border properties
  • Margin properties
  • Location properties
  • Size properties
  • Position, float, and clear properties
  • Implementing page design using style

 


Lesson 7: Getting Some Style
part 3: page layout

Click here for the video transcript

 

Supplemental materials

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

 

Hands on exercise

The goal here is become comfortable with the style properties used to influence page layout and appearance.

Part 1:

In the MyWebFiles directory open "html_skel" in your editor and save the file as 'BordersDemo.html'.

Change the <title> element content to be "Demo border styles"

In the <head> element add a <style> element with rules for each border style:

.xxxxx {width: 1in; height: 1in; padding: 25px; border: red 10px xxxxx}

create this kind of rule for each of the principal border styles:

solid, double, dashed, dotted, groove, ridge, inset, outset

In each rule, replace both occurrences of 'xxxxx' with the name of the border-style

In the <body> element, add a <p> element for each border style, the class for the paragraph should be one of the classes you set above; the content of each paragraph should just be the name of the border style

Save your file and test it in your browser.

 

Part 2:

In the MyWebFiles directory open "FDA.html" in your editor and save the file as 'FDAHist.html'. FDA.html is the page we built in the lecture, leaving the borders in. Our objective here is to create a second page for this mythical web site. Observe that this creates a page with the same basic structure and style set up as its parent page.

Change the <title> element content by adding "History"

Change the <body> element content by constructing the main box to reflect the content of the file "FDAHist.txt", also found in your MyWebFiles directory. Specifically:

   change "Course List" to "History"
   for each paragraph in FDAHist.txt, create a <p> element containing the text.

Test in your browser and get it the way you want.

Then, in both FDAHist.html and FDA.html, set the "Company History" line to be an <a> element pointing to FDAHist.html.

Save the files and test them in your browser, including that the link works.

 

 Lesson navigation 

 

 

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