Škola Web programiranja: HTML – 1.nastavak

Od ovog broja krećemo sa školom Web programiranja.

Prvo što ćemo učiti je HTML, a potom CSS, jer se danas jedan bez drugoga ne mogu zamisliti. Naime, HTML (HyperText Markup Language) je opisni jezik namijenjen za kreiranje internet sadržaja sa hipertekstom i ostalim informacijama koje se prikazuju u internet pregledniku (browser-u), dok nam CSS (Cascading Style Sheets) služi za definisanje stilova koji određuju izgled HTML elemenata (font, boje, pozadine, …). Znači, HTML će nam se brinuti o sadržaju web stranica, a CSS o njihovom izgledu.

Za praćenje lekcija naša preporuka bi bila da na vašim računarima imate instalirane sljedeće programe:

  • HTML editor (Dreamweaver ili  Notepad++ ili Windows Notepad)
  • Internet preglednike (Google Chrome, Internet Explorer, Mozilla Firefox, Opera…)

Za početnike su sasvim dovoljni besplatni programi: Notepad i Internet Explorer, koji se već nalaze na vašim računarima i uz to da sa interneta download-ujete besplatne internet browser-e: Google Chrome, Mozilla Firefox i Operu. Potrebno je da imate više browser-a kako biste mogli stalno provjeravati funkcionalnost vaše web stranice u svima njima. Nije rijetkost da se u različitim browserima različito prikazuje web sajt.

Prednost korišćenja Dreamweaver-a nad Notepad-om je u tome što će vam dijelovi koda biti drugačije obojeni i to programiranje čini lakšim, ali Dreamweaver nije besplatan program.

Krenimo sa konkretnim radom. Pokrenite Notepad program.

Ukucajte sljedeći tekst:

<HTML>
</HTML>

Ovo su HTML tagovi. Svi tagovi se pišu između “<” i “>” zagrada. Postoje početni i krajnji tag. Da bi ste napravili krajnji tag, samo dodajte / u početni tag. Veliki broj tagova ima i krajnji tag (ali ne svi!).
Tagovi nam služe za izdavanje naredbi internet browser-u. Unešeni tagovi <HTML> i </HTML> su ustvari ulazni i izlazni tag za svaku web stranicu. Naravno, između ćemo dodati još ponešto. Tagove možemo pisati velikim ili malim slovima, svejedno je.

U svakom HTML fajlu mora se naći i par HEAD tagova.

<HTML>
  <HEAD>
  </HEAD>
</HTML>

Prva stvar koja bi trebala da se doda u HEAD je naslov (TITLE) koji će se prikazati u naslovnoj liniji vašeg browser-a.

<HTML>
  <HEAD>
    <TITLE></TITLE>
  </HEAD>
</HTML>

Dobra je praksa da se ugniježdeni tagovi pišu uvučeno radi bolje preglednosti samom programeru, iako browser ne vidi nikakvu razliku pisali uvučen red ili ne.

Glavni dio HTML fajla nalaziće se između neophodnih BODY tagova.

<HTML>
  <HEAD>
    <TITLE></TITLE>
  </HEAD>
  <BODY>
  </BODY>
</HTML>

Jedna napomena vezana za naša slova – š,đ,č,ć,ž, kao i za ćirilicu. Da bi slova bila vidljiva neophodno je da u HEAD dijelu dodate liniju:

<meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8″>

Na kraju, dajte naslov vašoj web strani, dopišite pomenutu meta liniju i dodajte nešto u tijelo (body) fajla.

<HTML>
  <HEAD>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <TITLE>Moja prva web strana</TITLE>
   </HEAD>
   <BODY>
        Mala Web škola!
   </BODY>
</HTML>

Sada treba fajl snimiti, i to ne kao tekstualni (.txt), već kao HTML fajl (.html). Snimite ga kao index.html u neki novi folder.

Evo male pomoći za one kojima je potrebna: U Notepad-u kliknite na File, pa izaberite Save as. Otvoriće se prozor za dijalog. U polje File name upišite index.html (ili neko ime po vašem izboru, ali sa obaveznom ekstenzijom .html), u polju Save as type izaberite All Files(*.*), u polju Encoding odaberite Utf-8.
Kliknite na SAVE i to je to!

Kliknite dva puta na fajl koji ste napravili i pogledajte rezultat.

Ovo što ste napravili je samo skelet HTML fajla. On zasad sadrži samo najosnovnije stvari.

Ako hoćete da nastavite sa uređivanjem vašeg fajla u Notepad-u, kliknite desnim tasterom miša na fajl, pa na Open With->Notepad.

Da bi stvari izgledale jasnije, nadalje ću pisati samo <BODY> tag. Izostaviću sve <HTML>, <HEAD> i <TITLE> tagove. Naravno, podrazumijeva se da ćete ih vi pisati u svojim HTML fajlovima.

Kad god uradite neku promenu u vašem fajlu, snimite ga (File/Save, ili Ctrl+S na tastaturi), pa pritisnite dugme Reload/Refresh na browser-u, da biste videli najnoviju verziju.

H1-H6 Naslovi (Headings)

Naslovi su jako bitni. Posebno su bitni kod indeksiranja web sajtova od strane Google-a i ostalih web pretraživača. Ne treba ih koristiti za ostali tekst kako bi, recimo, bio veći ili podebljan, već samo za naslove. Naslove pišemo između tagova:

<h1> i </h1> ili

<h2> i </h2> ili

<h3> i </h3> ili

<h4> i </h4> ili

<h5> i </h5> ili

<h6> i </h6>

Primjer:

<BODY>
  <h1>Ovo je naslov1</h1>
  <h2>Ovo je naslov2</h2>
  <h3>Ovo je naslov3</h3>
</BODY>

Horizontalna linija

Sa tagom <hr /> kreiramo horizontalnu liniju. Ovaj tag nema svoj odgovarajući izlazni (krajnji) tag. Na prethodnom primjeru bi to izgledalo:

<BODY>
  <h1>Ovo je naslov1</h1>
  <hr />
  <h2>Ovo je naslov2</h2>
  <hr />
  <h3>Ovo je naslov3</h3>
</BODY>

Paragrafi

Paragrafe upisujemo između tagova <p> i </p>.

<BODY>
  <p>Ovo je paragraf</p>
</BODY>

Komentari

Komentare možemo umetati u kod kako bi nam ga učinili čitljivijim i jasnijim.

Browseri ignorišu komentare i ne prikazuju ih.

Komentare pišemo na sljedeći način <!–Komentar –>

Primjer:

<BODY>
  <!--Kao što ćete vidjeti komentar je nevidljiv-->
  <p>Samo ovaj tekst je vidljiv</p>
</BODY>

Novi red

Prelazak u novi red se može uraditi tagom <br />. Kada kucamo tekst unutar paragrafa bez obzira da li koristimo Enter za prelazak u novi red browser to neće pročitati. Zato moramo koristiti <br />. Primjetićete da se paragrafi i naslovi i bez ovog taga upisuju uvijek u novom redu i da se nakon njih ponovo stvara novi red.

Primjer:

<BODY>
  <!--paragraf bez koriscenja taga za novi red-->
  <p>Od mog prividjenja ti si cela tkana,
        tvoj plašt sunčani od mog sna ispreden.
        Ti beše misao moja očarana,
        simbol svih taština, porazan i leden.</p>
 <!--paragraf sa koriscenjem taga za novi red-->
 <p>Od mog prividjenja ti si cela tkana,<br />
        tvoj plašt sunčani od mog sna ispreden.<br />
        Ti beše misao moja očarana,<br />
        simbol svih taština, porazan i leden.</p>
</BODY>

Formatiranje teksta

Tagovi za osnovno formatiranje teksta dati su u tabeli:

Tag

Opis

<b>

Definiše podebljan tekst

<big>

Definiše uvećan tekst

<em>

Definiše istaknut tekst (najčešće u trenutnim browserima pokazuje italik, ali ga browser shvata sa većom važnošću)

<i>

Definiše iskošen-italik tekst

<small>

Definiše umanjen tekst

<strong>

Definiše pojačan tekst (najčešće u trenutnim browserima daje isti rezultat kao i tag <b>, ali ga browser shvata sa većom važnošću)

<sub>

Definiše smanjeni tekst, pogodan za indeksaciju, npr. za H2O

<sup>

Definiše tekst pogodan za prikaz stepena brojeva i sličnog, npr. x2

<u>

Definiše podvučen tekst

Uz sve ove tagove idu obavezno i njihovi izlazni tagovi!!!

Primjer:

<BODY>
  <big><strong>Formule iz matematike i fizike</strong></big><br /><br />
  <b><i><u>Sinteza etanola</u></i></b>
  <p> 2CO+6H<sub>2</sub>=C<sub>2</sub>H<sub>5</sub>OH</p>
  <b><i><u>Kvadrat trinoma</u></i></b>
<p>(a+b+c)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+c<sup>2</sup>+2ab+2ac+2bc </p>
</BODY>

Ovo je primjer ugniježdenih tagova. Ukoliko ćete koristiti kombinacije tagova (a sigurno hoćete), onda koristite ugniježdene, a ne preklopljene tagove. Primjer slijedi…

   <b><i></b></i>    preklopljeni tagovi…. loše
   <b><i></i></b>    ugnežđeni tagovi….
dobro

Stilovi (pozadina, fontovi, boje…)

Izgled sadržaja mijenjamo unutar atributa style=““. U starijim verzijama HTML-a radilo se na malo drugačiji način, ali mi ćemo učiti na ovaj, jer će nam ovo znanje jako dobro poslužiti kasnije kad pređemo na izučavanje CSS-a.

Da naučimo prvo kako promijeniti boju pozadine. Bijela boja je podrazumijevana, sve dok je vi ne promijenite u neku drugu. Boje se zapisuju u heksadecimalnom zapisu sa 6 cifara. Na primjer, bijela boja se zapisuje sa #ffffff, jer je to u rgb (red, green, blue) zapisu (255, 255, 255), a dekadni broj 255 je ff u heksadecimalnom zapisu. Tabelu nekih boja i njihovih heksadecimalnih zapisa možete pogledati u jednom od prethodnih brojeva u članku o Small Basic-u.

<BODY style="background-color:#e6e6fa">
     Sviđa li vam se ova boja pozadine?
</BODY>

Umjesto boje pozadine, možete koristiti i sliku (za početak je postavite u isti folder u kome vam je HTML fajl).

<BODY style="background-image:url(slika.jpg)">
   Prugasta pozadina
</BODY>

Slika koju smo koristili je .

Browser je sam shvatio da tu sliku treba stalno da ponavlja preko čitave stranice. Sa opcijama: background-repeat:no-repeat, background-repeat:repeat-x, background-repeat-y, pozadina se redom: ne ponavlja uopšte, ponavlja po x osi, ponavlja po y osi.

Ovo ćemo redom ilustrovati:

<BODY style="background-image:url(slika.jpg); background-repeat:no-repeat ">
   Prugasta pozadina
</BODY>

<BODY style="background-image:url(slika.jpg); background-repeat: repeat-x ">
   Prugasta pozadina
</BODY>

<BODY style="background-image:url(slika.jpg); background-repeat: repeat-y ">
   Prugasta pozadina
</BODY>

Fontovima takođe možemo odrediti stil, boju, veličinu, … Ovim osnovnim opisima fontova ćemo se baviti u HTML-u, a naprednijim u CSS-u.

Veličinu slova ćemo definisati u pikselima (u CSS-u ćemo pomenuti i em, za sad se nećemo time zamarati).

<BODY style="background-color:#9f336c">
  <h1 style="font-size:26px">Naslov</h1>
   <p style="font-size:20px">Tekst tekst tekst</p>
</BODY>

Stil možemo definisati za skoro sve tagove.

Podrazumijevana boja fonta je crna, ali i nju lako možemo promijeniti poput boje pozadine, ali sa opcijom color.

<BODY style="background-color:#9f336c">
   <h1 style="font-size:26px; color:#ff05ab">Naslov</h1>
   <p style="font-size:20px; color:#05ffab ">Tekst tekst tekst</p>
</BODY>

Vrstu fonta (font-family) biramo na sljedeći način:

<BODY style="background-color:#9f336c">
   <h1 style="font-size:26px; color:#0000ff; font-family:Times New Roman">Naslov</h1>
   <p style="font-size:20px; color:#05ffab; font-family:Arial">Tekst tekst tekst</p>
</BODY>

Veoma važno!!!
Font će se vidjeti samo ako posmatrač ima taj font instaliran na svom računaru! Ukoliko to nije slučaj, tekst će biti predstavljen podrazumijevanim fontom. Zato pažljivo sa fontovima!

Da bi se ovo djelimično prevazišlo, možete navesti više od jednog fonta:

<BODY style="background-color:#9f336c">
     <p style="font-size:20px; color:#05ffab; font-family:Arial, Helvetica, Verdana">Tekst tekst tekst</p>
</BODY>

Objašnjenje: Browser prvo traži font ARIAL. Ako ga nađe, koristi ga. Ako ne, onda traži sljedeći navedeni font – HELVETICA. Ako ga ne nađe, tražiće VERDANA. Ako na kraju ne nađe ni taj font, onda će koristiti podrazumijevani font.

Na samom kraju ove lekcije, želim sa vama podijeliti još jednu sitnicu. HTML kod bilo koje web stranice možete jednostavno vidjeti pritiskom na View/Source ili desnim klikom na samu stranicu, pa View Page Source. Znači, od HTML koda svakog sajta koji vam se dopadne dijeli vas samo par klikova mišem.

Pozdrav do sljedećeg broja!

Ovaj unos je objavljen pod Peti broj. Zabeležite stalnu vezu.

2 reagovanja na Škola Web programiranja: HTML – 1.nastavak

  1. Nemanja kaže:

    Kako da ubacim sliku iz moje facikle ?

  2. Veoma dobro pojasnjeno !

Ostavite odgovor

Popunite detalje ispod ili pritisnite na ikonicu da biste se prijavili:

WordPress.com logo

Komentarišet koristeći svoj WordPress.com nalog. Odjavite se / Promeni )

Slika na Tviteru

Komentarišet koristeći svoj Twitter nalog. Odjavite se / Promeni )

Fejsbukova fotografija

Komentarišet koristeći svoj Facebook nalog. Odjavite se / Promeni )

Google+ photo

Komentarišet koristeći svoj Google+ nalog. Odjavite se / Promeni )

Povezivanje sa %s