DIV Tag

HTML - Div Element(s)
The div tag is nothing more than a container for other tags. Much like the body tag, Div elements are block elements and work behind the scenes grouping other tags together. Use only the following attributes with your div element, anything else should be reserved for CSS. (CSS Tutorial)

id
width
height
title
style
For the purpose of this example, we have included the style attribute in order to color our div tag in order to bring a stronger visualization for our viewers.

HTML Code:

SEARCH LINKS

Google

HTML Div Element:
SEARCH LINKS
Google
Above is a great visual about how a div plays the role of a container for other HTML elements, applying a background color/image is the only real way to visualize your div tags.

HTML - Div Layouts
When HTML first began, web creators only had two choices. A table layout, or frames. The div element provides a 3rd alternative, since a div can contain any/every other type of html element within its beginning and ending tag.

HTML Code:

HOME |
CONTACT |
ABOUT

Content Articles

This paragraph would be your content
paragraph with all of your readable material.

HTML Div Layout:
HOME | CONTACT | ABOUT
Content Articles
This paragraph would be your content paragraph with all of your readable material.

Advanced web developers find div elements to be far easier to work with than tables, adding more content or more links to our previous example might demonstrates why a div is simpler to work with.

Let's add a "LINKS" page to our menu, and another article of content below the existing content.

HTML Code:

HOME |
CONTACT |
ABOUT |
LINKS

Content Articles

This paragraph would be your content
paragraph with all of your readable material.

Content Article Number Two

Here's another content article right here.

HTML Div Layout II:
HOME | CONTACT | ABOUT | LINKS
Content Articles
This paragraph would be your content paragraph with all of your readable material.

Content Article Number Two
Here's another content article right here.

HTML Image Links

HTML - Image Links
Using graphics will liven up that tired, bland-looking text link. To make an image link simply insert an image within the anchor tag. If you do not know how to use the image tag, skip ahead to the image tutorial and come back after you feel comfortable with it.

HTML Code:
a href="http://www.espn.com" target="_blank /a

Image Link:

Notice that by default, many browsers add a small border around image links. This is to quickly deceifer the difference between image links and just ordinary images on a web site. Since this default is different from web browser to web browser it may be best to squelch this ambiguity by setting the border attribute to zero.

HTML Code:


Image Link; No Border:

HTML - Thumbnails
Thumbnails are small size (Kilobytes) pictures that link to the larger, high quality picture. To make a thumbnail save a low-quality version of a picture and make it have smaller dimensions. Now make this low-quality picture into an image link and have it point to the the high-quality picture.

HTML Code:




Thumbnails:

HTML Image

HTML - Images
Images are a staple of any web designer, so it is very important that you understand how to use them properly. Use the tag to place an image on your web page.

HTML Code:


Image:

HTML - Image src
Above we have defined the src attribute. Src stands for source, the source of the image or more appropriately, where the picture file is located. As with links described in a previous lesson, you may use any standard URL to properly point the src attribute to a local or external source.

There are two ways to define the source of an image. First you may use a standard URL. (src=http://www.Tizag.com/pics/htmlT/sunset.gif) As your second choice, you may copy or upload the file onto your web server and access it locally using standard directory tree methods. (src="../sunset.gif") The location of this picture file is in relation to your location of your .html file.

URL Types:
Local Src Location Description
src="sunset.gif" picture file resides in same directory as .html file
src="../sunset.gif" picture file resides in previous directory as .html file
src="../pics/sunset.gif" picture file resides in the pic directory in a previous directory as .html file

A URL cannot contain drive letters, since a src URL is a relational source interpretation based on the location of your .html file and the location of the picture file. Therefore something like src="C:\\www\web\pics\" will not work. Pictures must be uploaded along with your .html file to your web server.

Each method has its pros and cons, for instance using the URL of pictures on other sites poses a problem if the web master(s) of the other site happen to change the physical location of the picture file. Copying the file directly to your web server solves this problem, however, as you continue to upload picture files to your system, you may eventually run short on hard drive space. Use your best judgement to meet your needs.

HTML - Alternative Attribute
The alt attribute specifies alternate text to be displayed if for some reason the browser cannot find the image, or if a user has image files disabled. Text only browsers also depend on the alt attribute since they cannot display pictures.

HTML Code:


Alternative Text:

HTML - Image Height and Width
To define the height and width of the image, rather than letting the browser compute the size, use the height and width attributes.

HTML Code:


Height and Width:

Above we have defined the src, height and width attributes. By informing the browser of the image dimensions it knows to set aside a place for that image. Without defining an image's dimensions your site may load poorly; text and other images will be moved around when the browser finally figures out how big the picture is supposed to be and then makes room for the picture.

Vertically and Horizontally Align Images
Use the align and valign attributes to place images within your body, tables, or sections.

align (Horizontal)
right
left
center
valign (Vertical)
top
bottom
center

Below is an example of how to align an image to the right of a paragraph.

HTML Code:

This is paragraph 1, yes it is...

The image will appear along the...isn't it?

This is the third paragraph that appears...

Image Wrap Arond:
This is paragraph 1, yes it is. I think this paragraph serves as a nice example to show how this image alignment works.

The image will appear along the right hand side of the paragraph. As you can see this is very nice for adding a little eye candy that relates to the specified paragraph. If we were talking about beautiful tropical sunsets, this picture would be perfect. But we aren't talking about that, so it's rather a waste, isn't it?

This is the third paragraph that appears below the paragraph with the image!

Images as Links
This will be a quick review of the links - image lesson. Images are very useful for links and can be created with the HTML below.

HTML Code:




Image Links:

Now your image will take you to our home page when you click it. Change it to your home page URL.

Thumbnails
Thumbnails are small size (Kilobytes) pictures that link to the larger, high quality picture. To make a thumbnail save a low-quality version of a picture and make it have smaller dimensions. Now make this low-quality picture into an image link and have it point to the the high-quality picture.

HTML Code:




Thumbnails:

HTML Gifs vs. Jpegs
Gifs are best used for banners, clip art, and buttons. The main reason for this is that gifs can have a transparent background which is priceless when it comes to web design. On the down side, gifs are usually larger files, not as compressed as a jpeg, which calls for slow load times and large transfer rates. Gifs are also limited to the 256 color scheme.

Jpegs however, have an unlimited color wheel, and have a high compression rate downsizing your load times and saving hard drive space. Jpegs don't allow for transparent backgrounds, but their size/quality ratio is outstanding. Its best to use Jpegs for photo galleries, or artwork to allow the viewer to catch that extra bit of detail. Avoid Jpegs for graphical design, stick to using them for thumbnails and backgrounds.

HTML Email

Create HTML Email
Making an HTML email link on your page is quick and simple. However, you should know that when you place your email on your website, it is very easy for computer experts to run programs to harvest these types of emails for spamming. If you are going to put your email link on a public website, be sure that you have anti-spam software!

Another option to allow people to send you emails without exposing yourself to massive amounts of spam is to create an HTML form that gathers data from the user and emails it to your email account. We recommend the HTML Form Email that usually reduces the amount of potential spam.

HTML Email Tag
There actually is not a separate HTML tag for creating an HTML email link. Instead you use a standard HTML anchor tag a and set the href property equal to the email adddress, rather than specifying a web URL. This is probably confusing and may take a little while to get used to.

HTML Code:
Email Example

Email Link:
Email Example
Additional HTML Email Code
By adding a couple extra goodies onto the email address in href you can have both the SUBJECT and the BODY of the email automatically populated for your visitors. This is great when receiving emails from a website to an email account that handles more mail than just from that one link on your site.

By defining a uniform subject that people will automatically have when clicking the link you will be able to tell right away whether or not an email came from the website or from another source (as long as your visitors don't mess with the subject that you give them).

Subject - Populates the subject of the email with the information that you provide.
Body - Populates the body of the email with the information that you provide.
HTML Code:

2nd Email Example

Complete Email:
2nd Email Example

HTML Entities

HTML Character Entities
An entity is a fancy term for a symbol. Several symbols such as copyright, trademark, or foreign cash symbols exist outside of the ones you see on your keyboard. In order to display them. In order to display these characters, you need to know 4 parts.

There's three parts to every entity.

HTML Code:

Each begins with a ampersand - &
Then the entities name - copy
And finally a semicolon - ;


Copyright:
Combine © to make - © - Copyright symbol.
Expect complications if you forget to include all three parts of an entity.

Additional Spaces and <>.
As you have may have learned within paragraph and heading tags, browsers will only recognize and format 1 space between words reguardless of how many you may actually type in your coded HTML. An entity exists for placing additional spaces.

Here's an example.

HTML Code:

Everything that goes up, must come     down!

Spaces:
Everything that goes up, must come down!
In HTML we use less than and greater than characters to create tags, so to use them on your web site you will need entities.

HTML Code:

Less than - <

Greater than - >

Body tag - <body>

Less than Greater than:
Less than - <
Greater than - >
Body tag - body tag

HTML Tags

HTML - Font and Basefont
The font tag is used to add style, size, and color to the text on your site. Use the size, color, and face attributes to customize your fonts. Use a basefont> tag to set all of your text to the same size, face, and color.

The font and basefont tags are deprecated and should not be used. Instead, use css styles to manipulate your font. See our CSS Tutorial for more information.

Font Size
Set the size of your font with size. The range of accepted values is from 1(smallest) to 7(largest).The default size of a font is 3.

HTML Code:

Here is a size 5 font

Font Size:
Here is a size 5 font.
Font Color
Set the color of your font with color.

HTML Code:
font color="#990000" This text is hexcolor #990000/font


font color="red" This text is red /font

Font Color:
This text is hexcolor #990000
This text is red
Font Face
Choose a different font face using any font you have installed. Be aware that if the user viewing the page doesn't have the font installed, they will not be able to see it. Instead they will default to Times New Roman. An option is to choose a few that are similar in appearance.

HTML Code:

This paragraph
has had its font...

Font Face:
This paragraph has had its font formatted by the font tag!
Basefont - Set a Solid Base
With the basefont tag you will be able to set the default font for your web page. We highly recommend specifying a basefont if you plan on using any font with HTML. Below is the correct way to set your basefont.

HTML Code:

This paragraph has had its font...

This paragraph has had its font...

This paragraph has had its font...

Base Font:
This paragraph has had its font formatted by the basefont tag!
This paragraph has had its font formatted by the basefont tag!
This paragraph has had its font formatted by the basefont tag!

However, the use of basefont is deprecated, which means it may not be supported sometime in the future. The perfectly correct way to change your sites basefont is to set it with CSS. Check out our CSS Tutorial for more information.

Attribute Review
Attributes:
Attribute= "Value" Description size= "Num. Value 1-7" Size of your text, 7 is biggest color= "rgb,name,or hexidecimal" Change font color face= "name of font" Change the font type

Beautiful First Letter Style
Customize your fonts to achieve any of your desired looks.

HTML Code:

Customize
your font to achieve a desired look.

Beauty:
Customize your font to achieve a desired look.

HTML - Links and Anchors
The web got its spidery name from the plentiful connections between web sites. These connections are made using anchor tags to create links. Text, Images, and Forms may be used to create these links.

HTML - Hypertext Reference (href)
The href attribute defines reference that the link refers to. Basically this is where the user will be taken if they wish to click this link.

Hypertext references can be Internal, Local, or Global.
Internal - Links to anchors on the current page
Local - Links to other pages within your domain
Global - Links to other domains outside of your site
HTML Code:
Internal - href="#anchorname"
Local - href="../pics/picturefile.jpg"
Global - href="http://www.tizag.com/"

HTML - Text Links
Use the tags to define the start and ending of an anchor. Decide what type of href attribute you need and place this attribute into the opening tag. The text you place between the opening and closing tags will be shown as the link on a page. Use the demonstration below as a reference.

HTML Code:
Tizag Home
ESPN Home
Yahoo Home

Global Link:
Tizag Home ESPN Home Yahoo Home
HTML - Link Targets
The target attribute defines whether to open the page in a separate window, or to open the link in the current browser window.

HTML Code:
target=" _blank" Opens new page in a new browser window _self" Loads the new page in current window _parent" Loads new page into a frame that is superior to where the link lies _top" Loads new page into the current browser window, cancelling all frames

The example below shows how you would link to ESPN.COM, a popular sports web site. The target attribute is added to allow the browser to open ESPN in a new window, so that the viewer can remain at our web site. Here's the example.

HTML Code:
ESPN.COM

_blank Target:
ESPN.COM
HTML - Anchors
To link to sections of your existing page a name must be given to the anchor. In the example below, we've created a mini Table of Contents for this page. By placing blank anchors just after each heading, and naming them, we can then create reference links to those sections on this page as shown below.

First, the headings of this page contain blank, named anchors. They look like this.

Tizag's Own Code:

HTML Links and Anchors

HTML Text Links

HTML Email

Now create the reference links, placing the pound symbol followed by the name of the anchor in the href of the new link.

Anchor Code:
Go to the Top
Learn about Text Links
Learn about Email Links

Local Links:
Go to the Top
Learn about Text Links
Learn about Email Links
HTML - Email Links
Creating an email link is simple. If you want somebody to mail you about your site a good way to do it is place an email link with a subject already in place for them.

HTML Code:
Email@tizag.com

Email Links:
Email@tizag.com
In some circumstances it may be necessary to fill in the body of the Email for the user as well.

HTML Code:

Email@tizag.com

Complete Email:
Email@tizag.com
HTML - Download Links
Placing files available for download is done in exactly the same fashion as placing text links. Things become complicated if we want to place image links available for download. The best solution for images is to use a thumbnail link that we discuss in the next lesson.

HTML Code:
Text Document

Download a Text Document:
Text Document
HTML - Default Links; Base
Use the base tag in the head element to set a default URL for all links on a page to go to. It's always a good idea to set a base tag just incase your links become bugged somewhere down the line. Usually set your base to your home page.

HTML Code:
base href="http://www.tizag.com/"

HTML Color Coding

HTML Color Coding System - Color Names
There are 3 different methods to set color. The simplest being the Generic terms of colors. Examples: black, white, red, green, and blue. Generic colors are preset HTML coded colors where the value is simply the name of each color. Here is a sample of the most widely supported colors and their respective name values.

The 16 Basic Colors:
Black Gray Silver White
Yellow Lime Aqua Fuchsia
Red Green Blue Purple
Maroon Olive Navy Teal

HTML Coloring System - RGB Values
We do not recommend that you use RGB for safe web design because non-IE browsers do not support HTML RGB. However, if you plan on learning CSS then you should glance over this topic.

RGB stands for Red, Green, Blue. Each can have a value from 0 (none of that color) to 255 (fully that color). The format for RGB is - rgb(RED, GREEN, BLUE), just like the name implies. Below is an example of RGB in use, but if you are not using a browser that supports it, do not worry, that is just one of the problems with HTML RGB.

Red, Green, and Blue Values:
bgcolor="rgb(255,255,255)" White
bgcolor="rgb(255,0,0)" Red
bgcolor="rgb(0,255,0)" Green
bgcolor="rgb(0,0,255)" Blue

HTML Coloring System - Hexadecimal
The hexadecimal system is complex and difficult to understand at first. Rest assured that the system becomes much, MUCH easier with practice and as a blossoming web developer, it is critical to understand hexadecimals to be capable of using them in your own web publications. They are far more reliable and widely compatible among web browsers and are the standard for colors on the internet.

A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB).

Here's a hexadecimal you might see in an HTML document.

My First Hexadecimal:
bgcolor="#RRGGBB"

HTML Color Code - Breaking the Code
The following table shows how letters are incorporated into the hexadecimal essentially extending the numbers system to 16 values. Hang in there it all makes sense shortly.

Hexadecimal Color Values:
Decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Hexadecimal 0 1 2 3 4 5 6 7 8 9 A B C D E F

So use letters as numbers?We will answer this question as we dive into the converting hexadecimals to regular numbers. Let's have a look at real Hexadecimal.

A Real Hexadecimal:
bgcolor="#FFFFFF"

The letter "F" is the maximum amount we can send each color and as you may deduce, this color (#FFFFFF) represents the color white. A formula exists to calculate the numeric equivalent of a hexadecimal.

Hexadecimal Formula:
(15 * 16) + (15) = 255

The formula is real simple. Take the first value (F) or 15 multiply it by 16 and add it to the second value, 15. The value 255 is the maximum allowed for any primary color.

Let's try another one.

Example 2:
bgcolor="#CC7005"

CC(RR - Red)
(12 * 16) + (12) = 204
70(GG - Green)
(7 * 16) + (0) = 112
05(BB - Blue)
(0 * 16) + (5) = 5

Hexadecimals are the best choice for compatible web development because of their consistency between browsers. Even the most minor of change in color can throw your entire site out of whack, so be sure to check your site in a number of browsers. If you want to be absolutely sure your colors will not change, use paired hex values for color. Examples: "#0011EE", "#44HHFF", or "#117788". These are called True Colors, since they will stay true in hue from browser to browser.