-
Notifications
You must be signed in to change notification settings - Fork 20
/
Copy pathk2015.html
10286 lines (8322 loc) · 541 KB
/
k2015.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Web-selainohjelmointi</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/sh_style.css">
<link rel="stylesheet" href="css/weso.css">
<script src="js/jquery.js"></script>
<script src="js/mustache.min.js"></script>
<script src="js/material.js"></script>
<script type="text/javascript" src="js/sh_main.js"></script>
<script type="text/javascript" src="js/sh_java.js"></script>
<script type="text/javascript" src="js/sh_xml.js"></script>
<script type="text/javascript" src="js/sh_html.js"></script>
<script type="text/javascript" src="js/sh_css.js"></script>
<script type="text/javascript" src="js/sh_javascript_dom.js"></script>
<script>
jQuery(document).ready(function() {
Material.createContentList();
Material.createExerciseList();
sh_highlightDocument();
});
</script>
</head>
<body>
<!-- BEGIN NAV -->
<header role="navigation">
<h1>
<button type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://www.cs.helsinki.fi/"><img src="img/header_tktl.png" alt="CS Dept. Univ. Helsinki"></a>
</h1>
<nav class="collapse bs-navbar-collapse" role="navigation">
<ul>
<li class="active">
<a href="#">Web-selainohjelmointi</a>
</li>
<li>
<a href="#viikko1">Viikko 1</a>
</li>
<li>
<a href="#viikko2">Viikko 2</a>
</li>
<li>
<a href="#viikko3">Viikko 3</a>
</li>
<li>
<a href="#viikko4">Viikko 4</a>
</li>
<li>
<a href="#viikko5">Viikko 5</a>
</li>
<li>
<a href="#viikko6">Viikko 6</a>
</li>
<li>
<a href="#viikko7">Viikko 7</a>
</li>
</ul>
</nav>
</header>
<article>
<section>
<header>
<h1 data-week-id="1">Lukijalle</h1>
</header>
<p>Tämä materiaali on tarkoitettu Helsingin yliopiston
tietojenkäsittelytieteen laitoksen keväällä ja kesällä 2015
järjestettävälle kurssille web-selainohjelmointi. Materiaali
pohjautuu <a href="http://www.cs.helsinki.fi/group/java/s12-weso/"
target="_blank">syksyn 2012 kurssiin</a>, ja sen
kirjoittajat ovat Kalle Ilves ja Arto Vihavainen. Vuoden
2012 materiaalin syntyyn ovat vaikuttaneet useat tahot,
joista tärkein lienee Mikael Nousiainen. Iso kiitos kuuluu
myös Kasper Hirvikoskelle. Kurssia web-selainohjelmointi on
edeltänyt aiemmin järjestetty kurssi Digitaalisen Median
tekniikat, jonka tämä kurssi korvaa. "DiMe"-kurssin
viimeisten vetäjien Samuli Kaipiaisen ja Matti Paksulan
henki kuitenkin elää kurssilla. </p>
<!--
<p>Materiaali päivittyy kurssin edetessä. Osa tehtävistä on osana
materiaalia, osa taas linkkeinä omille sivuilleen. Tehtävien lisäksi
materiaali sisältää kysymysmerkillä merkittyjä <em>pohdi</em>-kohtia,
joissa pääsee pohtimaan juuri tutuksi tullutta asiaa esimerkin kautta.
Lampuilla merkityt kohdat taas sisältävät mm. arvokkaita vinkkejä
erilaisista työkaluista.</p>
-->
<p><!-- Materiaali päivittyy kurssin edetessä.--> Lue materiaalia
siten, että teet samalla itse kaikki lukemasi
esimerkit. Esimerkkeihin kannattaa tehdä pieniä muutoksia ja
tarkkailla, miten muutokset vaikuttavat ohjelman
toimintaan. Äkkiseltään voisi luulla, että esimerkkien
tekeminen ja muokkaaminen hidastaa opiskelua. Tämä ei
kuitenkaan pidä ollenkaan paikkansa. Oppiminen perustuu
oleellisesti aktiiviseen tekemiseen ja rutiinin
kasvattamiseen. Esimerkkien ja erityisesti omien kokeilujen
tekeminen on parhaita tapoja sisäistää luettua. Muista että
copy-paste ei ole oppimisen kannalta yhtä tehokasta kuin
itse kirjoittaminen.</p>
<!--
<p>Pyri tekemään tai ainakin yrittämään tehtäviä sitä mukaa
kuin luet tekstiä. Jos et osaa heti tehdä jotain tehtävää,
älä masennu, sillä saat ohjausaikoina neuvoja tehtävien
tekemiseen.</p>
-->
<p>Tekstiä ei ole tarkoitettu vain kertaalleen
luettavaksi. Joudut varmasti myöhemmin palaamaan aiemmin
lukemiisi kohtiin tai aiemmin tekemiisi tehtäviin. Tämä
materiaali ei sisällä kaikkea oleellista
web-selainohjelmointiin liittyvää. Tällä hetkellä ei ole
oikeastaan mitään kirjaa josta löytyisi kaikki
oleellinen. Joudut kurssin aikana ja urallasi etsimään
tietoa myös omatoimisesti. Harjoitukset ja materiaali
sisältävät jo jonkin verran ohjeita, mistä suunnista tietoa
kannattaa lähteä hakemaan.</p>
<p>Jos (ja kun) materiaalista löytyy esimerkiksi
kirjoitusvirheitä, korjaa tilanne, ja tee pull-request
osoitteessa <a href="https://github.com/web-selainohjelmointi/web-selainohjelmointi.github.io"
target="_blank">https://github.com/web-selainohjelmointi/web-selainohjelmointi.github.io</a>. Kiitos
bugien ja ongelmien korjauksesta kuuluu jo nyt seuraaville
nimimerkeille: pro_, gleant, BiQ, Absor, Rase, jombo,
BearGrylls, Marko, _jumi_, jykke, Semilia, Walther, Loezi,
happosade, doge ja mluukkai.</p>
<!--
<h2>Aikataulu</h2>
<p>
Kurssin viikottaisten tehtävien viimeinen palautushetki on torstaisin kello 23:59. Ensimmäinen deadline on 19.3.2015.
</p>
-->
<div style="display: table">
<div style="display: table-cell">
<h2>Sisältö</h2>
<div id="materiaali-sisalto"></div>
</div>
<div style="display: table-cell; padding-left: 35px">
<h2>Tehtävät</h2>
<div id="tehtava-sisalto"></div>
</div>
</div>
</section>
<section class="week">
<header>
<a name="viikko1"></a>
<h1 data-week-id="1">Viikko 1</h1>
</header>
<h2>Tools of the trade</h2>
<p>Käydään läpi pikaisesti oleellisia työkaluja.</p>
<h3>Web-selainten tarjoamat kehittäjien työkalut</h3>
<p>Ohjelmien debuggaaminen on oleellinen taito. Selainohjelmistot pyörivät selaimessa, joten luonnollinen paikka niiden debuggaamiseen on selaimessa. Esimerkiksi google chrome ja mozilla firefox tarjoavat debuggausympäristöt, joilla voi tutkia sivuja. Debuggausympäristöt aukeavat yleensä nappia f12-painamalla. Oleellisin osio lienee konsoli, mistä näkee esimerkiksi JavaScript-suorituksessa tapahtuvat virheviestit.</p>
<p>Tutustu Chrome Developer Toolseihin osoitteessa <a href="https://developers.google.com/chrome-developer-tools/" target="_blank">https://developers.google.com/chrome-developer-tools/</a></p>
<h3>NetBeans</h3>
<p>Kurssilla käytetään oletuksena NetBeans-ohjelmointiympäristön uusinta versiota (tätä kirjoitettaessa 8.0.2). Kurssin tehtävät palautetaan TMC:n kautta. Kaikille avointen verkkokurssien mooc.fi -sivusto tarjoaa hyvät <a href="http://mooc.fi/courses/general/ohjelmointi/asentaminen/" target="_blank">asennusohjeet NetBeansille ja TMC:lle</a>. Jos et halua käyttää NetBeansia, tehtävät voi palauttaa myös TMC:n <a href="https://tmc.mooc.fi/hy" target="_blank">web-sivujen</a> kautta.</p>
<p>Huom! Toisin kuin kurssilla web-palvelinohjelmointi, TMC <em>ei</em> tarkasta tehtävien oikeellisuutta. Palauttaessasi tehtävän lupaat sen olevan oikein.</p>
<p>Seuraa <a href="http://mooc.fi/courses/general/ohjelmointi/asentaminen/" target="_blank">asennusohjeita</a> ja asenna tarvitsemasi työvälineet. Valitse TMC NetBeansin asetuksista palvelimeksi <code>https://tmc.mooc.fi/hy</code> ja kurssiksi <code>kesa2015-weso</code>. Kun teet käyttäjätunnusta TMC:hen, käytä opiskelijanumeroasi käyttäjätunnuksena.</p>
<h3>Internet</h3>
<p>Web on täynnä selainohjelmointiin liittyviä artikkeleita. Oikeasti! Googlehaku lauseella "html5 introduction" palauttaa hieman yli 30000 sivua (helmikuu 2015). Jos avainsanat ovat erikseen, tuloksia on lähes neljä miljoonaa. Kun teet kurssin tehtäviä, käytä googlea avuksi. Tätä materiaalia ei yritetäkään rakentaa kaiken kattavaksi, vaan joudut etsimään tietoa myös internetistä. </p>
<p>Jos mietit että miten vaikkapa <code>article</code>-elementille asetetaan reunat, voit googlettaa esimerkiksi avainsanoilla "html5 article css border". Ensimmäisen kymmenen artikkelin joukossa on (lähes) varmasti sinua auttava artikkeli. Itseasiassa, informaation hakeminen netistä on taito siinä missä ohjelmointikin -- sitä kannattaa ja pitää harjoitella.</p>
<h2>HTML</h2>
<p>HTML on kieli web-sivustojen luomiseen. HTML ei ole ohjelmointikieli, vaan kuvauskieli, jonka avulla kuvataan sekä web-sivun rakenne että sivun sisältämä teksti. HTML-sivujen rakenne määritellään HTML-kielessä määritellyillä elementeillä, ja yksittäinen HTML-dokumentti koostuu sisäkkäin ja peräkkäin olevista elementeistä.</p>
<p>Sivujen rakenteen määrittelevät elementit erotellaan pienempi kuin (<) ja suurempi kuin (>) -merkeillä. Elementti avataan elementin nimen sisältävällä pienempi kuin -merkillä alkavalla ja suurempi kuin -merkkiin loppuvalla merkkijonolla, esim. <code><html></code>, ja suljetaan merkkijonolla jossa elementin pienempi kuin -merkin jälkeen on vinoviiva, esim <code></html></code>. Yksittäisen elementin sisälle voi laittaa muita elementtejä.</p>
<p>Suurin osa elementeistä tulee sulkea lopuksi. Osa HTML5:n elementeistä – esimerkiksi <code><br></code> – on kuitenkin ns. tyhjiä ("void"), eikä niille kirjoiteta erillistä lopetusta. Halutessaan tyhjät elementit voi lopettaa X(HT)ML-tyyliseen /-merkkiin, esimerkiksi seuraavasti: <code><br /></code>.</p>
<h3>HTML-dokumentin runko</h3>
<p>Tyypillisen HTML-dokumentin runko näyttää seuraavalta:</p>
<pre class="sh_html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Selaimen palkissa ja suosikeissa näkyvä otsikko</title>
</head>
<body>
<h1>Sivulla näkyvä otsikko</h1>
<p>Sivuilla näytettävä normaali teksti on p-elementin sisällä.</p>
</body>
</html>
</pre>
<p>Yllä olevassa HTML-dokumentissa on dokumentin tyypin kertova erikoiselementti <code><!DOCTYPE html></code>, joka kertoo dokumentin olevan HTML-sivu. Tätä seuraa elementti <code><html></code>, joka aloittaa HTML-dokumentin. Elementti <code><html></code> sisältää yleensä kaksi elementtiä, elementit <code><head></code> ja <code><body></code>. Elementti <code><head></code> sisältää sivun otsaketiedot, eli esimerkiksi sivun käyttämän merkistön <code><meta charset="utf-8" /></code> ja otsikon <code><title></code>. Elementti <code><body></code> sisältää selaimessa näytettävän sivun rungon. Ylläolevalla sivulla on ensimmäisen tason otsake-elementti <code>h1</code> (<em>header 1</em>) ja tekstielementti <code>p</code> (<em>paragraph</em>).</p>
<p>Elementit voivat sisältää attribuutteja, joilla voi olla yksi tai useampi arvo. Yllä olevassa HTML-dokumentissa elementille <code>meta</code> on määritelty erillinen attribuutti <code>charset</code>, joka kertoo dokumentissa käytettävän merkistön: "utf-8". Attribuuttien lisäksi elementit voivat sisältää <em>tekstisolmun</em>. Esimerkiksi yllä olevat elementit <code>title</code>, <code>h1</code> ja <code>p</code> kukin sisältävät tekstisolmun eli tekstiä. Tekstisolmulle ei ole erillistä elementtiä tai määrettä, vaan se näkyy tekstinä.</p>
<p>Puhe tekstisolmuista antaa viitettä jonkinlaisesta puurakenteesta. HTML-dokumentit, aivan kuten XML-dokumentit, ovat rakenteellisia dokumentteja, joiden rakenne on usein helppo ymmärtää puumaisena kaaviona. Ylläolevan web-sivun voi esittää esimerkiksi seuraavanlaisena puuna (attribuutit ja dokumentin tyyppi on jätetty merkitsemättä).</p>
<pre>
html
/ \
/ \
head body
/ \ / \
meta title h1 p
: : :
tekstiä tekstiä tekstiä
</pre>
<p>Koska HTML-dokumentti on rakenteellinen dokumentti, on elementtien sulkemisjärjestyksellä väliä. Elementit tulee sulkea samassa järjestyksessä kuin ne on avattu. Esimerkiksi, järjestys <code><body><p>whoa, minttutee!</body></p></code> on väärä, kun taas järjestys <code><body><p>whoa, minttutee!</p></body></code> on oikea.</p>
<p>Kaikki elementit eivät kuitenkaan sisällä tekstisolmua, eikä niitä suljeta erikseen. Yksi näistä poikkeuksista on <a href="http://www.w3schools.com/tags/tag_link.asp" target="_blank">link</a>-elementti.</p>
<p>Kun selaimet lataavat HTML-dokumenttia, ne käyvät sen läpi ylhäältä alas, vasemmalta oikealle. Kun selain kohtaa elementin, se luo sille uuden solmun. Seuraavista elementeistä luodut solmut menevät aiemmin luodun solmun alle kunnes aiemmin kohdattu elementti suljetaan. Aina kun elementti suljetaan, puussa palataan ylöspäin edelliselle tasolle.</p>
<aside class="pohdi">
<p><strong>Web-sivujen läpikäynti</strong></p>
<p>Miltä seuraavaa HTML-dokumenttia kuvaava puu näyttää?</p>
<pre class="sh_html">
<!DOCTYPE html>
<html>
<head>
<title>PSY: Gangnam Style</title>
</head>
<body>
<p>"Gangnam Style" is a single by South Korean rapper PSY, that has been viewed
over 2 billion times on <a href="http://www.youtube.com">YouTube</a></p>
</body>
</html>
</pre>
<p>Entä seuraavalla HTML-dokumentilla?</p>
<pre class="sh_html">
<!DOCTYPE html>
<html>
<head>
<title>PSY: Gangnam Style</title>
<body>
<p>"Gangnam Style" is a single by South Korean rapper PSY, that has been viewed
over 2 billion times on <a href="http://www.youtube.com">YouTube</p>
</body>
</html>
</pre>
</aside>
<div class="tehtavat">
<h3>Ascii Artist</h3>
<p>Huom! Jos NetBeans ei suostu avaamaan tehtäviä ja valittaa esimerkiksi "failed to download exercises", varmista että käytössäsi on HTML5-tuki. Tämän tuen saa ladattua NetBeansin Tools->Plugins -valikosta. Ladattu liitännäinen aktivoituu viimeistään kun luot uuden HTML5-projektin (File -> New Project -> HTML5 -> ...).</p>
<p>Tehtäväpohjassa olevassa kansiossa <code>src</code> (tai Site Root) on dokumentti <code>index.html</code>. Muokkaa dokumenttia siten, että sen katsominen selaimessa näyttää seuraavannäköisen ASCII-taideteoksen (käytettävän fontin ei tarvitse olla sama).</p>
<img src="img/ascii-artist.png" alt="käytä pre-elementtiä tekstimuotoisen taideteoksen luomiseen" border=1/>
<p>Huom! Yllä näkyvän kuvakaappauksen ympärille asetettuja reunoja ei tarvitse piirtää omaan sivuun.</p>
<p>Koska taideteos on ASCII-taidetta, et luonnollisestikaan saa käyttää sivussa kuvaa. Vinkki taideteoksen tekemiseen on yllä olevassa kuvassa. Kun taideteoksesi toimii Chromessa, palauta tehtävä TMC:lle.</p>
</div>
<h3>Listaelementit</h3>
<p>Sivuille voi lisätä listoja mm. <code>ol</code> (<em>ordered list</em>) ja <code>ul</code> (<em>unordered list</em>) -elementtien avulla. Elementeillä <code>ol</code> tai <code>ul</code> aloitetaan lista, ja listan sisälle asetettavat yksittäisiin listaelementteihin käytetään <code>li</code> (<em>list item</em>)-elementtiä. Yksittäiset listaelementit voivat taas sisältää esimerkiksi tekstisolmun tai lisää html-elementtejä.</p>
<pre class="sh_html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Selaimen palkissa ja suosikeissa näkyvä otsikko</title>
</head>
<body>
<h1>Sivulla näkyvä otsikko</h1>
<p>Sivuilla näytettävä normaali teksti on p-elementin sisällä,
listaelementtiä voi käyttää esimerkiksi ostoslistan tekemiseen.</p>
<ol>
<li>kauraa</li>
<li>puuroa</li>
<li>omenaa</li>
</ol>
</body>
</html>
</pre>
<p>Yllä oleva lista näyttää seuraavalta ilman muita elementtejä.</p>
<div class="naytto">
<p>
<ol>
<li>kauraa</li>
<li>puuroa</li>
<li>omenaa</li>
</ol>
</p>
</div>
<h3>Kuvien lisääminen</h3>
<p>Jokaisen web-sivuja rakentavan ihmisen tulee ainakin kerran elämässään lisätä kuva web-sivuilleen. Sivuille saa lisättyä kuvia elementillä <code>img</code>, jolla on attribuutti <code>src</code>, jonka arvona on kuvan sijainti. Kuvan sijainti riippuu kuvan näyttävän html-tiedoston sijainnista. Jos kuva on samassa kansiossa <code>html</code>-dokumentin kanssa, tarvitsee <code>img</code>-elementin <code>src</code>-attribuutin arvoksi asettaa vain kuvan nimi.</p>
<p>Esimerkiksi, jos tämän html-tiedoston sisältämässä kansiossa on kansio nimeltä "img", ja siellä kuvatiedosto nimeltä "lamppu.png", saa kuvatiedoston sivuille näkyville elementillä <code><img src="img/lamppu.png" /></code>. Koska kuvaelementti <code>img</code> ei sisällä muita elementtejä tai tekstiä, voi sen sulkea suoraan.</p>
<pre class="sh_html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Selaimen palkissa ja suosikeissa näkyvä otsikko</title>
</head>
<body>
<h1>Sivulla näkyvä otsikko</h1>
<p>Sivuilla näytettävä normaali teksti on p-elementin sisällä,
listaelementtiä voi käyttää esimerkiksi ostoslistan tekemiseen.</p>
<ol>
<li>kauraa</li>
<li>puuroa</li>
<li>omenaa</li>
</ol>
<p>Kuvan saa taas näytettyä img-elementillä. Välähtikö?</p>
<img src="img/lamppu.png" />
</body>
</html>
</pre>
<p>Kuva ilman muita sivujen elementtejä näyttää seuraavalta.</p>
<div class="naytto">
<img src="img/lamppu.png"/>
</div>
<h4>Kuvien oikeuksista</h4>
<p>Netissä olevat kuvat ja tiedostot eivät ole vapaasti kaikkien käytettävissä. Jos teet sivuja itsellesi, tutuille tai kavereille, ja käytät niissä netistä löytynyttä materiaalia, muista varmistaa että käyttämäsi kuvat ovat laillisesti käytettäviä. Kuvien käyttöoikeuksien varmistaminen ei ole aina helppoa tai edes mahdollista -- kannattaakin käyttää vain sivustoja, joiden oikeuksista on varmuus.</p>
<p>Esimerkiksi flickr-sivustolla on erillinen <code>creative commons</code>-osio, joka listaa kuvia, joiden käyttö on sallittua <em>tietyin ehdoin</em>. Löydät eri ehdot ja kuvia osoitteesta <a href="http://www.flickr.com/creativecommons/" target="_blank">http://www.flickr.com/creativecommons/</a>. On myös sivuja, jotka tarkoituksella keräävät materiaalia tiettyihin aiheisiin liittyen. Esimerkiksi sivusto <a href="http://opengameart.org/" target="_blank">OpenGameArt</a> tarjoaa vapaasti peleissä käytettäviä materiaaleja.</p>
<h4>Kuvat ja käytettävyys</h4>
<p>Riippuen käytössä olevasta laitteesta, sen asetuksista, ja lukijasta, kuvat eivät näy aina toivotulla tavalla. Sivuston käytettävyyttä voi helpottaa huomattavasti lisäämällä kuvaelementteihin <code>alt</code>-attribuutti, millä kerrotaan tekstuaalisesti mitä kuvassa on.</p>
<p>Tällöin, jos kuvat eivät näy käyttäjälle, voi hän kuitenkin lukea kuvaan liittyvän kuvauksen, mikä mahdollisesti selkiyttää sivun ymmärrettävyyttä.</p>
<pre class="sh_html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Selaimen palkissa ja suosikeissa näkyvä otsikko</title>
</head>
<body>
<p>...</p>
<img src="img/lamppu.png" alt="Kuva lampusta" />
</body>
</html>
</pre>
<h3>Linkit toisille sivuille</h3>
<p>Elementin <code>a</code> (<em>anchor</em>) avulla voi luoda linkin sivulta toiselle. Sivu, jolle käyttäjä siirtyy, merkitään elementin <code>a</code> attribuutin <code>href</code> arvolla. Jos sovelluksessasi on kaksi sivua, <code>index.html</code> ja <code>oma.html</code>, voi sivulta <code>oma.html</code> luoda linkin sivulle <code>index.html</code> komennolla <code><a href="index.html">index.html</a></code>. Sivulta voi lisätä myös linkin täysin toiselle sivulle. Alla olevassa esimerkissä on linkki <code>YouTube</code>-sivustolle.</p>
<pre class="sh_html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Selaimen palkissa ja suosikeissa näkyvä otsikko</title>
</head>
<body>
<h1>Sivulla näkyvä otsikko</h1>
<p>Sivuilla näytettävä normaali teksti on p-elementin sisällä,
listaelementtiä voi käyttää esimerkiksi ostoslistan tekemiseen.</p>
<ol>
<li>kauraa</li>
<li>puuroa</li>
<li>omenaa</li>
</ol>
<p>Kuvan saa taas näytettyä img-elementillä. Välähtikö?</p>
<img src="img/lamppu.png" />
<p>Linkkejä saa lisättyä a-elementillä: <a href="http://www.youtube.com/watch?v=9bZkp7q19f0">klikkaamalla
liityt miljoonien joukkoon.</a></p>
</body>
</html>
</pre>
<p>Yllä olevan sivun viimeinen tekstielementti näyttää seuraavalta:</p>
<div class="naytto">
<p>Linkkejä saa lisättyä a-elementillä: <a href="http://www.youtube.com/watch?v=9bZkp7q19f0">klikkaamalla liityt miljoonien joukkoon.</a></p>
</div>
<p>Linkki-elementeille voi lisätä myös attribuutin <code>target</code>, jolla voi ilmaista tietyn ikkunan, johon sivu avataan. Jos attribuutille <code>target</code> antaa arvon "_blank", avataan linkki aina uuteen ikkunaan.</p>
<h3>HTML5 ja apuvälineet sivun rakenteen määrittelyyn</h3>
<p><a href="http://www.w3.org/html/wg/html5/" target="_blank">HTML5</a>, eli HTML-kuvauskielen uusin (vielä kesken oleva) versio, toi mukanaan sivun rakenteen suunnittelua helpottavia elementtejä. Sivun rakenteen määrittelyä helpottavat elementit <code>header</code>, jonka sisälle kirjoitetaan sivun yleinen alkuosa kuten <code>h1</code>-elementti ja valikko, <code>nav</code>, joka sisältää sivun valikon, <code>section</code>-elementti, joka esimerkiksi nivoo yhteen toisiinsa liittyviä osia, <code>article</code>, joka sisältää yksittäisen sivulla olevan dokumentin, ja <code>footer</code>, joka kertoo sivun loppuosan. Näiden avulla sivun saa jaettua loogisiin osakokonaisuuksiin.</p>
<p>Rakennetta helpottavien elementtien käyttö ja toiminta liittyy elementtiin, jonka sisällä ne ovat. Jos elementtiä <code>header</code> käytetään elementin <code>article</code> sisällä, on <code>header</code> luonnollisesti artikkelin otsaketiedot. Jos taas <code>header</code>-elementti on <code>body</code>-elementin sisällä, liittyy <code>header</code>-elementin sisältö itse sivuun. </p>
<p>Sivut koostuvat yleensä <code>header</code>-elementillä merkittävästä yläosasta, jossa on otsikko ja mahdollisesti <code>nav</code>-elementillä merkitty valikko. Näitä seuraa yksi tai useampi tekstiosa, joka merkitään <code>article</code>-elementillä. Sivun lopussa on elementti <code>footer</code>, joka sisältää esimerkiksi yhteystiedot.</p>
<p>Seuraavassa on esimerkki, jossa <code>h1</code>-otsikko on asetettu <code>header</code>-elementin sisään. Sivulla on kaksi erillistä kirjoitusosaa, jotka on eroteltu <code>article</code>-elementeillä. Näitä seuraa lopulta <code>footer</code>-elementillä merkitty alaosa.</p>
<pre class="sh_html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sivun otsikko (näkyy selaimen palkissa)</title>
</head>
<body>
<header>
<h1>Sivulla näkyvä otsikko</h1>
</header>
<article>
<p>Sivuilla näytettävä normaali teksti on p-elementin sisällä.</p>
</article>
<article>
<ol>
<li>kauraa</li>
<li>puuroa</li>
<li>omenaa</li>
</ol>
</article>
<footer>
<p>alatunniste, esimerkiksi tekijöiden nimet.</p>
</footer>
</body>
</html>
</pre>
<div class="naytto">
<header>
<h1>Sivulla näkyvä otsikko</h1>
</header>
<article>
<p>Sivuilla näytettävä normaali teksti on p-elementin sisällä.</p>
</article>
<article>
<ol>
<li>kauraa</li>
<li>puuroa</li>
<li>omenaa</li>
</ol>
</article>
<footer>
<p>alatunniste, esimerkiksi tekijöiden nimet.</p>
</footer>
</div>
<h4>Rakenteellinen lähestymistapa sivujen sisällön määrittelyyn</h4>
<p>HTML-kuvauskieltä käytetään sivujen rakenteen määrittelyyn. Ennen HTML5:ttä sivun elementtejä eroteltiin toisistaan <code>div</code> (<em>divider</em>)-elementeillä, joille määriteltiin attribuuttina sivun osa, jonka <code>div</code>-elementti sisälsi. Yllä olevan sivun rakenne voidaan luoda myös <code>div</code>-elementeillä.</p>
<pre class="sh_html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>Sivun otsikko (näkyy selaimen palkissa)</title>
</head>
<body>
<div class="header">
<h1>Sivulla näkyvä otsikko</h1>
</div>
<div class="article">
<p>Sivuilla näytettävä normaali teksti on p-elementin sisällä.</p>
</div>
<div class="article">
<ol>
<li>kauraa</li>
<li>puuroa</li>
<li>omenaa</li>
</ol>
</div>
<div class="footer">
<p>alatunniste, esimerkiksi tekijöiden nimet.</p>
</div>
</body>
</html>
</pre>
<p>Huomannet että ero on käytännössä hyvin pieni. Oleellisinta on loogisten osakokonaisuuksien erottelu toisistaan. HTML5 tarjoaa siihen työvälineet, joita kannattaa käyttää.</p>
<div class="tehtavat">
<h3>Kampuskuoro</h3>
<p>Luo tehtäväpohjassa olevaan kansioon <code>src</code> (tai Site Root) uusi sivu <code>index.html</code>. Muokkaa sivua siten, että se näyttää seuraavalta selaimessa:</p>
<img src="img/kampuskuoro.png" border=1/>
<p>Otsikon tulee olla <code>header</code>-elementin sisällä, kuvaus ja laululista omien <code>article</code>-elementtien sisällä. Ei haittaa jos tekstin leveys on eri kuin yllä olevassa kuvassa! Kun olet valmis, ja sivusi näyttää oikealta Chromessa, palauta tehtävä TMC:lle.</p>
</div>
<h3>Lomakkeet</h3>
<p>Lomakkeita käytetään tiedon syöttämiseen web-sivuille. Tietoa voi lähettää joko erilliselle palvelimelle, tai käsitellä osana sivustoa JavaScript-kielen avulla. Lomakkeet aloitetaan HTML-elementillä <code><form></code>. Lomake-elementin sisälle voi asettaa useita erilaisia kenttiä. Palvelimelle dataa lähetettäessä jokaisella kentällä tulee olla attribuutti <code>name</code>, jota käytetään palvelimella tiedon identifiointiin.</p>
<p>Erilaisia lomakekenttiä on useita:</p>
<ul>
<li>tekstikenttä: <br/><input type="text" name="kentan_nimi" />
<pre class="sh_html"><input type="text" /></pre></li>
<li>salasanakenttä: <br/><input type="password" name="kentan_nimi" />
<pre class="sh_html"><input type="password" /></pre></li>
<li>tekstialue: <br/><textarea name="tekstialue"></textarea><br/>Toisin kuin monet muut lomakkeen kenttäelementit, tekstialue tulee sulkea erillisellä elementillä.
<pre class="sh_html"><textarea name="tekstialue"></textarea></pre></li>
<li>valintaruutu: <br/>
<input type="checkbox" name="porkkanaa" /> Porkkanaa<br/>
<input type="checkbox" name="naurista" /> Naurista<br/>
<input type="checkbox" name="kaalia" /> Kaalia<br/>
Selaimesta riippuen valintaruudun tiedot lähetetään lomakkeen mukana vain kentän ollessa valittuna.
<pre class="sh_html"><input type="checkbox" name="porkkanaa" /> Porkkanaa <br/>
<input type="checkbox" name="naurista" /> Naurista <br/>
<input type="checkbox" name="kaalia" /> Kaalia <br/></pre>
</li>
<li>valintanappi:<br/>
<input type="radio" name="valinta" value="porkkanaa"/> Porkkanaa<br/>
<input type="radio" name="valinta" value="naurista"/> Naurista<br/>
<input type="radio" name="valinta" value="kaalia"/> Kaalia<br/>
Valintanappia käytettäessä vain yksi saman name-attribuutin omistava radio-tyyppinen input-elementti voi olla valittuna. Lomaketta lähetettäessä valitun elementin attribuutin <code>value</code> arvo lähetetään <code>name</code> attribuutin arvona.
<pre class="sh_html"><input type="radio" name="valinta" value="porkkanaa"/> Porkkanaa<br/>
<input type="radio" name="valinta" value="naurista"/> Naurista<br/>
<input type="radio" name="valinta" value="kaalia"/> Kaalia<br/></pre></li>
<li>painettava nappi:<br/>
<input type="button" value="Painettava nappi" /><br/>
Painettavaa nappia painettaessa mitään ei tapahdu, ellei siihen ole erikseen lisätty toiminnallisuutta esimerkiksi javascript-kielellä.
<pre class="sh_html"><input type="button" value="Painettava nappi" /></pre></li>
<li>lähetysnappi:<br/>
<input type="submit" value="Lähetä" /><br/>
Lähetysnappia painettaessa lomakkeen tiedot lähetetään lomake-elementissä määriteltyyn osoitteeseen (lomake-elementin <code>action</code> -attribuutin arvo) valitulla lähestytavalla (lomake-elementin <code>method</code>-attribuutin arvo).
<pre class="sh_html"><input type="submit" value="Lähetä" /></pre></li>
</ul>
<h4>Lomakkeen lähettäminen</h4>
<p>Kun lomake lähetetään selain ohjaa käyttäjän <code>form</code>-elementissä olevan <code>action</code>-attribuutin määrittelemään osoitteeseen. Pyynnössä lähetetään lomakkeeseen kirjoitetut tiedot. Jos lomakkeen lähetystapa on <code>GET</code>, liitetään lomakkeen tiedot osaksi osoitetta. Lähetystavassa <code>POST</code> arvot tulevat osana pyynnön runkoa.</p>
<p><a href="http://www.w3schools.com/tags/ref_httpmethods.asp" target="_blank">Lisätietoa..</a></p>
<p>Alla oleva lomake lähettää lomakkeen tiedot <em>tälle</em> sivulle GET-pyyntönä, eli pyynnön tiedot lisätään osaksi haettavaa osoitetta.</p>
<div class="naytto">
<p>
<form method="GET" action="index.html">
<label>Käyttäjätunnus: <input type="text" name="tunnus" /></label>
<label>Salasana: <input type="password" name="salasana" /></label>
<input type="submit" />
</form>
</p>
</div>
<pre class="sh_html">
<form method="GET" action="index.html">
<label>Käyttäjätunnus: <input type="text" name="tunnus" /></label>
<label>Salasana: <input type="password" name="salasana" /></label>
<input type="submit" />
</form>
</pre>
<aside class="extra">
<p><strong>Moarr!</strong></p>
<p>Mikään yksittäinen HTML-opas ei itsessään kata kaikkea HTMLään liittyvää. Tässäkin dokumentissa tehtiin pieni pintaraapaisu HTMLn ominaisuuksiin. Erityisesti selainsovelluksia rakennettaessa uusinta informaatiota jaetaan mm. blogeissa ja muissa webissä julkaistavissa artikkeleissa. Web on täynnä timanttisia sivustoja kuten <a href="http://www.html5rocks.com/" target="_blank">http://www.html5rocks.com/</a>, <a href="http://html5-demos.appspot.com/" target="_blank">http://html5-demos.appspot.com/</a>, ... </p>
<p>Kuten yllä olevista linkeistä huomaat, "puhekielessä" HTML5 sisältää HTML-syntaksin lisäksi CSSn ja JavaScriptin. Avain onneen on pienestä liikkeelle lähteminen: toteutta joku webissä oleva hieno sivu itse sivun lähdekoodia seuraten. Muokkaile lähdekoodia, ja ota selvää mitä eri komennot tekevät. Kun joku komento on epäselvä, <a href="http://lmgtfy.com/?q=Ep%C3%A4selv%C3%A4t+avainsanat" target="_blank"><em>google auttaa</em></a> -- myös esimerkiksi <a href="http://www.w3schools.com/" target="_blank">W3Schools</a> on kätevä.</p>
</aside>
<h2>CSS</h2>
<p>CSS (<em>cascading style sheets</em>)-tyylitiedostot ovat tiedostoja, joissa määritellään <em>miten web-sivun elementit tulee näyttää käyttäjälle</em>. HTML-kuvauskielellä määritellään web-sivun rakenne ja sisältö, tyylitiedostoilla sen ulkoasu.</p>
<p>Tyylitiedostoilla voi tehdä <em>ison</em> eron siihen, miltä sivu näyttää. Voit kokeilla tätä itse avaamalla minkä tahansa mielestäsi hienolta näyttävän sivun, avata selaimen Developer Tools-työvälineet (painamalla F12), valitsemalla elements-välilehti, ja poistamalla kaikki css-tiedostoviittaukset. Tiedostoviittaukset voi poistaa elements-välilehdeltä klikkailemalla niitä oikealla hiirennapilla ja valitsemalla delete.</p>
<p>Lähdetään kuitenkin pienestä liikkeelle. Tyylitiedosto on HTML-dokumentista erillinen tiedosto, joka sisältää erilaisia tyylimäärittelyjä. Tyylitiedostoja voi olla useita. Jotta HTML-dokumentti saa tyylitiedoston käyttöönsä, tulee tyylitiedoston sijainti määritellä <code>head</code>-elementin sisälle tyylitiedoston lataavaan elementtiin <code>link</code>.</p>
<pre class="sh_html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
<title>Sivun otsikko (näkyy selaimen palkissa)</title>
</head>
<body>
<!-- sivun sisältö: näin sivuille saa kommentin -->
</body>
</html>
</pre>
<p>Elementille <code>link</code> kerrotaan viitattavan tiedoston tyyli (rel="stylesheet"), tyyppi (type="text/css") ja sijainti (href="sijainti.css"). Sijainnin tulee kertoa tyylitiedoston nimi. Tyylitiedostojen päätteenä käytetään merkkijonoa <code>.css</code>. Esimerkiksi jos tyylitiedosto tämän tiedoston sisältämän kansion sisällä olevassa kansiossa "stylesheets" ja tyylitiedoston nimi on <code>style.css</code>, asetetaan elementin <code>link</code> attribuutin <code>href</code> arvoksi "stylesheets/style.css".</p>
<h3>Tyylitiedosto</h3>
<p>Tyylitiedosto on tyypillisesti erillinen tiedosto. Luodaan tiedosto <code>style.css</code>, jonka sisältö on seuraavanlainen:</p>
<pre class="sh_css">
body {
background-color: rgb(200, 200, 200);
margin: 0;
padding: 0;
}
</pre>
<p>Yllä olevassa tyylitiedostossa sanotaan, että elementin <code>body</code> (eli HTML-dokumentin rungon) taustaväri on <code>rgb</code>-arvolla kerrottuna 200, 200, 200, eli vaaleahko. Väriarvo <code>rgb</code> tulee sanoista <code>red</code>, <code>green</code>, ja <code>blue</code>, ja jokaisella arvolla kerrotaan värin määrän. Kunkin värin määrä ilmaistaan numerolla nollan ja 255 välillä. Jos jokaisen värin arvo on 0, on väri musta, ja jos jokaisen värin arvo on 255, on väri valkoinen.</p>
<p>Kukin tyylimäärittely alkaa tyyliteltävän elementin kertovalla valitsimella ja avaavalla aaltosululla <code>{</code>, joita seuraa listaus käytettävistä tyyleistä. Kun käytettävät tyylit on määritelty, tyylimäärittely lopetetaan sulkevalla aaltosululla <code>}</code>. Kullakin tyylillä on nimi ja arvo, jotka erotetaan toisistaan kaksoispisteellä <code>:</code>. Yksittäisen tyylin (nimi ja arvo) jälkeen lisätään puolipiste <code>;</code>. Yhteen tyylimäärittelyyn voi sisällyttää useita tyylejä, ja yksittäinen tyyli voi riippuen tyylistä saada useita arvoja.</p>
<pre class="sh_css">
<em>valitsin</em> {
<em>tyylin-nimi</em>: <em>tyylin-arvo</em>;
<em>toisen-tyylin-nimi</em>: <em>arvo</em> <em>toinen-arvo</em>;
}
</pre>
<p>Tyylimäärittely voi myös sisältää useita tyyliteltäviä elementtejä, tällöin valitsimet erotellaan toisistaan pilkulla.</p>
<pre class="sh_css">
<em>valitsin</em>, <em>valitsin2</em> {
<em>tyylin-nimi</em>: <em>tyylin-arvo</em>;
<em>toisen-tyylin-nimi</em>: <em>arvo</em> <em>toinen-arvo</em>;
}
</pre>
<p>Valitsimia voi käyttää myös <a href="http://en.wikipedia.org/wiki/Tree_(data_structure)" target="_blank">lasten</a> valintaan, esimerkiksi seuraavassa valitaan ensimmäisen valitsimen joukosta toisen valitsimen tyyppinen lapsi.</p>
<pre class="sh_css">
<em>valitsin</em> > <em>valitsin2</em> {
<em>tyylin-nimi</em>: <em>tyylin-arvo</em>;
<em>toisen-tyylin-nimi</em>: <em>arvo</em> <em>toinen-arvo</em>;
}
</pre>
<h3>Valitsimet</h3>
<p>Jokaiselle sivun elementille voidaan määritellä oma tyyli. Jos halutaan että sama tyyli esiintyy kaikissa elementeissä, voidaan valitsimena käyttää elementin nimeä. Esimerkiksi seuraava tyylitiedosto muuttaa kaikkien <code>p</code>-elementtien tekstin värin punaiseksi.</p>
<pre class="sh_css">
p {
color: rgb(255, 0, 0);
}
</pre>
<h4>Luokka-attribuutti</h4>
<p>Silloin tällöin tyyli halutaan asettaa vain tietylle elementille tai elementtijoukolle. Elementeille voidaan määritellä luokka-attribuutti <code>class</code>, jonka arvoksi asetetaan joku tietty arvo, esimerkiksi "blue". Luokka-attribuuttien tyylit voi asettaa erillisellä <code>class</code>-attribuutteja valitsevalla valitsimella, pisteellä. Esimerkiksi kaikki elementit, joilla on luokka-attribuutin arvo "blue" voi valita seuraavasti (kaikille asetetaan alla tekstin väriksi sininen):</p>
<pre class="sh_css">
.blue {
color: rgb(0, 0, 255);
}
</pre>
<p>Itse sivulla olevat elementit näyttävät seuraavalta luokka-attribuutin kanssa. Osalla elementeistä on luokka-attribuutti "blue", ja osalla ei.</p>
<pre class="sh_html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
<title>Sivun otsikko (näkyy selaimen palkissa)</title>
</head>
<body>
<header>
<h1>Sivulla näkyvä otsikko</h1>
</header>
<article>
<p>Sivuilla näytettävä normaali teksti on p-elementin sisällä.</p>
<p class="blue">Kuten edellinen elementti, mutta tällä on luokka-attribuutti, jonka arvo on "blue".
Tyylimäärittely .blue asettaa tekstin värin siniseksi.</p>
</article>
</body>
</html>
</pre>
<style>
.blue-esim-luokka-attr {
color: rgb(0, 0, 255);
}
</style>
<div class="naytto">
<h1>Sivulla näkyvä otsikko</h1>
<p>Sivuilla näytettävä normaali teksti on p-elementin sisällä.</p>
<p class="blue-esim-luokka-attr">Kuten edellinen elementti, mutta tällä on luokka-attribuutti, jonka arvo on "blue".</p>
</div>
<h4>Tunnus-attribuutti</h4>
<p>Luokka-attribuuttia käytetään joukolle tyylejä. Yksittäisiä elementtejä tyyliteltäessä tapana on käyttää erillistä tunnus-attribuuttia, joka määritellään nimellä <code>id</code>. Kuten luokka-attribuutille, myös tunnus-attribuutille asetetaan arvo. Tunnus-attribuuttiin pääsee käsiksi tyylitiedostossa risuaita (<code>#</code>) -etuliitteellä. Luodaan sivu, jossa on useampia artikkeleita, joista yhtä halutaan korostaa.</p>
<pre class="sh_html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" >
<title>Sivun otsikko (näkyy selaimen palkissa)</title>
</head>
<body>
<header>
<h1>Sivulla näkyvä otsikko</h1>
</header>
<article id="highlighted-article">
<p>Sivuilla näytettävä normaali teksti on p-elementin sisällä.</p>
</article>
<article>
<p>Sivuilla näytettävä normaali teksti on p-elementin sisällä.</p>
</article>
<article>
<p>Sivuilla näytettävä normaali teksti on p-elementin sisällä.</p>
</article>
</body>
</html>
</pre>
<p>Luodaan sivu siten, että artikkeleilla on pyöreät kulmat ja vaaleahko taustaväri. Korostettavalla artikkelilla on oma tyylinsä, jossa sille asetetaan hieman vaaleampi taustaväri.</p>
<pre class="sh_css">
article {
background-color: rgb(200, 200, 200);
margin: 1em;
padding: 1em;
width: 40%;
/* pyöreät kulmat -- useampi määrittely sillä tyylispesifikaatio vielä kesken */
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#highlighted-article {
width: 42%;
background-color: rgb(240, 240, 240);
/* fiilistellään css3-tyylien kanssa */
-webkit-transform: rotate(-2deg); /* chrome, safari */
-moz-transform: rotate(-2deg); /* firefox */
-o-transform: rotate(-2deg); /* opera */
transform: rotate(-2deg);
}
</pre>
<style>
.padded-article {
background-color: rgb(200, 200, 200);
margin: 1em;
padding: 1em;
width: 40%;
/* pyöreät kulmat -- useampi määrittely sillä tyylispesifikaatio vielä kesken */
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#highlighted-article {
background-color: rgb(240, 240, 240);
width: 42%;
/* fiilistellään css3-tyylien kanssa */
-webkit-transform: rotate(-2deg); /* chrome, safari */
-moz-transform: rotate(-2deg); /* firefox */
-o-transform: rotate(-2deg); /* opera */
transform: rotate(-2deg);
}
</style>
<div class="naytto">
<header>
<h1>Sivulla näkyvä otsikko</h1>
</header>
<article class="padded-article" id="highlighted-article">
<p>Sivuilla näytettävä normaali teksti on p-elementin sisällä.</p>
</article>
<article class="padded-article">
<p>Sivuilla näytettävä normaali teksti on p-elementin sisällä.</p>
</article>
<article class="padded-article">
<p>Sivuilla näytettävä normaali teksti on p-elementin sisällä.</p>
</article>
</div>
<h3>Tyylien vaikutus elementteihin</h3>
<p>Edellä olevassa esimerkissä tyyli <code>#highlighted-article</code> ei sisältänyt reunojen pyöristystä, mutta silti korostetun artikkelin reunat pyöristettiin silti. Miksi?</p>
<p>Elementti käyttää kaikkia sille määriteltyjä tyylejä. Esimerkiksi tyyli <code>#highlighted-article</code> on osana <code>article</code>-elementtiä, jolla taas on siihen liittyvä tyyli. Mielenkiintoinen kohta liittyy artikkelin leveyteen (tyylimäärittely <code>width</code>): tyylissä <code>#highlighted-article</code> oleva määrittely <code>width</code> korvaa tyylissä <code>article</code> määritellyn leveyden. Jos leveyttä ei olisi korvattu, olisi myös leveys peritty.</p>
<p>Koska HTML-dokumentti on puu, voi tyylien periytymistä ajatella myös puumaisena periytymisenä. Jos elementille <code>body</code> määritellään tietynlainen tyyli, on kaikilla sen lapsisolmuilla <code>body</code>-elementissä määritelty tyyli, ellei lapsisolmu korvaa tyyliä.</p>
<p>Kaikki tyylit eivät kuitenkaan periydy. Tutustu tarkemmin tyylimäärittelyihin ja standardiin osoitteessa <a href="http://www.w3.org/TR/CSS/#properties" target="_blank">http://www.w3.org/TR/CSS/#properties</a>.</p>
<div class="tehtavat">
<h3>CSS Askeleet</h3>
<p>Luo tehtäväpohjan kansioon <code>src</code> tyylitiedosto <code>style.css</code>, ja viittaa siihen tiedostosta <code>index.html</code>. Muokkaa tyylitiedostoa <code>style.css</code> siten, että sivu <code>index.html</code> näyttää seuraavanlaiselta.</p>
<img src="img/css-askeleet.png" border=1/>
<p>Tässä muutama hyödyllinen väri:</p>
<ul>
<li>rgb(242, 242, 242)</li>
<li>rgb(155, 155, 155)</li>
<li>rgb(10, 10, 10)</li>
<li>rgb(252,179,21)</li>
</ul>
<p>Sivu käyttää seuraavaa määrittelyä fontin valintaan..</p>
<pre class="sh_css"> font-family: 'Trebuchet MS', Trebuchet, Arial, sans-serif;</pre>
<p>Kun olet valmis, ja sivusi näyttää oikealta Chromessa, palauta tehtävä TMC:lle.</p>
</div>
<h3>Case: Listojen tyylit</h3>
<p>Tyylitiedostoilla saa muokattua oikeastaan kaikkea sivulla olevaa. Listalle voi asettaa taustavärin, ja siitä voi poistaa numeroinnin tai pallot. Luodaan tyyliluokka <code>menu</code>, jossa listan taustaväri on vaalean harmaa, ja listan palloja ei näytetä.</p>
<pre class="sh_css">
.menu {
/* listan tausta on harmaa */
background-color: rgb(230, 230, 230);
/* ei näytetä palloja */
list-style-type: none;
/* lisätään reunoille hieman tilaa (1em = 1 standardimerkin leveys) */
padding: 1em;
}
</pre>
<pre class="sh_html">
<ul class="menu">
<li>Eka pallukka</li>
<li>Toka pallukka</li>
<li>Kolmas pallukka</li>
</ul>
</pre>
<p>Nyt lista näyttää seuraavalta:</p>
<style>
.menu-ex {
background-color: rgb(230, 230, 230);
list-style-type: none;
padding: 1em;
}
</style>
<div class="naytto">
<ul class="menu-ex">
<li>Eka pallukka</li>
<li>Toka pallukka</li>
<li>Kolmas pallukka</li>
</ul>
</div>
<p>Muutetaan listan elementtejä siten, että ne asetellaan vierekkäin. Luodaan tyyliluokka <code>menuelement</code>, joka asettaa listaelementit vierekkäin, ja lisää niille hieman tilaa sivuille.</p>
<pre class="sh_css">
.menuelement {
/* 1 standardimerkin leveyden verran tilaa jokaiselle puolelle */
padding: 1em;
/* näytetään menuelementit vierekkäin */
display: inline;
}
</pre>
<p>Lisätään listan elementeille tyyliluokka listaelementti.</p>