Web Development Programming: HTML Attributes

HTML Attributes

HTML Attributes provide additional information about HTML elements.

We Elaborate as:

HTML Attributes

HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"

Attribute Example

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

Example

We Always Quote Attribute Values

Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed. Remember: In some rare situations, when the attribute value itself contains quotes, it is necessary to use single quotes: name='John "ShotGun" Nelson'

HTML Tricks and tips: Use Lowercase Attributes

Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation. Newer versions of (X) HTML will demand lowercase attributes.

HTML Attributes Reference

Below is a list of some attributes that are standard for most HTML elements:

Attribute	Value	Description
class	classname	Specifies a classname for an element
id	id	Specifies a unique id for an element
style	style_definition	Specifies an inline style for an element
title	tooltip_text	Specifies extra information about an element (displayed as a tool tip)

HTML Headings

Headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

Note: Browsers automatically add some empty space (a margin) before and after each heading.

Headings Are Important

Use HTML headings for headings only. Don't use headings to make text BIG or bold.

Search engines use your headings to index the structure and content of your web pages.

Since users may skim your pages by its headings, it is important to use headings to show the document structure.H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.

HTML Lines

The <hr /> tag creates a horizontal line in an HTML page.

The hr element can be used to separate content:

Example

This is a paragraph

<hr />

This is a paragraph

<hr />

This is a paragraph

HTML Comments

Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.

Comments are written like this:

Example

Note: There is an exclamation point after the opening bracket, but not before the closing bracket.

HTML Tip - How to View HTML Source

Have you ever seen a Web page and wondered "Hey! How did they do that?"

To find out, we will right-click in the page and select "View Source" (IE) or "View Page Source" (Firefox), or similar for other browsers. This will open a window containing the HTML code of the page.

HTML Paragraphs

HTML documents are divided into paragraphs. Paragraphs are defined with the tag.

Example

This is a paragraph

This is another paragraph

Note: Browsers automatically add an empty line before and after a paragraph.

Don't Forget the End Tag

Most browsers will display HTML correctly even if you forget the end tag:

Example

This is a paragraph

This is another paragraph

The example above will work in most browsers, but don't rely on it. Forgetting the end tag can produce unexpected results or errors.

Note: Future version of HTML will not allow you to skip end tags.

HTML Line Breaks

Use the tag if you want a line break (a new line) without starting a new paragraph:

Example

This is a para graph with line breaks

The element is an empty HTML element. It has no end tag.

 or 

In XHTML, XML, elements with no end tag (closing tag) are not allowed.

Even if works in all browsers, writing instead works better in XHTML and XML applications.

HTML Output - Useful Tips

You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results.

With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.

The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count as one line, and any number of spaces count as one space.

EXAMPLE

<!DOCTYPE html>

<html>

<body>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

Note that your browser ignores the layout!

</body>

</html>

HTML Text Formatting

HTML Text Formatting

This text is bold

This text is big

This text is italic

This is computer output

This is_subscript and ^superscript

EXAMPLE:

<!DOCTYPE html>

<html>

<body>

This text is bold

This text is strong

This text is italic

This text is emphasized

<code>This is computer output</code>

This is subscript and superscript

</body>

</html>

HTML Formatting Tags

HTML uses tags like and for formatting output, like bold or italic text.

These HTML tags are called formatting tags (look at the bottom of this page for a complete reference).

Often renders as , and renders as .

However, there is a difference in the meaning of these tags:

or defines bold or italic text only.

or means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!

Preformatted text Example:

<!DOCTYPE html>

<html>

<body>

<pre>

This is

preformatted text.

It preserves both spaces

and line breaks.

</pre>

The pre tag is good for displaying computer code:

<pre>

for i = 1 to 10

print i

next i

</pre>

</body>

</html>

Computer output tags Example:

<!DOCTYPE html>

<html>

<body>

<code>Computer code</code>

<kbd>Keyboard input</kbd>

<tt>Teletype text</tt>

<samp>Sample text</samp>

<var>Computer variable</var>

Note: These tags are often used to display computer/programming code.

</body>

</html>

Address Example:

<!DOCTYPE html>

<html>

<body>

Written by Mr abc

<a href="mailto:us@example.org">Email us</a>

Address: Box 564, Disneyland

Phone: +12 34 56 78

</address>

</body>

</html>

Abbreviations and acronyms Example:

<!DOCTYPE html>

<html>

<body>

The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

Can I get this <acronym title="as soon as possible">ASAP</acronym>?

The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.

</body>

</html>

Text direction Example:

<!DOCTYPE html>

<html>

<body>

If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):

Here is some Hebrew text

</bdo>

</body>

</html>

Quotations Example:

<!DOCTYPE html>

<html>

<body>

A long quotation:

This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.

</blockquote>

Note: The browser inserts white space before and after a blockquote element. It also inserts margins.

A short quotation:

<q>This is a short quotation</q>

Note: The browser inserts quotation marks around the short quotation.

</body>

</html>

Delete and Insert Text

If you want to Deleted and inserted Text Examples

<! DOCTYPE html>

<html>

<body>

My favorite color is <del>blue</del> <ins>red</ins>!

Notice that browsers will strikethrough deleted text and underline inserted text.

</body>

</html>

Web Development Programming

Pages

Saturday, 1 February 2014

HTML Attributes

No comments:

Post a Comment