Nešto o nečemu.pdf

7/25/2019 Neto o neemu.pdf

1/34

Kako da napravim sajtkoristei

HTM

dipl. ing. Da


2/34

Cilj radionice

ta je HTML taje i kako se kreira HTML element

Osnovna struktura HTML stranice

Kako se referenciraju slike u HTML doku

taje to CSS

CSS sintaksa


3/34

Svrha HTML-a

HTML koristimo da bi (delovima) sadraja dodali znaenje i strukturu.

Sadraj veb stranica moe biti:

tekst

slika

audio-video sadraj

HTML pregledaima govori koji je koji deo sad


4/34

HTML element

Delove sadraja veb stranica pretvaramo u HTML elem

oznaavanjem.

Svaki HTML element ima poetak, kraj i sadraj kojiobuhvata. Odnosno oznaku (eng.Tag) koja oznaava p

elementa, sadraj i oznaku koja oznaava kraj element

Sadraj se nalazi uvek izmeu poetne i krajnje oznakeElementa.


5/34

A. Poetna oznaka

B. Zavrna oznaka

C. Ugaone zagrade (), uvek okruuju ime elementa i sastavni su deo HTM

(tag)

D. Ime elementa (u ovom primeru p). Ime je uvek jedna re

E. Kosa crta (forward slash) odreuje da je to zavrna oznaka


6/34

Osnovni HTML elementi

Postoje osnovni elementi koji moraju da se uvrste u svaki HTML dokument

samo jednom. To su:

- korenski element. Svi ostali elementi nalaze se u okviru njega

- zaglavlje dokumenta. U njemu se smetaju meta podacidokumenta. Moe biti samo jedan u dokumentu - naslov dokumenta. Naziv koji obino vidimo u naslovnoj linijipregledaa

- telo dokumenta. U okviru ovog elementa smetamo savsadraj koji elimo da bude prikazan u pregledau

- Deklaracija slui da obavesti internet pregleda o komtipu dokumenta je re, da bi ga pravilno prikazao - Definisanje kodnog rasporeda dokumenta, UTF-8 sadri latabecedu.


7/34

Element

Element

(p odparagraph) slui da oznpasus.

Svaki pasus se podrazumevano prikazuje u

redu, i postoji vertikalni razmak izmeu nj


8/34

Element

Element (h od heading) slui da oznai tekst knaslov.

Naslovi mogu biti razliitih nivoa. U HTML odree

nivoa, tako da imamo:

, , , , ,

Primer kda:

Naslov prvog nivoa


9/34

Div oznaka definie blok unutar HTML dokOva oznaka se uglavnom koristi za poziciogrupisanje delova unutar stranice.

Sam po sebi, nee proizvesti skoro nikakavupravo zbog toga ima veliku upotrebnu vrpoto se moe potpuno kontrolisati upotrestilova.


10/34

Hiperveze se oznaavaju elementom (a od anchor)

Da bi hiperveza bila validna mora sadrati URL adresu na kojuupuuje. Primer hiperveze:

YouTube

Atribut href(hrefod hypertext reference) slui da se navede URLhiperteksta kojeg referenciramo hipervezom, dok sadraj elementa predstavlja ono to e se videti u dokumentu i na ta klikemoAko izostavimo sadraj, neemo imati na ta da kliknemo. Sadrajtreba da jasno govori ta se referencira datom hipervezom


11/34

Slike

Element (img od image) slui da bi referenciralneku sliku, a samim tim naredili pregledau da

je prikae.Ovaj element nema sadaj, ve samo referencu ka slickoju prikazuje.

Referenciranje se definie atributom src (src od source

Primer:


12/34

ta je CSS

CSS (Cascading Style Sheets) je jezik koji seza odreivanje stilizacije, tj. prezantaciono

HTML dokumenta.

Stilizaciju postiemo tako to zadajemo prkako da se HTML elementi prikazuju vizue


13/34

CSS pravilaU CSS deklariemo pravila (eng. rules). Jedno CS

odreuje (obeleava) koji se HTML element/i stina koji nain. Zato se CSS pravilo sastoji iz dva deselektora i deklaracionog bloka

Primer:


14/34

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 dek Deklaracije se odvajaju znakom taka i zarez ( ; ) Vrednosti svojstva ispisuju se nakon imena svojstva i odvajaju se

take ( : ) Selektori razlikuju velika i mala slova


15/34

Zadatak:

Na desktopu se nalazi folder HTML&CSnjemu folder sa slikama i jedan tekstualdokument.

Kd emo kucati u tekst editoru Notepase takoe nalazi na desktopu. PokrenueNotepad++, i kliknuti na FILE, pa OPEN i na desktopu folder i dokument MojPrviS


16/34

U tom dokumentu ve se nalazi ispisan dkoda, koji e biti objanjen jo jednom tpredstavlja.

Sada taj dokument moemo da sauvamHTML dokument, da bismo u veb pretramogli da ga pokrenemo i vidimo ta se p


17/34

FILE pa SAVE AS i promeniti mu ime uMojPrviSajt.html (umesto txt da pie ht

Sada u naem folderu imamo i taj dokumstanemo desnim klikom mia na njega i opciju OPEN WIDTH i biramo veb pretraFIREFOX.


18/34

Kada se otvori pretraiva, primeujemo damoemo da vidimo deo teksta koji je bio uk

Na ovaj nain emo gledati svaku promenunapravimo u naem kodu.

Ostavite otvoren veb pretraiva, i svaki puunesemo neku promenu u kodu u notepademo osveiti stranicu u pretraivau da bispogledali promene. To moemo uraditi kliktaster na tastaturi F5.


19/34

Sada moemo da ponemo da unosimo za nau veb stranicu.

Nakon otvrajue oznake ubaciejednu sliku kucajui sledei tekst:


20/34

Nakon svake izmene koda, moramo dasauvamo na dokument da bismo upretraivau videli promene.

To moemo uraditi klikom na FILE, SAVE preicom na tastaturi tako to u isto vrepritisnemo Ctrl i S.


21/34

Nakon toga napisaemo jedan naslov. U Hnajvei naslovi se stavljaju izmeu oznaka tako da emo kucati:

O nama


22/34

Tekst koji ve imamo emo staviti unuta
da bi pretraiva taj tekst viparagraf.
Nakon toga, postaviemo jo jedan naslo

Smoothie bar predlozi


23/34

Sledee su nam slike. Da bismo mogli da ih stilizujemo pravilno, posjedan okvir, tj. element i u njemu navesti svih 9 slika.


24/34

Ubaciemo jo jedan naslov:Kontakt

Na kraju, treba nam kontakt deo.

Adresa: Dositeja Obradovia

Telefon:055 333 222


25/34

I jedan link

Omoguio:ITS

Time smo zavrili na HTML dokument i preCSS.


26/34

U notepadu, idemo na FILE, NEW, i otvose novi dokument.

Odmah emo ga sauvati: FILE, SAVE ASfolder u kom se nalazi i na HTML i dati

stil.css.Vratiemo se u HTML i pre nego to se zav oznaka, ubaciemo sledei link:


27/34


28/34

Prvo emo celoj pozadini promeniti boju, temo u CSS dokument kucati:

body {background-color:#312F2F;

}


29/34

Zatim sliku koja se nalazi na poetku straodrediemo joj da se proiri na 100% irstrane.

body img {width:100%;

}


30/34

Sada emo da stilizujemo naslove.

h1 {

font-family: 'Amatic SC', cursive;

font-size:34pt;

color:#9413a6;text-align:center;

padding:40px;

}


31/34

I paragrafe:

p {

font-family: Helvetica;

font-size:16pt;

color:white;text-align:center;

padding:10px;

}


32/34

Za div u kom se nalaze slike, odrediemo:

div {

width:600px;

margin:0 auto;padding:10px;

}


33/34

I za same slike:

div img {

width:190px;

height:170px;

border:2px solid #9413a6;border-radius:60px;

}


34/34

Hvala na panji!

Documents

Nešto o nečemu.pdf