Luettelot ja sekalaisia komentoja Helsingin normaalilyseo Jani Kiviharju syksy 2016
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ä
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>
Listaesimerkki <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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>
Listaesimerkki 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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>
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 37.20 ja 10. Tomi 38.10. Sponsorit: Lastulan Lauta, MegaMarket, RänniRane, TietoWelhot, GigaSport ja Peikon Eräpuoti. Käytä verkkosivussa listoja apunasi Numeroitu lista osallistujille Numeroimaton lista sponsoreille
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
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ä
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: http://www.w3schools.com/tags/ref_entities.asp
Esimerkki <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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>
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
Taustamateriaalia Listoja http://www.w3schools.com/html/html_lists.asp Määritelmäluettelo http://cs.stadia.fi/~lehtonen/html.html#maaritelmaluettelo Erikoismerkkiluettelo http://www.w3schools.com/tags/ref_entities.asp