Basic HTML Guide Author: Athryx Released by: http://www.hacktech.org Introduction -------------------------------------------------------------------------------------------------------------- Before I begin, I'd like to make one thing clear which many people don't seem to realize. Web pages do not always look as they may seem. When a user types a URL in their web browser, they are not actually viewing the site off the web server. The html files, as well as any images or references it makes are downloaded to your computer, and viewed from there. Because of this, the site may look different from one person to the next. It's the web browser interpreting the code, not the web server. Let's Begin -------------------------------------------------------------------------------------------------------------- HTML is composed of what's referred to as "tags". Most HTML tags need to be opened and closed, so the browser knows exactly what to do with the information in between. The "basic" structure is as follows: The and tags are telling the browser that the information betwen them, should be processed as HTML. The and tags will contain the actual content of the site. Most sites will want a title. Titles, scripts, and many more advanced processes will need to be conatined within "head" tags. To add a title, we'll need to add two more sets of tags: My First Web Site Keep in mind that HTML will ignore line breaks and more than 1 space in a row. If this was all on one line, it would appear the exact same. Adding Content -------------------------------------------------------------------------------------------------------------- Chances are if you're making a web site, you'll want some kind of actual content to be shown. Text, images, links, and anything else on your site will need to be between the and tags. Simply adding text between those two, will display the text on your site. Keep in mind that line breaks in your html will not be interpreted by the browser, so you'll need to add them manually. The tag for this is
, which does not need to be closed. Hello This is my first website. yay! This would display the following: HelloThis is my first website.yay! If we add the
tags like so: Hello
This is my first website.
yay! We get this result: Hello This is my first website. yay! Colors -------------------------------------------------------------------------------------------------------------- Colors are often refrenced as hexadecimal values. Although many can be set as regular text such as "red" for example, it's a good habit to use straight hex codes, as it allows for more custom colors. The basic format is #RRGGBB. RR = Amount of red GG = Amount of green BB = Amount of blue These numbers are in hexadecimal, meaning they use the base 16 number system. A straight red color would be #ff0000, meaning maximum red, and no green or blue. Think of it as amounts of light. Some examples follow: #ff0000 - Red #00ff00 - Green #0000ff - Blue #880000 - A darker red, lower red value. #ffffff - White #000000 - Black Any combination can be created for custom colors, such as #d45830. Body -------------------------------------------------------------------------------------------------------------- The tag has a few properties that should be discussed. The tag controls a few important large scale elements. The most common properties are listed below. alink.........The color of "active" links, meaning the one being currently processed. Example: alink="#00ff00" background....Path to a background image, if you choose to have one. Example: background="background.jpg" bgcolor.......If you choose to set a background color, you'll need this property. Example: bgcolor=#000000" link..........The default color of your text links. Example: link="#0000ff" text..........The main text color. Blocks of text can be altered using the tag as described next. The "text" property should be the main text color. vlink.........Color displayed for links you have visited. Example: vlink="#000088" An example of multiple properties: Fonts and Colors -------------------------------------------------------------------------------------------------------------- An important and useful feature is to be able to customize the text itself. This can be done using the tag, which will need to be closed off when finished. This tag controls the font type being used, known as the font "face", the color of your text, as well as the size. Some of the more common font properties: color.........Changes the color of the text. Example: color="#ff8888" face..........Selects the desired font. Examples: face="arial" - face="verdana" size..........Changes the size of the text that follows. Example: size="3" Yet another example of multiple properties: This text is fairly small, shown in verdana, and red. Images -------------------------------------------------------------------------------------------------------------- An image can be added by using the tag, which once again does not need to be closed. This tag will do nothing however, without at least one important element. The image location. The "src" propery tells the browser where the "source" is, hence, the image itself. The tag has many properties, since this is a basic tutorial, I will cover the basics: align.........This will align the image based on where you want it to appear. For example, if you want the image to the left of the text which follows, you'd use align="left" border........Defines the width of a border in pixels. "0" = no border. Example: border="0" bordercolor...Selects the color of the border. Example: bordercolor="#ff0048" height........Set a defined height for the image in pixels. src...........The location of the image to be displayed. width.........Set a defined width for the image in pixels. Example of all the properties: Links -------------------------------------------------------------------------------------------------------------- Links are created using the an tags. To add a link, you need a reference to direct to. This is set using the "href" (hypertext reference) property. This can link to another page on your site, or a different web site. Examples: The link tag needs something to actually link to the file or site. This can be text, or an image. To link text, you would simply add the plain text, and close it with the tag. Example: Click here to read about me! To link an image, use the same format, placing the tag between the and . Another common property for : target.......To select a target frame or existing window. To open the link in a new browser, use target="_blank" Conclusion -------------------------------------------------------------------------------------------------------------- These are only the basics of HTML. There's much much more to learn beyond this; there's just too much to cover in one tutorial. Stay tuned for more specific tutorials on some more advanced aspects of HTML.