Adăugați o imagine cu HTML

Autor: Christy White
Data Creației: 4 Mai 2021
Data Actualizării: 1 Iulie 2024
Anonim
15: How to Insert Images Using HTML and CSS | Learn HTML and CSS | HTML Tutorial | Basics of CSS
Video: 15: How to Insert Images Using HTML and CSS | Learn HTML and CSS | HTML Tutorial | Basics of CSS

Conţinut

Adăugarea de imagini la site-ul dvs. sau la profilul rețelei sociale este o modalitate excelentă de a vă îmbrăca pagina web. HTML (HyperText Markup Language) are multe funcții pentru crearea paginilor web, dar din fericire codul de care aveți nevoie pentru a adăuga imagini nu este prea dificil.

A calca

Metoda 1 din 1: inserarea imaginilor cu HTML

  1. Încărcați imaginea pe un site web gratuit de găzduire, cum ar fi Photobucket sau TinyPic, care permite conectarea rapidă. Hot-linking permite o legătură directă a unei imagini către serverul site-ului web; unii furnizori au interzis acest lucru, deoarece conectarea la cald utilizează lățimea de bandă și ocupă spațiu pe serverele lor.
    • Dacă aveți un cont de găzduire plătit, încărcați imaginile direct pe serverul pe care este plasat site-ul dvs. web. Acest lucru este întotdeauna mai fiabil decât un site gratuit și nu trebuie să fie deloc costisitor.
  2. Deschideți un document nou într-un editor de text (de ex., Notepad / Notepad) sau deschideți pagina din site-ul / profilul dvs. unde puteți schimba codul HTML direct.
  3. Începeți cu img etichetă. img eticheta este goală, ceea ce înseamnă că nu este necesară nicio etichetă de închidere. Cu toate acestea, pentru validarea XHTML puteți pune în continuare un spațiu și o bară în fața sa mai mare ca semn.
    • img />
  4. Există multe atribute disponibile, dar este necesar doar unul:src. Aceasta este locația / adresa sau adresa URL a imaginii dvs.
    • img src = "URL-ul imaginii" />
  5. Apoi trebuie alt adaugă atribut. Acesta arată un text alternativ, în cazul în care imaginea nu reușește să se încarce. Acesta este, de asemenea, un serviciu pentru persoanele cu deficiențe de vedere care utilizează cititoare de ecran.
    • Dacă plasați cursorul peste o imagine, acest text este afișat și ca un sfat, dar acest lucru este valabil numai în Internet Explorer. Soluția care funcționează cu toate browserele (Firefox și colab.) este la ea titlu atribut de utilizat pe lângă alt. (Puteți să o omiteți pe aceasta din urmă dacă nu doriți ca imaginea să aibă un sfat de instrumente.)

Ca exemplu:img src = "URL-ul imaginii" alt = "Pentru orice eventualitate" title = "Tooltip" />


  1. Acum puteți indica dimensiunea imaginii cu înălţime și lăţime atribut și prin specificarea pixelilor sau a unui procent. Rețineți că redimensionarea în acest mod schimbă doar dimensiunea vizualizării, nu dimensiunea imaginii în sine. Pentru a scurta timpul de încărcare a unei imagini, este mai bine, mai ales în cazul imaginilor mari, să le redimensionați în prealabil cu software-ul de editare a fotografiilor sau cu un serviciu online precum PicResize.com.
    • img src = "URL-ul imaginii" alt = "Pentru orice eventualitate" title = "Tooltip" height = "50%" width = "50%" />
    • img src = "URL-ul imaginii" alt = "Pentru orice eventualitate" title = "Tooltip" height = "25px" width = "50px" />

sfaturi

  • Valoarea acestor atribute este dată fie în pixeli, fie ca procent, de la 1 la 100%.
  • Imaginea poate fi plasată oriunde pe pagina web, utilizând diferitele atribute de formatare, cum ar fi sus, jos, mijloc, dreapta, stânga etc.
  • Atributul hspace este utilizat pentru a insera spațiu orizontal la stânga și la dreapta unei imagini, în timp ce atributul vspace este utilizat pentru a face loc în partea de sus și de jos a imaginilor și a altor obiecte.
  • Nu vă răsfățați prea mult cu imaginile. Arată dezordonat și neprofesionist.
  • Imaginile GIF sunt potrivite pentru logo-uri sau desene animate, dar acest tip de fișier este mai puțin potrivit pentru fotografii și alte imagini cu multe culori.
    • Imaginile GIF acceptă doar culoare pe 8 biți cu maximum 256 de culori pentru o imagine. Prin urmare, este de așteptat ca reproducerea unei ilustrații color sau a unei fotografii pe 16 sau 24 biți să nu fie la fel de bună.
    • Imaginile GIF acceptă, de asemenea, transparența. Este posibil un pic de transparență, ceea ce înseamnă că o culoare poate fi transparentă.
    • Împletirea este, de asemenea, acceptată de imagini GIF, ceea ce înseamnă că vizitatorul site-ului va avea o idee despre cum va arăta imaginea înainte de a fi încărcată complet.
    • Formatul GIF acceptă, de asemenea, animația.
  • Asigurați-vă că adresa URL indică formatul de fișier al imaginii (.webp .gif etc.).

Avertizări

  • Nu faceți Hotlink!