Praneškite apie mus:


HTML paveikslėliai

0

HTML kalboje paveikslėliai yra įterpiami per žymę <img>. <img> žymė yra viena iš tų, kurių nereikia uždarinėti su atskira žyme, ji uždaro pati save.



HTML paveikslėliai - sintaksė

1
<img src="kelias_iki_paveikslėlio" alt="alternatyvus_tekstas" />

Vietoje uždarymo žymės </img> užbaigiame pačią <img> žymę su pasvirusiu brūkšneliu ir įprastu daugiau ženklu />

pabandyk_pats

HTML paveikslėliai - atributas src

src atributas <img> žymoje nurodo kelią iki paveikslėlio. Jei esame puslapyje manualai.lt ir į šiuo adresu esantį failą įterpsime paveikslėlį su <img> žyme ir atributo src reikšmė bus img/logo.png, tada naršyklė kraunant puslapį ieškos paveikslėlio adresu http://www.manualai.lt/img/logo.png

HTML paveikslėliai - atributas alt

alt atributas <img> žymoje nurodo alternatyvų paveikslėlio tekstą. Paieškų sistemų robotai nemato paveikslėlio turinio, todėl jie skaito alt atributo reikšmę, jei pas jus daugelis lankytojų ateina iš paieškos sistemų, tokių kaip Google, turėtumėte nepamiršti surašyti alternatyvaus teksto tam, kad pasiektumėte geresnių reitingų tarp paieškos rezultatų. Jei src atribute nurodysite kelią iki paveikslėlio, o naršyklė paveikslėlio ten neras, vietoje jo vartotojas matys alternatyvų tekstą. Taip pat alternatyvusis tekstas bus rodomas užėjus su pele ant paveikslėlio.

Pastaba: alternatyvaus teksto rodymas, kai būna nurodytas blogas kelias iki paveikslėlio, ar užėjus ant paveikslėlio su pele priklauso nuo naudojamos naršyklės, kai kuriose gali ir neveikti šios funkcijos.

HTML paveikslėliai - pavyzdžiai

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<h1>Paragrafas su paveikslėliu fone</h1>
<p style="background-image:url('../img/bg.png'); background-repeat:repeat;
color:#6558E5;">Mėlynas tekstas Mėlynas tekstas Mėlynas tekstas Mėlynas tekstas 
Mėlynas tekstas Mėlynas tekstas Mėlynas tekstas Mėlynas tekstas Mėlynas tekstas 
Mėlynas tekstas Mėlynas tekstas Mėlynas tekstas Mėlynas tekstas Mėlynas tekstas 
Mėlynas tekstas Mėlynas tekstas</p>
 
<h1>Paveikslėlis</h1>
<img src="../img/smegenys.png" />

<h1>Paveikslėlis su alt atributu</h1>
<img src="../img/smegenys.png" alt="smegenys"/>

<h1>Paveikslėlis su alt atributu ir blogu keliu iki paveikslėlio</h1>
<img src="smegenys.png" alt="smegenys"/>

<h1>Paveikslėlis su width ir height atributais</h1>
<img src="../img/smegenys.png" width="50" height="50" alt="smegenys"/>

<h1>Paveikslėlis su width ir height atributais Nr. 2</h1>
<img src="../img/smegenys.png" width="150" height="50" alt="smegenys"/>

<h1>Paveikslėlis su width ir height atributais Nr. 3</h1>
<img src="../img/smegenys.png" width="150" height="150" alt="smegenys"/>

pabandyk_pats

Perskaityta: 9524 kartų

Lukas
Autorius: Lukas
El. paštas.: Šis el. pašto adresas yra apsaugotas nuo spam botų. Jum reikalingas įjungtas Javasctipt kad jį matytumėte
Manualai.lt tinklo autorius ir administratorius. VDU Energetikos Fizikos ir Verslo Informatikos studentas. LinkedIn
Raktažodžiai
html    pagrindai    stiliai   
Patinka straipsnis?
dalintis Facebook
dalintis Twitter
Digg it
Komentarai

Komentarų nėra. Norėdami komentuoti turite prisijungti
HTML meniu
Naudingos nuorodos
Informacija ir viskas kas yra pateikta manualai.lt puslapiuose yra nemokama, tačiau, galite mus paremti per PayPal: