HOME | PHP Tutorial | CSS
facebook icon
AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP
HTML Tutorial

CSS Tutorial

HTML image

Images are very important to design as well as to describe many complex concepts on your web page.
This tutorial will guide you through simple steps to use images in your website as: size, link and background.
Images can improve the design and the appearance of a web page.

HTML image inserted into web page.


You can insert any image in your website by using <img> tag. The simple syntax to use this tag for inserting images <img src="url">
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>Insert image into webpage</title>
</head>
<body>
<p>This is a simple image inserted into web page </p>
<img src = "/images/test.jpg" alt = "Image test" />
</body>
</html>
Note: HTML image alt attribute. The value of the alt attribute from above example 1 should describe the image what it looks like.

Image Size - Width and Height

You can use the style attribute to specify the width and height of any image. Width and height of an image size can be specified in pixels or percentage.
Example2:
<!DOCTYPE html>
<html>
<head>
<title>Set up Image Width and Height for web page</title>
</head>
<body>
<p>We are setting up image width and height</p>
<img src = "/images/test.png" alt = "describes the image content" width = "260" height = "130"/>
</body>
</html>

Image as a Link.
To use an image as a link, you must put the <img> tag inside the <a> tag without border as example 3.
Example 3
<!DOCTYPE html>
<html>
<head>
<title>Set up Image Width and Height for web page</title>
</head>
<body>
<p>We are setting up image width and height</p>
<a href="default.html">
  <img src="smiley.jpg" alt="HTML tutorial" style="width:180px;height:120px;border:0;">
</a>
</body>
</html>
Example 4
- image with border 2px. By default, image will have a border around it. A thickness of 0 means, no border around the picture.
<!DOCTYPE html>
<html>
<head>
<title>Set up Image Width and Height for web page</title>
</head>
<body>
<p>We are setting up image width and height</p>
<a href="default.html">
  <img src="smiley.jpg" alt="HTML tutorial" style="width:180px;height:120px;border:2px;">
</a>
</body>
</html>

HTML image background

The background attribute indicate a background image for an item.
HTML - CSS syntax: <body style="background-image:url(htmltutorial.jpg)">
Syntax <body background="URL">
Example 5:
<!DOCTYPE html>
<html>
<head>
<title>Set up Image Width and Height for web page</title>
</head>
<body background="niceimage.jpg">
<p>We are setting up image width and height</p>
<a href="default.html">
  <img src="smiley.jpg" alt="HTML tutorial" style="width:180px;height:120px;border:0;">
</a>
</body>
</html>
NOTE: The <body> background attribute is not supported in HTML5. Better way use CSS instead

HTML image, html image size, image link, image background HTML image, size, link and image background - html tutorial

2187. HTML Tutorial - Durchgestrichen
Durchstreichen, Beispiele und Anwendungen
https://tutorialehtml.com/de/html-durchgestrichen/

2183. HTML Tutorial - tag. Webseiteninhalt
Der Body-Tag, Ausrichten des Inhalts einer Webseite. Warum ist der Body-Tag einer der wichtigsten Tags in der HTML-Dokumentstruktur
https://tutorialehtml.com/de/html-body-tag/

2683. Tables : Introduction - HTML Tutorial
HTML tables - HTML tutorial
http://www.echoecho.com/htmltables.htm

3202. HTML div style - div style class, html tutorial
HTML div style - div style class html tutorial
https://www.agernic.com/html-tutorial/html-div-style-div-style-class.html

2690. Text : Text Links - HTML Tutorial
HTML basics - HTML tutorial
http://www.echoecho.com/htmltext03.htm

3209. HTML table style, HTML border, width and height, html tutorial
HTML table style, HTML border, width and height html tutorial
https://www.agernic.com/html-tutorial/html-table-style-border-width.html

Your add here
How to get PHP errors to display?
How to prevent sql injection in php mysqli
How do I get PHP errors to display - PHP error_reporting()
mysql_query(): The mysql extension is deprecated and will be removed i
Function eregi_replace() is deprecated in php - How to fix
PHP delete an element from an array
Uncaught Error: Call to undefined function MYSQL_NUM_ROWS() in
Deprecated: mysql_connect() mysql extension is deprecated and will be
mysqli_fetch_array() expects parameter 1 to be mysqli_result boolean g
SQL IN Operator - example
SQL BETWEEN Operator
SQL like syntax and example
SQL WHERE AND & OR multiple conditions
SQL create table primary key autoincrement
PHP mysqli_connect () Function
SQL COUNT(), AVG() and SUM() Functions
Display data from SQL database with MySQLi into php - html table
SQL CREATE DATABASE - example
SQL mysql order by columns, by date, by asc, by desc, random with PHP
PHP mysqli_query() Function - mysqli query
SQL delete row - SQL delete table
SQL update - SQL update select
Insert into SQL - Insert into table SQL - Insert data in sql
Login in PHP - simple login script with PHP MYSQL