Web Help

Webhelp.org presents:

Crashcourse in HTML What is HTML? HTML is the HyperText Markup Language that your browser understands to bring you web pages like this one... What does HTML look like? Typically an HTML document will look like this: <HTML> <HEAD> <TITLE>Title of Webpage</TITLE> <META NAME="description" CONTENT="Example of HTML document"> <META NAME="keywords" CONTENT="HTML, example, document"> </HEAD> <BODY BGCOLOR="#00FFFF" TEXT="#000000" LINK="#FF0000" VLINK="#0000FF" ALINK="#FFFFFF"> <BASE FONT=3> Webhelp.org presents: <CENTER>Crashcourse in HTML</CENTER> <HR WIDTH=100%> </BODY> </HTML> This is the top part of this very page. There is more to HTML, explained below, but let's tackle these basic tags first. Let's break this example down. ALL documents that contain HTML, will start with <HTML> and end with </HTML>. Matter of fact, HTML tags are all contained in < and > and typically do end with <, /, the tag and >. The next line is <HEAD>,. One element of the HEAD is your <TITLE> (which is what will show up at the top of the browser), which in the example will be "title of Webpage", but as a working example, I'll have you know that the <TITLE> of this very page (the tutorial) is "Crashcourse in HTML" which you can probably see at the very top of the browser window. The title will end with a </TITLE>. Any META tags will also go into the HEAD. In the example, META tags are used that allow search engines to determine the DESCRIPTION and KEYWORDS of the document. The META tags are certainly optional. You will note they do not end with a </META> like other tags do. That is just one of many inconsistancies with hypertext. The HEAD does, however, end with a </HEAD>. Now, for the meat of the document. The BODY. The BODY tag can simply be left as <BODY> and the browser's default background color and text color are used. This is absolutely fine for no frills webpages (ie: Church Schedule, Recipe for Chicken and Dumplings, etc.). As you can see, in my BODY tag, I defined the background color with BGCOLOR, text with TEXT, links with LINK, visited links with VLINK and active links with ALINK. A link is "active" when it is clicked on. You can also have a GIF or JPG image be your background by using BACKGROUND="location.gif" in the BODY tag, where "location.gif" is the name of the file on the server of the image you want to use. Between this BODY tag and the </BODY> tag is where your webpage will be. What does #00FFFF mean? Well, colors are often defined in hexadecimal values (newer browsers recognize simple color names though, like "white" or "black"). The six digits are seperated into three different colors, two digits each. Values of these two digits go from 00 to FF. The first two digits are amount of red, the next two are green and the last two are blue. So, for example, FF0000 is ALL red, 00FF00 is all green, 0000FF is all blue, FFFFFF is white (all color) and 000000 is black (no color). To break down my aqua blue background; it's comprised of no red, a lot of green and a lot of blue. This makes my seafoam greenish blue background. , like the body color definitions, are optional. If it is not used, the default browser font is used instead. Use the name of the font exactly as it appears in your font lists under FONT NAME. Don't use the file name of the font. It doesn't work (been there, done that). The <BASE FONT> tag is also optional. If this is not used the browser's default font size is used instead. Usually the default size is 3 anyway! Generated by www.PDFonFly.com at 3/22/2010 3:38:58 PM URL: http://webhelp.org/html/index.html

You can see where it says "Jonny Presents", that is all that needs to be there for the phrase "Jonny Presents" to show up on the browser. Hypertext does not, however recognize carriage returns in your original document, so, to break, you must use . Now; is different. It is used to change the font immediately after the tag and must be closed with a . You can see here I increased it by 3 sizes, making the font size equal to 6. By the way, you can go as large as 7. <CENTER> is one of the best ways to give your document a neat appearance. Anything typed between the <CENTER> and </CENTER> tags, will be centered in the browser. I've noticed that some editors use with a at the end, and if you like that, then that's fine, but it seems a bit long winded for me. A horizontal rule, AKA the line that is drawn across the width of the document, is done using the <HR> tag. If the HR is used by itself, the default rule size and width is displayed. In my example you can see I went for 100% of the browser width. You can also define the size of the rule using ...SIZE=... and then a number between 1 and 7. For example: <HR SIZE=4>. And then of course, the end of this document is </BODY> and </HTML>, as you can see. Is that it?!? Heck no! Sure you can make a webpage with that little bit of information, but HTML can do so much more! Let's say you want a background image. Just add BACKGROUND="nameoftheimage.jpg" to your BODY tag, like this: <BODY BGCOLOR="#DFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#0000FF" ALINK="#FFFFFF" BACKGROUND="nameoftheimage.jpg"> Now, of course, if the image is not local (residing in the same directory as the HTML file) then you will need to type in the entire path of the background image. <BODY BGCOLOR="#DFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#0000FF" ALINK="#FFFFFF" BACKGROUND="http://www.domain.com/nameoftheimage.jpg"> If you were typing up stuff that needed to be divided up in paragraphs, you would want double page breaks, right? If you use the at the beginning and a at the end of a block of text. It will double space before and after that block of text. If you have multiple paragrahs, you do not need the at the end of every paragraph, because the next is kind of a given that the last paragraph has ended so a new one can begin. Here's an example of paragraphs: When changing the oil on the newer aircooled VW bus, be sure not to overtighten the bolt that holds the strainer in place. This bolt is threaded directly into the pickup tube for the oil pump and damage can occur to the oil pump if it is overtightened. A good rule of thumb is to choke up on the middle of your standard length wrench and only snug up on the bolt. If you have a good feel for foot pounds, I'd say only 9 or 10 foot pounds at the most. All that will appear like this:

When changing the oil on the newer aircooled VW bus, be sure not to overtighten the bolt that holds the strainer in place. This bolt is threaded directly into the pickup tube for the oil pump and damage can occur to the oil pump if it is overtightened. A good rule of thumb is to choke up on the middle of your standard length wrench and only snug up on the bolt. If you have a good feel for foot pounds, I'd say only 9 or 10 foot pounds at the most.

You'll notice that paragraphs in HTML don't indent. Unfortunately, any spaces you type in HTML do not show up as spaces in the finished product, so if you type in five spaces to indent a paragraph, you'll only get one space. To create a space or multiple spaces, you'll need to type a "&nbsp;" for each space needed. The "nbsp" stands for "non-breaking space." Yeah, it seems rediculous to type 6 characters to obtain one space, but that's just the way it works. So, if you wanted to make the above paragraphs and indent the first line of each paragraph (say with five spaces, for example) like you normally would when you type or write a paragraph, your HTML will need to look like this: Generated by www.PDFonFly.com at 3/22/2010 3:38:58 PM

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;When changing the oil on the newer aircooled VW bus, be URL: http://webhelp.org/html/index.html

sure not to overtighten the bolt that holds the strainer in place. This bolt is threaded directly into the pickup tube for the oil pump and damage can occur to the oil pump if it is overtightened. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A good rule of thumb is to choke up on the middle of your standard length wrench and only snug up on the bolt. If you have a good feel for foot pounds, I'd say only 9 or 10 foot pounds at the most. All that will appear like this:

When changing the oil on the newer aircooled VW bus, be sure not to overtighten the bolt that holds the strainer in place. This bolt is threaded directly into the pickup tube for the oil pump and damage can occur to the oil pump if it is overtightened. A good rule of thumb is to choke up on the middle of your standard length wrench and only snug up on the bolt. If you have a good feel for foot pounds, I'd say only 9 or 10 foot pounds at the most.

There are some pretty handy font manipulators avalible too. If you want to go up a font size without typing long tag lines, use <BIG>...</BIG>. If you want italics use , bold use , typewriter style use <TT> and for underline, use . All of these lines MUST close with a / !!! Here's an example: This text can be

BIG, Italic, Typewriter or Underlined.......

Which was done using the following: This text can be <BIG>BIG</BIG>, Italic, <TT>Typewriter</TT> or Underlined....... Linking is a very popular thing to do in webpages too. There are many pages I see, that are NOTHING BUT links to other pages. Wonder how to get your page to "link" to another? Try this: <A HREF="http://webhelp.org">This is a link</A> This will make this: This is a link and to click on it will transport you to my home page at http://webhelp.org! The link will show up in the LINK color if the person has never been there, and in the VLINK color if the've been there once before, and when you click on it, it'll turn the ALINK color breifly. If the file is in the same directory as the file you are linking from, then you can leave off the URL and simply type <A HREF="filename.html"> instead. The browser will know to look in the same directory it is currently in. This line also works with E-Mail addresses. If you wanted to have a "Mail Me" line in your page, you'd do this: <A HREF="mailto:tutorial@webhelp.org">Mail Me!</A> This will drop me a letter at tutorial@webhelp.org! Pretty cool, huh? Actually, anything can be linked....Want to have a "ZIP" file downloadable? Make it a link! <A HREF="http://webhelp.org/frames/frames.zip"> Want to link to a graphic? <A HREF="http://webhelp.org/button.gif"> You can, in fact, link ANY file extension. Whether or not the person clicking on the link can do something with the link they are clicking on is one thing! For example: If you link an .RA file extension (Real Audio) and the person doen't have the Real Audio plug in, they will be asked to save the file instead... This is how you make DOWNLOAD LINKS. You put the file the user can download as the A HREF. You can also link to different elements within the same page. Using the same A HREF tag, you would target within the same document using a # followed by a name of the section of the document. HUH? OK, OK. First name the section of the document. Say you want the user to be able to return to the top of the document. So, the first thing you have after the body tag is: <A NAME="TOP"></A>

Generated by www.PDFonFly.com at 3/22/2010 3:38:58 PM URL: http://webhelp.org/html/index.html

This will name that exact point of the document, TOP. Now, to target that part of the document, or, to make a link that, when clicked on, will take someone to that part of the document, we would use an A HREF tag. For example: <A HREF="#TOP">Click here to return to top.</A> When Click here to return to top is clicked on, it will return the user to the "TOP" of that document. This works when targeting parts of other documents. Say for instance you were going to the "SQUAREBACK" section of Bob's VW Page (fictitious), you would use the following: <A HREF="http://www.bob.vw.page/index.html#SQUAREBACK">Click here for the SQUAREBACK section of BOB'S VW PAGE.</A> Assuming there was a <A NAME="SQUAREBACK"></A> section of Bob's VW page (or even a Bob's VW page for that matter) this would work.

Now, let's play with images. To call up an image you would use the IMG SRC tag. IMG SRC needs to point to the exact location of the image file. So often do I see an image not properly attached to a document. You must know the exact location of the image you want to use. If you can see it on your HTML editor at home, you should make sure the image is uploaded as well, to the same directory as you document. If the image is on the same server in the same directory, the IMG SRC tag is fairly simple. On this server I have a image called "happyface". To bring up happyface with the IMG SRC tag, do this: <IMG SRC="happyface.gif" width="35" height="34"> and happyface plops done right in place of that tag. Like this:

If the image is not in the same directory or you are unsure of the image's location in relation to your document, use the whole http address of the image. <IMG SRC="http://webhelp.org/html/happyface.gif"> You can center an image as well using the <CENTER> and </CENTER> on either end of your IMG SRC tag. If you put an A HREF on either side of an image, the image becomes the link. For instance, to make happyface a link to my E-Mail, I would use the following: <A HREF="mailto:tutorial@webhelp.org"><IMG SRC="happyface.gif" width="35" height="34"></A> To make this (I added a CENTER tag to make it look pretty):

...The box around the image is in the LINK color. To get rid of the box around happyface you would use BORDER=0 in the tag after the name of the file. Going back on the <A HREF> tag for a moment, I'll tell you that ANYTHING you put between the <A HREF> and </A> tags, images, tables, text, etc., becomes a link and will change color to the LINK color. Just thought I'd touch on that a bit..... You can also assign the tributes of the image using the WIDTH and HEIGHT tags. Happyface is 35x35 in actual size, so setting the width and height to 35 would be redundant.....but let's double the size! <IMG SRC="happyface.gif" WIDTH=70 HEIGHT=70>

Generated by www.PDFonFly.com at 3/22/2010 3:38:58 PM URL: http://webhelp.org/html/index.html

If for any reason your image wont load, or if you want to accomodate a text only browser, you can use the ALT tag to identify the image to those who can not view it. This tag also pops a little text box up in Netscape 4 and Explorer 3 when the image is moused over. Here's a useful sample of ALT: <A HREF="mailto:tutorial@webhelp.org"><IMG SRC="happyface.gif" ALT="Click Here To Leave EMail" width="35" height="34"></A>

Here are a few more advanced tags... One is <XMP>. What XMP (Exclude Markup Protocol) does is puts what you type in your editor, tags, carriage returns, whatever, look in the browser exactly the same way it did in your editor. This is the method I use to display the HTML routines on this page. When I put HTML between the tags <XMP> and </XMP> the HTML is not executed, merely displayed! Another thing you may need to know, is that you can not use symbols like <, > and & in a web page because they are used to designate HTML. This is when you use ESCAPE SEQUENCES. One escape sequence I've already shown you is one to do spaces (like when you wanted to indent a paragraph). The tag &nbsp; was an "escape sequence" that created spaces. Use &lt; to display the less than (<), &gt; to display greater than (>), &copy; to display copyright (ÂŠ) and &amp; to display &! It's that simple. There are many other escape sequences for special symbols too.

I was thinking about stopping the crashcourse there, but so many people want to put music on their webpage, I had to include this. In Internet Explorer, it's as easy as the BGSOUND SRC tag, followed by the WAV or MID file you want to play. <BGSOUND SRC="song.wav"> If you were using a browser with a plug in for music (for instance Netscape 3.0's Media Player or Crescendo, etc.) you would use this EMBED routine: <EMBED SRC="song.mid" HIDDEN=TRUE> </EMBED> The HIDDEN=TRUE, I like to use because it hides the plug in console, and since you have to define the width and height of certain plug-ins (ie: Crescendo), I'd just as well leave it hidden. To please all browsers, YES you can use both syntaxes together in a page.

E-Mail Jonny Webhead

Generated by www.PDFonFly.com at 3/22/2010 3:38:58 PM URL: http://webhelp.org/html/index.html

Turn static files into dynamic content formats.

Create a flipbook