Scribd Logo
Upload

Welcome to Scribd!

  • Iz Dana U Dan Internet Je Sve Popularniji Kod Nas

    Uploaded by

    Milivoj Nešić
    20 views11 pages
    Iz Dana u Dan Internet Je Sve Popularniji Kod Nas

    Original Title

    Iz Dana u Dan Internet Je Sve Popularniji Kod Nas

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Iz Dana u Dan Internet Je Sve Popularniji Kod Nas

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    20 views11 pages

    Iz Dana U Dan Internet Je Sve Popularniji Kod Nas

    Uploaded by

    Milivoj Nešić
    Iz Dana u Dan Internet Je Sve Popularniji Kod Nas

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 11

    Iz dana u dan internet je sve popularniji kod nas, ljudi postaju svesni njegovog znaaja, samim tim se javlja

    interesovanje za rad na pomenutom, i mnogo je onih koji bi eleli da naue kako se prave web sajtovi. Poinjemo sa novom serijom tutorijala, i to ovaj put od samih osnova kreiranja web stranice. U uvodnom tekstu proi emo kroz osnovna objanjenja i pojmove HTML-a. ta je HTML?

    HTML (HyperText Markup Language) je osnovni jezik koji slui za definisanje web stranica i ine ga elementi, koji se obeleavaju tagovima (oznakama), i sadraj. HTML nije programski jezik.

    HTML dokumentima se pristupa pomou browser-a kao to su Mozilla Firefox, Google Chrome, Safari, itd. Za kreiranje HTML dokumenta je dovoljan bilo koji tekst editor kao na primer Notepad, ali je preporuljivo koristiti neki napredniji program (Notepad++, Dreamweaver, NetBeans, Coda, itd.)

    Tagovi

    HTML tagovi predstavljaju odreene delove dokumenta, drugim reima, njegove elemente. Piu se u okviru < > zagrada (npr. <html>) i obino dolaze u paru kao otvarajui i zatvarajui tag, odnosno svaki tag mora biti zatvoren istim tagom sa dodatkom kose crte unutar zagrada (</html>).1 2

    3 4 <html> <body> </body> </html>

    Takoe postoje i samozatvarajui tagovi, kojima nije potrebno stavljati zatvarajui tag, ve se zatvaraju sami dodavanjem kose crte na njihovom kraju (npr. <img />).1 <img src="/images/slika-html.jpg" border="0" alt="Uvod u HTML" />

    Otvarajui i zatvarajui tagovi u sebi mogu da sadre druge elemente ili sadraj, dok samozatvarajui tagovi to ne mogu, i definiu se atributima.

    Komentari se piu u okviru <!-- i --> oznaka:1 nee biti prikazani u browser-u. -->

    <!--Ovo je komentar, a komentari

    U ovom tutorijalu u navesti neke od bitnih HTML tagova. Lista je, naravno, mnogo dua, ali je lake uiti tagove kroz praksu, tako da u u narednom tutorijalu prei na konkretan rad. Osnovni tagovi html - Kreira HTML dokument head - Deo u kojem se nalaze naslov stranice i ostale informacije koje nisu vidljive na samoj stranici body - Glavni deo stranice, koji je vidljiv korisniku h1, h2, h3, h4, h5, h6 - Tagovi za definisanje naslova, od najveeg do najmanjeg p - Paragraf teksta div - Deli stranicu na razliite sekcije/blokove br - Pravi red razmaka u tekstualnom bloku hr - Kreira horizontalnu liniju koja se najee koristi za vizuelno razdvajanje delova sadraja

    blockquote - Koristi se za citiranje teksta, sa atributom za navoenje autora Head tagovi title - Definie naslov stranice meta - Sadri osnovne informacije o stranici (kljune rei, opis i sl.) link - Povezuje stranicu sa drugim dokumentima (CSS fajl, fav ikonica) script - Sadri (ili povezuje sa fajlom koji sadri) skripte koje se izvravaju na klijentskoj strani style - Sadri stilove koji opisuju izgled HTML elemenata Liste ol - Ureena lista (lista sadri numeriko ili alfabetsko obeleavanje elemenata liste) ul - Neureena lista (obeleavanje elemenata liste se vri simbolima kao to je taka, kvadrati...) li - Element liste Tagovi za formatiranje teksta a - Definie link strong ili b - Definie podebljan tekst em ili i - Definie iskoen tekst u - Definie podvuen tekst span - Kreira umetnuti (inline) kontejner teksta sub - Definie potpisan tekst sup - Definie natpisan tekst Elementi forme form - Definie formu, koja sadri ulazne elemente i kontrole fieldset - Grupie elemente forme legend - Definie naslov elemenata grupisanih u fieldset button - Definie dugme (klikabilni element) input - Definie ulazni element u koji se unose informacije (tekst, email, ifra...) textarea - Vielinijski ulazni element za unos teksta (npr. za unos komentara) select - Lista za selektovanje stavki (jedne ili vie) option - Definie stavku unutar select liste

    label - Slui za opis elementa forme (npr. naziv pored email polja) Tagovi slika i medija img - Definie umetnutu (inline) sliku applet - Ubacuje Java aplikaciju u dokument object - Definie kontejner viestruke namene za uitavanje medija u dokument param - Definie parametre za applet ili object map - Definie mapu Elementi tabela

    Tabele su se ranije koristile za pravljenje strukture same stranice, to je odavno prevazieno i nije validno prema standardima HTML-a, ali se tabele jo uvek koriste za tabelarni prikaz nekog teksta (lager-liste i sl.). table - Definie blok tabelarnog prikaza, odnosno tabelu tbody - Slui za logino grupisanje elemenata koji pripadaju glavnom delu (body) tabele thead - Slui za logino grupisanje elemenata koji pripadaju zaglavlju (header) tabele th - Definie eliju zaglavlja (header-a) tabele tr - Definie red u okviru tabele td - Definie obinu eliju u okviru tabele caption - Definie naslov tabele col - Definie kolonu u okviru tabele colgroup - Definie grupu kolona u okviru tabele tfoot - Slui za logino grupisanje elemenata koji pripadaju donjem delu (footer) tabele

    Atributi

    Tagovi mogu imati atribute, koji im dodeljuju dodatne vrednosti. Atribut se uvek pie u prvom delu, odnosno nakon to je tag otvoren. Atributi su sastavljeni iz dva dela naziv="vrednost". Lista nekoliko bitnih atributa: id - Jedinstveni identifikator elementa

    class - Dodeljuje elementu jednu ili vie podklasa title - Definie naziv elementa alt - Slui za definisanje alternativnog teksta (npr. ako se slika ne uita prikae se alt) href - Definie sa kojim dokumentom je link povezan src - Odreuje izvor slike, tj. putanju do nje style - Definie umetnute (inline) stilove elementa

    HTML nije dovoljan za kreiranje kompletnog web sajta i danas je neraskidivo vezan za CSS, o kom takoe moete da proitate uvodni tutorijal.

    Stilovi definiu izgled web stranica, pa samim tim spadaju u osnove kreiranja istih. U uvodnom tutorijalu proi emo kroz osnovne pojmove CSS-a, i ukratko opisati neke od bitnih elemenata, koji e biti detaljno obraeni kroz praktine primere i tutorijale o kodiranju izraenog dizajna (konverzija PSD u HTML/CSS).

    CSS (CascadingStyleSheets) je stilski jezik, koji se koristi za formatiranje i definisanje izgleda HTML stranica.

    Stilove je mogue koristiti na 3 naina: Eksterni CSS fajl

    Eksterni CSS fajlovi se koriste za vie stranica koje koriste iste stilove. Sa eksternim stilovima moete menjati celokupan izled sajta menjanjem samo jednog fajla. Mogue je i korienje vie eksternih fajlova (idealno za definisanje odeljaka na stranici).1 2 3 <head> <link href="/css/general.css" rel="stylesheet" type="text/css" /> </head>

    Interni stil

    Interni stilovi se koriste kada pojedinane stranice imaju jedinstvene stilove (to je malo kada sluaj).1 2 3 4 5 <head> <style> a {color: #fff;} </style> </head>

    Umetnuti stil

    Umetnuti stilovi se kotiste direktno na HTML elementima, ali se ne preporuuju jer time ponitavate sve globalne stilove primenjene na taj element.1 <a style="color:#fff">Link</a>

    Zato eksterni CSS fajl?

    Na ovaj nain svi stilovi se nalaze u jednom ili nekoliko fajlova (multi stilovi), koji se uitaju jednom i ostaju uitani u ke memoriji, pa je odziv znatno bri. Za razliku od internih i umetnutih stilova, sve stilove elemenata definiete na jednom mestu, dok bi, ukoliko bi stil bio u okviru HTML dokumenta, promena morala da se izvri na svakom mestu gde se taj element nalazi.

    Izbegavajte korienje internih i umetnutih stilova u vaim stranicama.

    CSS sintaksa

    CSS sintaksa se sastoji iz dva glavna dela: selektor deklaracija (jedna ili vie)

    Deklaracija se deli na osobinu i vrednost.1 h1 {font-size: 20px; color: #fff;}

    h1 - selektor font-size: 20px i color:#fff - deklaracije font-size, color - osobina 20px, #fff - vrednosti

    Deklaracije se grupiu unutar vitiastih zagrada { }, a svaka deklaracija se zavrava oznakom ;.

    Komentari u CSS-u piu se unutar /* */1

    /*ovo je komentar*/

    CSS sintaksu moete pisati jednolinijski ili vielinijski. Odaberite sami kako vam vie odgovara.1 2 3 4 5 6 7 8 /*jednolinijska sintaksa*/

    h1 {font-size: 20px; color: #fff;}

    /*vielinijska sintaksa*/ h1 { font-size: 20px; color: #fff; }

    Selektori: Univerzalni selektor (*)

    Selektuje sve elemente u dokumentu.1

    * {margin: 10px}

    Svi elementi u dokumentu imae marginu veliine 10px. Selektor po tipu elementa

    Selektuje sve elemente odreenog tipa.1

    ul {margin: 10px}

    a {margin: 10px}

    Svi ul i a elementi imae marginu veliine 10px. Selektor klase

    Oznaava se takom (.) i selektuje elemente sa datim nazivom klase.1 {deklaracija}

    .imeKlase

    ID selektor

    Oznaava se hash-om (#) i selektuje elemente sa odreenim ID-om.1 {deklaracija}

    #mojId

    Selektor atributa

    Pise se unutar uglastih zagrada ([]) i selektuje elemente sa odreenim atributima.1 input[type="submit"] {deklaracija}

    Pseudo-klase

    Oznaavaju se dvotakom (:). Neke od pseudo-klasa su :link, :active, :visited, :hover, :focus.1 a:hover {deklaracija}

    Detaljnije o CSS selektorima u sledeem tutorijalu.

    Osobine (property): Osobine pozadine:

    background - definie sve osobine pozadine u jednoj deklaraciji background-attachment - definie da li e pozadinska slika biti fiksirana ili e se skrolovati sa ostatkom stranice background-color - boja pozadine background-image - pozadinska slika background-position - definie poetnu poziciju pozadinske slike background-repeat - definie da li e se i kako pozadinska slika ponavljati Osobine ivica (border): border - definie sve osobine ivice elementa u jednoj deklaraciji border-bottom/left/right/top - definisanje osobina svake ivice pojedinano border-color - podeavanje boje svih ivica border-style - definisanje stila svih ivica border-width - definisanje irine svih ivica Osobine dimenzija: height - postavlja visinu elementa max-height - postavlja maksimalnu visinu elemnta min-height - postavlja minimalnu visinu elementa width - postavlja irinu elementa max-width - postavlja maksimalnu irinu elementa min-width - postavlja minimalnu irinu elementa Osobine fonta: font - definie sve osobine fonta u jednoj deklaraciji font-family - definie porodicu fonta koja se koristi (Arial, Helvetica, Droid Sans...) font-size - veliina fonta font-style - stil fonta font-weight - irina/debljina fonta Osobine liste: list-style - definie sve osobine liste u jednoj deklaraciji list-style-image - definie sliku za obeleiva stavke u listi list-style-position - definie poziciju slike kao obeleivaa stavke

    list-style-type - definie vrstu obeleivaa stavke u listi Osobine margina: margin - razmak elementa od ostalih elemenata, u sva 4 pravca; definie sve osobine margina u jednoj deklaraciji margin-bottom/left/right/top - definie osobine svake pojedinane margine Osobine poveanja unutar elementa (padding): padding - za razliku od margina koje postavljaju razmak ka drugim elementima, padding poveava prostor unutar elementa i tako stvara razmak, takoe u sva 4 pravca; definie sve osobine padding-a u jednoj deklaraciji padding-bottom/left/right/top - osobine padding-a u na svakoj strani pojedinano Osobine pozicioniranja: position - definie vrstu pozicioniranja elementa bottom/left/right/top - definie poziciju elementa prema donjoj/levoj/desnoj/gornjoj ivici elementa u odnosu na koji je pozicioniran float - definie da li i na koju stranu element treba da "lebdi", odnosno da li da bude postavljen maksimalno levo/desno z-index - definie nivo pozicioniranog elementa u okviru slojeva Osobine teksta: color - boja teksta letter-spacing - razmak izmeu slova line-height - visina linije teksta text-align - definie poravnjanje teksta text-decoration - definie da li i kakve dodatke tekst ima text-transform - definie pisanje velikih slova u tekstu, da li da bude veliko samo prvo ili sva ili nijedno slovo .

    You might also like