HTML - slike, tabele, liste, linkovi, linije
Download
Report
Transcript HTML - slike, tabele, liste, linkovi, linije
HTML
Slike, Hipertekst veze, Liste, Linije, Tabele
Pripremio: nastavnik Dusan Masic
STŠ “Nikola Tesla”, Sremska Mitrovica
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
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
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>
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
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>
<p>
Ovaj primer sadrži
<a href=“http://www.google.com”>link</a> sa
apsolutnom putanjom na Google.
</p>
</body>
</html>
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>
</body>
</html>
LISTE
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
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>
DEFINICIONA ILI OPISNA LISTA
Opisne liste opisuju logičku strukturu koja odgovara
listi pojmova koji se definišu. Otuda se opisne liste
nazivaju i definicione liste.
Tag za početak opisne liste je <dl>
Tag za elemente je <dt>, a tag za definiciju je <dd>
<DL>
<DT>piko:<DD> prefiks nekoj jedinici koji
pokazuje milioniti deo milionitog dela te
jedinice;
<DT>nano:<DD> prefiks nekoj jedinici koji
pokazuje milijarditi deo te jedinice;
</DL>
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
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 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 </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>
Ć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>
<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>