To begin open NotePad if you are using windows or any other text editor if you are using another system. Just make sure whatever you're using to type your page will save a file as a text only document.
In HTML commands are placed inside < > signs and commonly called tags. These are the basic tags and they are required to cerate an effective web page.
The first tag that anyone should learn is the comment tag. It look like <!-- comment -> and can be used anywhere in a web page. It doesn't show up in the browser and has not effect on HTML coding. So why is the tag so important? Good designers and programers alike use a lot of comments. Comments art basically note to yourself or anyone eles who may be editing your code later. Though comments are not required I would suggest you get use to using them regularly right from the start. I will use them though out this tutorial to explain tags and other aspects of the HTML coding as we go along.
Basic Tags for HTML Documents
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- Tells the browser the type of document to follow ->
<HTML> <!-- Tells the browser the language to be used in the document is HTML starts here and opens the HTML in the document ->
<HEAD> <!-- Holds pertinent information about the document to follow. ->
<TITLE> Your Title </TITLE> <!-- Tells the browser the title of document to follow and is used by search engine and shows up in the search engine list. ->
</HEAD> <!-- Closes the head tag. ->
<BODY> <!-- Opens the main body. ->
</BODY> <!-- Closes the main body. ->
</HTML> <!-- Closes the HTML in the document ->
Notice I say "Closes the HTML in the document," that's because you could start another HTML document right after this tag. We could also add any amount of notes after the </HTML> and they would never be see in the browser.
That said, enter the follow code in your text document.
| <HTML><HEAD><TITLE>My First Web Page</TITLE> </HEAD><BODY> This is my first web page </BODY></HTML> |
Now save it as template.htm, save it in a folder or directly named, MyWebPages. Of course, you can use whatever name you want for your files and folders, these are just suggested. When you do start building pages for your site it's a good idea to give them names the make sense. For example, in the page is about yourself you might save it as "aboutme.htm", or if it's about your interest you might name it "interest.htm" or "myInterest.htm."
However, sometimes file names can get quite long, like, "picturesfromaphotoalbumhandeddownbymygrandfather.htm," which can be difficult to read. I guess you could save it as, "pictures from a photo album handed down by my grandfather.htm," but this will be hard to like to, as you'll see later. There are two methods that will make your files easy to read and easy to link. Some people like to use underlines in place of spaces like this, "pictures_from_a_photo_album_handed_down_by_my_grandfather.htm". This works fine, but it's to much typing for me. So I use what is called interal caps, like this. " "picturesFromaPhotoAlbumHandedDownByMyGrandfather.htm". Which not only works well, I find it just as easy to read and much less keystrokes. This file name is a little extream and could easily be shortened, I just wanted to be sure you get the pacture.
Whatever method you use you must save web pages with an .htm extension as plan text. If you are using NotePad be sure to select "All Files("*.*")", in the File Type window. Otherwise notepad may add a ".txt" extention to the end of your ".htm" making your file "myFirstWebPage.htm.txt", which may cause other problems.
Now open your new page in a web browser, in windows you can double click the file in Windows Explorer. This should open your browser and load your document. In the browser you should see something like:
This is my first web page.
This would be a fine way to begin all you web pages if you only wanted to view them on your computer or by a small circle of friends you could tell how to find them. However, you probability want more than just friends to see your pages. These next few tags help search engines like Yahoo or Goggle find you web site and pages.
Now We Add the Documnt Type, Head and Meta tags
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!-- Tells the browser the type of document -->
<HTML> <HEAD> <TITLE> Blank </TITLE>
<META NAME="author" CONTENT="Jon Secrist"> <!-- Gives the author's name. -->
<META NAME="description" CONTENT="A Blank HTML Document"> <!-- This is used by search engine and shows up in the search engine list. -->
<META NAME="keywords" CONTENT="Blank, HTML, Document"> <!-- This is used by search engine and shows up in the search engine list. -->
</HEAD><BODY> <!-- This is my first web page. -->
</BODY></HTML>
So add the following tag to your web page and save it. Then go your browser and reload or refresh it.
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd"> <HTML><HEAD><TITLE>My First Web Page</TITLE> <META NAME="author" CONTENT="Your Name"> <META NAME="description" CONTENT="This is my first web page"> <META NAME="keywords" CONTENT="first, web page, stuff"> </HEAD> <BODY> This is my first web page </BODY></HTML> |
This is my first web page
What you see looks just the same as before to you or me. Nevertheless, if looks a lot different to search engines and to the browser.
A word about keywords and phrases. Just ask yourself what keywords you might enter in a search engine to find you page. Separate keywords or key-phases with commas. If I have "my web site, stuff" in my keywords and someone searches "my web site" or "stuff" your page will show up in the list. On the other hand if they enter "web page" it wont show up. Unless, you have enter, "my web page, my page, web page, my, web, page," in the keywords, get the picture. However, sense these works are so common your page may well show on a list of 4,539,257 pages and may be last on the list. I'm sorry folks but I seriously doubt anyone is going that far down any list. To learn how to use meta tags and other techniques to get you pages closer to the top of list see the resources page in this tutorial. For now let's look at jazzing up you page just a little by adding to the body tag.
Before we go on there are a few more tags to go into the head section of your page. We'll go over these briefly not and cover them in more detail when we actually use them
<LINK REV="made" HREF="mailto:jsecrist@home.com>
You can use a relative link to gives the email address of the composer or to link to an outside style sheet. Not to be confused with hyperlinks used inside the page.
<LINK TYPE="***" SRC="***"></LINK>
With this tag you can link to other type file to be use in forms or other parts of your document. Not to be confused with hyperlinks used inside the page.
<STYLE></STYLE>
The style sheet tag we will use later when we get into cascading style sheets.
<BASE TARGET="***">
<BASE HREF="URL">
The base target and base href tags we will use later when we take a look a frames and opening other windows.
Just wanted to get these out of the way while we were in the head section of the document. Not lets move on to backgrounds and colors then we can get into the fun stuff.
Tags Coverd in this section
Comment