HTML SLIKE HIPERTEKST VEZE LISTE LINIJE TABELE Slike
HTML SLIKE, HIPERTEKST VEZE, LISTE, LINIJE, TABELE
Slike Za slike koristi se html tag <img> sa obaveznim atributom src (skraćeno od source) <img src=“putanja do slike“ alt=“Opis 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 height=“ 33” ili height=“ 20%” – visina slike izražena u pikselima ili kao procenat ukupne širine cele web stranice.
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 400 px, visina slike 175 px
Slike – rešenje vežbe <html> <head> <title> Dodavanje slike </title> </head> <body> <img src=“sunset. jpg" width="400“ height="175" alt=“Photo of Florida Sunset" border="3"/> </body> </html>
Poravnavanje slika i teksta Bez poravnavanja slika i tekst se nalaze na levoj strani čitačevog prozora <html> <head> <title> Dodavanje slike </title> </head> <body> <img src=“sunset. jpg" width="400" height="175" alt="Photo of Florida Sunset" border="3"/> <p> Slika zalaska sunca </p> </body> </html>
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
Poravnavanje slika i teksta Slika i tekst na sredini <html> <head> <title> Dodavanje slike </title> </head> <body> <div style="text-align: center"> <img src=“sunset. jpg" width="400" height="175" alt="Photo of Florida Sunset" border="3"/> <p> Slika zalaska sunca </p> </div> </body> </html>
Veličina, boja i font teksta <font size="3" color="red">This is some text!</font> <font size="2" color="blue">This is some text!</font> <font face="verdana" color="green">This is some text!</font>
Hiperlinkovi (eng. link veza) predstavljaju mogućnost da 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 kod za hiperlink je: <a href=“adresa”>Tekst linka </a> href atribut predstavlja destinaciju linka
Hiperlink unutar tekuće stranice Npr. na samom početku html dokumenta tagom A navedemo da se taj deo dokumenta zove početak, da bi bio moguć povratak na početak stranice sa drugih mesta iste te stranice: <a id=“pocetak”> </a> Na mestu gde želimo da postavimo link ka početku iste stranice postavljamo tag A i navodimo kao vrednost atributa href naziv mesta ka kojem vodi link predvođeno znakom #: <a href=“#pocetak”> Povratak na početak stranice</a>
Umetnuti sadržaj Npr. ako želimo na našu stranicu da umetnemo video sa You. Tube-a: Pronađemo željeni video na You. Tube-u Ispod videa se nalazi opcija za deljenje Share, pa ispod toga Embed Pojavljuje se spreman element IFRAME sa postavljenim svim vrednostima atributa u ovorenom tagu, koji možemo da iskopiramo i umetnemo u HTML kod stranice koju kreiramo. Npr: <iframe width=“ 420” height=“ 315” src=https: //www. youtube. com/embed/WXZa. Iq 7 lg. Xk frameborder=“ 0” allowfullscreen> </iframe>
Apsolutni i relativni hiperlinkovi <html> <head> </head> <body> <h 1>Linkovi</h 1> <p> Ovaj primer sadrži <a href=“index. html”>link</a> sa relativnom putanjom na fajl index. html. </p> <p> Ovaj primer sadrži <a href=“http: //www. google. com”>link</a> sa apsolutnom putanjom na Google. </p> </body>
HTML oznake bloka - citati Tag blockquote služi za veće blokove citata obično se predstavlja kao blok teksta uvučen u odnosu na ostatak. Tag cite se koristi za kraće citate i uglavnom ispisuje tekst italikom koristi se za citate unutar teksta. Tag code služi za kratke (manje od jednog reda) listinge (unutar teksta).
HTML oznake bloka – citati primer <html> <head> </head> <body> <p>Ovo je obican tekst koji je levo poravnat. </p> <blockquote> Tekst ovog pasusa je blok citata. </blockquote> <p>Ovo je treći pasus, unutar kojeg će biti naveden citat. <cite>Ovo ćemo posmatrati kao citat. </cite></p> cite </body>
Liste se koriste za razne vrste nabrajanja Postoje tri vrste lista: unordered (neuredjena) lista, ordered (numerisana) lista i definiciona ili opisna 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>
Numerisana lista Numerisana (označena) lista počinje tagom <ol> (Ordered List) <p>Povrce: <ol> <li>paprika</li> <li>kupus</li> <li>paradajz</li> </ol> </p>
Horizontalne linije HTML tag za liniju je <hr> Neki od atributa: Width – dužina linije. Može biti u pikselima ili u procentina, npr. <hr width=“ 50%”> Size – debljina linije u pikselima Align – poravnavanje linije npr. <hr Align=“center”>
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
HTML Tabele Tag za tabelu je <table> </table> <tr> </tr> tag za red tabele <td> </td> tag za ćeliju u tabeli Neki od atributa: Border (okvir, ram) koji opisuje širinu spoljašnjeg okvira tabele; Cellspacing koji opisuje širinu linije koja razdvaja dve ćelije; Cellpadding koji opisuje prostor oko sadržaja ćelije; Width koji opisuje ukupnu širinu tabele.
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>
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 <th> </th> treba da formatira kao zaglavlje
Dodavanje zaglavlja i naslova <html> <head> <title> Zaglavlje u redu </title> </head> <body> <table border=“ 1”> <caption> Zaglavlje u redu <tr><th>Naslov 1</th> <th>Naslov 2</th> </tr> <tr><td>1. vrsta, Proizvod </tr> <tr><td>2. vrsta, Proizvod </tr> </table> </body> </html> </caption> 1</td> 2</td>
Ć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>
Ć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> <td rowspan="2">vrsta 1&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> <td colspan="2">vrsta 2, kolona 1&2</td> <td> vrsta 3, kolona 3 </td> </tr> </table> </body> </html>
- Slides: 25