Download presentation
Presentation is loading. Please wait.
1
Slike, Hipertekst veze, Liste, Linije, Tabele
HTML Slike, Hipertekst veze, Liste, Linije, Tabele
2
Slike <img src=“putanja do slike“ alt=“Opis 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.
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> <img src=“sunset.jpg" width="400“ height="175" alt=“Photo of Florida Sunset" border="3"/> </body> </html>
5
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>
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
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>
8
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>
9
Hiperlink 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
10
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>
11
Umetnuti sadržaj Npr. ako želimo na našu stranicu da umetnemo video sa YouTube-a: Pronađemo željeni video na YouTube-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= frameborder=“0” allowfullscreen> </iframe>
12
Apsolutni i relativni hiperlinkovi
<html> <head> </head> <body> <h1>Linkovi</h1> <p> Ovaj primer sadrži <a href=“index.html”>link</a> sa relativnom putanjom na fajl index.html. </p> Ovaj primer sadrži <a href=“ sa apsolutnom putanjom na Google. </body> </html>
13
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).
14
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> </body> </html>
15
Liste Liste se koriste za razne vrste nabrajanja
Postoje tri vrste lista: unordered (neuredjena) lista, ordered (numerisana) lista i definiciona ili opisna lista.
16
Neoznačena lista <p> Voce: <ul>
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>
17
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>
18
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”>
19
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
20
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.
21
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><td>E</td> <td>F</td> </table> </body> </html>
22
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
23
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><td>2.vrsta, Proizvod 1</td> <td>2.vrsta, Proizvod 2</td> </table> </body> </html>
24
Ć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>
25
Ć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">vrsta1&2, kolona 1</td> <td>vrsta 1, kolona 2</td> <td rowspan="2"> vrsta 1&2, kolona 3</td> <tr><td>vrsta 2, kolona 2</td></tr> <td colspan="2">vrsta 2, kolona 1&2</td> <td> vrsta 3, kolona 3 </td> </table> </body> </html>
Similar presentations
![>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.](/24/7400148/big_thumb.jpg ">> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.>")
