Vjezba 1

http://www.w3schools.
com
HTML:
 je jezik za opis web strana
 nije programski jezik, već skriptni jezik za obilježavanje
– markup language
 kod se prenosi http (Hyper Text Transfer Protocol)
protokolom
 koristi markup tag-ove za opis web strana
 kod se kombinuje sa običnim tekstom
 kod se nalazi na web strani *.htm(l)
 kod interpretira web browser
 Html tagovi su specijalne riječi između zagrada
<i>
 Html tagovi se koriste u parovima kao <b> i </b>
 Prvi tag u paru je početni tag, a tag sa kosom crtom - /
završni tag
 Iako se završni tag može izostaviti, trebalo bi da se
uvijek koriste u paru
 Html element se sastoji od para tagova, početnog i
završnog
 Prazni html elementi su elementi bez sadržaja, primjer
je <br/>
 Ovakvi elementi nemaju završni tag – pošto su prazni,
pa je ispravan način pisanja sa kosom crtom na kraju –
kao <br />
 Iako bi element <br> bio ispravno protumačen od svih
brouzera ne savjetuje se zbog budućih verzija browser-
a koje će možda striktnije poštovati standarde
 Html elementi – tagovi nisu case sensitive, na pr. <P> je
isto što i <p>
 Iako se na mnogim site-ovima koriste velika
slova, preporuka World Wide Web Consortium
- a (W3C) je korišćenje malih slova u verziji
html 5
 Bilo koji editor, na pr. notepad
 Wordpad – windows, ne boji sintaksu
 Notepad++ free – boji sintaksu
 Neki drugi windows / unix / linux editor
 NetBeans razvojno okruženje – free – provjerava
sintaksu - intellisens
Strukturalni tagovi
 <html> … </html> Uvodni i zaključni tag HTML dokumenta
 <head> … </head> Uvodni i zaključni tag zaglavlja dokumenta
 <title> … </title> Naslov dokumenta
 <body>… </body> Uvodni i zaključni tag dokumenta
Naslovi i paragraf
 <hN> … </hN> Naslov N-tog prioriteta
 N može da bude 1, 2, 3, 4, 5 ili 6
 <p> … </p> Uvodni i zaključni tag paragrafa
 Osnovno formatiranje teksta
 <b> … </b> Podebljani tekst
 <i> … </i> Kurziv
 <u> … </u> Podvučeni tekst
Funkcionalno isticanje teksta
 <strong>…</strong> Vizelno isticanje teksta (slično
podebljavanju)
 <em>…</em> Naglašavanje teksta (slično kurzivu)
 <code>…</code> Formatiranje teksta tako da sva
slova budu identične širine
Font
 <font atribut=“…"> … </font>
 <font size=“…"title=“…" style=“… : "> … </font>
 Ostali tekstualni tagovi
 <hr /> Horizontalna linija
 <br /> Prekid linije teksta
  Komentar, dio HTML koda koji se ne vidi
Liste
 <ol>
 <li> Element uređene liste
 </ol> Uređena lista
 <ul>
 <li> Element neuređene liste
 </ul> Neuređena lista
Linkovi
 <a opt > ... </a> Sadrži informacije koje definišu link
Opt može biti oblika:
 name ="url" označavanje sadržaja sa sidrom
 href="url" link eksterne lokacije
 href="#sidro" link interne lokacije
Slike
 <img opt>
Opt može biti:
 src Lokacija slike
 alt Alternativni tekst
 title Ime slike
<html>
<head>
<title>Naslov web strane</title>
</head>
<body>
<h1>Naslov prvog nivoa</h1>
<p>Tekst paragrafa</p>
</body
</html>
 <meta name="description" content=“Moja stranica za
optimizaciju web sajtova">
 <meta name="keywords" content="exotic pets,
reptiles, amphibians, frog, toad, salamander, newt, siren,
lizard, iguana, gecko, monitor, chameleon, dragons,
turtles, tortoises, leopard, butterfly, butterflies, moth,
bees, flies, stick insects, beetles, wasps, hornet, roaches,
ants, cricket, grasshopper, tarantula, scorpion,
centipede, millipede">
 Vidljivi dio web strane je između tagova <body> i
</body>
 Tagovi <h1> i </h1> označavaju najveća slova za naslov
najvišeg nivoa
 Shodno tome, postoje h1(najveći) – h6 (najmanji)
 Tagovi <p> i </p> označavaju paragraf – dio teksta
ispred i iza koga je po jedan prazan red
 Zadnji tag </p> nije neophodan (za sada) ali ga treba
stavljati
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p> <p><big>This
text is big</big></p>
<p><em>This text is emphasized</em></p> <p><i>This text
is italic</i></p>
<p><small>This text is small</small></p>
<p><ins>This is inserted text</ins></p>
</body>
</html>
 Element <table> definiše tabelu
 Atribut border određuje vidljivost linija tabele
 <table border="1"> znači da će linije tabele biti vidljive,
dok odsustvo atributa border ili border=“0“ znači da
se neće prikazati linije tabele, već samo sadržaj tabele
 Elemenat <a> predstavlja sidro – anchor za vezu ka
drugim html stranicama
 <a href="http://www.w3schools.com">
 Vrijednost atributa href predstavlja adresu druge html
stranice na koju se prelazi
 Kao što je rečeno, elemenat <body> definiše body
tj. – vidljivi dio HTML dokumenta.
 Atribut bgcolor definiše boju čitave pozadine html
stranice, tj. svega što obuhvata element <body>
</body>
 <body bgcolor="yellow">
 Vrijednost atributa bgcolor je naziv boje u zagradi
 bgcolor je jedan od atributa koji izlazi iz upotrebe,
tako da se umjesto toga preporučuje upotreba
stilova
 Podešavanje boje pozadine
 <body style="background-color:yellow">
 Podešavanje Font Family, Color and Size
 <p style="font-family:courier new; color:red; font-
size:20px">
 Podešavanje pozicije teksta
 <h1 style="text-align:center">
 Ako se želi da se povezana strana preko hyperlink-a
otvori u novom prozoru, koristi se atribut target sa
vrijednošću elementa "_blank“
 target="_blank"
 <a href="http://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
 Pomoću atributa name se navodi “sidro” – koje
predstavlja lokaciju u tekućem dokumentu na mjestu
gdje se nalazi element <a> sa atributom name.
 Slike se postavljaju na html stranu sa praznim
elementom <img> (image – slika)
 Atribut src određuje adresu resursa – slike
 Slika se pojavljuje na onom mjestu u dokumentu na
kome se nalazi <img> element.
 <img src="url">
 Atribut alt se koristi za prikaz teksta ako slika iz nekog
razloga ne može da se prikaže, što je dobra praksa.
 <img src="boat.gif" alt="Big Boat">
 Tabela se definiše sa elementom <table>. Tabela se
sastoji od vrsta i kolona.
 Vrste se definišu elementom <tr> - Table Row
 Vrste se definišu elementom <td> - Table Data
 Ovi elementi se redom integrišu unutar elementa
<table> za svaku vrstu i svaku ćeliju
 Definicija tabele unutar html strane predstavlja niz
integrisanih elemenata <tr> unutar <table> i
elemenata <td> unutar <tr>
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
 Zadatak:
 U Notepad-u kreirati fajl pod imenom lab1.html
 Napisati ˝kostur˝ HTML dokumenta (<html>, <head> i <body>)
 U sekciji <head> postaviti naslov dokumenta (“Laboratorijska vježba 1”) i
definisati boju pozadine (po izboru)
 Sekcija <body> treba da sadrži naslov i dva paragrafa razdvojena
horizontalnom crtom.
 Naslov treba da bude ˝obojen˝
 Na pojedine dijelove teksta prvog paragrafa treba primjeniti fizičke stilove
(bold, italic).
 Pojedine riječi treba prikazati u ˝nepodrazumjevanoj˝ boji i veličini.
 Drugi paragraf treba centrirati (center)
 Dodati externe i interne linkove
 Postaviti sliku i kroz atribute definišite okvir slike, altrnativni tekst kao i naslov

Vjezba 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Vjezba 1

Uploaded by

Copyright:

Available Formats

http://www.w3schools.

You might also like