Absolute Basic HTML Writing
This will be part one of a multi-part HTML tutorial.
Please don't post advanced HTML replies to this article.
This tutorial is specifically written for beginning HTML writers.
Requirements:
[/tab]Software: Web Browser, HTML Editor.
[tab]Skills: Ability to press the keys on the keyboard.
Any web browser will work as long as it can open files saved on your hard drive.
-> Netscape and Internet Explorer are both free and easy to use.
Any HTML editor will work as long as it is an HTML editor and not a web page design program.
-> The difference between the two is who actually writes the code.
--> If the user writes the HTML code the software used is and HTML editor.
--> If the user arranges the look of a page and the program writes the corresponding HTML code, the software used is a web page design program.
You're here to learn HTML so you'll need an HTML editor. An HTML editor can be any text editor that will allow you to save your files with the .html extension.
For now, Notepad will do just fine as your editor. I assume that Mac still has a Notepad program.
<--------------------------------------------------------------------------------------------------->
Now a little background about HTML.
Hyper Text Markup Language is the language developed to display information on the internet in a format other than plain black text on a white background.
HTML requires the use of tags. A tag is a trigger that tells the browser what to do with the information between the opening tag and the closing tag.
For Example:
CODE
<CENTER>Center this text!</CENTER>
Here the "center" tag is used to place text evenly between the left and right sides of the window like below:
This Text is Centered!
With very very few exceptions, ALL open tags must be closed! Again, ALL open tags must be closed!
For the "center" tag, the opening tag is <CENTER> and the closing tag is </CENTER>. the slash must be included in all closing tags and ommited in all opening tags.
A Few More Samples:
CODE
Align to the right is: <RIGHT> Text </RIGHT>
Align to the left is: <LEFT> Text </LEFT>
Bold text is: <B> Text </B>
The HTML tag is: <HTML> Code </HTML>
Align to the left is: <LEFT> Text </LEFT>
Bold text is: <B> Text </B>
The HTML tag is: <HTML> Code </HTML>
Just remember, ALL open tags must be closed!
<--------------------------------------------------------------------------------------------------->
The first tag that you have to use in all webpages is the HTML tag. Failing to insert this tag before your code will result in everything being shown to the user. This is because if you don't tell the browser the the page is html, the browser automatically assumes that the page is just text.
"<HTML>" Tells the browser that everything that comes next is coded in HTML until the </HTML> tag is reached.
Step 1: Open and close HTML.
CODE
<HTML>
</HTML>
</HTML>
The next thing you'll need is a head. The HTML head holds very important information about your web page but for now it will only hold its place.
The head tag is <HEAD> and tells the browser that everything that follows belongs in the head area of the web page until the </HEAD> tag is reached.
Step 2: Open and close head.
CODE
<HTML>
<HEAD>
</HEAD>
</HTML>
<HEAD>
</HEAD>
</HTML>
Inside your head tag you can place the title tag.
Step 3: Add a title
CODE
<HTML>
<HEAD>
<TITLE>
Here is my first web page!
</TITLE>
</HEAD>
</HTML>
<HEAD>
<TITLE>
Here is my first web page!
</TITLE>
</HEAD>
</HTML>
After you head tag comes the body tag. The body tag contains all of the information that is displayed in the browser window.
Step 4: Add a body
CODE
<HTML>
<HEAD>
<TITLE>
Here is my first web page!
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
<HEAD>
<TITLE>
Here is my first web page!
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Now add your content between <BODY> and</BODY>
Step 5: Add your content
CODE
<HTML>
<HEAD>
<TITLE>
Here is my first web page!
</TITLE>
</HEAD>
<BODY>
Place your content here!
</BODY>
</HTML>
<HEAD>
<TITLE>
Here is my first web page!
</TITLE>
</HEAD>
<BODY>
Place your content here!
</BODY>
</HTML>
Cut and paste this code into your HTML editor and save as firsthtml.html and open with your browser. You'll see that you have created your first web page although it's not very pretty and it just says "Place your content here!".
Help for saving and viewing your HTML documents is located at the end of this article.
This is the absolute minimum code needed to create a properly working web page.
Next play around with you formating a little like so:
CODE
<HTML>
<HEAD>
<TITLE>
Here is my first web page!
</TITLE>
</HEAD>
<BODY>
<CENTER>
My First Page.<BR>
</CENTER>
More text here.<BR>
</BODY>
</HTML>
<HEAD>
<TITLE>
Here is my first web page!
</TITLE>
</HEAD>
<BODY>
<CENTER>
My First Page.<BR>
</CENTER>
More text here.<BR>
</BODY>
</HTML>
The <BR> tag means line break and is one of a very few tags that does not reqiure a closing tag.
Next we'll add a link to another page or site. A link is actually called an anchor and thus the tag is <A> to open and </A> to close.
The tag actually will require some formating of its own as seen below.
<A HREF="http://www.astahost.com">Sample Text</A>
"A" is the tag type.
"HREF" is an argument that tells the browser that this anchor is Hypertext REFerencing whatever is after the equal sign in quotes.
The "Sample Text" is the text that can be clicked on to take you to "http://www.astahost.com".
***See note at bottom about the definition of "HREF".
Here it is in your you code:
CODE
<HTML>
<HEAD>
<TITLE>
Here is my first web page!
</TITLE>
</HEAD>
<BODY>
<CENTER>
My First Page.<BR>
</CENTER>
More text here.<BR>
<A HREF="http://www.astahost.com">Sample Text</A><BR>
<A HREF="http://www.paypal.com">Click here yo go to PayPal!</A><BR>
</BODY>
</HTML>
<HEAD>
<TITLE>
Here is my first web page!
</TITLE>
</HEAD>
<BODY>
<CENTER>
My First Page.<BR>
</CENTER>
More text here.<BR>
<A HREF="http://www.astahost.com">Sample Text</A><BR>
<A HREF="http://www.paypal.com">Click here yo go to PayPal!</A><BR>
</BODY>
</HTML>
Okay, that should do for now.
This tutorial is just a basic reference for beginners and will be referenced in future tutorials.
I just wanted to break the ice and provide some HTML comfort for more advanced topics.
File Saving And Viewing Instructions Here!
To save an HTML file in Notepad:
Click File and then Save As
Type your name and make sure that the .txt is gone and that the file name ends with .html --> like:myfile.html
Then where it askes for file tye change from Text Documents (*.txt) to All Files
Click Save.
Remember which folder you saved the file in, probably in My Documents.
To view an HTML page with Netscape:
Click File and then Open File.
Browse to the location of your html file and choose open.
To view an HTML page with Intenet Explorer:
Click File and then Open and then Browse.
Browse to the location of your html file and choose open.
*** HREF Note:
I corrected this definition after microscopic^earthling reminded me of what the "H" stood for in HREF.
My thanks to microscopic^earthling.
Happy Coding
vujsa
