In this tutorial you will learn all the basics of html coding to make a simple and basic site for your needs. After you practice and study html coding, you will become more advanced and make nicer sites. Note that it doesn't really matter what program you use, just as long as it supports Hyper Text Map Language or also known as HTML. A preffered program for beginners and also those who are advanced is Macromedia Dreamweaver. Thank you and enjoy.
The HTML Language:
The basic layout of a new page begins with the following coding:
<title>Your Site Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Now, where it says <html>, that states that you are beginning a page in the coding called html. If you do not place this coding at the beginning of your page, it will not properly work. You use the "<>" for the coding to state you are placing in a code, and not ordinary display text. If you put in something such as the head as just "head", the browser will not understand the coding and will make it normal text. Remember to save all your files as a ".html" to display properly.
The next bit of coding, called the "<head>" is used to display all sort of coding that will program the page, and will not be displayed. Objects such as style sheets, which is CSS scripting, and scroll bar colors, and Java script coding. You need the head section to be displayed as well as the anchor head (</head>) on the basic html document.
The whole above "meta" tagging is just to explain the type of a document the browser will be displaying. This helps for search engines as well.
The body section is used to display any object you want, such as an image, text, flash movie, etc. This is where all the main information a user sees will be displayed.
Then don't forget to add the anchors at the end of the page. The </body> states that the page is finishing it's body section, as well as the html section, which is stating that the html page coding all ends at that point.
Now, you have the coding in your program, you understand what the basic page looks like and means, so it's time to save it. Save the coding as "index.html". When you upload that page, and you type in the URL to your site, that will be the page it will bring up as the home and main page. You can later make other pages that your "index.html" can link to, just change the name index to any name you want.
There are many different type of "meta's". The meta tag is mainly used for search engines, so when a search engine, such as yahoo, or google, sends out a "spider", in other words a bot that searches all sites, it will know what you site has to do with and what key-words will find your site. The basic coding for a meta tag is this:
<meta name="author" content="D-Zyner Designs">
Well this right here means that when a search engine looks you up, that you are the author, just replace "D-Zyner Designs" with your own name. There are other things you can substitute the "author" and "content" for. Here are a few definitions that you can use to replace the "author" text with:
= Keywords that people will search for to find your site (seperate by a comma).
= Description of your site that will be displayed on the search engine.
= The search engine spiders will revist after a certain amount of time. Fill the content with "2 days" or how ever many days you want.
= The robots need to know which page is the index, otherwise they can choose any other page, so if you choose this script, put in the content box "index, follow".
= Put the language of your site, this is only so the search engines can categorize your site easier. For english put in the content "en-us" which stands for English-USA.
= What the classification is.
= Put the creator of the sites' name in that field.
= What your site rating is. General, Adult, Children, etc.
Have you ever gone to a site and added it to your favorites? Did you see a cool site icon next to their site name? Well this coding will display an icon for your site. First you'll have to make one or download one you want, then upload it to your site, and put this coding in-between your "<head>" and "</head>" tags:
<link rel="SHORTCUT ICON" href="foldername/iconname.ico">
Where it says "link rel", that means that the code is used when linking, and using a related item. The item is called a shortcut icon, and the "href" stands for the location. That means that the code is looking for an icon to put next to the link. The "foldername" is the folder that you have the icon in. You don't have to put it in a folder, but if it is you have to put the full path to the icon. Then put in your icon name after the "/". Then that's it, your done.
For html background, you need to learn color codes in a program such as "Adobe Photoshop" for them to work. You can display them in several ways. The first is basic colors. The coding for that would be:
You would replace the above coding with the "<body>" coding. Then you would replace the "#colornumber" with the color number you want. Let's say you want the color black to be your background, then the color number would be "#000000". Notice the six 0's. You need six in order for the color to come out properly. If you want white, the color number would be "#FFFFFF". Notice how that too has six digits as well, but this time it has letters. The colors are mixed up with different patterns of numbers and letters. So take the time and learn how the numbers change in order, using the "Adobe Photoshop" color selector.
The next thing you can do if you want an image for your background, would be to use this coding:
Note how we changed the coding from bgcolor to background. Now you can replace the "imagename" with your actual file name, and change the ".gif" file extension if it isn't a .gif.
Remember, the key to a good site layout is small image file sizes, and good quality. If your images are at a ".bmp" format, convert them to ".jpg"'s or ".gif"'s. They will take too long for your visitors to download, and the visitor will usually leave your site before they let it fully load, especially when the connection speed is less than a 700K connection.
For displaying images you must put the coding in your body section. The following coding will display your image:
<img src="foldername/imagename.gif" width="#" height="#" alt="D-Zyner Designs" border="0">
Now let's break that down. The part img is stating it's an image code, and the src is stating that it's a location to the image. Now where it says "foldername", put in the folder name that your image is in. The reason why we put a "/" after the foldername, is to show that the next file after it, is displayed within that directory/location. After you put the directory name, put in the image name, and change the file extention.
Now to change the width and height numbers. The first thing you want to do when displaying an image in your page, is make sure that it is the proper size for your page. Then if you want the actual image size, just remove the width and height coding. If you want the image to be bigger, note that it will look distorted, because the pixels are being stretched. To make it smaller, try to constrain the proportions. Remember to just change what is in the quotes.
Where it says "alt", that means that the text that is placed within that code will be displayed over an image when a person moves their mouse cursor over the image and lets it sit for half a second.
The next piece within this coding is the border. The reason you put a "0" in is because you do not want to see a border around the picture. This will look better when designing professional layouts and when making an image link.
The coding for a text link is the following:
<a href="http://www.d-zyner.com" target="_blank">D-Zyner Designs</a>
That seems easy doesn't it? Well let's break it down so you can understand it better. The a is stating it is an anchor, and the "href" is stating the location.
When making a new link to a new page, be sure to ALWAYS include the http://, or in other words, the full URL link. The only situation that you would not need it, is if you are going to a new page on your site. In that case all you would do is replace the "http://www.d-zyner.com" with "your_page_name.html".
Now for the "target" section. This section is what targets where on the page you want this location to open up. If you want it to open up in a new window, the target would have to be "_new", if you want it to be in it's same location, make it a "_self", if to the top of the page, just make is "#", if to a certain named object on the page, such as an "iframe" name, make it target="iframename". In certain situations, where you have "iframes" on your pages, and you are working on the actual page thats located in the "iframe", and you want the page to open up in the main page, then change the coding to target="_top". That means that the target it going to the "top" page.
For the text, just enter your plain text you want the user to click on to go to the page.
For the </a>, that is an anchor ending all the text and/or images that you want to link to the URL or page.
For a linked image, use the following coding:
<a href="http://www.d-zyner.com" target="_new"><img src="foldername/imagename.gif" width="#" height="#" alt="D-Zyner Designs" border="0"></a>
That makes sense doesn't it? It does if you have read the two tutorials on how to make links and images display. Just remember to put the "</a>" anchor after the image, and after text if you want it to link to text as well.
If you want to change the text around and make it with new colors, sizes, and fonts use this coding:
The Help Code:
<font face="font name, best is verdana or arial" size="any number, but the best preferred is 1" color="any color value, to find them and learn some, use the "Adobe Photoshop" feature. For example, #000000 will equal black, and #FFFFFF will equal white"><b> Text goes in here </b></font>
The Actual Code:
<font face="arial" size="1" color="#000000"><b> Text goes in here </b></font>
Text goes in here
You will also notice that there is another small code in there, the "<b>" code. This code is not important, but if you want to use it, you must put it after the font code and before the font anchor. The "b" in the coding stands for bold, and you can change it around to be different things, such as an underline. For an underline you would make it "<u>", and for an italic, make it "<i>", and for a line through the text, it's "<s>". You can also use sub-scripts, can you guess what those codes would be? It's quite simple once you get the hang of it. The code for sup-scripts is "<sub>". Just look at the different types of styles you can use in Microsoft Word, and you'll learn how to apply them in coding, most thigns in html are abbreviated. Don't forget to add the anchors before you add the font anchor, just add a "/" before the actual coding name or letter within the arrow brackets.
The </font> is to end the font style, size and color there, you must end it at one point of he page, the end of the page or before you make more text with new styles.
Codes To Form Good Pages:
There are certain codes that you can use to center text or direct it in a different direction. Here are a few:
The first one is the "<center>" code. Place this code just before any object or text you want to be centered, then anchor it just after whatever you want to be centered with the coding "</center>".
The next is the "<marquee>" display. This displays text or images that scroll by on the screen from right to left. The coder can decide how it scrolls, how many times it loops, the amount to scroll in a time interval, and set the time interval.
<marquee behavior="scroll" loop="infinite" scrollamount="5" scrolldelay="1">Text Goes Here</marquee>
Fill in the amount of times you want your marquee to loop under the "loop" setting. Set the amount of space you want the marquee to scroll under "scrollamount". Write how often you want the marquee to move (in milliseconds). Then change the text to your own. After you have placed in what you want to scroll, add the marquee anchor after the text.
Now for the paragraph code. This code makes new paragraphs each time you enter the code. The following coding will add a new paragraph (several spaces).
Your Text Goes Here
Your Text Goes Here
Your Text Goes Here
Your Text Goes Here
That seems very simple huh? The "p" obviously stands for a new paragraph. Well all you have to do is change the text within the coding, and boom, there's your new paragraph.
Now for the "<div>" code. This means divide, and that means to divide the section of the page up in a certain format.
Text Goes Here
Text Goes Here
Well, basically what that is saying is that it is division, it is being aligned, and it is being aligned in the center. You can change the center to be "right", "left", "bottom", "top", "justify", "blockquote", etc. Then insert the image or text you want within the code. Just remember to add the end anchor.
Now for a couple important codes, the "<br>" code and the " " code. The "<br>" code states that you want a break in the page, or "return/enter". It just moves any object one space down. The " " code stands for "and no break, space". This means that you don't want a break in the page but a simple space. This is greatly used when you want 2 spaces between text or an image.
Making A List:
Making a list is very simple, you can use this to create nice bulleted notes and/or lists for your web-page. The coding would be:
The "<ul>" states that the list is an unordered list. You can also make it an ordered list by replacing the "<li>" with an "<ol>", which stands for Ordered List. The "li" just stands for a regular list item. You can also change it around and make different lists such as:
- D-Zyner Designs
- Graphic Artwork
- Graphic Designs
- Computer Animation
"<dl>" = Defines a definition list
"<dt>" = Defines a definition term
"<dd>" = Defines a definition description
Use anchors at the end of each list to display them correctly.
A basic form layout would look something like this:
<input type="text" size="20" name="firstname">
<input type="text" cols="20" rows="3" name="lastname">
In the above example the form is began using the "<form>" code. Just under it there is some text that says "First Name:", that will be displayed next to the box. Then you have the "<input>" code. The input code is used to make an input field which visitors will be able to add their own information, and you will gather it from them. The type text just states it's a normal text box, and the size states how big it is. You usually want to name this when creating a full form such as a mail form. On the one below, it shows cols, which stands for colums, and rows, which stands for rows, they also have to do with size.
Then you can use some coding to make certain type of listed items in a form that people can select. The first one is a radio type of list. This list makes a empty circle, and when a user finds what he/she wants, they will select it and it shows a smaller black circle within it. You can also put text aside from it too.
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
Where it says type="radio", that is stating that it's a radio list, then the name it whatever name you want to associate the radio with. The same goes for value. Then aside from the coding you have Male and Female. You can change those to your own text, so when a user selects a radio box, they will know which item it is for. You can also substitute the radio in the type field for "checkbox". All this changes is the list style, so now when a user selects the item they are looking for, it will make a black check within a box-like shape, which is the exact same size as the radio.
If you want to get more advanced you can add a complete form so you can recieve mail. The way you would set up the form coding in HTML would be like this:
<form name="input" action="html_form_action.asp"
<input type="text" name="user">
<input type="pass" name="pass">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
That of course is ONLY for html, but at the top where it says action="html_form_action.asp" that is what is used to gather the information and send it somewhere. So for that you would need to know php or asp scripting as well. The method at the top is "get", which means that it is getting the information from the user. Then you have all the basic stuff, the type and the name, and the password type which means it hides the text and makes the digits all bulleted dots, but then comes the submit button. Just change the type to submit, and the text value to whatever you want, because that is what will be displayed on the submit button. The submit button is what will submit all the information to the "html_form_action.asp". The next field that has the type reset, resets all the fields. You can also change the name from "Reset" to "Clear" or whatever you desire.
At the end of every form or input field, remember to add an anchor to let the browser know that it is the end of the form and that any other information below it is not also used in that form.
Now for some definition terms:
= Defines a form user input
= Defines an input field
= Defines a text-area (a multi-line text input control)
= Defines a label to a control
= Defines a fieldset
= Defines a caption for a fieldset
= Defines a selectable list (a drop-down box)
= Defines an option group
= Defines an option within the drop-down box
= Defines a simple push button
The coding is a basic IFRAME layout:
<iframe src="yourpage.html" frameborder="0" name="yourpagename" height="#" width="#"></iframe>
The "IFRAME" was created to display a completely different page within the current page. You can place this ANYWHERE in a page. It can be after an image or on one, which would be used in a table code.
Change the "yourpage.html" to the page that you want to display. Then change the name to any name you want that you will remember that has to do with the page, and then the height and width numbers. The frame name will be used in cases where if you are making a link link to a page, you would change the target="" to target="yourpagename" and the new page will open up only in that page while still in your current page. Don't forget to add the anchor for each "iframe".
Learning About Tables:
Well a basic table would look like this:
<table bgcolor="#FFFFFF" width="210" height="30" cellspacing="1" cellpadding="0" border="1">
Table Row 1, Cell 1.
Table Row 1, Cell 2.
Table Row 2, Cell 1.
Table Row 2, Cell 2.
Table Row 1, Cell 1.
Table Row 1, Cell 2.
Table Row 2, Cell 1.
Table Row 2, Cell 2.
All you really need to know for this coding is what the definitions for each little code is. First off we will start with "cellspacing" and "cellpadding". The "cellspacing" is just the spacing between the cells in the table, each number put in is one pixel spacing in between the table cells. The "cellpadding" specifies the space between the cell walls and contents.
The definitions are:
= Defines a table
= Defines a table header
= Defines a table row
= Defines a table cell
<caption> = Defines a table caption
= Defines groups of table colums
= Defines the attribute values for one or more columns in a table
= Defines a table head
= Defines a table body
= Defines a tables foot
Thank you for reading this basic, but thorough, tutorial on HTML coding. I hope this helps you greatly to understand this language better.
Due to the long lenght of this free tutorial, we ask that you link back to "www.d-zyner.com" using our 88x31 button link. The button link can be found here
. Thank you very much.