of 35

Uvod u web programiranje: Uvod u HTML

Dec 17, 2016

ReportDownload

Documents

truongcong

  • Uvod u web programiranje:Uvod u HTML

    Dubrovnik, oujak 2013.

    Krunoslav ubrini

    Zatieno licencom http://creativecommons.org/licenses/by-nc-sa/3.0/hr/

  • Uvod u web programiranje: Uvod u HTML 2

    Creative Commonsslobodno smijete:

    dijeliti umnoavati, distribuirati i javnosti priopavati djelo remiksirati preraivati djelo

    pod slijedeim uvjetima: imenovanje. Morate priznati i oznaiti autorstvo djela na

    nain kako je specificirao autor ili davatelj licence (ali ne nain koji bi sugerirao da Vi ili Vae koritenje njegova djela imate njegovu izravnu podrku).

    nekomercijalno. Ovo djelo ne smijete koristiti u komercijalne svrhe.

    dijeli pod istim uvjetima. Ako ovo djelo izmijenite, preoblikujete ili stvarate koristei ga, preradu moete distribuirati samo pod licencom koja je ista ili slina ovoj.

    U sluaju daljnjeg koritenja ili distribuiranja morate drugima jasno dati do znanja licencne uvjete ovog djela. Najbolji nain da to uinite je linkom na ovu internetsku stranicu. Od svakog od gornjih uvjeta mogue je odstupiti, ako dobijete doputenje nositelja autorskog prava. Nita u ovoj licenci ne naruava ili ograniava autorova moralna prava.

    Tekst licence preuzet je s http://creativecommons.org/.

  • Kako funkcionira Web

    Uvod u web programiranje: Uvod u HTML 3

    Prilagoeno iz: E. Freeman & E. Freeman, Head First HTML with CSS & XHTML, O'Reilly, 2006

  • Web server i web preglednik

    Uvod u web programiranje: Uvod u HTML 4

    Prilagoeno iz: E. Freeman & E. Freeman, Head First HTML with CSS & XHTML, O'Reilly, 2006

  • Web preglednik

    Uvod u web programiranje: Uvod u HTML 5

    Prilagoeno iz: E. Freeman & E. Freeman, Head First HTML with CSS & XHTML, O'Reilly, 2006

  • Adresa web stranice

    ? Kako web preglednik zna pronaimjesto na kojem se nalazi web stranica?

    ! Svaka web stranica ima jedinstvenu adresu (tzv. URL (uniform resource locator)

    Uvod u web programiranje: Uvod u HTML 6

  • Prikaz sadraja web stranice

    ? Kako web preglednik zna kakoiscrtati sadraj web stranice?

    ! HTML kod sadri sve informacije o sadraju i izgledu web stranice.

    Uvod u web programiranje: Uvod u HTML 7

  • Kako izgleda HTML?

    Klub "Kod smrznutog pingvina"

    Dobrodoli u klub "Kod smrznutog pingvina"

    Klub "Kod smrznutog pingvina" je prostor u kojem moete provesti ugodne trenutke sami ili u drutvu itajui, sluajui glazbu, igrajui drutvene igre ili ispijajui bezalkoholna pia.Beini internetje dostupan tako da moete surfati ili provjeriti elektroniku potu.

    Kako do nas

    Siete na treoj stanici od Pila, skrenete desno pa produite cca. 300 metara.

    Uvod u web programiranje: Uvod u HTML 8

    klub-01.html

  • HTML u web pregledniku

    Uvod u web programiranje: Uvod u HTML 9

  • ime pisati HTML?

    Vlastita web stranica Zapoeti u obinom ureivau teksta kako bi se

    upoznali s elementima i pravilima izrade HTML-a Nakon toga moete prijei na vizualne ureivae

    elite li vie mogunosti moete koristiti gotove sustave za upravljanje sadrajem (CMS) Joomla! Wordpress Drupal

    Uvod u web programiranje: Uvod u HTML 10

    Adobe Dreamweaver

    MS Expression WebMS Share Point Designer

    Izgled stranica u CMS-ovima prilagoavate sami pomou HTML-a, CSS-a i JS-a.Manje ambiciozni mogu koristiti gotove predloke.

    Notepad++

  • Uvid u HTML kod

    Uvod u web programiranje: Uvod u HTML 11

    Klub "Kod smrznutog pingvina"

    Dobrodoli u klub "Kod smrznutog pingvina"

    Klub "Kod smrznutog pingvina" je prostor u kojem moete provesti ugodne trenutke sami ili u drutvu itajui, sluajui glazbu, igrajui drutvene igre ili ispijajui bezalkoholna pia.Beini internetje dostupan tako da moete surfati ili provjeriti elektroniku potu.

    Kako do nas

    Siete na treoj stanici od Pila, skrenete desno pa produite cca. 300 metara.

    1

    23

    5

    6

    7

    4

    Omoguuje prikaz "naih" slova na web stranici. Kodne stranice koje podravaju "naa" slova su utf-8 i windows-1250. Koju od njih trebate koristiti, ovisi o postavkama ureivaa teksta koji koristite.

    Naziv stranice/kartice

    Slika Naglaeni tekst

    Hiperveza

    PodnaslovTekst odlomka

    8

    Naslov odlomkaMogu se definirati odlomci na 6 razina (, )

  • Uvod u web programiranje: Uvod u HTML 12

    Omoguuje prikaz naih slova na web stranici. Ako se slova ne prikazuju ispravno, kodnu stranicu moete promijeniti kroz View->*Encoding izbornik web preglednika.

    1

    2

    3

    6 7

    Naslov odlomka

    Web preglednici mogu standardno prikazati samo slike u .jpg, .png i .gif formatu

    Naglaeni tekst Hiperveza prema drugoj HTML

    stranici

    Podnaslov Tekst odlomaka

    Naziv stranice/kartice

    4 5

    8

  • Uvod u anatomiju (HTML dokumenta)

    Uvod u web programiranje: Uvod u HTML 13

    poetna i zavrna oznaka svakog dokumenta

    zaglavlje dokumenta

    naslov dokumenta

    tijelo dokumenta

    naslov odlomka

    tekst odlomka

  • Uvod u anatomiju (HTML elementa)

    Uvod u web programiranje: Uvod u HTML 14

  • Koncepti HTML-a

    Uvod u web programiranje: Uvod u HTML 15

    Tekst odlomka

    ElementUnutar sebe moe imati tekst ili ugnijeene druge elemente.

    Oznake Veina elemenata ima 2 oznake: poetnu i zavrnu.Zavrna oznaka ima znak / prije svog naziva

    = poetna oznaka

    = zavrna oznaka

    Neki elementi imaju samo 1 oznaku. Oni zavravaju znakom /prije zavrnog > = slika = prijelom retka

  • Koncepti HTML-a

    Uvod u web programiranje: Uvod u HTML 16

    Tekst odlomka

    atribut vrijednost atributa

    Elementi mogu imati atributeVrijednost atributa pridruuje se znakom jednakosti i navodi se pod navodnicima

    Elementi mogu biti ugnjeeniunutar drugih elemenata i ne smiju se preklapati

    Ugnjeivanje

    Neki sadraj

    Preklapanje

    Neki sadraj

    atribut vrijednost atributa

  • Kako djeluju atributi

    Uvod u web programiranje: Uvod u HTML 17

    Tekst odlomka

    1

    Sav tekst unutar ovog odlomka prikazati e se obojan plavom bojom

    Web preglednik e sliku "slika.jpg" koja se nalazi u istom folderu kao ova web stranica (vrijednost src atributa) prikazati tako da njezina irina (vrijednost width atributa) bude tono 50px. Automatski e smanjiti njezinu visinu kako bi omjer irine i visine ostao nepromijenjen. Isto se moe postii tako da se smanji njezina visina (vrijednost atributa height).NEMOJTE jako smanjivati sliku na ovaj nain (npr. sliku veliine 3000*2000 px smanjiti na veliinu 30*20) jer se s web servera pregledniku uvijek alje slika izvorne veliine.

    2

  • Kako djeluju atributi

    Uvod u web programiranje: Uvod u HTML 18

    1

    Visina slike zadana je da bude 250px. Web preglednik proporcionalno smanjuje visinu slike tako da omjer ostane sauvan.

    Zadali ste tonu irinu (250px) i visinu (50px) slike. Slika je sada izobliena jer niste vodili raunao njihovom omjeru!PAZITE ako mijenjate i irinu (width) i visinu (height) kako ne biste pokvarili omjer! Osim ako to ne elite

    2

    img-width.html

  • 1. zadatak: Moja prva web stranica Izmijenite web stranicu klub-01.html tako da rezultat

    izgleda kao na ovom slajdu Sliku moete pronai na adresi: http://goo.gl/hPo1a Linkovi vas trebaju odvesti na lanak Wikipedije koji

    govori o HTML-u

    Uvod u web programiranje: Uvod u HTML 19

  • 1. zadatak: Moja prva web stranica

    Uvod u web programiranje: Uvod u HTML 20

    Naslov web stranice Naslov i odlomka i boja teksta

    Hiperlinkovi na adresuhttp://en.wikipedia.org/wiki/HTML

    Slika s adrese http://goo.gl/hPo1aTrebate podesiti irinu ili visinu slike (atributi width ili height)

  • Osnovno formatiranje sadraja

    Prikazom u web pregledniku gubi se poetno formatiranje sadraja

    Uvod u web programiranje: Uvod u HTML 21

    ///\\___(@ @)

    +----oOO----(_)-----------+| I ja uim || osnove || HTML-a |+-----------------oOO-----+

    |__|__| || ||ooO Ooo

    format-1.html

  • Osnovno formatiranje sadraja

    Ouvanje formatiranja sadraja oznake

    tekst se prikazuje zadanim fontom fiksne irine

    Uvod u web programiranje: Uvod u HTML 22

    format-2.html

    ///\\___(@ @)

    +----oOO----(_)-----------+| I ja uim || osnove || HTML-a |+-----------------oOO-----+

    |__|__| || ||ooO Ooo

  • Osnovno formatiranje sadraja

    Uvod u web programiranje: Uvod u HTML 23

    elimo li sauvati izabrane fontove, a prelomiti redak koristimo element

    elimo li u tekstu prikazati prazninukoristimo posebnu oznaku

    +-------------------|I mi uimo|osnove| HTML-a+-------------------

    format-3a.html

    Sve posebne oznake na poetku imaju znak &(ampersand), a na kraju ;(toku-zarez)!

    Znak Oznaka< >

    " "

    ' '

    praznina

  • Osnovno formatiranje teksta

    Uvod u web programiranje: Uvod u HTML 24

    Oznaka Prikaz

    Jako naglaenNaglaen tekstProgramski kodCitatOvo je indeksOvo je potencijaOvo je uveano

    Jako naglaenNaglaen tekstProgramski kod

    CitatOvo je indeksOvo je potencija

    Ovo je uveanoPodebljan tekstNakoen tekstFont fiksne irine

    Podebljan tekstNakoen tekstFont fiksne irine

    format-4.html

  • 2. zadatak: "Razlomljena" stranica

    Uvod u web programiranje: Uvod u HTML 25

    Izmijenite i nadopunite sadraj vae prve web stranicu tako da rezultat izgleda kao na ovom slajdu

  • 2. zadatak: "Razlomljena" stranica

    Uvod u web programiranje: Uvod u HTML 26