Klijentske web tehnologije

Vežbe | 1. termin

Uvod

Na vežbama se bavimo kreiranjem web stranica. Web stranica je kolekcija fajlova koje posebna vrsta aplikacije koja se zove web browser ume da protumači i iscrta u svom prozoru. Takođe, web browser ume da dobavi te fajlove web stranice preko mreže, tj. interneta, od posebnih aplikacija koje se zovu web serveri, a kojima je jedini zadatak da daju web browserima i drugim aplikacijama fajlove koje one traže.

Dakle bavimo se kreiranjem web stranica, odnosno kreiranjem tih fajlova koji je sačinjavaju. Imamo 3 vrste fajlova koje možemo kreirati, a svaki nosi sa sobom posebnu vrstu informacija i napisan je u posebnom jeziku koji browser ume da protumači.

Jezik	Fajl	Namena
HTML	`.html`	Definiše sadržaj stranice i značenje tog sadržaja (podaci i metapodaci)
CSS	`.css`	Definiše način prikazivanja sadržaja stranice (stil)
JavaScript	`.js`	Definiše programski kod koji može da se izvrši u okviru stranice (funkcionalnosti)

Od ova 3 jezika samo je JavaScript klasičan programski jezik, sadrži programske instrukcije koje browser treba da izvrši, dok su HTML i CSS takozvani markup jezici koji sadrže neke podatke i metapodatke a ne instrukcije.

Web browser sa web serverom komunicira po klijent-server principu, gde klijent šalje zahtev serveru da bude opslužen a server na zahtev odgovara na odgovarajući način. Zato se browser naziva klijentskom aplikacijom, a web server serverskom, a pošto se tehnologije kojima se bavimo tiču klijentskog dela ovaj predmet se zove Klijentske web tehnologije.

HTML

Sintaksa HTML-a je slična XML-u, imamo tagove koji mogu da sadrže podatke u vidu teksta ili druge tagove, i takođe mogu imati dodatne opisane osobine, tj. atribute.

<article id="art-1">
    <p> Sadržaj "paragraf" taga koji se nalizi u "article" tagu koji ima postavljen atribut "id". </p>
</article>

Struktura

DOCTYPE - Naznaka Web browseru u kojoj verziji HTML standarda je stranica napisana.
html, head i body - Osnovna struktura stranice.

<!DOCTYPE html>
<html>
    <head>
        <!-- Metapodaci, linkovi do .js i .css fajlova, itd. Ne prikazuje se na stranici. -->
    </head>
    <body>
        <!-- Sadržaj stranice koji se prikazuje. -->
    </body>
</html>

meta i title - Metapodaci stranice.

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Example HTML code.">
    <meta name="keywords" content="HTML, web browser, meta tags">
    <meta name="author" content="Pera Perić">
    <title>KWT V1</title>
</head>

Tekst

h1, h2, …, h6 - Zaglavlja (headings) različitih nivoa.
p - Paragraf
strong - Važnost teksta (obično stilizovan kao bold)
em - Naglašen tekst (obično stilizovan kao italic)
b - Bold tekst
i - Italic tekst
sup - Superscript
sub - Subscript
pre - Tekst formatiran u samom HTML fajlu (preformatted)
code - Inline code snippet
abbr - Abbreviation or acronym; attribute: title
bdo - Bi-Directional Override for text direction
del - Deleted text
ins - Inserted text
small - Smaller text
hr - Thematic break (horizontal rule)
br - Line break
a - Anchor. Atributi: target (_blank), href (http, id, mailto)
Kombinacije tagova (a u h tagu, a u p tagu, itd.)
Skrol kada sadrzaj predje stranicu
Inspector u Browser-u kako bismo videli strukturu stranice

Liste

Ordered list (ol)
- list item (li)
- atribut type: 1, a, A, i, I
Unordered list (ul)
- list item (li)
Description list (dl)
- term (dt)
- description (dd)

Ugnjezdene liste:

  <ul>
      <li>Coffee</li>
      <li>Tea
          <ul>
              <li>Black tea</li>
              <li>Green tea</li>
          </ul>
      </li>
      <li>Milk</li>
  </ul>

This site is open source. Improve this page.