HTML առաջին քայլերը - Դաս 6 - Լուսանկարներ
Լուսանկարները կայքում շատ կարևոր տարր են, առանց դրանց կայքը կդառնա մութ ու անկանոն։ Լուսանկարները օգտագործվում են կայքի ձևավորման համար, լուսանկարների պատկերասրահների համար և պարզապես պատկերներ՝
Լուսանկարները տեղադրվում են IMG տեգի միջոցով (նկատի ունեցեք, որ մենք գրում ենք ամբողջությամբ image, այլ ոչ թե միայն img)։ IMG տեգը միանիվ է <img />, այսինքն՝ չունի զուգահեռ տեգեր։
IMG տեգի հիմնական հատկանիշը src հատկանիշն է։ Այն գործում է ինչպես href հղման դեպքում, src հատկանիշում պետք է դնենք պատկերին տանող ուղին։ Ուղին, ինչպես հղումների դեպքում, կարող է լինել հարաբերական կամ բացարձակ։
Սա մեր index.html-ի կոդն է՝
<html>
<head>
<title>Մեր առաջին HTML փաստաթուղթը</title>
</head>
<body>
<h1>Մեր առաջին HTML փաստաթուղթը</h1>
<p>
<a href="files/file.html">Հղում երկրորդ փաստաթղթին</a>
</p>
</body>
</html>
Այժմ եկեք ստեղծենք images անունով ֆոլդեր այս ֆայլի կողքին։ Ֆոլդերի մեջ կտեղադրենք պատկերային ֆայլը։ Պատկերն անվանում ենք image.jpg։ Եկեք տեղադրենք img տեգը մեր index.html ֆայլում։
<html>
<head>
<title>Մեր առաջին HTML փաստաթուղթը</title>
</head>
<body>
<h1>Մեր առաջին HTML փաստաթուղթը</h1>
<p>
<img />
</p>
<p>
<a href="files/file.html">Հղում երկրորդ փաստաթղթին</a>
</p>
</body>
</html>
Մենք տեղադրել ենք տեգը, հիմա պետք է գրենք պատկերին տանող ուղին՝ մենք կգրենք հարաբերական ուղի՝ սկսելով ./
./
Հետո կավելացնենք ֆոլդերի անունը, որտեղ գտնվում է պատկերն՝
./images/
Եվ հետո գրում ենք ֆայլի անունը՝
./images/image.jpg
Ու հիմա նշում ենք ֆայլի ուղին src հատկանիշում։
<html>
<head>
<title>Մեր առաջին HTML փաստաթուղթը</title>
</head>
<body>
<h1>Մեր առաջին HTML փաստաթուղթը</h1>
<p>
<img src="./images/image.jpg" />
</p>
<p>
<a href="files/file.html">Հղում երկրորդ փաստաթղթին</a>
</p>
</body>
</html>
Այս պահին պատկերն արտադրվում է բնօրինակի չափերով, սակայն մենք կարող ենք սահմանել դրա չափը՝ օգտագործելով բարձրություն (height) և լայնություն (width) հատկանիշները։
IMG տեգի լայնության հատկանիշը՝ width։ Բարձրության հատկանիշը՝ height։ Մենք կարող ենք սահմանել միայն լայնությունը, միայն բարձրությունը կամ էլ բարձրությունն ու լայնությունը միասին։ Օրինակ՝ այսպես՝
<html>
<head>
<title>Մեր առաջին HTML փաստաթուղթը</title>
</head>
<body>
<h1>Մեր առաջին HTML փաստաթուղթը</h1>
<p>
<img src="./images/image.jpg" width="200" />
</p>
<p>
<a href="files/file.html">Հղում երկրորդ փաստաթղթին</a>
</p>
</body>
</html>
Կամ միայն բարձրությունը՝
<html>
<head>
<title>Մեր առաջին HTML փաստաթուղթը</title>
</head>
<body>
<h1>Մեր առաջին HTML փաստաթուղթը</h1>
<p>
<img src="./images/image.jpg" height="400" />
</p>
<p>
<a href="files/file.html">Հղում երկրորդ փաստաթղթին</a>
</p>
</body>
</html>
Եթե դուք սահմանում եք ինչպես բարձրությունը, այնպես էլ լայնությունը միաժամանակ, ապա ուշադրություն դարձրեք, որ բարձրությունն ու լայնությունը համամասնորեն համապատասխանեն բնօրինակի նկարի չափերին։ Այ otherwise, you will distort the image on the website.
<html>
<head>
<title>Մեր առաջին HTML փաստաթուղթը</title>
</head>
<body>
<h1>Մեր առաջին HTML փաստաթուղթը</h1>
<p>
<img src="./images/image.jpg" height="400" width="100" />
</p>
<p>
<a href="files/file.html">Հղում երկրորդ փաստաթղթին</a>
</p>
</body>
</html>