BASIC HTML TAGS

Basic HTML Tags

If you lookup the basic HTML tags in the reference below, you will see that the reference contains additional information about tag attributes.

Tag
Description
<html>
Defines an HTML document
<body>
Defines the document's body
<h1> to <h6>
Defines header 1 to header 6
<p>
Defines a paragraph
<br>
Inserts a single line break
<hr>
Defines a horizontal rule
<!-->
Defines a comment


HTML Attributes


Attributes provide additional information to an HTML element.

HTML Tag Attributes

HTML tags can have attributes. Attributes provide additional information to an HTML element.
Attributes always come in name/value pairs like this: name="value".
Attributes are always specified in the start tag of an HTML element.

Attributes Example 1:

<h1> defines the start of a heading.
<h1 align="center"> has additional information about the alignment.

Attributes Example 2:

<body> defines the body of an HTML document.
<body bgcolor="yellow"> has additional information about the background color.

Attributes Example 3:

<table> defines an HTML table. (You will learn more about HTML tables later)
<table border="1"> has additional information about the border around the table.

Use Lowercase Attributes

Attributes and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation, and XHTML demands lowercase attributes/attribute values.

HTML Text Formatting


HTML defines a lot of elements for formatting output, like bold or italic text.
Below are a lot of examples that you can try out yourself:

How to View HTML Source

Have you ever seen a Web page and wondered "Hey! How did they do that?"
To find out, click the VIEW option in your browser's toolbar and select SOURCE or PAGE SOURCE. This will open a window that shows you the HTML code of the page.

Text Formatting Tags

Tag
Description
<b>
Defines bold text
<big>
Defines big text
<em>
Defines emphasized text 
<i>
Defines italic text
<small>
Defines small text
<strong>
Defines strong text
<sub>
Defines subscripted text
<sup>
Defines superscripted text
<ins>
Defines inserted text
<del>
Defines deleted text
<s>
Deprecated. Use <del> instead
<strike>
Deprecated. Use <del> instead
<u>
Deprecated. Use styles instead

"Computer Output" Tags

Tag
Description
<code>
Defines computer code text
<kbd>
Defines keyboard text 
<samp>
Defines sample computer code
<tt>
Defines teletype text
<var>
Defines a variable
<pre>
Defines preformatted text
<listing>
Deprecated. Use <pre> instead
<plaintext>
Deprecated. Use <pre> instead
<xmp>
Deprecated. Use <pre> instead

Citations, Quotations, and Definition Tags

Tag
Description
<abbr>
Defines an abbreviation
<acronym>
Defines an acronym
<address>
Defines an address element
<bdo>
Defines the text direction
<blockquote>
Defines a long quotation
<q>
Defines a short quotation
<cite>
Defines a citation
<dfn>
Defines a definition term


HTML Character Entities


Some characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text.
To display a less than sign (<) in HTML, we have to use a character entity.

Character Entities

Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source.
A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;).
To display a less than sign in an HTML document we must write: &lt; or &#60;
The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers.
Note that the entities are case sensitive. 

Non-breaking Space

The most common character entity in HTML is the non-breaking space.
Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add spaces to your text, use the &nbsp; character entity.

The Most Common Character Entities:

Result
Description
Entity Name
Entity Number

non-breaking space
&nbsp;
&#160;
< 
less than
&lt;
&#60;
> 
greater than
&gt;
&#62;
&
ampersand
&amp;
&#38;
"
quotation mark
&quot;
&#34;
'
apostrophe 
&apos; (does not work in IE)
&#39;

Some Other Commonly Used Character Entities:

Result
Description
Entity Name
Entity Number
¢
Cent
&cent;
&#162;
£
Pound
&pound;
&#163;
¥
Yen
&yen;
&#165;
€
Euro
&euro;
&#8364;
§
section
&sect;
&#167;
©
copyright
&copy;
&#169;
®
registered trademark
&reg;
&#174;
×
multiplication
&times;
&#215;
÷
division
&divide;
&#247;

HTML Links


HTML uses a hyperlink to link to another document on the Web.

The Anchor Tag and the Href Attribute

HTML uses the <a> (anchor) tag to create a link to another document.
An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
The syntax of creating an anchor: 
<a href="url">Text to be displayed</a>
The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.
This anchor defines a link to W3Schools:
<a href="http://www.w3schools.com/">Visit W3Schools!</a>
The line above will look like this in a browser:

The Target Attribute

With the target attribute, you can define where the linked document will be opened.
The line below will open the document in a new browser window:
<a href="http://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>


The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for.
Below is the syntax of a named anchor:
<a name="label">Text to be displayed</a>
The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.
The line below defines a named anchor:
<a name="tips">Useful Tips Section</a>.
You should notice that a named anchor is not displayed in a special way.
To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like this:
<a href="http://www.w3schools.com/html_links.asp#tips">
Jump to the Useful Tips Section</a>
A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this: 
<a href="#tips">Jump to the Useful Tips Section</a>


Basic Notes - Useful Tips

Always add a trailing slash to subfolder references. If you link like this: href="http://www.w3schools.com/html", you will generate two HTTP requests to the server, because the server will add a slash to the address and create a new request like this: href="http://www.w3schools.com/html/"
Named anchors are often used to create "table of contents" at the beginning of a large document. Each chapter within the document is given a named anchor, and links to each of these anchors are put at the top of the document.
If a browser cannot find a named anchor that  has been specified, it goes to the top of the document. No error occurs. 

Link Tags

Tag
Description
<a>
Defines an anchor


HTML Frames


With frames, you can display more than one Web page in the same browser window.

Frames

With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.
The disadvantages of using frames are:
  • The web developer must keep track of more HTML documents
  • It is difficult to print the entire page

The Frameset Tag

  • The <frameset> tag defines how to divide the window into frames
  • Each frameset defines a set of rows or columns
  • The values of the rows/columns indicate the amount of screen area each row/column will occupy

The Frame Tag

  • The <frame> tag defines what HTML document to put into each frame
In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column:
<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>
Note: The frameset column size value can also be set in pixels (cols="200,500"), and one of the columns can be set to use the remaining space (cols="25%,*").

Basic Notes - Useful Tips

If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the <frame> tag.
Add the <noframes> tag for browsers that do not support frames.
Important: You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags!.

Frame Tags

Tag
Description
<frameset>
Defines a set of frames
<frame>
Defines a sub window (a frame)
<noframes>
Defines a noframe section for browsers that do not handle frames
<iframe>
Defines an inline sub window (frame)


1 comment:

Subscribe to: Posts (Atom)