Danas ćemo proširiti naše znanje HTML-a do te granice da ćemo napraviti našu prvu stranicu ….. :)
Početi ćemo sa onim što smo ostavili prošli put
Linkovanje :D
Primjer rečenice u kojoj ćemo koristiti linkovanje.
Ukoliko želite kupiti automobil kliknite OVDJE
Kako to izgleda u HTML-u ?
Prošli put smo naučili koristiti
<p></p>
Znači HTML kod izgleda ovako
Ukoliko želite kupiti automobil kliknite OVDJEZnači koristimo
vaš tekstUkoliko želimo da se link otvori u novom prozoru koristiti ćemo target=”_blank” pa naš kod će sada izgledati ovako
Ukoliko želite kupiti automobil kliknite OVDJE
Sada ćemo proučiti kod :)
<a href="" -- ovo je dio koji stranici govori gdje da vodi korisnika koji je kliknuo na link
> - ne zaboravite da zatvorite tag no bez kose crte / jer još nismo završili sa vašim kodom tj ubacimo tekst
</a> - e tek poslije teksta zatvaramo tag
Sada nastavljamo dalje sa našim učenjem HTML-a
Nastaviti ćemo sa odvajanjem teksta
Ukoliko želimo razdvojiti npr naslov i tekst korizontalnom linijom koristiti ćemo <hr/>
Primjer koda
<h3>Naslov</h3> <hr/> <p>Tekst koji je odvojen od naslov</p>
Što izgleda ovako
Naslov
Tekst koji je odvojen od naslova
Ukoliko želimo prenijeti tekst iz jednog reda u drugi koristiti ćemo <br/> tag
Primjer koda
<p> Ovo je tekst u prvom redu <br/> ovo je tekst u drugom redu<br/> ovo je treći red <br/> i tako dalje..</p>
Kako to izgleda
Ovo je tekst u prvom redu
ovo je tekst u drugom redu
ovo je treći red
i tako dalje..
Također mislim da je važno da vam napomenem da naslove <h1> koristimo do <h6>
Sada ćete vidjeti kako to izgleda
Kod koji ćemo sada koristiti izgleda ovako
<h1>Naslov 1</h1> <h3>Naslov 3</h3> <h4>Naslov 4</h4> <h5>Naslov 5</h5> <h6>Naslov 6</h6>
Naslov 1
Naslov 3
Naslov 4
Naslov 5
Naslov 6
Sada ćemo vidjeti koje sve tagove koristimo u paragrafima (<p></p>)
| <b> | Definište podebljani tekst |
| <big> | Definiše povećani tekst |
| <var> | Definiše varijablu |
| <i> | Definiše "nakrivljeni" italic tekst |
| <small> | Definiše mali tekst |
| <strong> | Definiše pojačani tekst |
| <code> | Definiše kompjuterski "kod" tekst |
| <cite> | Definiše citat |
| <adress> | Definiše kontakt informacije autora teksta |
| <del> | Definiše izbrisani tekst |
Sada ćemo malo raditi sa stilovima
Primjer koda
<body style="background-color:red;">
<h1 style="background-color:blue;">Naslov</h1>
<p style="background-color:green;color:redd;">Parragraf</p>
<h1 style="background-color:blue;">Naslov</h1>
<p style="background-color:green;color:redd;">Parragraf</p>
Prva linija koda definiše da će pozadina biti crvena
Druga linija kaže da će pozadina naslova biti plava
Treća linija kaže da će pozadina paragrafa biti zelena , a tekst crven.
Kako to izgleda ?
Naslov
Paragraf
Sada ste spremni da napravite svoju stranicu :D
Ja ću vam dati primjer
1. Otvorite Notepad++ (čiji download link imate u prvom tutorijalu)
2.Unesite slijedeći (i uredite ga ako hoćete) kod (želimo da pozadina bude crna , a slova crvena)
<html> <head> <body style="background-color:black;"> <h3 style="color:red">Naša prva stranica</h3> <hr/> <p>Naš prvi paragraf odvojen linijom</p> <!-- I komentiran --> <b>Podebljana i <i>Nakrivljena</i> slova </b> <center> <p>Centrirani tekst</p> </center> <img src="http://i.imm.io/ggMc.jpeg"/> <p>Naš prvi tekst koji nas vodi na facebook klikom <a href="http://facebook.com/">OVDJE </a></p> </body> </head> </html>
I sačuvajte ga kao test.html
I eto vaše prve html stranice :D
Otvorite test.html (klikom na test.html) i pogledajte vaš rad u vašem browseru :D
Objavi komentar