HTML in CSS za zaÄ?etnike
HTML in CSS za začetnike Besedilo in slike: Peter Krebelj, dipl. inž. rač. in inf. Zbirka: Kreativno računalništvo Založba: Atelje Doria E-pošta: info@doria.si Spletna stran: http://www.doria.si Za založbo: Živa Viviana Doria 1. izdaja Naklada: tiskano po naročilu Ljubljana 2015 © za to izdajo: Atelje Doria © za besedilo in ilustracije: Peter Krebelj
Vse pravice pridržane. Brez prehodnega pisnega dovoljenja vseh nosilcev avtorskih pravic je prepovedano reproduciranje, distribuiranje, dajanje v najem, javna pridobitev, predelava ali druga uporaba tega avtorskega dela ali njegovih sestavnih delov v kakršnem koli obsegu ali postopku, vključno s fotokopiranjem, tiskanjem, javnim interaktivnim dostopom ali shranitvijo v elektronski obliki.
CIP - Kataložni zapis o publikaciji Narodna in univerzitetna knjižnica, Ljubljana 004.439:004.55(035) KREBELJ, Peter HTML in CSS za začetnike / besedilo in slike Peter Krebelj. - 1. izd. - Ljubljana : Atelje Doria, 2015 ISBN 978-961-6881-35-7 279769856
PETER KREBELJ
HTML in C S S
za začetnike
Založba Atelje Doria
HTML in CSS za zaÄ?etnike
6
VSEBINA 1.
UVOD
13
1.1. Ali je učenje HTML jezika težko? 1.2. Struktura knjige 1.3. Prikaz spletnih strani 1.3.1. Spletni brskalnik 1.3.2. Spletni strežnik 1.3.3. Naprave 1.3.4. Kako ustvarimo spletno stran? 1.3.5. Kako deluje internet? 1.3.6. Kaj je HTML? 1.3.7. Pisanje HTML kode
15 16 16 16 17 17 17 18 19 19
2.
21
STRUKTURA STRANI
2.1. Osnovni HTML 2.1.1. Bližji pogled na značko 2.1.2. Bližnji pogled na značko z dodatnimi atributi 2.1.3. Deklaracija HTML jezika
23 24 25 25
3.
27
BESEDILO
3.1. Naslovi (Headings)
28
3.2. Odstavki (Paragraphs) 3.3. Formatiranje pisave in besedila 3.3.1. Krepko (Bold) 3.3.2. Poševno (Italic) 3.3.3. Nadpisano (sup) 3.3.4. Podpisano (sub) 3.3.5. Prazni presledki 3.3.6. Vrstični skoki in horizontalna črta 3.3.7. Citiranje 3.3.8. Podatki o avtorju
28 29 29 30 30 31 31 32 32 33
4.
35
SEZNAMI
4.1. Urejeni seznami 4.2. Neurejeni seznami 4.3. Opisni seznami
36 37 37
5.
POVEZAVE (LINKS)
39
5.1. Oblikovanje povezav 5.2. Povezave na druge strani 5.3. Povezave znotraj spletne strani 5.4. Struktura imenikov 5.5. E-naslov in povezave 5.6. Odpiranje povezave v zavihkih 5.7. Povezava na določen del strani
40 40 42 42 45 46 47
6.
FOTOGRAFIJE
6.1. Izbira fotografij za spletno stran
51 52
6.2. Upravljanje fotografij 6.3. Uporaba fotografij 6.4. Poravnava fotografij horizontalna 6.5. Poravnava fotografij vertikalna 6.6. Pravila za oblikovanje fotografij 6.7. Orodja za oblikovanje fotografij
52 52 56 58 58 58
7.
TABELE
61
7.1. Struktura tabele 7.2. Združevanje vrstic in stolpcev 7.3. Velike tabele 7.3.1. <thead>, <tbody> in <tfoot> 7.4. Širina tabele 7.5. Barva ozadja tabele
62 63 66 66 68 68
8.
69
8.1. Uporaba obrazcev 8.2. Nadzor obrazcev 8.3. Delovanje obrazcev 8.4. Struktura obrazca 8.4.1. Action 8.4.2. Method 8.4.3. ID 8.5. Vnos besedila 8.6. Vnos gesla 8.7. Izbirni seznami 8.8. Večkratna izbira oz. potrditvena polja 8.9. Več vrstično besedilo
70 70 71 71 72 72 73 73 74 75 76 78
VNOSNA POLJA
8.10. Nalaganje dokumenta 8.11. Ostale možnosti 8.12. Združevanje elementov 8.13. Primer uporabe obrazcev
79 80 80 80
9.
DODATNI ELEMENTI
85
9.1. Doctypes 9.2. Komentarji znotraj HTML 9.3. Atribut ID 9.4. Atribut class 9.5. Blok elementi 9.6. Vrstični elementi 9.7. Povezovanje elementov (DIV) 9.8. Združevanje besedila 9.9. Okvir (iframe) 9.10. Informacije o spletni strani 9.10.1. Meta podatki 9.11. Posebni simboli
86 87 88 89 90 90 90 92 93 94 95 96
10. CSS
97
10.1. Zgradba CSS zapisa 10.2. Klic HTML kode preko CSS 10.3. Klic CSS kode za oblikovanje 10.3.1. Uporaba zunanje CSS datoteke 10.3.2. Gnezdenje oblikovanja znotraj HTML 10.3.3. Uporaba vrstičnega oblikovanja
98 98 99 99 100 101
11. BARVE
103
11.1. Načini podajanja barve 11.2. Barva ozadja
104 105
12. BESEDILO
107
12.1. Pisave tipa Serif 12.2. Pisava tipa Sans-Serif 12.3. Pisava tipa Monospace 12.4. Oblikovanje pisave 12.5. Določanje vrste pisave 12.6. Velikost pisave 12.6.1. Določanje s pomočjo točk (pixels) 12.6.2. Določanje s pomočjo odstotkov 12.6.3. Določanje s pomočjo EM 12.7. Oblikovanje teže pisave 12.8. Velike in male črke 12.9. Vizualni učinki nad besedilom 12.10. Razmik med vrsticami 12.11. Razmik med znaki in besedami 12.12. Poravnava besedila 12.13. Vertikalna poravnava 12.14. Zamik besedila 12.15. Hitre povezave
108 108 108 108 109 111 111 111 111 112 114 115 115 116 116 119 119 120
13. OKVIRJI
121
13.1. Omejevanje višine in širine 13.2. Obrobe in odmiki
123 123
13.3. Širina obrobe 13.4. Oblikovanje vrste obrobe 13.5. Barva obrobe 13.6. Združevanje lastnosti 13.7. Odmik (padding) 13.8. Rob (margin) 13.9. Poravnava vsebine 13.10. Vrstični in blokovni prikaz
124 126 127 127 128 129 129 131
14. SEZNAMI, TABELE IN VNOSNA POLJA
133
14.1. Seznami in lastnosti 14.2. Tabele 14.3. Vnosna polja 14.3.1. Normalna postavitev 14.3.2. Relativna postavitev 14.3.3. Absolutna postavitev 14.3.4. Fiksna postavitev 14.3.5. Plavajoča postavitev
134 134 135 135 136 136 136 136
15. IZGLED
137
15.1. Prekrivanje elementov 15.2. Razvrščanje elementov 15.2.1. Postavitev elementov eden poleg drugega 15.3. Odstranjevanje postavitev float 15.4. Resolucija zaslona 15.5. Velikost spletne strani
138 139 140 142 142 142
16. SLIKE
145
16.1. Poravnava fotografij 16.2. Fotografija za ozadje 16.3. Ponavljanje prikazovanja fotografije 16.4. Postavitev slike na strani
146 146 147 147
17. ZAKLJUÄ&#x152;EK
149
Viri in literatura
151
HTML in CSS za začetnike PETER KREBELJ
H T M L in C S S za začetnike
Svetovni splet danes predstavlja naš alternativni svet in hkrati so spletne strani način izražanja, kot tudi ponujanja svojih rešitev. Lahko gre za osebno stran, stran podjetja, spletni forum, itn. Kakorkoli že pogledamo, vedno je v ozadju koda, ki skrbi za pravilno prikazovanje naše ideje znotraj spletnega brskalnika. Skozi knjigo se bomo sprehodili skozi značilnosti pisanja kode HTML, oblikovanja spletnih strani s pomočjo kode CSS, kot se tudi posvetili primerom, ki nam bodo služili za izhodišče pri prikazu rešitev.
Kreativno računalništvo
Založba Atelje Doria 14 www.doria.si