Uvod u HTML5, oslobodite vašu kreativnost

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.

 ( HTML5 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. 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 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 je posebno zakupljen 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. Za što jednostavnije učenje HTML-a i CSS-a, mi ćemo koristiti Visual Studio Code integralno razvojno okruženje. Sve što uradite je sigurno bolje od jednostavnog tekstualnog editora. Ukoliko je Visual Studio Code i vaš izbor, onda je svejedno koji ćete operativni sistem koristiti. Pogledajte kako se instalira Visual Studio Code.

( Windows - 1. How to install Visual Studio Code & .Net Core ?)

Naravno, možete pogledati video i kako se Visual Studio Code instalira na Ubuntu, Linux operativnom sistemu.

( Linux - 2. How to install Visual Studio Code and .NET Core ?)

Kreiranje vaše prve veb stranice

Pokrenite vaš HTML editor, kreirajte folder html_css_tutorial 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 lesson1 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, ali ne pravimo početnu stranicu nego prvu lekciju. Zatim, ukoliko koristite Visual Studio Code, instalirajte sledeće ekstenzije. 

• HTML Boilerplate
• HTML CSS Support
• IntelliSense for CSS class names in HTML
• Format HTML in PHP
• Prettier - Code formatter
• vscode-icons
• Live Server

Zatim otkucajte sledeći kod:

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

<html lang="en"> <!-- the content of this document is html and language is English -->

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

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

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

</head>

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

   

    <!-- h heading tags in all 6 levels -->

    <h1>Hello World</h1>

    <h2>Hello World</h2>

    <h3>Hello World</h3>

    <h4>Hello World</h4>

    <h5>Hello World</h5>

    <h6>Hello World</h6>

   

</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 uglavnom 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">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>My First HTML5 Page</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>

Pogledajte ledeći sadržaj:

 <body>

    <h1>Hello World</h1>

    <h2>Hello World</h2>

    <h3>Hello World</h3>

    <h4>Hello World</h4>

    <h5>Hello World</h5>

    <h6>Hello World</h6>

   

</body>

</html>

Heading tagovi 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. Što se tiče HTML-a, u njemu postoji samo jedna vrsta komentara i to višelinijskog; koji se koristi i kao jednolinijski. Komentari u HTML-u pišu se ovako:

<!-- komentar -->

Kada pokrenete Live Server; dobićete u pretraživaču 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 )

Vašu malu HTML5 stranicu možete testirati i na drugim pretraživačima tako što ćete kopirati i past-ovati link kad se veb stranica prikaže u potpunosti. Najpopularniji pretraživači su definitivno Google Chrome, Mozzila Firefox i Microsoft Edge. Zato testiranje vaših ozbiljni veb projekata uvek trebate testirati od njih. Pa tek onda testirati na drugim manje zastupljenim. Zato trebate imati instalirana sva tri pretraživača. Ukoliko nemate; pogledajte video kako se instalira Google Chrome .

 ( Windows - 18. How to install Google Chrome Web Browser? )

Pogledajte video kako se Google Chrome instalira na Ubuntu, Linux operativnom sistemu. 

 ( Linux - 16. How to install Google Chrome Web Browser? )

Što se tiče pretraživača Mozzila Firefox-a; on je po pitanju većine Linux distribucija default pretraživač i već je instaliran u Linux operativnom sistemu pa ga verovatno nećete morati da instalirate. To se takođe odnosi na Ubuntu. Ali kad je u pitanju Windows operativni sistem; pogledajte u video-u kako se instalira.

( Windows - 22. How to install Mozilla Firefox ? )

Pored najboljih; Google Chrome-a i Mozzila Firefox-a; često se koristi i popularna Opera pretraživač. Kod njega; pored surfovanja možete obavljati i druge Internet poslove poput slanja i primanja email-ova. Veoma je brz. Pogledajte u video-u kako se instalira.

( Windows - 22. How to install Mozilla Firefox ? )

Ukoliko koristite Linux operativni sistem.

( Linux - 18. How to install Mozilla Firefox ? )

Ukoliko ste zainteresovani da znate i kako će vaše veb stranice da izgledaju na MacOS računarima; vi možete instalirati i Safari pretraživač. Pogledajte u video-u kako se to radi.

( Windows - 24. How to install Safari ? )

I pored toga što ne postoji Safari pretraživač za Linux  distribucije, ipak ga je moguće instalirati na Linux operativni sistem preko Wine-a ili PlayOnLinux. Pogledajte u video-u kako se instalira na Ubuntu. 

( Linux - 19. How to install Safari ? )

I za kraj da ne zaboravimo ono što vi imate već instalirano na Windows operativnom sistemu. Naravno, čuveni pretraživač Microsoft Edge. Na Windows operativnom sistemu je on default pretraživač ako to niste promenili u settings-u a što se tiče Linux operativnog sistema, prosto je neverovatno kako se lako instalira. 

( Linux - 20. How to install Microsoft Edge ? )