Starting HTML - Newbie Tutorial

Starting On HTML
For the Newbie (Newbee)

Here is a basic stepping stone to understand HTML code. This will get you started on making your web page.
The tutorial for how your site works is here. To use an editor to create HTML for you instead, resources can bee found here These will open in another window. ~Bee Spit~

TO START

Make a folder in your hard drive for your web page. Put all html files and graphics you will use in this folder.
Open Note Pad or Word Pad which is included in Windows Accessories. Or any text writing program with choice of file saving extensions.
Click File, then New. If choice of file type given, choose text (txt). Do not choose rich format or word document. You want to save it as you wrote it, and that is text (txt) (html).
You will save the new file when through with an html extension. Type it in if no choice given. Very Important! yourfilename.html
To view completed page: Find file, where you saved it, in windows explorer, double click and it will bring up a browser window and show it as a web page.
Then you can edit more, make another or upload to your file manager.
The main page of your site should be called index.html . This is what shows on the web as your home page.

INSTANT PAGE

This is a basic web page.

<HTML>
 <HEAD>
 <TITLE> My Web Page </TITLE>
 </HEAD>
 <BODY>

 This is my first web page!

 </BODY>
 </HTML>

PRODUCES -- >

This is my first web page!

CONTENT OF PAGE

Content is what you want on your page.
This all happens between the open body tag [ <BODY> ] and the close body tag [ </BODY> ]
This can be photos, text, graphics or links.
The color of the page, a background and the links colors happens in the open body tag. [ <BODY ___________> ]
Meta tags and Javascript happens between the open head [ <HEAD> ] and the close head [ </HEAD> ] tag.
The whole page is put between the [ <HTML> ] and the [ </HTML> ] tags.
That is the basics. Now we go on to arranging, spacing and linking.

BASIC TAGS

For text you want on your page, you simply type in what you want to say. The following codes along with font color and size help to arrange and enhance this text.
Most tags (code) need an open ( <tagname> ) and a close ( </tagname> ) tag on either side of the content/function you are using on your page. Some do not require the closing tag.

  - Puts a blank line on the page.
 - Puts a double blank line. Or with content between a  and a close  . (The close p is optional but required in style sheets. But don't bee concerned with that.)
 word(s) here  - Will make words placed between them bold print. words(s) here
 word(s) here  - Will make words placed between them print in italics. words(s) here
 word(s) here  - Will make words placed between them underlined. words(s) here
<center> Will center whatever you want on a page. When you want the centering to stop, place the closing center tag. </center>
Don't ask about blinking text. That is the worst thing to see on someones page. ;-)
More elaborate arranging and integration with graphics can bee accomplished with tables.
Table Tutorial.

FONT SIZE TAGS

If you do not designate a font size, the browser will generally default at 3.

 text  - Produces text
 text  - Produces text
 text  - Produces text
 text  - Produces text
 text  - Produces text
 text  - Produces text
 text  - Produces text

FONT COLOR TAGS

For the best cross-browser comptibility, color tags should use the hexidecimal code instead of the word for the color.
A color utility that will let you choose the color you would like and give you the hexidecimal code, can bee found here.

A few examples. Just change the six numbers per hex chart in link above, or other source.

<font color="#0000ff">BLUE</font>	produces	BLUE
<font color="#00ff00">BLUE</font>	produces	GREEN
<font color="#ff0000">BLUE</font>	produces	RED
<font color="#ffff00">BLUE</font>	produces	YELLOW

PUTTING GRAPHICS ON PAGE

Up load graphics into main directory or subdirectory
These are the basic tags. Arranging is accomplished with spacing or tables.

Basic tag: <img src="filename.extension">

With Size: <img src="filename.extension" width=n height=n>

With Border: <img src="filename.extension" width=n height=n border=n>

Using Alternate Tags: <img src="filename.extension" width=n height=n border=n alt="Description of Graphic or Function">

Using Subdirectory: <img src="subdirectory/filename.extension" width=n height=n border=n alt="Description of Graphic or Function">

Broken images

Check for spelling and consistent use of capitals and noncapitals
Make sure file is in location linked, such as main directory or subdirectory
Check that the extension is correct as .jpg or .gif
Remember, very, very large file sizes load slowly and may not load all the way.
Check actual graphic for file corruption

MAKING LINKS

Linking to a new page in your main directory

<a href="cwtut.html"> Crosswinds Tutorial </a> shows as Crosswinds Tutorial

Linking to a file in your subdirectory

<a href="visions/intro.html">Visions of the Universe</a> shows as Visions of the Universe

Linking to another website webpage

<a href="http://www.crosswinds.net/~webcrew/">Webcrew</a> shows as Webcrew

If you want the link to open in a new window add a target.

<a href="cwtut.html" target="_blank"> Crosswinds Tutorial </a> shows as Crosswinds Tutorial

PUTTING IT ALL TOGETHER

<HTML>
 <HEAD>
 <TITLE> My Web Page </TITLE>
 </HEAD>
 <BODY bgcolor="#0000ff">
 <center> 
 This is my first web page!  
 E-Mail Me click on envelope   
 <a href="mailto:beespit@animail.net"><img src="envelope.gif" width="14" height="15" alt="envelope" border="0"></a> 
 
 </center>
 </BODY>
 </HTML>

PRODUCES -- >

This is my first web page!

E-Mail Me

click on envelope

NEXT LESSON Basic Tables - arranging items on the page.

Crosswinds and Other Helpful Links

Please let me know if this is understandable or what else to include. Thank You.

Tutorial © Janet Boyd aka Bee Spit
Bee's Home Page