[html]2/16/15 1:38 PM

  • Html img:

<img src=”url” alt=”some_text“>

 

The src attribute defines the url (web address) of the image:

The alt attribute specifies an alternate text for the image, if it cannot be displayed.

 

You can use the style attribute to specify the width and height of an image.

 

Both the width, the height, and the style attributes, are valid in the latest HTML5 standard.

We suggest you use the style attribute. It prevents styles sheets from changing the default size of images:

 

If not specified, the browser expects to find the image in the same folder as the web page.

However, it is common on the web, to store images in a sub-folder, and refer to the folder in the image name:

 

  • Use image as link:
<a href="default.asp">

  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">

</a>

 

 

  • Image map:

For an image, you can create an image map, with clickable areas:

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px">

 

 

<map name="planetmap">

  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">

  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">

  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">

</map>

 

 

  • Image float style in style=”float:left”

 

  • Use CSS to insert a table:

 

<table style="width:100%">

  <tr>

    <td>Jill</td>

    <td>Smith</td> 

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td> 

    <td>94</td>

  </tr>

</table>

 

Output will be like this:

Example explained:

Tables are defined with the <table> tag.

Tables are divided into table rows with the <tr> tag.

Table rows are divided into table data with the <td> tag.

A table row can also be divided into table headings with the <th> tag.

 

  • Table with border:
<table border="1" style="width:100%">

  <tr>

    <td>Jill</td>

    <td>Smith</td> 

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td> 

    <td>94</td>

  </tr>

</table>

 

 

 

  • Table with collapsed style:

An HTML Table with Collapsed Borders

If you want the borders to collapse into one border, add CSS border-collapse:

Example

table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

}

 

 

 

  • Table with cell padding

An HTML Table with Cell Padding

Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property:

Example

table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

}

th,td {

    padding: 15px;

}

 

 

<!DOCTYPE html>

<html>

 

<head>

<style>

table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

}

th, td {

    padding: 15px;

}

</style>

</head>

 

<body>

 

<table style="width:100%">

  <tr>

    <td>Jill</td>

    <td>Smith</td>                

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>                

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>                

    <td>80</td>

  </tr>

</table>

 

<p>Try to change the padding to 5px.</p>

 

</body>

</html>

 

 

 

  • To left-align the table headings, use the CSS text-align property:

Example

th {

    text-align: left;

}

 

 

left, center, right are available for this element

 

  • Table with border spacing:

 

<!DOCTYPE html>

<html>

 

<head>

<style>

table, th, td {

    border: 1px solid black;

    padding: 5px;

}

table {

    border-spacing: 15px;

}

</style>

</head>

 

<body>

 

<table style="width:100%">

  <tr>

    <td>Jill</td>

    <td>Smith</td>                

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>                

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>                

    <td>80</td>

  </tr>

</table>

 

<p>Try to change the border-spacing to 5px.</p>

 

</body>

</html>

 

 

 

  • Table cell which can spans many  columns

 

<!DOCTYPE html>

<html>

 

<head>

<style>

table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

}

th, td {

    padding: 5px;

    text-align: left;   

}

</style>

</head>

 

<body>

 

<h2>Cell that spans two columns:</h2>

<table style="width:100%">

  <tr>

    <th>Name</th>

    <th colspan="2">Telephone</th>

  </tr>

  <tr>

    <td>Bill Gates</td>

    <td>555 77 854</td>

    <td>555 77 855</td>

  </tr>

</table>

 

</body>

</html>

 

 

Watch out the colspan=”2″, which means that the two cells are spanned to one.

 

 

Also we can use rowspan to specify the cells you want to span.

  • The caption of a table:

 

<table style="width:100%">

  <caption>Monthly savings</caption>

  <tr>

    <th>Month</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>January</td>

    <td>$100</td>

  </tr>

  <tr>

    <td>February</td>

    <td>$50</td>

  </tr>

</table>

 

 

You can add some more styles for specified tables by specifying  the id of table

in head:

 

table#t01 tr:nth-child(even) {

    background-color: #eee;

}

table#t01 tr:nth-child(odd) {

    background-color: #fff;

}

table#t01 th {

    color: white;

    background-color: black;

}

 

 

 

HTML can have Unordered Lists, Ordered Lists, or Description Lists:

Unordered HTML List

  • The first item
  • The second item
  • The third item
  • The fourth item

Ordered HTML List

  1. The first item
  2. The second item
  3. The third item
  4. The fourth item

HTML Description List

The first item

Description of item

The second item

Description of item

 

  • Unordered list

 

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

 

 

The list style type can be specified by

 

Like this:

 

<ul style="list-style-type:none">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

 

 

 

  • Ordered list

 

<ol>

  <li>Coffee</li>

  <li>Milk</li>

</ol>

 

 

Also, the list-sytle-type are :

 

 

 

 

 

  • Description List

 

<dl>

  <dt>Coffee</dt>

  <dd>- black hot drink</dd>

  <dt>Milk</dt>

  <dd>- white cold drink</dd>

</dl>

 

 

The <dl> tag defines a description list.

The <dt> tag defines the term (name), and the <dd> tag defines the data (description).

 

  • Nested Lists

 

<ul>

  <li>Coffee</li>

  <li>Tea

    <ul>

      <li>Black tea</li>

      <li>Green tea</li>

    </ul>

  </li>

  <li>Milk</li>

</ul>

 

 

  • Horizontal List

 

<!DOCTYPE html>

<html>

 

<head>

<style>

ul#menu li {

    display:inline;

}

</style>

</head>

 

<body>

 

<h2>Horizontal List</h2>

 

<ul id="menu">

  <li>Apples</li>

  <li>Bananas</li>

  <li>Lemons</li>

  <li>Oranges</li>

</ul> 

 

</body>

</html>

 

 

Watch out the display:inline

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.