Signed in as:
Sign out
Links
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
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
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.
This next video covers more text formatting:
Lesson 7: Getting Some Style
part 2: more text formatting
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 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 character into the clipboard then count while you delete spaces and use Ctrl+v to paste that many 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.
This last video explores page layout:
Lesson 7: Getting Some Style
part 3: page layout
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.
back list forward
Email us if you would like additional information. We would love to see your comments and recommendations for our site.
Our privacy policy: we use cookies to keep track of where you are on the site, but we do not leave cookies on your site; we do not track your visits; we do not disseminate any information about you because we do not gather any information about you.