HTML везе
Основна снага HTML језика се налази у способности повезивања дела текста или неке слике са другим документом, сликом, анимацијом итд. Везе (линкови) су обично подвучени или наглашени у документима да се истакне њихова појава.
HTML елемент одгносно таг који се користи за повезивање јесте < a > . Он има почетни и завршни маркер. Да би смо одредили где ће линк да води користимо атрибут href са URL-ом документа за који се вежемо:
<a href="http://www.osmikaantic.edu.rs"> Сајт наше школе </a>
Дакле, href је обавезан атрибут који нам говори куда води наш линк. Атрибут href указује на везу ка другом документу или ка другој локацији унутар документа.Текст који се налази између <a> и </a> тагова ("Сајт наше школе") је текст на који корисник треба да кликне како би се отворила нова URL адреса ( http://osmikaantic.edu.rs/ ).
Ако се жели да се повезана страна преко хyперлинк-а отвори у новом прозору, користи се атрибут target са вредношћу елемента "_blank“
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Осим на html стране, хиперлинк може да показује и на неке друге документе који нису типа html, као на пример повезивање са pdf документом:
<a href="Rezultati_takmicenja.pdf">Резултати школског такмичења из математике</a>
Ако претраживач не уме да отвори такав документ, понудиће могућност преузимања (download) таквог документа или избор апликације која евентуално може да отвори такав документ – pdf документ или mp3, avi итд.
Да би се повезали са неким посебним делом вашег документа, потребно је да најпре дефинишете место за повезивање. То место називамо anchor, сидро или ленгер. Потом треба да направите линк до тог места. На пример, ако желите да се са врха вашег документа преместите на прву реченицу из трећег параграфа вашег документа, ви ћете том вашем трећем параграфу дати неко име, на пример "трећи" и креирати линк на то име.
Ево како би то постигли:
Најпре на почетку четвртог параграфа дефинишемо место за повезивање користећи атрибут name:
<a name="трећи">Прва реченица из трећег параграфа</a>
А онда на врх нашег документа поставимо линк:
<a href="#трећи">Линк на важну напомену</a>
Знак # који се појављује у линку заправо показује претраживачу да треба да оствари везу унутар истог документа, а не да иде на другу URL адресу (као код повезивања са другим документима). Веза са нпр. неким другим документом и његовим трећим параграфом се постиже са:
<a href="http://www.zavod.co.rs/html_tutorial.html#трећи">Линк на важну напомену</a>
наравно претходно смо у том другом докумету направили сидро.
Уместо текста и слику можемо користити као хипервезу ка неком другом документу. Да би то учинили потребно је да уместо текста који би претстављао линк поставимо слику. Погледајте пример кода у коме се слика под називом fat-boat-1.jpg поставља за везу ка HTML документу veza za brod.html који се налази на диску рачунара:
<a href="d:/My Documents/HTML/veza za brod.html"> наводимо место (локацију) документа за који се везује слика
<img src="d:/My Documents/HTML/fat-boat-1.jpg"> наводимо изворну адресу слике која ће представљати везу ка HTML документу
</a> затварамо таг a.
Домаћи задатак:
Напишите HTML документ са заглављем, телом и три параграфа. Поставити боју подлоге са хексадецималном вредношћу F2EDE1. За наслов вашег текста поставите "HTML везе" исписан црвеним подебљаним словима. Наслов центрирати и за величину наслова узети 1. У први унесите линк за Ваш најомиљенији сајт, а у други пасус хиперлинк који даје слику Милутина Миланковића. У трећи убаците слику Ваше школе која ће бити линк за сајт Ваше школе. На крају убаците потребне елементе да би могли да се крећете из првог на трећи пасус.
HTML елемент одгносно таг који се користи за повезивање јесте < a > . Он има почетни и завршни маркер. Да би смо одредили где ће линк да води користимо атрибут href са URL-ом документа за који се вежемо:
<a href="http://www.osmikaantic.edu.rs"> Сајт наше школе </a>
Дакле, href је обавезан атрибут који нам говори куда води наш линк. Атрибут href указује на везу ка другом документу или ка другој локацији унутар документа.Текст који се налази између <a> и </a> тагова ("Сајт наше школе") је текст на који корисник треба да кликне како би се отворила нова URL адреса ( http://osmikaantic.edu.rs/ ).
Ако се жели да се повезана страна преко хyперлинк-а отвори у новом прозору, користи се атрибут target са вредношћу елемента "_blank“
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Осим на html стране, хиперлинк може да показује и на неке друге документе који нису типа html, као на пример повезивање са pdf документом:
<a href="Rezultati_takmicenja.pdf">Резултати школског такмичења из математике</a>
Ако претраживач не уме да отвори такав документ, понудиће могућност преузимања (download) таквог документа или избор апликације која евентуално може да отвори такав документ – pdf документ или mp3, avi итд.
Да би се повезали са неким посебним делом вашег документа, потребно је да најпре дефинишете место за повезивање. То место називамо anchor, сидро или ленгер. Потом треба да направите линк до тог места. На пример, ако желите да се са врха вашег документа преместите на прву реченицу из трећег параграфа вашег документа, ви ћете том вашем трећем параграфу дати неко име, на пример "трећи" и креирати линк на то име.
Ево како би то постигли:
Најпре на почетку четвртог параграфа дефинишемо место за повезивање користећи атрибут name:
<a name="трећи">Прва реченица из трећег параграфа</a>
А онда на врх нашег документа поставимо линк:
<a href="#трећи">Линк на важну напомену</a>
Знак # који се појављује у линку заправо показује претраживачу да треба да оствари везу унутар истог документа, а не да иде на другу URL адресу (као код повезивања са другим документима). Веза са нпр. неким другим документом и његовим трећим параграфом се постиже са:
<a href="http://www.zavod.co.rs/html_tutorial.html#трећи">Линк на важну напомену</a>
наравно претходно смо у том другом докумету направили сидро.
Уместо текста и слику можемо користити као хипервезу ка неком другом документу. Да би то учинили потребно је да уместо текста који би претстављао линк поставимо слику. Погледајте пример кода у коме се слика под називом fat-boat-1.jpg поставља за везу ка HTML документу veza za brod.html који се налази на диску рачунара:
<a href="d:/My Documents/HTML/veza za brod.html"> наводимо место (локацију) документа за који се везује слика
<img src="d:/My Documents/HTML/fat-boat-1.jpg"> наводимо изворну адресу слике која ће представљати везу ка HTML документу
</a> затварамо таг a.
Домаћи задатак:
Напишите HTML документ са заглављем, телом и три параграфа. Поставити боју подлоге са хексадецималном вредношћу F2EDE1. За наслов вашег текста поставите "HTML везе" исписан црвеним подебљаним словима. Наслов центрирати и за величину наслова узети 1. У први унесите линк за Ваш најомиљенији сајт, а у други пасус хиперлинк који даје слику Милутина Миланковића. У трећи убаците слику Ваше школе која ће бити линк за сајт Ваше школе. На крају убаците потребне елементе да би могли да се крећете из првог на трећи пасус.
Табеле
Табеле се представљају елементом TABLE. Елемент има почетни и завршни маркер. Сваки ред табеле почиње маркером <TR> и завршава се маркером </TR>. Ред табеле садржи низ ћелија дефинисаних елементом TD. Елемент има почетни и завршни маркер. Ево примера једноставне табеле.
Елемент TABLE може да има следеће атрибуте:
Атрибут HEIGHT одређује висину табеле. Висина табеле може бити изражена у пикселима или у процентима у односу на висину табеле.
Атрибут BORDER дефинише дебљину оквира око табеле. Вредност атрибута је број који представља дебљину табеле у пикселима.
Атрибут CELLSPACING се користи за дефинисања размака између ћелија. Атрибут CELLPADDING се користи за дефинисање размака између садржаја ћелија и ивице. Вредности оба атрибута су у пикселима.
Елемент TR може да има следеће атрибуте:
Могуће вредности су:
Могуће вредности су:
Постоје и ћелије заглавља. Оне се користе за издвајање заглавља табеле од осталих ћелија табеле. Ћелије заглавља се представљају елементом TH. Елемент има почетни и завршни маркер. Елемент центрира садржај ћелије са појачаним словима. Ћелије заглавља могу да помогну у описивању табеле.
Елемент THEAD се користи за одређивање насловне секције табеле. Елемент има почетни и завршни маркер.
Елемент TBODY се користи за одређивање тела табеле. Елемент има почетни и завршни маркер.
Елемент TFOOT се користи за одређивање футера табеле. Сви ови елементи се не приказују на екрану. Да погледамо још један пример табеле.
- WIDTH
- HEIGHT
- BORDER
- CELLSPACING
- CELLPADDING
Атрибут HEIGHT одређује висину табеле. Висина табеле може бити изражена у пикселима или у процентима у односу на висину табеле.
Атрибут BORDER дефинише дебљину оквира око табеле. Вредност атрибута је број који представља дебљину табеле у пикселима.
Атрибут CELLSPACING се користи за дефинисања размака између ћелија. Атрибут CELLPADDING се користи за дефинисање размака између садржаја ћелија и ивице. Вредности оба атрибута су у пикселима.
Елемент TR може да има следеће атрибуте:
- ALIGN
- VALIGN.
Могуће вредности су:
- LEFT
- CENTER
- RIGHT
- JUSTIFY.
Могуће вредности су:
- TOP
- MIDDLE
- BOTTOM.
- ALIGN
- VALIGN
- ROWSPAN
- COLSPAN.
Постоје и ћелије заглавља. Оне се користе за издвајање заглавља табеле од осталих ћелија табеле. Ћелије заглавља се представљају елементом TH. Елемент има почетни и завршни маркер. Елемент центрира садржај ћелије са појачаним словима. Ћелије заглавља могу да помогну у описивању табеле.
Елемент THEAD се користи за одређивање насловне секције табеле. Елемент има почетни и завршни маркер.
Елемент TBODY се користи за одређивање тела табеле. Елемент има почетни и завршни маркер.
Елемент TFOOT се користи за одређивање футера табеле. Сви ови елементи се не приказују на екрану. Да погледамо још један пример табеле.
Домаћи задатак:
Напишите HTML документ следеће садржине:
Напишите HTML документ следеће садржине:
- Поставити боју подлоге са хексадецималном вредношћу CEE0A8.
- У првом пасусу поставите наслов "Распоред часова" исписан плавим подебљаним словима. Наслов центрирати и за величину наслова узети 2.
- У другом пасусу поставити табелу која ће представљати ваш распоред часова.
- За дебљину оквира табеле узети 3 пиксела.
- За боју позадине табеле узети хексадецималну вредност F2EDE1.
- У заглављу табеле поставити називе дана: понедељак, уторак, среда, четвртак, петак.
- У првој колони требају бити исписани редни бројеви часова: 1., 2, ..., 7 и то централно поравнати.