1 / 23

HTML

HTML. Slike , Hipertekst veze , Liste , Linije , Tabele Pripremio : nastavnik Dusan Masic ST Š “Nikola Tesla”, Sremska Mitrovica. Slike. Za slike k oristi se html tag < img > sa obaveznim atributom src (skraćeno od source) < img src =“ putanja do slike ">

will
Télécharger la présentation

HTML

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. HTML Slike, Hipertekstveze, Liste, Linije, Tabele Pripremio: nastavnik Dusan Masic STŠ “Nikola Tesla”, Sremska Mitrovica

  2. Slike • Za slike koristi se html tag <img>sa obaveznim atributom src (skraćeno od source) • <img src=“putanja do slike"> • Neki od atributa za slike: • Width – širina slike u pikselima • Height – visina slike u pikselima • Alt – tekst za web čitače koji ne prikazuju slike • Border – okvir oko slike u pikselima

  3. Slike - vežba • Kopirajte sliku sunset.jpg u vaš folder gde će biti sačuvan vaš html dokument i probajte da napravite stranicu kao na slici ispod (širina slike je 400px, visina slike 175px

  4. Slike – rešenje vežbe <html> <head> <title> Dodavanje slike </title> </head> <body> <imgsrc=“sunset.jpg" width="400“height="175" alt=“Photo of Florida Sunset" border="3"/> </body> </html>

  5. Poravnavanje slika i teksta • Bez poravnavanjaslikaitekst se nalazenalevojstraničitačevogprozora <html> <head> <title> Dodavanje slike </title> </head> <body> <imgsrc=“sunset.jpg" width="400" height="175" alt="Photo of Florida Sunset" border="3"/> <p> Slikazalaska sunca </p> </body> </html>

  6. Poravnavanje slika i teksta • Koristićemo CSS za poravnavanje teksta i slike<div style="text-align:poravnanje"> …. </div> • Poravnanje može biti: • Left – uz levu ivicu • Right – uz desnu ivicu • Center – centrirano • Justify – po obe ivice

  7. Poravnavanje slika i teksta • Slikaitekstnasredini <html> <head> <title> Dodavanje slike </title> </head> <body> <div style="text-align:center"> <imgsrc=“sunset.jpg" width="400" height="175" alt="Photo of Florida Sunset" border="3"/> <p> Slikazalaska sunca </p> </div> </body> </html>

  8. Hiperlink • Hiperlinkovi (eng. link veza) predstavljajumogućnostda se klikom mišem pređe sa jednog dokumenta na drugi. • Linkovi mogu da ukazuju na: • drugi dokument, • drugi deo unutar dokumenta, • bilo koji resurs (ne obavezno HTML datoteka). • Html kodzahiperlink je: <a href=“adresa”>Tekstlinka </a>hrefatributpredstavljadestinacijulinka

  9. Apsolutniirelativnihiperlinkovi <html> <head> </head> <body> <h1>Linkovi</h1> <p> Ovaj primer sadrži <a href=“index.html”>link</a> sarelativnomputanjomnafajl index.html. </p> <p> Ovaj primer sadrži <a href=“http://www.google.com”>link</a> saapsolutnomputanjomna Google. </p> </body> </html>

  10. HTML oznakebloka - citati • Tagblockquote služi za veće blokove citata • obično se predstavlja kao blok teksta uvučen u odnosu na ostatak. • Tagcite se koristi za kraće citate i uglavnomispisuje tekst italikom • koristi se za citate unutar teksta. • Tag codesluži za kratke (manje od jednog reda) listinge (unutar teksta).

  11. HTML oznakebloka – citati - primer <html> <head> </head> <body> <p>Ovojeobicantekstkojijelevoporavnat.</p> <blockquote> Tekstovogpasusajeblokcitata. </blockquote> <p>Ovojetrećipasus, unutarkojegćebitinavedencitat. <cite>Ovoćemoposmatratikaocitat.</cite></p> </body> </html>

  12. Liste • Liste se koristezaraznevrstenabrajanja • Postojetrivrstelista: • unordered (neuredjena) lista, • ordered (numerisana) lista i • definiciona iliopisnalista.

  13. Neoznačena lista • Neoznačena lista počinje tagom <ul>(Unordered List) • Elementi liste se označavaju tagom <li>(List Item). <p> Voce: <ul> <li>jabuka</li> <li>kruska</li> <li>jagoda</li> </ul> <p>

  14. Numerisanalista • Numerisana(označena) lista počinje tagom <ol>(Ordered List) <p>Povrce: <ol> <li>paprika</li> <li>kupus</li> <li>paradajz</li> </ol> </p>

  15. Definicionailiopisnalista • Opisne listeopisujulogičkustrukturukojaodgovaralistipojmovakoji se definišu. Otuda se opisnelistenazivajuidefinicioneliste. • Tag započetak opisnelisteje <dl> • Tag zaelemente je <dt>, a tag zadefiniciju je <dd> <DL> <DT>piko:<DD> prefiksnekojjedinicikojipokazujemilionitideomilionitogdelatejedinice; <DT>nano:<DD> prefiksnekojjedinicikojipokazujemilijarditideotejedinice; </DL>

  16. Horizontalne linije • HTML tag za liniju je <hr> • Nekiodatributa: • Width – dužina linije. Može biti u pikselima ili u procentina, npr. <hr width=“50%”> • Size – debljinalinije u pikselima • Align – poravnavanjelinijenpr. <hr Align=“center”>

  17. HTML tabele • HTML tabele pružaju dve značajne mogućnosti: • Tabelarno prikazivanje teksta i brojeva • Precizno raspoređivanje objekata na Web stranici • Tabele se čitaju s leva na desno – pružaju vrlo pregledan uvid u podatke koji su stavljeni u ćelije

  18. HTML Tabele • Tag zatabelu je <table></table> • <tr> </tr> tag za red tabele • <td> </td>tag zaćeliju u tabeli • Nekiodatributa: • Border(okvir, ram) kojiopisuješirinuspoljašnjegokviratabele; • Cellspacingkojiopisuješirinulinijekojarazdvajadvećelije; • Cellpaddingkojiopisujeprostorokosadržajaćelije; • Widthkojiopisujeukupnuširinutabele.

  19. HTML tabele <html> <head> <title> Tabela 2</title> </head> <body> <table border=“1”> <tr><td>A</td> <td>B</td> </tr> <tr><td>C</td> <td>D</td> </tr> <tr><td>E</td> <td>F</td> </tr> </table> </body> </html>

  20. Dodavanje zaglavlja i naslova • <caption></caption>govori čitaču da tekst između ovih oznaka treba da oblikuje u stilu naslova (većina čitača podeblja font) • <th> </th> govori čitaču da tekst između ovih oznaka treba da formatira kao zaglavlje

  21. Dodavanje zaglavlja i naslova <html> <head> <title> Zaglavlje u redu</title> </head> <body> <table border=“1”> <caption> Zaglavlje u redu </caption> <tr><th>Naslov 1</th> <th>Naslov 2</th> </tr> <tr><td>1.vrsta, Proizvod 1</td> <td>1.vrsta, Proizvod 2</td> </tr> <tr><td>2.vrsta, Proizvod 1</td> <td>2.vrsta, Proizvod 2</td> </tr> </table> </body> </html>

  22. Ćelije koje se protežu na više kolona ili više redova • Za postavljanje ćelije duž više redova, koristi se atribut rowspan u oznaci ćelije <td> ili <th> • Za postavljanje ćelije duž više kolona atribut colspan u oznaci ćelije <td> ili <th>

  23. Ćelije koje se protežu na više kolona ili više redova <html> <head> <title> Različite širine i visine ćelija </title> </head> <body> <table border="1"> <tr> <th>Naslov 1</th> <th>Naslov 2</th> <th>Naslov 3</th> </tr> <tr> <td rowspan="2">vrsta1&2, kolona 1</td> <td>vrsta 1, kolona 2</td> <td rowspan="2"> vrsta 1&2, kolona 3</td> </tr> <tr><td>vrsta 2, kolona 2</td></tr> <tr> <td colspan="2">vrsta 2, kolona 1&2</td> <td> vrsta 3, kolona 3 </td> </tr> </table> </body> </html>

More Related