Social Icons

Saturday, March 10, 2018

Inserting images into an html page





1 - Inserting images on an HTML page


Some images on an HTML page may make it more attractive and more user-friendly, however it is important not to insert too many images that can make the page load long enough and may in some cases affect the quality of your website.
The HTML IMG tag allows you to insert images into an HTML page. The image can be located on the same server as the page in which it is inserted but also on another server by specifying its complete URL.

Only the following image formats are accepted as standard in the W3C specifications:

  • JPEG images (.JPG) : images with a large number of colors will be well compressed, that is to say they will take up less space, therefore will require a lower loading time)
  • PNG images: Their size is small in the case of images with few colors with uniform tones, this format also allows to have interlaced images (which are displayed gradually) with a color depth of 24 bits and images whose color is defined as transparent.
  • GIF images: They have the same advantages as PNG images, except that the GIF format is limited to 256 colors maximum and this format is not completely free.

How to display images on a web page?

to insert image on HTML page we use the IMG tag by specifying the url source :

<img src="URL of image">

2 - The main attributes of the IMG tag


  • SRC          : Indicates the location of the image (it is mandatory)
  • ALIGN     : Specifies the alignment of the image relative to the adjacent text. It can take the values: TOP, MIDDLE, and BOTTOM (above, in the middle and below)
  • ALT :        : Displays alternative text when the image is not displayed.
  • TITLE      : Displays a tooltip when the cursor hovers over the image.
  • WIDTH    : Specify the width of the image.
  • HEIGHT  : Specify the height of the image.
  • BORDER :  sets the pixel thickness of the border around the image

Example 

<img src="https://www.sath.nhs.uk/wp-content/uploads/2017/02/tree-8.png" 
width="250" height="200" align="center">

The above example will insert :
  • the named image: tree-8.png 
  • located at: https://www.sath.nhs.uk/wp-content/uploads/2017/02/tree- 8.png 
  • with the dimesions: 250x200 
  • with an alignment in the center of the page
This that display after execution in the browser:




Younes Derfoufi 

No comments:

Post a Comment

Category Of Mobile Courses

Actualités (644) Adsense (1) Affiliation (1) Algebraic Topology (1) Algorithmic (1) all-news (30) Android (5) Android App (8) Android app without code (4) Android Apps (169) Android Development (4) Android download (2) Android OS (3) AngularJS (1) Automata theory and formal language (5) C programming (5) Category and Functor (8) CMS (3) Computer Glossary (18) Create Mobile App With Ionic Framework (2) CSS (2) CSS-Cascading-Style-Sheets (4) Developpement Java (13) Differential Geometry (1) Django-Python-Framework (8) dropshiping (26) Earn Money by Internet (4) Emplois (23) Framework php (2) Fraud (2) HTML (7) Java For Beginners (10) Javascript (12) Kotlin Programming Language (8) Kotlin For Mobile Android (1) Linux Download (2) Marketing (5) Mobile (3) Mobile Courses (4) Mobile Marketing (4) MoneyGram (1) News (721) Node.js (5) Open Source (1) Photoshop (1) Protect Computer (1) Python (33) Python BeautifulSoup (1) Python For Data Science (2) Python-Books (6) Python-DVD-Training (1) Python-Exercises (138) Python-Framework (1) Python-IDE (1) Python-Modules (1) Python-pdf (2) Python-pyQt (1) Référencement (2) Script PHP (2) Security (6) SEO (1) Snipping Tool: Faq (1) Social Networks (1) Source Code (1) Statistics With SPSS (2) Surveillance Software (1) Travail à domicile (6) Tutoriels php en vidéos (2) Tutoriels-MySql (6) tutoriels-php (19) Utilitaires (1) VPS (1) Web Hosting (1) Webcam (1) Webmarketing (11) Western Union (1) Windows 10 (1) Windows 7 (4) Windows 7 Faq (2) Windows 8 (1) Windows Accessories (1) Windows Download (8) Windows Drivers (1) Windows Fonts (1) Windows Power Shell (2) Windows Registry (2) Windows Security (18) Windows Software (2) Windows Spyware (2) Windows utilities (3) Windows Virus (2) Windows Vista (3) Windows Wireless (1) Windows xp (1) Wordpress (1)
 

Sample text

Sample Text

 
Blogger Templates