Cum se introduc imagini cu HTML

Adăugarea de imagini pe site-ul web sau pe profil în rețelele sociale este o modalitate excelentă de a vă îmbunătăți pagina. Codul HTML pentru a adăuga imagini este simplu și de obicei este una dintre primele lecții învățate de cei care abia încep să o folosească.

conținut

Pași
Metoda 1introducerea imaginii
Metoda 2setări opționale
Sfaturi
Avertismente

pași

Metoda 1
Introducerea imaginii

Imagine intitulată Inserați imagini cu HTML Pasul 1

Încărcați imaginea Există mai multe servicii gratuite de găzduire a imaginilor, cum ar fi Picasa Web Albums, Imgur, Flickr sau Photobucket. Citiți cu atenție termenii. Unele servicii vor reduce calitatea imaginii dvs. sau vor fi șterse dacă mulți oameni o văd (deoarece utilizează lățimea de bandă a serverului).

Unele servicii de găzduire blog vă permit să încărcați imaginile utilizând instrumentele de administrator ale blogului.
Dacă ați plătit pentru un server, încărcați imaginea pe propriul site utilizând un serviciu FTP. Vă recomandăm să creați un director de imagini pentru a vă organiza fișierele.
Dacă doriți să utilizați o imagine dintr-un alt site web, cereți autorizarea de la creator. Dacă îl puteți utiliza, descărcați imaginea și încărcați-o într-un site de găzduire a imaginilor.

Imaginea intitulată Inserați imagini cu HTML Pasul 2

Deschideți fișierul HTML. Deschideți documentul HTML pentru pagina web unde va fi afișată imaginea.

Dacă încercați să inserați o imagine într-un forum, puteți scrie direct în înregistrare. Mai multe forumuri folosesc un sistem personalizat în loc de HTML. Cereți altor membri ai forumului pentru ajutor dacă nu funcționează.

Imaginea intitulată Inserați imagini cu HTML Pasul 3

Începeți cu eticheta de imagine. Găsiți un punct în corpul HTML în care doriți să inserați o imagine. Scrieți eticheta aici. Aceasta este o etichetă goală, adică este unică, fără o etichetă de închidere. Tot ce aveți nevoie pentru a vă arăta imaginea va merge în interiorul celor două paranteze unghiulare.

Imagine intitulată Inserați imagini cu HTML Pasul 4

Găsiți adresa URL a imaginii dvs. Vizitați pagina web în care este găzduită imaginea dvs. Faceți clic dreapta (control - faceți clic pe Mac) și selectați Copiați locația imaginii. De asemenea, puteți face clic pe Vedeți imaginea pentru a vedea o singură imagine pe pagină și apoi copiați adresa URL în bara de adrese.

Dacă ați încărcat imaginea într-un director de imagini pe site-ul dvs. propriu, conectați-l cu / images /I elnombredetuarchivo. Dacă nu funcționează, atunci directorul imagine este probabil în interiorul altui dosar. Mutați-o în directorul rădăcină.

Imaginea intitulată Inserați imagini cu HTML Pasul 5

Plasați adresa URL într-un atribut src. După cum ar trebui să știți, atributele HTML intră în interiorul unei etichete pentru a efectua modificări. Atributul src este forma abreviată a "sursă" și îi spune browserului unde să caute să găsească imaginea. Scrie src =" " și lipiți adresa URL a imaginii între ghilimele. Iată un exemplu:

Imaginea intitulată Inserați imagini cu HTML Pasul 6

Adăugați un alt atribut. Din punct de vedere tehnic, codul dvs. HTML are tot ceea ce aveți nevoie pentru a afișa imaginea, dar este mai bine să adăugați un atribut Alt. Acest lucru indică browserului ce text să se afișeze atunci când imaginea nu se încarcă. De asemenea, mai presus de toate, ajută motoarele de căutare să știe ce este imaginea dvs. și permite cititorilor de ecran să vă descrie imaginea vizitatorilor cu probleme vizuale. Urmați acest exemplu schimbând textul în interiorul citatelor:

Dacă imaginea nu este importantă pentru conținutul paginii, aceasta include atributul alt fără text ().

Imaginea intitulată Inserați imagini cu HTML Pasul 7

Salvați modificările Salvați fișierul HTML pe site-ul dvs. Web. Accesați pagina pe care tocmai ați editat sau o actualizați dacă ați deschis-o deja. Acum, uită-te la imaginea ta. Dacă nu are dimensiunea corectă sau nu vă place de altfel, mergeți la următoarea secțiune.

Metoda 2
Setări opționale

Imaginea intitulată Inserați imagini cu HTML Pasul 8

Modificați dimensiunea imaginii. Pentru cele mai bune rezultate, redimensionați imaginea utilizând software-ul de editare gratuită și apoi încărcați noua versiune. Setați lățime și mare cu HTML îi spune browserului să reducă sau să mărească imaginea, care poate fi incoerentă între browsere și cauzează (rareori) erori de afișare. Dacă doriți o setare rapidă și utilă, utilizați acest format:

(Număr de pixeli sau "CSS pixeli" mai concentrat pe telefoanele din HTML5)
sau (Procentajul dimensiunilor paginii web sau procentul elementului HTML care conține imaginea)
Dacă introduceți doar un atribut (lățime sau înălțime), browserul ar trebui să păstreze raportul lățime: înălțime.

Imaginea intitulată Inserați imagini cu HTML Pasul 9

Adăugați o descriere Atributul titlu acesta poate fi folosit pentru a adăuga comentarii suplimentare sau informații despre imagine. De exemplu, puteți cita artistul aici. În majoritatea cazurilor, acest text va apărea atunci când vizitatorul trece pointerul peste imagine.

Imagine intitulată Inserați imagini cu HTML Partea 2 Pasul 3

Faceți o legătură. Pentru a face o imagine, de asemenea, un link, introduceți o etichetă de imagine în interiorul etichetei de hyperlink. Iată un exemplu:

sfaturi

Asigurați-vă că adresa URL include formatul de fișier al imaginilor (.jpg, .jpg, etc.).
Imaginile GIF funcționează cel mai bine pentru logo-uri sau desene animate, în timp ce imaginile JPEG funcționează cel mai bine pentru imagini complexe, cum ar fi fotografii.
În cele mai multe cazuri, este mai bine să utilizați numai imagini cu formate .jpg, .jpeg, .jpg sau .jpg. Probabil alte formate nu apar corect în toate browserele.
Păstrați o copie de rezervă a imaginii pe computer, ca măsură de precauție.

avertismente

Nu faceți o "hotlink" prin introducerea adresei URL a paginii web a unei alte persoane, deoarece aceasta folosește lățimea de bandă a site-ului dvs. fără a mai da noi vizite pe pagina dvs. Pe lângă faptul că este incorect, imaginea "legată la cald" va dispărea dacă site-ul la care este legat dispare. Dacă administratorul acelei pagini vede ceea ce faceți, puteți chiar schimba imaginea care apare pe site-ul dvs. web.

„>

Distribuiți pe rețelele sociale:

înrudit