Embed Size (px)
Citation preview
HTML - pregled
OM1 – ITK
2010/11
Osnove HTML
• HTML
• Glava <head>
• Telo <body>
• Pregled html značk
• CSS
Kje je HTML?
• HTML pomeni Jezik za označevanje nadbesedila (angl. Hyper Text MarkupLanguage)
• HTML je jezik za pisanje spletnih strani.
• Ukazi se imenujejo značke (angl. tags)
– samostojne značke (npr. <br>, <hr>, <p>)
– začetne in končne značke (npr. <body> in </body>)
Različice HTML
• HTML 1.0 (Berners-Lee, 1990)
• HTML 2.0 (Berners-Lee, Connelly, 1995) standard za razvoj do 1997 IETF Recommendation
• HTML 3.0 (Ragget, W3C (Netscape), 1996)
• HTML 3.2 W3C Recommendation
• HTML 4.0 (podpora CSS)
XHTML 1.0
• HTML 4.01 se posodobi z XML
• Pomembnejše razlike do HTML 4.01:
– Pravilnejša dosledna uporaba ukazov
– Elementi in lastnosti so pisani z majhnimi črkami
– Vsi elementi se morajo zaključiti (tudi <p> in <br>)
– Vrednosti lastnosti morajo biti v navednicah
Uporaba validatorja
Preveri veljavnost kode na naslovu:• http://validator.w3.org/Upošteva navedeno različico v dokumentu:• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.1//EN"> ali• <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Zgradba spletne strani
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<html> <head>
Informacije o spletni strani </head> <body>
Vsebina predstavitvene strani</body>
</html>
Informacije o spletni strani
Znotraj glave (head) pišemo lastnosti dokumenta, ki veljajo za cel dokument
• title – naslov spletne strani je obvezen– <title>Pozdrav</title>
• meta – namenjen strežniku za prepoznavanje spletnih strani
• link (lastnost) poveže spletno stran z različnimi podatki
• <link rel="shortcut icon" href="acikona.ICO" />
Meta oznake
Meta oznake so vedno uporabljene v glavi
Namen meta oznak:
• Niso vidne v brkljalniku
• Namenjene so jezikovnim ali kodnim nastavitvam
• Podatkom o strani, ki jih uporabljajo iskalniki za rangiranje strani
Jezikovne nastavitve
• <meta content="charset=windows-1250">
ali
• <meta http-equiv="Content-Type" content="charset=windows-1250">
ali
• <meta http-equiv="Content-Type" content="text/html" charset="windows-1250">
Nastavitve pisave UTF-8
• Unicode Transformation Format-8
• Datoteko je treba shraniti kot UTF-8 format (vsak znak je sestavljen iz dveh bajtov).
• <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
ali
• UTF-8 je privzeto kodiranje za XML
• <?xml version="1.0" encoding="UTF-8" ?>
Meta oznake za iskalnike
• Avtor
– <meta name="author" content="Ime Priimek">
• Opis
– <meta name="description" content="Stran je namenjena vadenju html in css">
• Ključne besede
– <meta name="keyword" content="html, slika, tabela, css">
Meta oznake za stran
• Stran se avtomatično osveži na 30 sekund– <meta http-equiv=refresh content="30">
• Stran se po 10 sekundah preusmeri na nov url (google)– <meta http-equiv=refresh content="10;
url=http://www.google.com">
• Podatki o zadnji spremembi– <meta name=refresh content="13. 3. 2010
21:20">
Telo html (body)
• Nastavljamo vse kar velja za cel dokument: pisave, barve, slike …
Vsebina predstavitvene strani
• Besedilo in vrste pisav
• Nove vrstice in odstavki
• Naslovi
• Seznami
Besedilo
• Za besedilo se uporablja značka odstavka (angl. paragraph) <p>.
• Če želimo nastavljati različne pisave to izvajamo s CSS ne pa z ukazom FONT
• <p id="Veselo">Pisava bo urejena s CSS</p>
• <p class="Malo">Pisava bo urejena s CSS</p>
Lastnosti besedila (deprecated)
• Ukaze lahko dopolnimo s posebnimi lastnostmi
Primer <font> - deprecated
• Velikost <font size=24>
• Barva <font color=green>
Naslovi
• Vsak naslov se začne v svoji vrstici in ima nato še eno prazno vrstico do ostalega besedila
Največji naslov je h1, najmanjši pa h6:
• <h1>Naslov 1</h1>
• <h2>Naslov 2</h2>
• …
• <h6>Naslov 6</h6>
Seznami
• <ol> Oštevilčen seznam (ordered list)– <li> Posamezne postavke (list item)
• <ul> neoštevilčen seznam (unordered list)– <li> Posamezne postavke (list item)
• <dl> - seznam elementov z opisi (definitionlist)– <dt> - seznam naziva (definition term)
• <dd> - seznam opisa (definition description)
• <dd> lahko prikaže vse elemente (slike, tabele)
Posebni znaki
• Znaki so vedno kombinacija:Začetni znak: & + pomen/številka + zaključni znak: ;
– Primer: > predstavlja >– Začetka, ki je označen s posebnim znakom - &, – pomen znaka (greater than) - gt– Zaključek znaka - ;
• Primeri: (znak, kombinacija pomen)– < - < (less than - manjši)– © - © (copyright)– & - &– ± - ± (plus minus)– ≥ - ≥ – ≠ - ≠
Lastnosti html značk
• Vsaka značka ima lahko lastnosti, ki morajo imeti vrednost zapisano znotraj narekovajev
• Lastnosti značk
• Lastnosti style (za CSS), id (za identifikatorje CSS) ali class (za razrede CSS)
Slike
Vstavljanje slik
• <img src=URL alt=napis />
• formati slik so: png, gif in jpg
• src kaže na pot datoteke (source)– URL
– Absolutna pot (file:///c:/html/slika.jpg)
– Relativna pot (img/slika.jpg)
• alt pove alternativni napis
Primeri:
• <img src="avto3.jpg " alt="napis slike" />
Povezava
Povezava na zunanji dokument
• <a href="URL">Napis</a>
Uporaba povezave na sliko
• <a href="http://www.siol.net"><img src="avto3.jpg">Klikni na sliko</a>
Sidro
Oznaka sidra – postavitev sidra in poimenovanje
Postavitev sidra z imenom Sidro
• <a name="Sidro"></a>
Skok na sidro z imenom Sidro
• <a href="Sidro">Skoči na sidro</a>
Tabele
Tabele so sestavljene iz celic, ki so urejene v stolpce in v vrstice.
• za tabelo so <table> </table>– za vrstico so <tr> </tr> (table row)
• za naslovno vrstico <th> </th> (table head)• za polja (stolpci v vrstici) so <td> </td> (table cell definition)
<table border="4"><tr> <th> Naslov1</th> <th> Naslov2</th> </tr><tr> <td> 1. polje</td> <td> 2. polje</td> </tr><tr> <td>3. polje</td> <td>4. polje</td> </tr>
</table>
Tabele – združevanje celic
• Združevanje celic v vrstici
<td Colspan=2>
• Združevanje celic v stolpcu
<td Rowspan=2>
Okvir - nezaželen
• Okvir razdeli spletno stran na več manjših spletnih strani
• Uporablja se za razdelitev:
– na kazalo,
– vsebino.
Ukazi za okvir
Uporabljamo <frameset> namesto <body>!
• Poimenujemo in postavimo okvirje na želeno mesto (<frame src=URL name=ime /> )
• Postavitev izvajamo z lastnostjo v frameset:
– cols=20%,*
– rows=30%,10%,60%
Osnovna stran
Ne vsebuje oblikovanja <body>, ampak le načrt razdelitve (frameset).
Primer: index.html<html><head><title>A Simple Frames-based Design</title></head><frameset rows="75,*"><frame src="top.htm" name="kazalo"/><frame src="glavna.htm" name="vsebina"/></frameset></html>
Enostaven primer
Spletno stran imamo razdeljeno na levo in desno stran
– Na levi imamo seznam živali (Kazalo)
– Na desni pa prikažemo slike živali
CSS
• CSS pomeni (Cascading Style Sheets)
• Slogi določajo kako se prikazujejo HTML elementi
• Uporablja se od verzije HTML 4.0
• Z njihovo uporabo se prihrani ogromno dela
• Shranjeni so lahko v zunanjih CSS datotekah
Primer CSS
• Poglejmo primer, kjer je HTML enak razen v oblikovanju, kjer se uporabljajo različne cssdatoteke
• http://www.w3schools.com/css/demo_default.htm
HTML slogi (Style)
Obstajajo trije načini uporabe slogov:
• Zunanji slog (External Style Sheet)
• Notranji slog (Internal Style Sheet)
• Slog na elementu (Inline Style)
Zunanji slog
• Zunanji slog (external style sheet)– Idealno je, če se uporablja za več strani hkrati– Stran se mora povezati s slogom v glavi s povezavo na
datoteko
Primer: <head><link rel="stylesheet" type="text/css"
href="mojslog.css"></ head>
Notranji slog
• Notranji slog (internal style sheet)– Uporaba posebnega sloga– Določi notranje stile v glavi dokumenta
Primer:<head>
<style type="text/css">body {background-color: red}p {margin-left: 20px}
</style></head>
Slog na elementu
• Slog na elementu (Inline Style)
– uporabi se pri posameznem elementu (recimo odstavku)
Primer:
<p style="color: red; margin-left: 20px">This is a paragraph
</p>
Značke za sloge
• <style> definira notranj CSS stil
• <link> poveže CSS z zunanjo CSS datoteko
• <div> bločni stavek
• <span> bločni stavek
• <font> Deprecated. uporabljaj style
• <basefont> Deprecated. Uporabljaj style
• <center> Deprecated. uporabljaj style
CSS sintaksa
Izbira in ena ali več izjav
• Izbira je določena HTML značka (<p>, <h1>, <body> …)
• Izjava je sestavljena iz lastnosti (property) in vrednosti (value)
Primer CSS sintakse
• p {color:red;text-align:center;}
To raje zapišemo bolj pregledno:
p
{
color:red;
text-align:center;
}
Komentarji v CSS
• Uporabljamo klasične programerske komentarje:
/* komentirana vsebina
do konca */
• Komentarje uporabljamo, da razložimo kaj in kako smo delali
– popravki css-ja (datum, oseba in kaj)
– opis kaj css dela (razlaga css)
Osnove CSS
• CSS ozadje
• CSS tekst
• CSS pisave
• CSS povezave
• CSS seznami
• CSS tabele
CSS barva ozadja
• background-color – barva ozadja
• barva je lahko določena na tri načine:
– Z imenom barve v angleščini "red"
– Z načinom RGB (red,green,blue; rdeča, zelena, modra)"rgb(255,0,0)"
– Z šestnajstiško vrednostjo "#ff0000"
CSS slika ozadja
• background-image:slika ozadja(URL)• background-repeat:kako se ponavlja slika • background-position:kje je postavljena• background-attachment:kaj se dogaja s sliko po premiku• margin-right:kje je postavljena desna meja
Primer:• body
{background-image:url('img_tree.png');background-repeat:no-repeat;background-position:top right;margin-right:200px;}
CSS tekst
• color: barva fonta
• text-align:poravnava teksta
• text-decoration:izbira pisave
• text-transform:način pisave (vse velike črke)
• text-indent:odmik od začetka v pikslih (px)
• direction:rtl (pisava desno v levo)
• …
CSS pisave (družine pisav)
Serif (Times New Roman, Georgia) imajo manjše črte na koncu
Sans pomeni brezSans-serif (Arial, Verdana) nimajo črt na koncu
Monospace (Courier New, Lucida Console) pomeni, da so vsi znaki enako veliki
CSS pisave
• font-family:"Times New Roman"
• font-family:"Times New Roman", Times, serif;
• več pisav je navedenih, če prva ne obstaja, uporabi naslednjo
• font-style:italic;
• font-size:40px; (1 em je visok 16px)
• font-size:2.5em; /* 40px/16=2.5em */
CSS povezave
Priporočamo uporabo tega vrstnega reda (hoverje vedno za link in visited, active je vedno za hover):
• a:link - normalen, neobiskana povezava
• a:visited – obiskana povezava
• a:hover – če greš z miško čez povezavo
• a:active – aktivirana povezava (kliknemo)
CSS seznami
• ul.a {list-style-type: circle;}• Neoštevilčeni seznami imajo naslednje vrednosti:
– None, disc (prednastavljena), circle, square
• Številčeni seznami:– armenian Armensko številčenje– decimal številka– decimal-leading-zero (01, 02, 03 …)– georgian (an, ban, gan ...)– lower-alpha (a, b, c, d, e ...)– lower-greek (alpha, beta, gamma ...)– lower-latin (a, b, c, d, e ...)– lower-roman (i, ii, iii, iv, v ...)– upper-alpha (A, B, C, D, E ...) – upper-latin (A, B, C, D, E ...)– upper-roman (I, II, III, IV, V ...)
CSS seznami
• list-style-image: url('sqpurple.gif'); slika namesto oznake
• list-style-position: kje je oznaka glede na napis
CSS tabele (lastnosti)
CSS tabele
• border: velikost črt
• border-collapse: ena ali več črt
• width: širina
• heigth: višina
• text-align: poravnava
• padding: koliko prostora je okoli teksta
• background-color: barva ozadja
• color: barva pisave
