HTML ja CSS Tästä se lähtee: portfolio-sivusto Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. index.html Sivuston pääsivu, joka avautuu selaimeen ensimmäisenä sivujen wwwosoitteella. Pääsivun nimi on aina index.html tyylit.css Tyylitiedosto, joka sisältää sivujen asettelu- ja muotoilumääritykset. Nimetään noudattaen nimeämissääntöjä, ks. seuraava laatikko. Alasivuja, jotka nimetään noudattaen wwwympäristön nimeämissääntöjä: ei ääkkösiä, ei välilyöntejä, ei erikoismerkkejä, vain yksi piste nimen ja tiedostotunnisteen välissä. Yleensä käytetään pieniä alkukirjaimia. jpg gif png kuvat Alikansio kuvia varten. Alikansioiden avulla voi järjestää sivustoon kuuluvia tiedostoja. Nimeämissäännöt koskevat myös kansioiden nimiä.
Html-dokumentin aloitus... 3 Html ja css... 4 Kielioppia... 4 Sivun rakenne... 5 Css-tyylien liittäminen html-elementteihin... 8 Harjoitus: index-sivu ja tyylitiedosto... 9 Html_xhtml-5.docx 25.9.2013 2(10)
Html-dokumentin aloitus http://www.w3schools.com/html5/default.asp Opettele ajan kanssa html-elementtejä eli tageja; niistä on selkeät selitykset, erot html 4 ja 5 välillä, ja esimerkit käytöstä sekä tieto mitkä selaimet tukevat. Sivun muodostavat rakenne-elementit: <html> <head>metatietoa selaimelle ja hakukoneille</head> <body>selainikkunassa näkyvä ja toimiva sisältö</body> </html> Html4-standardin mukaan: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>portfolio</title> <link href="tyylit.css" rel="stylesheet" type="text/css" /> </head> Xhtml1-standardin mukaan: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>portfolio</title> <link href="tyylit.css" rel="stylesheet" type="text/css" /> </head> Html5-standardin mukaan: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>portfolio</title> <link href="tyylit.css" rel="stylesheet"> </head> Html_xhtml-5.docx 25.9.2013 3(10)
Standardia valitessasi huomioi, että kaikki selaimet eivät tue vielä kaikkia html5-elementtejä virheettömästi. Selaimia kehitetään kuitenkin koko ajan ja todennäköisesti lähitulevaisuudessa html5 yleistyy voimakkaasti, koska se toimii hyvin myös mobiililaitteissa. Html ja css Nettisivuja tehdessä erotetaan rakenne ja sisältö html-koodiksi ja muotoilu ja asettelu css-koodiksi. Csskoodi voi olla html-tiedostossa html-koodin seassa, mutta tehokkaammin css-koodia käytetään sijoittamalla se erilliseen css-tiedostoon. Html-sivu linkitetään css-tyylitiedostoon head-osaan kirjoitettavan komennon avulla. Kun selain lukee html-koodista tagin <body>, ja löytää css-koodista määrittelyn body { }, selain näyttää body-elementin aaltosulkeiden sisällä määritellyllä tavalla. Yllä olevassa esimerkissä on määritelty bodyelementin taustaväri (sivun taustaväri), fonttimuotoilu (joka toimii sivun tekstien oletusmuotoiluna) ja marginaali. Vastaavasti voi määrittää minkä tahansa html-elementin muotoilut. Kielioppia Html-elementti muodostuu <aloituskomennosta>, sisällöstä ja <lopetuskomennosta>: <h1>tervetuloa portfoliosivuilleni</h1> Joillakin elementeillä on vain aloituskomento, koska niillä ei varsinaisesti ole sisältöosaa: <br> (kappaleensisäinen rivinvaihto) <img> (kuva) Aloituskomentoon lisätään tarvittaessa lisämääreitä eli attribuutteja: <img src= kuvat/logo.jpg width= 160 height= 90 > Esimerkiksi kuva-elementin aloituskomennossa kerrotaan src-attribuutin avulla esitettävän kuvatiedoston sijainti ja nimi, width-attribuutilla leveys ja height-attribuutilla korkeus. Attribuutin kielioppi on: ominaisuus= arvo ja se erotetaan aloituskomennosta ja muista attribuuteista välilyönnillä. Html_xhtml-5.docx 25.9.2013 4(10)
Osa html-elementeistä on rakenneosia suorakaiteen muotoisia laatikoita, joilla luodaan sivun asettelu. Tällaisia ovat esim. div ja table, tai html5:n section, header, article, footer, aside, nav jne. Asettelu määritellään css-tyyleillä. Osa elementeistä on sisältöelementtejä, kuten otsikot, tekstikappaleet jne. Esimerkiksi sivun ylälaitaan voidaan sijoittaa laatikko otsikkoa tai banneria varten: html-koodi (html5) <header> <h1>tervetuloa portfoliosivuilleni</h1> </header> (html4 / xhtml1) <div id= header > <h1>tervetuloa portfoliosivuilleni</h1> css-koodi header { height: 90px; background-color: #696; } #header { height: 90px; background-color: #696; } Css-tyylimäärityksen kielioppi on valitsin { ominaisuus: arvo; } Yllä olevasta esimerkistä näet, miten määrittelyt kirjoitetaan. Huomaa, että väri annetaan heksadesimaaliarvona ja kolmenumeroinen #696 on lyhyempi merkintä värille #669966. Kommenttimerkinnät Niin html- kuin css-koodin sekaan voi kirjoittaa kommentteja, joilla selvennetään ja selitetään koodia ja vaikkapa ohjeistetaan sivujen päivittäjää. Kommentille on oma merkintätapansa molemmissa: html <!-- kommentti, yksi- tai monirivinen --> css // yksirivinen kommentti /* kommentti, joka voi olla monirivinenkin */ Sivun rakenne Sivun rakenne ja asettelu kannattaa suunnitella hyvin ennen toteuttamista. Yksinkertaisinta on luoda asettelun koossa pitämiseksi yksi pohjalaatikko, jonka sisälle luodaan sivun varsinainen asettelurakenne. Laatikot luodaan käyttämällä div-elementtejä (html4 ja xhtml), tai semanttisia elementtejä (html5); vrt. edellä olevan esimerkin header-elementti. Semanttinen elementti tarkoittaa yksinkertaistettuna, että elementin nimi kertoo myös käyttötarkoituksen. Alla esimerkki yksinkertaisesta sivurakenteesta: Html_xhtml-5.docx 25.9.2013 5(10)
<div id= wrapper > <header> html 5 <nav> <article> id on yksilöivä nimi, joka annetaan elementille sen tunnistamista varten. Html5:n semanttiset elementit eivät tarvitse id:tä tyylejä varten. <footer> <div id= wrapper > <div id= header > html 4 xhtml <div id= nav > <div id= article > <div id= footer > Html_xhtml-5.docx 25.9.2013 6(10)
Html-koodina rakenne näyttää tältä (body-osa): <body> <!-- html5-standardin mukaan --> <div id= wrapper > <header> yläpalkin sisältö, esim. logo, otsikko, banneri </header> <nav> linkit </nav> <article> sisältöosa, esim. tekstiä ja kuvia </article> <footer> alapalkin sisältö, esim. copyright, yhteystietoja </footer> </body> <body> <!-- html4- tai xhtml-standardin mukaan --> <div id= wrapper > <div id= header > yläpalkin sisältö, esim. logo, otsikko, banneri <div id= nav > linkit <div id= article > sisältöosa, esim. tekstiä ja kuvia <div id= footer > alapalkin sisältö, esim. copyright, yhteystietoja </body> Ilman css-tyylimäärityksiä tulos selaimessa on laiha: Html_xhtml-5.docx 25.9.2013 7(10)
Css-tyylien liittäminen html-elementteihin Sivun 5 taulukosta näet, kuinka html-elementti ja sille tarkoitettu tyylimääritys liittyvät toisiinsa valitsimen avulla. Valitsinta voi ajatella myös tyylin nimenä. Alla olevassa taulukossa on lisää esimerkkejä: html-elementti <body> <h1> <p> <div id= wrapper > <div id= header > <div id= article > <p>tekstikappale</p> <article> <header> <article> <p>tekstikappale</p> </article> <h1 class= oikeatasaus > <p class= oikeatasaus > <a> käyttämätön linkki <a> hiiren osoitin linkin päällä <a> vierailtu linkki <a> aktiivinen linkki valitsin, joka liittää csstyylin html-elementtiin body h1 p #wrapper #header #article p article header article p.oikeatasaus a:link a:hover a:visited a:active kuvaus Kun valitsin on sama kuin html-elementti, tyyli vaikuttaa kaikkiin elementin esiintymiin, esim. kaikkiin tekstikappaleisiin. Kun id:tä käytetään valitsimena, sen eteen kirjoitetaan #-merkki. Tyyli vaikuttaa vain elementtiin, jolla on kyseinen id. Tyyli vaikuttaa tekstikappaleisiin, jotka ovat article-nimisen div-elementin sisällä. Html5:n uusille elementeille käytetään valitsimia kuten muillekin html-elementeille, vrt. ensimmäinen esimerkki. Tyyli vaikuttaa tekstikappaleisiin, jotka ovat article-elementin sisällä. Class-attribuutilla voidaan liittää itse nimetty tyyli mihin tahansa html-elementtiin, kunhan määritys sopii järkevästi siihen. Class-tyyppisen tyylin nimi (valitsin) alkaa aina pisteellä. Huomaa, että attribuutin arvossa pistettä ei käytetä. Linkeille voi css-tyyleillä muotoilla neljä olotilaa. Näin käyttäjä saa visuaalista palautetta toiminnastaan. Tyypillisesti muutetaan linkin tekstin väriä. Html_xhtml-5.docx 25.9.2013 8(10)
Harjoitus: index-sivu ja tyylitiedosto 1) Avaa muistio-ohjelma (Notepad) tai vastaava mahdollisimman yksinkertainen tekstieditori. Voit myös asentaa ilmaisen koodieditorin Notepad++ : http://www.ilmaisohjelmat.fi/notepad-pp. Älä käytä tekstinkäsittelyohjelmaa! 2) Tallenna tiedosto. Valitse tallennuspaikaksi sivustoa varten tekemäsi pääkansio tai luo pääkansio tallennuksen yhteydessä. Kirjoita tiedostonimeksi index.html ja vaihda tallennusmuodoksi Kaikki tiedostot (ettei muistio tee tiedostosta txt-päätteistä tekstitiedostoa). Valitse koodaukseksi UTF-8. 3) Kirjoita html5:n mukaisesti sivun 6 mukainen html-dokumentti (voit luntata sivulta 7). Voit jättää esimerkkitekstit pois ja koodata vain rakenneosat. 4) Avaa toinen muistio-ikkuna Käynnistä-painikkeen valikosta niin että html-tiedostosi ei sulkeudu. Tallenna uusi tiedosto yllä olevien ohjeiden mukaan nimellä tyylit.css samaan kansioon html-tiedoston kanssa. Notepad++ osaa pitää useita dokumentteja auki omilla välilehdillään, jotka saa aseteltua kätevästi myös rinnakkain. 5) Kirjoita css-tyylit html-dokumentin elementtejä varten. Määritä body-elementille taustaväri (background-color, esimerkiksi #333). Esimerkkiä löytyy sivuilla 4-5. Määritä wrapper-elementille leveys (width) 800 px ja korkeus (height) 700 px, ja marginaalit (margin-top: 10 px, margin-left: auto, margin-right: auto). Wrapper-elementti tulee näin keskitettyä sivulle ja 10 pikseliä irti yläreunasta. Html_xhtml-5.docx 25.9.2013 9(10)
Määritä muille elementeille sopiva korkeus ja taustaväri. Melko kattava sävykartta löytyy täältä: http://www.coloria.net/bonus/colornames.htm (maininta www värin kohdalla kertoo, että se on selainturvallinen väri mutta muitakin voi käyttää). Harjoituksen esimerkkiratkaisu Notepad++ ikkunassa: Esimerkissä wrapperin sisällä olevien elementtien korkeudet on annettu prosentteina pikselilukemien sijaan. Huomaa Tallenna kaikki painike työkalurivillä. Html_xhtml-5.docx 25.9.2013 10(10)