HTML lets us take very simple word processing documents and insert commands so that any web browser running on any kind of computer will know how to make the document look nice.
Inserting the commands is called "Marking Up" the document -- this is the same kind of thing that editors do to a manuscript to tell the printer how to set the type.
All HTML commands are enclosed in pointy brackets like this < >
For example: <BR>
marks where a to put a line break.
or
<HR> tells the browser to draw a horizontal line across the page like this:
<H1> Show This </H1> Heading size one is the biggest -- it looks like this:
Important: Different web browsers will use different sizes and fonts. As HTML author you specify WHEN they are to use a size NOT WHAT size to use.
<STRONG>Show This </STRONG> This will make the type bold like this:
Show This
<CITE> Show This </CITE > This will make the type italic like this:
Show This
<CODE>Show This </CODE> This switches to a different typeface -- generally one that looks like it came out of an old computer.
Show This
This means that you must insert a HTML command where you want a new paragraph or a line break.
<P> This marks the end of a paragraph. Some web browsers will insert a blank line before the next paragraph. You don't have to turn this off so </P> at the paragraph end is optional, but many people use it.
<BR> This causes a line break. Some web browsers ignore multiple paragraph beaks, so if you want blank lines you use <BR> <BR> . You don't turn this command off.
Are You Confused about the difference between <P> and <BR>?
Here's the answer:
<CENTER> <H1> Show This </H1> </CENTER > will make the text big and center it like this:
Puts the picture of the blue ball stored in blueball.gif at the start of the line like this:
Both of the pictures (the ball and the author) that you see above are stored on the hard drive of the computer that is sending this lesson page. I drew the ball with a paint program and used a scanner on a photograph to get the picture. They are stored in the same directory (for Mac users this means folder) as all of the text files that make up this course.
So the first answer is: Make the pictures.
The yellow ball at the start of this line is stored in a computer at the Library of Congress. I didn't make a copy of it -- I just gave the address in the IMG command like this: < IMG SRC="http://lcweb.loc.gov/global/yellowball.gif" > How did I know the address? Your web browser will tell you (see below)--
So the second answer is: Use pictures that are somewhere else.
Finally, your web browser can copy any pictures that are displayed on a page. Here's how to do it:
The menu that appears when you hold down the mouse button will look something like this:
So the third answer is: Copy pictures and graphics from other web pages
There are many sites where the creators of buttons, lines, backgrounds, and other graphic elements clearly intend to give them away. Take -- Enjoy -- and don't forget that you should be giving back something too. (You are welcome to my blue ball, the buttons, and the stunning picture of the author for that matter.)
For the rest, you will have to decide -- what are your standards, and how much trouble are you willing to get into if someone disagrees?
This is going to be a lot easier than you might think because you make and view web pages on your own computer -- you don't need to be connected to the web or to anything else!
Start your editor
(To find Notepad in Windows go to the Start menu, choose Programs and then look under Accessories.)
Type a web page. What should you type? Well for starters you could just type the sample document from Minute One
Save what you typed as an html text document If you are using a word processor this is the hardest part of this entire lesson because normally your word processor saves documents in its own format. To save your page as a text document identified as html:
Go to the File menu and choose Save As ....
The Save As dialog box will appear. (The one shown below is from Notepad.)
In the Save As box, Find the drop down menu "Save as type".
Look for the oval in the picture above.
Select the option All Files from the drop down menu as shown above.
(If you are using some program other than Notepad, the choice may be called something like "text only")
Name your document.
Web browsers recognize html files by the last part of their names so it is very important that your file name end in .htm (that is, a period and the letters htm)
Note: With some word processors (like MS Word) you may be able to chose a file type of HTML. Do not do choose this. You will be asking the program to write the HTML for you and you will get very strange results. Do not try to use Word for these lessons.
Now finish the Save As ... pressing the Save button.
Start your web browser.
Find the Open File... command In Netscape and Microsoft browsers this command is under the File menu. On some versions you first select Open... to get at the Open File command. On other browsers you may have to hunt -- the command may even be called something like Open Local.
Select the Open File... command
A normal file opening box will appear. (Or, press the Browse button.)
Find the file that you made in Part 1 above.
Select your file and press the Open button
Wow! There it is! Your web page is right there on your browser.
Shift back to your text editor.
Change your document.
You might add: <H1> I'm Doing it </H1> on the line below the <BODY> command.
Save your document. This is very important because if you don't save it your browser won't know that you've changed it. (Note: Some word processors have a nasty habit of switching back to their normal saving rather than keeping the document as text. If you have trouble getting your browser to open the document check on this.)
Switch to your web browser
Click in the Reload button at the top of your browser screen.
This tells the browser to read the file that you just changed and saved. Remember -- until you press Reload you will be looking at the old version of your page.
Switch back and forth. Experiment. Learn.
To add a link you give two kinds of information:
Remember that back in Minute One you learned that you could nest html commands -- Well, that's just how we make buttons:
You start off with the link command that we just learned and put the address of the page you're jumping to in the quotation marks:
<A HREF = "MinuteFour.html"> </A>
And then you put an image command that we learned in Minute Three right where the stuff to click on goes
<A HREF = "MinuteFour.html"> <IMG SRC="blueball.gif"> </A>
This looks messy at first, but look carefully so you can see the IMG command nested in the A command. (Highlighted below)
<A HREF = "MinuteFour.html"> <IMG SRC="blueball.gif"> </A >
The result will be a blue ball button that will take you back to Minute Four.
Of course you can draw or find button shapes that are much better that the blue ball. And remember, since pictures and drawings are all displayed with the IMG command, any picture can be a button.
You may remember that in minute one I said that the browser ignores carriage returns. If you want to make a line break you use <P> or <BR> .
But the news is worse than that -- the browser ignores leading spaces too! How can you indent anything? Not to worry -- you'll use lists.
There are two kinds of commands used in building lists -- a command to mark the start and end of the list as a whole and a command to mark the start of each separate item on the list.
OK -- lets build lists!
When the browser displays it each item in a bullet list starts with a bullet (the technical term for this is a "big dot.") When we write the html, the entire list begins with <UL> and ends with </UL> and each item starts with <LI> .
Here's an example:
<UL>
<LI> This is one of the things on this list.
<LI> This is another one of the things on this list but I wanted you to see what it would look like if the item was more than one line long.
<LI> Here is the last thing on the list and again I'm going to make it a very long one. Not only will it be long, it will have a second paragraph.
<P>
Such as this second paragraph which is also meant to be sort of on the long side. Which is to say it will go on and on, but you shouldn't be reading this nonsense when you should be learning html.
</UL>
When your browser formats this it will look like:
Such as this second paragraph which is also meant to be sort of on the long side. Which is to say it will go on and on, but you shouldn't be reading this nonsense when you should be learning html.
Numbered lists are almost the same as bullet lists except that they start with <OL> and end with </OL >. Remember -- the browser provides the numbers -- not you.
<OL>
<LI> The first item
<LI> The second item
<LI> The third item
</OL>
Which will look like:
BUT -- don't think in terns of definitions. Think of this is a kind of main point, sub point formatting.
<DL>
<DT> If you think about this.
<DD> Then you will see possibilities in this kind of format.
<DT> If you look at web pages.
<DD> Then you will find uses for a definition list that have nothing to do with definitions.
<DT> If you think only of definitions.
<DD> Then you are going to lose html power.
</DL>
This will look like:
To put one list inside of another list you simply give the command to start a list wherever you want the next level of indentation to start. For example:
(I've put in an extra line break just to highlight where the inner list is)
Here are three ways of indenting lines in html:
<OL>
<LI> Start the line with a picture
<LI> Use a list
<UL>
<LI> Numbered list
<LI> Bullet list
<LI> Definition list
</UL>
<LI> Use a block quote
</OL>
This will look like:
Here are three ways of indenting lines in html:
To make a block quote you simply take the paragraph that you want to indent and put <BLOCKQUOTE> before it and </BLOCKQUOTE> after it. I did exactly that to this paragraph so that you can see the results just below.The blank lines just above and below the paragraph are part of the block quote format -- you don't need to put in breaks. Once again, if you think of this formatting option only in terms of quotations you will be missing opportunities.
Why maybe? When viewed with most browsers this looks just fine, but some browsers (often older ones) indent and also turn the text to italics. If you don't want some readers to see it this way, don't use blockquote.
DON'T PANIC: Lesson 8 gives you another way to get the Blockquote look.
So how do you go somewhere else? The first thing to do is to mark a specific spot on a page. We do that with:
<A NAME = "HiddenName"> text to jump to </A>
For example in the Part 1 heading up above I have actually written:
<H3> <A NAME = "ToHere"> Part 1 </A> : Nesting Lists </H3>
Where the ToHere inside the quotes is the hidden name of the place to jump to. To make the jump we insert an A command:
<A HREF = "#ToHere"> Go to the first heading </A>
Which will look like:
Go to the first heading
And when you click, it moves you up to the first heading.
Note how we use the number sign # to tell the <A command that we are jumping to a particular place. If that place is on a different page we give the page name followed by the place name. For example:
<A HREF = "MinuteSix.html#ToThere"> To the fourth part of Minute Six </A >
Looks like:
To the fourth part of Minute Six
Well, you can guess what that does, or you can try it. Remember that for this to work I had to use NAME to hide the name ToThere in the heading that we are jumping to.
You can judge this for yourself because the only commands that I used in writing these lessons are the ones that are taught here.
SO if as you read these lessons you were reasonably satisfied with them as web pages -- you know enough to do at least as well.
Don't forget that your browser can show you exactly how the html for any page looks. In Netscape use the Document Source command in the View the menu.
There are things that I didn't tell you about exactly how to write the commands:
In Lesson Seven I introduced Blockquote but then told you that it might result in italics on some browsers. So how did I get text just above this to be indented? The answer: Definition Lists.
If you were to look at the html for this page you would see that juist before the indent I have inserted:
<DL>
<DL>
Each of the paragraphs begins with a <DD> and I inserted breaks to keep the lines from running to the right margin.
Finally, the indented section ends with:
</DL>
</DL>
So I got the indent by nesting two Definition Lists and not having any defined term, <DT> , entries at all!
The three most important things about a web page are:
There is a Minute Nine -- the Next Lesson button will take you there.
<BODY BGCOLOR="#FFFFFF">
This will turn the background of the whole page to white. Notice that the BGCOLOR command goes inside the pointy brackets of the BODY command.
So why is #FFFFFF white? Because white light is a mixture of all the colors.
(If you don't believe this, watch Saturday morning TV until you see Mr. Science do an experiment with prisms -- or at least until the urge to color your pages passes.)
At the other end #000000 is black -- the color you get when no lights are on.
Confused? Fire up your browser and word processor and experiment!
<BODY BGCOLOR="#000000" TEXT="#FF0000">
gives us red letters on a black background. Remember: both the BGCOLOR and the TEXT commands change the colors of the entire page. If you want only some parts colored you have to use commands that aren't covered here.
The first problem is that lots of possible colors look really grainy and awful when a browser displays them. (My Next and Back buttons are a good example of a bad color.). And to add to your problems, some images develop "halos" on some backgrounds You need to experiment to find colors that work for your pages.
The second problem is that after you make the text a readable color, you still need to worry about the colors of the links. They have to be: a) Readable and b) Different from the text.
<BODY BGCOLOR="#FFCCEE" TEXT="#008888" LINK="#CC00FF" VLINK="#330099">
Well, who can resist at least trying some colored pages? Enjoy!