HTML Tips
The following snipets of html code will allow you to fine tune formatting within your pages.
1. Paragraph Tag = Using the code: </p><p> to force a double space between paragraphs.
2. Bold Tag = Using the code: <b> Text that you want to be bold.</b> will display as Text that you want to be bold.
3. Heading Tag = Using the code: <h3> Text that you want to be in the heading </h3> will display as
Text that you want to be in the heading.
4. Break Tag = Using the code: <br> will force a single line break.
5. Center Tag = Using the code: <center> Text that you want to be displayed centered</center> will display as
Create a link:
Example: Create a link to the Pro Entertainment Network home page.
would create:
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 flags. Think of flags as commands. Let's say you want a line of text to be bold. You will put a flag at the exact point you want the bold lettering to start and another flag where you want the bold lettering to stop. If you want just a word to be italic, you will place a start italic flag at the beginning of the word and an end italic flag at the end of the word. Is this making sense so far? Flag Format All flag (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 flag. Learning HTML is learning the flag to perform whatever command you want to do. Here's an example: The flag for bold lettering is "B". That makes sense. Here's what the flags look like to turn the word "Joe" bold: <B>Joe</B> Look At What's Happening: 1. <B> is the beginning bold flag. Some Questions Q. Is the end flag for other commands simply the begin flag with the added slash? Q. Will the flags show up on my page? Q. Your bold flag uses a capital "B". Do all HTML flags use a capital letter? Q. Must everything have a flag to show up on the page? Q. What if I forget to add the end flag or forget to add the slash to the end flag command? Q. Do all HTML flags require both a begin and end flag, like above? Open and Close Flags The majority of HTML flags do require both an open and a close flag (a begin and end flag). Most are very easy to understand because the flag is obvious. Here are a few and what they do to text: Can I Use Two Flags at Once? Yes. Just make sure to begin and end both. Like so: <B><I>Bold and Italic</I></B> gives you Bold and Italic <B><TT>Typewriter and Bold</TT></B> gives you Typewriter and Bold If you do use multiple flags to alter text, make a point of not getting the end flags out of order. Look at this: In terms of format, the example above is not correct. The end flags are out of order in relation to the start tags. Follow this rule: Here, again, is the example above in correct form: Notice the Bold flags are on the far ends. Next in line are the Italics and finally the Typewriter Text flags 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 Flags The open and close flag format dominates the majority of the available HTML flags, but there are flags that stand alone. Here are three I use extensively: Heading commands are used extensively in HTML documents to, you guessed it, create headings! How novel. There are six (6) heading commands: <H1> through <H6>. <H1> is the largest and <H6> is the smallest. Here are their relative sizes: 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 <P> 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 Color Commands Use a tag of font color="#XXXXXX" to control font color. Be sure to include the quotes and pound sign preceding the six digit color number from the chart below. The text needs to be followed by a close font tag. i.e. <font color="#990000"> Maroon Text </font> produces: Maroon Text Font Size Commands Maybe you'd like a little more control over your text size. Well, here it is. The <FONT SIZE> 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. <FONT SIZE="+3">This is +3</FONT> <FONT SIZE="+1">This is +1</FONT> <FONT SIZE="-1">This is -1</FONT> <FONT SIZE="-6">This is -6</FONT> Notice that this first command, <FONT SIZE="--"> is actually doing two things: 1. It's asking for a new 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 <FONT SIZE="--"> flag only requires </FONT>. I should tell you now that there are two other attributes you can use inside the FONT flag: COLOR and FACE (these both have tutorials unto themselves. Take a look). But even if you use all three inside a FONT flag, you still only need one </FONT>. Remember that an attribute is inside of a flag. When you use an end command, you are closing the flag, not the attribute. So you only need the one end flag, like above. Centering Text Since 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. All text in here will be centered </CENTER> Text To The Right Here's the format: <P ALIGN="right">Text in here is pushed to the right</P> If you're just using <P> 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 flag. Creating A Hypertext Link Welcome to day four. Today you will learn only one thing: How to create a link to another page. It's a set flag 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. Here's what will appear on the page using the command above... 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 Page This 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: <A HREF="mailto:jburns@htmlgoodies.com">Click Here To Write Me</A> 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 </A> flag 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: 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. Here's the format for placing an image: <IMG SRC="image.gif"> By replacing "image.gif" with "homepage.gif", one of my own graphics, you get this... Here's What's Happening 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? 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 flag 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: 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. Sorry about that last one. I just needed another item to make a three-item list. OK, here's how I did it. <UL> Don't be put off by the commands. It's actually only two being used again and again. Here's what's happening. HINT: If you use a center command before this, it doesn't center the entire list, it centers each item messing up the look of the list. If you would like to move the list closer to the center of the page, simply add more <UL> commands. I have found that three moves the list almost to the center. Just remember, if you use three UL commands you need to offer three /UL commands. Like this: <UL><UL><UL> <UL TYPE="square"> This is what you get... ...and here's how I did it: <OL> Notice it's just the same format except I have <OL> where <UL> used to be. Nothing to it. The browser will continue to count up as long as you keep putting <LI> items after the OL. By the way, "OL" stands for Ordered List. ...and here's how I did it: <OL TYPE="I"> You're just no fun, you know that? OK, regular letters. I can do that. Try this: ...and here's how I did it: <OL TYPE="A"> Maybe you don't want your count to start at one every time. That's easy to fix. Here's an ordered list that starts at four. ...and here's how I did it: <OL START="4"> Try it yourself. here's what it looks like: <OL> There is a pattern to putting unordered lists under one another. Phone support: 303-233-4222Here is a basic html primer:
HTML Flags
2. "Joe" is the word being affected by the <B> flag.
3. </B> is the end bold flag. Notice it is exactly the same as the beginning flag except there is a slash in front of the flag command.
4. This is what the bold flags above produced: Joe Nice, huh?
A. Yup.
A. No. As long as your commands are inside the < and > marks, the flag is used to alter the text, but the actual code is hidden from the viewer.
A. The browser doesn't care. In terms of flags, 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 flags 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.
A. No. If you just type in text, it'll show up. But it will not have any special look.
A. That's trouble, but easy-to-fix trouble. It will be obvious if you've not placed an end flag when you look at the document in your browser. The entire document will be affected after the point where you forgot the end flag. Just go back into the document, add the slash, and reload the document into the browser.
A. No. There are exceptions to the rule, but let's stay on the ones that do require both flags to work for now. Moving along...Affect Code Code Used What It Does BOLD B <B>Bold</B> Bold Italic I <I>Italic</I> Italic Typewriter TT <TT>Typewriter</TT> Typewriter
Always set the beginning and end tags at the same time, always placing them on the farthest end of the item being affected.Flag What It Does <HR> This command gives you a line across the page. (HR stands for Horizontal Reference.) The line right above the words "Single Flags" was made using an <HR> flag. <BR> 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 <BR>. <P> This stands for Paragraph. It does the exact same thing as the <BR> above except this flag skips a line. BR just jumps to the next line, P skips a line before starting the text again. <H1>This is Heading 1</H1>
<H2>This is Heading 2</H2>
<H3>This is Heading 3</H3>
<H4>This is Heading 4</H4>
<H5>This is Heading 5</H5>
<H6>This is Heading 6</H6>
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. FFFFFF FFCCFF FF99FF FF66FF FF33FF FF00FF FFFFCC FFCCCC FF99CC FF66CC FF33CC FF00CC FFFF99 FFCC99 FF9999 FF6699 FF3399 FF0099 FFFF66 FFCC66 FF9966 FF6666 FF3366 FF0066 FFFF33 FFCC33 FF9933 FF6633 FF3333 FF0033 FFFF00 FFCC00 FF9900 FF6600 FF3300 FF0000 CCFFFF CCCCFF CC99FF CC66FF CC33FF CC00FF CCFFCC CCCCCC CC99CC CC66CC CC33CC CC00CC CCFF99 CCCC99 CC9999 CC6699 CC3399 CC0099 CCFF66 CCCC66 CC9966 CC6666 CC3366 CC0066 CCFF33 CCCC33 CC9933 CC6633 CC3333 CC0033 CCFF00 CCCC00 CC9900 CC6600 CC3300 CC0000 99FFFF 99CCFF 9999FF 9966FF 9933FF 9900FF 99FFCC 99CCCC 9999CC 9966CC 9933CC 9900CC 99FF99 99CC99 999999 996699 993399 990099 99FF66 99CC66 999966 996666 993366 990066 99FF33 99CC33 999933 996633 993333 990033 99FF00 99CC00 999900 996600 993300 990000 66FFFF 66CCFF 6699FF 6666FF 6633FF 6600FF 66FFCC 66CCCC 6699CC 6666CC 6633CC 6600CC 66FF99 66CC99 669999 666699 663399 660099 66FF66 66CC66 669966 666666 663366 660066 66FF33 66CC33 669933 666633 663333 660033 66FF00 66CC00 669900 666600 663300 660000 33FFFF 33CCFF 3399FF 3366FF 3333FF 3300FF 33FFCC 33CCCC 3399CC 3366CC 3333CC 3300CC 33FF99 33CC99 339999 336699 333399 330099 33FF66 33CC66 339966 336666 333366 330066 33FF33 33CC33 339933 336633 333333 330033 33FF00 33CC00 339900 336600 333300 330000 00FFFF 00CCFF 0099FF 0066FF 0033FF 0000FF 00FFCC 00CCCC 0099CC 0066CC 0033CC 0000CC 00FF99 00CC99 009999 006699 003399 000099 00FF66 00CC66 009966 006666 003366 000066 00FF33 00CC33 009933 006633 003333 000033 00FF00 00CC00 009900 006600 003300 000000 FFFFFF CCCCCC 999999 666666 333333 000000
2. then offering a number to denote the font size.
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.
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.
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.Bullet Lists
These lists are nice. Here's why I like them...
<LI>They present information in an easy fashion.
<LI>The bullets look cool.
<LI>They make me happy.
</UL>
<LI> list item
</UL></UL></UL>I don't like round bullets, I want squares!!!
Easy now there fellah, you can have your list and squares too. Simply add the command TYPE="square" into your UL command. Like so:
<LI>List Item 1
<LI>List Item 2
<LI>List Item 3
</UL>Number Lists
If you would like to create a list that numbers the items rather than just putting a bullet in front, HTML could do that for you too. Yeah, you could just number the things yourself, but that's no fun. It's time consuming too. Dig this:
<LI>List Item 1
<LI>List Item 2
<LI>List Item 3
</OL>But I Want Roman Numerals!!!
Arabic isn't good enough for you, huh? Well simply place a TYPE="I" inside the OL command. Notice that is a capital "I" and not the number one. Here's what you get:
<LI>List Item 1
<LI>List Item 2
<LI>List Item 3
</OL>Roman Numerals?!?! I Want Letters!
<LI>List Item 1
<LI>List Item 2
<LI>List Item 3
</OL>Start the Count After One
<LI>List Item 1
<LI>List Item 2
<LI>List Item 3
</OL>Can I put these together?
Yes. Just remember to close each one. You could do something like an OL list and under each LI command for the OL, you could put in a small UL. Like so:
<LI>Main Heading
<UL>
<LI>List item 1
<LI>List item 2
</UL>
<LI>Secondary Heading
<UL>
<LI>List item 1
<LI>List item 2
</UL>
</OL>
Email support