Core Attributes: A Number of Attributes in HTML 4 Are Common To Most Elements

A number of attributes in HTML 4 are common to most elements.
Core Attributes
ID
The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). The value is case-sensitive. The following example uses the ID attribute to identify each of the first two paragraphs of a document:
<P ID=firstp>My first paragraph.</P> <P ID=secondp>My second paragaph.</P>
The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:
P#firstp { color: navy; background: none } P#secondp { color: black; background: none }
CLASS
The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code. Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names. The value is case-sensitive. The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:
<DIV CLASS=navbar> <P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P> </DIV>
This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:
.navbar { margin-top: 2em; padding-top: 1em; border-top: solid thin navy } .navbar IMG { float: right } @media print { .navbar { display: none } }
STYLE The style attribute specifies an inline style for an element.
Example
Use of the style attribute in an HTML document: <h1 style="color:blue;text-align:center">This is a header</h1> <p style="color:green">This is a paragraph.</p>
TITLE
The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers. The attribute is most useful with A, AREA, LINK, and IMG elements, where it provides a title for the linked or embedded resource. Some examples follow:
<A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4 Reference">liam@htmlhelp.com</A> <A HREF="http://stein.cshl.org/WWW/CGI/" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A> <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version franaise"> <IMG SRC="wedding.jpg" ALT="[Photo of the bride and groom]" TITLE="The happy couple">
Language Attributes
Attribute dir lang xml:lang
Value ltr rtl language_code language_code
Description Specifies the text direction for the content in an element Specifies a language code for the content in an element. Language code reference Specifies a language code for the content in an element, in XHTML documents. Language code reference
DIR
The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or rightto-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-toleft, to allow the text to be rendered properly.
Lang
The HTML lang attribute can be used to declare the language of a Web page or a portion of a Web page. Declare the primary language for each Web page with the lang attribute inside the <html> tag, like this: <html lang="en"> ... </html>
Xml:lang
In XHTML, the language is declared inside the <html> tag as follows: <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> ... </html>
ISO Language Codes

Language
Arabic
ISO codes
ar
English Hindi Japanese Punjabi
en hi ja pa
Core Events
The last major aspect of modern markup initially introduced by HTML 4 was the increased possibility of adding scripting to HTML documents. In preparation for a more dynamic Web, a set of core events has been associated with nearly every HTML element. Most of these events are associated with a user doing something. For example, the user clicking an object is associated with an onclick event attribute. So, <p onclick="alert('Ouch!');"> Press this paragraph </p> would associate a small bit of scripting code with the paragraph event, which would be triggered when the user clicks the paragraph. In reality, the event model is not fully supported by all browsers for all tags, so the previous example might not do much of anything. Remember that any tag can have a multitude of events associated with it, paving the way for a much more dynamic Web experience. The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

ONCLICK, when the mouse button is clicked on an element; ONDBLCLICK, when the mouse button is double-clicked on an element; ONMOUSEDOWN, when the mouse button is pressed over an element; ONMOUSEUP, when the mouse button is released over an element; ONMOUSEOVER, when the mouse is moved onto an element; ONMOUSEMOVE, when the mouse is moved while over an element; ONMOUSEOUT, when the mouse is moved away from an element; ONKEYPRESS, when a key is pressed and released over an element; ONKEYDOWN, when a key is pressed down over an element; ONKEYUP, when a key is released over an element.
Linking basics and linking in html First Links

Ok, you have a page that you learned how to write in the first lesson. Now, youre going to need another page. It doesnt have to be anything great, just a very basic page will do. You can copy the first page and just save it as a different name if you want. Just make sure you know the names of the two files and that they are in the same folder. Dont forget to call your homepage index.html. sourcetip: Always use lowercase letters when naming html files, images and folders. Most web servers (the computers youll eventually be putting your site onto) are case-sensitive, which means it matters to them whether your files use capital letters or not. When linking to pages or typing in URLs, you dont want to have to remember the case of each letter, so if everyone uses small letters the problem goes away.
Link Structure
Like all tags, links follow a structure, and have start tags and end tags. Put this line of code on one of your pages. Very Important <a href="theotherpage.html">The Link</a> Explanation:
a: a stands for Anchor, which means Link. This is the tag that makes it all happen. href: Means Hypertext REFerence. The href part is another attribute, with the location
of the other page as its value. Just change theotherpage.html to the name of the second file. Dont forget the quotation marks! Whatever you put inside the link tags will become a link, coloured blue and underlined. When you rest your mouse on it your cursor will turn into a hand and the URL of the page will appear in your browsers status bar (at the bottom of the window). If you want to make links to other parts of your page (for example a link to the top of the page), set up some internal links. Changing the default colours of the links is dealt with in body attributes.
Linking to email addresses

If you want to let people email you by clicking a link, you use this code:
<a href="mailto:bruce@example.com">mail
me</a>
to create this mail me which will open the users email program with your address in the To: box.
Linking to pictures
Linking to a picture file is practically the same as to a html file. Just include the name of the file, and do not forget the correct suffix i.e. if it is a gif or a jpg. For a rundown on the file formats for images on the web, read this. If you want to use a picture as a link, read the next tutorial.
Linking to files
You link to a file just like a picture. The only difference is that it wont open in a browser, but instead will download onto a specified place on the readers hard drive. An example:
<a href="ambient.mp3">download
the song (2.6MB mp3)</a>
Embedding a file directly into a page is a different process. We have a page on Internet file formats too.
Internal and external linking:

External linking:
External HTML links are those HTML links that go to another Web site.
Example
<a href="http://www.w3schools.com/">Visit W3Schools</a>
which will display like this: Visit W3Schools Clicking on this hyperlink will send the user to W3Schools' homepage.
Internal linking:
The name attribute specifies the name of an anchor. The name attribute is used to create a bookmark inside an HTML document. Note: The upcoming HTML5 standard suggest using the id attribute instead of the name attribute for specifying the name of an anchor. Using the id attribute actually works also for HTML4 in all modern browsers. Bookmarks are not displayed in any special way. They are invisible to the reader.
Example
A named anchor inside an HTML document:

<a name="tips">Useful Tips Section</a>
Create a link to the "Useful Tips Section" inside the same document:
<a href="#tips">Visit the Useful Tips Section</a>
Absolute and Relative Links

Internet addresses closely follow the established hierarchy structure youre probably familiar with on your computers file system. First comes the Internet domain, like www.example.com. Next comes the directories (folders) that contain the file and finally the files name, with the appropriate file type extension. Each segment of an url is separated with a forward slash. Always remember: on the Internet, all slashes go forwards. There are two different ways to point your links to a file. Absolute links include the full website address, including the http:// and www. bits. Relative links are much shorter and more manageable, and can only be used to point to other pages on the same website. For instance, say you have a page called page1.html in the links directory of your site. The absolute href to this page is http://www.example.com/links/page1.html. So, you put that link anywhere on any page, on any site and it will always go to that page on the web. Relative links can only link to a page from the same site. The address is always relative to the position of the second file. If you were linking to that same page from a page in the same directory, the href would be just page1.html. If you were linking from your homepage, i.e., in the root directory, the link would read <a href="links/page1.html">, as you would have to go down into the directory first, and then get the file. sourcetip: If you name files index.html in your directories, you can make links to these pages by just linking to the directory name. Your browser will always pick up index as the main page for that folder. This means you can condense href="folder/index.html" into href="folder/". The slash tells the browser it should look for a folder, and not a file. Dont forget it!
HTML Images The <img> Tag and the Src Attribute

In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag. 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. Syntax for defining an image: <img src="url" alt="some_text"/> The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif. The browser displays the image where the <img> 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.
HTML Images - The Alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The value of the alt attribute is an author-defined text: <img src="boat.gif" alt="Big Boat" /> The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
HTML Images - Set Height and Width of an Image

The height and width attributes are used to specify the height and width of an image. The attribute values are specified in pixels by default: <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" /> Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However,
without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).
Links
HTML Hyperlinks (Links)
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. Links are specified in HTML using the <a> tag. The <a> tag can be used in two ways:
1. To create a link to another document, by using the href attribute 2. To create a bookmark inside a document, by using the name attribute
HTML Link Syntax

The HTML code for a link is simple. It looks like this:
<a href="url">Link text</a>
The href attribute specifies the destination of a link.
Example
<a href="http://www.w3schools.com/">Visit W3Schools</a>
which will display like this: Visit W3Schools Clicking on this hyperlink will send the user to W3Schools' homepage. Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.
Link attributes:
Attribute coords href name
Value coordinates URL section_name default rect circle poly _blank _parent _self _top framename
Description Specifies the coordinates of a link Specifies the destination of a link Specifies the name of an anchor
DTD STF STF STF
shape
Specifies the shape of a link
STF
target
Specifies where to open the linked document
TF
HTML Links - The target Attribute

The target attribute specifies where to open the linked document. The example below will open the linked document in a new browser window or a new tab:
Example
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
HTML Links - The name Attribute

The name attribute specifies the name of an anchor. The name attribute is used to create a bookmark inside an HTML document.
Note: The upcoming HTML5 standard suggest using the id attribute instead of the name attribute for specifying the name of an anchor. Using the id attribute actually works also for HTML4 in all modern browsers. Bookmarks are not displayed in any special way. They are invisible to the reader.
Example
A named anchor inside an HTML document:
<a name="tips">Useful Tips Section</a>
Create a link to the "Useful Tips Section" inside the same document:
<a href="#tips">Visit the Useful Tips Section</a>
Or, create a link to the "Useful Tips Section" from another page:
<a href="http://www.w3schools.com/html_links.htm#tips"> Visit the Useful Tips Section</a>
HTML <a> shape Attribute Example

Use of the shape and coords attribute in an a element, to create an image-map:
<object data="planets.gif" alt="Planets" type="image/gif" usemap="#Map1"> <map name="Map1"> <a href="sun.htm" shape="rect" coords="0,0,82,126">The Sun</a> <a href="mercur.htm"shape="circle" coords="90,58,3">Mercury</a> <a href="venus.htm" shape="circle" coords="124,58,8">Venus</a> </map> </object>
HTML <a> coords Attribute

<object data="planets.gif" alt="Planets" type="image/gif" usemap="#Map1">
<map name="Map1"> <a href="sun.htm" shape="rect" coords="0,0,82,126">The Sun</a> <a href="mercur.htm"shape="circle" coords="90,58,3">Mercury</a> <a href="venus.htm" shape="circle" coords="124,58,8">Venus</a> </map> </object>
Image map HTML <map> Tag Example

An image-map, with clickable areas:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" /> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" /> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" /> </map>
Definition and Usage

The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas. 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. The map element contains a number of area elements, that defines the clickable areas in the image map.
Required Attributes
Attribute name Value mapname Description Specifies the name for an image-map DTD STF
Standard Attributes
The <map> tag supports the following standard attributes:
Attribute class dir id lang style title xml:lang Value classname rtl ltr id language_code style_definition text language_code Description Specifies a classname for an element DTD STF
Specifies the text direction for the content in an element STF Specifies a unique id for an element STF
Specifies a language code for the content in an element STF Specifies an inline style for an element Specifies extra information about an element STF STF
Specifies a language code for the content in an element, STF in XHTML documents
Image button
The basic syntax of the new <button> tag is like any other containment tag:
<button>.....</button>
For example: Text on button

<button>Some text here</button>
An image is shown on button

<button><img src="kitty.gif" /></button>
One side image and other side text

<button> <table border="1" width="100%"> <tr> <td width="19%"><img src="construct.gif" /></td>
<td width="81%">Under Construction</td> </tr> </table> </button>
IMAGE BUTTON
Image buttons have the same effect as submit buttons. When a visitor clicks an image button the form is sent to the address specified in the action setting of the <form> tag. Since visitors aren't always perfectionists you might consider adding a javascript validation of the content before it is actually sent.
SETTINGS: Below is a listing of valid settings for image buttons:
HTML image name= src= align= border= width= height= vspace= hspace= tabindex=
EXPLANATION Submit button Name of the image. Url of the image. Alignment of the image. Border width around the image. Width of the image. Height of the image. Spacing over and under image. Spacing left and right of image. Tab order of the image.
EXAMPLE
The name setting adds an internal name to the image button so the program that handles the form doesn't confuse it with the other fields.
The src setting defines the URL of the image. The align setting defines how the image is aligned. Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM. The alignments are explained in the image section. You can learn about the different alignments here. The border setting defines the width (in pixels) of the border around the image. The width setting defines the width of the image. The height setting defines the height of the image. The vspace setting defines the spacing over and under the image (in pixels). The hspace setting defines the spacing to the left and right of the image (in pixels). The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.
AN EXAMPLE: Look at this HTML example: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST"> <div align="center"> <br><br> <input type="text" size="25" value="Enter your name here!"> <br><input type="image" src="rainbow.gif" name="image" width="60"
height="60"><br> </div> </form> </body> </html>
And the resulting output from it:
Enter your name here!
Html form
HTML
EXPLANATION
EXAMPLE
textarea rows= cols= name= wrap= off virtual physical
Text area - several lines Rows in the field. Columns in the field. Name of the field. Control linebreaks. Turns off linebreaks. Shows linebreaks, but sends text as entered. Inserts linebreaks when needed and even sends it. One line text field Characters shown. Max characters allowed. Name of the field. Initial value in the field. Password field. Characters shown. Characters allowed to enter. Name of the field. Initial value in the field. Choose one or more options Name of the field. Initial value in the field. Choose only one option Name of the field. Initial value in the field. Drop-down menu Name of the field. Number of items in list. Allow multiple choice if yes. Individual items in the menu. Make an item default. Value to send if selected.
text size= maxlength= name= value= password size= maxlength= name= value= checkbox name= value= radio name= value= select name= size= multiple= option selected value=
hidden name= value= reset name= value= submit name= value= image name=
Does not show on the form. Name of the field. Value to send. Button to reset all fields Name of the button. Text shown on the button. Button to submit the form Name of the button. Text shown on the button. Image behaving as button Name of the image.
Reset
Submit
Note: This is a quick reference showing the most common settings for each field. For a complete listing and explanation you should follow the link to the relevant field in the menu.
Introduction to layout 1.)Background attribute:

The background attribute specifies a background image for a document.
Example
Specify a background image for an HTML document: <html> <body background="bgimage.jpg"> <h1>Hello world!</h1> <p><a href="http://www.w3schools.com">Visit W3Schools.com!</a></p> </body> </html>
Syntax
<body background="value">
Attribute Values
Value Description The URL of the background image. Possible values: URL

An absolute URL - points to another web site (like href="http://www.example.com/bgimage.gif") A relative URL - points to a file within a web site (like href="/images/bgimage.gif")
2.)HTML Text Formatting

HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
HTML Text Formatting Tags

Tag <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> Description Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text
Example:
<html> <body> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><big>This text is big</big></p> <p><i>This text is italic</i></p> <p><em>This text is emphasized</em></p> <p><code>This is computer output</code></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html>
Output:
This text is bold
This text is big

This text is italic
This is computer output
This is subscript and
superscript
3.)HTML <font> color Attribute

The color attribute specifies the color of the text inside a font element.
Syntax
<font color="value">
Attribute Values
Value color_name
Description Specifies the text color with a color name (like "red")
Example
Specify the color of text:
<font color="red">This is some text!</font>
4.)HTML Layouts - Using Tables

The simplest way of creating layouts is by using the HTML <table> tag. The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute:
Example
<html> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>Main Title of Web Page</h1> </td> </tr> <tr valign="top"> <td style="background-color:#FFD700;width:100px;text-align:top;"> <b>Menu</b><br /> HTML<br /> CSS<br /> JavaScript </td> <td style="background-color:#EEEEEE;height:200px;width:400px;textalign:top;"> Content goes here</td> </tr>
<tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> Copyright 2011 W3Schools.com</td> </tr> </table> </body> </html>
The HTML code above will produce the following result:
Main Title of Web Page

Menu HTML CSS JavaScript Content goes here
Copyright 2011 W3Schools.com
Note: Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!

Core Attributes: A Number of Attributes in HTML 4 Are Common To Most Elements

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Core Attributes: A Number of Attributes in HTML 4 Are Common To Most Elements

Uploaded by

Copyright:

Available Formats

A number of attributes in HTML 4 are common to most elements.

<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P> </DIV>

STYLE The style attribute specifies an inline style for an element.

Attribute dir lang xml:lang

Value ltr rtl language_code language_code

ISO Language Codes

English Hindi Japanese Punjabi

Linking basics and linking in html First Links

Linking to email addresses

the song (2.6MB mp3)</a>

Internal and external linking:

A named anchor inside an HTML document:

Absolute and Relative Links

HTML Images The <img> Tag and the Src Attribute

HTML Images - The Alt Attribute

HTML Images - Set Height and Width of an Image

HTML Link Syntax

The href attribute specifies the destination of a link.

Attribute coords href name

DTD STF STF STF

Specifies the shape of a link

Specifies where to open the linked document

HTML Links - The target Attribute

HTML Links - The name Attribute

HTML <a> shape Attribute Example

HTML <a> coords Attribute

Image map HTML <map> Tag Example

Definition and Usage

For example: Text on button

An image is shown on button

One side image and other side text

<td width="81%">Under Construction</td> </tr> </table> </button>

SETTINGS: Below is a listing of valid settings for image buttons:

height="60"><br> </div> </form> </body> </html>

And the resulting output from it:

Enter your name here!

textarea rows= cols= name= wrap= off virtual physical

Introduction to layout 1.)Background attribute:

2.)HTML Text Formatting

HTML Text Formatting Tags

This text is big

This is subscript and

3.)HTML <font> color Attribute

4.)HTML Layouts - Using Tables

The HTML code above will produce the following result:

Main Title of Web Page

Copyright 2011 W3Schools.com

You might also like