| Title: | Beginners HTML Tutorial |
| Author: | Mindless Puppetz :: A.K.A. Sean Isley |
| Site: | 10-96 Designs |
| E-Mail: | sean@1096designs.com |
The Only thing you will need to edit in this Tutorial will be colored in RED
The BLUE colored text are my comments and can be removed, i will use standard HTML commenting code, though, so it is not necessary
<HEAD> <!-- This will start the document header -->
<TITLE>Your TITLE Here</TITLE> <!-- This is where you will type your title -->
<!-- The HEAD of the document can also contain other scripts to help your document do extra things, but you'll have to read my Intermediate Tutorial to find out more about those. -->
</HEAD> <!-- End your document HEAD -->
<!-- This next tag is the BODY tag. It tells the browser that the main content is coming. -->
<!-- There are many things you can do to the body tag, but we will focus on two: BACKGROUND & TEXT -->
<BODY bgcolor="white" text="red">
<!-- The BGCOLOR tag will define the color of background you want, you can use color names (white) or hexadecimal color coding (#FFFFFF) -->
<!-- This goes for the TEXT attribute, also. It defines the color of your overall text -->
<!-- Now is the FUN part, this is where you get to put all of your site content. -->
<!-- Here is where we get to learn all the basic HTML tags to help you along the way-->
<b>This Will BOLD your text</b>
<i>This Will ITALICISE your text</i>
<u>This Will UNDERLINE your text</u>
<!-- now comes some simple paragraphing codes -->
<br>
<!-- The BR tag, or BREAK tag, will do a simple line-break for you-->
<p> or <p align="right"> Your Text Here </p>
<!-- The P tag, or Paragraph tag, will put your text into a paragraph style-->
<pre>Your Text --- Here</pre>
<!-- This tag is somewhat dangerous, but sometimes handy. It will "pre"-format your text for you, so what ever you do to your text, it shows (spacing, multiple lines, etc...)-->
<!-- Now for some font tag and attribute fun -->
<font color="red" face="FONT FACE HERE" size="+2">Your Text Here</font>
<!-- The font face is where you will put the name of your font (Arial, Comic Sans MS, Times New Roman). The color is self explanatory, and the size you can use it like +1,-3 or like 10,36, depends on what you want -->
<!-- Here are some simple link rules and attributes -->
<A href="http://goretexdesignz.com" target="_blank">Goretex Designz</a>
<!-- the HREF attribute is where you want to put the link URL, this does not work for documents located on YOUR PERSONAL computer.-->
<!-- the target attribute is where you want the document to show when clicked. _blank makes a new browser open. _self makes it open on the same page/frame window. and _parent makes it open in the same browser, but if located inside a frame it will open OVER the frames content-->
<A href="mailto:yourname@yoursite.com">E-Mail Me</a>
<!-- this is a standard Email link, just edit the email and clickable text to make it your own-->
<!-- Now for some IMAGE fun -->
<IMG src="http://yoursite.com/images/yourimage.jpg" width="400" height="150" border="1" alt="The text that shows up when the cursor is over the image. REQUIRED!">
<!-- This is a standard IMAGE code. src is where you want to put the image URL. width is the width of the image in Pixels. Height is the height of the image in Pixels. Border is where you specify the border thickness in Pixels. Alt is the text that shows up on mouse-over, this tag is required by coding standards, even though it seems pointless sometimes.-->
<!-- Now we will learn a few listing techniques -->
<ul> <!-- this is an U-norderd L-ist, UL -->
<ol> <!-- This is an O-rdered L-ist, OL -->
<li> <!-- This is the L-ist I-tem, LI -->
<!--Here is a list of 'type's:
A
a
I
i
1
disc
square
circle
you can make each <li> have a different type <li type="A">
or you can make the whole list have the same type <ol type="square">
this type is mainly for the O-rdered L-ist <ol>
remember the end each <li> tag (</li>) and your whole list (</ol>)
-->
<!-- EXAMPLE: -->
<ol type="disc">
<li>Bananas</li>
<li>Apples</li>
<li>Pears</li>
</ol>
<!-- Now we need to end our BODY and HTML tags -->
</BODY>
</HTML>