HTML Free Cool Codes

Visiting Web sites without encountering pages that contain pictures and drawings is virtually impossible. Graphics images help to explain complicated procedures or actions that would be difficult to describe using text alone. In addition, most visitors to your Web site feel intimidated when they see a Web page with nothing but text. Even if the user is looking for cool and fun websites to cure boredom or academic information, website's design must fit with its purpose.
Inserting an occasional graphic into a long body of the text gives visitors a break from reading, and if used correctly, helps explain the text. Suppose, for example, you want to create a Web page that explains the steps necessary to change the ink cartridge on an inkjet printer. A few well-designed illustrations would explain the process better than several paragraphs of text.

In addition, site visitors have the option to change the default typeface used to display text on a Web page by working with the browser's preferences. That means that the Web page text will look different to a visitor using the Arial typeface as the browser default than the text looks in your Web browser that defaults to the Helvetica typeface. The real problem with typeface selection comes into play when you use a specialized or custom typeface, such as those often used to write the company name in a logo. Remember, if the specified typeface is not available on the visitor's computer, the Web browser will display the text using the browser's default font.

Say, for example, your site has a logo whose text is written in the Skia typeface. If you type the logo on the Web page as text and the visitor's system does not have the Skia typeface installed, the visitor's Web browser will substitute the browser's default typeface, which will change the entire look of the logo. Fortunately, you can preserve the exact appearance of a logo (or other text) by converting the text into a graphics image (using an image-editing program like Photoshop). If you insert a picture of the text on the Web page, the text will look the same in all Web browsers-even those on systems without the typeface you use to create the text. When you convert text to a graphics image, the visitor's settings that control font usage have no effect on the text in the picture.

The <> tag lets you place a graphics image (whether of converted text or a picture or drawing), on a Web page. A typical <> tag contains a single "src" attribute, which tells the Web browser the pathname of the graphics file. Therefore, most of your image tags will be of the form < src=" path/filename">. Note the value of the "src" attribute contains both the path and filename of the graphics file. For example, the following code instructs the Web browser to retrieve and display the picture in the file named photo.jpg stored in the "images" folder on the Web server.

< src="images/photo.jpg" width="300 height=">

Proper HTML coding requires that you place all <> tags between the start and end body tags (<>< /body >) that enclose the Web page content the browser displays onscreen. The following simple HTML free cool code, when processed by a Web browser, will display the graphics image house.jpg:

<>

<><>Image of a House< /title >

< /head >

<>< src="house.jpg" width="400" height="175">< /center >

< /body >

< /html >

In addition to placing a simple image tag within an HTML document, you have several attributes that control the image within the browser window:

• "alt" - The "alt" attribute supplies alternate text for browsers that do not display graphics or for browsers where the user has turned off the display of graphics. Alternate text is also used by browsers as a tool tip (the text displays in a box near the mouse pointer, when the mouse hovers over the image) and by reader programs for the visually impaired.

< src="images/photo.jpg" alt="Photo of Florida Sunset">

• "height" and "width" - The "width" and "height" attributes define the size of the image displayed within the browser window. Always specify the "width" and "height" attributes in your image tags so the browser can display the remainder of your Web page text while waiting for images to download. When you specify the "width" and "height" attributes in an <> tag, the browser reserves space for the images, even if they load slowly, and the document text will flow around where the images are supposed to go.

< src="images/photo.jpg" width="200" height="55">

• "border" - The "border" attribute gives the pixel-width of the border the Web browser is to draw around an image. If you use an image as the anchor for a hyperlink, the browser will draw a border around the picture. As such, drawing a border around pictures may make the visitor think the picture is a hyperlink. Therefore, it is recommended that you set the "border" attribute to zero (0).

< src="images/photo.jpg" width="200" height="55" border="0">

Images are an indispensable part of a Web page. However, Web pages with many graphics take longer to download and display than Web pages with only text. Take care not to overload your Web pages with too many graphics. A picture may be worth a thousand words, but if your Web page takes too long to load, no one will wait around to see the message.

Because most Web pages have both graphics images and text, aligning graphics and text within the browser application window is a basic element of Web page design. By default, the Web browser will display objects in the HTML document in the order in which the browser finds them. Moreover, the browser places the objects one after another onscreen from left to right, top to bottom.

Suppose, for example, that you want the browser to display an image above a line of text that describes the image. If you simply place an <> tag in the HTML document and then type the line of text, the browser will display the text next to (that is, to the right of) and not below the image. Remember, the Web browser displays the items in the HTML document onscreen one after another moving from left to right. The browser puts an item at the left-hand margin of a new line only when the browser reaches the right-hand margin of the current line on the page.

The following HTML free cool code shows the order of the graphic and text elements. The <> tag instructs the browser to display the text that follows the image on the line below the image onscreen:

<>

<>

<> Example of text and graphic placement < /title >

< /head >

<>

< src="flower.jpg">

<> The illustrated flowers grow wild on the

flat plains of Kansas < /p >

< /body >

< /html >

Placing the <> tag in the HTML document ahead of the text tells the Web browser to display the picture before the browser displays the text. Inserting the <> tag between the image and the text tells the Web browser to display a line break (that is, to move to the next line on the page) and insert a blank line after displaying the image and before displaying the text that follows the image in the Web page HTML.

Notice that inserting the <> tag correctly aligns the graphics image and text vertically. However, you may also want the browser to center both the picture and the text between the left and right-hand margins of the Web page. HTML provides the start and end center tags (<>< /center >) to let you work with the horizontal alignment of objects on the Web page. Understand that although the center alignment tags are still used, they are deprecated tags, which means Web browsers may no longer support them at some point in the future.