HTML IMAGES
Images can improve the design and the appearance of a web page.
<IMG SRC="PIC_TRULLI.JPG" ALT="ITALIAN
TRULLI">
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
<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.
<img src="img_chania.jpg" alt="Flowers in Chania">
IMAGE SIZE - WIDTH AND
HEIGHT
You can use the style attribute to specify the width and height of an image
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Alternatively, you can use the width and height attributes:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
WIDTH AND HEIGHT, OR
STYLE?
The width, height, and style attributes are all valid in HTML.
However, we suggest using the style attribute. It prevents styles sheets from changing the size of images:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5
Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
</body>
</html>
IMAGES IN ANOTHER
FOLDER
<img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
IMAGES ON ANOTHER
SERVER
<img src="https://photos.com/images/name of photo.jpg" alt=“background
design">
ANIMATED PHOTOS
<img src="programming.gif" alt="Computer
Man" style="width:48px;height:48px;">
IMAGES AS LINK
<a href="default.asp">
<img src="smiley.gif" alt=“ it looks
nice" style="width:42px;height:42px;">
</a>
FLOATING PHOTOS
Use the CSS float property to let the image float to the right or to the left of a text:
<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>
SUMMARY OF CHAPTER
SUMMARY OF CHAPTER
Chapter Summary
•Use the HTML <img> element to define an image
•Use the HTML src attribute to define the URL of the image
•Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
•Use the HTML width and height attributes or the CSS width and height properties to define the size of the image
•Use the CSS float property to let the image float to the left or to the right
HTML TABLES
HTML tables allow web developers to arrange data into rows and columns.
DEFINE AN HTML TABLE
A table in HTML consists of table cells inside rows and columns
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
TABLE CELLS
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
TABLE ROWS
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
TABLE HEADERS
Sometimes you want your cells to be headers, in those cases use the <th> tag instead of the <td> tag:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
HTML TABLE TAGS
HTML LISTS
HTML lists allow web developers to group a set of related items in
lists.
Unordered HTML List
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ORDERED HTML LIST
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML DESCRIPTION LISTS
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each
term
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML LIST TAGS
UNORDERED HTML LIST
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
UNORDERED HTML LIST
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
NESTED HTML LIST
LIST CAN BE NESTED (LIST INSIDE LIST):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
li a {
display: block;
NESTED HTML LIST color: white;
text-align: center;
padding: 16px;
text-decoration: none;
<!DOCTYPE html> }
<html>
<head> li a:hover {
<style> background-color: #111111;
ul { }
list-style-type: none; </style>
margin: 0; </head>
padding: 0; <body>
overflow: hidden;
background-color: #333333; <ul>
} <li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
li { <li><a href="#contact">Contact</a></li>
float: left; <li><a href="#about">About</a></li>
} </ul>
</body>
</html>
CHAPTER SUMMARY
Chapter Summary
•Use the HTML <ul> element to define an unordered list
•Use the CSS list-style-type property to define the list item marker
•Use the HTML <li> element to define a list item
•Lists can be nested
•List items can contain other HTML elements
•Use the CSS property float:left to display a list horizontally
ORDERED HTML LIST-THE
TYPE ATTRIBUTE
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
ORDERED HTML LIST-THE
TYPE ATTRIBUTE
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
CONTROL LIST COUNTING
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
NESTED HTML LIST
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
Chapter Summary
•Use the HTML <ol> element to define an ordered list
•Use the HTML type attribute to define the numbering
type
•Use the HTML <li> element to define a list item
•Lists can be nested
•List items can contain other HTML elements
HTML OTHER LISTS
HTML Description Lists
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
CHAPTER SUMMARY
•Use the HTML <dl> element to define a description list
•Use the HTML <dt> element to define the description term
•Use the HTML <dd> element to describe the term in a description list
HTML BLOCK
Block-level Elements
A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
Two commonly used block elements are: <p> and <div>.
The <p> element defines a paragraph in an HTML document.
The <div> element defines a division or a section in an HTML document.
EXAMPLE
<p>Hello World</p>
<div>Hello World</div>
HERE ARE THE BLOCK –
LEVEL ELEMENTS IN HTML
EXAMPLE
<span>Hello World</span>
HERE ARE THE INLINE
ELEMENTS IN HTML
THE <DIV> ELEMENT
The <div> element is often used as a container for other HTML elements.
The <div> element has no required attributes, but style, class and id are common.
When used together with CSS, the <div> element can be used to style blocks of content:
<div style="background-
color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city
of England. It is the most populous city in
the United Kingdom, with a metropolitan
area of over 13 million
inhabitants.</p></div>
THE <SPAN> ELEMENT
The <span> element is an inline container used to mark up a part of a text, or a part of a document.
The <span> element has no required attributes, but style, class and id are common.
When used together with CSS, the <span> element can be used to style parts of the text:
<p>My mother has <span style="color:blue;font-
weight:bold">blue</span> eyes and my father has <span
style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.
</p>
CHAPTER SUMMARY
•There are two display values: block and inline
•A block-level element always starts on a new line and takes up the full width available
•An inline element does not start on a new line and it only takes up as much width as necessary
•The <div> element is a block-level and is often used as a container for other HTML elements
•The <span> element is an inline container used to mark up a part of a text, or a part of a document
