This document was uploaded by user and they confirmed that they have the permission to share
it. If you are author or own the copyright of this book, please report to us by using this DMCA
report form. Report DMCA
Overview
Download & View Kodna Strana Html Dokumenta as PDF for free.
Kodna strana HTML dokumenta Meta element se koristi isključivo unutar zaglavlja. Ovo je element opšte namene, koji se koristi za definisanje određenih tehničkih karakteristika i podataka u vezi HTML dokumenta. Ovaj element koristimo za potrebe koje ne zadovoljavaju drugi elementi zaglavlja.
Kodna s tra na dok ume nta Jedna od najvažnijih namena <meta> oznake je definisanje kodne strane dokumenta. Pomoću ovog podatka, web čitač može pravilno da rastumači način kodiranja teksta na stranici. Problem kodiranja teksta se pojavio praktično čim su računari počeli da se koriste van engleskog govornog područja. Zbog različitih nacionalnih pisama i njihovih specifičnih znakova su tokom godina razvijani razni standardi za memorisanje teksta. Isti ćirilični ili latinični tekst može biti kodiran na više načina, a pomoću ove oznake web čitaču naglašavamo koji standard je u pitanju. Da bismo definisali kodnu stranu, koristimo parametar charset. Ovo je specifičan oblik oznake <meta> - kada se koristi parametar charset, ne sme se koristiti ni jedan drugi parametar. <meta charset="[kodna strana]" /> Postoji veliki broj kodnih strana, a ovde smo naveli samo neke. Kodna strana
Opis
US-ASCII
Klasični stari ASCII kod
UTF-8
"Pakovani" UNICODE standard
windows-1250
Microsoft kodna strana koja uključuje i naša latinična slova
windows-1251
Microsoft kodna strana koja uključuje ćirilična slova
Puna referenca kodnih strana: IANA tabela karakter setova Naša apsolutna preporuka je da se koristi standard UTF-8, a samim tim i neki noviji tekst editor koji ga podržava. Ovim standardom se na istoj stranici mogu predstaviti različita nacionalna pisma i to istovremeno i bez glavobolja koje su nam svojevremeno zadavala različita kodiranja. S a ve ti Gledajte da kodna strana bude pri vrhu dokumenta. Neki stariji web čitači prihvataju ovu oznaku samo ako se nalazi u prvih 512 bajtova! Ako server šalje HTTP Content-Type zaglavlje unutar HTTP protokola, ili je dokument snimljen sa nevidljivom BOM oznakom koja definiše kodnu stranu, web čitač verovatno neće uzeti u obzir našu meta oznaku. Na vođe n je kodne s tra ne u HTML5 dok ume ntu Ovo je, po našem mišljenju, najbolji početak HTML5 stranice.
Vjerojatno ste barem jedanput u svojoj surferskoj karijeri naišli na stranicu na kojoj se hrvatski znakovi nisu prikazivali ispravno. Do toga dolazi kad način kodiranja znakova nije (ispravno) definiran, pa se za prikaz teksta koristi pogrešna tablica znakova. Pišete li tekst na svojim stranicama na hrvatskom jeziku, bit će vam potrebni znakovi poput č, ć, đ, š i ž, kojih u engleskoj abecedi nema. Ako ne definirate ispravno način kodiranja znakova, umjesto njih će se web preglednici posjetiteljima prikazivati neke druge znakove i vaš će tekst učiniti teško čitljivim.
Izbor načina kodiranja i obavijest web preglednicima posjetitelja Način kodiranja znakova zapisuje se u meta oznaci unutar zaglavlja dokumenta. Općenito, meta oznakama opisujemo našu stranicu ili dajemo određene upute preglednicima i pretraživačima. U ovom ćemo slučaju reći korisnikovu pregledniku da za dekodiranje stranice upotrebljava tablicu znakova Unicode koja uključuje znakove iz mnogih svjetskih jezika i to, konkretno, način kodiranja utf-8. Upotrebom kodiranja Unicode moći ćete na svojim stranicama spominjati ljude iz raznih krajeva svijeta pišući njihova imena izvorno, tj. upotrebljavajući sve znakove koje upotrebljavaju i oni sami kad se potpisuju: Dvořák, Ångström i drugi. Više o meta oznakama bit će riječi na naprednim CARNetovim tečajevima. Zasad je dovoljno da znate da meta oznake nemaju završni dio i da ih opisuju dva atributa – http-equiv i content. Meta oznaka kojom ćemo definirati način kodiranja izgledat će ovako: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> U upotrebi su (bili) i drugi načini kodiranja koji omogućavaju pisanje i prikaz naših znakova, no u njima možete pisati samo znakove koji su u upotrebi u zemljama geografski bliskim našoj. To su kodiranje iso-8859-2, koje predstavlja međunarodni standard, te windows-1250, koje je stvoreno u tvrtki Microsoft.
Pohranjivanje stranice izabranim načinom kodiranja Da bi web stranica bila ispravno prikazana, treba još istim načinom kodiranja stranicu i pohraniti. Naime, da bi se
tekst zapisao u računalu, on se pretvara u brojeve, kodira. Način kodiranja pri pohranjivanju stranice mora biti isti kao način kodiranja koji smo naveli u meta oznaci, tj. onaj kojim će se stranica pretvoriti u svima čitljive znakove. Dakle, editor koji upotrebljavate za pisanje kôda mora podržavati izabrani način kodiranja znakova, te ga u editoru trebate postaviti kao način pohranjivanja podataka. Ako upotrebljavate editor Notepad++, prije početka pisanja web stranice izaberite Format > Kodirati u UTF-8. Još je bolje od toga izabrati to kodiranje za sve dokumente koji će biti stvarani: Postavke > Postavke... > kartica Novi dokument/Otvaranje/Pohranjivanje, pa izabrati UTF-8iz skupine Kodiranje. Ako upotrebljavate editor SharePoint Designer, pretpostavljamo da prema preporukama radite s web sjedištem, a ne s pojedinačnim stranicama. U tom slučaju iz izbornika Site otvorite Site Settings, te tamo na karticiLanguage pod Default page encoding namjestite UTF-8. Inače je ista kartica, ali koja se odnosi samo na jednu stranicu, dostupna i desnim klikom na stranicu u pogleduDesign > Page properties ili promjenom podataka u meta oznaci. Otvorite u editoru datoteku osnovni_kod.htm te uz osnovni HTML kôd definirajte i način kodiranja znakova. Pripazite da se meta oznaka nalazi u zaglavlju dokumenta. Budući da editori ne moraju uvažavati sadržaj vašeg HTML dokumenta, prije spremanja dokumenta ne zaboravite zadati editoru da ćete raditi s UTF-8 kodiranjem. Konačno, promijenite tekst u tijelu dokumenta tako da sadrži naša slova. Spremite datoteku, te je otvorite u web pregledniku dvoklikom na njezino ime. Provjerite prikazuju li se ispravno naša slova. UPUTA: Ako na vašoj stranici nisu ispravno prikazana naša slova, prvo provjerite nalaze li vam se sve oznake na pravim mjestima. To se prije svega odnosi na meta oznaku koja se treba nalaziti u zaglavlju dokumenta, tj. između oznaka i . Nakon toga u editoru provjerite jeste li spremili dokument s
pravim kodiranjem. U programu Notepad++ to se radi tako da potražite točkicu u izborniku Format. Ako je na pogrešnom mjestu, pretvorite dokument u odgovarajuće kodiranje funkcijom Format > Pretvoriti u UTF-8. Ako ste dokument spremili kodiranjem Unicode(UTF-8), noviji web preglednici će ga prepoznati bez obzira na meta oznaku.
HTML TUTORIJALI Kodiranje HTML dokumenata Često vidim na internetu hrvatske webove kojima nedostaju hrvatski dijakritički znakovi (š,đ,č,ć,ž). Često ih ljudi jednostavno ne pišu jer im je valjda "preteško" pisati točno ali često zna biti slučaj da njihove web stranice ne podržavaju sve naše znakove. Naime, svaki HTML dokument se treba kodirati u odgovarajućem skupu znakova tj. kodu. Većina programa za stvaranje HTML datoteka koriste ISO-8859-1 kao preodređeni kod. Njemu je baza latinsko pismo s određenim dodatnim znakovima. Sljedeći jezici mogu koristiti ISO-8859-1 bez bojazni da im se neka slova neće točno prikazati: švedski, engleski, norveški, islandski, irski, danski, škotski, španjolski, portugalsk, njemački, itd. Za hrvatski jezik je potreban drugi kod koji podržava naše dijakritičke znakove. Ustvari, postoje 2 koda koja su nam od koristi. Prvi je ISO-8859-2 i koriste ga mnogi slavenski jezici od kojih su neki poljski, hrvatski, češki, slovački, srpski (latinica), slovenski, itd. Drugi kod je UTF-8. On je uniformni koji je osmišljen da sadržava sve svjetke znakove . U njemu se može pisati ćirilicom, kineskim, japanskim, sanskrtom i gotovo svim pismima svijeta uz iznimke. Preporučam njegovo korištenje iz dva razloga. Prvi je taj što nikad ne znate kada ćete morati koristiti znakove koje vaš trenutni kod ne podržava a drugi je taj što većina današnjih tekstualnih editora koje koristimo za stvaranje HTML datoteka nema mogućnost kodiranja u ISO-8859-2 formatu. To je bio uvod u kodiranje HTML dokumenata (ali i praktički svih ostalih) a sada je vrijeme da vam i pokažem kako se to radi. Primjera radi koristit ću par najpopularnijih tekstualnih editora. Što svi često misle, kodiranje HTML dokumenta nije samo dodavanje sljedećeg meta taga u head dio stranice: <meta http-equiv="content-type" content="text/html; charset=utf-8"> To vrijedi jedino ako koristite windows-1250 kodiranje što ne preporučam jer onda Linux, Mac i ostali korisnici neće ispravno vidjeti sve znakove. To kodiranje je SAMO za korisnike s Windowsima. Osim što treba staviti taj dio koda u head dio dokumenta (a ni to nije uvijek potrebno) treba i SPREMITI datoteku u odgovarajućem kodiranju. Kod svakog editora je ovo drugačije a ja sam ovdje naveo nekoliko popularnijih. Ako koristite neki program koji nije ovdje naveden probajte naći opciju tipa file encoding, character encoding, encoding, file type ili slično te odaberite kodiranje koje želite. Većina programa, osim onih opširnijih kao Dreamweaver ili Frontpage, neće imati ISO-8859-2 ali i tako je bolje koristiti UTF-8. Notepad Kod spremanja datoteke imate polje Encoding. Odaberite UTF-8 umjesto ANSI.
Notepad++ Otiđite na Format->Encode in UTF-8 ili UTF-8 without BOM. BOM (byte order mark) je jedna stvarčica vezana uz UTF kodiranje ali je najbolje da je izbjegavajte jer stariji pretraživači (a i noviji nekad) znaju ispisati na početku dokumenta čudne znakove što je posljedica korištenja BOM-a. Ako želite da vam svi novi dokumenti u Notepadu++ budu kodirani u UTF-8 onda kliknite na Edit->Preferences... i pod tabom New Document odaberite UTF-8 (sa ili bez BOM-a, po želji). ____________________________________________________________________________________________________
Standard kodiranja je uveden da bismo mogli razumjeti lakše tuđi kod i da bi se osigurala konzistentnost tokom programiranja svih ljudi u timu. Ovaj način kodiranja morate svi pratiti ukoliko želite raditi na ovom projektu. Ovo je standard kodiranja za HTML/CSS HTML Opšti zahtjevi
Fajlove uvijek snimati u UTF-8 enkodingu bez BOM-a (Byte Order Mark).
Tagove i njihove atribute pisati isključivo malim slovima.
Nakon otvaranja tag-a obavezno ga zatvoriti.
Samozatvarajuće tagove kao što su , obavezno zatvoriti koristeći /.
Uvlačenja u children tagovima su uvijek 4 SPACE-A udesno.
Ne koristiti absolutne putanje ukoliko link se ne nalazi na domenu HTML dokumenta. Gdje je to moguće generisati link putem skripte.
Uvijek koristiti validan HTML ukoliko je to moguće.
Između semantičkih cjelina držati jedan prazan red.
Nazivi ID-ova i klasa
Koristiti smišljena imena za nazive id i class atributa i na ENGLESKOM jeziku. Sva slova moraju biti mala. Kod klasa ili id-ova od više riječi, one moraju biti odvojene sa znakom-. Nepravilan način: Pravilan način:
Nazivi name atributa
Nazive name atributa u input tagovima moraju pratiti Camel-Casing stil kod više riječi ali sa time što je prvo slovo malo. Nepravilan način: Pravilan način: Protokol
Ne pisati http: ili https: OSIM ako resurs nije dostupan samo na jednom od protokola. Nepravilan način: http://www.nekisajt.com/slika.jpg Pravilan način: //www.nekisajt.com/slika.jpg Doctype
Koristiti isključivo HTML5 doctype.
Pravilan način: Pisanje CSS stilova
Inline CSS stilovi nisu dozvoljeni. Pisanje stilova je se isključivo radi u svojem sopstvenom CSS fajlu. Ne pisati type atribut. Nepravilan način: Pravilan način: Link ka CSS fajlovima se isključivo definiše unutar tagova. Skripte
Osim ako to nije specifičan zahtjev pojedine skripte, one se postavljaju na sami kraj dokumenta. Osim ako skripta nije u Javascript jeziku ne pisati type atribut. Nepravilan način: <meta charset="UTF-8"> Document <script src="script.js">
Sadrzaj Pravilan način: <meta charset="UTF-8"> Document Sadrzaj <script src="script.js"> Slike
Svaki img tag mora biti zatvoren i mora sadržati alt atribut. Ukoliko se sadržaj altatribut-a ponavlja ili nema razloga za postavljanje opisa onda se taj sadržaj ostavlja prazan. Nepravilan način: Pravilan način: Linkovi
Linkovi trebaju uvijek da imaju title atribut. Nepravilan način: link Pravilan način: link Semantičke cjeline
Poštovati semantičke cjeline. Koristiti section kada se radi o semantičkom dijelu stranice, a ne layoutu. Za layout stranice koristiti isključivo div. Ne koristiti table za layout stranice. Nepravilan način: <section class="main-content"> <section class="header"> <section class="header-left-icon"> <section class="header-name">
Fajlove uvijek snimati u UTF-8 enkodingu bez BOM-a (Byte Order Mark).
CSS fajlove semantički strukturisati tako da ima poseban CSS fajl za layout, a poseban za temu.
Helper CSS klase držati u zasebnom dokumentu.
Fajlove sa minimiziranim CSS-om čuvati kao ime.min.css
Bracket { mora počinjati odmah nakon imena klase.
Između } i druge klase OBAVEZNO imati jedan prazan red.
Vršiti identaciju od 4 SPACE-A između {} blokova.
OBAVEZNO strukturisati CSS dokument. Svaku CSS klasu držati u samo tom djelu (ukoliko je to moguće).
Imena CSS fajlova
Imena CSS fajlova moraju biti SMIŠLJENA, pisana malim slovima i na ENGLESKOMjeziku. Imena od više riječi se odvajaju znakom .. Nepravilan način: glavna-forma.css, glavnaForma.css, GLAVNAFORMA.css Pravilan način: glavna.forma.css
CSS Hackovi
Koristiti više CSS za rešavanje prikaza. Koristiti "hackove" samo ako je neophodno.
Imena klasa moraju biti smišljena i na ENGLESKOM jeziku. Sva slova moraju biti lowercase i više riječi mora biti odvojeno sa znakom -. Nepravilan način: .nekaKlasa { // Potrebno - izmedju neka i klasa. I klasa mora biti malim slovom. } #nekaklasa { // Potrebno - izmedju neka i klasa. }
Ukoliko se koristi klasa samo za specifične elemente obavezno navesti i te elemente u selekciji. Ukoliko se selektuje više elemenata odvojenih zarezom pisati svaki element u sledećem redu. Poslije zadnjeg selektovanog elementa ostaviti { u istom redu. Nepravilan način: // Samo ga koristi div element .center-text { text-align: center; } // Samo ga koriste div i a elementi. .bold-top-text { font-weight:bold; } Pravilan način: // Samo ga koristi div element div.center-text { text-align: center; } // Samo ga koriste div i a elementi. div.bold-top-text, a.bold-top-text { font-weight:bold; } Linkovi
Obavezno navesti sve pseudo-klase za anchor a elemente ukoliko nisu potrebne za neku drugu primjenu. Nepravilan način: a.top-button {
Uvijek koristiti ' umjesto " gdje moguće. Koristiti ' u url()-u. Nepravilan način: @import url("//main.css"); Pravilan način: @import url('//main.css'); ________________________________________________________________________________________________
Uvod u kodiranje : HTML CSS ( Styles ) - Styling HTML CSS CSS je uveden zajedno s HTML 4, pružiti bolji način za stil HTML elemenata. CSS može biti dodan u HTML na sljedeće načine:
Inline - pomoću stil atribut u HTML elemenata Unutarnja - pomoću <style> element u Vanjski - koristite vanjski CSS datoteku Preferirani način za dodavanje CSS u HTML, je staviti CSS sintaksa u odvojenim CSS datotekama. Međutim, u ovom HTML tutorial ćemo vam predstaviti CSS pomoću stil atribut. To je učinjeno kako bi se pojednostavio primjere. To također čini lakšim za vas urediti kod i probati ga sami. - Inline stilovi Inline stil se može koristiti ako je jedinstveni stil koji se primjenjuju na jednu pojavu elementa. Za korištenje ugrađenih stilova, koristite stil atribut u relevantnom oznakom.Atribut stil može sadržavati bilo CSS imovine.Slijedeći primjer pokazuje kako promijeniti boju teksta i lijevu marginu od stavka: Code:
Primer texta
- HTML Style Primjer - Boja pozadine Pozadine-boja svojstvo definira boju pozadine za elementa: Code:
Početni text
Primer text
- HTML Style Primjer - fonta, boja i veličina "Font-obitelj", boje i font-size svojstva definira font, boju i veličinu teksta u elementu: Code:
Početni text
Primer text
- HTML Style Primjer - Tekst Poravnanje Tekst poravnati nekretnina navodi vodoravno poravnanje teksta u elementu: Code:
Početni text
Primer text
- Interni Style Sheet Unutarnji style sheet može koristiti ako jedan jedini dokument ima jedinstveni stil. Interni stilovi su definirani u HTML stranicu, pomoću <style> oznaku, ovako: Code: <style type="text/css"> body {background-color:yellow;} p {color:blue;}
- Vanjski Style Sheet Vanjski list stila idealna je kada je stil primijeniti na mnogim stranicama. Uz listu vanjskog stila, možete promijeniti izgled cijele web stranice mijenjanjem jedne datoteke. Svaka stranica mora povezati na list stila pomoću oznaku. Oznaka ide unutra : Code:
Definicije: <style> Definira stil informacije za dokument Definira odnos između dokumenta i vanjskog resursa
HTML Tables Eh ovako, malo ću da vas uvedem u kodiranje. Pokazaču vam kako da napravite prostu tabelu. Code:
Naslov 1
Naslov 2
Primer 1, Primer
Primer 1, Primer
Primer 2, Primer
Primer 2, Primer
1 2 1 2
To bi trebalo da izgleda ovako klik. Objašnjenja: -
: Granica atribut određuje da li bi granica trebala biti prikazana oko ćelija tablice ili ne. Vrijednost "1" označava granice bi trebao biti prikazan, a da tabela se ne koristi za izgled svrhe. U HTML5, granični atribut se koristi samo za označavanje ako je tabela za izgled svrhe ili ne, i samo dopušteni atribut vrijednosti "" ili "1". -
:
Oznaka definira redak u HTML tablici.
Element sadrži jednu ili više
ili
elemente. -
:
Oznaka definira header ćeliju u HTML tablici. HTML tablica ima dvije vrste stanica: Zaglavlja stanice - sadrži informacije u zaglavlju (kreirana s
elementa) Standardni stanice - sadrži podatke (stvoren s
elementa) Tekst u
elemenata su podebljano i centriran po defaultu. Tekst u
elemenata su redoviti i poravnat lijevo po defaultu. -
:
Oznaka definira standardnu ćeliju u HTML tablici. -
Oznaka definira HTML tablicu. HTML tablica se sastoji od
element i jedan ili više,
i
elemenata.
Element definira redak tablice,
element koji definira stol zaglavlje, a
element koji definira ćelije tablice. Složeniji HTML tablica također može uključivati
,
,
,
,
i elemente. Grupe zaglavlja sadržaja u tablici. Grupe tijelo sadržaja u tablici. Grupe podnožje sadržaj u tablici.