Uvod u HTML 5

Ukoliko čitate ovaj post na mom blogu, vi već koristite Internet kao što Internet  koriste milijarde ljudi i kompanija u celom svetu svaki dan. Mnogi korisnici su totalno zavisni od Internet-a. Prvu stvar koju ste uradili, uključili ste se računar, tablet ili mobilni telefon, pokrenuli pregledač, otkucali validan URL i na vašem se pregledaču pojavio moj blog. Ili ste kliknuli na neki od mnogobrojnih linkova koji su vas doveli na ovu veb stranicu. Znači vi već poznajete osnovu kako da koristite Internet. Pretpostavljam da su vam čak i neki tehnički pojmovi poznati. Međutim, koristiti samo Internet i ono što drugi objavljuju nije uvek dovoljno. Jednostavno dođe vreme da i vi hoćete da naučite šta je Internet, kako funkcioniše i kako da i vi postanete osoba koja kodira, dizajnira veb stranice i svoju kreativnost objavljuje na Internet-u.

 ( HTML 5 standard podržava svaki noviji pregledač )

Internet je svetski sistem umreženih računarskih mreža. Još 1940 godine prvi put su prenošene instrukcije između računskih mašina, tj. tele-mašina za kucanje; 1964 godine su istraživači prvi put izumeli glavnu mašinu kojoj se pristupalo preko terminala koji su iskorištavali resurse glavnog računara. Međutim, za rođenje Internet-a se podrazumeva 1969 godina, kada je Ministarstvo odbrane SAD-a odobrilo projekat ARPANET – Advanced Research Project Agency Network za istraživanje i razvoj komunikacija i komandne mreže koja će preživeti nuklearni napad. Ovaj projekat je bio preteča današnjeg Internet-a  jer za razliku od Internet-a  kojeg upravo sad koristite  ARPANET je definitivno bio ograničen. Prva Internet mreža je stvorena za novu godinu, 1 januara 1983 godine kada je tadašnja tehnologija prešla sa protokola NPC – Network Control Protocol na protokol TCP/IP –Transmission Control Protocol/Internet Protocol koji se i danas koristi. Internet je svoje prvo predstavljanje javnosti doživeo 90-tih godina stvaranjem HTML protokola u Švajcarskoj. Ja sam prvi put koristio i uveo Internet u svoj dom 1999 godine u Srbiji i pre nego što sam imao predstavu o Internet-u, učio sam od najboljih hacker-a i bio sam deo ove priče. Posle sam i radio za tadašnji najbolji informatički časopis Internet Ogledalo. Ono što vi prvo treba da znate o Internet-u pre svega da je Internet hipertekstualni informacioni sistem, međuplatformski, distribuiran, dinamičan i što je najvažnije interaktivan. Niko ne poseduje ili kontroliše Internet ali postoje institucije poput W3C i velikih svetskih korporacija poput Google-a koji imaju itekako veliki uticaj na njegov sve veći rast i razvoj.

Kako Internet funkcioniše?

Kad se konektujete na Internet, da kažemo kad ste Online; vi koristite pregledač poput Google Chrome, Mozzila Firefox, Microsoft Edge, Microsoft InternetExplorer ili neki drugi. Vaš pregledač funkcioniše tako što na vaš zahtev, kada ukucate veb adresu; se povezuje sa veb serverima, preuzima sadržaj, pravilno formatira sve što je preuzeo i sve vam to servira i prikazuje kao veb stranicu. Vaš pregledač može prikazivati datoteke, preuzimati datoteke čak i kad ih ne prikazuje ili vam jednostavno omogućiti slanje i primanje elektronske pošte.

( Google Chrome je najzastupljeniji pregledač u svetu )

Svaka veb stranica vam je u suštini napisana na HTML – Hypertexst Markap Language i kao takva ona se uglavnom sastoji od veb sadržaja stranice koji je najčešće tekstualan, opisa njene strukture, linkovima prema drugim stranicama ili dokumentima; slikama ili drugim medijima. Međutim, različiti pregledači jednu te istu stranicu mogu prikazivati na različite načine. Zato uvek treba da koristite više pregledača posebno ako vi pravite i objavljujete veb stranice. Tada je neophodno vaše stranice testirati na što više pregledača.   

Šta su Veb Serveri?

Da pregledate sadržaj na Internet-u, vama nije potreban veb server, samo pregledač ali ako hoćete vi da objavljujete sadržaj tada vam je neophodan prostor na veb server-u kojeg možete zakupiti kod provajdera ili potražiti na Internet-u neki besplatan što ne preporučujem ukoliko mislite da pravite vaš veb projekat ozbiljno. Veb server vam je u suštini računar na kom se nalaze veb stranice. On je odgovoran za odgovaranje na zahteve svakog pregledača putem određenog porta; ulaza. Veb serveri rade mnogo više od opsluživanja datoteka. Oni izvršavaju i kod koji je namenjen da se izvršava na serveru, upravljaju ulaznim obrascima i pristupaju bazama podataka koji se takođe izvršavaju na serveru. Port za pristup veb serveru je 80. Svaki port ima svoj broj i IP adresu i svaka IP adresa je predstavljena brojem. Vi te brojeve ne morate pamtiti jer ih vidite ispisanu slovima kao veb adresu.

12.34.56.789:80  - broj 80 govori da se radi o veb serveru.

Vi sami možete od jednog običnog računara napraviti vaš lični server. Taj računar mora biti stalno uključen, imati stalno električan napon i kad vam nestane struja i mora biti online. Ako mene pitate, najbolje je da zakupite hosting kod lokalnog provajdera gde možete lično intervenisati ukoliko dođe do nekih komplikacija.

( Data centri uvek nude više paketa hostinga i veću sigurnost za vaš veb sajt )

Ono što vam je pored veb servera još potrebno je da imate statičku IP adresu kako bi ste mogli registrovati domen. Npr. moj domen na ovom blogu je manuelradovanovic.com i on se posebno zakupljuje recimo unapred na godinu ili dve godine dana. Takođe morate imati u vidu da različiti veb serveri rade na različitim platformama. To znači da ne možete postaviti vaš ASP.Net projekat kod provajdera koji ne nudi hosting za ASP.Net.

Šta je HTML ?

HTML – Hypertexst Markap Language je opisni jezik namenjen opisu veb stranica. To je jezik za označavanje što znači da pišete tekst vaše veb stranice i dodajete posebne tagove oko reči i pasusa.  Umesto da čitate tekst u dokumenta u linearnoj strukturi, hipertekst vam omogućava da jednim klikom prelazite sa jedne veb stranice na drugu ili na neku određenu tačku u dokumentu tako da bukvalno se kroz sadržaj veb stranice možete kretati do stvari koji vas interesuju u određenom trenutku. Hipertekst vam omogućava navigaciju i pregled veb sadržaja na nelinearan način i to ima svoje prednosti. HTML je podskup SGML-a – Standard General Markap Language. HTML se koristi za izgled veb sadržaja i uspostavljanja linkova. Vi jednostavno sa HTML jezikom pišete HTML dokumente, od prvog početnog; početna stranica; do zadnjeg i povezujete ih preko linkova sa drugim veb dokumentima. Svaki HTML dokument je tekstualna datoteka koja se sastoji od dva osnovna dela. Jedan u kom koristite HTML sintaksu; tagove < > ; kako bi ste opisali način na koji želite da prikažete sadržaj na veb stranici i sadržaj koji želite da prikažete. Tagovi označavaju različite delove stranice i različite efekte u pregledaču. Samo praktičnim pisanjem HTML dokumenata ćete shvatiti koliko je sve to jednostavno.

Šta vam je potrebno da bi ste učili HTML ?

Da naučite samo HTML i CSS – Cascading Style Sheets vam nisu potrebni neki veliki zahtevi. Većina računara i sa minimalnim performansama će zadovoljiti vaše potrebe. U principu vi možete koristiti bilo koji tekstualni editor poput Notepad-a. Međutim ja vam preporučujem da koristite bilo koji HTML editor poput Notepad++ -a. Zato što će pre svega vaš HTML biti čitljiviji, mnoge slovne greške će vam biti ispravljene automatski i zato što ćete biti produktivniji.

( HTML5 i CSS3 nisu dovoljni za izradu dinamičkog sajta )

Međutim, sajtovi se ne sastoje samo od HTML-a i CSS-a. Dinamični i profesionalni sajtovi se sastoje i od drugih programskih jezika. Npr. Ako ste vi C# programer, kompletno učenje HTML-a i CSS-a vam u suštini traje veoma kratko jer za većinu veb projekata je potrebno mnogo više kodiranja u JavaScript objektnog zasnovanog skriptnog jezika ili C# programerskog code-a koji će se izvršavati na veb serverima. Tada će vam biti potrebno pravo razvojno okruženje koje je zahtevno i prema računarskim performansama i prema najnovijem operativnom sistemu, čak i prema bazama podataka. S obzirom da sam ja Certified Developer Microsoft Technologies i koristim Microsoft-ove tehnologije ja ću isključivo koristiti najbolje programersko okruženje, Visual Studio 2017 Community koje možete i vi download-ovati i koristiti besplatno za učenje ukoliko vaš operativni sistem podržava taj IDE ili da potražite neku stariju verziju. Sve što uradite je sigurno bolje od jednostavnog tekstualnog editora.

Dosta teorije, Kreiranje vaše prve veb stranice

Pokrenite vaš HTML editor, kreirajte folder HelloWorld i u njega snimite *.html datoteku. Vi možete snimiti vašu datoteku i kao *htm datoteku ali vam to ne preporučujem. Datoteku nazovite index jer ona će biti početna stranica bez obzira što se sastoji samo od jedne datoteke. Uvek imajte u vidu da se sajt pravi i link-uje od početne stranice koju često nazivaju home ili index, kako bi se razlikovala od svih ostalih stranica. Imena stranica uvek trebaju da budu kratka i bez razlomaka ili specijalnih karaktera. Ukoliko koristite Microsoft Visual Studio okruženje, kreirajte novi Web site… izaberite ASP.Net Empty Web Site i nazovite ga HelloWorld. Zatim dodajte preko Solution Explorer-a novu HTML datoteku i nazovite je index. Ukoliko vaš HTML editor vam automatski ne otkuca sledeće tagove, otkucajte vi.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body>

</body>

</html>

Kao što vidite struktura svakog veb dokumenta se prvo sastoji od deklaracije dokumenta:

<!DOCTYPE html>

Ova deklaracija nam takođe govori da se naša HTML datoteka sastoji od HTML verzije 5 , inače deklaracija bi izgledala ovako:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Posle deklaracije uvek se prvo piše html otvoreni i zatvoreni tag koji označava da sve između ovih tagova je HTML code.

<html> </html>

Prva ugnježdena struktura koja ide posle html taga je otvoren i zatvoren tag head ili što programeri na Balkanu zovu tagovi zaglavlja. Između ovih tagova uvek stoje tagovi za naziv stranice; title i drugi tagovi koji opisuju sajt ali ništa između tagova zaglavlja se ne prikazuje na veb stranici. Upamtite da je svejedno da li tagove pišete malim ili velikim slovima. Tag za naziv veb stranice smatrajte obaveznim i svaka veb stranica treba da ima naslov stranice koji će se biti ispisan na tab-u pregledača. Možete imati samo jedan naziv veb stranice na jednoj veb stranici i između tagova title uvek koristite samo naslov stranice bez drugih atributa.

<head>

    <meta charset="utf-8" />

    <title></title>

</head>  

Otvoreni i zatvoreni tagovi za body nisu ugnježdeni u tagove zaglavlja, kao što su to tagovi za naziv stranice već pored. Međutim između otvorenog i zatvorenog body taga vi pišete druge tagove i atribute i sve što želite da se vidi na veb stranici kad se vaša veb stranica prikaže preko pretraživača.

<body> </body>

Otkucajte u vašu datoteku sledeći sadržaj:

<!DOCTYPE html> <!-- declaration the document html 5 -->

<html> <!-- the content of this document is html -->

<head> <!-- information about the page -->

    <meta charset="utf-8" /> <!-- unicode character encoding -->

    <title>My First Page</title> <!-- title on the tab of web browser -->

</head>

<body> <!-- the content which visible on the page  -->

    <h1>Hello World</h1> <!-- h heading tags in all 6 levels -->

    <h2>Hello World</h2>

    <h3>Hello World</h3>

    <h4>Hello World</h4>

    <h5>Hello World</h5>

    <h6>Hello World</h6>

</body>

</html>

Obratite pažnju na heading tagove koji služe da uvećaju ili smanje tekst. Postoji 6 nivoa h taga od najveće veličine slova h1 do najmanje h6 veličine. Heading tagove koristite kada hoćete da promenite veličinu teksta. Dok se komentari u HTML-u pišu ovako:

<!-- komentar -->

Napišite identično navedeni HTML tekst u vašu datoteku, pokrenite vaš HTML editor za prikaz veb datoteke ili ukoliko koristite tekstualni editor otvorite index.html u vašem pregledaču. Dobićete sledeće rezultat. Ukoliko ne dobijete identičan rezultat negde ste pogrešili.

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Kako to sve izgleda možete pogledati i na video-u:

 ( HTML5 & CSS3 - #1. Hello World )