"Learn to code im das
HyperTextMarkupLanguage"
by Herr Professor Doktor Erich Heimlich Rittergraf von Blitzenspeicher
ABSCHNITT EIN
Kapitel Ein:
Opening Ihre Notepad Programm und Machen Sie das Erster Document
(Ziss Notepad ist ein sehr easy programm to use meine Damen und Herren. Zimple! Now, zee language Englisch to maken it eazzy fur You I will be using.)
ENGLISCH VERZION:
After opening zee Notepad program that ist a standard feature of zee Windows (in all versions with which I have familiarity), your coding in HTML is as zimple as typing zee following three lines.
<HTML>
Kapitäntrousermaus saugt die Pferd poots.
</HTML>
Zee zimple text above forms a basic sentence surrounded by opening and closing formatting "tags." Each tag consists of a pair of angle brackets <> enclosing a command. Most such tags come in pairs that are used together. Zee first tag of zee pair defines where zee desired action starts and zee second tag defines where zee desired action stops. In zee above example, zee <HTML> tag tells zee komputer that a new HTML document is being created. Zee </HTML> tag says that our new HTML document ends at that point. Anything in between these two tags becomes part of our HTML document.
Now, we can save this zimple document. We don't take zee default option to save our document with a ".txt" extension. Ziss would be wrong for our purposes! Zee Komputer would look at ziss and mistake our purpose, thinking we were just saving a letter or something. NO!
We will save our document with a special ending like ".HTM" or ".HTML" (either ist OK). This special ending tells zee Komputer that it is looking at HyperTextMarkupLanguage code. It will open zee file and use its instructions to create our page for viewing on zee internet. Zimple! Ja? Ja! Letz name our new program "mypage1.htm". (Do NOT include zee quotation marks in zee file name.)
OH! be sure to remember zee name of zee folder (i.e. "subdirectory") into which you saved mypage1.htm! That makes it SO much easier to find again later. Actually you could create a whole new folder and put all of your practice work in zee same new folder.
-- END OF CHAPTER ONE --
Chapter Two:
Looking At Our Kreation
BECAUSE YOU ARE ALREADY CONNECTED TO ZEE INTERNET AND USING ZEE INTERNET EXPLORER, YOU ZIMPLY GO TO ZEE "ADDRESS" TEXT BOX, NEAR ZEE TOP OF ZEE BROWSER. REPLACE ZEE "URL" IN ZEE TEXT BOX WITH ZEE HARDDRIVE PATH SPECS FOR YOUR NEW PROGRAM (something like C:\mystuff\mypage1.htm)
NEXT, PRESS ZEE "ENTER" KEY ON YOUR KEYBOARD. YOUR BROWSER WILL NAVIGATE TO YOUR NEW PAGE. (If you weren't connected to zee internet, you could zimply click on your desktop icon for zee Internet Explorer. Don't worry that you would not be connected to zee internet: You don't need to be. Our purpose is to just view our new file locally on your harddrive. You will see an error message. Click it away. Next there will be a virtually empty screen with a message like "Navigation Canceled" and some smaller hen scratching below it. It's all of no consequence to us. You will next proceed to click "File" in zee menu bar. Then, on zee File menu, click "Open". Next, you can click zee "Browse" button and look through your directory tree until you find your new HTML file. When you find it, double-click it to open and view it. SEHR NEAT, HUH?)
Obviously, you must have a familiarity with zee operating system to execute any of zee preceding steps correctly.) IN EITHER CASE THAT I HAVE JUST ILLUSTRATED, You should be now staring at a browser window that says "Kapitäntrousermaus saugt die Pferd poots." Don't worry about what ziss sentence says. Just shout "Jawohl! mein Rittergraf" and take your seat.
-- END OF CHAPTER TWO -- CLOSEN SIE ZEE INTERNET EXPLORER, GET OFF ZEE INTERNET, CLOSEN SIE ZEE NOTEPAD PROGRAM, SHUTEN SIE DAS KOMPUTER OFF AND HAVE SOME ROUNDS OF TENNIS MIT FRIENDS.
We shall now march into a new level of difficulty with zee ASSURANCE gained so far! Remember. Even zee most intricate document is just a more complex form of what we have already done! STAY FOCUSED OR I SHALL BE COMPELLED TO WHIP YOUR KNEES, Erbrechenabschußrampe!
Chapter Three
Some new things
Several new tags are introduced here. This causes much excitement.. Yes? JA! We shall learn zee following new HTML tags and what they do for us:
<! Your comment inserted here.> You'll be quick to note that this requires no closing tag, just a closing bracket. It is a means of putting for yourself a note within your code. It is not "echoed" to zee Komputer screen when your page is viewed within a browser window.
<TITLE> and zee companion closing tag </TITLE> are used to instruct zee browser to place any text found between this pair up in zee title bar at zee top of zee browser window.
<H> This tag creates a heading of a specified text size (1-6). It takes zee closing tag </H> at zee end of zee heading. Headings provide zee desired point of interest in a document as well as a point of interest for web spiders. Web spiders by popular search engines (Excite, HotBot, AltaVista, etc.) are often optimized to especially note zee contents of HEADINGS when indexing new web sites, just as they might distinguish zee contents of META tags. (AltaVista does.) We'll cover META tags later, maybe, if you're good.
<CENTER> and </CENTER> These center on your web page any text between them.
<B> and </B> These BOLD-FACE any text between them, thus making zee text more prominent.
<DIR> and </DIR> are explained in zee text of zee new HTML page code we will create next.
<P> and </P> are explained in zee text of zee new HTML page code we will create next.
<BR> and </BR> are explained in zee text of zee new HTML page code we will create next.
There are several other tags that will also be introduced in zee upcoming example.
WE WILL NOW PROGRAMM SOME MORE:
ACHTUNG Erbrechenabschußrampe! STARTEN SIE UP ZEE NOTEPAD PROGRAM AND REOPEN SIE OUR HTML DOCUMENT YOU CREATED IN KAPITEL EIN (Chapter One). WE WILL NOW FLESH IT OUT! NOTE: IN LOOKING FOR YOUR PROGRAM, ONCE YOU HAVE CLICKED "Open" IN ZEE "File" MENU, YOU WILL FIND YOURSELF IN ZEE "Open" WINDOW. THERE IS A TEXT DIALOG BOX LABELED "Files of Type:" AT ZEE BOTTOM OF ZIS WINDOW. SINGLE CLICK ZEE BUTTON IN ZEE RIGHT SIDE OF ZEE DIALOG BOX. (IT HAS AN ARROWHEAD ON IT THAT POINTS DOWN.) SINGLE-CLICK ZEE "All Files (*.*)" OPTION. NOW SEARCH YOUR DIRECTORY TREE AND FIND YOUR NEW HTML DOCUMENT. ZIMPLE AS EIN, ZWEI, DREI!
 |
FIRST, A LITTLE PRE-PROGRAMMING HAUSKEEPING. YOU WILL
NOTE AN INTERESTING PICTURE I HAVE INCLUDED HERE FOR YOUR BENEFIT. ZIMPLY
RIGHT-CLICK (depress and release zee right mouse button quickly) WHILE YOUR
MOUSE CURSOR RESTS ON ZEE PICTURE.
A MENU WILL POP UP. NEXT, IF USING INTERNET EXPLORER, ZIMPLY SINGLE-CLICK WITH ZEE LEFT MOUSE BUTTON WHERE IT SAYS "Save Picture As" AND NAVIGATE THROUGH ZEE MENU TREE UNTIL YOU ARE IN ZEE SAME FOLDER (i.e. subdirectory) IN WHICH YOUR DOCUMENT IST AND CLICK ZEE BUTTON TO "SAVE" ZEE PICTURE CALLED meintutr.gif INTO THAT FOLDER. |
NOW, WE WILL EMBELISH OUR DOCUMENT. MAKE ZEE CHANGES SHOWN IN TEAL BELOW. IT IS SEHR, SEHR IMPORTANT TO TYPE EVERYTHING EXACTLY AS I HAVE. JUST FILL IN AROUND OUR BASIC DOCUMENT AS I HAVE INDICATED BELOW:
<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. </B>
</HTML>
-- END OF CHAPTER THREE -- NOW SAVE OUR NEW 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." ZEE ABOVE IST ZEE END, SO FAR, OF YOUR
HTML DOCUMENT. YOU ARE NOW A RANK NOVICE. TAKE A REST AND STUDY ZEE CODE.
LOOK AT IT IN YOUR BROWSER. IT SHOULD BE EXACTLY AS ZEE DOCUMENT YOU WILL
SEE WHEN YOU CLICK ZIS BUTTON.
After visiting zee sample page, you can come back to this page by zimply
clicking your browser's "BACK" button.
THIS CONCLUDES SECTION ONE OF
"Learn to code im das
HyperTextMarkupLanguage".
| 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.