Adding images in page

HTML also contains elements for adding images to your website.
The formats most used for the images added in a HTML page are GIF and JPEG (JPG ; JPE), the advantage of GIF images is that are small in size (in bytes), having a maximum of 256 colors.
Other format types that can be used are:

PNG, BMP, TIFF, PCX

Adding a image in a webpage

To add an image in a HTML document you must use the element <img> together with the following attributes:

- src - Contains the location (URL address) of the file with the image.
- alt - At this attribute you write the text that will be appear if the image is not displayed (by some browsers) or when a user will position , in the browser , the mouse over the image.
- width - The value of this attribute reprezents the length of the image in pixels, if it's not specified the image will maintain it's original length.
- height - The value of this attribute reprezents the image's heigth, in pixels. If it's not specified the image will be presented in it's orininal heigth.

In the following example you can see how you can include an image in your web page and how to use these attributes:

<html>
<head>
<title>The title</title>
</head>
<body>
<img src="image.jpg" alt="simple text" width="100" height="120">
</body>
</html>

- The web page will appear like this:

- In the <img> tag you can add the "style" attribute with CSS properties to set the border, position and margins for image.
Example:

<img src='adr_image.png' alt='text echivalent' width='200' height='100' style="border:2px solid #0000ee; margin:2px 5px;">

<<-HTML Lists -- Creating Hyperlinks - Links->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to add definition lists into a <dl> element?

<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>

Which CSS property can hide an element on page, letting an empty space in its place?

display position visibility

#id {
  visibility: hidden;
}

Click on the event which is triggered when the mouse clicks on an object.

onclick onmouseover onfocus

document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}

Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.

$_SESSION $_GET $_REQUEST

if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}

Last accessed pages

PHP-MySQL Scripts ⁽³⁷⁴⁵⁾
PHP getElementById and getElementsByTagName ^(19140)
Redirects ⁽⁵⁰³⁾
innerHTML and outerHTML to Get and Replace HTML content ^(17553)
Add Pause in JavaScript script ⁽⁹³⁵⁰⁾

Popular pages this month

Read Excel file data in PHP - PhpExcelReader ⁽⁴⁴³⁾
PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files ⁽³⁵¹⁾
Register and show online users and visitors ⁽³¹⁹⁾
Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 ⁽³⁰⁰⁾
Insert, Select and Update NULL value in MySQL ⁽²¹⁴⁾