Scribd Logo
Upload

Welcome to Scribd!

  • Nešto o Nečemu PDF

    Uploaded by

    DM
    35 views34 pages

    Original Title

    Nešto o nečemu.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    35 views34 pages

    Nešto o Nečemu PDF

    Uploaded by

    DM

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 34

    Kako da napravim sajt koristei HTML i CSS

    dipl. ing. Darija Jovii

    Cilj radionice

    ta je HTML
    ta je i kako se kreira HTML element
    Osnovna struktura HTML stranice
    Kako se referenciraju slike u HTML dokumentu
    ta je to CSS
    CSS sintaksa

    Svrha HTML-a
    HTML koristimo da bi (delovima) sadraja dokumenta
    dali znaenje i strukturu.
    Sadraj veb stranica moe biti:
    tekst
    slika
    audio-video sadraj
    HTML pregledaima govori koji je koji deo sadraja.

    HTML element
    Delove sadraja veb stranica pretvaramo u HTML elemente
    oznaavanjem.
    Svaki HTML element ima poetak, kraj i sadraj koji
    obuhvata. Odnosno oznaku (eng. Tag) koja oznaava poetak
    elementa, sadraj i oznaku koja oznaava kraj elementa.

    Sadraj se nalazi uvek izmeu poetne i krajnje oznake


    Elementa.

    A. Poetna oznaka
    B. Zavrna oznaka
    C. Ugaone zagrade (<>), uvek okruuju ime elementa i sastavni su deo HTML oznake
    (tag)
    D. Ime elementa (u ovom primeru p). Ime je uvek jedna re
    E. Kosa crta (forward slash) odreuje da je to zavrna oznaka

    Osnovni HTML elementi


    Postoje osnovni elementi koji moraju da se uvrste u svaki HTML dokument i pojavljuju se
    samo jednom. To su:
    <html> - korenski element. Svi ostali elementi nalaze se u okviru njega
    <head> - zaglavlje dokumenta. U njemu se smetaju meta podaci
    dokumenta. Moe biti samo jedan u dokumentu
    <title> - naslov dokumenta. Naziv koji obino vidimo u naslovnoj liniji
    pregledaa
    <body> - telo dokumenta. U okviru ovog elementa smetamo sav
    sadraj koji elimo da bude prikazan u pregledau
    <!doctype html> - Deklaracija slui da obavesti internet pregleda o kom
    tipu dokumenta je re, da bi ga pravilno prikazao
    <meta charset="utf-8"> - Definisanje kodnog rasporeda dokumenta, UTF-8 sadri latinicu, irilicu i
    abecedu.

    Element <p>
    Element <p> (p od paragraph) slui da oznai
    pasus.
    Svaki pasus se podrazumevano prikazuje u novom
    redu, i postoji vertikalni razmak izmeu njih.

    Element <h>
    Element <h> (h od heading) slui da oznai tekst koji je
    naslov.
    Naslovi mogu biti razliitih nivoa. U HTML odreeno je est
    nivoa, tako da imamo:
    <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

    Primer kda:
    <h1>Naslov prvog nivoa</h1>

    <div>
    Div oznaka definie blok unutar HTML dokumenta.
    Ova oznaka se uglavnom koristi za pozicioniranje i
    grupisanje delova unutar stranice.
    Sam po sebi, nee proizvesti skoro nikakav efekat,
    upravo zbog toga ima veliku upotrebnu vrednost
    poto se moe potpuno kontrolisati upotrebom
    stilova.

    <a>
    Hiperveze se oznaavaju elementom <a> (a od anchor)
    Da bi hiperveza bila validna mora sadrati URL adresu na koju
    upuuje. Primer hiperveze:
    <a href=https://www.youtube.com/>YouTube</a>
    Atribut href (href od hypertext reference) slui da se navede URL
    hiperteksta kojeg referenciramo hipervezom, dok sadraj elementa
    <a> predstavlja ono to e se videti u dokumentu i na ta klikemo
    Ako izostavimo sadraj, neemo imati na ta da kliknemo. Sadraj
    treba da jasno govori ta se referencira datom hipervezom

    Slike
    Element <img> (img od image) slui da bi referencirali
    neku sliku, a samim tim naredili pregledau da
    je prikae.
    Ovaj element nema sadaj, ve samo referencu ka slici
    koju prikazuje.
    Referenciranje se definie atributom src (src od source)

    Primer:
    <img src=slika.jpg>

    ta je CSS
    CSS (Cascading Style Sheets) je jezik koji se koristi
    za odreivanje stilizacije, tj. prezantacionog izgleda
    HTML dokumenta.

    Stilizaciju postiemo tako to zadajemo pravila


    kako da se HTML elementi prikazuju vizuelno

    CSS pravila
    U CSS deklariemo pravila (eng. rules). Jedno CSS pravilo
    odreuje (obeleava) koji se HTML element/i stilizuje/u i
    na koji nain. Zato se CSS pravilo sastoji iz dva dela:
    selektora i deklaracionog bloka
    Primer:

    CSS sintaksa
    CSS sintaksa je jednostavna:
    p{
    font-family:arial;
    margin:10px;
    }

    Kd treba pisati uvek malim slovima


    Deklaracije se grupiu izmeu vitiastih zagrada { } , to ini deklaracioni blok
    Deklaracije se odvajaju znakom taka i zarez ( ; )
    Vrednosti svojstva ispisuju se nakon imena svojstva i odvajaju se znakom dve
    take ( : )
    Selektori razlikuju velika i mala slova

    Zadatak:
    Na desktopu se nalazi folder HTML&CSS i u
    njemu folder sa slikama i jedan tekstualni
    dokument.
    Kd emo kucati u tekst editoru Notepad++ koji
    se takoe nalazi na desktopu. Pokrenuemo
    Notepad++, i kliknuti na FILE, pa OPEN i pronai
    na desktopu folder i dokument MojPrviSajt.txt

    U tom dokumentu ve se nalazi ispisan deo


    koda, koji e biti objanjen jo jednom ta
    predstavlja.
    Sada taj dokument moemo da sauvamo kao
    HTML dokument, da bismo u veb pretraivau
    mogli da ga pokrenemo i vidimo ta se prikazuje.

    FILE pa SAVE AS i promeniti mu ime u


    MojPrviSajt.html (umesto txt da pie html)
    Sada u naem folderu imamo i taj dokument,
    stanemo desnim klikom mia na njega i biramo
    opciju OPEN WIDTH i biramo veb pretraiva
    FIREFOX.

    Kada se otvori pretraiva, primeujemo da


    moemo da vidimo deo teksta koji je bio ukucan.
    Na ovaj nain emo gledati svaku promenu koju
    napravimo u naem kodu.
    Ostavite otvoren veb pretraiva, i svaki put kada
    unesemo neku promenu u kodu u notepad++, samo
    emo osveiti stranicu u pretraivau da bismo
    pogledali promene. To moemo uraditi klikom na
    taster na tastaturi F5.

    Sada moemo da ponemo da unosimo sadraj


    za nau veb stranicu.
    Nakon otvrajue oznake <body> ubaciemo
    jednu sliku kucajui sledei tekst:
    <img src="slike/header.png">

    Nakon svake izmene koda, moramo da


    sauvamo na dokument da bismo u
    pretraivau videli promene.
    To moemo uraditi klikom na FILE, SAVE ili
    preicom na tastaturi tako to u isto vreme
    pritisnemo Ctrl i S.

    Nakon toga napisaemo jedan naslov. U HTML


    najvei naslovi se stavljaju izmeu oznaka <h1>
    tako da emo kucati:
    <h1>O nama</h1>

    Tekst koji ve imamo emo staviti unutar oznaka


    <p> </p> da bi pretraiva taj tekst video kao
    paragraf.
    Nakon toga, postaviemo jo jedan naslov:
    <h1>Smoothie bar predlozi</h1>

    Sledee su nam slike. Da bismo mogli da ih stilizujemo pravilno, postaviemo ih u


    jedan okvir, tj. <div> element i u njemu navesti svih 9 slika.
    <div>
    <img src="slike/11.jpg">
    <img src="slike/12.jpg">
    <img src="slike/13.jpg">
    <img src="slike/14.jpg">
    <img src="slike/15.jpg">
    <img src="slike/16.jpg">
    <img src="slike/17.jpg">
    <img src="slike/18.jpg">
    <img src="slike/19.jpg">
    </div>

    Ubaciemo jo jedan naslov:


    <h1>Kontakt</h1>
    Na kraju, treba nam kontakt deo.
    <p>Adresa: Dositeja Obradovia 33</p>
    <p>Telefon:055 333 222</p>

    I jedan link
    <p>Omoguio:<a href="http://www.its.edu.rs/">ITS</a></p>

    Time smo zavrili na HTML dokument i prelazimo na


    CSS.

    U notepadu, idemo na FILE, NEW, i otvorie nam


    se novi dokument.
    Odmah emo ga sauvati: FILE, SAVE AS; pronai
    folder u kom se nalazi i na HTML i dati ime
    stil.css.
    Vratiemo se u HTML i pre nego to se zavri
    </head> oznaka, ubaciemo sledei link:

    <link href="stil.css" rel="stylesheet">

    Time smo povezali na HTML i CSS dokument.


    Sada se moemo vratiti u CSS i poeti sa
    stilizacijom veb stranice.

    Prvo emo celoj pozadini promeniti boju, tako to


    emo u CSS dokument kucati:
    body {
    background-color:#312F2F;
    }

    Zatim sliku koja se nalazi na poetku strane,


    odrediemo joj da se proiri na 100% irine
    strane.
    body img {
    width:100%;
    }

    Sada emo da stilizujemo naslove.


    h1 {
    font-family: 'Amatic SC', cursive;
    font-size:34pt;
    color:#9413a6;
    text-align:center;
    padding:40px;
    }

    I paragrafe:
    p {
    font-family: Helvetica;
    font-size:16pt;
    color:white;
    text-align:center;
    padding:10px;
    }

    Za div u kom se nalaze slike, odrediemo:


    div {
    width:600px;
    margin:0 auto;
    padding:10px;
    }

    I za same slike:
    div img {
    width:190px;
    height:170px;
    border:2px solid #9413a6;
    border-radius:60px;
    }

    Hvala na panji!

    You might also like