P R O G R A M I R A N J E Z A I N T E R N E T Lab. vježba 2 PROGRAMIRANJE ZA INTERNET Upute za laboratorijske vježbe (izradio: Marin Bugarić, Frano Rezo) Uvod u HTML 1
Općenito o HTML-u HTML - Hyper Text Markup Language H T M L T A G O V I H ypertext Markup Language, odnosno HTML je centralni jezik za izradu internetskih stranica. Iako se radi o markup jeziku (hrv. označnom jeziku), bez HTML-a nije moguće kreirati web stranicu. Prvi put se pojavio 1991. godine, da bi se kroz povijesni razvoj danas HTML poistovjetio s HTML5, posljednjom verzijom koja je trenutno podržana u svim modernim web preglednicima. Pomoću HTML-a se definira struktura web stranice slaganjem elemenata koji su definirani oznakama, tj. tagovima (eng. tags). Tagovi - naredbe za oblikovanje stranice. Sastoje se od znakova < i >, te naziva taga koji se nalazi između njih i piše se malim slovima. Tagovi u većini slučajeva dolaze u paru, pa se zbog toga nazivaju otvarajući i zatvarajući tag (Slika 1). Slika 1. Otvarajući i zatvarajući tag Funkcionalnost tagova se odnosi na sadržaj koji se nalazi između otvarajućeg i zatvarajućeg taga. Sadržaj može biti običan tekst, ugniježdeni (eng. nested) tagovi, a može i ne postojati. Upravo zbog toga treba biti oprezan i voditi računa o tome što je i na koji način obuhvaćeno sadržajem, te pripaziti da se ne zaboravi zatvarajući tag. Postoje iznimke kada tag nema svoj odgovarajući zatvarajući tag. Potrebno je takve tagove prepoznati i znati ih koristiti. Ukoliko se želimo držati HTML5 standarda i pravila, takve takove moramo pisati na način da prije znaka veće od ( > ) dopišemo kosu crtu ( / ). To je najbolje vidjeti na primjeru taga kojim se označava prelazak u novi red: <br /> Popis svih tagova možete pronaći na sljedećem linku: http://www.w3schools.com/tags/default.asp
Osnovni dijelovi HTML stranice E L E M E N T HTML element individualna komponenta HTML-a koja se sastoji od otvarajućeg i zatvarajućeg taga, te sadržaja između njih (Slika 2). Slika 2. HTML element S T R U K T U R A Struktura HTML dokumenta je definirana je skupom više HTML elemenata. Na slici 3 je prikazan primjer strukture jednostavne HTML stranice gdje je bijelim okvirom označen dio web stranice koji nam je vidljiv. Slika 3. Primjer jednostavne HTML web stranice Rezultat prethodnog primjera se može vidjeti na slici 4 (web preglednik: Chrome). Slika 4. Rezultat primjera jednostavne HTML web stranice 3
Naravno, web preglednik nam neće prikazati tagove <body> i <h1>, već samo njihov sadržaj što je u ovome slučaju tekst Hello World. Za takvu pretvorbu i prepoznavanje tagova i njihovog značenja je upravo zaslužan markup jezik. Glavni elementi s prethodne dvije slike su definirani u nastavku. D O C T Y P E < H T M L > < H E A D > <!DOCTYPE html> - nije tag, već deklaracija koja govori web pregledniku o kojem se tipu dokumenta radi. Uvijek se definira samo jednom i to na početku HTML dokumenta. Oznaka html definira da se radi o posljednjoj verziji HTML5. - temeljni HTML element koji predstavlja cijeli dokument. Obuhvaća cjelokupni sadržaj web stranice koji se nalazi unutar <head> i <body> elementima. <head> - sadrži informacije (metapodatke) o HTML dokumentu. Ovaj dio se prvi učitava u pretraživač i ne prikazuje se na web stranici. Najčešći tagovi unutar 'head' dijela su: <meta>, i <link> (ne zatvaraju se), te <title>, i <script> (zatvaraju se). <title> definira glavni naslov dokumenta i prikazuje se u tabu, npr. <title>ovo je naslov dokumenta</title> <meta> - razne informacije o dokumentu koje koriste pretraživači, npr: <meta name="keywords" content="html,css,xml,javascript" /> ključne riječi <meta charset="utf-8" /> za korištenje hrvatskih znakova <meta http-equiv="refresh" content="0; URL=http://www.a.hr/ " /> koristi se ukoliko stranica sadrži informacije koje se mijenjaju (dinamički generirane stranice). Također se koristi za automatsko preusmjeravanje na neku adresu <script> - za uključivanje skripti, npr. JavaScript koda <link> - koristi se za uključivanje vanjskog CSS-a. Primjer: Više o <head>-u možete pronaći na sljedećem linku: https://www.w3schools.com/html/html_head.asp <head> <title>naslov moje stranice</title> <meta charset="utf-8" /> <script src="mojaskripta.js"></script> <link type="text/css" href="mojstil.css"> </head> B O D Y <body> - definira tijelo HTML dokumenta, i unutar njega se nalazi cijeli sadržaj HTML dokumenta poput teksta, hiperlinkova, slika, tablica, lista. 4
Atributi, entiteti i preglednost A T R I B U T I Osim tagova, važno je naučiti i što su atributi. Atributi su određena svojstva tagova kojima možemo detaljnije objasniti ili definirati funkcionalnost određenog taga. Uvijek se definiraju u otvarajućem tagu, a sastoje se od: naziva i vrijednosti. Primjer atributa se može vidjeti na slici 4: Slika 4. Primjer atributa HTML elementa U ovom slučaju atribut je href, koji služi kako bi definirao web lokaciju na koju vodi klik na tekst Link. Postoje globalni atributi u HTML-u koji se mogu primijeniti na sve tagove. Također, postoje i specifični atributi koji se mogu koristiti isključivo sa određenim tagovima. Popis svih HTML atributa je dostupan na sljedećem linku: https://www.w3schools.com/tags/ref_attributes.asp E N T I T E T I Entiteti naredbe koje su nužne za ispis posebnih znakova. Entiteti se pišu sa znakom &, a kao primjer možemo uzeti ispis znaka copyright : Popis entiteta možete pronaći na sljedećem linku: http://www.w3schools.com/html/html_entities.asp P R E G L E D N O S T Već na prethodnim, najjednostavnijim primjerima, jasno je kako nije jednostavno voditi računa o otvorenim i zatvorenim tagovima. Stoga je dobra praksa prilikom pisanja svakog novog taga, odmah i zatvoriti isti u sljedećem retku. Također, svaki ugniježđeni tab mora biti uvučen, kao što je to i vidljivo u sljedećem primjeru, kojim je objašnjen postupak stvaranja tagova. </html> Preglednost koda vaše stranice je bitna! <head> </html> <head> </head> </html> NAPOMENA: Ponekad se radi jednostavnosti i preglednosti otvarajući i zatvarajući tag pišu u istom retku, ali samo u slučaju da je sadržaj između kratak ili ga nema. 5
Ostali dijelovi HTML stranice F O R M A T I R A N J E T E K S T A <h1> - Naslovi, h1 - najveći naslov, postoje manji - do h6 <p> - označava paragraf <em> - označava naglašeni tekst <b> - ispis podebljanog teksta <i> - ispis kosog teksta <small> - umanjeni tekst <sub> i <sup> - indeksindeks i eksponenet eksponenet <pre> - preformatiran tekst - ne uklanja suvišne razmake <br /> - prijelaz u novi red <hr /> - crta horizontalnu liniju Više o formatiranju teksta možete pogledati na: http://www.w3schools.com/html/html_formatting.asp P R I K A Z S L I K E <img /> - primjer za prikaz slike: <img src="./images/profil.jpg" alt="slika profila" width="24" /> Atributi koji se koriste s ovim tagom su: o src OBAVEZAN lokacija slike o alt OBAVEZAN Alternativni tekst koji opisuje sliku o height Visina slike o width Širina slike o ismap o usemap L I N K O V I <a> <a href="http://www.microsoft.com/">ovo je link</a> o Običan link <a href="#sidro">prebaci</a> o link na mjesto unutar iste stranice o Mjesto se definira sa: <p id="sidro"><h2>novo</h2></p> o Klikom na prebaci u prozoru pretraživača pomiče se ista stranica tako da je novo u vrhu prozora <a href="mailto:someone@microsoft.com">send Mail</a> o otvara novu e-mail poruku za primaoca <a href= http://www.microsoft.com/ target= _blank > <img src="slika.gif"> </a> o i slika može biti link koji otvara novi tab 6
L I S T E <ul>, <li> - kreiranje nepobrojane liste - imaju zatvarajuće tagove Primjer: <ul> <li>teorem 1</li> <li type="disc">teorem 2</li> <li type="circle">teorem 3</li> <li type="square">teorem 4</li> </ul> Ispis: Teorem 1 Teorem 2 o Teorem 3 Teorem 4 <ol>, <li> - kreiranje pobrojene liste - imaju zatvarajuće tagove atributi: type="1 A a I i" Primjer1: Ispis1: <ol> 1. Teorem 1 <li>teorem 1</li> 2. Teorem 2 <li>teorem 2</li> 3. Teorem 3 <li>teorem 3</li> 4. Teorem 4 <li>teorem 4</li> </ol> Primjer2: Ispis2: <ol type="i"> <li>teorem 1</li> <li>teorem 2</li> <li>teorem 3</li> <li>teorem 4</li> </ol> <dl>, <dt> - kreiranje liste definicija. - imaju zatvarajuće tagove Primjer3: <dl> <dt>termin 1</dt> <dd>definicija 1 </dd> <dt>termin 2</dt> <dd>definicija 2 </dd> </dl> i. Teorem 1 ii. Teorem 2 iii. Teorem 3 iv. Teorem 4 Ispis: Termin 1 Definicija 1 Termin 2 Definicija 2 T A B L I C E <table> - U kombinaciji s ovim tagom idu tagovi: <tr> - novi redak <th> - novi stupac kao naslov <td> - novi stupac Evo primjer nekoliko jednostavnih tablica: 7
Primjer 1. <!DOCTYPE html> <body> <table border="1"> <tr> <th>naslov1</th> <th>naslov2</th> </tr> <tr> <td>polje1</td> <td>polje2</td> </tr> </table> </body> </html> Colspan i rowspan su atributi koji se mogu koristiti kod <th> i <td> tagova za spajanje stupaca odnosno redaka. Primjer: <th colspan="2"> polje koja spaja 2 stupca. Primjer 2. <body> <table> <tr> <th>naslov1</th> <th colspan="2">naslov od stupca</th> </tr> <tr> <td>vrijednost1</td> <td>vrijednost2</td> <td>vrijednost3</td> </tr> </table> </body> </html> W 3 S C H O O L S Ovdje HTML-u možete pročitati više (i koristiti za vrijeme laboratorijskih vježbi): http://www.w3schools.com/html/default.asp 8
Zadatak Zadatak zahtjeva nekoliko koraka prije samog početka pisanja HTML koda: Kreirati direktorij/mapu pod nazivom Vjezba2 na Vašem računalu (preporučamo lokaciju Dokumenti/ImePrezime-PZI/Vjezba2 ). Resursi za vježbu nalaze se u odgovarajućoj komprimiranoj datoteci Vježba 2 resursi koje možete skinuti s e-learning portala i raspremiti njezinu podmapu slike u prethodno kreiranu mapu Vjezba2 Otvoriti program Visual Studio Code, te u Welcome prozoru odabrati opciju Open folder i otvoriti mapu Vjezba2. U lijevom izborniku, pokraj naziva mape kliknuti na ikonicu i kreirati dokument pod nazivom index.html Novi dokument index.html ispuniti početnim HTML kodom koristeći upisujući tekst html i odabirom pomoćnog teksta kao na sljedećoj slici: Nakon početnog jednostavnog HTML koda, po uzoru na slici zadatka na posljednjoj stranici, definirati HTML elemente tako da ispunjaju sljedeće zahtjeve: Sekcija Header: o Na vrhu stranice se nalazi naslov s tekstom Pizza bar za koji se koristi h2 element o Definirati linkove navigacije koji vode na referencu # koristeći listu s točkama koristiti ul, li i a elemente o Odvojiti horizontalnom linijom svaku sekciju (hr element) o Umetnuti sliku iz resursa koristeći img element. Postaviti alt tekst i širinu postaviti na 500 piksela. Napomena: Pripaziti na adresiranje slike! o Veliki naslov s tekstom Najbolja pizza u gradu (h1)s umanjenim opisnim tekstom Dostupna u cijelom gradu i linkom Naruči odmah na # Sekcija Cjenik: o Naslov h3 s istoimenim tekstom o Tablica s 3 retka i 2 stupca kako je i prikazano na slici ispod 9
Sekcija Footer: o Lista društvenih mreža (slično navigaciji), prva 2 otvaraju linkove početnih stranica mreža u novom tabu, a zadnji šalje mail na Vaš FESB email o Manji naslov h4 s tekstom kao na slici o Koristiti entitet da za simbol uz naglašeni tekst o U novom redu podebljano Vaše ime i prezime Upload-ati vježbu u vlastiti direktorij na serveru pzi1.fesb.hr po uzoru iz Vježbe 1. 10