Monday, November 18, 2019
Home > HTML example > HTML Example Part-3(July-2019)

HTML Example Part-3(July-2019)

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>

One thought on “HTML Example Part-3(July-2019)

  1. I intended to put you that tiny note to be able to say thank you yet again with the gorgeous methods you have featured at this time. It is quite extremely open-handed with you giving freely just what a number of people could have distributed for an ebook to end up making some bucks for themselves, especially considering the fact that you might have done it if you desired. These pointers likewise worked to become a good way to understand that other people have similar dream the same as mine to see way more on the topic of this issue. Certainly there are a lot more fun moments up front for people who look into your blog.

Leave a Reply

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