4Основе HTML

Графика у HTML

У претходним постовима, било је речи како се графика може искористити као позадина за html документ, а сада да видимо како се графика користи у „горњем слоју“ " html-странице.

За стављање слика у HTML користи се таг <IMG> с обавезним атрибутом SRC. Тај атрибут указује прегледачу (браузеру) пут ка датотеци (фајлу) слике. Тј. за стављање слике с називом smilja2.jpg на одређено место на страници (уз услов да су страница и слика у истој фасцикли) потребно је ставити следећи html код:

<img src="smilja2.jpg">

Ако су графика и страница у различитим фасциклама, онда је потребно указати пут ка слици. Нар. ако се html страница налази у фасцикли: site, a у тој фасцикли се налази и подфасцикла slike, у којој је слика smilja2.jpg, онда треба написати овако:

<img src="slike/smilja2.jpg">

Осим обавезног атрибута src у тагу img, постоји још неколико необавезних атрибута. Ево их:
.

width – ширина слике у пикселима или процентима;

height – висина слике у пикселима или процентима.
.

Ако се користе ови атрибути, прегледач онда прво издваја место за графику, припрема макету документа, показује текст и тек онда слику. У случају да ти атрибути нису уписани, прегледач ће прво подизати слику, а тек онда текст и остале елементе.

Размера се може задавати у пикселима или у процентима. Нпр.

<img src="smilja.jpg" width="50" height="20">

или

<img src="smilja.jpg" width="10%" height="5%">

У случају да је корисник у подешавањима прегледача искључио приказ слика, може се уместо слике ставити алтернативни текст, који би објаснио да на том месту треба да буде слика. То се постиже путем примене атрибута alt:

<img src="smilja2.jpg" alt="Логотип сајта http://smart.wellnet.me">

.

У том случају прегледач ће одвојити место за слику на самој страници, али уместо слике, изаћи ће текст, који ви напишете у значењу атрибута alt (понављам, ако је корисник искључио приказ графике; ако није, онда ће слика прекрити тај алтернативни текст).

.

Уз помоћ, већини већ познатог атрибута: align, може се управљати поравнањем слике у односу на друге елементе на страници. Атрибут align има неколико значења, а ја ћу навести два:

left – графика иде на леву страну странице, а текст и други елементи су десно;

right – графика је десно, а текст и други елементи су лево од ње.

.

На пример, HTML-код

<img src="smilja2.jpg" align="left">To je мој лого на сајту.

.

Прегледач ће показати овако:

То је мој лого на сајту.

.

А HTML-код:

<img src="smilja2.jpg" align="right">To je мој лого на сајту.

изгледаће овако:

То је мој лого на сајту.

.

За прекидање оптицања текста око слике, може се користити таг <BR>. Он има атрибут clear, који може да има три значења:

.
left – прекидање оптицања текста око слике, поравњаног по левом крају;
right - прекидање оптицања текса око слике, поравњаног по десном крају;
all - прекидање оптицања текса око слике, поравњаног и по левом и по десном крају.

.

Стандардно, графика се поставља приљубљена уз текст и друге елементе. Ако то није оно што желите, можете задати да постоје празна поља око слике. То се ради помоћу следећих атрибута тага img:

.

vspace – ствара горња и доња поља;
hspace – ствара бочна поља (лево и десно).

.

Значење тих атрибута наводи се у пикселима. На пример, да мало допуним пртходни пример:

.

<img src="smilja2.jpg" align="left" vspace="5" hspace="20"> То је мој лого на сајту.

.

Добићу следеће:

          

          То је мој лого на сајту

.

Око слике могуће је направити црни рам уз помоћ атрибута border. Значење тог атрибута указује се у пикселима и одређује ширину рама. На пример, HTML-код

.

<img src="smilja2.jpg" border="5">
.
У прегледачу изгледа овако:

.