Fie pentru exemplificare, pentru ajutor vizual sau doar pentru un efect estetic, un website are nevoie de imagini.
Inserarea unei imagini într-un document HTML se face cu ajutorul tag-ului <img>. Spre deosebire de majoritatea tag-urilor, <img> nu are pereche. nefiind necesar tag-ul </img>.
Obligatoriu, <img> va avea atributul src (source), ce va avea ca valoare sursa imaginii (link către imagine).
Opţional, putem folosi atributele width, height, align, border, alt.
Width şi height determină dimensiunea imaginii, având ca valoare lăţimea respectiv înălţimea imaginii, în pixeli. În lipsa sa, imaginea va fi afişată la dimensiunea originală. Dacă defineşti doar una, după cum vei vedea în exemplul cu clătitele, cealaltă dimensiune se va defini automat, proporţional.
Align poate avea valorile right, left, middle, top sau bottom.
Border poate avea valorile 0 şi 1. Când este 1, poza va fi încadrată de un chenar subţire (1 pixel). Când este zero sau lipseşte, imaginea nu are chenar.
Alt este un atribut text, de obicei o descriere a imaginii, ce apare în browser doar dacă imaginea nu poate fi afişată. În plus, ajută la indexarea imaginii în motoarele de căutare, acestea neştiind ce este într-o imagine fără un atribut care să o descrie.
Să revenim la clătitele noastre şi să introducem nişte imagini, pentru a vedea un exemplu practic.
[html]
<doctype html>
<html>
<head>
<title>Expert in clatite</title>
</head>
<body bgcolor="#ede4c4">
<font color="#7f0006">
<h1 align="center">Invata sa faci clatite ca un adevarat cofetar</h1>
</font>
<h2 align="center" >Clatitele sunt simple, usoare, gustoase si savuroase in orice combinatie!</h2>
<hr>
<p><h4>Ingrediente pentru ~10 clatite:</h4>
<ul type="circle">
<li>250 ml lapte</li>
<li>3 oua</li>
<li>60 g unt</li>
<li>125 g faina</li>
<li>20 g zahar</li>
<li>arome (lamaie,rom,portocala,vanilie etc. )</li>
</ul>
</p>
<img src="imagini/ingrediente.jpg" alt="igrediente clatite" width="300" align="middle">
<p>
<img src="imagini/preparare.jpg" alt="preparare clatite" height="250" align="right">
<img src="imagini/amestec.jpg" alt="amestec clatite" height="250" align="right">
<h4>Preparare:</h4>
<ol type="1" start="1">
<li>Punem la incalzit laptele cu untul astfel incat untul sa se topeasca dar <u>laptele sa nu dea in clocot</u></li>
<li>Se lasa la racit si intre timp amestecam celelalte ingrediente</li>
<li>Se freaca ouale cu zaharul se adauga faina si amestecam bine cu un tel, punem aromele, varsam laptele caldut dar nu fierbinte</li>
<li>Amestecam incetisor pana obtinem un amestec omogen</li>
<li>Punem o tigaie <i>anti-adeziva</i>, o ungem cu <s>otet</s> ulei si lasam la incins</li>
<li>Luam cu un polonic din compozitie si varsam cam 3/4 in tigaia incinsa</li>
<li>Cu miscari circulare intindem aluatul in tigaie si lasam pana se rumeneste</li>
<li>Cand incepe clatita sa se desprinda de pe vas o intoarcem sa se coaca si pe partea cealalta</li>
</ol>
<h4>Servire:</h4>
<dl>
<dt>Clatite dulci</dt>
<dd>dulceata</dd>
<dd>gem</dd>
<dd>inghetata</dd>
<dd>ciocolata</dd>
<dt>Alte clatite</dt>
<dd>carne</dd>
<dd>branza</dd>
</dl>
<br>
<b>Pofta buna!</b>
</p>
<h3 align="right">Cofetar sef Catalin Cerga</h3>
<hr>
<font color="#3f4c34" size="3" face "arial">
<p align="center">Coypright SolutiiPC.ro, solutii complete pentru bucatarie</p>
<p align="center">"><a href="https://solutiipc.ro"><img src="imagini/bucatarie.gif"></a></p>
<font>
</body>
</html>
[/html]
Am folosit imagini cu diverse atribute la liniile 23, 27, 29 şi 61, pentru a putea vedea cum se comportă.
La final, pagina va arăta ca aceasta.
La liniile 23, 27, 29, poţi vedea ce se intampla când defineşti o singură dimensiune şi diverse variante de aliniere.
La linia 61, am făcut o imagine-link, care apăsată va conduce la pagina dorită. Pentru aceasta, este suficient să încadrăm imaginea în tag-uri link.
Daca vrei sa apara:
- semneaza cu numele tau, nu al firmei
- nu alerga dupa link
- scrie romaneste, nu kum apucy
- daca tii sa ataci, ataci ideea, nu persoana
Primul comentariu e moderat.