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

PHP forms
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

28. HTML5 Tutorial - An Ultimate Guide for Beginners
HTML Tutorials for Beginners - Learn the fundamentals of the latest HTML5 markup language in simple and easy steps and start building your own website.
https://www.tutorialrepublic.com/html-tutorial/

2635. Forms : Image Button - HTML Tutorial
HTML forms - HTML tutorial
http://www.echoecho.com/htmlforms14.htm

2639. Frames : Creating a Frameset - HTML Tutorial
HTML frames - HTML tutorial
http://www.echoecho.com/htmlframes02.htm

2632. Forms : Drop Down Menu - HTML Tutorial
HTML forms - HTML tutorial
http://www.echoecho.com/htmlforms11.htm

3196. How to create HTML link without underline, html tutorial
How to create HTML link without underline html tutorial
https://www.agernic.com/html-tutorial/How-to-create-html-link-without-underline.html

2146. HTML Tutorial - Strikethrough
Striketrough, examples and aplicationes
https://tutorialehtml.com/en/html-tutorial-strikethrough/

Your add here
PHP wordwrap() function

PHP str_repeat() function

PHP strtolower() function

PHP count() Function

PHP strlen() function

PHP htmlspecialchars_decode() function

PHP str_split() function

PHP implode() function

PHP strcmp() function

PHP htmlentities() function

PHP print() function

PHP rtrim() function

PHP trim() function

PHP substr() function

PHP printf() function

PHP str_replace() function

How to get PHP errors to display?
PHP mysqli_query() Function - mysqli query
HTML button action - How to create a HTML button action, size
PHP String Functions
SQL create table primary key autoincrement
CSS Text Style - Text Font Size - Text Align