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.
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? )
( 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 ? )
( 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.
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 ? )
Nema komentara:
Objavi komentar