Захваљујући дигиталној солидарности о којој можете више прочитати овде, на располагању је свим ученицима добар курс о HTML-у, на сајту
https://www.krojacevaskola.com/
https://www.krojacevaskola.com/kursevi/online/html
Рад на слици
Слике на Интернету најчешће се налазе у једном од следећа два формата:
- JPEG (или JPG)
- GIF
<img> таг
Слике се у HTML документ убацују помоћу <img> тага. Овај таг је један од ретких који нема почетну и завршну ознаку већ се на почетку тага налази знак <, а на крају знаци />. Такође, таг <img> не може да стоји сам без атрибута. У овој лекцији биће објашњени следећи атрибути: src, alt, align, width, height, и border.
src атрибут
Као што је малопре речено, <img> таг мора имати бар један атрибут, а то је src атрибут који дефинише назив и евентуално локацију слике коју желимо убацити у веб страницу. Ако смо слику снимили у исти фолдер у којој се налази и одговарајући HTML документ, довољно је да као вредност src атрибута ставимо само назив одговарајућег фајла.
Нпр. ако желимо ставити слику slika.jpg тада ће одговарајући таг гласити:
<img src="slika.jpg"/>
Уколико учитавамо слику која се не налази у истом фолдеру са HTML документом, морамо навести тачну локацију. На пример:
<img src="d:/My documents/HTML/slika.jpg/>
Исто тако, можемо поставити у HTML документ слику која се налази на неком од интернет сервера, као на пример:
<img src="http://www.uh.edu/engines/google_lego.gif">
alt атрибут
Понекад се дешава да веб читач не може учитати слику. Да би се у таквим случајевима уместо слике појавио неки алтернативни текст који би кориснику сајта објаснио шта је требало бити на слици, потребно је поставити атрибут alt као у следећем примеру:
<img src="http://www.uh.edu/engines/google_lego.gif" alt="Слика ученика наше школе" />
Као што видите, садржај алтернативног текста дефинише аутор сајта. Напоменимо и то, да број слика у HTML документу треба бити ограничен да би се олакшало учитавање странице, имајући у виду да графичке датореке заузимају доста меморије.
align атрибут
Читач ће поставити слику на место где се налази таг <img> у документу. Ако се таг налази у сред неког текста, и слика ће бити на том месту. Положај слике у односу на висину реда у ком се налази, као и њен положај у односу на цео параграф у коме је, може се дефинисати убацивањем align атрибута u <img> таг. Вредности овог атрибута и одговарајуће ефекте можемо видети из следећих примера:
<img src="d:/My documents/HTML/slika.jpg/>
Исто тако, можемо поставити у HTML документ слику која се налази на неком од интернет сервера, као на пример:
<img src="http://www.uh.edu/engines/google_lego.gif">
alt атрибут
Понекад се дешава да веб читач не може учитати слику. Да би се у таквим случајевима уместо слике појавио неки алтернативни текст који би кориснику сајта објаснио шта је требало бити на слици, потребно је поставити атрибут alt као у следећем примеру:
<img src="http://www.uh.edu/engines/google_lego.gif" alt="Слика ученика наше школе" />
Као што видите, садржај алтернативног текста дефинише аутор сајта. Напоменимо и то, да број слика у HTML документу треба бити ограничен да би се олакшало учитавање странице, имајући у виду да графичке датореке заузимају доста меморије.
align атрибут
Читач ће поставити слику на место где се налази таг <img> у документу. Ако се таг налази у сред неког текста, и слика ће бити на том месту. Положај слике у односу на висину реда у ком се налази, као и њен положај у односу на цео параграф у коме је, може се дефинисати убацивањем align атрибута u <img> таг. Вредности овог атрибута и одговарајуће ефекте можемо видети из следећих примера:
<p>Слика поравната са доњом ивицом
<img src="logo.jpg" align="bottom"/> реда.</p>
<img src="logo.jpg" align="bottom"/> реда.</p>
<p><img src="logo.jpg" align="left"/> Ово је параграф са сликом. Слика је постављена лево од параграфа. Атрибут за поравнање има вредност <b>left</b>.</p>
<p><img src="logo.jpg" align="right"/> Ово је параграф са сликом. Слика је постављена десно од параграфа. Атрибут за поравнање има вредност <b>right</b>.</p>
Уколико желимо да слика буде центрирана користићемо <center> таг:
<center><img src="logo.jpg"></center>
<center><img src="logo.jpg"></center>
width и height атрибут
Величину слике можемо дефинисати помоћу два атрибута: width и height. Вредност ширине и висине слике се задаје у пикселима.
Претходна слика има следеће вредности атрибута: width="123" и height="65". Ако желимо да та слика буде пропорционално два пута већа написаћемо:
<img src="logo.jpg" width="246" height="130">
Ако задамо само height или само width атрибут, друга димензија ће бити увећана пропорционално са заданом тако да се слика неће деформисати.
border атрибут
Слика се може и "уоквирити" помоћу атрибута border чија се вредност задаје у пикселима. Ако задамо следећи таг:
<img src="logo.jpg" border="5">
добићемо слику са оквиром дебљине 5 пиксела.
За додатни рад на сликама у ХТМЛ-у можете погледати на сајту:
www.w3schools.com
Слика се може и "уоквирити" помоћу атрибута border чија се вредност задаје у пикселима. Ако задамо следећи таг:
<img src="logo.jpg" border="5">
добићемо слику са оквиром дебљине 5 пиксела.
За додатни рад на сликама у ХТМЛ-у можете погледати на сајту:
www.w3schools.com
Вежбање
1. Напиши HTML документ са заглављем, телом и два параграфа. У првом уметните неку слику из фасцикле My Pictures са вашег рачунара, а у други пасус слику Мирослава Антића са Интернета.
2. Напиши HTML документ у коме ћете поред слике Мирослава Антића из задатка један написати кратак текст. Поставите слику нашег песника на почетак текста, па потом на крај текста.
Вежбу 1. и 2. послати наставнику на мејл [email protected]
1. Напиши HTML документ са заглављем, телом и два параграфа. У првом уметните неку слику из фасцикле My Pictures са вашег рачунара, а у други пасус слику Мирослава Антића са Интернета.
2. Напиши HTML документ у коме ћете поред слике Мирослава Антића из задатка један написати кратак текст. Поставите слику нашег песника на почетак текста, па потом на крај текста.
Вежбу 1. и 2. послати наставнику на мејл [email protected]