Opšta pravila HTML-a

Teme vezane za kreiranje osnovnih web stranica baziranih na HTML sintaksi.
6 post(ov)a • Stranica: 1/1.

Opšta pravila HTML-a

PostPostao/la Jasko » 11 ožu 2012, 20:34

Korisno znanje za razumijevanje:

U ovom dijelu ću pokušati objasniti kako je struktuirana jedna HTML datoteka, kako HTML uopšteno funkcioniše te neka osnovna pravila koja se tiču HTML-a. Ovaj dio će sadržavati slijedeće naslove:
  • Znakovi, specijalni znakovi i HTML specifični znakovi
  • Definirati boje u HTML-u
  • Referencirati u HTML-u
  • Komentari i dobar ton
  • Konvencija o imenima datoteka
  • Dobar HTML Stil

Sve ove naslove ću vremenom objavljivati u ovoj rubrici tako ako čitate ovaj Thread, a niste našli sve naznačene informacije. Vratite nam se ubrzo opet, žurno radim na kompletiranju sadržaja ;)
Zadnja izmjena: Jasko; 18 tra 2012, 22:20; ukupno mijenjano 2 put/a.
Postoji 10 vrsta ljudi na zemlji. Oni koji razumiju binarni sistem i oni koji ga ne razumiju!
Posjetite moj YouTube kanal za gledanje za programiranje i druge teme oko računara.

Označavanje teksta

PostPostao/la Jasko » 11 ožu 2012, 21:32

HTML datoteke sadrže tekst. Za označavanje tog teksta postoje posebne oznake iz normalne baze znakova.

Sadržaj HTML datoteke se nalazi unutar HTML-elemenata. HTML elementi se markiraju tzv. tagovima. Gotovo svi HTML elementi se markiraju uvodnim i završnim tagovom. Sadržaj između tagova pretsavlja opseg važenja elementa. Tagovi se notiraju sa špicastim zagradama (odnosno znakom za manje od [<] i znakom za veće od [>])

Primjer:
Kod: Označi sve
<h1> HTML - jezik interneta</h1>


Objašnjenje:
Primjer pokazuje naslov prvog reda važnosti. Uvodni tag <h1> pokazuje da slijedi naslov prvog reda važnosti (h=heading). Završni tag </h1> signalizira kraj Naslova prvog reda. Završni tagovi počinju sa znakom manje od i kosom crtom "</".

Napomena:
U običnom HTML-u nema razlike u pisanju taga malim ili velikim slovima, tako <h1> i <H1> isto znače, no u novoj varijanti XHTML svi tagovi po konvenciji se pišu malim slovima, zbog toga preporučujem da tagove uvijek pišete malim slovima kako bi izbjegli neugodnosti.

Postoje i tzv. "Standalone-Tags". To su tagovi elemenata koji ne posjeduju uvodni i završni tag, jer ne posjeduju sadržaj.

Primjer:
Kod: Označi sve
Prvi red, slijedi manuelni prijelom reda <br>
drugi red


Objašnjenje:
Na kraju prvog reda signalizira <br> manuelni prijelom reda. (br=break=prijelom)

Napomena:
Ako želite pisati po XHTML standardu onda Standalone-tagove morate drugačije pisati, umjesto <br> morate pisati <br / >, dakle ime elementa sa završnom kosom crtom. Alternativno ovom pisanju možete koristiti i slijedeću sintaksu <br></br> dakle element sa uvodni i završnim tagom, samo bez sadržaja. Više o tome kada dođemo do XHTML-a.

Gniježdenje elemenata
Elemente možemo ugniježđivati u druge elemente. Na ovaj način nastaje hirarhijska struktura. Kompleksnije HTML datoteke sadrže mnogo ugniježđivanja, zbog toga stručnjaci HTML to nazivaju struktuiranim markup-om.

Primjer:
Kod: Označi sve
<h1><i>HTML</i> - jezik interneta</h1>


Objašnjenje:
i-element pretstavlja italic (= kosi tekst). Tekst između <i> i </i> se interpretira kao kosi tekst, ovisno od toga koji font je korišten za označavanje naslova prvog reda.

Atributi u tagovima

Uvodni tagovi kao i Standalone tagovi mogu sadržavati dodatne oznake.

Primjer:
Kod: Označi sve
<h1 align="center">HTML - jezik interneta</h1>


Objašnjenje:
Pomoću align="center" se omogućuje orijentacija sadržaja na sredinu ili centrirano (aling=orijentacija, center=centrirano).

Imamo slijedeće vrste atributa u HTML elementima:
  • Atributi sa određenim vrijednostima, pri čemu imamo samo odgovarajuće vrijednosti. Npr. <h1 align="center> Naslov prvog reda, za ovaj element i dati atribut su samo dozvoljene vrijednosti left, center, right, te yustify)
  • Atributi sa slobodnim vrijednostima, pri čemu se naravno očekuje jedinstven tip podataka ili jedinstvena konvencija. Npr. <style type="text/css" > (Prostor za definiranja Stylesheet-a, ovdje se očekuje tzv. MIM-Tip, a MIME-tipovi uvijek imaju izgradnbju tip/podtip). Ili <table border="1"> (Tabela sa rubom jačine jednog piksela - ovdje se očekuje numerička vrijednost)
  • Atributi sa slobodnim vrijednostima bez dodatne konvencije. Npr. <p title="Moj sadrzaj"> - ovdje možemo upisati čitav tekst.
  • Samostalni atributi. Npr. <hr noshade> (Razmaknica bez sijene). Samostalnih atributi samo postoje u običnom HTML-u. Ako želite pisati po pravilima XHTML-a onda morate pisati <hr noshade="noshade">

Iako je od strane HTML-a predviđeno da određene vrijednosti atributa možemo pisati bez navodnika, nebi to u praksi trebali činiti. Jednostavno smanjuje mogućnost greške ako vrijednosti atributa pišemo u jednostrukim ' ili dvostrukim " navodnicima. Korištenje jednostukih odnosno dvostukih navodnika je moguće miješati unuitar jedne HTML datoteke, samo se za isti atribut moraju koristiti početni i kranji navodnici istog tipa. No koje navodnike koristite u suštini je svejedno.

Kao kod imena elemenata tako i kod imena atributa u običnom HTML-u nema veze kako se pišu, mali ili velikim slovom no za noviju varijantu HTML za XHTML treba redom pisati malim slovima.

Pokraj atributa koji se mogu naći samo u određenim elementima HTML-a imamo i atribute koje možemo pronaći u većini odnosno skoro u svim elementima HTML-a tzv univerzalne atribute.

Primjer:
Kod: Označi sve
<p id="Uvod">Tekst</p>


Objašnjenje:
Primjer definira pasus sa uvodnim tagom <p> i završnim </p>. U uvodnom tagu je dodan univerzalni atribut id. Time možete u cijelum dokumentu imenovati jedinsvene elemente. Više o tome drugom prilikom
Postoji 10 vrsta ljudi na zemlji. Oni koji razumiju binarni sistem i oni koji ga ne razumiju!
Posjetite moj YouTube kanal za gledanje za programiranje i druge teme oko računara.

Osnovna struktura HTML datoteke

PostPostao/la Jasko » 18 tra 2012, 22:19

Jedna obična HTML Datoteka sastavljena je u osnovi iz slijedećih dijelova:
  • Deklaracija o tipu dokumenta (Specifikacija HTML Dokumenta tzv. Doktip)
  • Sržni element HTML <html> koji sadrži
    • Zaglavlje <head> sa podacima tipičnim za zaglavlje, naslov sajta i sl
    • Tijelo <body> (Dakle, tijelo dokumenta koje se prikazuje u browser-u, naslovi, pasusi, reference itd)

Šema:
Kod: Označi sve
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Naslov sajta sa opisima</title>
</head>
<body>

</body>
</html>


Objašnjenje:
Prva linija za početnike u prvi mah izgleda jako zbunjujuće. Ovaj komplikovani podatak je tzv. doktip-deklaracija. Pojedinosti o tome nešto niže pod naslovom DOKTYPE DEKLARATION

Sav ostali sadržaj HTML dokumenta je ograđen tagovima <html> i </html>. <html> element se naziva i korijenim elementom HTML-Datoteke. nakon uvodnog taga <html> slijedi uvodni tag zaglavlja <head>. Između ovog i njemu suprotnog taga </head> se pišu elementi zaglavlja HTML datoteke. Najvažniji od tih elemenata je naslovni oznaćen sa <title> i </title>. Ispod slijedi Tijelo datoteke, omeđeno sa <body> odozgo i </body> odozdo. Između tih Tagova se nalazi ustvari pravi sadržaj date datoteke, dakle ono što će biti prikazano u prozoru vašeg www-browser-a.

Primjetite:
Kada želite koristiti Fame-ove (više prozora u jednom), glavna struktura u datoteci u kojoj se definira tzv. Frameset izgledat će drugačije. O tome drugom prilikom. Uostalom, pozabavite se sa Frame-ovima tek kada ste koliko toliko upoznati sa osnovnom strukturom HTML datoteke.

Osnovna struktura XHTML datoteke

Ako želite pisati po standardima XHTML-a, osnovna struktura slicčno izgleda, samo se početak razlikuje.

Šema:
Kod: Označi sve
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Naslov sajta sa opisima</title>
</head>
<body>

</body>
</html>



Objašnjenje:
Još prije same doktip deklaracije kod XHTML datoteka treba napraviti vezu sa XML-om. Za to nam služi prva linija koda započeta sa znakom manje od i upitnikom iza i završno sa upitnikom i znakom veće od. Pišite ovu liniju kao u našem primjeru, jer to je tzv. XML-Deklaracija.

Pri deklaraciji tipa dokumenta treba izabrati validnu deklaraciju za XHTML datoteke. Više o tome nešto niže u podnaslovu DOKTYPE DEKLARATION.

Time je datoteka deklarisana kao XHTML datoteka. Ostali izvorni kod je u suštini normalni HTML, pri čemu naravno treba voditi računa o malim razlikama XHTML-a i HTML-a. No preporučujem da učite o tim razlikama tek kada se nešto više upoznate sa samim HTML-om.

DOKTYPE DEKLARATION

HTML je u porodici označnih jezika samo jedna od mnogih, ali najpoznatija. HTML takođe ima neku vlastitu historiju, te je već normiran u nekoliko različitih verzija. Sa deklaracijom o tipu dokumenta ili Doktip deklaracijom vi birate koji označni jezik i u kojoj verziji želite koristiti. Softwer za isčitavanje, npr. www-brpwser se prema tom podatku može orijentisati.

Pravila HTML-a su formulisana pomocću SGML-a. Pravila za XHTML sa XML-om. Dakle, po tim pravilima (SGML i XML) HTML odnosno XHTML datoteka je tek onda važeća ili validna datoteka, ako na početku nudi odgovarajuću doktip deklaraciju te se u izvornom kodu takođe držimo pravila definisahnih tom deklaracijom. Jer iza svake doktip deklaracije se skrivaju tzv. Dokumentne tip definicije (DTD). Takođe i za HTML postoje te doktip definicije. Tu je na primjer regulisano koje elemente može sadržavati jedna datoteka tipa HTML, koji elementi se mogu pojaviti u opsegu drugih elemenata, koji atributi pripadaju kojem elementu, dali je pisanje tih atributa nužno ili ne itd.

Kao HTML laik možda ja ne razumijem zbog čega se oko toga pravi tolika frka. Ali upravu ti doktipovi, uz čiju pomoć postavljamo pravila za jezike kao što je HTML su veliki napredak u elektronskoj obradi podataka (EOP). I samo na taj način je moguće ostvariti softversku neovisnost tih jezika. Bez jedinstvenih pravila, bi se jezici kao HTML brzo raspali na neke "dijalekte" i nastao bi opšti haos. To je isto kao kod ljudskog jezika, i tu postoje određena pravila "pravopisa", bez kojih bi svako pisao kako hoće i ubrzo nebi smo znali šta nam je to jaran napisao i tome slično. No ako znamo da je softver mnogo gluplji od ljudskog uma, i da mu trebaju mnogo preciznije upute da bi "razumio" ono što od njega želimo onda je oslanjanje na pravila veoma važno.

Primjer doktip deklaracije:
Kod: Označi sve
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">


Objašnjenje:
Pišite deklaraciju doktipa velikim slovima prije uvodnog <html>-Taga, kao što je naznačeno. Nakon znaka manje od slijedi upitniak a zatim tekst DOCTYPE HTML PUBLIC, to znači da se odnosite na javno dostupnu HTML-DTD. Naredni teks koji se piše pod navodnicima treba razumiti na slijedeći način:

W3C je izdavač DTD-a, dakle W3 konzorcij. DTD HTML 4.01 Transitional, znači, da u datoteci koristite doktip "HTML"-a, i to u verziji 4.01 te u varijanti/podverziji Transitional. EN označava skraćenicu jezika koji se koristi u datoteci, u ovom slučaju engleski. Naznaka se odnosi na to u kojem prirodnom jeziku su definirani elementi i atributi tagovnog jezika, ne na sadržaj vaše datoteke. Dakle uvijek koristite EN, jer imena elemenata i atributa u HTML-u baziraju na engleskom jeziku. Kose crte treba ubacivati kao u primjeru.

Ispod svega u doktip deklaraciji se nalazi web adresa Doktip-Definicije (DTD). Pisanje ove adrese nije nužno potrebno. Ispis kao što je slijedeći, je takođe dozvoljen.

Primjer:
Kod: Označi sve
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


Preko zadane web adrese browser tj. softwer koji čita naš dokument može pristupiti doktip definiciji, te slijediti tu zapisana pravila. No većina današnjih browsera pri čitanju HTML to ne radi, jer su najkorišteniji doktipovi vec implementirani u same browsere. Zbog činjenice da na mnogim stranicama imamo nepravilno korišten HTML, ovi browseri su u mogućnosti i takve kodove ipak pretstaviti što je bolje moguće, ali uz znatne razlike za različite platforme. Ali željeni rezultat jeste, da browser, kada HTML-Datoteka sadrži deklaraciju doktipa, ta bude korištena kao osnovni pravilnik po kome se stranica prikazuje. Kod XML-Dokumenata je uobičajeno da Parser pri nekoj grešci prekida prikaz stranice i generiše grešku, da dokument nije valjan (validan). To je već tako kod XHTML stranica sa MIME-Tipom application/xhtml+xml.

U trenutku izrade ovog članka aktuelna verzija HTML je 4.01. Ova verzija posjeduje i tri podverzije (varijante). Za jednu od njih se morate odlučiti i naznačiti doktip:

Verzija Strict za HTML:
Kod: Označi sve
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">


Koristite ovu podverziju ako u svome kodu nećete više koristiti zastarjele elemente odnosno atribute koji su bili standard u starijim HTML verzijama, a sada se mogu zamjeniti na drugi način najčešce Stylesheet-om. Nadalje su pravila ugniježdavanja u ovoj varijanti nešto strožija u smislu strukturiranja sadržaja, tako se nesmije pisati samo tekst između tagova <body> i </body> ako se ne nalazi ugniježden u elementima naslova (<h1>,<h2>), pasusa(<p>) itd.

Verzija Transitional za HTML:
Kod: Označi sve
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">


Koristite ovu podverziju ako želite ili morate da koristite neke elmente koji su zabranjeni u Strict verziji. Tako su pravila ugniježdavanja u Trasitional varijanti nešto blaži nego kod Strict-a. Tako je dozvoljeno pisati "goli tekst" izmešu tagova <body> i </body>. Takođe vam je potrebna ova varijanta ako u linkovima radite sa atributom target, npr. za pravilan rad sa Frameset-ovima.

Verzija Frameset za HTML:
Kod: Označi sve
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
        "http://www.w3.org/TR/html4/frameset.dtd">


Ova podverzija je u upotrebi samo za specijalne HTML datoteke, u kojima se definiraju Frameset-ovi.

Odgovarajući doktipovi za XHTML:
Kod: Označi sve
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Kod: Označi sve
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Kod: Označi sve
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


Dakle, i za XHTML 1.0 postoje varijante Strict, Transitional i Frameset. Na početku doktip-deklaracije se "html" piše malim slovima, u srednjem dijelu se u verziji 1.0 mora naznaciti XHTML 1.0. Takođe su web adrese DTD-ova različite nego kod HTML-a.

Postoji i verzija 1.1 XHTML-a, koja je interno drugačije organizovana nego XHTML 1.0 i koja više nema tri varijante. XHTML 1.1 odgovara uglavnom Strict varijanti verzije 1.0.

Doktip za XHTML 1.1
Kod: Označi sve
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


Postoje i starije verzije doktipova koje ću ovdje samo navesti bez objašnjenja.
Kod: Označi sve
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
Postoji 10 vrsta ljudi na zemlji. Oni koji razumiju binarni sistem i oni koji ga ne razumiju!
Posjetite moj YouTube kanal za gledanje za programiranje i druge teme oko računara.

Re: Opšta pravila HTML-a

PostPostao/la ZDroid » 03 stu 2013, 18:24

Lepo što si napisao uvodni tutorijal u sintaksu HTML-a.

Sitnica:
Kod: Označi sve
<h1> HTML - jezik interneta</h1>


Razmak posle <h1> je nepotreban, slobodno ga obriši. :)

Nadam se da ćeš osvežiti tutorijal sa HTML5 sintaksom / promenama.

Re: Opšta pravila HTML-a

PostPostao/la Armin » 04 stu 2013, 17:03

ZDroid je napisao/la:Lepo što si napisao uvodni tutorijal u sintaksu HTML-a.

Sitnica:
Kod: Označi sve
<h1> HTML - jezik interneta</h1>


Razmak posle <h1> je nepotreban, slobodno ga obriši. :)

Nadam se da ćeš osvežiti tutorijal sa HTML5 sintaksom / promenama.


slika
"Ne žalim što su drugi pokrali moje ideje. Žalim što nemaju svoje"
Nikola Tesla

Re: Opšta pravila HTML-a

PostPostao/la ZDroid » 04 stu 2013, 18:38

Hahahahah... puka istina. :D


6 post(ov)a • Stranica: 1/1.

Na mreži

Trenutno korisnika/ca: / i 1 gost.