Cool Websites

All cool websites have animations. Therefore, if you want your website to be one of the cool websites, you must know how to create simple animations and of course implement them into your site.

GIF animation is the most widely used form of animation on the Internet. A GIF animation is composed of individual frames, or cells, each of which represents a single piece of the whole animation. Although GIF animations can be comprised of any type of images, they are typically clip art, cartoons, or text. For example, creating an animated walking character generally involves 8 to 10 individual cells. Because walking involves placing one foot in front of the other (as your parents so dutifully taught you when you were a child), to create a continuing animation of a person walking, you need to create only one walking cycle. When the animation reaches the last cell, it automatically returns to the first cell and repeats the animation all over again. Repeating a series of cells is called cycling.

To create the individual cells, you can sketch them on paper and then scan them into your computer, or you can create the cells using any one of a number of image-editing programs such as Photoshop or ImageReady.

After you complete the cells in the animation, you must assemble them in a GIF animation program. You can check out http://www.shareware.com or http://www.tucows.com, for several Macintosh or Windows shareware programs (and do not forget, you are required to pay for shareware). GIF Construction Set, for example, sells for a modest price of $20. Other programs, such as Adobe's ImageReady, come with more features, but at a higher price. ImageReady comes bundled with Adobe Photoshop, which costs about $600.

After you have all the cells assembled in the animation program, you save the animation sequence to a file with a .gif extension. In this example, we save the file as walking.gif. Finally, use an <> tag to insert the completed GIF animation (that is, the file with the .gif extension) into a Web page's HTML statements as shown here:

<>

<>

<> This is a simple GIF animation < /title >

< /head >

<>

<>

< img src="walking.gif" alt="Animation" width="50" height="120" / >

< /center >

< /body >

< /html >

In this example, the src attribute in the image tag instructs the Web browser to load the GIF animation file named walking.gif. Because GIF animations are supported by almost all Web browsers, creating a GIF animation file and inserting it into an HTML source document is almost certain to result in an animation that plays on the Web page. In a rare case where a visitor's browser does not support GIF animation, the visitor will see a still frame (typically the first cell in the animation).

When you create and save GIF animation without modifying the animation settings, the application saves the file using the program's predefined settings. These settings typically instruct the Web browser to display a new cell, or frame, every tenth of a second, and continuously cycle (that is, repeat) the animation sequence. For example, if you create a GIF animation of a rotating logo, the logo will continue to rotate, displaying a new animation frame every tenth of a second, for as long as the Web page remains onscreen.

Although default settings may be fine for some animations, configuring the GIF animation's settings when you save the file is always best. Note that you save the settings that control the GIF animation playback within the GIF file, and not as a tag or attribute within the Web page HTML:

< src="neon.gif" width="75 height=">

In this example, the <> tag instructs the Web browser to load the GIF animation file neon.gif. The options that control the animation's playback are contained within the neon.gif file. After it loads the animation file, the Web browser extracts and executes the playback instructions it finds within the file.

Suppose that you want to create a neon sign for your Web page. You would open a graphic in an image-editing application such as Photoshop, and use the program to create two GIF images. The first image represents the neon sign glowing, and the second shows the neon sign off. All Web animation programs (such as ImageReady) give you the option to change the number of frames displayed per second (fps) and the number of times the image cycles (that is, the number of times

the animation repeats).

• Frames per second (fps) - On the Internet, frame rates vary between 1 and 30 frames per second. To prevent the animation from appearing jittery, use a minimum of 10 fps to create the illusion of smooth movement in the animated GIF. However, in the case of a neon sign, to create a "buzzing" neon-like effect, you might reduce the number of frames per second.
• Cycles - The count that determines how many times the Web browser loops through the cells in the animation. Cycle counts can be forever (never stop cycling), or any number from 1 to 30,000.

The frames per second and number of times the animation cycles depend on the type of animation effect you are trying to create. For example, because a neon sign does not move like a typical animation (it just goes on and off), you set the frames per second to one second for the neon sign "on" image, and one-half second for the sign "off " image. In addition, the sign's objective is to attract attention to the Web page, not continually annoy the visitor. Therefore, you might set the cycle count to 5 cycles, so that the sign stops flashing after a while.

Some Web animation programs have an fps rate defined as No Delay or Zero Seconds. You should always select a specific period for the fps rate of the GIF animation as a number of seconds or fractions of a second. When you choose the No Delay or Zero Seconds option, you instruct the Web browser to flip through the animation frames as fast as possible. Therefore, you let the Web browser and the processor speed of the visitor's computer system determine your animation's appearance. As a result, your animation will look great to some visitors and will look like an indistinguishable blur of motion to others.

When you save the animation to a disk file, the GIF animation program saves the cycle and frames per second settings within the file along with the graphics images that make up the animation sequence. When the Web browser opens the image, the browser adjusts the playback of the animation according to the settings you specified when you saved the file. When the Web browser opens the neon.gif file, for example, the sign blinks on for one second and off for a half-second. After repeating this on/off sequence five times, the browser stops the animation on the last frame in the sequence. Notice that the last frame in the sequence shows the neon sign glowing, or "on." Therefore, when the animation stops, it will stop with the neon "on."

I really hope you understood the importance of the animation in cool websites. Animations are cool stuff for websites so, now, get to work and animate you website.

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.

Cool Flash Websites

Browsing the Internet today without encountering Web pages that contain some form of animation, sound, video, or a combination of all three is almost impossible. From simple animated GIFs, to Flash movies (or cool Flash websites), and even full-screen interactive images with sound and motion, adding animations to Web pages has the potential to enliven your designs. Unfortunately, the overuse of animation and sound can be annoying and a distraction to your visitors. Two opposing goals drive advances on the Internet:

• Web authors trying to please visitors want to transmit increasingly elaborate types of content (sound, animation, and video) over the Web.
• To reach Web site visitors, the file size for content must be small enough to load quickly, or the visitors grow impatient and move on to other sites.

When you work with animation on the Web, you incorporate one or more technologies (Flash, Shockwave, GIF animation, or video and sound applications) with the ultimate goal of creating an eye-catching Web page.

An animation is actually a series of still images displayed quickly one after another. The illusion of motion is created as your eye retains one image (persistence of vision) as the program "playing" the animation displays the next image onscreen. To create a smooth motion effect, the program must display each new image (or frame) within a fraction of a second of removing the last, so that the eye sees the new image just as the previous image fades.

The primary role of Web animation is to draw the attention of visitors to your Web site. However, Web animation can also entertain and inform. Young children (especially those that are just beginning to read) love movement and tend to focus on it. Therefore, you can use animation to grab and focus a young child's attention for an extended period on a concept you are trying to convey. In addition, a Web page can use animation and sound to explain the steps in a complicated procedure or process. For example, an animated sequence (or perhaps a video) displaying the steps necessary to program a VCR to record a movie, accompanied by a narrator explaining the steps, is far more effective than a plain text document explaining the same procedure. The specific intent of the Web page you design will influence the type of animation and software required to create it. Animation is important to the design of a Web site, and as a Web designer, you can choose from several methods to achieve your specific goals.

If you were impressed by the cool Flash websites that you have seen all over the internet and you want to know more about it, then you should definitely read the followings.

Flash is a multimedia development tool created by the Macromedia Corporation (and taken over by the Adobe Corporation later) that lets you create full-screen animations, incorporating sound and interactivity using very small file sizes. Flash keeps the file sizes small through the use of vector images. Vector images are smaller than traditional bitmap images because they use math to describe the graphics instead of pixels. When you save a traditional bitmap image (GIF or JPEG), the file has to record and store information within the graphics file that describes each and every pixel, which creates large files. In contrast, when you save a vector graphic, the image uses mathematical formulas to save the image information. For example, assume that you use a graphics program to draw a picture of a line. If you store the image within a raster (bitmap) format, the file must store all the pixels that comprise the line, as well as those that make up the image background. In contrast, if you store the image in a vector format, the file will store an equation (such as the slope of the line) as well as the line's start and end points.

Because files saved as vectors are small, the images download to the browser faster than traditional JPEG or GIF images. Vector images saved for use in Flash animation are defined as SVG image files, or Scalable Vector Graphics. SVG images can be resized (made larger or smaller) while the animation is playing, without loss of image quality. This means that you can create complicated Flash animation files, which load and play quickly on a visitor's computer. Using Flash over traditional GIF animation offers several advantages:

• Flash uses small image file sizes - Smaller file sizes for vector images translates into fast-loading animations.
• Flash enjoys cross-platform browser support - Whether you use Microsoft Explorer or Mozilla Firefox, or the Macintosh or Windows platform, does not matter. The plug-in that runs Flash animation is free and is available for most Web browsers.
• Flash lets you resize images during animation - Vector images resize with ease, creating images that look great at any size you decide to use.
• Flash uses streaming technology - When a visitor downloads a Flash animation, they do not have to wait for the entire file to download. The animation will start as soon as the visitor's Web browser receives enough of the Flash data to begin the animation.
• Flash is interactive - Flash lets you create interactive menus and navigation bars without prior experience in programming languages.
• Flash incorporates JavaScript - Flash is fully compatible with JavaScript. Because all browsers universally accept the JavaScript language, you can create even more complicated interaction between your page and its visitors.
• Flash incorporates sound - Flash works seamlessly with sound files, letting you create movement and audio in the same animation.

If you visit the Adobe Web site, you can download a trial version of Flash, which you can use for 30 days to create your own Flash animations.

Although Flash is a popular way to create animation, it is not without competition. In 1999, Adobe released LiveMotion. Adobe LiveMotion creates full-screen animation with vector graphics similar to those used in Macromedia Flash (Adobe Flash later).

When you work with Flash, you are, in a sense, a movie director. Say, for example, that Hollywood decides to create a new movie. One of the first things they will do is hire a director. The director, in turn, works with actors, sound production crews, set designers, and camera operators to create the movie. In Flash, you are the director, and the actors are the elements within the Flash movie. Actors (or elements) can be text, clip art, photographic images, as well as sound and video. If you do not have Flash, you can download a 30-day trial version of the software from the Adobe Web site at http://www.adobe.com/downloads. When you open Flash for the first time, you see a stage, surrounded by a work area. The stage and work area are where you place the separate pieces (elements) of the animation. In fact, think of the stage as the screen that projects your movie. When elements are on stage, they are visible within the movie; when they are in the work area, they are off-stage and therefore not visible.

Directly above the stage is the Flash timeline. Each element in a Flash movie has a timeline that tells the program when the element appears on the stage and when it disappears, or leaves the stage. You can add key frames to the timeline to move the element from one position on the stage to another.

Remember, using animation is a two-edged sword. On the one hand, animation attracts attention and keeps visitors on your Web site. However, too much animation can detract from your primary message by distracting the site visitor. (if your website is specialized on Flash games, there is no problem with a lot of animation; and you can find online a huge variety of game websites, like funny dumb flash games, funny flash games or you can even play free online inuyasha games)Create a balance between animation and the goal of the Web page. Ask yourself if the animation contributes to what you are trying to say, or is it animation for animation's sake?

Cool Effects HTML

In this article, I will show you some cool effects using HTML code. You will learn how to change the size and the color of your websites text so it will look better.

When you create a Web document without specifying the font size, the Web browser displays the text using the browser's default text size. The default values that browsers use for the size of characters vary, but on average run between 12 and 14 points. To insert and control the size of heading text on a Web page, enclose the heading text within start and end heading level tags (<> ... < /h1 > to <> ... < /h6 >). The number that follows the letter "h" in a start heading tag specifies the size of the heading text in relative terms. When using the heading tags, the lower the number that follows the "h", the larger the heading will be onscreen.

To use heading tags to specify the size of text on a page, place the text between the start and end heading tags. When a Web browser encounters an end heading tag in the Web page HTML, the browser automatically places the text following the end heading tag on the next line, and reverts to using the browser's default font size.

A second way to change the size of text in an HTML document is to use the "size" attribute in the <> tag in the form < size="">" > (where "n" is a number from 1 to 7). When you use the "size" attribute, the larger the value, the greater the size of the text-the opposite of the heading tags in which increasing the size of "n" decreases the size of the letters. To set the text using the "size" attribute, place the text between the start and end font tags (<>< /font >).

Both the start heading tag and the "size" attribute in the <> tag let you specify the size of text; the start heading tag also tells the Web browser to display the text in boldface. Bear in mind that the resolution of the visitor's monitor affects the size of text displayed within the Web browser's application window. Text on a monitor running at a resolution of 1024×768 pixels appears smaller than the same "size" text on a monitor using a lower resolution such as 800×600 pixels. Moreover, different platforms may also display text in different sizes even at the same resolution. The Mac, for example, displays text about two point sizes smaller than text displayed at the same resolution on an Intel-based machine. The W3C deprecated the font tag and its attributes in the HTML 4 standard. As such, future version releases of HTML-compliant Web browsers may no longer support the font tag.

Now, if you do not specify the color of text on a page, a Web browser will display the text in the browser's default text color, usually black. If you want to change the color of a word or a group of words, use the "color" attribute in the <> tag to tell the Web browser what color to use.

Suppose, for example, that you want to change the color of one sentence in a paragraph of text. Insert a <> tag with a "color" attribute in the form < color="">color" > just before the beginning of the text whose color you want to change. The "color" attribute instructs the browser to display the text following the tag in the specified color. Later in the text, insert a < /font > tag at the point where you want the Web browser to start using the browser's default text color again. For example, the "color" attribute in the <> tag after the first sentence in the following HTML tells the Web browser to display the second sentence in red. Then, the < /font > tag, after the end of the second sentence, tells the Web browser to stop using red, which causes the Web browser to use the default text color again when displaying the remaining Web page text:

<>

<>

<>Changing the color of text < /title >

< /head >

<>

<> To change the color of the text in the next sentence.

< font color="red" > Insert the FONT tag with the color

attribute at the beginning and end of the line.< /font >

The color changes and then reverts back to a default

color of black.< /p >

< /body >

< /html >

You can specify the value of the "color" attribute either by name or by number. As you saw in the preceding example, you can use color names such as red, green, blue, and so on. Alternatively, you can use the hexadecimal triplet that represents a color. For example, the hexadecimal triplet for red is #FF0000. Therefore, you can tell the browser to start displaying text in red with either < color="red"> or < color = "#FF0000">. When you specify a color as a hexadecimal triplet, the numbers in the triplet represent the amount of red, green, and blue the browser is to "mix" to create the color you want. For example, the color black has a hexadecimal triplet value of "#000000". Each two-digit number in the triplet represents the amount of one of the three primary colors red, green, and blue the browser is to use to create the composite color. Thus, for black (#000000), the browser is to mix "00" red, "00" green, and "00" blue. Conversely, to create the color white, the browser must use the maximum amount of red, green, and blue. Hence, the hexadecimal triplet for white is "#FFFFFF". In the print world, there are few limitations on the range of colors available to enhance brochures and magazine advertisements. Most computers have video cards capable of displaying thousands, if not millions, of colors. Both Macintosh and Windows-based computers have a color lookup table that instructs the monitor how to display color. When you assign a color using a hexadecimal value, the Web browser works with the video card's lookup table; if the color is available in the table, then the system will display the color correctly onscreen. If the lookup table does not contain the correct color, the system creates the color by mixing (dithering) existing color pixels together to produce a visual equivalent of the requested color. Many years ago, when video cards were only capable of displaying a maximum of 256 colors, deciding which colors to use was an easier job (fewer colors) but more restricting. To complicate matters, computer operating systems reserved some of these colors for their visual interface (that is, for use in displaying the system's desktop). Because the Windows and Macintosh operating systems choose a different set of colors for their visual interface (40 colors) that leaves 216 colors that are displayed the same way in Macintosh and Windows Web browsers.

Today, you have a greater range of color from which to choose when creating a Web page, because video cards in both Macintosh and Windows computers (check out top ten coolest software for Windows, maybe you can find something HTML-related) can display millions of colors. However, you still create each color as a combination of red, green, and blue values (a triplet). For a complete listing of browser-safe colors, that shows both the color names and corresponding hexadecimal triplet values, visit http://www.htmlhelp.com/cgi-bin/color.cgi.

Although most visitors will leave the browser's default text color set to black, some may have selected another default text color. As such, it is a good idea to specify the color you want the browser to use when displaying your Web page text, even if the color you want is black.

I hope this article was helpful and you can now take full advantage of the cool effects using HTML code.

Cool HTML Effects

When displaying Web page text, a Web browser uses the browser's default typeface and font size, unless you specify a size and typeface within the Web page HTML. Controlling the size and appearance of text is important, because the way text looks sets the mood for the page. The mood of the viewer can be changed using and adapting the cool HTML effects of the fonts. Understand that typography does not end with the words themselves; the presentation is equally important. For example, designers use typeface and size to indicate the importance of certain text passages, which is why headlines are larger and often in a different typeface than body text.

The typeface you choose conveys mood and creates the atmosphere in which the visitor reads the

message. Using the wrong typeface confuses the reader, because the content "feels" out of place. For example, several studies (one conducted by Yale) indicate that serif typefaces convey a more serious mood than sans (that is, without) serif typefaces. Therefore, you would use a typeface like Helvetica or Times New Roman for a formal document and a typeface like Comic Sans or Arial for a less serious or more casual message.

To set the cool HTML effects of a font, enclose the text between the start and end font tags in the form:

< face="typeface">

... Web page text displayed using the specified typeface ...

< /font >

The "face" attribute tells the Web browser which typeface to use when displaying Web page text onscreen. For example, the start font tag <> instructs the Web browser to display text following the tag using the Helvetica typeface until the browser encounters a < /font > tag:

< face="helvetica"> This text displays in Helvetica < /font >

When the browser reads a < /font > tag in the Web page HTML, it reverts to displaying Web page text in the browser's default typeface.

Thus, the face attribute instructs the Web browser to search the host computer for a specific typeface. The Web browser will use the typeface when displaying text placed between the start and end font tags (<>< /font >). However, if the visitor has not installed on his or her computer the typeface you specify in the <> tag, the Web browser will use the browser's default typeface instead.

Understand the site visitor can select the browser's default typeface by working with the Web browser's preferences. For example, to change the default typeface in Internet Explorer, select Tools | Internet Options. Then, click the Fonts button. Internet Explorer, in turn, will display the Fonts dialog box, on which you can select the browser's default Web page (and view source) font. (Internet Explorer refers to the typeface selection as the "font.") The default typeface tells the visitor's Web browser what character style to use when the Web document does not specify a typeface or when the visitor's computer does not have the typeface specified.

In addition to specifying a primary typeface, the face attribute lets you select a second, third, or even a fourth typeface. Say, for example, you want your document text displayed using the Helvetica typeface. However, if Helvetica is not available, Georgia is an acceptable substitute. The following code illustrates how you can specify an alternative typeface to use if the primary typeface is unavailable on the visitor's computer:

< face="helvetica, georgia">

The primary typeface is Helvetica. The browser will use the Georgia typeface if Helvetica is not available.

< /font >

The face attribute instructs the Web browser to display the text between the start and end font tags (<>< /font >) using the Helvetica typeface, and if Helvetica is not available, use the Georgia typeface instead. If neither the primary nor any of the alternative typefaces are available, the Web browser will use its default typeface.

When specifying fonts, use lowercase font names because then the system will look for the font name in both lowercase and uppercase. By contrast, if you use uppercase names, and the visitor's system has the font installed in lowercase, the Web browser will not find the desired font.

When you place unformatted text on a Web page, the width of the browser's application window controls the number of words the browser displays on each line onscreen. Unformatted text is simply text entered into an HTML document between the start and end body tags (<> < /body >), such as that shown in the following code:

<>

<>

<> Example of unformatted text < /title >

< /head >

<>

When you insert unformatted text into an HTML document. It does not matter how the text appears within the HTML document because the Web browser does not recognize the carriage return or enter key as a valid formatting tool.

< /body >

< /html >

Web browsers ignore the carriage return and line feed characters you insert into the Web page HTML by pressing ENTER to move down to the next line when typing. By default, Web browsers define the length of each line to be the width of the Web browser application window and not the number of characters on each line in the Web page HTML.

To group lines of text into paragraphs and to control the last word on each line, HTML provides the start and end paragraph tags (<>< /p >) and the <> tag. When it encounters a <> tag, the Web browser moves to the next line onscreen, inserts a blank line, and then displays the text that follows the <> tag on the next line below the blank line. Therefore, to group related sentences into "blocks" of paragraph text, place a <> tag before the first word in the paragraph and a < /p > tag after the last. For example, if the Web page HTML has three lines of text, each enclosed by start and end paragraph tags (<>< /p >), the Web browser will display the text as three paragraphs with a blank line between each line of text.

Unlike the <> tag, the <> tag has no end tag. After the Web browser encounters a <> tag in the Web page HTML, the browser moves down to the next line onscreen before displaying additional text. Thus, you can use either the <> tag or the <> tag to tell the Web browser to move to a new line before displaying more text. When you only want to move to the next line, use the <> tag; when you want to move to the next line and insert a blank line between the current line of text and the next, use the <> tag in the Web page HTML.

The following lines describe the cool HTML codes' effects of the <> tag and the <> tag:

<>

<>

<> Example of formatted text < /title >

< /head >

<>

<>When you insert formatted text into an HTML document.< /p >

<>The placement of the paragraph and line break tags within the HTML document<> determines the line breaks for the text.< /p >

<>The paragraph tags leave a blank line between lines of text< /p > and the line break tags break the text without inserting<>an additional blank line.

< /body >

< /html >

Cool HTML Codes For Websites

As you surf the Web, your browser displays the title of each Web page you view within the browser's title bar (across the top of the browser application window). The Web page title gives the name and describes, in a few words, the purpose of the Web page.

To create a Web page title, insert the title's text between start and end title tags (<> < /title >) in the header section of the Web page HTML, as shown in the following code:

<>

<>

<>Welcome to "my" page - Description (in a few words) < /title >

< /head >

<>

...The content the Web browser displays goes

here...

...This is essentially cool HTML code for websites...

< /body >

< /html >

ach Web page title should describe the contents of the page to your site visitors. Every time a visitor glances at the application window's title bar, the page title should remind him or her of the name and purpose of the Web page currently displayed by the browser. On a Web site containing many pages, page titles act as road signs. However, titles do more that remind visitors of their current location on your Web site.

Titles are also used for the following:

• Web browsers use title text when a visitor bookmarks a page, that is, when the visitor adds a Web page to the list of Favorites in Internet Explorer or to the list of Bookmarks in Mozilla Firefox. Using a title like Home Page does not help to identify your site among the other bookmarks on the visitor's system.
• Spiders (automated Web search programs) use title text when listing your Web page on search engines. Again, a title like Home Page does not provide useful information. Use descriptive wording in your titles-words visitors might enter into the search field for a search engine when trying to find your Web site.
• Title text helps you, the Web author, manage and control large multipage sites. Think of a title as a heading that identifies the page. If your Web site contains fifteen pages, the titles help you to locate quickly the page with which you want to work. For example, a real estate site might use the title to indicate pages with Houses for Rent, or Houses for Sale.

In addition to these roles, the W3C considers a Web page without a title as invalid or illegal. The term "illegal" as used here does not mean that someone will arrest you for creating pages without

titles. However, the use of titles helps all Web authors create standardized pages.

One of the best ways to learn cool HTML code for websites, tricks and techniques is to view the HTML statements used in Web pages you encounter as you surf the Web. To view the HTML source code for a Web page, select View | Source from within your browser. (If you are using Mozilla Firefox, select View | Page Source.) As you examine Web pages, you will find that many HTML documents have a document type tag (< !doctype >) at the start of the Web page.

The Document Type Definition (DTD) identifies the version of HTML used to create the Web page. This information is important to Web browsers, HTML validation programs, and to other software programs used for Web design and layout. To validate an existing HTML document go to http://validator.w3c.org. The HTML validation program checks the organization and syntax of the Web document based on the information supplied within the DTD. When the declaration indicates that the document adheres to a strict version of HTML 4.01, the validator judges the Web page based on the HTML 4.01 standard and generates a report with the results of the examination.

In the future, knowing the version of HTML used to create a page will help Web browsers and other programs display Web pages with greater accuracy. In fact, the W3C considers a Web page created with HTML version 4 as invalid unless the HTML document starts with a DTD. The DTD goes at the top of the HTML document before the <> tag. The following shows the correct format for a typical DTD:

< !doctype html public "version name" "url" >

• html - Identifies the code as a version of the HTML.
• public - Identifies the language as accessible by the public.
• version name - Identifies the complete name for the specific version of HTML. For example, the complete name for HTML 4.0 is -//W3C//DTD HTML 4.01 Transitional//EN.
• url - Indicates where on the World Wide Web a public definition of the HTML code resides, such as www.w3.org/TR/html4/loose.dtd.

A valid DTD for a Web page described using HTML version 4.01 would be as follows:

< !doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"

www.w3.org/TR/html4/loose.dtd >

The loose.dtd option in the previous code declares that the document may include all the elements allowed in the HTML 4 "strict" standard, additional presentation description attributes, and may include deprecated elements. Conversely, using strict.dtd in the DTD would declare that the document strictly adheres to the HTML 4 standard. The strict version of HTML 4.01 emphasizes the structure of the HTML document over the presentation of the page within the Web browser. This does not mean that strict version of HTML 4.01 downplays the presentation of the Web page; it simply focuses on the structure of the HTML markup code. Deprecated tags and elements such as frames and link targets are not allowed in HTML strict. A third Document Type Definition, frameset.dtd, is used when validating HTML documents containing frames.

Currently, neither Mozilla Firefox nor Internet Explorer require that you include a DTD before the start of your Web page HTML, that is, before the start HTML tag (<>) at the top of your Web document. However, you should include one at the start of any Web page you code using HTML version 4.0 or later. The W3C is giving you a hint here. What is optional today may be required in the near future. Therefore, stay ahead of the game and use the DTD in all your Web pages now.

HTML comments are a way to remind you and anyone who works on your HTML documents of what exactly you were thinking when you created a particular Web page. You can use comments to explain specific portions of a document. You can also use comments to insert personal information like your name, address, and phone number in the Web page HTML, so anyone interested in obtaining your services as a Web designer will know how to contact you.

In addition, you might use comments to temporarily hide some of the Web document's HTML statements from the Web browser. Suppose, for example, you want to add a section of some HTML code to an existing document, but you do not want the browser to display the new content until management gives permission to proceed. Placing HTML comment tags (< !- - - - >) around the statements you want to hide instructs the Web browser to ignore the statements until you remove you comment tags.

To create a comment, enclose the informational text (or the HTML statements you want to comment out) within the start and end comment tags, such as < ! - - comment - - >.

Placing a begin comment tag before each line of text or HTML statement is not necessary; the Web browser will ignore anything it finds after the start comment tag and before the next end comment tag. Although the Web browser does not display the information you place between start and end comment tags onscreen, a site visitor can still read the comments by instructing the Web browser to display the Web page HTML.Even some newer versions are better than the old ones, like Firefox 3.5, the Faster Version of 3.0, or Internet Explorer 8 more reliable than the 7 version, you can adapt the code in order to get a good visibility of your web page.

Cool HTML Tricks

We will look at some cool HTML tricks that are needed to be known when you design a website. When you create a new Web site, you will have to move the Web content (that is, the HTML documents, graphics, animation, sound, and other support files) from your development computer to the Web server. If your Web pages contain links to pages stored in the same or related folders (such as a subfolder or parent folder), you can save yourself considerable time and work by using relative pathnames when referencing files in the Web page HTML tags. When a site visitor clicks on a hypertext link, the Web browser uses the pathname given by the hyperlink's "href" attribute to locate the file the browser is to retrieve. When specifying the location of a file, you can use either an absolute or a relative pathname. Suppose, for example, that you have a graphics file named clock.jpg located in the folder named Folder_B, and that Folder_B, in turn, is located within a folder named Folder_A. A relative path consists of the folder names the browser needs to navigate to get to the file starting at the location of the Web page with the hyperlink that references the external file. For example, if clock.jpg is located in the Folder_B, and the Web page that references clock.jpg is located in Folder_A, the relative pathname for clock.jpg in the current Web page is Folder_B/clock.jpg. In other words, the current folder contains Folder_B, which in turn, contains the file clock.jpg. The following <> tag uses a src attribute with a relative pathname.

< p >< img src="Folder_A/clock.jpg" mce_src="Folder_A/clock.jpg" >< /p >

A relative pathname instructs the Web browser to start looking for the file within the folder that contains the current HTML document. Say for example that the HTML document that contains the image in the <> tag in the preceding example is located in a folder named idx_folder. The relative pathname in the src attribute then implies the folder named Folder_A is located within the idx_folder. Absolute paths, on the other hand, locate a file by starting at the top level of the folder hierarchy and moving downward through all the intervening folders to reach the file-without regard to the location of the current Web document. Absolute paths always begin with a slash (/) to differentiate them from relative paths. Suppose, for example, that clock.jpg is located on the D drive in the folder named Folder_B, which is located within the folder named Folder_A. To specify an absolute pathname, you must tell the browser where to look for the file starting with the drive on which the folder with the file is located. The following code shows the absolute pathname for clock.jpg in the current example:

< p >< img src="/D:Folder_A/Folder_B/clock.jpg" mce_src="../D:Folder_A/Folder_B/clock.jpg" >< /p >

Using absolute pathnames makes moving Web site files from a local drive to a Web server or from one Web server to another difficult. For example, to use relative pathnames successfully, you need only to create on the Web server a main folder for the site and then place all the documents and support files into subfolders within the main folder-as they are on your development machine. The relative pathnames will be as valid on the Web server as they are on your system-even if the remainder of the Web server's folder hierarchy is nothing like yours. Conversely, if you use absolute addresses, the Web server must have exactly the same folder hierarchy as that found on your development system in order for the Web server to be able to find the files referenced in hyperlinks within your Web pages.

You can display within your Web browser the Web pages you create and save to a local or network drive-without first connecting to the Internet or a Web server. Simply enter the pathname of the .html (Web page) file as File://<.html file pathname> into the Web browser's Address field. Thus, if you save a Web page name TestPage.htm in the MyWebs folder at the root (that is, top) folder on your C drive, you can display the page in your Web browser by entering File://C:/MyWebs/TestPage.htm. To make your Web pages available to others across the Internet, you must have a Web server. A Web server is also required if you want to execute server-side scripts (programs that the server runs on the behalf of your Web page). If you are using one of the Windows operating systems (Windows 95, 98, Me, NT, or XP) you can install the Personal Web Server (PWS) on your personal PC or network workstation free of charge. After you install the PWS and establish an Internet connection, other users on the Web can view the Web pages you publish on your system. In addition, you can use the PWS to test Web pages that submit form results and pages with server-side scripts, such as those embedded in PHP and Active Server Pages.

There are some software applications which can help you a lot in creating your own. Free web software is available online and when you pay for the applications, the quality might be much better. You can try the Personal Web Manager for creating and managing your pages. After successfully installing the Personal Web Server (PWS), you have to work out on how to stop and start the Web server and determine the location of the server's home directory. The tool you will use for this purpose is Personal Web Manager, which you can open in different ways depending on your particular operating system.

The easiest way to start the Personal Web Manager is to double-click the program's icon in the Windows system tray (on the right-hand end of the Windows status bar). Or, on a Windows 98 system, select Start | Programs | Microsoft Personal Web Server and then choose Personal Web Manager. After you start the application, the Personal Web Manager will display the program's Main screen, which contains the name of your Web server and the server's home directory. The Web manager displays the name of your Web server in blue text near the top of the page. Anyone working at your computer or using another workstation on your local area network can use the Web server name to view Web pages on your PWS. (You can change the name of your Web server simply by changing the name of your PC on the Identification tab of the Control Panel, Network Properties dialog box.) The Main screen of the Personal Web Manager also shows you the PWS's root folder in blue text just beneath the name of your Web server. Knowing the name of the Web server and the home directory, you are ready to publish your Web pages. Suppose, for example, that your computer's name (and hence your PWS's name) is alex, and the server's home directory is C:\WebShare\wwwroot. If you place a Web page such as TestPage .htm, for example, into the C:\WebShare\wwwroot folder on your computer, you (and anyone using a workstation connected to your local area network) can display the Web page by typing http://alex/TestPage.htm into the Web browser's Address field and then pressing ENTER.

I hope that these cool HTML tricks will help you learn more about HTML and web design.