Html Studio's

Lesson 8

We've covered a lot so far. Text & font manipulation, images, links. As far as the basics go, there's not a whole heck of alot more.

I think I'm going to take this time to tell you about screen resolution. The screen I work on is 640 pixels by 480 pixels. Many use 800x600 and a few use 1024x768. I'm sure that there are even a few others out there. What does this have to do with anything? It has alot to do with how your pages will look to them. Here are a couple screen shots of my current homepage at different resolutions.

640×480 800×600 1024×768

It is a very good idea to check your page at other resolutions. Your carefully crafted layout might fall apart at other resolutions. Especially if you design your page at a higher resolution. View your creation at a lower res and you might be surprised. For Windows95 users, there is a handy little MS Powertoy called Quickres that lets you easily switch screen resolutions.

Now we are going to look at a couple formatting tools availble to you. First one is <BLOCKQUOTE>. In most browsers it pulls your margins in from both sides. (I don't know if that's the proper terminology but if you understand what I mean I guess it's close enough). 

<BODY>
<BLOCKQUOTE>
WE THE PEOPLE of the United States, in order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
</BLOCKQUOTE>
</BODY>

WE THE PEOPLE of the United States, in order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

 

I'm sure when <BLOCKQUOTE> was first devised it had a loftier purpose, such as quoting profound bits of prose from authors I've never even heard of. But here in the trenches it serves a more mundane purpose... easy indenting.
It's important to note that although most browsers render blockquoted text by indenting it, that's not specifically what it's designed to do. It's conceivable that some future browser may render blockquoted text in some other way (such as red italics). That said however, for the time being, it is perfectly safe to indent blocks of text with <BLOCKQUOTE>.

Another very useful little tool is a LIST. There are ORDERED lists and UNORDERED lists.

This is an ordered list
  1. something big
  2. something small
  3. something short
  4. something tall
  This is an unordered list
  • something red
  • something blue
  • something old
  • something new

First, we will build an UNORDERED list. It's mind-numbingly simple...   really.

Start with this... 

<BODY>
What I want for Christmas
</BODY>

What I want for Christmas

 

Note - technically we have not started to build the list yet. This is just a sort of heading.

Add a pair of unordered list tags. 

<BODY>
What I want for Christmas
<UL>
</UL>
</BODY>

What I want for Christmas

 

Add a list item. 

<BODY>
What I want for Christmas
<UL>
<LI>a big red truck
</UL>
</BODY>

What I want for Christmas
  • a big red truck

 

Add a few more... 

<BODY>
What I want for Christmas
<UL>
<LI>a big red truck
<LI>a real fast speedboat
<LI>a drum set
<LI>a BB gun
<LI>a Melanie Griffith
</UL>
</BODY>

What I want for Christmas
  • a big red truck
  • a real fast speedboat
  • a drum set
  • a BB gun
  • a Melanie Griffith

Bingo! You made a list!

How to make an ordered list? Easy! Change the <UL> tag to <OL>. 

<BODY>
What I want for Christmas
<OL>
<LI>a big red truck
<LI>a real fast speedboat
<LI>a drum set
<LI>a BB gun
<LI>a Melanie Griffith
</OL>
</BODY>

What I want for Christmas
  • a big red truck
  • a real fast speedboat
  • a drum set
  • a BB gun
  • a Melanie Griffith

Another type of list is a definition list.

aardvark
A burrowing, ant-eating African mammal. And, as everyone knows, the first word in every self-respecting dictionary. Did you know there's such a thing as an aardwolf?

Start with this... 

<BODY>
<DL>
</DL>
</BODY>

Then add a definition title... 

<BODY>
<DL>
<DT>10th Amendment
</DL>
</BODY>

10th Amendment

And a definition item. 

<BODY>
<DL>
<DT>10th Amendment
<DD>The powers not delegated to the United States by the
    Constitution, nor prohibited by it to the States, are
    reserved to the States respectively, or to the people.
</DL>
</BODY>

10th Amendment
The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.

As a finishing touch I like to make the definition title bold. It's not required, but I think it looks much better that way. 

<BODY>
<DL>
<DT><B>10th Amendment</B>
<DD>The powers not delegated to the United States by the
    Constitution, nor prohibited by it to the States, are
    reserved to the States respectively, or to the people.
</DL>
</BODY>

10th Amendment
The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.

<--BACK        NEXT-->

General Table
of Contents		 Lessons
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10		 Index and
Quick Reference		 HTML Guide

Website Tutor

 

Maintained by Nick Grant < htmlstudio@talk21.com >

Copyright © 2000 Nick Grant. All Rights Reserved.