Saturday, July 30, 2011

The Alt Attribute


The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text:

<img src="boat.gif" alt="Big Boat">

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.

Image Tags



.

Thursday, July 28, 2011

Frame Tags





The Image 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 it has no closing tag.
You need to use the src attribute to display an image on a page. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page.
The syntax of defining an image:

<img src="url">

The URL points to the location where the image is stored. An image named "flag.gif" located in the directory "Picture" on "www. schoolsnet.com" has the URL: http://www. schoolsnet.com/images/boat.gif.
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.


.

Monday, July 25, 2011

HTML frames - 2. Navigation frame



The navigation frame contains a list of links with the second frame as the target. The file called "Frames.html" contains three links. The source code of the links:

<a href ="frame_a.htm" target ="showframe">Frame a</a><br>
<a href ="frame_b.htm" target ="showframe">Frame b</a><br>
<a href ="frame_c.htm" target ="showframe">Frame c</a>

The second frame will show the linked document.



Saturday, July 23, 2011

HTML Frames - 1. basic frames

With frames, more than one HTML document in can be displayed 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>


If frame borders are visible, the user can resize it by dragging the border. Resizing can be prevented by adding noresize="noresize" to the <frame> tag.
Add the <noframes> tag for browsers to avoid 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! See how it is done in the first example below


Tuesday, July 19, 2011

The Anchor Tag and the Name Attribute

The name attribute is used to jump directly into a specific section on a page without scrolling.
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="lessons">Select a lesson</a>

Notice that a named anchor is not displayed in a special way.
To link directly to the "lessons" section, add a # sign and the name of the anchor to the end of a URL, like this:

<a href="http:// http://www.youtube.com //html_links.asp#resuits">
Jump to the results Section</a>

A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this:

<a href="#lessons">Jump to the lessons Section</a>


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.youtube.com /
target="_blank"> Visit youtube !</a>

Thursday, July 14, 2011

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 youtube:

<a href="http://www.youtube.com/">Visit  youtube ! </a>
The line above will look like this in a browser

Headings

Saturday, July 9, 2011

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:

Text formatting

<html>
<body>
<b>This text is bold</b><br>
<strong>
This text is strong
</strong>
<br>
<big>
This text is big
</big>
<br>

</body>
</html>

Output

This text is bold
This text is strong
This text is big


.

Basic HTML Tags

Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code. The comments can help you when you edit the source code at a later date.

<!-- This is a comment -->

Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

Paragraphs

Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML automatically adds an extra blank line before and after a paragraph.
Line Breaks
The <br> tag is used to end a line, but there is no need to start a new paragraph. The <br> tag forces a line break wherever you place it.

<p>This <br> is a Green<br>Color pen with line breaks</p>
The <br> tag is an empty tag. It has no closing tag.

Output

This
is a Green
Color pen with line breaks


.

Thursday, July 7, 2011

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML automatically adds an extra blank line before and after a heading.

Output

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading
This is a heading
 
 
 
.