HTML made real easy in 10 minutes or so

This page is designed to help you get started with HTML (Hypertext Markup Language). You can learn the basics of HTML in about 10 minutes. If you want to make a web page than this is the best way to get started. Typing HTML commands in your self will allow you to make web pages that open a lot faster than the ones you could make with Microsoft Word or any other HTML editor.

HTML is not an official programming language it is a way of describing how a set of text and images should be displayed to the viewer. A HTML file is really just a text file with ASCI or ASCII characters kind of like a batch file with dos commands. If you have note pad, Teach Text or Pico you can make a web page. You could also edit HTML in the dos editer; to open the editer just type edit at the comand prompt.

I have included a list of commands with examples and the basic make up of a HTML file.

Hear is the make up of a HTML file



Once you have read this you will be able to make a HTML file of your own in a text editor like note pad and then save it with a .html extension. I have writen all HTML tags in green so that you can tell them from my explanations or remarks.

This goes at the top of every web page.
<HTML>

This always comes next
<HEAD>

This is the title it will appear in the title bar when some one views your page.
<TITLE>Type the title hear

This is the end title tag. Every HTML Starting tag needs a ending tag or your site will be all jacked up.
</TITLE>

This is the starting style tag. Styles are used to pre format your site. You can pre define your font, what type of list you want to use, text indentions for new paragraphs and a lot more.
<STYLE>
OL{list-style:decimal}
P {text-indent:8pt}
</STYLE>

This tells the search engine what language your page uses. You can just use this for now. You do not need to change this unless you use java script.
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

This is where you type key words that describe your web page. Replace your keyword, 2nd keyword and 3rd keyword with key words of your own. If you want more keywords just type a , and a space followed by your keyword. You can probably have 100 of them if you want.
<META NAME="keywords" CONTENT="your keyword, 2nd keyword, 3rd keyword">

This is where you type the description of your site. This will be displayed when some one finds your site in a search engine.
<META NAME="description" CONTENT="Type the description hear">

This is the end HEAD tag. </HEAD>

The body tag is were you can change the colors of your font, background and link. The options are Silver, White, Gray, Black, Maroon, Red, Green, Lime, Navy, Blue, Purple, Magenta, Olive, Yellow, Teal, Cyan along with any color in hexadecimal; "#000000" is black and "#FF9473" is peach. The body tag is required with or with out the colors.
<BODY TEXT="Black" BGCOLOR="#e0e0e0" Link="blue">

You type your sites content after the body start tag.

This is how you type large text.
<H1> You can type big text like this </H1>
<H2> Or smaller text like this </H2>
<H3> Or smaller text like this </H3>
<H4> Or smaller text like this </H4>
<H5> Or smaller text like this </H5>
<H6> Or smaller text like this </H6>

This is the tag used to type regular text. The <P>, <BR> and the <IMG> do not require ending tags but you can use one any way if you want.
<P>

This tag is used to brake a line of text
<BR>

This is the tag used to display a picture on your web site. make sure that you put the picture you are using in the same folder as your HTML file.
<IMG SRC="your.jpg">

You can also align text and pics if you want. They can be aligned left, right or center.
<H1 ALIGN=center>This is large text centered</H1 ALIGN=center>

This would be a picture.
<IMG SRC="your.jpg" ALIGN=left>

With pics this is used to wrap text. If you want to wrap text type the tag before the text you want to disrupt and align the picture left or right.

This is how you make a list.
<OL>This is the start tag.
<LI>This is where you type your lists contents.
<LI>This is your second lists contents. If you want more just type <LI>.
</OL>This is the end tag.

This is a link to another page on your site
<A HREF="name.html">
text to be clicked on
</A>
End tag

This is the end body tag.
</BODY>

This is the end tag for your whole page.
</HTML>

This is a HTML file with out my coments

You can copy this and save it as a html file like this

  1. Cut and paste every thing from the <HTML> tag to its end tag into a text editor (note pad) Do not use Microsoft word.
  2. Save the file as html.html
  3. Open windows paint or a photo editor, draw something and save it as a japeg called smoke. Or you can just chang jpg <IMG SRC="smoke.jpg"> to work with an existing pic.
  4. Make sure every thing is in the same folder or the pic will not work
  5. Open html.html with a browser like Net scape or microsoft internet explorer. You can probably just doble click it.


    <HTML>

    <HEAD>

    <TITLE>
    Hi my name is
    </TITLE>
    <STYLE>
    OL{list-style:decimal}
    P {text-indent:8pt}
    </STYLE>

    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

    <META NAME="keywords" CONTENT="your keyword, 2nd keyword, 3rd keyword">

    <META NAME="description" CONTENT="Type the description hear">

    </HEAD>

    <BODY TEXT="Black" BGCOLOR="#e0e0e0" Link="blue">

    <H1>self destruct in t-</H1>
    <H2>5 seconds</H2>
    <H3>4 seconds</H3>
    <H4>3 seconds</H4>
    <H5>2 seconds</H5>
    <H6>1 seconds</H6>
    <BR>BOOM

    <P>What was I soposed to type

    <BR>Below is a picture

    <BR><IMG SRC="smoke.jpg">

    <IMG SRC="smoke.jpg" ALIGN=right>
    <H1 ALIGN=center>This is a nice pic</H1 ALIGN=center>

    <BR>
    <OL>
    <LI>learn html
    <LI>make a web site
    <LI>take over the world
    </OL>

    <A HREF="html.html">
    this link goes to this page
    </A>

    </BODY>

    </HTML>

    Hear are some tag's with examples


    <A HREF>


    Used to link to other sites.
    <A HREF="http://www.site_name.com>Text to be displayed</A>
    Or it can be used to link to a page on your site.
    <A HREF="site_name.html>Text to be displayed</A>
    You can also replace the text with a image by using <IMG SRC="pic.jpg>
    This is a example of a link the tag looks like this <A HREF="tech.html>Back to Technical stuff</A>
    Back to Science
    Note: You can also link to a spacific spot on a page by using a anchor.
    Anchors look like this <A HREF="#anchor_name">Text to be displayed.</A>
    That would link to this <A NAME="#anchor_name">Text that is linked to</A>
    This is a example
    <A HREF="jokes.html#short jokes">Check out short jokes.</A>
    Check out short jokes.

    <B>


    Used to bold text.
    <B>This is bold</B>
    This is bold

    For a compleat list of tags go to www.jmarshall.com
    Back to Science