Lataa esitys
Esittely latautuu. Ole hyvä ja odota
1
Luettelot ja sekalaisia komentoja
Helsingin normaalilyseo Jani Kiviharju syksy 2016
2
Luettelot HTML-kielessä on omat komentonsa luetteloja tai listoja varten <ul> aloittaa numeroimattoman listan (unordered list) <ol> aloittaa numeroidun listan (ordered list) <li> merkitsee uutta riviä listassa (list item) Sekä numeroituja että numeroimattomia listoja voidaan muokata lisämääreillä UL-listan listamerkkejä muutetaan type-attribuutilla. Mahdolliset arvot disc, circle ja square. OL-listan numerointia muutetaan type-attribuutilla. Mahdolliset arvot A, a, I, i ja 1. Listan alkamisnumero voidaan määrittää start-attribuutilla. Type-attribuutit on nykyisin yleensä korvattu tyylimäärittelyillä
3
Numeroimaton lista <ul> <li>Aku</li> • Aku <li>Tupu</li> • Tupu <li>Hupu</li> • Hupu <li>Lupu</li> • Lupu </ul> Numeroitu lista <ol> <li>Mikki</li> 1. Mikki <li>Minni</li> 2. Minni </ol>
4
Listaesimerkki <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>Listat</title> </head> <body> <h1>Listoja</h1> <h2>Numeroimaton lista</h2> <ul> <li>Aku</li> <li>Tupu</li> <li>Hupu</li> <li>Lupu</li> </ul> <h2>Numeroimaton lista 2</h2> <ul type="square"> <li>Kasper</li> <li>Jesper</li> <li>Joonatan</li> </body> </html>
5
Listaesimerkki 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>Listat</title> </head> <body> <h1>Listoja</h1> <h2>Numeroitu lista</h2> <ol> <li>Aku</li> <li>Tupu</li> <li>Hupu</li> <li>Lupu</li> </ol> <h2>Numeroitu lista 2</h2> <ol type="i"> <li>Kasper</li> <li>Jesper</li> <li>Joonatan</li> </body> </html>
6
Tehtävä Tee suunnistustapahtumalle verkkosivu kisa.html, jossa on näkyvillä kilpailun 10 parhaan suunnistajan tulokset paremmuusjärjestyksessä sekä kilpailua sponsoroineet yritykset Tulokset: 1. Pirkko 27.35, 2. Olavi 28.20, 3. Petri 28.30, 4. Liisa 28.55, 5. Anne 29.35, 6. Sari 30.05, 7. Lassi 31.25, 8. Veeti 33.50, 9. Maria ja 10. Tomi Sponsorit: Lastulan Lauta, MegaMarket, RänniRane, TietoWelhot, GigaSport ja Peikon Eräpuoti. Käytä verkkosivussa listoja apunasi Numeroitu lista osallistujille Numeroimaton lista sponsoreille
7
Html-koodin kommentointi
Html-koodiin voidaan lisätä kommentteja helpottamaan koodin seuraamista ja muokkaamista <!-- Tämä on kommenttitekstiä --> Kommentti aloitetaan <!-- merkillä ja lopetetaan --> merkillä Sopiva kommentointi helpottaa html-koodin seuraamista ja toisaalta kommentoinnilla voidaan selittää lähdekoodia sitä mahdollisesti tutkiville henkilöille Lisäksi kommentointi käytetään apukeinona verkkosivujen sisäisessä ohjelmoinnissa (mm. JavaScript) piilottamaan ohjelmakoodi selaimelta
8
Lähdekoodin tarkastelu
Minkä tahansa verkkosivun lähdekoodia voi tutkia valitsemalla selaimesta ”Näytä lähdekoodi” Internet Explorer ja Mozilla Firefox: Valitse tutkittavan verkkosivun kohdalla hiiren oikeanpuoleisen painikkeen valikosta View Source/Näytä sivun lähdekoodi Eri sivustojen lähdekoodia tutkiminen antaa runsaasti ideoita sivujen toteuttamiseen Toimiviin ratkaisuihin kannattaa tutustua huolella omia sivuja rakennettaessa Vastaavasti myös epäonnistuneiden sivujen rakenteeseen kannattaa tutustua, ettei itse tee samoja virheitä
10
Pre ja erikoismerkit Pre-komento
Pre-komento eli esimuotoilu pakottaa selaimen huomioimaan html-dokumentissa tehdyt muotoilut Pre-tagin jälkeen selain huomioi rivinvaihdot ja välilyönnit ja kirjoittaa tekstin tasavälisellä Courier-fontilla Pre-komentoa voidaan käyttää yksinkertaisiin taulukkoihin varsinaisen table-tagin sijaan ja sillä voidaan tehdä yksinkertaisia muotoiluja Erikoismerkit Muutamille merkeille (esim. <, >, &, ”) on varattu html-koodissa erityinen merkitys ja toisaalta on olemassa näppäimistöstä puuttuvia merkkejä Jos halutaan varmistaa, ettei selain tulkitse merkkiä komennoksi, voidaan merkit ilmaista kutakin merkkiä vastaavana koodina (& + nimi + ; TAI & + numero + ;) < < ” " välilyönti > > © © € € & & ® ® Kattavampi luettelo:
11
Esimerkki <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>Harjoitussivu</title> </head> <body> <h2>PRE</h2> <pre> Tämä teksti on esimuotoiltua. Siksi jo tekstieditorilla tehdyt rivinvaihdot ja ylimääräiset välilyönnit tulevat näkyviin. MA Makaronilaatikko TI Lihakeitto KE Chili con carne TO Kalapuikot PE Broilerikiusaus </pre> <h2>Erikoismerkit</h2> & <br> Yksi väli. <br> Usea väli. <br> </body> </html>
12
Korjaa mallin mukaiseksi -tehtävä
Kopioi kansioosi kurssikansiosta korjaa.html Korjaa tiedostossa olevat virheet niin, että lopputulos on seuraavan dian mallin mukainen (ks. dia 12) Virheet koskevat html-koodia, tekstiä ei tarvitse oikolukea Muista lopputagit! Monet selaimet sallivat lopputagien unohtamisen, mutta se ei kuulu hyvään ohjelmointiin ja saattaa aiheuttaa eri selainversioissa ongelmia
14
Taustamateriaalia Listoja http://www.w3schools.com/html/html_lists.asp
Määritelmäluettelo Erikoismerkkiluettelo
Samankaltaiset esitykset
![1 Taulukot. 2 Miten taulukoita tehdään n WYSIWYG-editorien työkalut n HTML [border]… n Excel etc. Save as html.](/8/2027855/big_thumb.jpg "1 Taulukot. 2 Miten taulukoita tehdään n WYSIWYG-editorien työkalut n HTML [border]… n Excel etc. Save as html.>")
