***Simple HTML Guide By: Chris Martínez a.k.a. iLL***
..::::.. ill.zero[at]gmail.com ..::::..
..::::.. www.zroenergy.net ..::::..
===============================================================================
How To Use this HTML Guide
----------------------------------------------------------------------------------------
Many things are explained in this guide, if you already know them, you might wish to
skip the first few sections and go straight to the tags. Notes are made between ..::
and ::.. So, if you see these little marks, there is always a note inside them.
The notes go to the tags or attributes above the note. If you are viewing this guide
in a browser you may press ctrl+f to find a specific element that you are looking for.
Now that you know how to use this guide, get going!
Introduction to HTML
----------------------------------------------------------------------------------------
HTML stands for Hyper-Text-Markup-Language. It is the basic language, or coding,
for webpages. It sounds hard to learn and it also looks hard to learn, but it is very
possible to learn HTML in a short time span. I will try to explain HTML in ways that
you can comprehend, but because I already know it, I may think you should know
some things that you don't and so I will, undoubtedly, confuse you a little. To
actually learn HTML, you need to use it.
How To Create a HTML Document
----------------------------------------------------------------------------------------
To begin a HTML document first open Notepad. There are many programs that can
be used to produce HTML documents, but I like to use Notepad as it is the fastest
and easiest. To create the HTML document type in the following HTML tags and save
the file as webpage.htm
<html>
<head>
<title>Title</title>
</head>
<body>
Your Name
</body>
</html>
The above looks like jibberish now, but it is actually very simple. The tag, <html>,
tells the browser that this is an HTML document. The tag, <head>, is where
information of the document is inserted. For example, the tag, <title>, is in the
head tag. The tag, <title>, is the title of your webpage, this title will go in the title
bar at the top of the web browser. The close title tag, </title>, tells the browser that
you are through with what the title tag. The close head tag, </head>, tells your
browser that the information in the head tag has ended. The open body tag,
<body>, is the tag that puts your content inside of the browser window. After
you are through entering some content, your name for example, you will close
the body tag, </body> and close the html document with the following tag, </html>.
Then you save your file and open it, if you have done this right, a browser will
open up with My First Webpage appearing in the title bar and your name inside
of the browser. If this happened, congrats, you just made your first webpage.
Producing the Webpage on the Internet
----------------------------------------------------------------------------------------
Now to produce your webpage on the internet, you first have to find a server.
There are many free servers on the internet. Below is a list of some.
Trap17 - http://www.trap17.com - the best!
Yahoo! Geocities - http://www.yahoo.com
MSN Groups - http://groups.msn.com
Angelfire - http://www.angelfire.com
..::note: Angelfire, Yahoo! and MSN do not allow full page customization::..
There are many more, but these are the most popular and best. I suggest you use
Yahoo! Geocities because it allows full editing. MSN Groups is probably the easiest
to use because you don't have to know HTML to make a webpage, but if you are
looking at this, you obviously want to use it! After you upload your webpage to the
internet, people all over the world will be able to see the work that you did! But,
you want people to look at your work and say, "Wow!" right? So continue reading this
HTML Guide and you will find out how!
===============================================================================
Tags and Attributes
===============================================================================
Basic Tags
----------------------------------------------------------------------------------------
<html> </html> Creates HTML Document
<head> </head>Creates Header of HTML Document
<body> </body> Creates Body of HTML Document
Head Attributes
----------------------------------------------------------------------------------------
<title> </title> Creates Name for HTML Document
<meta> Creates Information for the Document
Meta Attributes
----------------------------------------------------------------------------------------
<meta name="description" content="description here"> Creates Description for Search Engines
<meta name="keywords" content="keywords here"> Creates Keywords for Search Engines
<meta http-equiv="pragma" content="no-cache"> No Caches Page
..::note: the meta tags and attributes do not have to be one, they can be seperate::..
<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico"> Specifies Favicon
Body Attributes
----------------------------------------------------------------------------------------
bgcolor="purple"> Specifies a Color for the background
background="yourimage.gif"> Specifies a Picture that is used for the background
link="blue"> Specifies Color of Links
alink="green"> Specifies Color of Active Link
vlink="yellow"> Specifies Color of Visited Links
text="black"> Specifies Text Color for All Text
Text Tags
----------------------------------------------------------------------------------------
<i> </i> Creates Italic Text
<b> </b> CreatesBold Text
<u> </u> Creates Underlined Text
<h1> </h1> Creates Largest Header Text
<h6> </h6> Creates Smallest Header Text
Font Tag & Attributes
----------------------------------------------------------------------------------------
<font> </font> Font tag
color="orange"> </font> Creates Color of Font
..::note: you can change the color using name or hex value::..
size="1"> </font> Creates Size of Font
Graphical Tags
----------------------------------------------------------------------------------------
<img src="www.yoursite.com/imagename.gif"></img> Inserts Image into HTML Document
..::note: the image tag must always contain the src= attribute::..
<hr> Creates a Horizontal Rule
Image Attributes
----------------------------------------------------------------------------------------
src="www.yoursite.com/imagename.gif"> </img> Specifies the Source of the Image
..::note: the src= attribute is required for images::..
width="50%"> </img> Specifies Width of Image
height="50%"> </img> Specifies Height of Image
..::note: width and height can be done in percent or pixels::..
alt="Insert Caption for Image Here"> </img> Creates Caption for Image
border="1"> </img> Inserts a Border around the Image
Horizontal Rule Attributes
----------------------------------------------------------------------------------------
width="76%"> Specifies Width
height="67%"> Specifies Height
..::note: width and height can be done in percent or pixels::..
color="#000000"> Specifies Color
..::note: you can change the color using name or hex value::..
Anchor (Link) Tags & Attributes
----------------------------------------------------------------------------------------
<a> </a> Anchor (link) tag
<a href="http://www.link here.com"> </a> Creates a Link
<a href="#chris"> </a> Creates a link to something inside the document
<a name="chris"> </a> Names a link inside the document
..::note: to make a link you must enter a name for it between the open
anchor tag and close anchor tag::..
target="_blank"> </a> Specifies Place for the Link to Open
..::note: _blank makes the link open in a new window; if you leave the target attribute out,
the link will open in the same window or frame::..
Formatting
----------------------------------------------------------------------------------------
<center> </center> Centers Text
<p> </p> Creates Paragraphs
..::note: you can insert the attribute align=center, left, or right to align the paragraph::..
<marquee> </marquee> Creates Scrolling Text
..::note: direction of the marquee can be changed by adding the attribute
direction=up or down inside the marquee tag::..
<ol> </ol> Creates a Number List
<ul> </ul> Creates a Bulleted List
<li> Creates List Item
..::note: no closed list item tag is needed::..
Table Tags
----------------------------------------------------------------------------------------
<table> </table> Creates Table Tags
<tr> </tr> Creates a Table Row
<td> </td> Inserts Table Data; Table Cells
Table Attributes
----------------------------------------------------------------------------------------
border="0-?"> </table> Specifies the Thickness of the Border
bgcolor="#cccccc"> </table> Specifies Background Color
..::note: you can change the color using name or hex value::..
background="image.gif"> </table> Specifies an Image as the Background
align="center, left, or right"> </table> Specifies Where the Table is Located
cellspacing="0-?"> </table> Specifies the Spacing Between Table Cells
cellpadding="0-?"> </table> Specifies the Padding of the Cells
..::note: if the above is set to zero the word will be right on the border::..
===============================================================================
***Simple HTML Guide By: Chris Martínez a.k.a. iLL***
..::::.. ill.zero[at]gmail.com ..::::..
..::::.. www.zroenergy.net ..::::..
===============================================================================
All Content Produced by Chris Martinez.
You may not copy or transfer this guide anywhere without the expressed written
permission of Chris Martínez. To ask for the permission email me at the following
address: ill.zero[at]gmail.com If this guide is found to have been copied or transfered
anywhere, there shall be consequences. So just ask!
