It is a very good idea to check your page at other resolutions. Your
carefully crafted layout might fall apart at other resolutions.
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 available to you. First one is <BLOCKQUOTE>.
I've been using it throughout this whole tutorial. Basically 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 BGCOLOR="#FFFFFF">
<BLOCKQUOTE>
WE HAVE learned a lot of basic tags from KNR Friends Tutorials on
web creating & designing.
</BLOCKQUOTE>
</BODY>
WE HAVE learned a lot of basic tags from KNR Friends
Tutorials on web creating & designing.
|
| 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. |
Another very useful little tool is a LIST.
There are ORDERED lists and UNORDERED lists.
This is an ordered list
- something big
- something small
- something short
- something tall
|
|
This is an unordered list
- something red
- something blue
- something old
- something new
|
First, we will build an UNORDERED list.
It's very simple- really.
Start with this...
<BODY BGCOLOR="#FFFFFF">
What I want for my Birthday
</BODY>
What I want for my Birthday
|
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 BGCOLOR="#FFFFFF">
What I want for my Birthday
<UL>
</UL>
</BODY>
What I want for my Birthday
|
Add a list item.
<BODY BGCOLOR="#FFFFFF">
What I want for my Birthday
<UL>
<LI>a motorbike
</UL>
</BODY>
What I want for my Birthday
|
Add a few more...
<BODY BGCOLOR="#FFFFFF">
What I want for my Birthday
<UL>
<LI>a motorbike
<LI>a pair of new shoes
<LI>a guitar
<LI>a Rolex watch
<LI>a PC
</UL>
</BODY>
What I want for my Birthday
- a motorbike
- a pair of new shoes
- a guitar
- a Rolex watch
- a PC
|
Wow! You made a list!
How to make an ordered list? Easy! Change the <UL>
tag to <OL>.
<BODY BGCOLOR="#FFFFFF">
What I want for my Birthday
<OL>
<LI>a motorbike
<LI>a pair of new shoes
<LI>a guitar
<LI>a Rolex watch
<LI>a PC
</OL>
</BODY>
What I want for my Birthday
- a motorbike
- a pair of new shoes
- a guitar
- a Rolex watch
- a PC
|
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 BGCOLOR="#FFFFFF">
<DL>
</DL>
</BODY>
Then add a definition title...
<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>Electronic Greeting cards
</DL>
</BODY>
- Electronic Greeting cards
|
And a definition item.
<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>Electronic Greeting cards
<DD>You can express your love, sympathy,
care and wishes to your dear and near. It is the best way to say
that you care for them. Knrfriends site has enabled the facility for
you to send e-cards. Click the banner above to show that you care.
</DL>
</BODY>
- Electronic Greeting cards
- You can express your love, sympathy, care and
wishes to your dear and near. It is the best way to say
that you care for them. Knrfriends site has enabled the
facility for you to send e-cards. Click the banner above
to show that you care.
|
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 BGCOLOR="#FFFFFF">
<DL>
<DT><B>Electronic Greeting
cards</B>
<DD>You can express your love, sympathy, care and wishes to
your dear and near. It is the best way to say that you care for
them. Knrfriends site has enabled the facility for you to send
e-cards. Click the banner above to show that you care.
</DL>
</BODY>
- Electronic Greeting cards
- You can express your love, sympathy, care and
wishes to your dear and near. It is the best way to say
that you care for them. Knrfriends site has enabled the
facility for you to send e-cards. Click the banner above
to show that you care.
|
Another little widget that you will find
yourself using alot is the Horizontal Rule.
<BODY BGCOLOR="#FFFFFF">
<HR>
</BODY>
We have a few options available to us...
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=20%>
<HR WIDTH=50%>
<HR WIDTH=100%>
<HR WIDTH=20>
<HR WIDTH=50>
<HR WIDTH=100>
</BODY>
This one is pretty self explanatory.
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% ALIGN=LEFT>
<HR WIDTH=60% ALIGN=RIGHT>
<HR WIDTH=60% ALIGN=CENTER>
</BODY>
We can control the thickness...
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=3>
<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=15>
</BODY>
And we can make it a solid line.
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1 NOSHADE>
<HR WIDTH=60% SIZE=3 NOSHADE>
<HR WIDTH=60% SIZE=8 NOSHADE>
<HR WIDTH=60% SIZE=15 NOSHADE>
</BODY>
Remember when I said that the browser doesn't understand
formatting, it just displays text in a steady stream? Kind of like
this...
<BODY BGCOLOR="#FFFFFF">
\|/
(@ @)
+----oOO----(_)-----------+
| WEB DESIGNING |
| for |
| BEGINNERS |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</BODY>
|
\|/ (@ @) +----oOO----(_)-----------+ | WEB
DESIGNING | |
for | | BEGINNERS | +-----------------oOO-----+ |__|__| ||
|| ooO Ooo |
Well, with the <PRE> (preformat)
tag, we can put a stop to that and have things displayed the way we
type them.
<BODY BGCOLOR="#FFFFFF">
<PRE>
\|/
(@ @)
+----oOO----(_)-----------+
| WEB DESIGNING |
| for |
| BEGINNERS |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</PRE>
</BODY>
\|/
(@ @)
+----oOO----(_)-----------+
| WEB DESIGNING |
| for |
| BEGINNERS |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
|
* Notice that a monospaced font is used.
The last tag we're going to discuss is a
comment.
<BODY BGCOLOR="#FFFFFF">
<!--This is a comment-->
This is not<P>>
A comment can be placed anywhere in the document and the browser
will ignore everything inside the brackets. You can insert hidden
messages, <!--Hi Mom!--> notes to
yourself, <!--Pick up milk--> or
write a helpful message to someone looking at the source of your
page.<!--Copy anything off me and you're
dead!-->
</BODY>
|
This is not
A comment can be placed anywhere in the document and the
browser will ignore everything inside the brackets. You can
insert hidden messages,
notes to yourself,
or write a helpful message to someone looking at the source
of your page.
|
Just to be absolutely clear, the comment must start with <!--
and end with -->
You can even put other html tags in a comment and they will be
ignored. The browser will just keep ignoring everything until it
sees a -->
