Free Web Hosting Provider - Web Hosting - E-commerce - High Speed Internet - Free Web Page
Search the Web

Falcon



flame Greetings.... flame



Attention! By writing this I am in no way suggesting I have any friggin' idea what I'm doing. I'm merely passing on the limited (and flawed) knowledge that I have picked up over time. There is much I don't know. If you see anything you know is wrong here please send me an email. I don't like putting material up on my page that isn't correct.









    MORE STUFF TO LEARN

  1. How to use the 'mailto' email command
  2. How to make a bulleted list
  3. How to do a numbered list like this
  4. How to read so you'll be able to understand all this. Though hopefully if you've come this far that's not really a problem.
  5. How to do a link....which is simple. This picture is a link to my section about links, . When you're on the net and you go to a link that says 'can't be found', it's probably due to a spelling mistake of the page's owner.


Introduction

I hope you enjoy this little, demonstration, of mine...
and that it enlightens you as to the simplicity of the HTML language. ;)


    One of the few things people ever tell you is how to actually get started writing your own webpage, well, that's what I'm here to do. An html document is really just a text file that someone has saved, after adding '.htm' or '.html' to the end of the file name. The only difference between .htm and .html is that some servers require your pages be one or the other. Localaccess needs files to be '.htm' so that's what I always save mine as now. Which program you use to actually begin writing out the commands for your page is up to you, but I use (and would suggest) Notepad..it's simple and uncomplicated, saves it in plain .txt (text) format, and doesn't confuse you with a lot of fancy options you can't use here anyway. Just go to:
  1. Start menu
      Programs
        Accessories
          Notepad

So, once you've opened up a new notepad document you're ready to begin...


    Before I begin to teach you anything there are a few terms you have to know:
    1. Brackets
    2. Tags
    3. Properties
    4. Values


    '<' and '>' are brackets, put them together with something in the middle, and you've got yourself a tag, eg: <blink>. Tags in the plural sense come in beginning and ending pairs, so the tags for blink would be <blink></blink>. The backslash '/' key is what makes the ending tag of a pair. Within a tag you have the defining element that tells what the html document will be dealing, for example: <title> deals with the title, <body> deals with the body of the pages, <table> creates a table (discussed more later on). Now within certain tags you can define other characteristics such as size, color, alignment, etc...these are properties. In the example <table border="5" bordercolor="red">, 'table' tells what you'll be dealing with, the properties of this tag are 'border' and 'bordercolor', while '5' and 'red' are the values. Got it? If so, read on...if not, well read on anyway. You may catch on sooner than you think.



Back to top

BASIC PAGE OUTLINE




<html>
<head>
<title> Welcome to my page </title>
<script language="Javascript">
<!--
defaultStatus="Thank you for visiting!"
// -->
</script>
</head>
<body background="greenbkg.jpg" bgcolor="blue" link="#ffffff" vlink="48e1ff" alink="00ff00">
<object>
<embed src="closing-time.mid" hidden="true" autostart="true" nosave="true" loop="true">
</object>
<center> <img src="bluflame.gif" width="30" height="55"  alt="flame"> </center>
Welcome to the wonderful world that is my webpage...
have a seat, have a drink, then don't let the door hit you on your 
way out.
</body>
</html>


EXPLANATION:
    <html> is the tag that signals the beginning of all html documents. </html> signals the end.
    <head> begins the header, </head> ends it
    <title></title> - Sets whatever's inbetween them as the title
    <body> begins the main content of the document and is closed off at the end with </body>
      <body background="greenbkg.jpg" bgcolor="blue" link="#FFFFFF" vlink="48e1ff" alink="00ff00">

    Properties of the body tag.

      'background' contains the image source for the background (where it's found),
      'bgcolor' sets the background color, which will show through if you have any <hr>s on your page (horizontal rulers)
      'link' sets the color of your links.

    Colors can either be written out in their number code, or by stating the color. eg: link="white"

      'vlink' sets the color of visited links, while 'alink' sets the color of active links

    <embed src="closing-time.mid"> - gives source of midi or wav (name of file and where to find it if linking to a file from someone else's page). You either want to put the embeded sound between <object></object> tags, or end it with a </embed>. I wish I could tell what the difference is, or if it even matters, but I have a heck of a time with my midis. Not really my strongest point.

    Some properties of Embed

    loop="true" - loops the midi or wav
    loop="false" - plays midi once then stops
    hidden="true" - hides controls from viewer
    autostart="true" - makes it so midi/wav starts automatically
    nosave="true" - makes it so no one can save file (yeah, right...it's supposed to anyway)


    <img src="bluflame.gif"> - img src stands for image source, it states where to find picture
      alt="flame"
        Names picture so people who's browsers don't view pictures know what's there; shows it when mouse passes over picture for others

      width="30" height="55"
        sets the width and height of the picture in pixels


Back to top

Important points

Things you must always keep in mind are:

      All pictures, sounds, etc., that you code in to be view on your page, must be in the same folder as your HTML document or they will show up as a question mark.


    new
      Since I had to teach myself html and figure out how to do things alone, this is something I didn't find out until just recently. I should have thought of it myself, but I didn't. Once you have written out your page and saved it as an .htm or .html document all you need to do to work on it after that is click on the name of the file you want, hold down shift while right clicking, then select 'Open with'. Once a window has popped up asking which program you want to use to view the page you go to Notepad. MAKING SURE THE BOX IN THE LEFT HAND CORNER IS -NOT- CHECKED!! Once you've done whatever changes you want, just go up to file and save, then you're done!


      To make your notepad document an html one, just go up to 'save as' and type .htm or .html at the end of the file name. So your 'Hawk' notepad document would turn into 'Hawk.htm'.


      Names of html files, pictures, and sounds, can not have any spaces in them..though you can use -, _ , and a few other symbols to seperate words. Also, though HTML is not case-sensitive most of the time, file names are one of the exceptions and should be written exactly as they are.


      The <br>, which is the 'break' command, is your friend!! This is the only thing that will separate your lines. It's equivalent to the 'enter' key.




Back to top

Extras



      For scrolling statusbar, go HERE
      as of Mar. 27, '02!
STATUS BAR:

    Now, this really is easy enough to do. All that is required is that you write out a tiny little script for it within the <head>, </head> tags. This is:

        <script language="javascript">
        <!--
        defaultstatus="You'd be surprised how many people never learn to write down here...it's easy."
        // -->
        </script>


    Now what's all that mean you say? Well, in most browsers there is a built-in language called Javascript, nearly all of your really fancy webpage features are done with this language. With the first line of code, "<script language="javascript">" we're telling the web browser that the following lines are Javascript code and not html. The next line that looks like gibberish "<!--" is actually the most important feature, this hides the code from those who can't view Javascript. The "// -->" is the ending of this command. THIS IS THE MOST IMPORTANT POINT TO REMEMBER WITH HTML!!! Whatever you start, you MUST end! To end something you normally put a '/' in front of the command. So the underline command <u>, becomes </u> when you end it.

    If you see something you'd like to learn to do on someone else's page, view the source! To do this you just right click, go down to 'view source' and click. You'll get a new browser window that will show exactly how they wrote their page. Javascript is almost always at the top. Want to copy it? Simple! Highlight the parts you want (you'll notice if you right click 'copy' is not an option), then push ctrl C. This will copy it then you can paste it directly into your html text without worrying about whether you copied it exactly. .



Back to top


TITLE:
    Moving on, the title you set will show at the very top of your window in the colored strip. These little details help in making your page look more impressive than it is. You do this simply by typing whatever you like inbetween the <title>, </title> tags. The title tags are put within the <head>, </head> tags, as is the Javascript. See the basic outline for a better idea of what I'm talking about.


Back to top


SPACING:

    If you look at the source and find the last line you just read, you'll notice that I pushed enter inbetween 'See' and 'the', then again between 'better' and 'idea'. Nothing happened because the enter key doesn't mean anything here...in html codes you must add a <br> for a break. Otherwise the sentence will just continue on by itself and wrap around the screen. This makes the 'tab' button useless and indenting almost impossible!! But, if you have the right tools you can get around this. As you see my first paragraph is indented...so it can be done. I use the <ul> (unordered list) command to get my sentences away from the edge of the page.


If you don't use <ul>, you're words end up here...
    If you use <ul> once, they're here...
      and so on
        and so on...
</ul></ul></ul> But remember, you must keep track of how many you use for you have to end them all.

I also use an invisible picture a lot, that I made especially for the purpose of indenting paragraphs...and that I just used in front of 'I also'. You can have my spacer pic to use as well, just right click over the indentation of this paragraph, go to 'save image' and then use it for your page. To use, you place it as <img src="spacer.gif"> in front of what you want to be pushed out, and then vary how big of a space you get with the <img src="spacer.gif" width="10"> , <img src="spacer.gif" width="25">, etc, command, depending on what you want its size to be. Shrinking or enlarging it as much as you like. It takes a bit of fooling around with to learn how to mess with it properly, but it's useful to know.
Another way to indent is to put a <pre></pre> in front of whatever it is you want to indent, like I did in front of this paragraph. Just put as many spaces between the <pre> and </pre> as you'd like the paragraph to be indented. There is one major draw back to this of course...it isn't recognized by Netscape. However if you're just catering to the IE users it's a handy trick.

Back to top


ALIGN:

    There are various methods to align things, and first I'll start by explaining how to align text -

      To align text you can do one of two things, either give your writings the <p> (paragraph) tag and then use the <p align="right">, <p align="left">, commands, or you can put them in a table.


    Example of paragraph setup:
    (I've made the tags visible for you so you can see what I'm doing, without viewing the source)


<p align="center"> Hello, this paragraph is aligned to the center.</p>

<p align="left"> This paragraph is aligned to the left.</p>

<p align="right"> Hi, this is a paragraph aligned to the right. Everything you write in here will be shoved over to the right hand side and line up there, though this makes the rest of it look rather messy. I've never had any use for this command myself. </p>



<p align="left"> This paragraph is aligned to the left, again, a stupid command function. Words are naturally aligned left so why would you need to tell it to do that? Ya got me, but it's still a command if you want to use it. As far as I'm concerned it's just an awful waste of time though.</p>






    Pictures:

    To align pictures, all you need to do is give it an align attribute, which you put in the brackets. So in the end it'd look like <img src="picture-name.jpg" width="235" height="300" align="left">, <img src="picture-name.jpg" width="235" height="300" align="right">...

    Believe it or not there is a practical reason to align a picture to the left, even when writing nothing would put it there. Once you give a picture the 'align' attribute it will line everything else up along beside it so you can write around the picture. If you don't put an 'align' property you'll only be able to write directly above or beneath the picture. You say you don't want your picture right next to the edge of your page? No problem. Just use the command of hspace (it stands for horizontal space. There's also vspace, but I rarely use this). That way <img src="cupid-l.gif" width="84" height="106" alt="Cupid" align="left" hspace="20"> will give you:

    Cupid
    See, I can write anywhere along here that I wish now. A place offlimits if you don't put any align property to your pictures.





    Remember, there is NO <img src="picture-name.jpg" width="235" height="300" align="center"> command for pictures. You just put <center> before the <img src="picture-name.jpg" width="235" height="300">, and </center> after it.




      NOTICE:
        The <center> tags only work for Netscape!! I just found this out yesterday so now I have to go update my entire page. A way to get around this is with:
        <P align="center"><center>Hi, this is centered</p></center>
        This can (should) be seen by everyone.


      The align="center" command works quite a few things, such as <h2 align="center"> One instance where the align="center" command will not work just as well as the <center> tag is when it's being used for a TABLE. For tables it's best to write <table align="center"> then surround it with <center> tags as well. This is because Netscape does not currently support the <table align="center"> property. If you also put the <center> tags around your table it ensures that Netscape will center your table.




<img src="cupid-l.gif" width="84" height="106" alt="Cupid" align="center">

WRONG!
Cupid



Back to top
HEIGHT AND WIDTH ATTRIBUTES:



    One of the things you can do with pictures is resize them with the width and height attributes. These attributes go in the same brackets as <img src="picture.gif" width=10 height=20>. The 10 and 20 refer to how many pixels wide and high the picture is. Even if you're not resizing a picture at all, I would suggest you give the height and width attributes, it makes your page load quicker. To find out what size your picture is you can right click when your mouse is over it, then go down to 'view image'. In the title bar it will say 'picture.gif 123x300', this tells you the pics original size is width="123" height="300", which would mean you'd write:

    <img src="picture-name.jpg" width="123" height="300"> .


Back to top


Bulleted and Numbered lists




To do a bulleted list you use the <ul> (unordered list) command again, but with a difference...at each point you want a bullet you write <li> (stands for list). You do NOT end the <li> tag. There always has to be an exception to the rule:

    My bulleted list

  • Bullet one
  • Bullet two
  • Bullet three
Bulleted lists
    <ul><b>My bulleted list</b><br><br>
      <li> Bullet one
      <li> Bullet two
      <li> Bullet three
      </ul>

    My bulleted list

  • Bullet one
  • Bullet two
    • another bullet
      • yet another bullet
    • Bullet three
  • Bullet four

    <ul><b>My bulleted list</b><br><br>
      <li> Bullet one
      <li> Bullet two
      <ul><li>another bullet
      <ul><li>yet another bullet</ul>
      <li> Bullet three</ul>
      <li> Bullet Four
      </ul>



To do a numbered list you do the same thing except instead of using the tag <ul>, you use <ol> (ordered list).



Example
Type
Code
    My ordered list

  1. One
  2. Two
  3. Three
Arabic Numerals
<ol><b>My ordered list</b><br><br>
    <li> One
    <li> Two
    <li> Three
    </ol>

    My ordered list

  1. One
  2. Two
  3. Three
Capital Roman Numerals
<ol type=I><b>My ordered list</b><br><br>
    <li> One
    <li> Two
    <li> Three
    </ol>

    My ordered list

  1. One
  2. Two
  3. Three
Lowercase Roman Numerals
<ol type=i><b>My ordered list</b><br><br>
    <li> One
    <li> Two
    <li> Three
    </ol>

    My ordered list

  1. One
  2. Two
  3. Three
Capital Letters
<ol type=A><b>My ordered list</b><br><br>
    <li> One
    <li> Two
    <li> Three
    </ol>

    My ordered list

  1. One
  2. Two
  3. Three

Lowercase Letters
<ol type=a><b>My ordered list</b><br><br>
    <li> One
    <li> Two
    <li> Three
    </ol>


    Changing the number type

  1. doesn't alter
  2. the way
  3. the series occurs
  4. in the list.

<ol><b>Changing the number type</b><br><br>
    <li type=1> doesn't alter
    <li type=A> the way
    <li type=I> the series occurs
    <li type=a> in the list.
    </ol>

    My ordered list

  1. You don't have to start from 1 all the time
  2. or even continue on and on and on
    (skip to number 12)
  3. Ha!! I've jumped numbers
  4. and now am continuing on again...

    <ol><b>My ordered list</b><br><br>
      <li> You don't have to start from 1 all the time
      <li> or even continue on and on and on
      (skip to number 12)
      <li value=12> Ha!! I've jumped numbers
      <li> and now am continuing on again...
      </ol>



Back to top

Links


    To make a link you only need to have two things:

      1. A picture, word, or phrase you want them to click on to get there
      2. A destination url


    Once you have these two things you can begin. First you put the url in the tag used for links, which is <a href="">. If I were linking to my webpage I would write:
<a href="http://www2.localaccess.com/darkwolf">Darkwolf's lair</a>
or
<a href="http://www2.localaccess.com/darkwolf"><img src="paw.gif" border=0></a>


In the end all that gibberish would look like:

What does all this really stand for? Well, the 'a href' is saying 'attach hypertext reference' (At least as far as I know. I've never actually read what it stands for, but it makes sense to me). Either the text or picture you put between the tags is what the link is 'attaching' to, and the ending </a> tag is signaling the end of the attachment...if you forget this last bit everything on your page will be underlined as a link.

    Note: In the image tag there is the attribute of 'border=0', when this is added to a picture being used in a link it will make the normal link border disappear.

An external link (one that goes to a different page) isn't the only kind there is, you also have 'target links'. This whole page is full of them in fact. To make one of these you first have to name the area you want them to go to, and you do this with the <a name="chosen_name"></a> tags. Do NOT put anything in the middle of these tags or you'll be in grave danger of having it not work. This is only need to link to an area, not a specific target such as a word or picture.

Once that's done you need only put a link to it on your page by writing the following:

<a href="#chosen_name">click here to go up a few lines</a>



Make sure if you have a capital letter in the a-name, you put a capital letter in the 'a href' link. I use only lower-case letters so I don't have to think about whether the first letter was big or not.

Of course once you learn all this stuff you can get real fancy and link, not only to a different page, but to a target link on a different page by putting:

<a href="http://www2.localaccess.com/darkwolf/mpoem.htm#whip">Link to a target poem on one of my other pages</a>


Back to top


Tables



Tables are best learned by listing the properties first, then showing how to use them...at least that's what I think. To start out with you have the ordinary <table> tag, to which you add the various attributes you desire.

Within the 'table' brackets you can put:

  • <tr> - tag for table row
  • <td> - tag for table data
  • <caption> - sets caption for table. Can add valign and align properties within brackets.
  • hspace=30 - sets the table 30 pixels away from it's horizontal surroundings
  • vspace=20 - sets the table 20 pixels away from it's vertical surroundings
  • border=3 - sets border size
  • bordercolor="red" or bordercolor="#FF0000" - sets border color
  • cellspacing=4 - sets amount of space between border and cellpadding
  • cellpadding=2 - sets amount of space between cellspacing and the table data
  • bgcolor="white" or bgcolor="#FFFFFF" - sets background color
  • background="picture_name.jpg" - sets background in table


    Within the <td> brackets you can use the properties:

  • colspan=2 - makes that section span across two columns
  • rowspan=3 - makes that section span across three rows
  • nowrap - sets it so the table data of a cell (everything in a set of 'td' tags) won't be broken up
  • width="40" or width="40%" - sets width of individual cell
  • valign="top", valign="center", valign="bottom", valign="baseline" - (stands for vertical align) aligns cell's content to top, center, bottom or bottom edge
  • align="left", align="right", align="center" - aligns cells contents to the left, center, or right


    Within the <tr> brackets you can use the properties:

  • valign="top", valign="center", valign="bottom", valign="baseline" - (stands for vertical align) aligns cell's content to top, center, bottom or bottom edge
  • align="left", align="right", align="center" - aligns cells contents to the left, center, or right


    Between the <table></table> tags go three main things, the <tr></tr> tags, the <td> </td> tags, and whatever you want to put in the table. <tr> stands for table row, while <td> stands for table data. The table content is always written within the 'td' tags. The 'td' tags always go between the 'tr' tags, and the 'tr' tags, in turn, go between the table tags. However many 'td' tags you have within a 'tr' pair is how many columns you'll get. However many 'tr' tags you have within a table, will be how many rows you get in the end.



Just a little caption
Whatever...blah blah blah something something something
More stuff Still more stuff Aaaaand I think I'm done.


Table Example Code

<center> <table border=8 align="center" bordercolor="green" cellspacing=3 cellpadding=6 background="cupid-l.gif">
<caption align="top"><font color="white">Just a little caption</font></caption>
<tr>
<td colspan=2>
<font color="white">Whatever...blah blah blah</font>
</td>
<td>
<font color="white">something something something</font>
</td>
</tr>
<td>
<font color="white"> More stuff</font>
</td>
<td>
<font color="white"> Still more stuff</font>
</td>
<td>
<font color="white"> Aaaaand I think I'm done.</font>
</td>
</table> </center>


    Eh, this is enough for you for now. If you want to learn more go look it up on the web.;-)

Back to top






    However interesting tables might be when used the normal way, they have many more uses that are even more helpful to the webpage's author. There are ways to align pictures and text with tables that can't be done any other way. But you say you don't people to see the table? They won't. When starting your new table you begin as before, with the <table> tag, only this time you change the value of the properties contained within the brackets (in the property of border=8, the value is 8). The new tag you want to use is <table border=0 cellspacing=0 cellpadding=0>. This will make a completely invisible table, but you still need to remember to properly put in the 'tr' and 'td' tags.

This is a table...


What's so impressive about that you say? I mean come on, it looks the same as ordinary text. Well that is true, when you leave it aligned to the left, and if you put it in a table just for that it would be an awful waste of time. However, it's with tables that you can center, and align things to the right, without messing up the way the text looks. You know what I mean, when you end up with two words at the end of a paragraph all by themselves that are centered and just look stupid. And aligning text to the right never looks nice...unless you use a table. This, by the way, is in a table also. Aligned to the right. You can align a table either to the left, right, or center by putting 'align="left"' in the table brackets. eg: <table border=0 cellpading=0 cellspacing=0 align="right">

There is one major problem to aligning tables though, you'll have to put a lot of <br>s after them, to stop them from running over top of the other material on your page.



















Perhaps the most useful text use for tables is that fact it allows you to do columns, otherwise it's basically impossible. With a table though you can have as many columns as you'd like, and then align them to the center, left, or right, by putting 'align="left"' in the table brackets as we have been doing. Whenever I'm aligning a table to the center I put the <center> tag before the table tag, then the closing </center> after </table>. This way I don't have to worry about whether it will run over other material on my page. Go see the correction on aligning tables to the center.




Text Aligning Table Example Code



      <center> <table align="center" border=0 cellspacing=0 cellpadding=50>
      <tr>
      <td width=25 valign="top">
      <font color="green"><b>
      Perhaps the most useful text related use for tables is that they allow you to do columns, otherwise it's basically impossible. Setting the cellpadding property high gives you space between the columns.
      </b></font>
      </td>
      <td width=250>
      <font color="green"><b>
      With a table though you can have as many columns as you'd like, and then align them to the center, left, or right, by putting 'align="left"' in the table brackets as we have been doing. Whenever I'm aligning a table to the center I put the <center> tag before the table tag, then the closing </center> after </table>. This way I don't have to worry about whether it will run over other material on my page. Go see <a href="#tablecorrect"> the correction</a> on aligning tables to the center.
      </b></font>
      </td>
      </tr>
      </table>
      </center>



Back to top


Mailto



One thing most people end up putting on their pages are links that allow people to email them by clicking on a link, normally it's a cute picture of a letter or something like that. To do this you merely have to write:
    <a href="mailto:d-wolf@rocketmail.com"><img src="email-pic.gif" border=0 alt="Email me at d-wolf@rocketmail.com"></a>

This is a fairly new function of browsers and many people can't use it. So, to be polite (you want to get all those glowing compliments don't you?) tell them your email addy!! If you include it in the alt name that should be good enough. You've done your duty as far as I'm concerned.;-)

Back to top


INDEX
(File names given here are just examples, you'd fill in the values yourself)



  • <img src="picture-name.jpg"> - puts in picture
      Properties:
        alt="Cupid" - whatever you want people to see when their mouse passes over it
        width="20" height="30" - defines width and height of picture in pixels
        border=0 - gets rid of border when picture is used as a link
        align="left", align="right" - aligns picture to left or right.
        ALIGN="CENTER" DOES NOT WORK

  • <font color="red"> or <font color="#FF0000"> - sets font color to red

  • <body bgcolor="#000000"> or <body bgcolor="black"> - sets background color to black

  • <body background="http://www2.localaccess.com/darkwolf/cupid-l.gif">
    or
    <body background="cupid-l.gif">
    sets background picture


  • <embed src="midiname.mid"></embed>
    or
    <object><embed src="midiname.mid"></object> <--- Embeds midi or wav. More info


      Properties:
        autostart="true" - autostart plays midi or wav
        loop="true" - loops midi or wav so it plays constantly
        loop="false" - plays midi or wav once then stops
        width="20" height="30" - sets height of sound controls
        hidden="true" - Hides sound controls from viewer
        nosave="true" - makes it so you can't save the sound file (at least they wish it did)
        TARGET="panel" - I believe it makes it so instead of being attached to your page a separate window pops up for the midi and plays while they're surfing through your page, if they don't close it out that is.


  • For Internet Explorer you would put:

      <BGSOUND SRC="midiname.mid" AUTOPLAY="TRUE" LOOP="INFINITE" HEIGHT=16 WIDTH=16>

      Putting both the embed and the bgsound commands will ensure most people will hear your sounds, but there's no way you'll ever make it so everyone can. If you want to put a wav up you just replace the 'midiname.mid' for 'wavname.wav'.



Back to top



Well, good luck with your HTMLing!!!
I'm sure this is probably enough for now...

Email any questions you may have to me.....preferably while you're connected to the internet..... ;)




    flamepawprint

    Darkwolf

    brokenpain@hotmail.com

    ~Accepted outcast, beloved enemy, keeper of the free...destined to have no destiny~



Stuff!!
About me
Poetry
Artwork
 Characters

The Dark
Main Page
The Cafe
WebRings
Guestbook

 Quotes, etc
Air Force Page
HTML Tutor
Backgrounds
Wolf page

Email me at brokenpain@hotmail.com