abc HTML5 i CSS TUTORIAL

UVOD /INTRODUCTION/

Skriptni jezik je programski jezik čiji se kod najčešće izvršava interpretiranjem. Sa razvojem interneta došlo je do pojave nove vrste dokumenta – hiperteksta.Hipertekst je tekst koji sadrži veze ili linkove ka drugim dokumentima ili na samog sebe. Odnosno, hiperteskt je skup stranica u obliku datoteka, međusobno povezanih linkovima koje su umetnute u stranice

Najznačajniji jezici za opis hiperteksta su:

  • SGML ( Standard Generalized Markup Language )
  • HTML ( HyperText Markup Language ) – pojednostavljen SGML
  • XHTML ( Expandable HTML )
  • XML ( Extensible Markup Language )

HTML ( HyperText Markup Language) je platformski neutralan jezik i predstavlja standar za internet dokumente.  Izvršava se i prikazuje pomoću Web čitača (eng. browser). Fajlovi imaju ekstenziju .html ili .htm, i nalaze se u određenom direktorijumu servera koji je povezan na Internet. Za prikaz HTML dokumenata koriste se čitači /BROWSER/ kao što su INTERNET EXPLORER, MOZILA FIRE FOX, GOOGLE CHROME,OPERA,… odnosno jednom riječju BROWSER-i. Tvorac HTML koda je Tim Berners-Lee iz CERN, the European Laboratory for Particle Physics iz Ženeve.
HTML je "maternji jezik" Weba kojim se određuje formacija, sadržaj i funkcija nekog hipetekstualnog dokumenta. Njime se kombinuje nekoliko važnih elemenata: namijenjen je kontrolisanju načina na koji će browseri prikazati dokument, kreiranju hipertekstualnih veza između različitih mjesta u dokumentu, kreiranju hiperveza između različitih dokumenata, kreiranju hiperveza s drugim servisima na Internetu. HTML takođe omogućava da se u dokumente ugrađuje grafika, zvuk i drugi multimedijalni zapisi.
Stranica na World Wide Webu sastoji se od skupa datoteka sačuvanih na disku nekog računara na kojem je instaliran Web server. Tačna lokacija tih datoteka određena je URL adresom. Web stranica se u većini slučajeva sastoji od teksta i slike, s time da se sav tekst i svaka pojedina slika nalaze u posebnoj datoteci. Slikama se uvek pristupa pomoću imena datoteke u kojima su sačuvane, pa se tako jedna te ista slika može koristiti više puta unutar jedne ili više različitih stranica. Svim drugim multimedijalnim elementima pristupa se kroz pomoćne aplikacije koje pokreće browser kada korisnik klikne na odgovarajuću hipertekstualnu vezu.
HTML je skup stilova označenih kao MARKUP TAGS koji ne zavisi od platforme i definišu različite komponente WORLD WIDE WEB dokumenta. Odnosno, HTML definiše strukturu i izgled Web dokumenta korišćenjem TAG-ova i atributa. Jedan tag je komanda koja govori čitaču kako i na koji način da prikaže sadržaj opisane stranice. HTML tagovi nisu "case sensitive" tj. svejedno je da li se pišu malim ili velikim slovima, pa je isto značenje taga <html> , kao i sledećeg <HTML>, preporuka je da se tagovi pišu malim slovima.

Podjela tagova:

  1. Prosti tagovi se koriste za opisivanje jednostavnih elemenata jezika HTML: <X>
  2.  Složeni tagovi se pišu u paru, gdje zatvoreni tag predstavlja tag sa znakom slash / i predstavlja kraj naredbe: <tag></tag>

TAG počinje sa znakom < (manje), a zatvoren je znakom > (znak veće) to je početni tag. Opšti slučaj <TAG>. Naredbe se odnose na sadržaj koji slijedi iza koda <TAG> sve dok se ne zatvori TAG sa istim imenom koda ispred kojeg je kosa crta </TAG> (krajnji tag).

Atributi u okviru tag-a pružaju dodatne informacije za zadati tag <tag A1=a A2=10…> primjer </tag> . Par name/value se piše: name="value". Za vrijednost atributa koriste se dupli navodnici.

Atribut se uvijek piše u prvom dijelu, odnosno nakon što je tag otvoren. Lista nekoliko bitnih atributa:

  • id - Jedinstveni identifikator elementa
  • class - Dodjeljuje elementu jednu ili više podklasa
  • title - Definiše naziv elementa
  • alt - Služi za definisanje alternativnog teksta (npr. ako se slika ne učita prikaže se alt)
  • href - Definiše sa kojim dokumentom je link povezan
  • src - Određuje izvor slike, tj. putanju do nje
  • style - Definiše umetnute (inline) stilove elementa

HTML atributi daju elemenitima značenje i kontekst.
Globalni atributi su dati u narednoj tabeli:

accesskey Određuje taster za prečicu za aktiviranje/fokusirane elementa
class Određuje jedno ili više imena klase za element (odnosi se na klasu u stilskom smislu)
contenteditable Određuje da li sadržaj elementa može da se uređuje ili ne
data-* Koristi se za čuvanje prilagođenih informacija privatno na stranici ili aplikaciji
dir Određuje smjer teksta za sadržaj u elementu
draggable Određuje da li se element može povlačiti ili ne
dropzone Određuje da li se povučeni podaci kopiraju,premještaju ili povezuju kada se ispuste
hidden Određuje da lki je neki element još važan ili više to nije
id Jedinstveni identifikator elementa
lang Određuje jezik elementa nekog sadržaja
spellcheck Određuje da li će element imati provjeru pravopisa i gramatike ili ne
style Definiše umetnute (inline) stilove elementa (CSS)
tabindex Određuje redoslijed nabrajanja u  elemenatu
title Određuje naziv elementa
translate Određuje da li sadržaj elementa treba da bude preveden ili ne

HTML dokument je samo ASCII tekst što znači da može biti kreiran u bilo kom tekst editoru. Kad koriistite tekst procesor morate HTML dokument snimiti kao "TEXT ONLY WITH LINE BREAKS".
HTML dokumenata imaju .htm i html ekstenziju.

Novo u HTML5

Slijedeći HTML 4.01 elementi su obrisani iz HTML5

-header <header></header>
-nav <nav></nav>
-section <section></section>
-article <article></article>
-aside <aside></aside>
-figure <figure></figure>
-footer <footer></footer>
  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>

CSS se može dodati u HTML na slijedeće načine:

  • u liniji /INLINE CSS/ korisit se STYLE atribute u HTML elementu (vidi)
  • interni /INTERNAL CSS/ koristeći <STYLE> element u HEAD sekciji.
  • eksterni /EXTERNAL CSS/ koriteći CSS fajl.

O priručniku >>

Minimalan HTML5 dokument /MINIMUM HTML5 DOCUMENT/

Index