Monday, December 17, 2018
Home > HTML example > HTML Example Part-3

HTML Example Part-3

HTML Images

 

1-An image

 

<!DOCTYPE html>

<html>

<body>

 

<h2>Italian Trulli</h2>

<img src=”pic_trulli.jpg” alt=”Italian Trullti” style=”width:100%”>

 

</body>

</html>

 

2-An image height and width using attributes

<!DOCTYPE html>

<html>

<body>

 

<h2>Image Size</h2>

 

<p>In this example, we specify the width and height of an image with the width and height attributes:</p>

 

<img src=”img_girl.jpg” alt=”Girl in a jacket” width=”500″ height=”600″>

 

</body>

</html>

 

3-An image height and width using CSS

 

<!DOCTYPE html>

<html>

<body>

 

<h2>Image Size</h2>

 

<p>Use the style attribute to specify the width and height of an image:</p>

<img src=”img_girl.jpg” alt=”Girl in a jacket” style=”width:500px;height:600px;”>

 

</body>

</html>

 

4-An image height and width using both

 

<!DOCTYPE html>

<html>

<head>

<style>

/* This stylesheet sets the width of all images to 100%: */

img {

width: 100%;

}

</style>

</head>

<body>

 

<h2>Styling Images</h2>

<p>The image below has the width attribute set to 128 pixels, but the stylesheet overrides it, and sets the width to 100%.</p>

<img src=”html5.gif” alt=”HTML5 Icon” width=”128″ height=”128″>

 

<p>The image below uses the style attribute, where the width is set to 128 pixels which overrides the stylesheet:</p>

<img src=”html5.gif” alt=”HTML5 Icon” style=”width:128px;height:128px;”>

 

</body>

</html>

 

5-An image in another folder

 

<!DOCTYPE html>

<html>

<body>

 

<h2>Images in Another Folder</h2>

<p>It is common to store images in a sub-folder. You must then include the folder name in the src attribute:</p>

 

<img src=”/images/html5.gif” alt=”HTML5 Icon” style=”width:128px;height:128px;”>

 

</body>

</html>

 

6-An image with a broken link

 

<!DOCTYPE html>

<html>

<body>

 

<p>If a browser cannot find an image, it will display the alternate text:</p>

 

<img src=”wrongname.gif” alt=”HTML5 Icon” style=”width:128px;height:128px;”>

 

</body>

</html>

 

7-An image on another server

 

<!DOCTYPE html>

<html>

<body>

 

<h2>Images on Another Server</h2>

 

<img src=”https://www.example.com/images/example_green.jpg” alt=”example.com” style=”width:104px;height:142px;”>

 

</body>

</html>

 

8-Using an image as a link

 

<!DOCTYPE html>

<html>

<body>

 

<h2>Image as a Link</h2>

<p>The image is a link. You can click on it.</p>

 

<a href=”default.asp”>

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

</a>

 

<p>Add “border:0;” to prevent IE9 (and earlier) from displaying a border around the image.</p>

 

</body>

</html>

 

9-A moving image

 

<!DOCTYPE html>

<html>

<body>

 

<h2>Animated Images</h2>

<p>The GIF standard allows moving images.</p>

 

<img src=”programming.gif” alt=”Computer man” style=”width:48px;height:48px;”>

 

</body>

</html>

 

10-An image map with clickable regions

 

<!DOCTYPE html>

<html>

<body>

 

<h2>Image Maps</h2>

<p>Click on the sun or on one of the planets to watch it closer:</p>

 

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

 

</body>

</html>

 

11-A floating image

 

<!DOCTYPE html>

<html>

<body>

 

<h2>Floating Images</h2>

<p><strong>Float the image to the right:</strong></p>

 

<p>

<img src=”smiley.gif” alt=”Smiley face” style=”float:right;width:42px;height:42px;”>

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.

</p>

 

<p><strong>Float the image to the left:</strong></p>

<p>

<img src=”smiley.gif” alt=”Smiley face” style=”float:left;width:42px;height:42px;”>

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.

</p>

 

</body>

</html>

———————————————————————————————————————————————————-

 

HTML Tables

 

1-Basic HTML tables

 

<!DOCTYPE html>

<html>

<body>

 

<h2>HTML Tables</h2>

 

<p>HTML tables start with a table tag.</p>

<p>Table rows start with a tr tag.</p>

<p>Table data start with a td tag.</p>

 

<hr>

<h2>1 Column:</h2>

 

<table>

<tr>

<td>100</td>

</tr>

</table>

 

<hr>

<h2>1 Row and 3 Columns:</h2>

<table>

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

</table>

 

<hr>

<h2>3 Rows and 3 Columns:</h2>

<table>

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

<tr>

<td>700</td>

<td>800</td>

<td>900</td>

</tr>

</table>

 

<hr>

 

</body>

</html>

2-A table with borders

 

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

}

</style>

</head>

<body>

 

<h2>Bordered Table</h2>

<p>Use the CSS border property to add a border to the table.</p>

 

<table style=”width:100%”>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

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

 

</body>

</html>

3-A table with collapsed borders

 

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

</style>

</head>

<body>

 

<h2>Collapsed Borders</h2>

<p>If you want the borders to collapse into one border, add the CSS border-collapse property.</p>

 

<table style=”width:100%”>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

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

 

</body>

</html>

4-A table with cell padding

 

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 15px;

}

</style>

</head>

<body>

 

<h2>Cellpadding</h2>

<p>Cell padding specifies the space between the cell content and its borders.</p>

 

<table style=”width:100%”>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

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

5-A table with headings

 

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 5px;

}

</style>

</head>

<body>

 

<table style=”width:100%”>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

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

 

</body>

</html>

6-A table with left-aligned headings

 

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 5px;

}

th {

text-align: left;

}

</style>

</head>

<body>

 

<h2>Left-align Headings</h2>

<p>To left-align the table headings, use the CSS text-align property.</p>

 

<table style=”width:100%”>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

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

 

</body>

</html>

7-Horizontal/Vertical table headings

 

<!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>Horizontal Headings:</h2>

 

<table style=”width:100%”>

<tr>

<th>Name</th>

<th>Telephone</th>

<th>Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

 

<h2>Vertical Headings:</h2>

 

<table style=”width:100%”>

<tr>

<th>Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th>Telephone:</th>

<td>555 77 854</td>

</tr>

<tr>

<th>Telephone:</th>

<td>555 77 855</td>

</tr>

</table>

 

</body>

</html>

8-A table with a caption

 

<!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>Table Caption</h2>

<p>To add a caption to a table, use the caption tag.</p>

 

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

 

</body>

</html>

9-Table cells that span more than one column

 

<!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>

<p>To make a cell span more than one column, use the colspan attribute.</p>

 

<table style=”width:100%”>

<tr>

<th>Name</th>

<th colspan=”2″>Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>55577854</td>

<td>55577855</td>

</tr>

</table>

 

</body>

</html>

10-Table cells that span more than one row

 

<!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 rows</h2>

<p>To make a cell span more than one row, use the rowspan attribute.</p>

 

<table style=”width:100%”>

<tr>

<th>Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan=”2″>Telephone:</th>

<td>55577854</td>

</tr>

<tr>

<td>55577855</td>

</tr>

</table>

 

</body>

</html>

11-A table with cell spacing

 

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

padding: 5px;

}

table {

border-spacing: 15px;

}

</style>

</head>

<body>

 

<h2>Border Spacing</h2>

<p>Border spacing specifies the space between the cells.</p>

 

<table style=”width:100%”>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

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

12-A table with HTML tags inside

 

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 5px;

}

</style>

</head>

<body>

 

<table>

<tr>

<td>

<p>This is a paragraph</p>

<p>This is another paragraph</p>

</td>

<td>This cell contains a table:

<table>

<tr>

<td>A</td>

<td>B</td>

</tr>

<tr>

<td>C</td>

<td>D</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>This cell contains a list

<ul>

<li>apples</li>

<li>bananas</li>

<li>pineapples</li>

</ul>

</td>

<td>HELLO</td>

</tr>

</table>

 

</body>

</html>

13-Tables with different style using id 1

 

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 15px;

text-align: left;

}

table#t01 {

width: 100%;

background-color: #f1f1c1;

}

</style>

</head>

<body>

 

<h2>Styling Tables</h2>

 

<table style=”width:100%”>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

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

<br>

 

<table id=”t01″>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

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

 

</body>

</html>

14-Tables with different style using id 2

 

<!DOCTYPE html>

<html>

<head>

<style>

table {

width:100%;

}

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 15px;

text-align: left;

}

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

background-color: #eee;

}

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

background-color: #fff;

}

table#t01 th {

background-color: black;

color: white;

}

</style>

</head>

<body>

 

<h2>Styling Tables</h2>

 

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

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

<br>

 

<table id=”t01″>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

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

 

</body>

</html>

15-Tables with different style using class 1

 

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 5px;

text-align: left;

}

table.names {

width: 100%;

background-color: #f1f1c1;

}

</style>

</head>

<body>

 

<table style=”width:100%”>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

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

 

<br>

 

<table class=”names”>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

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

 

</body>

</html>

16-Tables with different style using class 2

 

<!DOCTYPE html>

<html>

<head>

<style>

table {

width:100%;

}

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 5px;

text-align: left;

}

table.names tr:nth-child(even) {

background-color: #eee;

}

table.names tr:nth-child(odd) {

background-color:#fff;

}

table.names th {

background-color: black;

color: white

}

</style>

</head>

<body>

 

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

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

 

<br>

 

<table class=”names”>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

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

 

</body>

</html>

Leave a Reply

Your email address will not be published. Required fields are marked *