This stands for Paragraph. It does the exact same thing as the
commands you'll be able to play around pretty well with text placement. Now we'll talk about changing text size.Heading CommandsHeading commands are used extensively in HTML documents to, you guessed it, create headings! How novel.There are six (6) heading commands: command with them. You cannot get other text to sit right up against a heading. It's as if it wants to be, dare I say, a "Heading." Try a few for yourself.Font Size CommandsMaybe you'd like a little more control over your text size. Well, here it is. The commands. Heading commands are great for right at the top of the page, but these font commands are going to end up as the workhorses of your pages.There are twelve (12) font size commands available to you:+6 through +1 and -1 through -6.As you've probably guessed, +6 is the largest (it's huge); -6 is the smallest (it's a little too small). Here are a few of them in action. There's no need to show all of them. You'll get the idea of their relative sizes. Follow this pattern to place one on your page.This is +3This is +1This is -1This is -6Notice that this first command, is actually doing two things:1. It's asking for a new font size...
2. then offering a number to denote the font size.This is what I like to call a command inside of a command. The technical HTML term is an "attribute". When you have that, you denote the attribute with an equal sign and enclose it within quotation marks. Look above. See the equal sign and the plus or minus number in quotes? That's what I'm talking about.Also notice that the end command for a tag only requires . I should tell you now that there are two other attributes you can use inside the FONT tag: COLOR and FACE (these both have tutorials unto themselves. Take a look). But even if you use all three inside a FONT tag, you still only need one .Remember that an attribute is inside of a tag. When you use an end command, you are closing the tag, not the attribute. So you only need the one end tag, like above.Centering TextSince you've already done some writing you've no doubt noticed that the text that appeared in the browser window was justified to the left of the screen. That's what's known as the default. It just happens without your specifying any particular justification.
Notice that this text is centered on the page. It's done by surrounding the text you want centered with simple
The Full Tutorial Is Below The HTML Code Glossary
Basic Tags
<html></html>
Creates an HTML document
<head></head>
Sets off the title and other information that isn't displayed on the Web page itself
<body></body>
Sets off the visible portion of the document
Header Tags
<title></title>
Puts the name of the document in the title bar
Body Attributes
<body bgcolor=?>
Sets the background color, using name or hex value
<body text=?>
Sets the text color, using name or hex value
<body link=?>
Sets the color of links, using name or hex value
<body vlink=?>
Sets the color of followed links, using name or hex value
<body alink=?>
Sets the color of links on click
Text Tags
<pre></pre>
Creates preformatted text
<hl></hl>
Creates the largest headline
<h6></h6>
Creates the smallest headline
<b></b>
Creates bold text
<i></i>
Creates italic text
<tt></tt>
Creates teletype, or typewriter-style text
<cite></cite>
Creates a citation, usually italic
<em></em>
Emphasizes a word (with italic or bold)
<strong></strong>
Emphasizes a word (with italic or bold)
<font size=?></font>
Sets size of font, from 1 to 7)
<font color=?></font>
Sets font color, using name or hex value
Links
<a href="URL"></a>
Creates a hyperlink
<a href="mailto:EMAIL"></a>
Creates a mailto link
<a name="NAME"></a>
Creates a target location within a document
<a href="#NAME"></a>
Links to that target location from elsewhere in the document
Formatting
<p></p>
Creates a new paragraph
<p align=?>
Aligns a paragraph to the left, right, or center
<br>
Inserts a line break
<blockquote>
</blockquote>
Indents text from both sides
<dl></dl>
Creates a definition list
<dt>
Precedes each definition term
<dd>
Precedes each definition
<ol></ol>
Creates a numbered list
<li></li>
Precedes each list item, and adds a number
<ul></ul>
Creates a bulleted list
<div align=?>
A generic tag used to format large blocks of HTML, also used for stylesheets
Graphical Elements
<img src="name">
Adds an image
<img src="name" align=?>
Aligns an image: left, right, center; bottom, top, middle
<img src="name" border=?>
Sets size of border around an image
<hr>
Inserts a horizontal rule
<hr size=?>
Sets size (height) of rule
<hr width=?>
Sets width of rule, in percentage or absolute value
<hr noshade>
Creates a rule without a shadow
Tables
<table></table>
Creates a table
<tr></tr>
Sets off each row in a table
<td></td>
Sets off each cell in a row
<th></th>
Sets off the table header (a normal cell with bold, centered text)Table Attributes
<table border=#>
Sets width of border around table cells
<table cellspacing=#>
Sets amount of space between table cells
<table cellpadding=#>
Sets amount of space between a cell's border and its contents
<table width=# or %>
Sets width of table — in pixels or as a percentage of document width
<tr align=?> or <td align=?>
Sets alignment for cell(s) (left, center, or right)
<tr valign=?> or <td valign=?>
Sets vertical alignment for cell(s) (top, middle, or bottom)
<td colspan=#>
Sets number of columns a cell should span
<td rowspan=#>
Sets number of rows a cell should span (default=1)
<td nowrap>
Prevents the lines within a cell from being broken to fit
Frames
<frameset></frameset>
Replaces the <body> tag in a frames document; can also be nested in other framesets
<frameset rows="value,value">
Defines the rows within a frameset, using number in pixels, or percentage of w
idth
<frameset cols="value,value">
Defines the columns within a frameset, using number in pixels, or percentage of width
<frame>
Defines a single frame — or region — within a frameset
<noframes></noframes>
Defines what will appear on browsers that don't support frames
Frames Attributes
<frame src="URL">
Specifies which HTML document should be displayed
<frame name="name">
Names the frame, or region, so it may be targeted by other frames
<frame marginwidth=#>
Defines the left and right margins for the frame; must be equal to or greater
than 1
<frame marginheight=#>
Defines the top and bottom margins for the frame; must be equal to or greater
than 1
<frame scrolling=VALUE>
Sets whether the frame has a scrollbar; value may equal "yes," "no," or "auto." The default, as in ordinary documents, is auto.
<frame noresize>
Prevents the user from resizing a frame
Forms
For functional forms, you'll have to run a CGI script. The HTML just creates the appearance of a form.
<form></form>
Creates all forms
<select multiple name="NAME" size=?></select>
Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.
<option>
Sets off each menu item
<select name="NAME"></select>
Creates a pulldown menu
<option>
Sets off each menu item
<textarea name="NAME" cols=40 rows=8></textarea>
Creates a text box area. Columns set the width; rows set the height.
<input type="checkbox" name="NAME">
Creates a checkbox. Text follows tag.
<input type="radio" name="NAME" value="x">
Creates a radio button. Text follows tag
<input type=text name="foo" size=20>
Creates a one-line text area. Size sets length, in characters.
<input type="submit" value="NAME">
Creates a Submit button
<input type="image" border=0 name="NAME" src="name.gif">
Creates a Submit button using an image
<input type="reset">
Creates a Reset button
DAY 1
Welcome to HTML...
This is Primer #1 in a series of seven that will calmly introduce you to the very basics of HyperText Mark-up Language. I suggest you take the Primers one at a time over seven days. By the end of the week, you'll easily know enough to create your own HTML home page. No really. You will.
I say that because many people scoff at the notion that they can actually learn this new Internet format. I'm still amazed that the best-selling line of computer books calls its readers "Dummies." And people seem to revel in that title. Some of the smartest people I know love to proclaim themselves "Dummies" regarding every aspect of computers. Strange. I think you'll do a whole lot better at your next cocktail party by handing out your home page address rather than laughing about how dumb you are about the Internet.
You Can Do This!
Let's Get Started
I am assuming at the beginning of this tutorial that you know nothing about HTML. I am assuming, however, some computer knowledge. You wouldn't be looking at this page without having some knowledge. To continue with these Primers, you will need...
1. A computer (obviously)
2. A browser like Netscape Navigator, Microsoft Internet Explorer, or Opera. If you're looking at this page, you obviously have one. I would also suggest using a browser that supports images. If you surf with LYNX or CELLO, or another text-only browser, then try upgrading to one of the browsers noted above. Each name is linked to the download site for that browser.
3. A word processor. If you have access to Windows "Notepad" or "WordPad" programs or the MAC "Simple Text" program, use that to get started.
If you have those three things, you can write HTML with the best of them. Now here are a few questions you probably have:
Q. I have a MAC (or PC) -- will this work on my computer?
A. Yes. HTML does not use any specific platform. It works with simple text. More on that in a moment...
Q. Must I be logged onto the Internet to do this? More specifically, will learning this throw my cost for on-line way up?
A. Neither. You will write off-line.
Q. Do I need some sort of expensive program to help me write this?
A. No. You will write using just what I outlined above. You can buy those programs if you'd like, but they're not needed. I've never used one.
Q. Is this going to require I learn a whole new computer language like Basic or Fortran or some other cryptic, God-awful, silly-lookin', gothic extreme gobbledygook?
A. Touchy-touchy, aren't we? "No" is the answer. HTML is not a computer language. Allow me to repeat that in bold... HTML is not a computer language!
What is HTML?
H-T-M-L are initials that stand for HyperText Markup Language (computer people love initials and acronyms -- you'll be talking acronyms ASAP). Let me break it down for you:
Hyper is the opposite of linear. It used to be that computer programs had to move in a linear fashion. This before this, this before this, and so on. HTML does not hold to that pattern and allows the person viewing the World Wide Web page to go anywhere, any time they want.
Text is what you will use. Real, honest to goodness English letters.
Mark up is what you will do. You will write in plain English and then mark up what you wrote. More to come on that in the next Primer.
Language because they needed something that started with "L" to finish HTML and Hypertext Markup Louie didn't flow correctly. Because it's a language, really -- but the language is plain English.
Beginning to Write
You will actually begin to write HTML starting with Primer #2. That's tomorrow if you follow the seven-day plan this was written for. Here, I want to tell you how you will go about the process.
You will write the HTML document on the word processor, or Notepad, WordPad, or Simple Text. When you are finished creating the HTML document, you'll then open the document in a browser, like Netscape Navigator. The browser will interpret the HTML commands for you and display the Web page.
Now, some people who are already schooled in HTML are going to jump up and down and yell that you should be using an HTML assistant program because it makes it easier. That's true, but it also makes it harder to learn as the program does half the work for you. Take my word for it, use the word processor for a week, then go to the assistant if you still want to use one. You'll be far better off for the effort. I have been writing HTML for six years and I still use Notepad for the bulk of my writing.
Let's get into the programs you will use to write your HTML document. Keep this in mind: HTML documents must be text only. When you save an HTML document, you must save only the text, nothing else.
The reason I am pushing NotePad, WordPad, and Simple Text is that they save in text-only format without your doing any additional work. They just do it. But, if you're like me, then you will want to start writing on a word processor, like WORD, or WordPerfect. Maybe you're just more comfortable on it. If so, read this next part carefully.
The Word Processor
When you write to the word processor you will need to follow a few steps:
1. Write the page as you would any other document.
2. When you go to save the document (Here's the trick), ALWAYS choose SAVE AS.
3. When the SAVE AS box pops up, you will need to save the page in a specific format. Look at the SAVE AS dialogue box when it pops up: Usually at the bottom, you find where you will be able to change the file format.
4. If you have a PC, save your document as ASCII TEXT DOS or just TEXT. Either one will work.
5. If you have a MAC, save your document as TEXT.
6. When I started writing HTML, I saved pages by assigning every Web page its own floppy disc. It just helped me keep it all straight, but if you want to save right to your hard drive, do it. I only offer the floppy disc premise as a suggestion.
Please remember: It is very important to choose SAVE AS EVERY time you save your document. If you don't, the program won't save as TEXT, but rather in its default format. In layman's terms -- use SAVE AS or screw up your document.
You see, when you save your document in WORD, or some other word processor format other than text, you are saving much more than just the letters on the page. You're saving the margin settings, the tab settings, specific fonts, and a whole lot of other settings the page needs to be displayed correctly. You don't want all of that. You just want the text.
NotePad, WordPad, and SimpleText already save in text-only format so if you use one of them as your word processor, you'll get the correct format simply by saving your document.
How To Name Your Document
What you name your document is very important. You must first give your document a name and then add a suffix to it. That's the way everything works in HTML. You give a name and then a suffix.
Follow this format to name your document:
1. Choose a name. Anything. If you have a PC not running Windows 95, you are limited to eight letters, however.
2. Add a suffix. For all HTML documents, you will add either ".htm" or ".html".
(".htm" for PCs running Windows 3.x and ".html" for MAC and Windows 95/98 Machines)
Example:
I am looking to name a document I just wrote on a PC running Windows 3.11 for workgroups. I want to name the document "fred". Thus the document must be named "fred.htm". If it was MAC or Windows 95/98 I would name it "fred.html". Please notice the dot (period) before .htm and .html. And no quotation marks, I just put them in here to set the name apart.
Uhhhhhh.... Why Do I Do That?
Glad you asked. It's a thing called "association." It's how computers tell different file types apart. ".html" tells the computer that this file is an HTML document. When we get into graphics, you'll see a different suffix. All files used on the Web will follow the format of "name.suffix." Always.
Okay, why .htm for PCs running Windows 3.x and .html for MAC and Windows 95/98?
Because that's the way the operating systems are made (Windows 3.x, Windows 95/98, and MAC OS are all technically called operating systems). Windows 3.x only allows three letters after the dot. MAC OS and Windows 95/98 allow four, or more. Your browser allows for both suffixes. It acts upon .html and .htm in the same fashion.
Why do you keep harping on the fact that I must save in TEXT only?
You're just full of questions! You see, HTML browsers can only read text. Look at your keyboard. See the letters and numbers and little signs like % and @ and *? There are 128 in all (read upper- and lowercase letters as two). That's text. That's what the browser reads. It simply doesn't understand anything else.
If you'd like to test this theory, then go ahead and create an HTML document and save it in WORD. Then try and open it in your browser. Nothing will happen. Go ahead and try it. You won't hurt anything.
Remember that if you are using Notepad, Wordpad, or Simple Text, the document will be saved as text with no extra prompting. Just choose SAVE.
Opening the Document in the Browser
Once you have your HTML document on the floppy disc or your hard drive, you'll need to open it up in the browser. It's easy enough. Since you're using a browser to look at this Primer, follow along.
1. Under the FILE menu at the very top left of this screen, you'll find OPEN, OPEN FILE, OPEN DOCUMENT, or words to that effect.
2. Click on it. Some browsers give you the dialogue box that allows you to find your document right away. Internet Explorer, and later versions of Netscape Navigator, require you to click on a BROWSE button or OPEN FILE button to get the dialogue box. When the dialogue box opens up, switch to the A:\ drive (or the floppy disc for MAC users) and open your document. If you saved the file to your hard drive, get it from there.
3. You might have to then click an OK button. The browser will do the rest.
One More Thing
You easily have enough to keep you occupied for the first day. Don't worry, the Primers get less wordy after this.
If you are going to start writing HTML, I suggest you make a point of learning to look at other authors' HTML pages. You say you're already doing that, right? Maybe. What I mean is for you to look at the HTML document a person wrote to present the page you are looking at. Don't look at the pretty page, look behind it at the HTML document.
Why Would I Do That?
Because you can... but seriously, folks. Let's say you run into a page that has a really neat layout, or a fancy text pattern, or a strange grouping of pictures. You'd like to know how to do it.
Well, look, I'm not telling you to steal anything, but let's be honest, if you see some landscaping you like, you're going to use the idea. If you see a room layout you like, you will use the idea to help yourself. That's the point of looking at another page's HTML document. I think it's also the best way to learn HTML. In fact, I am self-taught in HTML simply by looking at others' documents. It was the long way around, believe me. You're going to have a much easier time of it with these Primers.
Here's how you look at an HTML document (known as the "source code"):
1. When you find a page you like, click on VIEW at the top of the screen.
2. Choose DOCUMENT SOURCE from the menu. Sometimes it only reads SOURCE.
3. The HTML document will appear on the screen.
4. Go ahead. Try it with this page. Click on VIEW and then choose the SOURCE.
It's going to look like chicken-scratch right now, but by the end of the week, it'll be readable and you'll be able to find exactly how a certain HTML presentation was performed.
It's A Little Different On AOL
Those of you who use AOL can also see the source. You can do it by placing your pointer on the page, off of an image, and clicking the right mouse button. MAC users should click and hold. A small menu should pop up. One of the items will allow you the ability to view the source.
That's the Primer for today. Print it out if you'd like and get ready to delve in and write your first HTML document. See you tomorrow.
DAY 2
Hello and welcome to day two! No doubt you've attempted to write a small document on your word processor and save it as TEXT for MAC or ASCII TEXT DOS or TEXT for your PC. You also remembered to save the document with the .htm or .html suffix, I'm sure. Good, now let's move on to today's lesson, for today we write!
HTML Tags
HTML works in a very simple, very logical, format. It reads like you do, top to bottom, left to right. That's important to remember. HTML is written with TEXT. What you use to set certain sections apart as bigger text, smaller text, bold text, underlined text, is a series of tags.
Think of tags as commands. Let's say you want a line of text to be bold. You will put a tag at the exact point you want the bold lettering to start and another tag where you want the bold lettering to stop. If you want just a word to be italic, you will place a start italic tag at the beginning of the word and an end italic tag at the end of the word. Is this making sense so far?
Tag Format
All tag (I sometimes call them command) formats are the same. They begin with a less-than sign: < and end with a greater-than sign: >. Always. No exceptions. What goes inside the < and > is the tag. Learning HTML is learning the tag to perform whatever command you want to do. Here's an example:
The tag for bold lettering is "B". That makes sense.
Here's what the tags look like to turn the word "Joe" bold:
Joe
Look At What's Happening:
1. b with brackets around it is the beginning bold tag.
2. "Joe" is the word being affected by the tag.
3. slash before the b inside the brackets is the end bold tag. Notice it is exactly the same as the beginning tag except there is a slash in front of the tag command.
4. This is what the bold tags above produced: Joe Nice, huh?
Some Questions
Q. Is the end tag for other commands simply the begin tag with the added slash?
A. Yup.
Q. Will the tags show up on my page?
A. No. As long as your commands are inside the < and > marks, the tag is used to alter the text, but the actual code is hidden from the viewer.
Q. Your bold tag uses a capital "B". Do all HTML tags use a capital letter?
A. The browser doesn't care. In terms of tags, capitals and lowercase letters are equal. But I think it would be a very good idea for you to make a habit of writing your tags in capital letters as it sets them apart from the normal text. It also makes them easier to pick out later when you are revisiting the code.
Q. Must everything have a tag to show up on the page?
A. No. If you just type in text, it'll show up. But it will not have any special look.
Q. What if I forget to add the end tag or forget to add the slash to the end tag command?
A. That's trouble, but easy-to-fix trouble. It will be obvious if you've not placed an end tag when you look at the document in your browser. The entire document will be affected after the point where you forgot the end tag. Just go back into the document, add the slash, and reload the document into the browser.
Q. Do all HTML tags require both a begin and end tag, like above?
A. No. There are exceptions to the rule, but let's stay on the ones that do require both tags to work for now. Moving along...
Open and Close Tags
The majority of HTML tags do require both an open and a close tag (a begin and end tag). Most are very easy to understand because the tag is obvious. Here are a few and what they do to text:
Affect Code Code Used What It Does
BOLD B Bold Bold
Italic I Italic Italic
Typewriter TT Typewriter Typewriter
Can I Use Two Tags at Once?
Yes. Just make sure to begin and end both. Like so:
Bold and Italic gives you Bold and Italic
Typewriter and Bold gives you Typewriter and Bold
If you do use multiple tags to alter text, make a point of not getting the end tags out of order. Look at this:
Text Text
In terms of format, the example above is not correct. The end tags are out of order in relation to the start tags.
Follow this rule:
Always set the beginning and end tags at the same time, always placing them on the farthest end of the item being affected.
Here, again, is the example above in correct form:
Text Text
Notice the Bold tags are on the far ends. Next in line are the Italics and finally the Typewriter Text tags are closest to the affected text. Just keep setting commands at the farthest ends each time you add them and you'll stay in good form.
Single Tags
The open and close tag format dominates the majority of the available HTML tags, but there are tags that stand alone. Here are three I use extensively:
tag What It Does
This command gives you a line across the page. (HR stands for Horizontal Reference.) The line right above the words "Single tags" was made using an
tag.
This BReaks the text and starts it again on the next line. Remember you saved your document as TEXT so where you hit ENTER to jump to the next line was not saved. In an HTML document, you need to denote where you want every carriage return with a
.
above except this tag skips a line. BR just jumps to the next line, P skips a line before starting the text again.
Writing Your First Page
So, here we go... you're going to write your first HTML page using what you have learned above plus two other items. And these two items are important to every page you will ever write. Why? Because they will be on every page you ever write.
You will start every page with this tag:
That makes sense. You are denoting that this is an HTML document.
Your next tags will always be these:
Finally, you'll end every page you write with this tag:
Get it? You started the page with HTML and you will end the page with /HTML. That makes sense again.
So, Here We Go!
I want you to play around with these commands. Just remember that HTML reads like you do, top to bottom, left to right. It will respond where you place the start tag and stop where you place the end tag. Just make sure your tags are within the < and > items.
Here's a sample page to show you what I mean for you to do tonight:
This is my first HTML page!
I can write in Italic or Bold
Or I can write in both
...and that's all
Notice I only used the tags I showed you on this page. Yes, it's a simple page, but you're just starting out. Notice the and . Notice the
Now, click here to see the page the code above produced.
Look at the program above and then what it produced. Look at the source code when you open the page. See how the HTML tags denoted where text was affected? Good! I knew you would. Now go! Go into the world -- or at least to your text editor -- and create. Follow the instructions in HTML Primer #1 to help you save and then display your first HTML page.
DAY 3
So, how did it go with your first HTML page last night? I'll assume it went well. Because if I don't, I can't go on, and I want to go on. So, now you know the basics about placing tags and manipulating text in terms of bold, italic, and typewriter styles. That's good, and along with the
,
, and through
.
is the largest and
is the smallest. Here are their relative sizes:
This is Heading 1
This is Heading 2
This is Heading 3
This is Heading 4
This is Heading 5
This is Heading 6
Note: In later-version browsers (3.0 and above), the numbers 7 and 8 have been added, but in terms of size, there isn't a great deal of difference between them and the 6 heading.
Heading commands create nice, bold text, as shown above, and are quite easy to use. It's a simple H# and /H# command. However, they do have one annoying trait. They like to be alone.When you use a heading command, by default, you set the text alone. It's like the heading commands carry a
command you learned in Primer 2, but now I'm going to alter it. I'm going to add an attribute to it.Here's the format:
Text in here is pushed to the right
See how I added the ALIGN="right" attribute to thecommand? Okay, but you also have to remember that if you add an attribute to a single tag like the
tag, or the
tag (yes, there are attributes for BR), then you'll need to use an end tag. See the
to create a new paragraph, then it can sit all by its lonesome. But the moment you add an attribute=, you need to use the end tag.And Primer #3 comes to an end. Notice they're getting shorter? Now go and incorporate a few of these Heading, FONT SIZE, and CENTER commands into a page. To do is to learn. A brilliant man once said that... I think he had a beard, too.
DAY 4
Creating A Hypertext LinkWelcome to day four. Today you will learn only one thing: How to create a link to another page. It's a set tag format like any of the others you have seen so far. Once you learn the format, you can make as many links as you want to any other page you want.Now an example: What is below would create a link to the HTML Goodies home page.
Click Here For HTML Goodies
Here's What's Happening:
A stands for Anchor. It begins the link to another page.
HREF stands for Hypertext REFerence. That's a nice, short way of saying to the browser, "This is where the link is going to go."
http://www.htmlgoodies.com is the FULL ADDRESS of the link. Also notice that the address has an equal sign in front of it and is enclosed in quotes. Why? Because it's an attribute of the Anchor tag, a command inside of a command. Remember that from Primer #3?
Where it reads "Click Here For HTML Goodies" is where you write the text you want to appear on the page. What is in that space will appear on the page for the viewer to click. So, write something that denotes the link.
/A ends the entire link command. Here's what will appear on the page using the command above...
Click Here For HTML Goodies
Now, without clicking, simply lay your pointer on the blue words. You'll see the address of the link you created come up along the bottom of the browser window, down where it usually reads "Document Done".What To Write For The Link?There are a couple different schools of thought on this. One suggests that what you write for links should be quite blatant. This includes text like "Click here for this" or "Here's a link to...". The other states that since the hypertext links will be blue (or whatever color they're set to), that the links should be just another word in the text set up as a link.I believe a little of both. I'm of the opinion your readers should be allowed to have a very easy time of it all in terms of navigating your Web pages. But it's your page and you make that decision. E-Mail Links From Your PageThis is what's known as a mailto: command. It follows the same coding scheme as the hypertext link above. What this format does is place blue wording on the screen that people can click to send you a piece of e-mail.Here's the pattern:Click Here To Write Me Notice it's the same format as a link except in a link you write "mailto:" in place of the http:// and your e-mail address in place of the page address. Yes, you still need the tag at the end. Please notice there is NO SPACE between the colon and the e-mail address.Here's what you get using the "mailto:" command above:
Click Here To Write Me
Go ahead, click on it. I know you're dying to. You'll get an e-mail dialogue box addressed to me. Then you can write if you want. The same thing will work for you. Just place your e-mail address in place of mine following the format above.And that wraps up Primer #4. Next time we get into the fun part of the World Wide Web, images.
DAY 5
By now you know enough to write a very nice, text-based home page, but it is the ability of the World Wide Web to provide pictures, technically called images, graphics, or sometimes icons, that has made it so popular. In this Primer, you'll learn how place an image on your page and also how to turn an image into a link to another page.
Placing An Image On Your Page
The command to place an image is constant. You will use the same format every time.
Now might be a good time to talk about where to store everything because you're starting to call for additional items to fill up your home page. Until now, all you did was put text on the page. Now you're going to place an image.
At this point in your HTML career, it's a good idea for you to place whatever images you are going to use in the same place as your web pages. That means place the image right on the same floppy disc, or in the same hard drive directory, as the page that will call for it. There's more on that coming up in Primer #7. But for now, just store everything together in the same place.
Here's the format for placing an image:
By replacing "image.gif" with "homepage.gif", one of my own graphics, you get this...
Here's What's Happening
IMG stands for "image." It announces to the browser that an image will go here on the page. Yes, the image will pop up right where you write in the image tag.
SRC stands for "source." This again is an attribute, a command inside a command. It's telling the browser where to go to find the image. Again, it's best for you to place the images you want to use in the same directory as the page. This way you can call for the image by name alone. If you start to place your images all over the place, you'll have to start adding directories and sub-directories to the SRC attribute. And at this point, that is way too confusing. Just place the image in the same place as the HTML document that will call for it and then call for the image by name alone. You can get fancy later. Right now, let's just get it to work.
image.gif is the name of the image. Notice it's following the same type of format as your HTML documents. There is a name (image) then a dot and then there is a suffix (gif).
Image Formats
There are three basic formats you will find on the World Wide Web. Each is denoted to the browser by a different suffix. Remember that "name.suffix" discussion from Primer #1?
.gif This is pronounced "jif" or "gif" (hard "G") depending on whom you speak to. I have always said "jif", like the peanut butter. This is an acronym for Graphics Interchange Format.
The format was invented by Compuserve and it's very popular. The reason is that it's a simple format. It's a series of colored picture elements, or dots, known as pixels, that line up to make a picture. Your television's picture is created much the same way. Browsers can handle this format quite easily.
.jpeg or .jpg (pronounced "j-peg") There are two names to denote this format because of the PC and MAC formats allowing 3 and 4 letters after the dot. JPEG is an acronym for Joint Photographic Experts Group, the organization that invented the format.
The format is unique in that it uses compression after it's been created. That's fancy computer talk that means that when the computer is not using a .jpeg image it folds it up and puts it away. For example, if the picture is 10K bytes when displayed, it may be only 4K bytes when stored. Nice trick, huh? It saves on hard drive space, but also tends to require a bit of memory on your part to unfold the image.
Someone always writes to me to tell me that .gif images also use compression. Yes, they do, but only when they are first created into that format. After that, no compression. JPEG, on the other hand, uses compression throughout its life to fold up smaller than it really is.
.bmp (pronounced "bimp") This is a "bitmap." You will probably never place a bitmap as an image, although now Internet Explorer browsers allow it. A bitmap is an image that a computer produces and places for you. A counter is an example.
Even though Internet Explorer will allow you to place an image as a BMP, I wouldn't. No other browsers will be able to display it. Go with .gif or JPEG.
Where Do I Get Images For My Page?
They are literally everywhere. The HTML Goodies Images Page allows you access to over 500 for free, and there are other sites out there that offer just as many. Plus, since you've been surfing, you've seen hundreds of images already. If you see something on someone's page that you really like, ask to use it. Don't just take it. That's not right and could be against copyright law. Ask. You'll probably get the image. In no time you'll have a slew to use on your page.
Activating An Image
Okay, this gets a little fancy. In Primer #4, I showed you how to create a hypertext link. What it did was create blue words on your page so someone could click on them and then jump to another site. Well, here we're going to set it up so an image becomes clickable or "active." The viewer would click on the image, instead of on blue words, to make the hypertext link. I'll make a link to my home page using the image above.
Here's the format:
Look at it again. See what happened? I placed an image tag where I would normally have placed words. Here's what you get with that format. Lay your pointer on the image, but don't click. You'll see the entire image is active:
Neat, huh? But what's with that new border around the image? That's what happens when you activate an image. It attempts to turn blue, or whatever color the page is set to, like the wording it's replacing, so it places what's known as a "border" around the image. Some people like it. I don't, and I know how to get rid of it.
To make the border disappear, you again turn to a trusty attribute, a command inside of a command.
Here's the format:
See what I did? I added an attribute that denoted that the border should be 0. You can go the other way too if you'd like. Make it BORDER="55" if you want. It'll just make a huge border. Note that the number 0 is in quotes. It is an attribute, after all.
Here's what you get using BORDER="0":
Again, lay your pointer on the image without clicking. You'll see that it is active but doesn't carry that annoying blue border.
And that brings this to a close. Tomorrow you'll deal almost exclusively with attributes in order to manipulate your images. You'll truly impress your friends with this one.
DAY 6
Just as I thought a primer, Primer #3, was required explaining how to manipulate text, I also think one is needed on how to manipulate images. Believe it or not, manipulating images is easier than manipulating text. So, here we go.Placement On The PageFirst let's worry about placing the image somewhere on the page. The default is justified to the left. If you write an image tag on a page, the image will pop up hard left.If you want to have an image placed in the center of the page, you might be able to guess at this point that you'd use the
command, right? Could it be we do the same thing here? Why yes, it could.Here's the format:
Here's what you get using "sally.gif" in place of "image.gif":Aligning Text With ImagesImages don't always stand alone. You will often want text alongside them. Here you will ALIGN text along the top, the middle, or the bottom. Again, you'll use the ALIGN="--" attribute with one of these three: "top", "middle", or "bottom".Here are the formats:
text text text text text text text text text
You may notice that using the top, middle, and bottom attributes only allows for one line of text and then the rest jumps down below the image.Here's the trick to solving that. Don't use the top, middle, or bottom attribute unless you only want one line of text. If you want text to wrap around the image, use ALIGN="left" and ALIGN="right".Even if the image is already to the left, use the ALIGN="left" attribute anyway. It allows the text to wrap around the image fully. Try it, it's quite a clever little deal.Two At Once?But what if you want only one line of text to come out of the middle of the image, and you want the image aligned to the right? Can you use two ALIGN="--" attributes in the same image? No.You set the text coming out of the middle using the ALIGN="middle" attribute in the IMG tag. Then you set the image and its text to the right by surrounding the two items with the
and
commands.Are you starting to see how a tag does only one thing? If you want two effects placed on one item, you're going to have to use two different sets of tags. Changing Image SizeTo begin this discussion, let me state that images on a computer are not like photographs. Computer images are made up of a lot of little colored dots. They're known as picture elements or "pixels" for short. So, just remember that during this part of the Primer, numbers refer to pixels rather than inches, or centimeters, or whatever. When I say pixels, I'm talking little colored dots.Every image is made up of pixels. The more pixels per inch the image has the better, and more detailed, the image will appear. Of course, that also means the image will take up a whole lot more bytes on your hard drive. You're going to find that most images on the Web are 72 and 100 pixels per inch. Yes, there are other settings, but 72-100 is a good trade-off between loss of detail and bytes required.Okay, so every image is made of pixels. This means that you can also denote an image by number of pixels. For example, the "sally.gif" image is 97 pixels high by 64 pixels wide. How do I know that? I have an expensive graphics program that tells me so. How would you know? Without a specific program, you wouldn't. You'll have to play around with the numbers in these commands a little bit, but it's easy to do.You might also want to open the image by itself in the Netscape Navigator browser window. Do that by choosing OPEN FILE under the FILE menu. When the picture pops up, look at the title bar along the very top. The height and width should be there.Of course, you can also go out onto the Web and surf around for a shareware graphics program. My personal favorite is PaintShop Pro. You get it for free for 30 days and then it's like $80 or so to get it for good.Here's what you do. Denote to the image command how many pixels high by how many pixels wide you want. The "sally.gif" image is 64X97 pixels. If I want the image to appear smaller, I will ask for the pixels to be smaller, say 30X55. If I want it bigger, I would set the pixels larger, say 100X250. Just remember form. If you make the image smaller or larger, you must keep the same general square, rectangle, or whatever, form.Of course, if I want to, I can totally distort the picture.Here's the coding:
The
tagThe WIDTH command also works on the
command, except you'll use percentages. Watch this:
gives you this:
gives you this:
You get the idea, yes?That wraps it up. Try these in the comfort of your own home under the supervision of an adult. If you are an adult, then find a kid who can program the VCR to help you along.
DAY 7
Well, Congratulations! You have beaten through six days of HTML and struggled with all those silly tags. Here's your Diploma:
You Passed!
May all your
HTML dreams
come true.
So you know it all, huh? Well, not quite. It's literally impossible to know everything. I don't come close. HTML is a growing and ever-evolving art. You have the basics.Now go on and tackle the HTML Goodies tutorials. The HTML Goodies Master List will allow you to browse the topics. You'll understand them now. Six days ago, any one of them would have made you quit.Now What?Now you need to find a place to post the page you wrote for the World Wide Web. But where? You can choose any one of a million places. ISPs (Internet Service Providers) are popping up everywhere. Just graze through your Sunday paper. You should be able to choose from a bunch.How Much Should I Pay?Depending on what you want, you could pay a great deal or a little bit. I own an entire domain, htmlgoodies.com, that services over 3.5 million visits a month so I pay a good bit. You shouldn't pay more than between $20 and $30 a month. Some say you should pay nothing, but I'm not overly sold on free page sites. I think you're better off paying a little so you can do more. I'll talk about free sites in a moment. First off, here are a few things you should get for your money if you decide to buy some space from an ISP:
You should pay a flat monthly fee for your time on the Net. Do not pay for every second you're using your computer.
You should be able to dial a local number to connect.
You should get free connection software.
The connection should be a SLIP, PPP, or another IP/TCP connect allowing you to use a browser on your computer.
You should get at least a Megabyte of space on which to place your own HTML documents.
You should get e-mail, Telnet, FTP, and Newsgroup access.
Finally, you should have access to Help where you can actually talk to a person, not just via e-mail or a help line answering machine. What About AOL?It's a great service. And they do allow you to post Web pages. It may be for you. I like going with local ISPs more myself because I can talk to the tech there at the server site if there's a problem. AOL is huge and might not have time to help you specifically. But if that's not a concern of yours, then AOL may be the way to go.What About Free Sites?Well, first off, you don't have to shell out any cash. You get a meg or two of space with which to put up a page. Many offer e-mail, too. The two most popular free home page sites are Geocities.com and Angelfire.com.
But if you take a free page with either service, you will play by their rules and you'll have to show their banner ads. You will have limited abilities to do anything other than post pages and images. It's their server, you're a guest. And since what you are getting is free, you don't have much of a leg to stand on to complain. Plus, as I noted above, they are not completely free. Geocities and others make their money by selling ad banners. Every time someone pops into your page, an ad banner pops up. Now, I don't mind ad banners, I love that they keep my site free for you to use, but if ad banners bug you, then free sites are not for you. Where to post your pages is a tough choice. Weigh all your options before jumping on a service provider. Don't make cost your only factor. I cannot recommend or downplay any provider. I think getting a connection to the Net should be a personal choice. Just make a point of getting what is above as you can get it all fairly easily.How Do I Get My Pages On The WWW?You need to use an FTP program. FTP stands for File Transfer Protocol. It's a small program that allows you to place files from your computer to your service provider's computer. You should get an FTP program from your service provider along with directions on how to use it. If not, go to Yahoo's FTP program pages, and look at some that are available. Most are free.WHAT?! There's free software for you over the World Wide Web? You have no idea. There is so much you'll simply go bonkers filling your hard drive. I did. Most is freeware and some is shareware.
Let me know if you run into trouble. I'll do my best to get you through it.Now Go Get 'Em!You're on your own! You can post this tutorial on your website if you would like, just link to this website!
Good Luck, Net-Head!
(That's a compliment)
WHAT NEXT?
Now that you know how to create HTML pages you need a program to create them in. Lookup AceHTML Freeware in your browser and a website will come up where you can download this amazing and FREE program. This program allows you to easily create HTML documents and it is the easiest program I've ever used.
After you have created a webpage/website you will need to have free hosting company and a way to upload your HTML files to that hosting 'server'....This is so anyone who enters your URL will immediately see the HTML pages you've created and uploaded. Please Click Here for free hosting ~ You can also lookup the free file uploading program, WS_FTP LE in your browser. You have reached a publishing point and just so you know, most people at this stage have already spent 100's if not 1,000's of dollars on needless 'fees'. You're ahead of the game!! Please check out the HTML game section as well as the other free tools on this website. Updated Monthly with new Free tools and ideas!
Praloha23@hotmail.com
+
75,000 Free Banner Impressions