"Learn to code im das
HyperTextMarkupLanguage"
by Herr Professor Doktor Erich Heimlich Rittergraf von Blitzenspeicher
SECTION
TWO
Chapter Four
We Make Lines und Add colors!
WE WILL NOW PROGRAMM SOME MORE:
ACHTUNG Erbrechenabschußrampe! STARTEN SIE UP ZEE NOTEPAD PROGRAM AND
REOPEN SIE OUR HTML DOCUMENT SIE HAVE BEEN WORKING ON. (YO! Whut up? Don't
be messin' roun' here Sie sorry Erbrechenabschußrampe!. Ich be whappin'
bootie on youse if'n Sie dont be listenin'. Schnapppen Sie them marbles open
and jump out dat daydreem sucka!)
Let's dress up our work. We can add horizontal lines periodically to set off something of especial interest! We do this by adding a single <HR> tag in each place where we desire a horizontal line separation.
Shall we now return to our previous coding example to illustrate? JA! As before, our new work will be in TEAL color:
<HTML><!NOTE: Tags can be in upper or lower case>
<TITLE>THE TROUSERMAUS FAN CLUB... NOT!</TITLE>
<H1>Kapitäntrousermaus saugt die Pferd poots.</H1>
The text above is a HEADING Size 1, or "H1" tag, and is left aligned by default.
An edifying display of the full range of headings follows:
<CENTER>
<H1> Heading 1 is 24 Point type. Headings can be centered like this
one is by using "CENTER" tags.
</H1>
</CENTER>
<!NOTE: The CENTER tags center all text between them above.>
<!A bracketed EXCLAMATION mark tells the komputer that all text within
its brackets is a comment that is not to appear on the screen when the page
is displayed by a browser such as Internet Explorer, Netscape or
Opera.>THIS line of text is NOT a heading. It simply illustrates the point
that, since it is outside of my comment brackets, it will be seen when a
browser displays this page.
<B>NOW, WE RESUME OUR USE OF BOLD FACE AND OUR DISCUSSION OF
HEADINGS.
Whereas the largest heading is a full 24 point size, there ARE smaller
ones:</B>
<DIR><DIR>
<H2> Heading 2 - 18 Point </H2>
<H3> Heading 3 - 14 Point </H3>
<H4> Heading 4 - 12 Point </H4>
<H5> Heading 5 - 10 Point </H5>
<H6> Heading 6 - 7 Point </H6>
</DIR></DIR>
<!DIR is really a DIRECTION tag for specifying the direction of text flow
in your document(s). DIR assumes a left-to-right text flow unless right-to-left
is chosen in an accompanying argument. DIR, used without arguments, also
has the effect of a tab space for each occurrence of the tag.>
Normal body text is 12 Point by default.
<B> The "B" tag converts text to Bold Face and 12 pt. bold is my text
preference for this web site, so I won't use its companion "/B" tag until
I decide to quit BOLDING text.
<P>NOTE: I have set this word grouping off in a separate paragraph
by cleverly deploying the "P" tag before it. Though it has a closing "/P"
tag that can be used in terminating its action, it's obviously redundant
and is, therefore, not employed here. The PARAGRAPH tag automatically inserts
a carriage return AND A LINE SPACE before the text that follows it. Nice,
huh? (NOTE THAT HEADING tags DO THIS ALSO; but, they do it both before AND
AFTER their enclosed text, as can be seen above.)
<P>
<I>pLeAsE nOtE!</I><!The "I" tags make all text between them
italicized.>
This site is continually awash in creativity, thus CONSTANTLY UNDER CONSTRUCTION.
I apologize for any inconvenience this may cause. It's a curse I
bear.</B><P>
I note, here, a peculiar point of interest... I have been given to understand
that 'browsers ignore any spaces or new lines around tags. Guess what? NOT!
IE4 seems to recognize at least 1 such space, though not more.
<B>Well, back to the use of BOLD body text. Carriage returns
in coding do not evoke a corresponding carriage return on-screen. The browser's
word wrap serves this purpose, but WE can override this and break text at
any point where we insert a "BR" tag (for BREAK.) This tag, as with the Paragraph
tag, doesn't demand a closing tag.
For example... <BR>Email me
at:<ADDRESS>HorseyRider@ohsomeplace.de</ADDRESS>The ADDRESS tags
I also included can be a nice time saver. They simultaneously force the contents
between them onto a new line, force them to be shown in italics, override
the use of "DIR" tags to indent the contents, and force any trailing text
onto yet another line. They can, however, be a bit limited and cumbersome
in the MIDDLE OF A PARAGRAPH, as can readily be observed in my example.
<!You'll note that, in the sections just preceding this comment,
I abandoned any pretext of programming correctness and put the HTML tags
not only at the left-hand border, but at the end of lines or, sometimes,
WITHIN lines. Sometimes, I got a bit more capricious and even GROUPED several
of them. This is OK, but frowned upon by the anal retentive. You might, also,
eventually regret such sloppiness when, after writing a particularly involved
page, you are amazed to discover that your disorderly coding is hard to follow.
Also, note that a FEW LITTLE TYPING ERRORS OR OMISSIONS can really spoil
the broth.>
<P><IMG SRC=meintutr.gif>
Here I include a note that, on occasion, zee Englisch spelling izn't so gut.
Sadly, I was tutored by an unwashed emigrant during my formative years. This
is his sad picture.
<HR> <!Zee tag I just added to zee left creates
a very narrow Horizontal Rule (or line.) If ziss line were zimply made thicker,
it would be more readily apparent that zee line defaults to what appears
to be a colorless, shadowed "depression"; much like zat made on paper by
a notary's seal.>
Ziss horizontal line above can be made T-H-I-C-K-E-R if we wish and we can
specify its unique color. Observe below:
<! I will now use a more expanded "HR" tag to create a wider line zat
is RED.>
<HR color=red size=10> <! Ziss discovery ist zee result of a
colaborative research effort with famed HTML scientist Caped Vixen.>
<! Also, there are other specifiers (i.e. arguments) that can be used
to flesh out zee "HR" tag. One could use also zee WIDTH argument. Width can
be specified either as a percentage of zee screen zat zee visitor to your
site may have (a relative setting) OR you can specify an unvarying width
for ze horizontal rule. Ziss would keep zee line width (and, potentially,
zee screen width) zee same regardless of zee web visitor's Komputer screen
size (forcing some to resort to their horizontal scrollbar to see zee whole
page(s).>
Here ist another line. Ziss one ist going to be sixty percent as wide as
zee web visitor's screen size and we are going to CENTER it, using a value
for ziss argument, too. Below ist our finished produkt:
<HR color=red size=10 width=60% align=center>
<P>Note how zee color will change (from red) to DARK red, MAROON, BLUE,
NAVY BLUE, LIME GREEN, GREEN, CYAN, TEAL, YELLOW, GOLD, BROWN, FUCHSIA, PURPLE,
SILVER, GRAY, ORANGE, etc. just by specifying zee color names. Ziss naming
convention works, IT IS SAID, only with zee colors in zee standard DOS/Windows
palette (NOT to be confused with zee pallette on your suit of armor.) HOWEVER,
I have discovered several others: zee DARK RED, zee BROWN, und zee ORANGE
which I have included. Experiment!
<HR color=dark red size=10 width=60% align=center>
<HR color=maroon size=10 width=60% align=center>
<HR color=blue size=10 width=60% align=center>
<HR color=navy size=10 width=60% align=center>
<HR color=lime size=10 width=60% align=center>
<HR color=green size=10 width=60% align=center>
<HR color=cyan size=10 width=60% align=center>
<HR color=teal size=10 width=60% align=center>
<HR color=yellow size=10 width=60% align=center>
<HR color=gold size=10 width=60% align=center>
<HR color=brown size=10 width=60% align=center>
<HR color=fuchsia size=10 width=60% align=center>
<HR color=purple size=10 width=60% align=center>
<HR color=silver size=10 width=60% align=center>
<HR color=gray size=10 width=60% align=center>
<HR color=orange size=10 width=60% align=center>
We do not need to demonstrate WHITE or BLACK. (Also, there ist another specifier
called NOSHADE. It has no additional qualifying or defining value. You just
type NOSHADE as one of zee arguments for the "HR" tag. It's pretty wimpy
and just gives you a dark line color.) For greater variety, specify hexidecimal
values for zee colors. You can get zeese from color charts or lists available
on zee web and inside of books about HTML, Java, Windows, etc.
</B>
</HTML>
ONCE AGAIN, IT IS SEHR, SEHR IMPORTANT TO TYPE EVERYTHING E-X-A-C-T-L-Y AS I HAVE.
-- END OF CHAPTER FOUR -- ZEE ABOVE IST ZEE END, SO FAR, OF OUR HTML
DOCUMENT. NOW SAVE OUR HTML DOCUMENT WE HAVE MODIFIED WITH ZEE NOTEPAD PROGRAMM
AS WE DID EARLIER. (A message will pop up "C:\blah-blah-blah\mypage1.htm
This file already exists. Replace existing file?" CLICK "Yes." TAKE A LONG
DRINK AND FAN YOUR ARMS ABOUT. SHOUT OUT LOUD "AHO-O-O-O-O-EY!" NOW, TO SEE
WHAT YOUR RESULTS SHOULD LOOK LIKE, LOOK AT MY FACSIMILE IN YOUR BROWSER.
YOUR PAGE SHOULD BE EXACTLY AS ZEE DOCUMENT YOU WILL SEE WHEN YOU CLICK ZISS
BUTTON.
After visiting zee sample page, you can come back to this page by zimply
clicking your browser's "BACK" button.
Now zat we've RACED ahead and done some neat stuff, let's pick up some more fundamental thingz to go with our neat stuff. Good form has been occasionally alluded to earlier. We shall now STEP BACK A MOMENT TO learn more requirements of good form. We will examine zee "HEAD" and zee "BODY" tag pairs. As you've already seen, you can sort of do without them. They do, however, offer basic structure and facility. In ziss session, we shall ALSO insert a background sound and an animated graphic and a table (and practice a few ancillary tricks!) BIG STUFF! As before, you will need to open zee Notepad programm. Zo, CLICKEN SIE HERE TO DOWNLOAD A NEAT WAVE FILE TO HEAR AND SAVE IT INTO THE SAME FOLDER IN WHICH YOU HAVE BEEN SAVING THE OTHER STUFF. ALSO, AS
| IN CHAPTER THREE OF SECTION ONE, RIGHT-CLICK ON ZIS APPEALING GRAPHIC AND SAVE IT INTO THE SAME FOLDER. NEXT, STARTEN SIE UP ZEE NOTEPAD PROGRAMM AND REOPEN SIE OUR HTML DOCUMENT! |
|
Chapter 5
We step back und we go forward!
Once more, we will be adding zee things that are highlighted in zee TEAL
COLOR below:
<HTML><!NOTE: Tags can be in upper or lower
case>
<HEAD>
<TITLE>ZEE TROUSERMAUS FAN CLUB...
NOT!</TITLE>
</HEAD>
<BODY BGCOLOR=BLACK text=white><!As you can see, zee "BODY" tag
affords a number of arguments for setting global values. (values that are
common for all affected thingz within zee "BODY" tag pair) Also, as with
all arguments, I can use either UPPER CASE or lower case; so, I did! nORmAlly...
within zee "BODY" tag there would be only zee code of zee displayed page.
However, as I am constantly annotating our every move, ziss concession to
form ist IMPOSSIBLE! Therefore, I will place these tags where they go and
we will pretend zat all comments are where they should be (up within zee
"HEAD" tags.)>
<H1>Kapitäntrousermaus saugt die Pferd poots.</H1>
Zee text above is a HEADING Size 1, or "H1" tag, and is left aligned by default.
An edifying display of zee full range of headings follows:
<CENTER>
<H1> Heading 1 is 24 Point type. Headings can be centered like ziss
one is by using "CENTER" tags.
</H1>
</CENTER>
<!NOTE: Zee CENTER tags center all text between them above.>
<!A bracketed EXCLAMATION mark tells zee komputer that all text within
its brackets is a comment that is not to appear on zee screen when zee page
is displayed by a browser such as Internet Explorer, Netscape or
Opera.>ZISS line of text is NOT a heading. It simply illustrates zee point
that, since it is outside of my comment brackets, it will be seen when a
browser displays ziss page.
<B>NOW, WE RESUME OUR USE OF BOLD FACE AND OUR DISCUSSION OF
HEADINGS.
Whereas zee largest heading is a full 24 point size, there ARE smaller
ones:</B>
<DIR><DIR>
<H2> Heading 2 - 18 Point </H2>
<H3> Heading 3 - 14 Point </H3>
<H4> Heading 4 - 12 Point </H4>
<H5> Heading 5 - 10 Point </H5>
<H6> Heading 6 - 7 Point </H6>
</DIR></DIR>
<!DIR is really a DIRECTION tag for specifying zee direction of text flow
in your document(s). DIR assumes a left-to-right text flow unless right-to-left
is chosen in an accompanying argument. DIR, used without arguments, also
has zee effect of a tab space for each occurrence of zee tag.>
Normal body text is 12 Point by default.
<B> Zee "B" tag converts text to Bold Face and 12 pt. bold is my text
preference for ziss web site, so I won't use its companion "/B" tag until
I decide to quit BOLDING text.
<P>NOTE: I have set ziss word grouping off in a separate paragraph
by cleverly deploying zee "P" tag before it. Though it has a closing "/P"
tag that can be used in terminating its action, it's obviously redundant
and is, therefore, not employed here. Zee PARAGRAPH tag automatically inserts
a carriage return AND A LINE SPACE before zee text that follows it. Nice,
huh? (NOTE THAT HEADING tags DO ZISS ALSO; but, they do it both before AND
AFTER their enclosed text, as can be seen above.)
<P>
<I>pLeAsE nOtE!</I><!Zee "I" tags make all text between them
italicized.>
Ziss site is continually awash in creativity, thus CONSTANTLY UNDER CONSTRUCTION.
I apologize for any inconvenience ziss may cause. It's a curse I
bear.</B><P>
I note, here, a peculiar point of interest... I have been given to understand
that 'browsers ignore any spaces or new lines around tags. Guess what? NOT!
IE4 seems to recognize at least 1 such space, though not more.
<B>Well, back to zee use of BOLD body text. Carriage returns in coding
do not evoke a corresponding carriage return on-screen. Zee browser's word
wrap serves ziss purpose, but WE can override ziss and break text at any
point where we insert a "BR" tag (for BREAK.) Ziss tag, as with zee Paragraph
tag, doesn't demand a closing tag.
For example... <BR>Email me
at:<ADDRESS>HorseyRider@ohsomeplace.de</ADDRESS>Zee ADDRESS tags
I also included can be a nice time saver. They simultaneously force zee contents
between them onto a new line, force them to be shown in italics, override
zee use of "DIR" tags to indent zee contents, and force any trailing text
onto yet another line. They can, however, be a bit limited and cumbersome
in zee MIDDLE OF A PARAGRAPH, as can readily be observed in my example.
<!You'll note that, in zee sections just preceding ziss comment, I abandoned
any pretext of programming correctness and put zee HTML tags not only at
zee left-hand border, but at zee end of lines or, sometimes, WITHIN lines.
Sometimes, I got a bit more capricious and even GROUPED several of them.
Ziss is OK, but frowned upon by zee anal retentive. You might, also, eventually
regret such sloppiness when, after writing a particularly involved page,
you are amazed to discover that your disorderly coding is hard to follow.
Also, note that a FEW LITTLE TYPING ERRORS OR OMISSIONS can really spoil
zee broth.>
<P><IMG SRC="meintutr.gif">
Here I include a note that, on occasion, zee Englisch spelling izn't so gut.
Sadly, I was tutored by an unwashed emigrant during my formative years. Ziss
is his sad picture.
<HR> <!Zee tag I just added to zee left creates a very narrow Horizontal
Rule (or line.) If ziss line were zimply made thicker, it would be more readily
apparent that zee line defaults to what appears to be a colorless, shadowed
"depression"; much like zat made on paper by a notary's seal.>
Ziss horizontal line above can be made T-H-I-C-K-E-R if we wish and we can
specify its unique color. Observe below:
<! I will now use a more expanded "HR" tag to create a wider line zat
is RED.> <HR color=red size=10> <! Ziss discovery ist zee result
of a colaborative research effort with famed HTML scientist Caped
Vixen.>
<! Also, there are other specifiers (i.e. arguments) that can be used
to flesh out zee "HR" tag. One could use also zee WIDTH argument. Width can
be specified either as a percentage of zee screen zat zee visitor to your
site may have (a relative setting) OR you can specify an unvarying width
for ze horizontal rule. Ziss would keep zee line width (and, potentially,
zee screen width) zee same regardless of zee web visitor's Komputer screen
size (forcing some to resort to their horizontal scrollbar to see zee whole
page(s).>
Here ist another line. Ziss one ist going to be sixty percent as wide as
zee web visitor's screen size and we are going to CENTER it, using a value
for ziss argument, too. Below ist our finished produkt:
<HR color=red size=10 width=60% align=center>
<P>Note how zee color will change (from red) to DARK red, MAROON, BLUE,
NAVY BLUE, LIME GREEN, GREEN, CYAN, TEAL, YELLOW, GOLD, BROWN, FUCHSIA, PURPLE,
SILVER, GRAY, ORANGE, etc. just by specifying zee color names. Ziss naming
convention works, IT IS SAID, only with zee colors in zee standard DOS/Windows
palette (NOT to be confused with zee pallette on your suit of armor.) HOWEVER,
I have discovered several others: zee DARK RED, zee BROWN, und zee ORANGE
which I have included. Experiment!
<HR color=dark red size=10 width=60% align=center>
<HR color=maroon size=10 width=60% align=center>
<HR color=blue size=10 width=60% align=center>
<HR color=navy size=10 width=60% align=center>
<HR color=lime size=10 width=60% align=center>
<HR color=green size=10 width=60% align=center>
<HR color=cyan size=10 width=60% align=center>
<HR color=teal size=10 width=60% align=center>
<HR color=yellow size=10 width=60% align=center>
<HR color=gold size=10 width=60% align=center>
<HR color=brown size=10 width=60% align=center>
<HR color=fuchsia size=10 width=60% align=center>
<HR color=purple size=10 width=60% align=center>
<HR color=silver size=10 width=60% align=center>
<HR color=gray size=10 width=60% align=center>
<HR color=orange size=10 width=60% align=center>
We do not need to demonstrate WHITE or BLACK. (Also, there ist another specifier
called NOSHADE. It has no additional qualifying or defining value. You just
type NOSHADE as one of zee arguments for zee "HR" tag. It's pretty wimpy
and just gives you a dark line color.) For greater variety, specify hexidecimal
values for zee colors. You can get zeese from color charts or lists available
on zee web and inside of books about HTML, Java, Windows,
etc.
<TABLE ALIGN=CENTER><!Note: I am creating a table with 1 row and
2 columns. It will be also centered horizontally on zee page.>
<TR><!Here starts zee row of my table. I do ziss using zee "TR"
tag pair to enclose zee different items of table
data (See zee "TD" pairs below.)>
<TD><IMG SRC="sunBLK.gif"></TD><!Zee first table column
holds an animated graphic. Note that zee same "IMG SRC" (Image Source) tag
is used to display zee animated graphic as was used to display zee stationary
graphic earlier. zee only thing different ist zee graphic itself.>
<TD BGCOLOR=YELLOW><FONT COLOR=RED>ZISS ist zee
sun.</FONT><FONT COLOR=GREEN><B>
WE-E-E-E-E!!</B></FONT></TD><!Zee second table column
(same row) contains words. Note zee change in color and boldness of zee font
and zee change in background color within zee table. I used zee "FONT" tag
with its "COLOR" specifier to over-ride zee default text color established
in zee "BODY" tag inserted at zee beginning of ziss document. I can change
back to zee default color, or cancel zee old color before changing to a new
color, by zimply closing with zee "/FONT" tag. As can be readily seen, I
chose to change only zee background color in zee second column of zee table.
I did ziss by using zee "BGCOLOR" specifier in conjunction with zee second
"TD" pair of the table. Notice, also, that zee default font in zee table
was unbolded. I used zee regular "B" and "/B" pair to bold zee last half
of zee text statement within zee second column.>
</TR><!Zee other half of zee "TR" tag pair that denotes zee end
of ziss table row.>
</TABLE><!Zee table ends here.>
<P ALIGN=CENTER><FONT COLOR=FUCHSIA> Now for zee inclusion of
a stimulating little background ditty.</FONT><!We align this and
the next text line along the center line of our web page, using the "P" and
"/P" (paragraph) tag pair along with specifiers for alignment (ALIGN=) and
for over-riding, again, the default font color (COLOR=).>
<BR>You are listening to jets020.wav! See zee sun dancing to zee
musik!!</P>
<BGSOUND SRC="jets020.wav" LOOP=4><!We discover the "BGSOUND"
(background sound) tag and specify the source file for this action (SRC)
and the number of times it will play consecutively (LOOP).
</B>
</BODY>
</HTML>
ONCE AGAIN, IT IS SEHR, SEHR IMPORTANT TO TYPE EVERYTHING E-X-A-C-T-L-Y AS I HAVE.
-- END OF CHAPTER FIVE -- ZEE ABOVE IST ZEE END, SO FAR, OF OUR HTML
DOCUMENT. NOW SAVE OUR HTML DOCUMENT WE HAVE MODIFIED WITH ZEE NOTEPAD PROGRAMM
AS WE DID EARLIER. (A message will pop up "C:\blah-blah-blah\mypage1.htm
This file already exists. Replace existing file?" CLICK "Yes." NOW,
TO SEE WHAT YOUR RESULTS SHOULD LOOK LIKE, LOOK AT MY FACSIMILE IN YOUR BROWSER.
YOUR PAGE SHOULD BE EXACTLY AS ZEE DOCUMENT YOU WILL SEE WHEN YOU CLICK ZISS
BUTTON.
After visiting zee sample page, you can come back to this page by zimply
clicking your browser's "BACK" button.
| Lesson Sections: |
|
Blitzenspeicher material, and other original artwork and text, on this site are, unless otherwise indicated or attributed, copyrighted by the author. ABC.MID was foulnd on the web. Many hours went into the creation of this site so please respect the copyright on this material by not copying or otherwise attempting to use any of it without asking permission. March 26, 1999
This page patiently created in AOLpress by Caped Vixen. Last update October 17, 1999.
