4. srp 2012.

HTML i CSS 2

Danas pišem drugi dio tutoriala o html i css-u. Ipak sam odlučio da naučimo HTML kod pa tek onda CSS kod. Kad bih paralelno pisao o HTML i CSS bilo bi mi teže a i vi bi se teško snalazili.
Pa počnimo učiti nešto konkretno.


HTML kod se piše u tagovima. Tagovi su usvari komande koje govore našem browseru šta da uradi. Tagovi se pišu unutar "<" i  ">". Npr. <head> , <div> , <ul> , <li>  itd. Kod HTML-a nije bitno da li komande pište velikim ili malim slovom. Možete pisati <div> ili <DIV>.
HTML kod se može uređivati u bilo kojem programu za obradu teksta. To može biti Notepad, Notepad+ ili neki program koji je namijenjen baš za kucanje kodova tipa Dreamweaver ili Komodo.
Kada počnete pisati kod napravite novi fajl pod nazivom index.html sto znaci da će vam to biti glavni dokument.



Vi mozete čitav kod pisati u ovom index.html ali dobri programeri index.html razdvoje u vise fajlova.
Npr. imaju index.html i u njega pozovu glavne dijelove stranice tipa footer, header. U index.html se nalaze samo osnovne stvari, a npr header iskodiraju u header.html, ali da vas nebi zamarao ovim mi ćemo sav kod pisati u index.html


Tri najvažnija taga u index.html su <html>, <head>, <body>
svaki od ovih tagova imaju završni tag </html>, </head>, </body>
Osnovna struktura HTML-a bi trebala izgledati ovako




<html>
<head>
<title>
 ovo je naziv web stranice. Ovo se prikaže na vrhu našeg browsera
</title>
</head>
<body>
 ovde se unosi sve ono što želite da se vidi na web stranici
</body>
</html>


HTML komentari se pisu <!------ komentar ------>
 ovi komentari nam dobro dođu kada imate puno koda. Npr kad imate neku zahtjevnu stranicu sa puno <div> tagova i da bi se bolje snalazili stavite komentare da znate za šta koji div tag služi.




Sada pocinjemo sa učenjem nekih osnovnih tagova


Naslovi
<h1>naslov</h1>
ova cifra može biti od 1 do 6 i označava veličinu naslova


Paragraf
<p>neki tekst... </p>


Novi red
Obilježava se sa <br>  i za njega ne postoji </br>


Razdvojna linija se obilježava <hr> i za njega ne postoji </hr>
<hr SIZE=4 WIDTH="50%">
size-debljina linije
width-sirina


eh sada pokušajte napraviti neku jednostavnu stranicu koristeći samo html




<html>
<head> <title>Moja prva stranica</title> </head> 
<body>
<h1>naslov velicine h1</h1>
<h2>naslov velicine h2</h2><!------ovo se neće vidjeti u browseru------>
<p> ovo je nas prvi paragraf<br>
pomoću taga br ovu recčnicu smo stavili u novi red
</p>
<hr size=5 width="40%">
<p align="center">ovo je naš drugi paragraf koji je centriran</p>
</body>
</html>


Ovaj kod snimite kao index.html i otvorite u vašem browseru i pogledate rezultat ako dodje do grešaka imate komentare.


U slijedećem tutorijalu cćmo se baviti listama (meni)









2 comments: