Scribd
Upload
85 views

HTML Chapter 4

The document discusses HTML images and tables. It provides syntax examples for embedding images in web pages using the <img> tag and its src and alt attributes. It also covers formatting images with CSS, including setting width/height, floating images, and using images for backgrounds. The document then discusses using HTML tables to arrange data into rows and columns with the <table>, <tr>, <th>, and <td> tags. It provides examples of styling tables with CSS, including adding borders, padding, and captions.

Uploaded by

Raymond Puno
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
85 views

HTML Chapter 4

The document discusses HTML images and tables. It provides syntax examples for embedding images in web pages using the <img> tag and its src and alt attributes. It also covers formatting images with CSS, including setting width/height, floating images, and using images for backgrounds. The document then discusses using HTML tables to arrange data into rows and columns with the <table>, <tr>, <th>, and <td> tags. It provides examples of styling tables with CSS, including adding borders, padding, and captions.

Uploaded by

Raymond Puno
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 35

HTML

Create your own Website


Chapter 4
Images and Tables
REVIEW
HTML IMAGES
HTML IMAGES
Images can improve the design and the appearance of a web page.
Example
<img src="pic_trulli.jpg" alt="Italian Trulli">
<img src="img_girl.jpg" alt="Girl in a jacket">
<img src="img_chania.jpg" alt="Flowers in Chania">
HTML IMAGES SYNTAX
• The HTML <img> tag is used to embed an image in a web page.
• Images are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding space for the referenced image.
• The <img> tag is empty, it contains attributes only, and does not have a closing
tag.
• The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image

Syntax
<img src="url" alt="alternatetext">
The src Attribute
• The required src attribute specifies the path (URL) to the image.
• Note: When a web page loads; it is the browser, at that moment, that
gets the image from a web server and inserts it into the page.
Therefore, make sure that the image actually stays in the same spot in
relation to the web page, otherwise your visitors will get a broken link
icon. The broken link icon and the alt text are shown if the browser
cannot find the image.

Example
<img src="img_chania.jpg" alt="Flowers in Chania">
The alt Attribute
• The required alt attribute provides an alternate text for an image, if the
user for some reason cannot view it (because of slow connection, an
error in the src attribute, or if the user uses a screen reader).
• The value of the alt attribute should describe the image:

Example
<img src="img_chania.jpg" alt="Flowers in Chania">

• If a browser cannot find an image, it will display the value of the alt
attribute.
Image Size – Height and Width
• You can use the style attribute to specify the width and height of an
image.
Example
<img src="img_girl.jpg" alt="Girl in a jacket"
style="width:500px;height:600px;">

• Alternatively, you can use the width and height attributes:


Example
<img src="img_girl.jpg" alt="Girl in a jacket" width="500"
height="600">
Images in Another Folder
• If you have your images in a sub-folder, you must include the folder
name in the src attribute:

Example
<img src=“../images/html5.gif" alt="HTML5 Icon"
style="width:128px;height:128px;">
Animated Images
• HTML allows animated GIFs:

Example
<img src="programming.gif" alt="Computer Man“
style="width:48px;height:48px;">
Image Floating
• Use the CSS float property to let the image float to the right or to the
left of a text:
Example
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
• The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face"


style="float:left;width:42px;height:42px;">
• The image will float to the left of the text.</p>
Common Image Formats
Abbreviation File Format File Extension

APNG Animated Portable Network .apng


Graphics

GIF Graphics Interchange Format .gif

ICO Microsoft Icon .ico, .cur

JPEG Joint Photographic Expert Group .jpg, .jpeg, .jfif, .pjpeg, .pjp
image

PNG Portable Network Graphics .png

SVG Scalable Vector Graphics .svg


HTML Background
Images
Background Image on a Page
• If you want the entire page to have a background image, you must
specify the background image on the <body> element:
Example
Add a background image for the entire page:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Background Repeat
• If the background image is smaller than the element, the image will
repeat itself, horizontally and vertically, until it reaches the end of the
element:
Background Repeat
• To avoid the background image from repeating itself, set the
background-repeat property to no-repeat.
Example
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Background Cover
• If you want the background image to cover the entire element, you can
set the background-size property to cover.
• Also, to make sure the entire element is always covered, set the
background-attachment property to fixed:
• This way, the background image will cover the entire element, with no
stretching (the image will keep its original proportions):
Background Cover
Example
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Background Stretch
• If you want the background image to stretch to fit the entire element, you can set
the background-size property to 100% 100%:
• Try resizing the browser window, and you will see that the image will stretch, but
always cover the entire element.
Example
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
HTML Tables
HTML Tables
• HTML tables allow web developers to arrange data into rows and columns.
Define an HTML Table
• The <table> tag defines an HTML table.

• Each table row is defined with a <tr> tag. Each table header is defined with a <th>
tag. Each table data/cell is defined with a <td> tag.

• By default, the text in <th> elements are bold and centered.

• By default, the text in <td> elements are regular and left-aligned.


Define an HTML Table
Example <td>Jill</td>
A simple HTML table: <td>Smith</td>
<td>50</td>
<table style="width:100%"> </tr>
<tr> <tr>
<th>Firstname</th> <td>Eve</td>
<th>Lastname</th> <td>Jackson</td>
<th>Age</th> <td>94</td>
</tr> </tr>
<tr> </table>
Define an HTML Table
HTML Table - Add a Border
To add a border to a table, use the CSS table, th, td {
border property: border: 1px solid black;
}
Example
HTML Table - Collapsed Borders
To let the borders collapse into one border: 1px solid black;
border, add the CSS border-collapse border-collapse: collapse;
property:
}
Example
table, th, td {
HTML Table - Add 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
th, td {
padding: 15px;
}
HTML Table - Left-align Headings
• By default, table headings are bold and centered.

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

Example
th {
text-align: left;
}
HTML Table - Add Border Spacing
• Border spacing specifies the space between the cells.

• To set the border spacing for a table, use the CSS border-spacing property:

Example
table {
border-spacing: 5px;
}
HTML Table - Cell that Spans Many
Columns
• To make a cell span more than one column, use the colspan attribute:
Example
<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>
HTML Table - Cell that Spans Many Rows
• To make a cell span more than one row, use the <td>55577854</td>
rowspan attribute: </tr>
Example <tr>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td> <td>55577855</td>
</tr> </tr>
<tr> </table>
<th rowspan="2">Telephone:</th>
HTML Table - Add a Caption
• To add a caption to a table, use the <caption>
tag:

Example
<td>January</td>
<table style="width:100%">
<td>$100</td>
<caption>Monthly savings</caption>
</tr>
<tr>
<tr>
<th>Month</th>
<td>February</td>
<th>Savings</th>
<td>$50</td>
</tr>
</tr>
<tr>
</table>
HTML Table - Add a Caption
HTML Table – Add style
<table style="width:100%;"> <td>Eve</td>
<tr style="background-color:#f1f1c1;"> <td>Jackson</td>
<th>Firstname</th> <td>94</td>
<th>Lastname</th> </tr>
<th>Age</th> <tr>
</tr> <td>John</td>
<tr> <td>Doe</td>
<td>Jill</td> <td>80</td>
<td>Smith</td> </tr>
<td>50</td> </table>
</tr>
<tr style="background-color:#f1f1c1;">
HTML Table – Add style

You might also like