HTML Basics: Learn to Code in 15 Minutes

Dr. Phil
Dr. Phil, Yahoo! Contributor Network
Nov 3, 2006 "Share your voice on Yahoo! websites. Start Here."
HTML stands for Hypertext markup language and it is the most basic of website language. Html is the quintessential introductory course for website design and it simple to understand and follow. In this article I outline the basics of html and what it can do for you to get your first website up and going. Keep in mind that Html is not a programming language, it simply tells the web browser what to do.

The HTML Language:
The basic layout of a new page begins with the following coding:



Your Site Title


If you do not place a bracket (<) 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 website files with the extension .html for it to display properly. In windows you do this by saving as a text document and placing .html after the file name.

The next bit of coding, called the " " is used to display all sort of coding that will program the page, and will not be displayed.

The 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 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.

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.

Site Icon:
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 " " tags:

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.


Backgrounds:
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 " " 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.


Displaying Images:
For displaying images you must put the coding in your body section. The following coding will display your image:

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.


Text Links:
The coding for a text link is the following:

The Coding:

AC

The Outcome:

When making a new link to a new page, be sure to ALWAYS include the full URL link.

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

, that is an anchor ending all the text and/or images that you want to link to the URL or page.


Image Links:
For a linked image, use the following coding:

If you have read the two tutorials on how to make links and images display. Just remember to put the "

" anchor after the image, and after text if you want it to link to text as well.


Text Effects:
If you want to change the text around and make it with new colors, sizes, and fonts use this coding:

The Help Code:

Text goes in here

The Actual Code:

Text goes in here

The Outcome:

Text goes in here

You will also notice that there is another small code in there, the "" 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 "", and for an italic, make it "", and for a line through the text, it'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 "". 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 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 " " 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 " ".

The next is the " " 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.

The Code:

Text Goes Here

The Outcome:

?

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).

The Code:


Your Text Goes Here


Your Text Goes Here

The Outcome:

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 " " code. This means divide, and that means to divide the section of the page up in a certain format.

The Code:


Text Goes Here

The Outcome:

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 "
" code and the " " code. The "
" 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 Code:


  • My listings


    • Website-Design

    • Graphic Artwork

    • Graphic Designs

    • Computer Animation


The Outcome:

My listings
Website-Design
Graphic Artwork
Graphic Designs
Computer Animation
The "

  • " states that the list is an unordered list. You can also make it an ordered list by replacing the "
  • " with an "
    ", 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:

    " " = Defines a definition list
    " " = Defines a definition term
    " " = Defines a definition description

    Use anchors at the end of each list to display them correctly.

    Learning About Tables:
    A table is a basic arrangement of spacing with clear defined attributes like spacing and width.

    The Code:




    Table Row 1, Cell 1.


    Table Row 1, Cell 2.




    Table Row 2, Cell 1.


    Table Row 2, Cell 2.



    The Outcome:

    Table Row 1, Cell 1. Table Row 1, Cell 2.
    Table Row 2, Cell 1. Table Row 2, Cell 2.


    The definitions are:

    = Defines a table
    = Defines a table header
    = Defines a table row
    = Defines a table cell
    = 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

Published by Dr. Phil

My work speaks for itself.  View profile

  • Html is the most basic
  • Once you learn html it is easier to learn other scripting languages
  • Not all webpages use html but every browser recognizes it.
HTML only tells your browser what to do it isn't a scripting language.

To comment, please sign in to your Yahoo! account, or sign up for a new account.