OSNOVE HTML-a

Nakon što ste se na upoznali sa različitim veb tehnologijama, vreme je da stečena znanja primenite u praksi. Danas ćete kreirati svoje (nekima od vas prve) veb stranice pomoću HTML-a.

Podsetnik: HTML je jezik za opis dokumenata. Osnova za kreiranje veb stranice je poznavanje opisnog jezika HTML (HyperText Markup Language). HTML služi za izradu stranice a izgled se definiše pomoću CSS-a. Sve što je potrebno za početak imate na Vašem računaru a to je tekst editor (Notepad) i Web browser koji već imate. HTML se generiše uz pomoć tzv. tagova. Svaki tag počinje zagradom „<“ i završava sa „>“ (bez navodnika). Svaka HTML strana se sastoji od početnog <html> i završnog </html> taga.

Na tržištu postoji veliki broj aplikacija – alata za kreiranje veb stranica, koji značajno olakšavaju kreiranje standardnih elemenata, i automatski generišu potrebni HTML kod. Iako izrada kompletnog sajta pomoću HTML-a zahteva dobro poznavanje HTML-a i može biti veoma zamorna, izrada veb strana zahteva poznavanje ovog jezika.

Za kreiranje i editovanje HTML strana ćemo koristiti najjednostavniji editor teksta Notepad jer postoji u svakom Windows-u. (može i neki drugi tekst editor da se koristi)

HTML jezik se sastoji od određenog skupa standardnih oznaka (eng. tag). Ovde ćete se podsetiti nekih najosnovnijih tagova i strukture HTML dokumenta pre nego počnete samostalnu izradu veb prezentacija.

Sve oznake se nalaze u okviru znakova veće i manje (< i >) i mogu imati neke dodatne atribute.

primer: oznaka koja označava podebljani (eng. bold) tekst je <b>
i uvek treba da ide u paru sa oznakom za kraj podebljanog teksta </b>.

<b>a ovo je podebljani tekst.</b>

Mnoge oznake (ali ne sve) imaju početni i završni deo – oznaku, kao što je navedeno u prethodnom primeru.

Pokrenite Notepad editor – ako ne možete da ga pronađete, kliknite na dugme Start, opciju Run i u otvorenom dijalogu otkucajte Notepad i kliknite na dugme OK.

 

primer:

U otvorenom editoru otkucajte sledeći tekst:

<h1>Moja prva Web strana</h1>

<hr>

<b>Autor:</b>

Vaše ime i prezime

Snimanje html datoteke

Nakon što ste uneli tekst jako je važno ispravno snimiti datoteku. Datoteka se snima komandom Save As… iz menija File.

–        u Save in: padajućoj listi izaberite direktorijum u kojem želite da sačuvate datoteku.

–        u File name: unesite ime datoteke sa ekstenzijom .htm (npr. default.htm )

–        u Save as type: padajućoj listi izaberite All Files (obavezno)

–        i konačno u Encoding: padajućoj listi izaberite Unicode

Univerzalni Unicode standard će ispravno snimiti i prikazati bilo koji set svetskih pisama.

Kada ste ispravno sačuvali datoteku, možete pogledati kako ona izgleda u veb pretraživaču (otvaranjem iz nekog veb pretraživača ili dvostrukim klikom na ime datoteke).

Ukoliko želite da nastavite rad na veb strani, potrebno je ponovo otvoriti datoteku uz pomoć nekog tekst procesora (u našem slučaju Notepad). Kao što već znate ovo može da se uradi na više načina…🙂

Oznaka <h1> označava da tekst treba prikazati kao naslov (heading) najveće veličine sve do zatvarajuće oznake </h1>.

Po HTML specifikaciji postoji šest veličina naslova od <h1> (najveći), do <h6> (najmanji) naslov.

Oznaka <hr>  nema zatvarajući deo i označava horizontalnu liniju koja je (u ovom slučaju) široka koliko i prozor web pretraživača. Ova oznaka ujedno pravi i novi red.

Oznaka koja predstavlja nov red je <br> (eng. line break), odnosno <br />

 

primer: <b>Autor:</b><br />

Veb pretraživač je zapravo interpretator HTML koda. Učitava ga liniju po liniju i interpretirajući HTML oznake formatira veb stranu. Osim ovakvog formatiranja strane, web pretraživač  ima još puno mogućnosti, kao što je izvršavanje skripti koje se takođe nalaze u okviru veb strane.

Ako želite da napravite veb sajt koji će se ispravno prikazati i indeksirati od strane poznatih mašina za pretraživanje, neophodno je korektno formirati sve HTML strane.

Osnovna struktura HTML strane izgleda ovako:

<html>

<head>

<title>Naslovna strana</title>

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

<meta name=“keywords“ content=“Ključne reči po kojima će se strana indeksirati“>

<meta name=“description“ content=“Ovo je opis sadrţaja naslovne strane.“>

</head>

<body>

</body>

</html>

Ispravno formatiran HTML dokument počinje sa oznakom <html> i završava sa </html>. Unutar ove oznake se nalazi kompletan sadržaj strane, uključujući i eventualne skriptove.

Sekcija <head> (zaglavlje strane) sadrži informacije koje su specifične za tu stranu.

Oznaka <title> (naslov) se koristi za naslov strane koji će biti prikazan u veb pretraživaču i završava se oznakom </title>.

Ukoliko želimo da naša veb stranica bude pronađena od strane većine poznatih mašina za pretraživanje koristićemo ključne reči (kewords)

primer:

<meta name=“keywords“ content=“škola, Beograd, informatika, kompjuteri, računarske mreže, programski jezici“>

Slike na veb strani se definišu oznakom <img> sa sledećim atributima:

–        src – predstavlja lokaciju slike.

–        alt – opcioni atribut koji se ispisuje ako je korisnik onemogućio prikaz slike u svom veb pretraživaču.

 

primer:

<img src=“gitara.gif“ alt=“Slika gitare“>

Linkovi na Web strani se prave pomoću <a> oznake (a je skraćeno od anchor – sidro). Atributi ove oznake su:

–        href – (hyperlink reference) koji označava lokaciju na koju se preusmerava Web pretraţivač kada korisnik klikne na link.

–        target – označava na koji način će se otvoriti ovaj link.

primer:

<a href=“http://www.microsoft.com&#8220; target=“_blank“>Link za Microsoft Web sedište</a>

Izrada veb strana može da počne!🙂

Dodatne informacije o izradi veb strana možete potražiti na:

OSNOVNI Ragetov tutorijal (HTML 4.01 Tutorial)  http://www.w3.org/MarkUp/Guide/

NAPREDNI Ragetov tutorijal (HTML 4.01 Tutorial) http://www.w3.org/MarkUp/Guide/Advanced.html

Ovaj unos je objavljen pod Internet, Izrada veb stranica i označen sa , , . Zabeležite stalnu vezu.

2 reagovanja na OSNOVE HTML-a

  1. Povratni ping: Zadaci iz HTML-a | Računarstvo i informatika

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