Skip to content

Latest commit

 

History

History
105 lines (86 loc) · 3.88 KB

01.md

File metadata and controls

105 lines (86 loc) · 3.88 KB
Raw

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>