Tuesday, March 3, 2009

introduction to HTML

This collection of pages explains how to use the different HTML document description elements, or tags and how to use these elements to write good, well designed HTML documents. This particular page describes the overall content and organization of the material presented here, reviews some related resources that may be of interest, and describes the meanings of the navigational "buttons" you use to navigate from page to page.

What is HTML

HTML are initials that stand for Hyper Text Markup Language

* Hyper is the opposite of linear. It used to be that computer programs had to move in a linear fashion. This before this, this before this, and so on. HTML does not hold to that pattern and allows the person viewing the World Wide Web page to go anywhere, any time they want.
* Text is what you will use. English letters, just like you use everyday..
* Markup is what you will do. You will write in plain English and then mark up what you wrote.
* Language. Some may argue that technically html is a code, but you write html in plain, everyday English language.

HTML is the code behind your webpage and is what your browser looks for to display a webpage, the way the webdesigner intended it to look, and is a series of tags that tells the browser where to display what. It is really a series of simple commands that you give to the browser, just like telling your dog to sit, and because it is in plain English it is easy to learn. For example, if you want your text to show in a bold type, you command it to be bold text , it really is that easy.

Keep this in mind: HTML documents must be text only.
When you save a HTML document, you must save only the text, nothing else. HTML browsers can only read text. Look at your keyboard. See the letters and numbers and little signs like % and @ and *? There are 128 in all (read upper- and lowercase letters as two). That's text. That's what the browser reads. It simply doesn't understand anything else.

Remember that if you are using Notepad, Wordpad, or Simple Text, the document will be saved as text with no extra prompting. Just choose SAVE.

If you are going to start learning to write HTML, it is a good idea to learn to look at other authors' HTML pages. The actual html potion of the page behind the pretty page you see in front of you now.

Looking at another's html code helps you learn how things are done and you can copy the style of pages that you like. Please do not just steal and copy the pages, but no one will be upset if you make the style in much the same way. For example, if you were going to build a house, you would look around to see what styles you like before deciding on your own design. Same thing here, look around the web and see what styles you like and apply them to your own ideas.

Here's how you look at an HTML document (known as the "source code")

* When you find a page you like, click on VIEW at the top of the screen.
* Choose SOURCE from the menu.
* The HTML document will appear on the screen.

Try it with this page. Click on VIEW and then choose the SOURCE.
It will look like mumbo jumbo right now, but soon it'll be readable and you'll be able to find exactly how a certain HTML presentation was performed.

What are HTML Tags?

HTML works in a very simple, very logical, format. It reads like you do, top to bottom, left to right. HTML is written with TEXT. What you use to set certain sections apart as bigger text, smaller text, bold text, underlined text, is a series of tags.

Think of tags as commands. For example if you want a line of text to be bold. You will put a tag at the exact point you want the bold lettering to start and another tag where you want the bold lettering to stop. There you have an example of how tags make commands and tell the browser how to display the text. Just like telling a dog to sit. You give the command.

All tags that are opened must correspondingly be closed, just as if you are writing a quoted statement with those "inverted commas". A tag is closed this way therefore we open a new tag and close the tag

Basic HTML Tags

What Is a Tag?

* A tag is a method of formatting HTML documents.

* With tags you can create italic or bold characters, make things blink, and can control the color and size of the lettering.

* Tags can be "nested". This means that you can make something bold and italic and green and blinking by simply surrounding the previous tag with the next.

* Tags can be used to insert pictures and graphics.

* Tags can be used to create bulleted lists like this one, or numbered lists.

* Tags look something like this: chosen text .

* All tags use the < and > (less-than and greater-than symbols) to signal the browser. These are located above the comma and period keys.

* Within a tag, capitalization doesn't matter. FONT is the same as font or Font . I usually don't bother capitalizing when I use tags. Below, I have used capital letters when I felt that the number "1" and the letter "l" might be confused.

* It is essential to always close the tags! If not, the formatting will contaminate everything that follows it. But don't panic, closing tags is very easy, and even the most experienced surfers sometimes forget.

Italics
To make italics surround the chosen text with these tags:

chosen text

The "/i" tag is essential; this will close the tag and stop the italics. If this is not done, all the text which follows the first, i , tag will appear italicized.

Bold Lettering
To make letters bold surround the chosen text with these tags:

chosen text

The "/b" tag is essential; this will close the tag and stop the bold lettering. If this is not done, all the text which follows the first, b , tag will appear in bold.

Changing Font Size
There are three different ways to change the size of the font. Method 1, Method 2, and Method 3.
Also see below on how to change both the size and the color of the font at the same time.

1. The first method is to use the "big" and "small" tags.

For example, to increase the font by one degree surround the text with the following tags:

chosen text

If you want to make it even bigger, you surround it again:

chosen text

To make the font small, surround it with the small tag:

chosen text

If you want to make it even smaller, surround it with the tag again:

chosen text

The "/big" and "/small" tags are essential; they will close the tag and stop the special formatting. If this is not done, all the text which follows the first, or , tag will appear in the altered size.

2. The second method is to directly change the font size.

You can use + and - along with a number to shrink and grow the font:

chosen text

chosen text .........(same as )

chosen text .........(plain text)

chosen text .........(same as )

chosen text

Notice that when you get to larger fonts they tend to appear bold.

The " /font " tag is essential; it will close the tag and define the end of the specialized formatting. If this is not done, all the text which follows the first, font size= , tag will appear in the altered size.

3. The third method is to use what are called headers.

Headers are abbreviated with the letter "h" and a number from 1 to 6. For example:

chosen text

Along with the tag, I will demonstrate the result for each:

chosen text

Notice that the header method also utilizes a bold font.

The "/h# " tag is essential; it will close the tag and define the end of the specialized formatting. If this is not done, all the text which follows the first, , tag will appear in the altered size.

Blinking Text
To make text blink surround the chosen text with these tags:

chosen text

Note: This will not show up if you are using Microsoft Explorer (Blame it on Bill Gates!).

The "/blink" tag is essential; this will close the tag and signal the end of the special formatting. If this is not done, all the text which follows the first, , tag will blink.

Use this sparingly, it can get a bit obnoxious if used overfrequently.

Changing Text Color

To change the color of the text surround the chosen text with the following tags:

chosen text

The "/font" tag is essential; this will close the tag and signal the end of the colored text. If this is not done, all the text which follows the first, font color= , tag will appear in the altered color.

The "color name" can be one of two things. If you only want to use a common color, you can simply put in the name of that color. This works for the following colors:

Black
White (White)
Yellow (Yellow)
Orange
Pink (Pink)
Red
Green
Blue
Purple
Cyan (Cyan)
Magenta
Maroon
Brown

The second thing you can use as a "color name" is a numeric code for the color. This allows you to fine tune the color more than you can with the fixed colors listed above. For example you can have a deeper shade of blue, or a lighter brown.

To use this option you type:

chosen text

Where "#rrggbb" is the code for a color. Don't forget the quotation marks or the # sign--they are necessary.

The "/font" tag is essential; this will close the tag and signal the end of the colored text. If this is not done, all the text which follows the first, font color= , tag will appear in the altered color.

Here is a short list of some of basic colors:

Here is a yellow color whose hex-code number is-- # f f f f 0 0 . (# f f f f 0 0)

Here is a red color whose hex-code number is-- # f f 0 0 0 0 . (# f f 0 0 0 0)

Here is a green color whose hex-code number is-- # 0 0 f f 0 0 . (# 0 0 f f 0 0)

Here is a light-blue color whose hex-code number is-- # 0 0 f f f f . (# 0 0 f f f f)

Here is another blue color whose hex-code number is-- # 1 f 8 1 a 6 . (# 1 f 8 1 a 6)

Here is a blue color whose hex-code number is-- # 0 0 0 0 f f . (# 0 0 0 0 f f)

Here is a purple color whose hex-code number is-- # f f 0 0 f f . (# f f 0 0 f f)

For a more complete list of colors, here is a chart with their hex-code names:

Color Chart

Changing Text Font

Changing the font of text online is one of the most frustrating parts of formatting for the web, because you never know what the person on the other end is going to see.

The reason for this is that the fonts you choose to use must already be loaded on the other person's computer. If they aren't, then they will just see their default font.

For example, if you really, really want to use "Tigerteeth ICG", because you think it looks great and is perfect for your site, you probably shouldn't bother. Few people will have "Tigerteeth" loaded on their machine, and only those who do will see it--everyone else will just see their default font (usually something like Times New Roman). To make matters even more complicated, Mac users will usually have a completely different set of fonts, so you need to think of them when choosing your font. There seems to be little or no standardization of fonts, some machines will contain one set, while another could have a very different set.

So, is it hopeless? Not entirely. If you want to use a really fancy font, which may be rare, or which you might have downloaded from a font website, then don't bother or find another way. But if you want to use a fixed-width font instead of a varying one, or if you want to use a sans serif font (one without those tiny little cross pieces which finish off letters) instead of one with them, you can do it. In other words, if you want a bit of a change, but aren't particular about what that change is, go ahead.

If you want to use less common fonts, you can go ahead and do so. The trick then is to pick several different fonts and use them all. This is similar to choosing the font you most want, then the second most-wanted one, then the third most-wanted, etc. When someone views your page, if they have the first font, that's what they'll see. If they don't, then they might have the second, and that is what they'll see. If not the second, then maybe they will have the third. With several fonts listed, you increase the possiblity that the other person will at least have one of them.

So, here's how to do it. Surround the chosen text with the following tags:

chosen text

Notice where the quotation marks are--outside the entire list of fonts, not around each font.

The "/font" tag is essential; this will close the tag and signal the end of the colored text. If this is not done, all the text which follows the first, font face= , tag will appear in the altered font.

The "font name" is the name of the font, for example: Times New Roman, Arial, Verdana, Helvetica, or sans serif.

Examples:

"...The respect created by the conviction of his valuable qualities, though at first unwillingly admitted, had for some time ceased to be repugnant to her feeling; and it was now heightened into somewhat a friendlier nature, by the testimony so highly in his favor, and bringing forward his disposition in so amiable a light, which yesterday had produced. But above all, above respect and esteem, there was a motive within her of goodwill which could not be overlooked. It was gratitude; gratitude, not merely for having once loved her, but for living her still well enough to forgive all the petulance and acrimony of her manner in rejecting him, and all the unjust accusations accompanying her rejection..."

--Jane Austen, Pride and Prejudice

Pride and Prejudice and Sense and Sensibility.

Now, what if you really, really, really want to use a fancy font?

Well, if you have a large section of text, you might want to give up, but if you want to use a fancy font for titles on your page, or to make a small part of your page stand out, then you may try to use an image program to turn them into pictures:

Baronetage

One thing to keep in mind with images is the length of time they take to load into someone's browser. An entire page shouldn't be longer than about 75 KBs, text and images included. So, if you want to use a large image you will have little left for other items on the page. The image I just used above is about 4 KBs, so it won't take long to load and isn't a problem.

Nesting Tags

As can be seen above in the first method for changing font size, tags can be used together, or "nested".

For example, to make something both bold and italic use the following tags:

chosen text

or big and red:

chosen text

If you want to change both the color and the size of the font at the same time, it is easiest to do both in the same tag. For example:

chosen text

As you can see, both the color and the size tags can be combined into one, when you use the tag. It does not matter what order you use,

Of course, you can add a font too:

chosen text

Again don't forget the to close the tag.

How To Draw A Line Across The Screen

In this tutorial the different sections are divided by lines, or rules or bars, which cross the entire screen. This is very easy to do and needs only a single tag (no closing tag is necessary).

To draw a line across the page type:

this stands for "horizontal rule", and the result will look like:

I have added a blank space above and below the horizantal rule, but usually the text would appear directly above
and below the line without any extra space, as I have just shown.

You can modify the bar in several ways.

You can make the line go across only a part of the page by specifying the width with a percentage, where 100% would mean the bar goes across the entire screen, smaller percentages make the line cross less of the screen:

results in:

You can make the line thicker by specifying the size of the bar; the larger the number the wider the bar:

Results in:

You can also make the bar look solid by adding the word "noshade" to the tag:

Results in:

and

Results in:

If you use the width command to specify how much of the screen the bar will cross, then you can also tell the browser where you want the bar to appear: in the center of the screen, to the left or to the right. If you do not specify where you want the bar to appear, it will appear centered in the screen. This can be done with by adding "align=" to the tag:

results in:

results in:

Again, the

tag is a very easy one, because you only need to put in a single tag and you do not need a second one to close the first.

How To Add Graphic Smiley Faces and Images

If you wish to add graphics such as or , the tag looks a bit complicated but I will try to explain it.

First, here is what the tag for the yellow smiley-face looks like:

=

What this means:

* IMG -- This stands for "image" and tells the browser that you are putting in a picture.

* SRC -- This stands for "source" and refers to the location on the internet where the browser can find the image. (As said above, capitalization is unnecessary.)

* http://www.austen.com/tutorial/ -- This is the location on the internet of the computer and directory in which the picture is stored.

* smiley.gif -- Is the name of the actual file for
frown.gif -- is the name of the actual file for .

* Notice that this tag stands alone, you do not need a second tag to close the first.

Note: The quotation marks around the file location (http etc.) are essential!

So the tag for pictures is:

, where "internet location" is the web address of the picture. This works with any picture or graphic on the web, not just those listed here.

How To Copy The Location Of An Image

If you see a picture somewhere on the web that you would like to use, and if you are using Netscape, you can automatically copy the location of the image. That is to say you can copy a location, such as http://www.austen.com/tutorial/smiley.gif, so that you can paste it into the tag without typing it all out. If you are using MSExplorer, it is not such a simple thing to do (blame it on Bill Gates!) .

Here, I will show what to do in the case of Netscape (it differs slightly depending on whether you live in the Mac world or the PC world).

* For PC users,

1. Point at the image you want to use, and
2. Click the right mouse button (not the left, the right mouse button).
3. This will cause a menu to appear. One of the options in the menu is "Copy Image Location".
4. If you sellect this option, you can then paste the location (such as http://www.austen.com/tutorial/smiley.gif) into your tag.

* For Mac users,

1. Point at the image you want to use, and
2. Click and hold down the mouse button.
3. This will cause a menu to appear. One of the options in the menu is "Copy Image Location".
4. If you sellect this option, you can then paste the location (such as http://www.austen.com/tutorial/smiley.gif) into your tag.

If you are using MSExplorer, the best way to find the URL, is to use load the image on its own page. Use the same methods listed for Netscape, but choose the "View Image" option. Once the image is loaded all by itself onto the browser, the "Location" line at the very top of the page will contain the full URL. You can highlight it and copy it from there, then paste it wherever you want.

Pictures on the web are sometimes copyrighted, so you should be careful to make sure that they are available for general use, or you have permission from the owner to use them. All of the graphics listed here can be used freely.

Advanced Graphics Information
For more advanced information of manipulating the appearence of a graphic on a page, see Manipulating Graphics With Text

How To Make a Link To Another Web Site
Making a link, such as Jane Austen Information Page, is very similar to inserting a graphic. One major difference is that there must be a second tag to close the first one. The Jane Austen link I just used looks like:

Jane Austen Information Page

The first tag consists of three basic parts:

1. The a stands for "anchor", and is the term used in HTML to refer to links.

2. The href stands for "hypertext-reference" (I think), and tells the browser you are making a link to another web site.

3. As in the case of graphics, the full internet location of the web site you are refering to is then inserted in quotation marks after an =. The web address, http://www.pemberley.com/janeinfo/janeinfo.html, is the location of Henry Churchyard's Jane Austen page. The address for the page you are currently looking at is (probably) http://www.austen.com/tutorial/index.html.

Once this first tag is complete, anything typed after it will appear as an underlined link until you insert the second, closing, tag /a. For example, I could write the above link as

Henry's Jane Austen Page

or

Hey guys! Click here

If you do not close the tag, with the /a , then everything that follows will appear as an underlined link.

How To Indent a Section Of Text
Sometimes when quoting text or when you want to set one section of the text apart from the rest, it is useful to be able to indent it. This technique is used frequently in writing to denote long passages of quoted material. To indent a block of text surround it with the tags:

chosen text

The blockquote tag also automatically inserts a blank line above and below the chosen text.

For example:

"...The respect created by the conviction of his valuable qualities, though at first unwillingly admitted, had for some time ceased to be repugnant to her feeling; and it was now heightened into somewhat a friendlier nature, by the testimony so highly in his favor, and bringing forward his disposition in so amiable a light, which yesterday had produced. But above all, above respect and esteem, there was a motive within her of goodwill which could not be overlooked. It was gratitude; gratitude, not merely for having once loved her, but for living her still well enough to forgive all the petulance and acrimony of her manner in rejecting him, and all the unjust accusations accompanying her rejection..."

--Jane Austen, Pride and Prejudice

Once again it is very important to stop the indentation with the /blockquote tag.

How To Center a Section Of Text
Being able to center text or images comes in handy.

chosen text

The center tag also automatically inserts a blank line above and below the chosen text.

For example:
"...The respect created by the conviction of his valuable qualities, though at first unwillingly admitted, had for some time ceased to be repugnant to her feeling; and it was now heightened into somewhat a friendlier nature, by the testimony so highly in his favor, and bringing forward his disposition in so amiable a light, which yesterday had produced. But above all, above respect and esteem, there was a motive within her of goodwill which could not be overlooked. It was gratitude; gratitude, not merely for having once loved her, but for living her still well enough to forgive all the petulance and acrimony of her manner in rejecting him, and all the unjust accusations accompanying her rejection..."
--Jane Austen, Pride and Prejudice

Once again it is very important to stop the centering with the /center tag.

How To Right-Justify a Section Of Text
Since we're doing paragraph formatting, let's do right-justifying. This one is a little different, since it uses the

tag to make the formatting.

chosen text

The big thing to notice here is that the paragraph tag must be opened and closed like other tags (usually you don't need to close a paragraph tag, but here you do, since you have to tell the browser when to stop the formatting.)

For example:

"...The respect created by the conviction of his valuable qualities, though at first unwillingly admitted, had for some time ceased to be repugnant to her feeling; and it was now heightened into somewhat a friendlier nature, by the testimony so highly in his favor, and bringing forward his disposition in so amiable a light, which yesterday had produced. But above all, above respect and esteem, there was a motive within her of goodwill which could not be overlooked. It was gratitude; gratitude, not merely for having once loved her, but for living her still well enough to forgive all the petulance and acrimony of her manner in rejecting him, and all the unjust accusations accompanying her rejection..."

--Jane Austen, Pride and Prejudice

Once again it is very important to stop the justification with the

tag.

As you might be able to guess, this works with align=center as well as align=right.

In addition, you can justify both sides of text by using align=justify. This will cause the browser to space the words differently, so that they line up with the right margin:

--Jane Austen, Pride and Prejudice

How To Make Bulleted Lists

1. First you must tell the browser you are making an unnumbered list by typing:

in front of the item.

3. Then you must tell the browser that the list is complete by closing the list tag:

Notice that the

tags do not need to be closed.

Here is an example:

Item one on list.
Item two on list.
Item three on list.

Results in the following list:

* Item one on list.
* Item two on list.
* Item three on list.

Notice that the list is automatically indented.

You can also specify what type of bullet you want to use:

* If you want to use a hollow circle, add to the starting tag: type=circle, so it looks like UL type=circle.

* If you want to use a filled square, add to the starting tag: type=square, so it looks like UL type=square.

How To Make Numbered Lists
The method for making numbered lists is identical to that for bulleted lists. The only difference is that instead of an unnumbered list (UL) it is an ordered list (OL). So just replace the "UL's" in the last section with "OL's" and you have it:

Here is an example:

Item one on list.
Item two on list.
Item three on list.

Results in the following list:

1. Item one on list.
2. Item two on list.
3. Item three on list.

Again the list is automatically indented.

It is also possible to change the style of the numbers from 1. 2. 3., to A. B. C., a. b. c., I. II. III., or i. ii. iii.

1. For capital letters add type=A to the starting tag: OL type=A.

1. For lower-case letters add type=a to the starting tag: OL type=a.

1. For capital Roman numerals add type=I to the starting tag: OL type=I.

1. For lower-case Roman numerals add type=i to the starting tag: OL type=i.

Note: This is one of the few cases in HTML where capitilization is necessary: types "A" and "a" give different results, and "I" and "i" give different results.

For example (I'll only show one of these):

Item one on list.
Item two on list.
Item three on list.

Results in the following list:

1. Item one on list.
2. Item two on list.
3. Item three on list.

Using these techniques and by nesting the lists, it is possible to create outlines:

1. Introduction
2. The Basics
1. What is an HTML tag?
1. Formatting text
2. Syntax
1. Uses
2. Usually used in pairs.
3. The second tag closes the first
3. Capitalization
2. Italics
3. Bold
4. Size of font
1. Font attribute
2. Headers
3. Big and Small attributes
5. Color of font
3. Advanced
1. Inserting Graphics
2. Inserting Links
4. Conclusion

Text Formating tags

Getting text into your web page is quite easy - just start typing between the two BODY tags. When you save your work and view it in a browser, the text will appear without any special formatting. You don't need to specify a type of font to use, or a colour, or a size. This is because browsers are set up to use defaults when no instructions are given.

Text formatting, in html terms, is when you give the browser instructions on how your text should look. These instructions come in the form of tags, and you'll learn these now.

Colour

You can specify which colour you want to use for all the text on your web page. The browser default is black, so you only really need to specify a colour if you don't want black. Here's how to do it.

*
Start your HTML Editor
*
Click File > New
*
Set a background colour and click OK
*
When you see the code, locate the first BODY tag
*
Click your cursor after the "Y" of BODY
*
Press the spacebar on your keyboard
*
Type in TEXT =
*
Then type a colour for your text
*
In between the two BODY tags, start typing you text
*
Save your web page, and then view the results
*
In the code below, the text has been set to Blue

If all you want to do is to change the colour of some text between the BODY tags, your HTML editor has a quick way of doing that.

*
Highlight the text whose colour you want to change
*
From the menu bar, click on Format > Text Colour
*
The Colour dialogue box appears
*
Choose a colour by clicking on a colour square
*
Click OK

Headings

You've already met the Headings tag. If you'll remember, the Heading tag uses the letter "H" followed by a number. Like this:

My Heading

or like this:

My Heading

The heading tag increases or decreases text size above or below the default size. The default size is 3. The biggest size is 1, and the smallest 7.

The heading tag will automatically insert a line break for you, so you don't have to insert a

or
tag after it to start a new line.

To insert a Heading tag with the HTML Editor, click on Insert > Heading then choose a Heading size. Only size 1 to 4 are used in the editor. But bear in mind, you can go as low as size 7.

When you click on a heading size, the beginning and end Tag will be inserted with the cursor flashing between the two:

The forward slash, remember, tells the browser to stop formatting a tag. In this case, stop formatting the H1 heading tag.

With the cursor flashing between the two tags, type your text for the heading.

Centring Text

To centre text (and anything else on your page), the CENTER tag is used. Note the American spelling, with "ER" at the end and not "RE". To centre something with the HTML Editor, do the following:

*
Highlight whatever you want to centre
*
From the menu bar, click on Format > Centre
*
The two CENTER tags will surround your highlighted text
*
Save your work and view the results in your browser

In this lesson, we'll continue our look at the basic text formatting tags available to you in HTML

Bold Text

You can make text stand out by using the bold tag.

*
In your Editor, highlight the text you want to make bold
*
From the menu bar, click on Format > Bold
*
The two tags will surround your highlighted text
*
Save your work and view the results in your browser

Bold Text
Italics

The HTML tag to make text italic is as simple as the "B" tag for bold text. With your HTML editor, do the following:

*
Highlight the text for the italics
*
From the menu bar, click on Format > Italics
*
The two tags will surround your highlighted text
*
Save your work and view the results in your browser

Subscript

Subscript is text that appears below normal text. Like this:

50p

You can have Subscript in your HTML code quite easily. To format text as subscript using your HTML editor, do this:

*
Highlight the text you want to turn into subscript
*
From the menu bar, click on Format > Subscript
*
The two tags will surround your highlighted text
*
Save your work and view the results in your browser

Superscript

Superscript is text that is raised slightly above the centre. Like this

24th

To format text as superscript using your HTML editor, do this:

*
Highlight the text you want to turn into superscript
*
From the menu bar, click on Format > Superscript
*
The two tags will surround your highlighted text
*
Save your work and view the results in your browser

PRE tag

HTML Pre Tag

The HTML pre tags are used to define the HTML pre element. The HTML pre element begins with the HTML

 tag and ends with the HTML

tag. The HTML pre element is used to direct the browser to display a section of text exactly as it is typed with spaces and line feeds included.
HTML Pre Element Attributes

HTML "pre" element attributes include:

* width - (Depreciated). The "width" attribute specifies the number of characters across the screen to display. This is very rarely used. An example of its use is blockquote width="20"
* class - The class attribute is used in conjunction with style sheets to associate an element with a class. The class attribute can set a class for specific element types or it can be independent of element types and work for all elements. The class attribute will provide the settings for specific style formatting. CSS properties are shown at the CSS Properties page.
* ID - The ID attribute is used to apply style settings to specific individual HTML elements.
* style - The style attribute is used to apply style settings for the specific element the style attribute is included with. An example is"

- This sets the style or color of the text. This statement starts a paragraph with color, green:

. The STYLE attribute is common to most HTML elements (See the CSS Properties page).
* title - Used to give specific elements a title which may appear as a tooltip in some browsers when the mouse is held at or near the element.

HTML Pre Element Contents

The HTML pre element may contain other inline elements except "img", "object", "applet", "big", "small", "sub", sup". "font", and "basefont". HTML inline elements are listed at the HTML Inline Elements.
HTML Pre Element Inside

The HTML pre element can be contained inside the elements "applet", "blockquote", "body", "button", "center", "del", "dd", "div", "fieldset", "form", "iframe", "ins", "li", "map", "noframes", "noscript", "object", "td", and "th".
HTML Pre Element Use Example

The PRE element is handy for showing program code or part of file content as in this example:


switch ( )
{
case condition1
 break;
case condition2
   break;
}

This is how it looks:

switch ( )
{
case condition1
break;
case condition2
break;
}

CODE tag

The code tag is designed to display computer code in a special font, usually in a mono spaced font style. However, the exact appearance will be browser dependent. You may still need to use various HTML tags, such as br and p, to create a presentation and appearance to suit your needs.

An HTML code example cannot use the HTML delimiters < and >, because they will be executed by the browser as real HTML code. Rather you must substitute a < for the < and a > for the >.

Usually, the display font appearance for the code, kbd, samp, and tt tags is the same for a specific browser.

The pre tag is more commonly used to display code.

The separate closing tag is mandatory.

Attributes and Events

class dir id lang onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup style title

KBD tag

kbd is an HTML tag that is used to specify text to be typed in by the user (usually on a keyboard). While seldom used, this tag is useful for writing documentation for computer users. While the tag usually renders text by displaying it in a monospaced font, the tag should not be used simply for this purpose.

See also: code, font, plaintext, pre, samp, tt, var
Attributes

The kbd tag does not have any required HTML attributes. It does, however have numerous allowable attributes including:

* HTML Core Attributes
o class (type: CDATA) - space separated list of classes
o id (type: ID) - document-wide unique id
o style (type: Style Sheet) - associated style information
o title (type: Text) - advisory title/amplification; this information is usually displayed through tooltips

* HTML International Attributes (I18N)
o dir (type: Custom) - specifies the direction of weak or neutral text; valid values include ltr (left to right) or rtl (right to left)
o lang (type: Custom) - specifies the Language Code of the language used in the text

* HTML Event Attributes
o onclick (type: Script) - a pointer button was clicked
o ondblclick (type: Script) - a pointer button was double clicked
o onkeydown (type: Script) - a key was pressed down
o onkeypress (type: Script) - a key was pressed and released
o onkeyup (type: Script) - a key was released
o onmousedown (type: Script) - a pointer button was pressed down
o onmousemove (type: Script) - a pointer was moved within
o onmouseout (type: Script) - a pointer was moved away
o onmouseover (type: Script) - a pointer was moved onto
o onmouseup (type: Script) - a pointer button was released

Usage

To use the kbd tag, simply place opening and closing HTML tags around the characters that should be entered by the user. For example:

To destroy the usefulness of your computer, type del C:\*.* /S /Q at the command prompt.

On browsers that support this tag, this will typically cause the phrase "del *.* /S /Q" to be displayed in a monospaced font. Keep in mind that the purpose of this tag is to specify text to be typed in by the user, not to format your text. If you simply want to use a teletype font, you should technically use Cascading Style Sheets or the pre tag, however there are also the deprecated plaintext, samp, and tt tags that will do this as well.

SAMP tag

The samp tag is designed to place emphasis on a short string of special characters. The designated text is displayed in a teletype or mono space font face. The actual appearance will be determined by the browser.

For many browsers, the display font appearance for the code, kbd, samp, and tt tags is the same.

The separate closing tag is mandatory.

Attributes and Events

class dir id lang onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup style title

TT tag

The tag causes the designated text to be displayed in a teletype or mono space font face. The actual appearance will be determined by the browser. Usually, the display font appearance for the code, kbd, samp, and tt tags is the same. The listing tag has been deprecated. The closing tag is mandatory. Core attributes: class dir id lang onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup style title

Posted by html and php at 9:20 PM No comments: Labels: TT tag

PLAINTEXT tag This is an obsolete tag that has been replaced by the PRE tag. It's behavior can be very odd on some browsers, including recent browser versions (some browsers do not recognize the closing tag, thus everything after the opening is rendered as plain text, including the closing BODY and HTML tags.<br /><br />Example code:<br /><br />An example of how the <PLAINTEXT><I>Plaintext tag</I></PLAINTEXT> works in a document. Note that HTML tags are ignored within the PLAINTEXT tags. <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> Posted by <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/05809430139875726857' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/05809430139875726857' rel='author' title='author profile'> <span itemprop='name'>html and php</span> </a> </span> </span> <span class='post-timestamp'> at <meta content='http://htmlandphp.blogspot.com/2009/03/plaintext-tag.html' itemprop='url'/> <a class='timestamp-link' href='http://htmlandphp.blogspot.com/2009/03/plaintext-tag.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-03-03T02:17:00-08:00'>2:17 AM</abbr></a> </span> <span class='post-comment-link'> <a class='comment-link' href='http://htmlandphp.blogspot.com/2009/03/plaintext-tag.html#comment-form' onclick=''> No comments: </a> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1323227177'> <a href='https://www.blogger.com/post-edit.g?blogID=6830606489310006988&postID=3089726707773499780&from=pencil' title='Edit Post'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> Labels: <a href='http://htmlandphp.blogspot.com/search/label/PLAINTEXT%20tag' rel='tag'>PLAINTEXT tag</a> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='6830606489310006988' itemprop='blogId'/> <meta content='8137431514947377502' itemprop='postId'/> <a name='8137431514947377502'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='http://htmlandphp.blogspot.com/2009/03/xmp-tag.html'>XMP tag</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-8137431514947377502' itemprop='description articleBody'> XMP stands for "Extensible Metadata Platform", an XML/RDF-based metadata format which is being pushed by Adobe. Information in this format can be embedded in many different image file types including JPG, JP2, TIFF, GIF, EPS, PDF, PSD, DNG, PNG, DJVU, SVG and MIFF, as well as MOV, AVI, ASF, WMV, FLV, SWF and MP4 videos, and WMA and audio formats supporting ID3v2 information.<br /><br />The XMP Tag ID's aren't listed because in most cases they are identical to the Tag Name.<br /><br />All XMP information is stored as character strings. The Writable column specifies the information format: string is an unformatted string, integer is a string of digits (possibly beginning with a '+' or '-'), real is a floating point number, rational is entered as a floating point number but stored as two integer strings separated by a '/' character, date is a date/time string entered in the format "YYYY:MM:DD HH:MM:SS[.SS][+/-HH:MM]", boolean is either "True" or "False", and lang-alt is a list of string alternatives in different languages.<br /><br />Individual languages for lang-alt tags are accessed by suffixing the tag name with a '-', followed by an RFC 3066 language code (ie. "XMP:Title-fr", or "Rights-en-US"). A lang-alt tag with no language code accesses the "x-default" language, but causes other languages for this tag to be deleted when writing. The "x-default" language code may be specified when writing to preserve other existing languages (ie. "XMP-dc:Description-x-default"), but note that other languages are still deleted if the "x-default" language is deleted. When reading, "x-default" is not specified.<br /><br />The XMP tags are organized according to schema Namespace in the following tables. Note that a few of the longer namespace prefixes given below have been shortened for convenience (since the family 1 group names are derived from these by adding a leading "XMP-"). In cases where a tag name exists in more than one namespace, less common namespaces are avoided when writing. However, any namespace may be written by specifying a family 1 group name for the tag, ie) XMP-exif:Contrast or XMP-crs:Contrast.<br /><br />ExifTool will extract XMP information even if it is not listed in these tables. For example, the pdfx namespace doesn't have a predefined set of tag names because it is used to store application-defined PDF information, but this information is extracted by ExifTool. <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> Posted by <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/05809430139875726857' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/05809430139875726857' rel='author' title='author profile'> <span itemprop='name'>html and php</span> </a> </span> </span> <span class='post-timestamp'> at <meta content='http://htmlandphp.blogspot.com/2009/03/xmp-tag.html' itemprop='url'/> <a class='timestamp-link' href='http://htmlandphp.blogspot.com/2009/03/xmp-tag.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-03-03T02:04:00-08:00'>2:04 AM</abbr></a> </span> <span class='post-comment-link'> <a class='comment-link' href='http://htmlandphp.blogspot.com/2009/03/xmp-tag.html#comment-form' onclick=''> No comments: </a> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1323227177'> <a href='https://www.blogger.com/post-edit.g?blogID=6830606489310006988&postID=8137431514947377502&from=pencil' title='Edit Post'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> Labels: <a href='http://htmlandphp.blogspot.com/search/label/XMP%20tag' rel='tag'>XMP tag</a> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='6830606489310006988' itemprop='blogId'/> <meta content='3225449196447539119' itemprop='postId'/> <a name='3225449196447539119'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='http://htmlandphp.blogspot.com/2009/03/address-tag.html'>ADDRESS tag</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-3225449196447539119' itemprop='description articleBody'> Note: If you don't know what a tag is and/or how you must use it we recommend you to read our HTML tags and attributes tutorial that you can find in our HTML tutorials section.<br /><br />Table of contents<br /><br /> * Description<br /> * Attributes<br /> * Events<br /> * Examples<br /><br /> <br /><br />Description<br />The HTML address tag is commonly used to provide contact information at the bottom or beginning of a document or a form. It could be used, for example, to provide information about the enterprise behind the website, the author of a specific article or the author of the website itself. Note that browsers may change the aspect of the text between these tags (e.g., italic font).<br /><br />Attributes<br />id (name)<br />The "id" attribute assigns an identifier to the associated element. This identifier must be unique in the document and can be used to refer to that element.<br /><br />Example:<br /><br />Code begin <p id="paragraph1">This is the first paragraph named as paragraph1. To dynamically change its properties use this identifier.</p>Code end<br /> <br /> <br /><br />class (cdata)<br />The "class" attribute assigns a class name (or a list of class names separated by spaces) to the container element. It's used with style sheets and tells the browser the class to which the element is associated with. A class gives visual attributes to elements.<br /><br />Example:<br /><br />Code begin <p class="references">This article is based on the book "Wind in the trees" by Jhon L. Brooks</p><br /><br /><p class="references important">This article is based on the book "Wind in the trees" by Jhon L. Brooks... and is more important than the one before.</p>Code end<br /> <br /> <br /><br />style (style)<br />Defines a visual style of this element. Is a better practice to define styles attributes in external style sheets grouping them in classes. Attributes in the "style" parameter must preserve this order "name : value" and be separated by a semi-colon.<br /><br />If you're writing XHTML code it's recommended not to use this attribute and try style sheet classes (with the "class" attribute).<br /><br />Example:<br /><br />Code begin <p style="color: #0000FF; font-size: 12pt">This is a paragraph with a defined style</p><br /><p>And this is another text without style.</p>Code end<br /> <br /> <br /><br />title (text)<br />Indicates a title for the element. Used to give a short description about the element that is usually shown as a "tool tip" when the user put the mouse pointer over the element.<br /><br />Example:<br /><br />Code View<br /><a title="HTMLQuick.com" href="http://www.htmlquick.com">HTML code</a> HTML code<br /> <br /><br />lang (langcode)<br />Specifies the language of an element's content. The default value in "unknown".<br /><br />When writing XHTML code the syntax "xml:lang" represents a preferred alternative in XHTML 1.0 and a replacement in XHTML 1.1 (e.g., xml:lang="en").<br /><br />Example:<br /><br />Code begin <p lang="en">This is a paragraph in english.</p><br /><p lang="es">Este es un párrafo en español.</p>Code end<br /> <br /> <br /><br />dir<br />Specifies the text direction of the element's contents and attribute values, as well as tables directionality. It has two possible values that are case insensitive:<br /><br /> * RTL: Right to left.<br /> * LTR: Left to right.<br /><br />Example:<br /><br />Code begin <q lang="he" dir="rtl">...a Hebrew quotation...</q>Code end<br /> <br /> <br /><br /><br />Events<br /><br /> * onclick<br /> * ondblclick<br /> * onmousedown<br /> * onmouseup<br /> * onmouseover<br /> * onmousemove<br /> * onmouseout<br /> * onkeypress<br /> * onkeydown<br /> * onkeyup<br /><br />See complete list and information about events in HTML<br /><br /><span style="font-weight:bold;">Events in HTML</span><br /><br />As well as attributes, events can be defined in HTML tags. Events, instead of giving values to the elements like the attributes, trigger actions when they occurs. These actions are defined by client-side scripts that are programs written to perform some action in a specific language (e.g., JavaScript, VBScript, etc.). There are different events that occurs in different instances according to browsers or users actions.<br /><br /><span style="font-weight:bold;">List of events</span><br /><br />Below is al list of all events available for the HTML 4.01 Standard.<br /><br /> * onload: The onload event occurs when the user agent finishes loading a window or all frames within a frameset.<br /> * onunload: The onunload event occurs when the user agent removes a document from a window or frame.<br /> * onclick: The onclick event is triggered when the mouse button is clicked over the element.<br /> * ondblclick: The ondblclick event occurs when the pointing device button is double clicked over an element.<br /> * onmousedown: The onmousedown event is triggered when the mouse button is pressed over the element.<br /> * onmouseup: The onmouseup event occurs when the pointing device button is released over an element.<br /> * onmouseover: The onmouseover event is triggered when the mouse is moved onto the element.<br /> * onmousemove: The onmousemove event occurs when the pointing device is moved while it is over an element.<br /> * onmouseout: The onmouseout event is triggered when the mouse is moved away from the element.<br /> * onfocus: The onfocus event occurs when an element receives focus either by the pointing device or by tabbing navigation.<br /> * onblur: The onblur event is triggered when an element loses focus either by the pointing device or by tabbing navigation.<br /> * onkeypress: The onkeypress event occurs when a key is pressed and released over an element.<br /> * onkeydown: The onkeydown event is triggered when a key is pressed down over the element.<br /> * onkeyup: The onkeyup event occurs when a key is released over an element.<br /> * onsubmit: The onsubmit event is triggered when a form is submitted.<br /> * onreset: The onreset event occurs when a form is reset.<br /> * onselect: The onselect event is triggered when a user selects some text in a text field.<br /> * onchange: The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus. <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> Posted by <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/05809430139875726857' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/05809430139875726857' rel='author' title='author profile'> <span itemprop='name'>html and php</span> </a> </span> </span> <span class='post-timestamp'> at <meta content='http://htmlandphp.blogspot.com/2009/03/address-tag.html' itemprop='url'/> <a class='timestamp-link' href='http://htmlandphp.blogspot.com/2009/03/address-tag.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-03-03T01:59:00-08:00'>1:59 AM</abbr></a> </span> <span class='post-comment-link'> <a class='comment-link' href='http://htmlandphp.blogspot.com/2009/03/address-tag.html#comment-form' onclick=''> No comments: </a> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1323227177'> <a href='https://www.blogger.com/post-edit.g?blogID=6830606489310006988&postID=3225449196447539119&from=pencil' title='Edit Post'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> Labels: <a href='http://htmlandphp.blogspot.com/search/label/ADDRESS%20tag' rel='tag'>ADDRESS tag</a> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='6830606489310006988' itemprop='blogId'/> <meta content='8113960281379343655' itemprop='postId'/> <a name='8113960281379343655'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='http://htmlandphp.blogspot.com/2009/03/blockquote-tag.html'>BLOCKQUOTE tag</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-8113960281379343655' itemprop='description articleBody'> The HTML blockquote tags are used to define the HTML blockquote element. The HTML blockquote element begins with the HTML <blockquote> tag and ends with the HTML </blockquote> tag. The HTML blockquote element is used to format a block of text as a long quote which is indented more than the surrounding text on the left and the right.<br />HTML Blockquote Element Attributes<br /><br />HTML "blockquote" element attributes include:<br /><br /> * cite="uri" - Specifies the URI of the source of the quote.<br /> * class - The class attribute is used in conjunction with style sheets to associate an element with a class. The class attribute can set a class for specific element types or it can be independent of element types and work for all elements. The class attribute will provide the settings for specific style formatting. CSS properties are shown at the CSS Properties page.<br /> * ID - The ID attribute is used to apply style settings to specific individual HTML elements.<br /> * style - The style attribute is used to apply style settings for the specific element the style attribute is included with. An example is" <p style="font: 16pt courier"> - This sets the style or color of the text. This statement starts a paragraph with color, green: <p style="color: green">. The STYLE attribute is common to most HTML elements (See the CSS Properties page).<br /> * title - Used to give specific elements a title which may appear as a tooltip in some browsers when the mouse is held at or near the element. <br /><br />HTML Blockquote Element Contents<br /><br />The HTML blockquote element may contain other block elements such as headers, paragraphs, preformat blocks and tables. HTML block elements are listed at the HTML Block Elements. The HTML "blockquote" element may also contain the "script" element.<br />HTML Blockquote Element Inside<br /><br />The HTML blockquote element can be contained inside the elements "applet", "blockquote", "body", "button", "center", "del", "dd", "div", "fieldset", "form", "iframe", "ins", "li", "map", "noframes", "noscript", "object", "td", and "th". The HTML "blockquote" element should not be contained inside a paragraph element.<br />HTML Blockquote Element Use Example<br /><br />This is the HTML code:<br /><br /><p><br />The preamble of the Constitution says:<br><br /></p><br /><blockquote><br />We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.<br /></blockquote><br /><br />This is how it looks:<br /><br />The preamble of the Constitution says:<br /><br /> We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America. <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> Posted by <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/05809430139875726857' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/05809430139875726857' rel='author' title='author profile'> <span itemprop='name'>html and php</span> </a> </span> </span> <span class='post-timestamp'> at <meta content='http://htmlandphp.blogspot.com/2009/03/blockquote-tag.html' itemprop='url'/> <a class='timestamp-link' href='http://htmlandphp.blogspot.com/2009/03/blockquote-tag.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-03-03T01:51:00-08:00'>1:51 AM</abbr></a> </span> <span class='post-comment-link'> <a class='comment-link' href='http://htmlandphp.blogspot.com/2009/03/blockquote-tag.html#comment-form' onclick=''> No comments: </a> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1323227177'> <a href='https://www.blogger.com/post-edit.g?blogID=6830606489310006988&postID=8113960281379343655&from=pencil' title='Edit Post'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> Labels: <a href='http://htmlandphp.blogspot.com/search/label/BLOCKQUOTE%20tag' rel='tag'>BLOCKQUOTE tag</a> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='6830606489310006988' itemprop='blogId'/> <meta content='1286552739604618425' itemprop='postId'/> <a name='1286552739604618425'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='http://htmlandphp.blogspot.com/2009/03/cite-tag.html'>CITE tag</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-1286552739604618425' itemprop='description articleBody'> The <cite> tag takes the selected block of text (a citation) and displays it in italics. Unlike the blockquote tag, the citation is not preceded or followed by paragraph breaks. So the citation remain inline. You may still need to use other HTML tags to effect the textual display and appearance that you desire.<br /> <br />It is recommended that you use the blockquote tag for long citations and the cite tag for short citations.<br /> <br />The closing tag is mandatory.<br /> <br />Core Attributes<br /> <br />class dir id lang onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup style title <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> Posted by <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/05809430139875726857' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/05809430139875726857' rel='author' title='author profile'> <span itemprop='name'>html and php</span> </a> </span> </span> <span class='post-timestamp'> at <meta content='http://htmlandphp.blogspot.com/2009/03/cite-tag.html' itemprop='url'/> <a class='timestamp-link' href='http://htmlandphp.blogspot.com/2009/03/cite-tag.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-03-03T01:47:00-08:00'>1:47 AM</abbr></a> </span> <span class='post-comment-link'> <a class='comment-link' href='http://htmlandphp.blogspot.com/2009/03/cite-tag.html#comment-form' onclick=''> No comments: </a> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1323227177'> <a href='https://www.blogger.com/post-edit.g?blogID=6830606489310006988&postID=1286552739604618425&from=pencil' title='Edit Post'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> Labels: <a href='http://htmlandphp.blogspot.com/search/label/CITE%20tag' rel='tag'>CITE tag</a> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='6830606489310006988' itemprop='blogId'/> <meta content='2218651723001619728' itemprop='postId'/> <a name='2218651723001619728'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='http://htmlandphp.blogspot.com/2009/03/dfn-tag.html'>DFN tag</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-2218651723001619728' itemprop='description articleBody'> Note: If you don't know what a tag is and/or how you must use it we recommend you to read our HTML tags and attributes tutorial that you can find in our HTML tutorials section.<br /><br />Table of contents<br /><br /> * Description<br /> * Attributes<br /> * Events<br /> * Examples<br /><br /> <br /><br />Description<br />The HTML dfn tag indicates that this is the defining instance of the term enclosed by the tags.<br /><br />Attributes<br />id (name)<br />The "id" attribute assigns an identifier to the associated element. This identifier must be unique in the document and can be used to refer to that element.<br /><br />Example:<br /><br />Code begin <p id="paragraph1">This is the first paragraph named as paragraph1. To dynamically change its properties use this identifier.</p>Code end<br /> <br /> <br /><br />class (cdata)<br />The "class" attribute assigns a class name (or a list of class names separated by spaces) to the container element. It's used with style sheets and tells the browser the class to which the element is associated with. A class gives visual attributes to elements.<br /><br />Example:<br /><br />Code begin <p class="references">This article is based on the book "Wind in the trees" by Jhon L. Brooks</p><br /><br /><p class="references important">This article is based on the book "Wind in the trees" by Jhon L. Brooks... and is more important than the one before.</p>Code end<br /> <br /> <br /><br />style (style)<br />Defines a visual style of this element. Is a better practice to define styles attributes in external style sheets grouping them in classes. Attributes in the "style" parameter must preserve this order "name : value" and be separated by a semi-colon.<br /><br />If you're writing XHTML code it's recommended not to use this attribute and try style sheet classes (with the "class" attribute).<br /><br />Example:<br /><br />Code begin <p style="color: #0000FF; font-size: 12pt">This is a paragraph with a defined style</p><br /><p>And this is another text without style.</p>Code end<br /> <br /> <br /><br />title (text)<br />Indicates a title for the element. Used to give a short description about the element that is usually shown as a "tool tip" when the user put the mouse pointer over the element.<br /><br />Example:<br /><br />Code View<br /><a title="HTMLQuick.com" href="http://www.htmlquick.com">HTML code</a> HTML code<br /> <br /><br />lang (langcode)<br />Specifies the language of an element's content. The default value in "unknown".<br /><br />When writing XHTML code the syntax "xml:lang" represents a preferred alternative in XHTML 1.0 and a replacement in XHTML 1.1 (e.g., xml:lang="en").<br /><br />Example:<br /><br />Code begin <p lang="en">This is a paragraph in english.</p><br /><p lang="es">Este es un párrafo en español.</p>Code end<br /> <br /> <br /><br />dir<br />Specifies the text direction of the element's contents and attribute values, as well as tables directionality. It has two possible values that are case insensitive:<br /><br /> * RTL: Right to left.<br /> * LTR: Left to right.<br /><br />Example:<br /><br />Code begin <q lang="he" dir="rtl">...a Hebrew quotation...</q>Code end<br /> <br /> <br /><br /><br />Events<br /><br /> * onclick<br /> * ondblclick<br /> * onmousedown<br /> * onmouseup<br /> * onmouseover<br /> * onmousemove<br /> * onmouseout<br /> * onkeypress<br /> * onkeydown<br /> * onkeyup<br /><br />See complete list and information about events in HTML<br /><span style="font-weight:bold;"><br />Events in HTML</span><br /><br />As well as attributes, events can be defined in HTML tags. Events, instead of giving values to the elements like the attributes, trigger actions when they occurs. These actions are defined by client-side scripts that are programs written to perform some action in a specific language (e.g., JavaScript, VBScript, etc.). There are different events that occurs in different instances according to browsers or users actions.<br /><br /><span style="font-weight:bold;">List of events</span><br /><br />Below is al list of all events available for the HTML 4.01 Standard.<br /><br /> * onload: The onload event occurs when the user agent finishes loading a window or all frames within a frameset.<br /> * onunload: The onunload event occurs when the user agent removes a document from a window or frame.<br /> * onclick: The onclick event is triggered when the mouse button is clicked over the element.<br /> * ondblclick: The ondblclick event occurs when the pointing device button is double clicked over an element.<br /> * onmousedown: The onmousedown event is triggered when the mouse button is pressed over the element.<br /> * onmouseup: The onmouseup event occurs when the pointing device button is released over an element.<br /> * onmouseover: The onmouseover event is triggered when the mouse is moved onto the element.<br /> * onmousemove: The onmousemove event occurs when the pointing device is moved while it is over an element.<br /> * onmouseout: The onmouseout event is triggered when the mouse is moved away from the element.<br /> * onfocus: The onfocus event occurs when an element receives focus either by the pointing device or by tabbing navigation.<br /> * onblur: The onblur event is triggered when an element loses focus either by the pointing device or by tabbing navigation.<br /> * onkeypress: The onkeypress event occurs when a key is pressed and released over an element.<br /> * onkeydown: The onkeydown event is triggered when a key is pressed down over the element.<br /> * onkeyup: The onkeyup event occurs when a key is released over an element.<br /> * onsubmit: The onsubmit event is triggered when a form is submitted.<br /> * onreset: The onreset event occurs when a form is reset.<br /> * onselect: The onselect event is triggered when a user selects some text in a text field.<br /> * onchange: The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus. <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> Posted by <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/05809430139875726857' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/05809430139875726857' rel='author' title='author profile'> <span itemprop='name'>html and php</span> </a> </span> </span> <span class='post-timestamp'> at <meta content='http://htmlandphp.blogspot.com/2009/03/dfn-tag.html' itemprop='url'/> <a class='timestamp-link' href='http://htmlandphp.blogspot.com/2009/03/dfn-tag.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-03-03T01:43:00-08:00'>1:43 AM</abbr></a> </span> <span class='post-comment-link'> <a class='comment-link' href='http://htmlandphp.blogspot.com/2009/03/dfn-tag.html#comment-form' onclick=''> No comments: </a> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1323227177'> <a href='https://www.blogger.com/post-edit.g?blogID=6830606489310006988&postID=2218651723001619728&from=pencil' title='Edit Post'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> Labels: <a href='http://htmlandphp.blogspot.com/search/label/DFN%20tag' rel='tag'>DFN tag</a> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> </div></div> <div class="date-outer"> <h2 class='date-header'><span>Saturday, February 28, 2009</span></h2> <div class="date-posts"> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='url' itemprop='image_url'/> <meta content='6830606489310006988' itemprop='blogId'/> <meta content='4871513813234308645' itemprop='postId'/> <a name='4871513813234308645'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='http://htmlandphp.blogspot.com/2009/02/image-tag.html'>IMAGE tag</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-4871513813234308645' itemprop='description articleBody'> The <img> tag embeds an image in an HTML page.<br /><br />The <img> tag has two required attributes: src and alt.<br />The Image Tag and the Src Attribute<br /><br />In HTML, images are defined with the <img> tag. <br /><br />The <img> tag is empty, which means that it contains attributes only and it has no closing tag.<br /><br />To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page.<br /><br />The syntax of defining an image:<br /><br /><img src="url"><br /><br />The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif.<br /><br />The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.<br />The Alt Attribute<br /><br />The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text:<br /><br /><img alt="Big Boat" src="boat.gif"><br /><br />The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.<br />Basic Notes - Useful Tips<br /><br />If an HTML file contains ten images - eleven files are required to display the page right. Loading images take time, so my best advice is: Use images carefully. <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> Posted by <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/05809430139875726857' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/05809430139875726857' rel='author' title='author profile'> <span itemprop='name'>html and php</span> </a> </span> </span> <span class='post-timestamp'> at <meta content='http://htmlandphp.blogspot.com/2009/02/image-tag.html' itemprop='url'/> <a class='timestamp-link' href='http://htmlandphp.blogspot.com/2009/02/image-tag.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-02-28T21:21:00-08:00'>9:21 PM</abbr></a> </span> <span class='post-comment-link'> <a class='comment-link' href='http://htmlandphp.blogspot.com/2009/02/image-tag.html#comment-form' onclick=''> No comments: </a> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1323227177'> <a href='https://www.blogger.com/post-edit.g?blogID=6830606489310006988&postID=4871513813234308645&from=pencil' title='Edit Post'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> Labels: <a href='http://htmlandphp.blogspot.com/search/label/IMAGE%20tag' rel='tag'>IMAGE tag</a> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='home.gif' itemprop='image_url'/> <meta content='6830606489310006988' itemprop='blogId'/> <meta content='6490284117540319718' itemprop='postId'/> <a name='6490284117540319718'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='http://htmlandphp.blogspot.com/2009/02/anchor-tag.html'>ANCHOR tag</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-6490284117540319718' itemprop='description articleBody'> Links on web pages are created using the anchor tags. These links can point to a different document<br />on the Internet or to some anchor on the same page. Documents linked in this manner need not be HTML (or PHP/ASP) files. You can place a link to any kind of file.<br /><br />Anchor Tag attributes<br /> charset= text<br /> Character encoding which specifies the character encoding of the target URL.<br /> Example: charset=utf-8<br /> href = relative address (i.e. the address of a file RELATIVE to the current document)<br /> move up to next higher folder using ../<br /> move down to a lower folder using folder (or 'directory' on the server) name<br /> display from fragmentation-id position on document using #fragmentation-id.<br /> Example-1: - current document displayed with fragmentation-id section at top of display. This is coding for moving round the same document, perhaps with an index at the top linking to sub-sections lower down.<br /> Example-2: - file in current folder displayed with top of page at top of display. With no fragmentation id specified, the display is from the top of the page.<br /> Example-3: - file in next highest folder is displayed with the top of the page at the top of the display.<br /> Example-4: - a file in a lower folder is displayed with fragmentation-id at the top of the display.<br /> href = absolute address<br /> Example-5: - the server default file in directory at this absolute address is displayed from top of page.<br /> Example-6: - specified file at this absolute address is displayed from top of page.<br /> Example-7: - file with this absolute address is displayed from fragmentation-id position.<br /> Example-8: - file (schedule.htm) with absolute address (http://www.bbc.com/radio4/) - is displayed from fragmentation-id position (#today) , and gives a fragmentation-id (refbbc) for the current position in the current document.<br /><br /> types of file<br /> Normally the link is to another webpage (with file extension htm or html), but links to other file extensions are possible. An extensive variety of files can be accommodated, but the presumption is that the user has associated the file extension with a suitable application program, for example:<br /> .doc associated with MS Word. .pdf associated with Adobe Reader. .ppt associated with MS Powerpoint.<br /> Formats may include .wav for audio, .pdf / .doc for desktop publishing, .ppt for presentation, .exl for spreadsheet, etc. Consequently, only the most popular, legacy formats should be linked, in order to ensure that the majority of users' set-ups can deal with the format presented.<br /> Note 1: A file-type icon is often added to the link for visual confirmation of a non-HTML link -<br /> word minutes.doc estimates.exl excel<br /> adobe acrobat instructions.pdf presentation.ppt adobe acrobat<br /> Note 2: A link to a PDF format document is often accompanied by<br /> adobe reader Link to Adobe Reader download<br /> providing the user with a link to downloadable software, which can be used to view the file.<br /><br /> href = mailto (i.e. to send an e-mail)<br /> Example: <a href="mailto:e-mail">e-mail</a><br /> Note 1: Minimise spam, frustrate the spambots by using coding to hide the e-mail address.<br /> Note 2 : Make it clear that it is an e-mail link.<br /> name= text<br /> Example: - signifies a Fragmentation Identifier (anchor) position on the current document.<br /> Note: a linking href must use a leading # after the document name (see Examples - 1,4,7,8)<br /> further Fragmentation Identifier<br /> The id attribute in the start tag of A (and other elements) identifies a reference position in the document. Name (or id) must be unique for the document. When linked using the fragmentation identifier, the browser shows the start of the fragment at the top of the display.<br /> id=text<br /> Example: <p id="sports"> - signifies a fragmentation identifier position on the page.<br /> Note: the linking href must use a leading # after the document name (see Examples - 1,4,7,8)<br /> rel= text<br /> Specifies the relationship between the current document and the target URL.<br /> Example: rel=index<br /> Options: alternate,designates,stylesheet,start,next,prev,contents,index,glossary,copyright, chapter,section,subsection,appendix,help,bookmark<br /> rev= text<br /> Specifies the reverse relationship between the document and the target URL<br /> Example: rel=subsection<br /> Options: alternate,designates,stylesheet,start,next,prev,contents,index,glossary, copyright,chapter,section,subsection,appendix,help,bookmark<br /> target= text<br /> Example: target="_blank" - retains 'stickability' and hence generally preferable.<br /> Options: a href="URL" target="_blank" creates a new window of default size<br /> a href="URL" target="_parent" targets the frameset in which the current page belongs<br /> a href="URL" target="_self" targets the current window<br /> a href="URL" target="_top" targets the main browser window, eliminating all frames<br /> title= text<br /> The text displayed when the mouse hovers over the text-link (mouse-over tool-tip).<br /> Note: In the case of a graphic link (depending on the browser), the ALT attribute of the IMG tag may take precedence.<br /> Example: title="Tool Tip displayed on hover" - when the mouse hovers over the link, a tool tip is displayed.<br /><br /> Mouseover Tool Tip<br /><br /> * an exciting description can encourage the user to investigate the link<br /> * use to give extra information<br /><br />Anchor Tag hypertext link<br /> hypertext as text<br /> Example: <a href="tag_a.htm"> Anchor tag definition</a> - SEs use linking text as keywords to categorise the content of the link. Decide which are the most appropriate keywords for the content and use them in the link text.<br /><br /> Link-text content<br /><br /> * One way to improve your Search Engine ranking.<br /> * Carefully select appropriate, hypertext keywords within the website.<br /> * Ask external link creators to use your own, selected, keyword-rich anchor-text in their external hypertext link.<br /><br /> Link-text appearance<br /><br /> * length can be controlled by incorporating the line return character<br /> * change font characteristics using CSS (see below)<br /><br /> hypertext as graphic<br /> Note 1: Always specify IMG attributes width, height, alt, border.<br /> Note 2: According to the browser, with the Tool Tip the IMG, alt attribute may take priority over the A, title attribute.<br /> Homepage Example: <a href="index.htm" title="home"><img alt="Homepage" height="16" src="home.gif" width="16"></a><br /> - image is bordered by the link colour if border=0 is omitted.<br /> Homepage Example: <a href="index.htm" title="home"><img alt="Homepage" border="0" height="16" src="home.gif" width="16"></a><br /> - use border=0 to eliminate link-colour border to graphic.<br /> Homepage<br /> Home<br /> Example: <a href="index.htm" title="home"><img alt="Homepage" border="0" height="16" src="home.gif" width="16"><br>Home</a><br /> - a combination of graphic and text is often used to clearly identify the hyperlink.<br /> <br /><br /> Client-side mapping<br /> By moving the cursor to different parts of the graphic, different links can be created.<br /> See the IMG tag attribute usemap for further information.<br /><br />Web link legacy and consistency<br /> In the early days of the WWW, links were all coloured blue and underlined. Users still expect text of this colour to operate as a link, so to meet their expectations and to give them confidence when using the site, it is recommended that link text throughout the site is generally coloured blue.<br /> Such a global feature should be coded in a Linked CSS stylesheet.<br /><br /> Dynamic link - styled attributes<br /> To attract the user's attention, and to confirm that a hyperlink exists, it is always good policy to make the hypertext dynamic.<br /> These sort of changes are particularly powerful for the navigation components, which could involve contrasts of the 'a hover' and 'a' css properties and values. However dynamic changes which could drastically affect nearby text and alter the layout (e.g. font-size) are not recommended.<br /> Example:<br /> Homepage<br /> Home The style attributes for the link text and graphic can be selected so that a mouseover produces a dynamic change of appearance.<br /> This graphic has a transparent background, with the 'white' background-color showing through.<br /> On 'hover' the background-color changes from 'white' to 'purple' with the link-text font-color changing from 'blue' to 'orange'.<br /> Note: IE produces the expected result, Firefox makes transparent only the lower half of the graphic.<br /> Linked CSS style sheet Pseudo-class selectors<br /> Currently these are: hover, active, link, visited, lang, focus<br /> The first four are directly relevant to an anchor tag link.<br /> A linked style sheet contains declarations of global properties and values.<br /> Example:<br /> a:link {color:#0000CC; text-decoration:none; font-weight: bold; }<br /> a:active {color:#FF0000; text-decoration:none; }<br /> a:visited {color:#660099; text-decoration:none; font-weight: bold; }<br /> a:hover {color:#FF9900; text-decoration:none; background-color: white; }<br /> Note: use of the COLON rather than the usual full stop.<br /><br /> Varied CSS link tags<br /> In general, it is very confusing for the user if the link tags vary throughout the website, but in exceptional cases this may be required.<br /> On a linked style sheet an alternative set of parameters could be defined for the anchor attributes.<br /> Example:<br /> a.exc:link {color:#0000CC; text-decoration:none; font-weight: bold; }<br /> a.exc:active {color:#FF0000; text-decoration:none; }<br /> a.exc:visited {color:#660099; text-decoration:none; font-weight: bold; }<br /> a.exc:hover {color:#FF9900; text-decoration:none; background-color: purple; }<br /> Notes:<br /><br /> * See above example in 'Dynamic link - styled attributes'. On 'hover' the background-color is 'purple' rather than the usual 'white', making 'hover' dynamic - on a white, transparent-background, graphical link.<br /> * Coded using the class="exc" notation.<br /> e.g. <a class="exc" href="home.htm"><img code=""></a><br /><br />Use CSS to change link characteristics<br /> On rare occasions, it may be necessary to change locally, the global characteristics inherited from the linked stylesheet.<br /><br /> Change the static anchor-text attributes<br /> The anchor-text can be changed within the anchor coding using CSS attributes.<br /> This could involve:<br /> color style="color:red;" font color<br /> font-family style="font-family: times new roman;" font-family<br /> font-weight style="font-weight: bold;" bold<br /> font-style style="font-style: italic;" italic<br /> font-size style="font-size: x-small;" x-small<br /> text-decoration style="text-decoration: underline;" underline<br /> background-color style="background-color: #ffccff;" <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> Posted by <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/05809430139875726857' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/05809430139875726857' rel='author' title='author profile'> <span itemprop='name'>html and php</span> </a> </span> </span> <span class='post-timestamp'> at <meta content='http://htmlandphp.blogspot.com/2009/02/anchor-tag.html' itemprop='url'/> <a class='timestamp-link' href='http://htmlandphp.blogspot.com/2009/02/anchor-tag.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-02-28T21:09:00-08:00'>9:09 PM</abbr></a> </span> <span class='post-comment-link'> <a class='comment-link' href='http://htmlandphp.blogspot.com/2009/02/anchor-tag.html#comment-form' onclick=''> No comments: </a> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1323227177'> <a href='https://www.blogger.com/post-edit.g?blogID=6830606489310006988&postID=6490284117540319718&from=pencil' title='Edit Post'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> Labels: <a href='http://htmlandphp.blogspot.com/search/label/ANCHOR%20tag' rel='tag'>ANCHOR tag</a> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='6830606489310006988' itemprop='blogId'/> <meta content='2715070469240281219' itemprop='postId'/> <a name='2715070469240281219'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='http://htmlandphp.blogspot.com/2009/02/map-tag.html'>MAP tag</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-2715070469240281219' itemprop='description articleBody'> The maptag is used to define a client-side image-map. An image-map is an image with clickable areas.<br /><br />The name attribute is required in the map element. This attribute is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.<br /><br />The map element contains a number of area elements, that defines the clickable areas in the image map.<br /><span style="font-weight:bold;">Required Attributes</span><br /><br />DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.<br />Attribute Value Description DTD<br />name mapname Specifies the name for an image-map STF<br /><br /><span style="font-weight:bold;">Standard Attributes</span><br />id, class, title, style, dir, lang, xml:lang, tabindex, accesskey<br /><br />For a full description, go to Standard Attributes.<br /><br /><span style="font-weight:bold;">Event Attributes</span><br />onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur<br /><br />For a full description, go to Event Attributes. <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> Posted by <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/05809430139875726857' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/05809430139875726857' rel='author' title='author profile'> <span itemprop='name'>html and php</span> </a> </span> </span> <span class='post-timestamp'> at <meta content='http://htmlandphp.blogspot.com/2009/02/map-tag.html' itemprop='url'/> <a class='timestamp-link' href='http://htmlandphp.blogspot.com/2009/02/map-tag.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-02-28T20:58:00-08:00'>8:58 PM</abbr></a> </span> <span class='post-comment-link'> <a class='comment-link' href='http://htmlandphp.blogspot.com/2009/02/map-tag.html#comment-form' onclick=''> No comments: </a> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1323227177'> <a href='https://www.blogger.com/post-edit.g?blogID=6830606489310006988&postID=2715070469240281219&from=pencil' title='Edit Post'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> Labels: <a href='http://htmlandphp.blogspot.com/search/label/MAP%20tag' rel='tag'>MAP tag</a> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='6830606489310006988' itemprop='blogId'/> <meta content='6996282002692206499' itemprop='postId'/> <a name='6996282002692206499'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='http://htmlandphp.blogspot.com/2009/02/area-tag.html'>AREA TAG</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-6996282002692206499' itemprop='description articleBody'> Das <area>-Tag wird zusammen mit dem map-Tag benutzt, um eine clientseitige Image Map zu erzeugen, die in verschiedene maus-sensitive Bereiche (auch »Hot Spots« genannt) unterteilt ist. Wenn die Maus einen Bereich der Map anklickt, kann ein Attribut im <area>-Tag direkt eine Aktion einleiten – z.B. kann in jedem Bereich ein Link durch ein href-Attribut erzeugt werden. Da der Bereich maus-sensitiv ist, kann auch das Hovern mit der Maus als Ereignis erkannt werden.<br /><br />Das <area>-Tag muss im MAP-Element enthalten sein. Das IMG-Element kann vor oder nach dem map-Tag, in dem die <area>-Tags enthalten sind, stehen.<br /><br />Für das <area>-Tag können keine CSS-Eigenschaften notiert werden – AREA-Elemente sind nur maus-sensitive Bereiche, aber bilden keine Blöcke im Dokument.<br /><br />Attribute für area<br /><br />accesskey<br /> bestimmt eine Taste auf der Tastatur, die beim Drücken zusammen mit der Alt-, Strg- oder Befehlstaste einen Link aktiviert. <br />alt<br /> verknüpft einen Text mit einem individuellen Bereich der Map. Wenn die Maus über den Bereich fährt, stellt ein kleines Fenster diesen Text dar. <br />coords<br /> legt die (x,y)-Koordinaten für jede Form in der Image Map fest. Die Koordinaten sind der x- und y-Abstand von der oberen linken Ecke (0,0) zum Bild. Die Anzahl der Koordinaten hängt von der Form ab, die im shape-Attribut definiert wird.<br /> rect: top left bottom right<br /> circle: center radius, wobei center als x,y-Paar angegeben wird<br /> poly: Ecken des Polygons. <br />href<br /> URL-Adresse eines Links. Jedes <area>-Tag im Bild kann einen Link enthalten. <br />nohref<br /> gibt an, dass der im <area>-Tag definierte Bereich kein Link ist. Dann zeigen die Browser den Hot Spot der Image Map beim Hovern mit der Maus auch nicht mit einem entsprechenden Cursor und der Cursor kann auch nicht durch ein Stylesheet geändert werden. <br />shape<br /> definiert die geometrische From der Image Map. Das kann entweder ein Kreis (circle oder circ), ein Polygon (polygon oder poly) oder ein Viereck (rectangle oder rect) sein. <br />tabindex<br /> ganze Zahl, die den Rang innerhalb der Tabulatoraufrufe bei der Navigation mit der Tastatur festlegt. <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> Posted by <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/05809430139875726857' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/05809430139875726857' rel='author' title='author profile'> <span itemprop='name'>html and php</span> </a> </span> </span> <span class='post-timestamp'> at <meta content='http://htmlandphp.blogspot.com/2009/02/area-tag.html' itemprop='url'/> <a class='timestamp-link' href='http://htmlandphp.blogspot.com/2009/02/area-tag.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-02-28T20:51:00-08:00'>8:51 PM</abbr></a> </span> <span class='post-comment-link'> <a class='comment-link' href='http://htmlandphp.blogspot.com/2009/02/area-tag.html#comment-form' onclick=''> No comments: </a> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1323227177'> <a href='https://www.blogger.com/post-edit.g?blogID=6830606489310006988&postID=6996282002692206499&from=pencil' title='Edit Post'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> Labels: <a href='http://htmlandphp.blogspot.com/search/label/AREA%20TAG' rel='tag'>AREA TAG</a> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='6830606489310006988' itemprop='blogId'/> <meta content='7705800602674604487' itemprop='postId'/> <a name='7705800602674604487'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='http://htmlandphp.blogspot.com/2009/02/table-tag.html'>TABLE TAG</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-7705800602674604487' itemprop='description articleBody'> Tables are defined with the table tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.<br /><br /><table border="1"><br /><tr><br /><td>row 1, cell 1</td><br /><td>row 1, cell 2</td><br /></tr><br /><tr><br /><td>row 2, cell 1</td><br /><td>row 2, cell 2</td><br /></tr><br /></table><br /><br />How it looks in a browser:<br />row 1, cell 1 row 1, cell 2<br />row 2, cell 1 row 2, cell 2<br /><br />Tables and the Border Attribute<br /><br />If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.<br /><br />To display a table with borders, you will have to use the border attribute:<br /><br /><table border="1"><br /><tr><br /><td>Row 1, cell 1</td><br /><td>Row 1, cell 2</td><br /></tr><br /></table><br /><br /><br />Headings in a Table<br /><br />Headings in a table are defined with the <th> tag.<br /><br /><table border="1"><br /><tr><br /><th>Heading</th><br /><th>Another Heading</th><br /></tr><br /><tr><br /><td>row 1, cell 1</td><br /><td>row 1, cell 2</td><br /></tr><br /><tr><br /><td>row 2, cell 1</td><br /><td>row 2, cell 2</td><br /></tr><br /></table><br /><br />How it looks in a browser:<br />Heading Another Heading<br />row 1, cell 1 row 1, cell 2<br />row 2, cell 1 row 2, cell 2<br /><br />Empty Cells in a Table<br /><br />Table cells with no content are not displayed very well in most browsers.<br /><br /><table border="1"><br /><tr><br /><td>row 1, cell 1</td><br /><td>row 1, cell 2</td><br /></tr><br /><tr><br /><td>row 2, cell 1</td><br /><td></td><br /></tr><br /></table><br /><br />How it looks in a browser:<br />row 1, cell 1 row 1, cell 2<br />row 2, cell 1 <br /><br />Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).<br /><br />To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders visible: <br /><br /><table border="1"><br /><tr><br /><td>row 1, cell 1</td><br /><td>row 1, cell 2</td><br /></tr><br /><tr><br /><td>row 2, cell 1</td><br /><td> </td><br /></tr><br /></table><br /><br />How it looks in a browser:<br />row 1, cell 1 row 1, cell 2<br />row 2, cell 1 <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> Posted by <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/05809430139875726857' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/05809430139875726857' rel='author' title='author profile'> <span itemprop='name'>html and php</span> </a> </span> </span> <span class='post-timestamp'> at <meta content='http://htmlandphp.blogspot.com/2009/02/table-tag.html' itemprop='url'/> <a class='timestamp-link' href='http://htmlandphp.blogspot.com/2009/02/table-tag.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-02-28T20:41:00-08:00'>8:41 PM</abbr></a> </span> <span class='post-comment-link'> <a class='comment-link' href='http://htmlandphp.blogspot.com/2009/02/table-tag.html#comment-form' onclick=''> No comments: </a> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1323227177'> <a href='https://www.blogger.com/post-edit.g?blogID=6830606489310006988&postID=7705800602674604487&from=pencil' title='Edit Post'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> Labels: <a href='http://htmlandphp.blogspot.com/search/label/TABLE%20TAG' rel='tag'>TABLE TAG</a> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> </div></div> <div class="date-outer"> <h2 class='date-header'><span>Thursday, February 19, 2009</span></h2> <div class="date-posts"> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='6830606489310006988' itemprop='blogId'/> <meta content='3569386140669624813' itemprop='postId'/> <a name='3569386140669624813'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='http://htmlandphp.blogspot.com/2009/02/tr-tag.html'>TR tag</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-3569386140669624813' itemprop='description articleBody'> <span style="font-weight:bold;">Description</span><br /><br />Defines a row in a table. It is used within the TABLE tag. The TD tag is used within it to define a cell.<br />Attributes<br /><span style="font-weight:bold;">ALIGN</span><br /><br />Aligns the text for the cells in the row - set to either 'left', 'center', 'justify' or 'right'.<br /><span style="font-weight:bold;">BACKGROUND</span><br /><br />Sets the background picture for the cells in the row. To show to an image on the same site use the local path e.g. src="button.gif" or src="folder/photo1.jpg". You can also use dots to link to an image in the parent folder e.g. src="..\diagram.png". <br /><span style="font-weight:bold;">BGCOLOR</span><br /><br />Specifies the background colour of the cells in the row. If the BACKGROUND attribute is also used, the image will cover the background colour unless the background image contains transparent areas.<br /><br />Colours can be defined in this format: #RRGGBB where the values are in hexadecimal format. E.g. #FF0000 is red. Colours can also be defined with words e.g. red.<br /><span style="font-weight:bold;">VALIGN</span><br /><br />Vertically aligns the text for the cells in the row - set to either 'baseline', 'bottom', 'middle' or 'top'. <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> Posted by <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/05809430139875726857' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/05809430139875726857' rel='author' title='author profile'> <span itemprop='name'>html and php</span> </a> </span> </span> <span class='post-timestamp'> at <meta content='http://htmlandphp.blogspot.com/2009/02/tr-tag.html' itemprop='url'/> <a class='timestamp-link' href='http://htmlandphp.blogspot.com/2009/02/tr-tag.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-02-19T21:07:00-08:00'>9:07 PM</abbr></a> </span> <span class='post-comment-link'> <a class='comment-link' href='http://htmlandphp.blogspot.com/2009/02/tr-tag.html#comment-form' onclick=''> No comments: </a> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1323227177'> <a href='https://www.blogger.com/post-edit.g?blogID=6830606489310006988&postID=3569386140669624813&from=pencil' title='Edit Post'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> Labels: <a href='http://htmlandphp.blogspot.com/search/label/TR%20tag' rel='tag'>TR tag</a> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='6830606489310006988' itemprop='blogId'/> <meta content='6117923316830863545' itemprop='postId'/> <a name='6117923316830863545'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='http://htmlandphp.blogspot.com/2009/02/th-tag.html'>TH tag</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-6117923316830863545' itemprop='description articleBody'> The <th> tag is used to create a header cell for the cells in a row in a table element. The purpose of the header is to provide a caption, name, or information about the column of cells. The header text will be displayed in a bold font style.<br /> <br />The td tag is used to create cells that contain the data, information, or text that you wish to display in the table.<br /> <br />The closing tag is optional. However, it is recommended that it always be included.<br /> <br />The coding sequence is:<br /><tr><th> place header here </th></tr><br /> <br /><span style="font-weight:bold;">Core attributes:</span><br /> <br />class dir id lang onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup style title<br /> <span style="font-weight:bold;"><br />Attributes</span><br /> <br /><span style="font-weight:bold;">abbr</span><br />The abbr attribute is not recognized by most browsers. You use it to provide an abbreviated summary of the header text.<br /> <br /><span style="font-weight:bold;">align</span><br />The align attribute is used to set the horizontal alignment of the cell contents. The possible values are center, char, justify, left, and right.<br /> <br /><span style="font-weight:bold;">axis</span><br />The axis attribute is not recognized by most browsers. This attribute is used to create a list of category names which form the basis of a query. This query is executed against the cells that form the table.<br /> <br /><span style="font-weight:bold;">bgcolor</span><br />The bgcolor attribute is deprecated effective with version 4.0. You are now to use style sheets. This attribute is used to set the background color for the cell. It can be either a named color (such as red) or a six character hexadecimal RGB color code (such as #e26fa9). This value overrides any color value that was set in the table or tr tags.<br /> <br /><span style="font-weight:bold;">char</span><br />The char attribute permits you to select a character that will be used to align the contents of the cell. This was designed to allow the decimal points in a column of numbers to be in vertical alignment. The default value is country dependent. In the U.S., it is the first occurrence of a period or a decimal point.<br /> <br /><span style="font-weight:bold;">charoff</span><br />The charoff attribute is an integer used to specify if the value designated in the char attribute is to be the first, second, or whatever occurrence.<br /> <br /><span style="font-weight:bold;">colspan</span><br />The colspan attribute allows a header to span horizontally two or more columns (cells). This may be combined with the rowspan attribute to form data cells that encompass several rows and columns.<br /> <br /><span style="font-weight:bold;">headers</span><br />The headers attribute is not recognized by most browsers. The value of this attribute is a list of cell header names. The names are the values of the cells' id attributes. This attribute is used with speech capable browsers.<br /> <br /><span style="font-weight:bold;">height</span><br />The height attribute is deprecated effective with version 4.0. You are now to use style sheets. You use this attribute to set a minimum height for the cell. This value is an integer number of pixels. However, you may exceed this minimum height to accommodate the cell contents. The tallest cell in the row determines the actual maximum height which will be adopted by all of the cells in that row.<br /> <br /><span style="font-weight:bold;">nowrap</span><br />The nowrap attribute is deprecated effective with version 4.0. You are now to use style sheets. You use this attribute to stop word wrapping and display the cell contents in one continuous line. However, you can insert br and p tags to create line and paragraph breaks.<br /> <br /><span style="font-weight:bold;">rowspan</span><br />The rowspan attribute allows a cell to extend down two or more rows. This may be combined with the colspan attribute to form data cells that encompass several rows and columns.<br /> <br /><span style="font-weight:bold;">scope</span><br />The scope attribute is not recognized by most browsers. It is used to assign a set of data cells to one header cell. The four possible values are col, colgroup, row, and rowgroup.<br /> <br /><span style="font-weight:bold;">valign</span><br />The valign attribute is used to set the vertical alignment of the cell contents. The possible values are baseline, bottom, middle, and top.<br /> <br /><span style="font-weight:bold;">width</span><br />The width attribute is deprecated effective with version 4.0. You are now to use style sheets. It is used to set the horizontal width of the cell. This value is an integer number of pixels. The widest cell sets the width for the entire column. <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> Posted by <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/05809430139875726857' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/05809430139875726857' rel='author' title='author profile'> <span itemprop='name'>html and php</span> </a> </span> </span> <span class='post-timestamp'> at <meta content='http://htmlandphp.blogspot.com/2009/02/th-tag.html' itemprop='url'/> <a class='timestamp-link' href='http://htmlandphp.blogspot.com/2009/02/th-tag.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-02-19T21:03:00-08:00'>9:03 PM</abbr></a> </span> <span class='post-comment-link'> <a class='comment-link' href='http://htmlandphp.blogspot.com/2009/02/th-tag.html#comment-form' onclick=''> No comments: </a> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1323227177'> <a href='https://www.blogger.com/post-edit.g?blogID=6830606489310006988&postID=6117923316830863545&from=pencil' title='Edit Post'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> Labels: <a href='http://htmlandphp.blogspot.com/search/label/TH%20tag' rel='tag'>TH tag</a> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='6830606489310006988' itemprop='blogId'/> <meta content='497387954939838603' itemprop='postId'/> <a name='497387954939838603'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='http://htmlandphp.blogspot.com/2009/02/td-tag.html'>TD tag</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-497387954939838603' itemprop='description articleBody'> The <td> tag is used to create cells that contain the data, information, or text that you wish to display in the table. You may place as many data cells in a row as you desire.<br /> <br />The th tag is used to create a header cell for the cells in a row in a table element.<br /> <br />The ending tag is optional. However, it is recommended that it be included.<br /> <br />The coding sequence is:<br /><tr><td> place data here </td></tr><br /> <br /><span style="font-weight:bold;">Core Attributes</span><br /> <br />class dir id lang onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup style title<br /> <span style="font-weight:bold;"><br />Attributes</span><br /> <br /><span style="font-weight:bold;">abbr</span><br />The abbr attribute is not recognized by most browsers. You use it to provide an abbreviated summary of the data cell text.<br /> <br /><span style="font-weight:bold;">align</span><br />The align attribute is used to set the horizontal alignment of the cell contents. The possible values are center, char, justify, left, and right.<br /> <br /><span style="font-weight:bold;">axis</span><br />The axis attribute is not recognized by most browsers. This attribute is used to create a list of category names which form the basis of a query. This query is executed against the cells that form the table.<br /> <br /><span style="font-weight:bold;">bgcolor</span><br />The bgcolor attribute is deprecated effective with version 4.0. You are now to use style sheets. This attribute is used to set the background color for the cell. It can be either a named color (such as red) or a six character hexadecimal RGB color code (such as #e26fa9). This value overrides any color value that was set in the table or tr tags.<br /> <br /><span style="font-weight:bold;">char</span><br />The char attribute permits you to select a character that will be used to align the contents of the cell. This was designed to allow the decimal points in a column of numbers to be in vertical alignment. The default value is country dependent. In the U.S., it is the first occurrence of a period or a decimal point.<br /> <br /><span style="font-weight:bold;">charoff</span><br />The charoff attribute is an integer used to specify if the value designated in the char attribute is to be the first, second, or whatever occurrence.<br /> <br /><span style="font-weight:bold;">colspan</span><br />The colspan attribute allows a header to span horizontally two or more columns (cells). This may be combined with the rowspan attribute to form data cells that encompass several rows and columns.<br /> <br /><span style="font-weight:bold;">headers</span><br />The headers attribute is not recognized by most browsers. The value of this attribute is a list of cell names. The names are the values of the cells' id attributes. This attribute is used with speech capable browsers.<br /> <br /><span style="font-weight:bold;">height</span><br />The height attribute is deprecated effective with version 4.0. You are now to use style sheets. You use this attribute to set a minimum height for the cell. This value is an integer number of pixels. However, you may exceed this minimum height to accommodate the cell contents. The tallest cell in the row determines the actual maximum height which will be adopted by all of the cells in that row.<br /> <br /><span style="font-weight:bold;">nowrap</span><br />The nowrap attribute is deprecated effective with version 4.0. You are now to use style sheets. You use this attribute to stop word wrapping and display the cell contents in one continuous line. However, you can insert br and p tags to create line and paragraph breaks.<br /> <br /><span style="font-weight:bold;">rowspan</span><br />The rowspan attribute allows a cell to extend down two or more rows. This may be combined with the colspan attribute to form data cells that encompass several rows and columns.<br /> <br /><span style="font-weight:bold;">scope</span><br />The scope attribute is not recognized by most browsers. It is used to assign a set of data cells to one header cell. The four possible values are col, colgroup, row, and rowgroup.<br /> <br /><span style="font-weight:bold;">valign</span><br />The valign attribute is used to set the vertical alignment of the cell contents. The possible values are baseline, bottom, middle, and top.<br /> <br /><span style="font-weight:bold;">width</span><br />The width attribute is deprecated effective with version 4.0. You are now to use style sheets. It is used to set the horizontal width of the cell. This value is an integer number of pixels. The widest cell sets the width for the entire column. <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> Posted by <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/05809430139875726857' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/05809430139875726857' rel='author' title='author profile'> <span itemprop='name'>html and php</span> </a> </span> </span> <span class='post-timestamp'> at <meta content='http://htmlandphp.blogspot.com/2009/02/td-tag.html' itemprop='url'/> <a class='timestamp-link' href='http://htmlandphp.blogspot.com/2009/02/td-tag.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-02-19T20:59:00-08:00'>8:59 PM</abbr></a> </span> <span class='post-comment-link'> <a class='comment-link' href='http://htmlandphp.blogspot.com/2009/02/td-tag.html#comment-form' onclick=''> No comments: </a> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1323227177'> <a href='https://www.blogger.com/post-edit.g?blogID=6830606489310006988&postID=497387954939838603&from=pencil' title='Edit Post'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> Labels: <a href='http://htmlandphp.blogspot.com/search/label/TD%20tag' rel='tag'>TD tag</a> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='6830606489310006988' itemprop='blogId'/> <meta content='957976659243726941' itemprop='postId'/> <a name='957976659243726941'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='http://htmlandphp.blogspot.com/2009/02/forms.html'>Forms</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-957976659243726941' itemprop='description articleBody'> Forms are the most popular way to make web pages interactive. Like forms on paper, a form on a web page allows the user to enter requested information and submit it for processing. (Fortunately, forms on a web page are processed much faster.)<br /><br />The following pages provide a beginning tutorial in how to put forms on your web page, how to include scripts, and some other common forms concepts. <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> Posted by <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/05809430139875726857' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/05809430139875726857' rel='author' title='author profile'> <span itemprop='name'>html and php</span> </a> </span> </span> <span class='post-timestamp'> at <meta content='http://htmlandphp.blogspot.com/2009/02/forms.html' itemprop='url'/> <a class='timestamp-link' href='http://htmlandphp.blogspot.com/2009/02/forms.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-02-19T20:58:00-08:00'>8:58 PM</abbr></a> </span> <span class='post-comment-link'> <a class='comment-link' href='http://htmlandphp.blogspot.com/2009/02/forms.html#comment-form' onclick=''> No comments: </a> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1323227177'> <a href='https://www.blogger.com/post-edit.g?blogID=6830606489310006988&postID=957976659243726941&from=pencil' title='Edit Post'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> Labels: <a href='http://htmlandphp.blogspot.com/search/label/Forms' rel='tag'>Forms</a> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='6830606489310006988' itemprop='blogId'/> <meta content='7939912188196948671' itemprop='postId'/> <a name='7939912188196948671'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='http://htmlandphp.blogspot.com/2009/02/form-tag.html'>FORM tag</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-7939912188196948671' itemprop='description articleBody'> Available in versions: 2.0, 3.2, 4.0<br />Browser compatibility: Explorer 4, 5 Netscape 4, 6<br /> <br />The form tag is used to delimit the start and stop of a form element and serves as a container for form controls (fields). Control is a technical term which refers to the various elements that can be used inside a form to gather information. The information gathered is referred to as the contents or parameters of the form and is a collection of name/value pairs.<br /> <br />The four tags that can be used to build a form are:<br /> <br /><span style="font-weight:bold;">button, input, select, textarea,</span><br /> <br />The general concept is that the user fills out the appropriate sections of the form as a response to a request for information (such as a shipping address). The user then clicks the submit button. The contents of the form are then submitted for processing, usually to another page on the web site. However, you can also submit to the same page, or to a window or frame.<br /> <br />This ability to use a web site to display products and information, to gather a response via a form from a user, to store and manipulate the gathered information, and then to have the web site respond dynamically to the user input, is the heart of the e-commerce/e-business industry.<br /> <br />There are two required attributes for the form tag. The action attribute dictates where the form contents will be submitted. The method attribute specifies how to send the submission.<br /> <br />It is recommended that you should only place one form per page. It may prove best to divide a long form between two or more pages.<br /> <br />A form element should not contain other form tags. The closing tag is mandatory.<br /> <br /><span style="font-weight:bold;">Core Attributes</span><br /> <br />class dir id lang onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup style title<br /> <br /><span style="font-weight:bold;">Attributes</span><br /> <br /><span style="font-weight:bold;">accept</span><br />The accept attribute is a comma-separated list of file types that can be accepted by the server when using the type="file" content.<br /> <br /><span style="font-weight:bold;">accept-charset</span><br />The accept-charset attribute is a comma-separated or space-separated list of the character types that the server must be able to support (process) when the contents of a form are submitted.<br /> <br /><span style="font-weight:bold;">action</span><br />The action attribute sets the URL of the page that the contents (name/value pairs) of the form will be submitted to for processing.<br /> <br /><span style="font-weight:bold;">enctype</span><br />The enctype attribute specifies the MIME type used to encode the contents of a form. The default is application/x-www-form-urlencoded. When using type="file" content, this attribute must be set to multipart/form-data.<br /><span style="font-weight:bold;"> <br />method</span><br />The method attribute specifies which of two permitted HTTP methods will be used to pass the contents of a form. The more commonly used post method submits the contents of the form in a two step procedure. First the URL specified by the action attribute is contacted. Second, if the contact is successful, the contents are transmitted to the URL. The get method appends the contents to the end of the URL specified by the action attribute. (A question mark is used to delimit the end of the URL and the start of the contents.)<br /> <br /><span style="font-weight:bold;">name</span><br />The name attribute is a string of characters that is used to label a form control (field) with a name. The name must be unique to that document and cannot be reused.<br /> <br /><span style="font-weight:bold;">onreset</span><br />The onreset attribute is an event that allows the execution of JavaScript code when the user resets (clears) the form.<br /> <br /><span style="font-weight:bold;">onsubmit</span><br />The onsubmit attribute is an event that allows the execution of JavaScript code when the user submits the form. For example, you could call a JavaScript function that performs client-side form verification to ensure that the form is filled out correctly (see code example).<br /> <br /><span style="font-weight:bold;">target</span><br />The target attribute is used to submit the contents of the form to a specified window or frame.<br /> <br />Here is a sample form that includes client-side verification of fields. <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> Posted by <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/05809430139875726857' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/05809430139875726857' rel='author' title='author profile'> <span itemprop='name'>html and php</span> </a> </span> </span> <span class='post-timestamp'> at <meta content='http://htmlandphp.blogspot.com/2009/02/form-tag.html' itemprop='url'/> <a class='timestamp-link' href='http://htmlandphp.blogspot.com/2009/02/form-tag.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-02-19T20:55:00-08:00'>8:55 PM</abbr></a> </span> <span class='post-comment-link'> <a class='comment-link' href='http://htmlandphp.blogspot.com/2009/02/form-tag.html#comment-form' onclick=''> No comments: </a> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1323227177'> <a href='https://www.blogger.com/post-edit.g?blogID=6830606489310006988&postID=7939912188196948671&from=pencil' title='Edit Post'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> Labels: <a href='http://htmlandphp.blogspot.com/search/label/FORM%20tag' rel='tag'>FORM tag</a> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> </div></div> </div> <div class='blog-pager' id='blog-pager'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' href='http://htmlandphp.blogspot.com/' id='Blog1_blog-pager-newer-link' title='Newer Posts'>Newer Posts</a> </span> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' href='http://htmlandphp.blogspot.com/search?updated-max=2009-02-19T20:55:00-08:00&max-results=7' id='Blog1_blog-pager-older-link' title='Older Posts'>Older Posts</a> </span> <a class='home-link' href='http://htmlandphp.blogspot.com/'>Home</a> </div> <div class='clear'></div> <div class='blog-feeds'> <div class='feed-links'> Subscribe to: <a class='feed-link' href='http://htmlandphp.blogspot.com/feeds/posts/default' target='_blank' type='application/atom+xml'>Posts (Atom)</a> </div> </div> </div><div class='widget HTML' data-version='1' id='HTML6'> <div class='widget-content'> <script type="text/javascript"> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script> </div> <div class='clear'></div> </div><div class='widget HTML' data-version='1' id='HTML7'> <div class='widget-content'> <script type="text/javascript"> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script> </div> <div class='clear'></div> </div><div class='widget HTML' data-version='1' id='HTML8'> <div class='widget-content'> <script type="text/javascript"> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script> </div> <div class='clear'></div> </div><div class='widget HTML' data-version='1' id='HTML4'> <div class='widget-content'> <script type="text/javascript"> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script> </div> <div class='clear'></div> </div></div> </div> <div id='sidebar-wrapper'> <div class='sidebar section' id='sidebar'><div class='widget HTML' data-version='1' id='HTML9'> <div class='widget-content'> <script type="text/javascript"> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script> </div> <div class='clear'></div> </div><div class='widget HTML' data-version='1' id='HTML5'> <div class='widget-content'> <script type="text/javascript"> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script> </div> <div class='clear'></div> </div><div class='widget HTML' data-version='1' id='HTML2'> <h2 class='title'>search results</h2> <div class='widget-content'> <div id="cse-search-results"></div> <script type="text/javascript"> var googleSearchIframeName = "cse-search-results"; var googleSearchFormName = "cse-search-box"; var googleSearchFrameWidth = 800; var googleSearchDomain = "www.google.com"; var googleSearchPath = "/cse"; </script> <script src="http://www.google.com/afsonline/show_afs_search.js" type="text/javascript"></script> </div> <div class='clear'></div> </div><div class='widget Followers' data-version='1' id='Followers2'> <h2 class='title'>Followers</h2> <div class='widget-content'> <div id='Followers2-wrapper'> <div style='margin-right:2px;'> <div><script type="text/javascript" src="https://apis.google.com/js/platform.js"></script> <div id="followers-iframe-container"></div> <script type="text/javascript"> window.followersIframe = null; function followersIframeOpen(url) { gapi.load("gapi.iframes", function() { if (gapi.iframes && gapi.iframes.getContext) { window.followersIframe = gapi.iframes.getContext().openChild({ url: url, where: document.getElementById("followers-iframe-container"), messageHandlersFilter: gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER, messageHandlers: { '_ready': function(obj) { window.followersIframe.getIframeEl().height = obj.height; }, 'reset': function() { window.followersIframe.close(); followersIframeOpen("https://www.blogger.com/followers.g?blogID\x3d6830606489310006988\x26colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByMwMDAwMDAiByM5OTk5OTkqByNmNmY2ZjYyByM5RTUyMDU6ByMwMDAwMDBCByM5OTk5OTlKByMwMDAwMDBSByM5OTk5OTlaC3RyYW5zcGFyZW50\x26pageSize\x3d21\x26origin\x3dhttp://htmlandphp.blogspot.com/"); }, 'open': function(url) { window.followersIframe.close(); followersIframeOpen(url); }, 'blogger-ping': function() { } } }); } }); } followersIframeOpen("https://www.blogger.com/followers.g?blogID\x3d6830606489310006988\x26colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByMwMDAwMDAiByM5OTk5OTkqByNmNmY2ZjYyByM5RTUyMDU6ByMwMDAwMDBCByM5OTk5OTlKByMwMDAwMDBSByM5OTk5OTlaC3RyYW5zcGFyZW50\x26pageSize\x3d21\x26origin\x3dhttp://htmlandphp.blogspot.com/"); </script></div> </div> </div> <div class='clear'></div> </div> </div><div class='widget BlogArchive' data-version='1' id='BlogArchive2'> <h2>Blog Archive</h2> <div class='widget-content'> <div id='ArchiveList'> <div id='BlogArchive2_ArchiveList'> <ul class='hierarchy'> <li class='archivedate expanded'> <a class='toggle' href='javascript:void(0)'> <span class='zippy toggle-open'> ▼  </span> </a> <a class='post-count-link' href='http://htmlandphp.blogspot.com/2009/'> 2009 </a> <span class='post-count' dir='ltr'>(51)</span> <ul class='hierarchy'> <li class='archivedate expanded'> <a class='toggle' href='javascript:void(0)'> <span class='zippy toggle-open'> ▼  </span> </a> <a class='post-count-link' href='http://htmlandphp.blogspot.com/2009/03/'> March </a> <span class='post-count' dir='ltr'>(15)</span> <ul class='posts'> <li><a href='http://htmlandphp.blogspot.com/2009/03/introduction-to-html.html'>introduction to HTML</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/03/what-is-html.html'>What is HTML</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/03/basic-html-tags.html'>Basic HTML Tags</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/03/text-formating-tags.html'>Text Formating tags</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/03/pre-tag.html'>PRE tag</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/03/code-tag.html'>CODE tag</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/03/kbd-tag.html'>KBD tag</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/03/samp-tag.html'>SAMP tag</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/03/tt-tag.html'>TT tag</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/03/plaintext-tag.html'>PLAINTEXT tag</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/03/xmp-tag.html'>XMP tag</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/03/address-tag.html'>ADDRESS tag</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/03/blockquote-tag.html'>BLOCKQUOTE tag</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/03/cite-tag.html'>CITE tag</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/03/dfn-tag.html'>DFN tag</a></li> </ul> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <a class='toggle' href='javascript:void(0)'> <span class='zippy'> ►  </span> </a> <a class='post-count-link' href='http://htmlandphp.blogspot.com/2009/02/'> February </a> <span class='post-count' dir='ltr'>(23)</span> <ul class='posts'> <li><a href='http://htmlandphp.blogspot.com/2009/02/image-tag.html'>IMAGE tag</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/02/anchor-tag.html'>ANCHOR tag</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/02/map-tag.html'>MAP tag</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/02/area-tag.html'>AREA TAG</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/02/table-tag.html'>TABLE TAG</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/02/tr-tag.html'>TR tag</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/02/th-tag.html'>TH tag</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/02/td-tag.html'>TD tag</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/02/forms.html'>Forms</a></li> <li><a href='http://htmlandphp.blogspot.com/2009/02/form-tag.html'>FORM tag</a></li> </ul> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <a class='toggle' href='javascript:void(0)'> <span class='zippy'> ►  </span> </a> <a class='post-count-link' href='http://htmlandphp.blogspot.com/2009/01/'> January </a> <span class='post-count' dir='ltr'>(13)</span> </li> </ul> </li> </ul> </div> </div> <div class='clear'></div> </div> </div><div class='widget Profile' data-version='1' id='Profile2'> <h2>About Me</h2> <div class='widget-content'> <dl class='profile-datablock'> <dt class='profile-data'> <a class='profile-name-link g-profile' href='https://www.blogger.com/profile/05809430139875726857' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);'> html and php </a> </dt> </dl> <a class='profile-link' href='https://www.blogger.com/profile/05809430139875726857' rel='author'>View my complete profile</a> <div class='clear'></div> </div> </div><div class='widget HTML' data-version='1' id='HTML1'> <div class='widget-content'> <style type="text/css"> @import url(http://www.google.com/cse/api/branding.css); </style> <div style="background-color:#999999;color:#000000" class="cse-branding-bottom"> <div class="cse-branding-form"> <form id="cse-search-box" action="http://htmlandphp.blogspot.com/"> <div> <input value="partner-pub-1256546257762480:av7223ypi6y" name="cx" type="hidden"/> <input value="FORID:11" name="cof" type="hidden"/> <input value="ISO-8859-1" name="ie" type="hidden"/> <input name="q" size="31" type="text"/> <input value="Search" name="sa" type="submit"/> </div> </form> </div> <div class="cse-branding-logo"> <img alt="Google" src="http://www.google.com/images/poweredby_transparent/poweredby_999999.gif"/> </div> <div class="cse-branding-text"> Custom Search </div> </div> </div> <div class='clear'></div> </div></div> </div>  <div class='clear'> </div> </div>  </div></div>  <script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/1807328581-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AOuZoY4ioijMj8hQEuSa_y6bojTn54_ofQ:1714334990056';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6830606489310006988','//htmlandphp.blogspot.com/2009/','6830606489310006988'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '6830606489310006988', 'title': 'htmlandphp', 'url': 'http://htmlandphp.blogspot.com/2009/', 'canonicalUrl': 'http://htmlandphp.blogspot.com/2009/', 'homepageUrl': 'http://htmlandphp.blogspot.com/', 'searchUrl': 'http://htmlandphp.blogspot.com/search', 'canonicalHomepageUrl': 'http://htmlandphp.blogspot.com/', 'blogspotFaviconUrl': 'http://htmlandphp.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22htmlandphp - Atom\x22 href\x3d\x22http://htmlandphp.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22htmlandphp - RSS\x22 href\x3d\x22http://htmlandphp.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22htmlandphp - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/6830606489310006988/posts/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-1256546257762480', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/16e657cb9c57b8a2', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Share to Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'archive', 'pageName': '2009', 'pageTitle': 'htmlandphp: 2009'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'isResponsive': false, 'isAlternateRendering': false, 'isCustom': false}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'htmlandphp', 'description': '', 'url': 'http://htmlandphp.blogspot.com/2009/', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': false, 'isArchive': true, 'isLabelSearch': false, 'archive': {'year': 2009, 'rangeMessage': 'Showing posts from 2009'}}}]); _WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'crosscol', document.getElementById('HTML3'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML10', 'main', document.getElementById('HTML10'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML14', 'main', document.getElementById('HTML14'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML15', 'main', document.getElementById('HTML15'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/1666805145-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/13464135-lightbox_bundle.css'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML6', 'main', document.getElementById('HTML6'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML7', 'main', document.getElementById('HTML7'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML8', 'main', document.getElementById('HTML8'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'main', document.getElementById('HTML4'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML9', 'sidebar', document.getElementById('HTML9'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML5', 'sidebar', document.getElementById('HTML5'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'sidebar', document.getElementById('HTML2'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_FollowersView', new _WidgetInfo('Followers2', 'sidebar', document.getElementById('Followers2'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive2', 'sidebar', document.getElementById('BlogArchive2'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile2', 'sidebar', document.getElementById('Profile2'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'sidebar', document.getElementById('HTML1'), {}, 'displayModeFull')); </script> </body> </html>