1 / 59

HTML HyperText Markup Language

HTML HyperText Markup Language. Vlaho Mihač Primijenjeno/poslovno računarstvo Sveučilište u Dubrovniku. Sadržaj. Uvod Osnove HTML-a Zaključak Literatura. Uvod. HTML je kratica za HyperText Markup Language , š to zna č i prezentacijski jezik za izradu web stranica .

kishi
Télécharger la présentation

HTML HyperText Markup Language

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTMLHyperText Markup Language Vlaho Mihač Primijenjeno/poslovno računarstvo Sveučilište u Dubrovniku

  2. Sadržaj • Uvod • Osnove HTML-a • Zaključak • Literatura

  3. Uvod HTML je kraticazaHyperText Markup Language, što značiprezentacijskijezikzaizradu web stranica. Hipertekstdokumentstvara se pomoću HTML jezika. HTML jezikomoblikuje se sadržajistvaraju se hipervezehipertext dokumenta. Prikazhipertekstdokumentaomogućuje web preglednik. Temeljnazadaća HTML jezika jest uputiti web preglednikkakoprikazatihipertekstdokument. Pritome se nastojidatajdokumentizgledajednakobezobziraokojemuje web pregledniku, računaluioperacijskomsustavuriječ.

  4. Uvod HTML nijeprogramskijezikniti su ljudikojigakoristeprogrameri. Njimenemožemoizvršitinikakvuzadaću, pačak ni najjednostavnijuoperacijuzbrajanjailioduzimanjadvajucijelihbrojeva. Onslužisamozaopisnašihhipertekstualnihdokumenata. Htmldatoteke su zapravoobičnetekstualnedatoteke, eksenzijaim je .htmlili .htm. Osnovnigrađevnielementsvakestranice su znakovi (tags) kojiopisujukakoće se neštoprikazati u web pregledniku. *Više o povijesti HTML-a, razvoju i verzijama možete saznati na http://hr.wikipedia.org/wiki/HTML

  5. Početak Da bismopočeliizgrađivatinašustranicumoramoimatiodređenialat. Svakakotemeljnialatbibio HTML editor i nekigrafičkiprogramzaobraduslika. HTML dokumentemoguće je unositipomoćubilokojeg programa za unos teksta. AlatkojegćukoristitiNuSpherePhpEDmože se skinutinastranicehttp://www.nusphere.com/ilijednuodverzijaprekolinkahttp://thepiratebay.se/torrent/5230122

  6. Nakonpokretanja programa prednamabi se trebaootvoritekran

  7. Idemona File => New

  8. Biramo HTML File.htmlDobivamo

  9. Dobilismohrpunečegašto ne razumijemo, naredbeu head-a ćuobjašnjavatipopotrebi, poštonam je trenutnozanimljivijibody(trenutnoizmeđu 19 i 21 linijekoda) . SvakaHTML oznaka (koja u parukreira HTML element) počinjeznakom < (manjeod), a završavaznakom > (višeod). ZatvarajućaHTML oznakakreira se naistinačinkaoiotvarajuća, ali se prijezavršnogznaka > dodajeikosacrta / (engl. slash).

  10. Primjer 1: Unesimo u body: <h1>My First Heading</h1> <p>My first paragraph.</p> Napomena: Nakonsvakeizmjenenaravnopotrebnoje spremitifile da bi izmjenabilavaljana, pa u slučajudavamnekadneštoi ne uspijeprovjeritejestelispremiliizmjeneinaravnoosvježilistranicu. (kratica Ctrl+s)

  11. Spremimofileu željenu datotelu i nadjenemo mu ime, pokrenemoikonu.

  12. Izmjena imena stranice Na liniji 16 <title>Untitled</title>možemopromijenitinaslovnašeprvestranice, pa gapromijenimo u Mojaprvastranica Između tagova upišite ime: <title>Mojaprvastranica</title>

  13. Objašnjenjeprimjera 1: • tekstizmeđu <html> i </html> opisuje web stranicu • tekstizmeđu <body> i </body> je vidljivisadržajstranice • tekstizmeđu <h1> i </h1> prikazuje se kaonaslov • tekstizmeđu <p> i </p> prikazuje se kao paragraph

  14. HTML paragrafi (HTML Paragraphs) HTML paragrafidefiniraju se tagom <p>. Primjer 1.1: Unesiteispodprvogparagrafa <p>This is another paragraph.</p> Spremiteizmjene, osvježitestranicu. Primijetimodapreglednikautomatskidodajepraznulinijuprije Izaparagrafa.

  15. HTML linijeTag <hr> stvarahorizontalnulinijuna HTML stranicikojanammožeslušitizaodvajanjesadržaja. <body> <h1>My First Heading</h1> <hr><p>My first paragraph.</p> <hr><p>This is another paragraph.</p> <hr/> </body>

  16. HTML komentari Komentarimogubitiubačeni u HTML kodda bi bio čitljivijiirazumniji. Preglednik (browser) ignorirakomentarei ne prikazujeih. Komentari se pišuovako: <!--Ovo je Sparta! Ovaj, komentar… -->

  17. HTML naslovi (HTML Headings)Naslovisubitni u HTML dokumentima. HTML naslovisudefiniranitagovimaod <h1> do <h6> . Gdje <h1> označavanajvažnijinaslov a <h6> najmanjevažni naslov. Preporučuje se korištenjenaslovasamozanaslove, ne kako bi se nekihiotekstaboldaoilipovećaoizrazlogaštotražilicetj. pretraživačikoristenaslovekao bi prepoznalisadržajstranice. Također je bitnodakodbrzinskogpregledavanjakorisnika (prelijetanja)prekostranicenaslovimaosiguramopreglednost sadržajastranice.Gdjekoristimo tag <h1> zanajbitnije, <h2> za malomanjebitneitd

  18. Primjer – naslov <body> <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> </body>

  19. HTML linkovi (HTML Links)HTML linkovidefiniraju se tagom <a>. Primjer – link 1 <body> <a href=" http://www.unidu.hr/ ">Sveučilište u Dubrovniku</a> </body> Primijetimoda se link (veza) nalaziunutarhrefatributa.

  20. Primjer – link 2 Akoželimodanam se link otvori u novom prozoru. <body> <a href=" http://www.unidu.hr/ " target="_blank">Sveučilište u Dubrovniku</a> </body>

  21. HTML slike (HTML Images) HTML slikedefiniraju se tagom <img>. Primjer – slika 1 <body> <imgsrc="http://www.maribic.com/_images/unidu.jpg" width="300" height="300"> </body> Primjetiteda se link iveličinazadavajukaoatributi.

  22. HTML slike (HTML Images) Primjerslika 2 Slikakaopoveznicana link. <body> <a href="http://www.unidu.hr/"><img src="http://www.maribic.com/_images/unidu.jpg" /></a> </body>

  23. HTML elementi (HTML Elements) HTML dokumentidefiniraju se pomocu HTML elemenata. HTML element je sveizmeđupočetnogizavršnogtaga. Početni tag tag se čestonazivaiotvarajući a završni ne biste povjerovalizatvarajući tag. Većina HTML elemenatamogubitiugnježdeni (mogusadržavatidruge HTML elemente). HTML dokumentisadržeugnježdene HTML elemente.

  24. HTML elementi (HTML Elements) Sintaksa • HTML element počinje s početnim / otvarajućimtagom • HTML element završava s završnim / zatvarajućimtagom • sadržajelementa je sveizmeđupočetnogizavršnogtaga • neki HTML elementiimajuprazansadržaj

  25. Prazni HTML dokumenti(Empty HTML Elements) HTML elementikoji ne sadrženikakvsadržajnazivajuse prazni elementi. <br> je prazni element bezzatvarajućegtaga (<br> tag definira line break). Tag <br> možemokoristitakoželimonovulinijubezda započnemonoviparagraf. <p>Ovo je<br>ispr<br>ekidaniparagraf</p>

  26. Prazni HTML dokumenti (Empty HTML Elements) U XHTML-u, svielementimorajubitizatvoreni. Dodavanjekosecrte (slash-a) unutarotvarajućeg tag-a, kaonpr <br />, je ispravannačinzatvaranja praznogelementa u XHTML ( i XML). Također HTML tagovinisuosjetljivinavelikai mala slova: takoda <P> značiistoštoi <p>. Dosta web stranicakoristevelikaslovaza HTML tagove, iako se preporučujekorištenjemalihslova.

  27. HTML atributi (HTML Attributes) Atributipružajudodatneinformacije o HTML elementima. Dakle HTML elementimogusadržavatiatributekojipružaju dodatneinformacije o elementu, uvijek se određuju u otvarajućemtagu, dolazeuvijek u paru s vrijednosti. npr. <a href=" http://www.unidu.hr/ " target="_blank">Ovo je link</a>

  28. HTML atributi (HTML Attributes) Vrijednostiatributauvijek se nalazeomeđeninavodnicima. Uglavnom se koristedvostrukinavodniciiakosujednostruki takođerdozvoljeni. U nekimrijetkimsituacijamapotrebno je korištenjejednostrukihnavodnika. npr. name=’Andrej "STARKA" Pavlović’ Imenaatributainjihovevrijedostinisuosjetljivinavelikai mala slova, ali se preporučujekorištenjemalihslovakako je većprije navedeno.

  29. HTML oblikovanjeteksta HTML koristitagovepoput <b> i <i> zaoblikovanje output-a, poput bold or italicteksta. TakviHTML tagovizovu se tagovizaoblikovanje. Postojirazlikaizmeđutagova; <b> i <i> se uglavnomkoriste samoza bold i italic, dok se kodtaga <strong> ili <em> podrazumijevadasmohtjelitajdiotekstapredstavitikaovažan.

  30. HTML oblikovanjeteksta HTML Text Formatting Tags Tag - Description <b>Defines bold text <big>Defines big text <em>Defines emphasized text  <i>Defines a part of text in an alternate voice or mood <small>Defines small text <strong>Defines strong text <sub>Defines subscripted text <sup>Defines superscripted text <ins>Defines inserted text <del>Defines deleted text

  31. HTML oblikovanjeteksta HTML "Computer Output" Tags TagDescription <code>Defines computer code text <kbd>Defines keyboard text  <samp>Defines sample computer code <tt>Defines teletype text <var>Defines a variable <pre>Defines preformatted text

  32. HTML oblikovanjeteksta HTML Citations, Quotations, and Definition Tags TagDescription <abbr>Defines an abbreviation <acronym>Defines an acronym <address>Defines contact information for the author/owner of a document <bdo>Defines the text direction <blockquote>Defines a section that is quoted from another source <q>Defines an inline (short) quotation <cite>Defines the title of a work <dfn>Defines a definition term

  33. HTML oblikovanjeteksta Primjeroblikovanjetaksta <p><b>Ovo je nekiparagraf – bold</p> <p><big>Ovo je nekiparagraf– big</p> <p><em>Ovo je nekiparagraf – em</p> <p><i>Ovo je nekiparagraf – i</p> <p><small>Ovo je nekiparagraf – small</p> <p><strong>Ovo je nekiparagraf – strong</p> <p><sub>Ovo je nekiparagraf – sub</p> <p><sup> Ovo je nekiparagraf – sup</p> <p><ins> Ovo je nekiparagraf – ins</p> <p><del>Ovo je nekiparagrapf– del</p>

  34. HTML oblikovanjeteksta

  35. HTML <head>The HTML <head> Element <head> elemetsadržisve <head> elemente. Elementiunutar <head> mogusadržavatiskripte, instrukcije pregledniku (browser-u) gdjenanađe style sheet-ove, itd… Određenitagovimogubitidodani u <head>: <title>, <base>, <link>, <meta>, <script>, i <style>. *Zakojiželeznativiše: http://www.w3schools.com/html/html_head.asp

  36. HTML <head>The HTML <head> Element HTML head Elementi TagDescription <head>Defines information about the document <title>Defines the title of a document <base>Defines a default address or a default target for all links on a page <link>Defines the relationship between a document and an external resource <meta>Defines metadata about an HTML document <script>Defines a client-side script <style>Defines style information for a document

  37. HTML Styles – CSS CSS (Cascading Style Sheets) koristi se zauređivanje HTML elemenata, je predstavljenzajedno s HTML 4, da bi poboljšao uređivanje HTMLelemenata. CSS možebitidodan HTML-u naodređenenačine: • Inline – koristećistiloveatributa HTML elemenata • Internal - koristeći <style>element u <head> dijelu • External – koristećivanjski CSSfile Preferira se dodavanje CSS-a HTML-u dadavanjem CSS sintakseuodvojeni CSS file.

  38. HTML Styles – CSS Dodavanje CSSdokumenta: File => New =>

  39. CSS document trebaspremitinaistomjestogdjeiodgovarajući HTML dokument, teihpovezatiprekolinije 17 u HTML-u takodaunesemoime CSS-a izmeđuzadnjihnavodnika.

  40. HTML Styles – CSS CSS background svojstva se koristezadefinicijupozadinskogefektaelemenata. CSS svojstvakorištenaza background efekte: • background-color • background-image • background-repeat • background-attachment • background-position

  41. HTML Styles – CSS Background-color Služinamzapostavljanjepozadinskebojeelementa. CSS boje- http://www.w3schools.com/cssref/css_colors.asp

  42. HTML Styles – CSS

  43. HTML Styles – CSS Na sličannačinmožemouređivatiinasloveiparagrafe: ->html  <h1 id="n1">Uređivanjepomoću CSS-a</h1> <p id="p1"> Prviparagraf</p> <p class="p2"> Drugiparagraf</p> <p class="p2"> Trećiparagraf</p> ->css body{background-color:blue;} #h1{background-color:red;} #p1{ background-color:green;} .p2{background-color:white;}

  44. HTML Styles – CSS All CSS Background Properties Property - Description Background - Sets all the background properties in one declaration background-attachment - Sets whether a background image is fixed or scrolls with the rest of the page background-color - Sets the background color of an element background-image - Sets the background image for an element background-position - Sets the starting position of a background image background-repeat - Sets how a background image will be repeated

  45. HTML Tablice Definiraju se tagom <table>. Tablica je podjeljenja u retke ( tag <tr> ),a svakiredak u stupce, tag <td>. Na sljedećoj slici prikazaja je tablica u tzv. kontejneru tj. <div>-u. <table> <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 1, cell 3</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> <td></td> <td>row 2, cell 3</td> </tr> </table>

  46. HTML Tablice

  47. HTML liste Listemogubitiuređenei neuređene. Primjeruređeneliste: 1. prvičlanliste 2. drugičlanliste 3. trećičlanliste Primjerneuređeneliste: • prvičlanliste • drugičlanliste • trećičlanliste

  48. HTML liste Neuređenalista Počinjetagom <ul>, a svaki članlistenalazi se u tagu <li> <ul><li>Coffee</li><li>Milk</li> </ul> Uređenalista Počinjetagom <ol>, a svaki članlistenalazi se također u tagu<li>

  49. HTML blokovi HTML elementimogubitizajednogrupiranipomoću<div> i <span>. <div> možekoristitikaokontejnergrupiostalih elemenata. Link za tutorial zapozicioniranje: http://www.barelyfitz.com/screencast/html-training/css/positioning/

  50. HTML blokovi HTML Grouping Tags Tag – Description <div> - Defines a section in a document (block-level) <span> - Defines a section in a document (inline)

More Related