HTML za početnike – Lekcija 2
Kategorija: HTML/CSS, Tutoriali Autor: Pebas
Ovo je druga lekcija iz serijala HTML za početnike.
Videli smo i naučili u prethodnoj lekciji strukturu HTML dokumenta i naučili smo kako počinje i kako se završava svaki HTML tag. U današnjoj lekciji obradićemo upravo te HTML tag-ove. Krenućemo od onih jednostavnih pa do onih složenijih.
Prvo ćemo se okrenuti tag-ovima koji su vezani za sam tekst, odnosno one HTML tag-ove koji obrađuju tekst u HTML kodu. Postoji dosta načina da obradite vaš tekst u HTML kodu, da mu dodate boju, veličinu, debljinu, da odvojite redove, da ubacite razmak, da slova budu italicizarana itd. Praktično mogućnosti su neograničene, ali da biste sve to mogli potrebno je da naučite nekoliko osnovnih tag-ova koji obrađuju tekst na vašoj HTML strani. Pa da počnemo!
Tag <p></p>
Upravo je ovo osnovni HTML tag za tekst i zovemo ga paragraf tag. Paragraf predstavlja prije svega određen dio teksta koji je vezan za glavni pojam, cjelinu itd. Znači sa njime obrađujete dio teksta na vašoj stranici. Koristićete ga bezbroj puta i važan je da ga u potpunosti savladate. A zaista nije teško vidjećete! Takođe zapamtite jer će vam valjati da je po default-u vaš <p>Neki tekst</p> veličine 12pt! Ovo napominjem samo zbog sledećih lekcija koje slijede i nekih drugih tagova tako da se za sada ne opterećujte puno sa tim ali zapamtite to.
Da bismo napisali nesto na u HTML kodu, a da se to verno prikaže na vašoj web stranici koristite <p> Neki tekst! </p>, odnosno paragraf tag. Sa svakim završenim </p> tag-om i započetim novim počinje novi red teksta ali bez razmaka između istih paragrafa! Najbolje da pokažemo primjer da bi vam bilo jasnije. Sve zajedno bi to izgledalo ovako:
<html>
<head>
<title>Tagovi za obradu teksta</title>
</head>
<body>
<p>Ja sam Petar Petrović i ovo je paragraf tag kojim se obeležava paragraf u HTML kodu</p>
<p>Ovo je drugi paragraf,a između prvog i drugog paragrafa nema prostora, zar ne? Da, nema prostora!</p>
</body>
</html>
(prepišite ovaj kod u vaš editor i pokrenite ga u svom browseru)Eto upravo ste napisali svoje prve tekstove sa <p> tag-om! Jednostavno je.
Upravo iz ovog primjera vidite da nema razmaka, odnosno prostora između paragrafa. Da bismo dodali prostor između paragrafa koristimo tag <br />.Da, upravo ovaj tag nema svoj završni tag </br> nego je ovo <br /> sve što treba da ukucate u svoj kod da bi dodali razmak između redova. Ukoliko ste dobro savladali prvu lekciju vidjeli ste da smo naučili da nekoliko tag-ova u HTML kodu nema završni tag </>. Upravo <br /> tag,tag za dodavanje prostora između redova je jedan od njih!
Ajmo sada da vidimo kako to izgleda u HTML kodu, da razdvojimo malo naše paragrafe:
<html>
<head>
<title>Tagovi za obradu teksta i razmak između redova</title>
</head>
<body>
<p>Ja sam Petar Petrović i ovo je paragraf tag kojim se obeležava paragraf u HTML kodu</p>
<br />
<p>Ovo je drugi paragraf, a između prvog i drugog paragrafa nema prostora, zar ne? Ne! Izgleda da ima sa tag-om za dodavanje prostora!</p>
</body>
</html>
(znate već da treba ovaj kod iznad da prepišete ili copy/paste u editor, da ga sačuvate kao index.html i da ga pokrenete)
I eto! Dobili smo razmak između naših redova. Zaista je jednostavno. Ukoliko želite više razmaka između vaših redova…hmm…pokušajte da pogodite šta treba da uradite? Pa da, dodajte više <br /> tag-ova između paragrafa! Takođe ukoliko želite da prekinete neki red usred rečenice i započnete novi red možete sa <br /> tag-om, vaš kod će i dalje biti validan! Sa drugim tagovima je to drugačije ali o tome ćemo kasnije. Evo primjera za prethodno napisano:
<html>
<head>
<title>Tagovi za obradu teksta i razmak između redova u rečenici i između redova</title>
</head>
<body>
<p>Ja sam Petar Petrović i ovo je paragraf tag kojim se obeležava paragraf u HTML kodu.<br /> Ovaj red je odvojen i započet kao novi!</p>
<br />
<p>Ovo je drugi paragraf, a između prvog i drugog paragrafa nema prostora, zar ne?Ne! Izgleda da ima sa tag-om za dodavanje prostora!</p>
</body>
</html>
Sada vam je jasnije na šta sam mislio.
Znači zapamtite da vaši programi na vašem kompjuteru nisu jako pronicljivi. Pa isto tako nije ni HTML kod. Ako želite da on nešto uradi morate da mu date komandu koju on razumije da bi vas poslušao. Drugim riječima, na primjer ne možete pritiskati enter i očekivati da se razmak sam od sebe pojavi u vašem browseru kada pokrenete HTML kod. Recimo Word bi vas poslušao ili notepad ili neki tekstualni editor ali HTML vas ne bi razumeo. Zato se navikavajte na komande koje će vaš HTML kod da razumije da bi bilo sve uredu kada isti kod pokrenete u browser-u.
Možda bi najbolje bilo da zamislite da je HTML vaš program koji razumije sve ali na njegovom jeziku. Pošto definitivno nismo u mogućnosti još uvijek da mi njega naučimo srpskim jezikom jedino što preostaje je da se prilagodimo I naučimo njegovim jezikom da govorimo i biće sve kako treba!
Tag <h1></h1>
Složićemo se da sve što se ikada napisalo ima svoj naslov pa tako i neki vaš tekst. Recimo i ovaj naš tutorijal ima naslov HTML LEKCIJE ZA POČETNIKE! Ovo je osnovni tag za naslov neke teme i ima ih ukupno šest. Ajde da pogledamo primjer i biće vam jasnije:
<html>
<head>
<title>Tagovi za obradu teksta isa naslovima</title>
</head>
<body>
<h1>Naslov H1</h1>
<h2>Naslov H2</h2>
<h3>Naslov H3</h3>
<h4>Naslov H4</h4>
<h5>Naslov H5</h5>
<h6>Naslov H6</h6>
<p>Ovo iznad su sve naslovi!</p>
</body>
</html>
(prepišite,sačuvajte i pokrenite kod)
Eto vidite zašto sam napomenuo da je <p> paragraf po default-u 12px veličine fonta! Naslovi su monogo veći, <h1> tag je po default-u 24pt,<h2> je 18pt itd.
Upravo ove tag-ove možemo okarakterisati kao naslove neke teme poslije koje ide sadržaj koji se obično nalazi između <p></p> tag-ova. Pitate se pa šta će nam <h1> tag za naslov kada ja mogu da povećam i veličinu fonta <p> taga i tako riješim sve probleme? U pravu ste da možete i tako da uradite ali niste u pravu da ste riješili sve probleme sa tim. Tražilice (google,yahoo,msn) bez <h1>,<h2> itd. tag-ova neće znati šta da izdvoje kao važan element sa vaše web strane! Ajde da vam ja kažem da mi pronađete i pročitate određenu temu iz dnevnog lista recimo “Politika”, a da se u njoj ne koristi nijedan naslov, ni zadebljani fontovi ni nikakva razlika u tekstu odpočetka do kraja dnevnog lista. Pa to bi trajalo i trajalo zar ne? Jasno je da ima razlike kada već dođemo i pogledamo vašu web stranicu tako kodiranu ali tražilice su isto oni programi čijem jeziku moramo da se prilagodimo i da kada one posjete našu stranu razumeju šta je važno i da to izdvoje da bi se neko drugi lakše snašao i lakše pronašao naš sajt! Upravo ukoliko na vašem sajtu postoji svih šest tagova za naslov sa šest različitih tema tako će tražilice da poređaju u njihovoj memoriji (sjećanju) njihovu važnost!
Nadam se da vam je jasno zašto su upravo tag-ovi za naslove važni!
Eto danas smo naučili koji su tag-ovi jako važni za obradu teksta i koji tag-ovi se koriste za naslove u tekstu i upopšte važnost tih tag-ova. Takođe smo naučili i kako odvojiti prostor između teksta u HTML kodu.
Nikada nemojte kucati svoj tekst bez paragrafa odnosno bez HTML tag-ova za paragraf i naslove ! Recimo <p>Neki tekst</p> uvijek ovako kucajte tekst! Ako se pitate zašto kada se moj tekst vidi i bez paragrafa u browser-u? Upravo zato što kasnije ukoliko budete pisali bez paragrafa nećete moći da obrađujete taj tekst! Nećete moći da mu odredite boju, veličinu,razmak itd. Zato zapamtite da se svaki tekst koji pišete uvijek mora nalaziti između <p></p> tag-ova. Ima izuzetaka kao za linkove i još par tekstualnih sadržaja ali 99% teksta se nalazi između <p> </p> tag-ova. Takođe zapamtite važnost <h1>,<h2>,<h3>,<h4>,<h5>,<h6>, tag-ova.
Eto to bi bilo sve za današnju lekciju i nadam se da je bila laka za shvatiti!
Pozdrav do sledeće nedelje!
(9)
Lepo objasnjeno svaka cast.
samo mislim da fale neki prakticni primeru, barem kao slike.
Bice i slika.
Jos uvijek se sajt sredjuje,ovo nije finalna verzija pa samo malo strpljenja i bice tutorijali sa slikama takodje.
U svakom slucaju hvala Saledesign.