HTML za početnike – Lekcija 1
Kategorija: HTML/CSS, Tutoriali Autor: Pebas
Ovaj tutorijal je namijenjen početnicima i onima kojima treba podsjetnik za HTML.
Ukoliko se bilo ko odlučio da proba da napravi svoju web prezentaciju ili da objavi nešto na www-u (world wide web) upravo HTML je osnova bez koje se ne može. Neki ljudi će vam reći da je to jako teško i da se ne da lako naučiti. Ne obraćajte previše pažnju na njih.
Mogu samo da vam kažem da svako ko je probao da nauči HTML naučio ga je. Pod uslovom da zna da čita i piše naravno. Vjerovali ili ne samo to je dovoljno, da znate da čitate i da pišete. Dok budete čitali ovaj tutorijal I napredovali kroz HTML usput učite engleski. Jako će vam biti potreban kasnije da bi ste naučili CSS, PHP, JavaScript itd. Znači moj savjet vam je engleski učite pod obavezno!!! Za ovaj tutorijal vam ne treba engleski ali zašto ostati samo na HTML-u I ne unaprijediti sebe I svoje znanje u oblasti web dizajna I web programiranja?
Obično svi HTML tutorijali počinju od početka, odnosno “dave” sa doctype idt. Mi cemo to ostaviti za kraj. Ovaj tutorijal će početi od praktičnih stvari i pokušaću da objasnim najbolje što mogu upravo tu praktičnu stranu HTML-a!
Šta vam je potrebno da biste pisali HTML kod? Prvo vam je potreban Internet Explorer, Firefox, Opera , Safari ili Chrome (Netscape ako koristite nemojte više) I neki text editor. Evo nekih editora za tekst:
1.) Notepad (on dolazi uz svaki Windows)
2.) Notepad ++ (njega možete “skinuti” odavde , a dobar je jer vam u boji obeležava kod)
3.) Dreamveawer (program iz Adobe palete programa a njega možete “skinuti”…hmm…pardon, možete ga kupiti na zvaničnom Adobe sajtu)
Ima tu još dosta editora teksta ali ja bih vam preporučio za početak Notepad++.
Pa da počnemo!
STRUKTURA HTML-a
Svaki HTML ima svoju strukturu, a ona je jako važna i treba da je naučite. Kada je shvatite uvijek ćete je koristiti. Upravo HTML struktura pocinje sa Deklaracijom o tipu dokumenta (Doctype). O njoj cemo kasnije detaljnije učiti. Sada ćemo se osvrnuti na ovaj kod i usput ga objasniti:
1. <html>
2. <head>
3. <title>(ovde ukucajte ime vašeg budućeg sajta)</title>
4. </head>
5. <body>
6. Pozdrav svima!
7. </body>
8. </html>
(prepišite ovaj kod ili ga “copy/paste” u vas editor i sačuvajte ga kao index.html, naravno bez rednih brojeva i tačaka na početku svakog reda,onda kliknite dva puta na sačuvani index.html pa pogledajte šta se dešava u vašem pretraživaču)
Sada pogledamo i objasnimo kod:
1. Prvi red prikazuje početak svakog HTML dokumenta I obeležava se <html> tag-om. Znači uvijek svaki HTML dokument počinje ovakvim kodom i to nemojte zaboraviti.
2. Drugi red predstavlja početak,da ga tako nazovemo, GLAVE svakog HTML dokumenta i obeležava se <head> tag-om. Upravo između svakog <head> tag-a će se u budućnosti nalaziti informacije koje će pomoći tražilicama (google, yahoo itd.) da lakše pronađu vaš sajt. Takođe u okviru <head> tagova postavljaćete kasnije eksterne dokumente koji će služiti da vašu stranicu učine atraktivnijom i ljepšom.
3. Treći red predstavlja IME vašeg sajta i jako je važan. Zamislite sebe bez imena! Na koje ime biste se odazivali. Tako isto se vaš sajt neće odazvati na tražilicama jer ne zna kako se zove. Jednostavno je tako, postoje načini da se vaš sajt odazove i bez imena ali navikavajte se da vaš sajt uvijek ima svoje IME. Upravo to predstavljaju <title> tag-ovi, naziv vašeg sajta.
(U ovom slučaju ćete u tab-u vašeg browsera koji obeležava sajt vidjeti ime sajta koji ste ukucali u kodu. Ako nije baš najjasnije na šta sam mislio pokušajte da pronađete, ono što ste ukucali između<title> tagova u vašem kodu, na browseru kada pokrenete kod. Biće vam jasno o čemu se radi.)
4. Četvrti red </head> predstavlja kraj GLAVE dokumenta. Kasnije ćemo se osvrnuti na taj kod.
5. Peti red predstavlja početak TIJELA dokumenta i obeležava se <body> tag-om. Sve u tijelu dokumenta će biti kod koji će posjetioci vašeg sajta vidjeti na svom monitoru. Postoje razni načini da se ono što je u kodu ne vidi na vašem sajtu ali ćete polako učiti o tome u narednim lekcijama. Za sada je bitno da je upravo TIJELO odnosno <body> vašeg dokumenta osnovni prostor u kojem ćete praviti vaše sajtove, znači glavni dio sajta koji će posjetioci biti u stanju da vide na vašem sajtu upravo je u TIJELU vašeg koda.
6. Vaša prva HTML rečenica!
7. Ovaj </body> tag predstavlja kraj TIJELA dokumenta. Ispod ćemo i o ovom kodu više reći.
8. Takođe i </html> tag ćemo objasniti malo kasnije.
Upravo ste napisali svoj prvi HTML kod i nadam se da je bilo jako jednostavno razumeti strukturu svakog HTML dokumenta. Iz ove prve lekcije ste naučili da svaki HTML kod ima svoju strukturu.
Osim toga naučili ste da svaki HTML ima svoja pravila, a to je upravo da svaki HTML tag počinje ovakvim znakovima „< >“ i sve zajedno do izgleda recimo ovako <p>, <h1>, <body> itd. Takodje ostao sam dužan da objasnim par redova koda ali ovo je uvod i upravo ste naučili kako počinju HTML tagovi. E sada da pojasnim preskočene redove u kodu iznad. Svaki HTML tag se završava ovakvim znakovima „</>“ , a sve zajedno to izgleda </p>, </h1>, </body> itd. Znači svaki započeti HTML tag mora se završiti.
ZAPAMTITE ako smo započeli ovaj tag za paragraf <p> moramo ga završiti ovako </p>. To ovako izgleda <p>Ja sam Petar Petrovic</p>. Znači to važi za svaki tag u HTML dokumentu. Ima par tagova koji se završavaju drugačije ali o tome ćemo kasnije u nekim drugim lekcijama.
Nadam se da nije bilo jako nejasno. Do sledeće lekcije počnite da učite engleski i lagano pregledajte ovaj sajt:
(11)
