Learn Programming Online » HTML

How to Display Image in HTML

WebProgrammer — Mon, 31 May 2010 06:47:11 +0000

With HTML you can display images in a document; Here’s how:

The Image Tag and the Src Attribute

• In HTML, images are defined with the tag.
• The tag is empty, which means that it contains attributes only and it 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 on your page.
• The syntax of defining an image:
• 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.
• 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.

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:
• 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.

HTML Forms

WebProgrammer — Mon, 31 May 2010 06:42:07 +0000

HTML Forms are used to select different kinds of user input.

HTML Forms

• A form is an area that can contain form elements.
• Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.

• A form is defined with the < form > tag.
< form >
< input >
< /input >

Input

• The most used form tag is the < input > tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.

Text Fields

• Text fields are used when you want the user to type letters, numbers, etc. in a form.
• < form > First name: < input type="text" name="firstname" > < br > Last name: < input type="text" name="lastname" > < /form >How it looks in a browser:
• First name:
Last name: Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default.

Radio Buttons HTML Forms

• Radio Buttons are used when you want the user to select one of a limited number of choices.

HTML Lists

WebProgrammer — Mon, 31 May 2010 06:36:32 +0000

HTML supports ordered, unordered and definition lists.

< strong >Unordered Lists< /strong >

• An unordered list is a list of items. The list items are marked with bullets (typically small black circles).
• An unordered list starts with the

< ul >
< li >Coffee< /li >
< li >Milk< /li >
< /ul >
Here is how it looks in a browser:
• Coffee
• Milk
• Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc

Ordered Lists

• An ordered list is also a list of items. The list items are marked with numbers.
• An ordered list starts with the

tag.
• < ol >
• < li >Coffee< /li >
• < li >Milk< /li >
• < /ol >
• Here is how it looks in a browser:
• Coffee
• Milk
• Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

HTML Definition Lists

• A definition list is not a list of items. This is a list of terms and explanation of the terms.
• A definition list starts with the < dl > tag. Each definition-list term starts with the < dt > tag. Each definition-list definition starts with the < dd > tag.
• < dl > < dt >Coffee< /dt > < dd >Black hot drink< /dd > < dt >Milk< /dt > < dd >White cold drink< /dd > < /dl >Here is how it looks in a browser:
• Coffee
– Black hot drink
• Milk
– White cold drink
• Inside a definition-list definition (the < dd > tag) you can put paragraphs, line breaks, images, links, other lists, etc.

HTML Tables

WebProgrammer — Mon, 31 May 2010 06:31:04 +0000

Here’s the information about the HTML Tables
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.

• < table border="1" > < tr > < td >row 1, cell 1< /td > < td >row 1, cell 2< /td > < /tr > < tr > < td >row 2, cell 1< /td > < td >row 2, cell 2< /td > < /tr > < /table >How it looks in a browser:
• row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2

Tables and the Border Attribute

• 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.
• To display a table with borders, you will have to use the border attribute:
• < table border="1" > < tr > < td >Row 1, cell 1< /td > < td >Row 1, cell 2< /td > < /tr > < /table >

Headings in a HTML Table

• Headings in a table are defined with the < th > tag.
< table border="1" > < tr > < th >Heading< /th > < th >Another Heading< /th > < /tr > < tr > < td >row 1, cell 1< /td > < td >row 1, cell 2< /td > < /tr > < tr > < td >row 2, cell 1< /td > < td >row 2, cell 2< /td > < /tr > < /table >
How it looks in a browser:
• HeadingAnother Headingrow 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2