PyroGuy's HTML Guide
| THIS PAGE | OTHER PAGES |
|---|---|
| Introduction|Information|Basic HTML|Images & Links|Lists | Index|Links|Video Games|Survey Results|Music |
| INTRODUCTION |
|---|
| Welcome to my HTML guide. I've been planning this for a long time and I'm finally making it. First I will explain all the simple HTML, like blinking, underlining, italics, heading sizes, etc. After that section I've written about how to make links, local links, mailto links, and put images. The next section will probably be font tags. Later, I'm not sure when, I might explain how to make tables and more compicated HTML. Hope you can learn a lot from this, and have fun trying out new ! |
There are some basic things you should know about HTML before you get started trying it out. Any HTML tag is always written in these < > brackets. This doesn't mean that you can't have more than one HTML tag in one set of brackets; they have to be the same type, though (I'll explain more about that later). In order for HTML to work in a text area, you must write <html>before any of the HTML. There are two types of HTML--tags that must be closed, and tags that can remain open. The tags that must be closed are tags like <i>. That tag is written to put the following writing in italics. To end the italicized writing, </i> MUST be written. An example of a tag that can remain open is <hr>. This puts a line accross the page like this:
This tag does not need to be closed; </hr> does nothing. The hr tag simply puts down a horizontal bar. Basisically, tags that cause something (writing, page layout, etc.) to be different than they normally are must have /whateverHTMLtagitwas written in brackets to return the rest of the page to normal. But if the tag just puts something down (i.e. an image), nothing needs to be written after the tag. When you write <html> to be able to use HTML, at the end of the text area, you write </html>. Usually, on a web page,the very first thing in your text field will be <html>, and the very last writing will be </html>. This does not mean that you can't write normally on your page; it simply allows you to use HTML wherever you like.
Here I will compose a table of basic HTML tags, like how to change writing and make headings. This stuff should be pretty easy to learn, and if you use it right, you can get a web page to look pretty cool. All of the basic HTML listed in this section must be ended after the writing to be changed ends. That is, you must write </theHTMLtag> in order to end the space they will affect. Simply write a slash and then the exact same tag, with no spaces, inside the <> brackets.
| HTML Tag | Effect |
|---|---|
| <b> | makes writing bold |
| <i> | italisizes writing |
| <u> | underlines writing |
| <tt> | default Courier/typewriter font |
| <blink> | |
| <h1> | heading size 1 |
| <h2> | heading size 2 |
| <h3> | heading size 3 |
| <h4> | heading size 4 |
| <h5> | heading size 5 |
| <h6> | heading size 6 |
The <tt> tag is a default tag to put the writing in typewriter, or Courier font. This is considered default on the web, because there's another way to do it, along with changing writing to other fonts as well, thats' more complicated. I'll explain those when I make the font tag section. The heading tag text differs from regular text, besides a size changed designated by using a number from 1-6. The heading text is actually a different font than normal text, but the change isn't very significant. And the heading tag always puts a skipped line after the heading; The next text will not come out on the next line, but the line after the next line.
Images
To put an image on your page, write <img src="http://www.theaddresstotheimage.gif"> or <http://www.theaddresstotheimage.jpg>, depending on if the image is a gif or a jpg. This will put the image on your page. It will not automatically come out centered or on the next line, unless it's too big to fit on the line. For example, to put a fire image from Angelfire's image gallery, I'd write <img src="https://www.angelfire.lycos.com/doc/images/icons/fire.gif">, since it's a gif image.
This is what it turns out looking like: 
It's that simple.
Image Switches
There are a few tags which can go in the <img> tag besides just writing the source. A commonly-used one is <img src="imagesource" alt="alternatetext"> Writ alt= after the image tag and then whatever text you write before you end the quotes (or before a space if you don't use quotes) will show up instead of the image on text browsers that can't read images. Also, on many new browsers, the alternate text will pop up in a little window when the mouse cursor is moved over the image. Another image switch is <img src="imagesource" alt="alternatetext" width="anumber" height="anumber"> Use a digit number for the width and height of the image if you want to change it from what it's at. The number represents the number of pixels high or wide the image will turn out. If you want to go by how much of the page the image will cover then write a % (percent) sign directly after the number in the quotes or before the space. This sets the percent of the regular viewing area width or height the image will take up. If you don't want to bother about making sure the image doesn't become distorted, then just write the number for one of the dimensions (I usually use width), and then the image will stay proportional; that is the height will then increase so that the image retains the same proportions as the original smaller/larger one.
For the image below, I've used the HTML <img src="https://www.angelfire.lycos.com/doc/images/icons/fire.gif" alt="This Page is Hot!" width="10%">
Links
Basic Links Images as Links Now that you know how to put images on your page, and how to create links, this should be very easy. It should also seem sensible, so sensible you should be able to figure it out if you think really hard. But I'll tell you how anyway. First write the tag to create a link--write <a href="http://address.com"> to start the link. But instead of writing the name of the site, or a description, as what to click on, write <img src="addressofimagetoclickon.gif">. Then, of course, after the image address, write </a>. For example, if I wee putting an image as a link to Angelfire, I'd write:
An easy way to organize related information on the World Wide Web is by creating a table. This looks proffessional, and can be used for many things, including contents, lists of links, etc. There are several different types of lists, but since they're all so similar, I won't have a separate section for each of them. To make a basic list, use the following HTML: Click here for links to other HTML guides, or here if you're in the Frames Version.
If you have any questions or comments on HTML, or any of my other pages, please E-mail me your concerns at jarisky@hotmail.com or pyroguy@angelfire.com. You are the
To write a link to a page on your page, write <a href="http://theaddresstothelink.com"> or <a href="http://theaddresstothelink.net">, or .edu, or whatever it ends with. My point is, you have to write the complete address. You can't leave out the http://, or just write angelfire.com, for example. You have to write the whole address. After that, write the title of the page, or whatever writing you want the reader to click on to go to the link. When that writing ends, write </a> to end the link writing. The HTML looks like this (in this example I use Angelfire as the link):
<a href="http://www.angelfire.com">Angelfire Communications</a>
The link turns out looking like this:Angelfire Communications
Mailto Links
A mailto link is a link that when clicked on will open up the E-mail window with the E-mail address written in the mailto link written in the "To" space. They're very easy to make, almost as easy as regular links. The HTML is written as follows:
<a href="mailto:e-mailaddress">E-mail address/writing to click on for mailto link</a>
If I were writing a mailto link for myself and wanted my net name to be the writing to click on for the mailto link, I'd write:
<a href="mailto:pyroguy_@hotmail.com">PyroGuy</a>
This looks like: PyroGuy
Usually, your e-mail address, your name, or "E-mail me" is written for the writing to click on for the link, but you can write whatever you want. Basically, mailto links are created the same as regular links, except write mailto: right before the E-mail address.
Local Links
Local links are links on a page to a different section on the same page. I've seen this said, and I know it's true: local links are the hardest type to learn, but really easy once you do. In a local link, what you're doing is creating a keyword in a link, and then using the same keyword in a different place on your page in a slightly different HTML tag to specify where the local link will take you. You start out writing a normal link, but for the address of the link, write "#keyword". The keyword can be anything, but I suggest it as the name of the section the local link goes to, to avoid having to remember any extra words, since you'll be using the keyword later. Then write the text to click to take you to the other section, and then, of course </a> to end the link text. For the section you want the local link to take you, write <a name="samekeyword"> at the beginning of the section. If the section has a heading, you should probably write that before the header, so the reader can see the name of the section they're at, since it's on the page. Sounds complicated? This is the HTML for it all. The example I'm using is what I might put at the top of my page in the contents to go to the "local links" section.
<a href="#locallinks">Local Links</a>
<a name="local links">Local Links
Note I used a heading for the section; this is not neccessary, but helpful. Note that after <a name="keyword"> you don't have to write </a> since the local link takes you farther down on the page (or further up), and you don't need to end where it takes you to, since web pages can always be scrolled up and down. That HTML would turn out looking like this:
Local Links
which would take you here.
Note that I used the name of the section as the keyword to avoid myself confusion, but that's not absolutely neccessary.
<a href="http://www.angelfire.com"><img src="https://www.angelfire.lycos.com/doc/images/afc003.gif"></a>
It would look like this: 
You can put an image as what to click on for local links and mailto links, too, using the same method. It's also sometimes helpful to include an image and text as what to click on for a link. In this case you write the address to an image, and the name/description of the site in between <a href...> and </a>. That looks pretty cool. So now you can make an even more awesome web page since you know how to make three different kinds of links, and images.
<li>what you want to go on first line of list<li>what you want on second line
<li>you get the idea
<li>you can have as many lines as you want
</l>
The <i> tag, of course, stands for list. The <li> tag stands for list item. Note that you don't have to write </li> because the next list item will automatically cancel the previous, but you do have to write </l> at the end of the whole list. Also, when starting a list, the first list item is automatically put on the line after the previous text, but after the list, writing will turn out on the same line as the last list item.
person to visit my HTML guide since Friday, July 11, 1997.