Hello World!
U ovom postu napokon počinjemo izradu sa našom prvom jako, jako jednostavnom web stranicom. Kod svakog učenja programskih i skriptnih jezika, običaj je započeti sa jedostavnom aplikacijom koja ispisuje "Hello World" na ekranu. Prateći taj običaj i mi ćemo napraviti isto.
Kreiranje prve stranice
Prvo trebamo otvoriti text editor i kreirati novi dokument. Pokazati ću primjer u Visual Studo Code-u.
Postupak:
- Otvorimo Visual Studo Code
- U gornjem lijevom kutu u izborniku kliknemo na "File"
- Nakon toga odaberemo odmah ispod "New"
Ako se ne možeš snaći, prikazano je na slici ispod. Još jednostavniji način je držanjem tipke ctrl na tipkovnici i klikom na slovo n (Ctrl+n).
Nakon kreiranja novog dokumenta, vrijeme je da napišemo i objasnimo par linija koda.
Napisati ćemo iduće u text editor:
<!DOCTYPE html>
<html lang="hr">
<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>Naziv stranice</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Ponovno u gornjem lijevom kutu odabiremo "File" i ispod toga pronađemo "Save as" (Ctrl+Shift+S) i odaberemo gdje folder ili mapu gdje ćemo spremiti datoteku koju smo upravo kreirali. U ovom primjeru to spremam na desktop ili radnu površinu u mapu tutor u kojoj je još jedna mapa sa nazovim helloworld. Na taj način ćemo se lakše snaći kada budemo kreirali novu web stranicu jer ćemo za jednu stranicu imati više datoteka. Datoteku spremamo kao index.html. Index naziv je tradicionalan naziv koji se jako često koristi iako naziv može biti i nešto drugo poput helloworld.html, a .html je nastavak, tako da kada budemo otvarali datoteku, web preglednik prepoznaje da je to HTML datoteka i da ju može otvoriti i prikazati. Na slici ispod je prikazano kako to izgleda.
Nakon što smo spremili datoteku kao index.html ili nekadatoteka.html, vrijeme je da to prikažemo u web pregledniku!
Prikaz prve web stranice
Datoteku možemo otvoriti na dva načina:
- Unutar samog preglednika datoteka
- Preko preglednika datoteka
Prikaz preko samog preglednika
Prvo trebamo otvoriti web preglednik i preko kratice na tipkovnici držati tipku Ctrl i pritisnuti slovo o (Ctrl+O). Nakon toga nam se otvara prozor preko kojega se moramo navigirati da dođemo do naše datoteke koju smo spremili. U mojem slučaju je to Desktop->tutor->helloworld mapa. Unutar toga vidimo datoteku index.html koju smo maloprije spremili. Možemo ju otvoriti sa dva brza klika na nju ili ju označimo i kliknemo "Open" ili "Otvori".
Prikaz preko preglednika datoteka
Druga metoda je da se otvori preglednik datoteka ili file manager. Ako koristiš Windows operacijski sutav, to je onda Explorer (nije isto kao i Internet Explorer). Nakon toga se ponovno otvori mapa u kojoj je naš kod i duplim brzim klikom miša , otvara se web preglednik sa našom prvom web stranicom. Ako to ne radi, drugi način je desni klik miša na index.html i odabir na "Open with" ili "Otvori sa" i trebao bi se pojaviti web preglednik koji koristimo. U ovom slučaju je Chromium koji je opensource vezrija Google Chroma i Firefox. Kliknemo na jedan od ponuđenih i treba se otvoriti web preglednik sa našom stranicom. Primjer kako se otvara sa drugim načinom je prikazan na slici ispod.
Napokon možemo vidjeti kako izgleda naša prva web stranica!
Krajnji rezultat treba biti kao i na slici ispod.
Ako ti se nije tako prikazalo, provjeri samo da nemaš nekakvu grešku u kodu. Također pripazi da ne koristiš nekakv stariji web preglednik kao što su Internet Explorer 9, pa niže ili stariju verziju Chrome-a ili Firefox-a. U idućem postu ćemo prijeći kod koji smo napisali i objasniti liniju po liniju koda i koja mu je uloga.
Primjedbe
Objavi komentar