Code Camp for Girls Sanna Nygård Lokakuussa 2015 www.frantic.com/codecamp/
HTML?
HTML? HyperText Markup Language Ei ole nettisivua ilman HTML:ää Rakenteinen, hierarkkinen dokumentti Vain rakenne ja sisältö, ei ulkoasua
Kaikki koostuu laatikoista
<img> <h1> <a> <h2> <p> <p> <p> <img> <img> <div> <div>
<img> <a> <h1> <h2> <p> <p> <p> <img> <div>
Elementin rakenne Kahden tyyppisiä: 1. Sellaisia joilla on sisältö <h1>sisältö</h1> 2. Sellaisia joilla ei ole <img src="kuva.jpg" />
Elementin rakenne <tunniste nimi="arvo">sisältö</tunniste> attribuutti alkutägi lopputägi elementti
Sisällöllisen elementin rakenne <a href="toinensivu.html">klikkaa tästä!</a> attribuutti alkutägi lopputägi elementti
Sisällöttömän elementin rakenne <img src="kuva.jpg" alt="tässä kuvassa on hevonen"/> attribuutti attribuutti alkutägi HUOM: ei lopputägiä! elementti
Sivun rakenne <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tämä on selaimen otsikkopalkissa näkyvä teksti</title> </head> <body> <h1>tämä on sivun pääotsikko</h1> <p>tämä on ensimmäinen tekstikappale.</p> <p>tämä on toinen tekstikappale.</p> </body> </html>
Sivun rakenne <!DOCTYPE html> <html> <head> <body> <meta> <h1> <title> <p>
Elementtejä <p>...</p> tekstikappale <h1>...</h1> <h2>...</h2> 1. tason otsikko 2. tason otsikko jne <a href="...">...</a> linkki toiselle sivulle <img src="..." alt="..."/> kuva <br/> pakotettu rivinvaihto
Elementtejä <strong>...</strong> <em>...</em> tärkeä teksti, selaimet näyttävät yleensä lihavoituna tärkeä teksti, selaimet näyttävät yleensä kursivoituna <ul> <li>...</li> <li>...</li> </ul> lista listan yksittäinen kohta listan yksittäinen kohta <div>...</div> <span>...</span> ei erityistä merkitystä, käytetään elementtien ryhmittelyyn ei erityistä merkitystä, käytetään tekstin ja elementtien tyylittämiseen
Elementtejä <table> <tr> <td>...</td> <td>...</td> </tr> </table> taulukko taulukon rivi taulukon solu taulukon solu
Elementtejä <header>...</header> <footer>...</footer> sivun ylätunniste sivun alatunniste <section>...</section> <article>...</article> erottelee sivun osion erottelee artikkelitekstin muusta sivun sisällöstä
Tehtävä: Elementtien lisääminen 1. Avaa html-kansiossa oleva index.html Atom-ohjelmassa 2. Mieti sivusi rakennetta ja millaisia elementtejä siihen kuuluu 3. Lisää pääotsikko: <h1>...</h1> 4. Lisää tekstikappaleita: <p>...</p> <p>...</p> 5. Valitse itse muita elementtejä, joita lisäät sivulle
Tehtävä: Linkittäminen toiselle sivulle 1. Luo tiedosto nimeltä sivu2.html samaan kansioon index.html:n kanssa 2. Kopioi index.html:n sisältö sivu2.html:ään 3. Lisää index.html:n <body>:n sisälle seuraava: <a href="sivu2.html">linkki sivulle 2</a> 4. Lisää sivu2.html:ään <body>:n sisälle seuraava: <a href="index.html">linkki etusivulle</a> 5. Lisää sivu2.html:ään <body>:n sisälle seuraava: <a href="http://www.google.com">linkki Googleen</a>
Tehtävä: Kuvan lisääminen 1. Mene osoitteeseen www.pexels.com, etsi sivullesi sopiva kuva ja lataa se koneellesi 2. Mene osoitteeseen www.picresize.com, valitse lataamasi kuva Browse-napilla ja klikkaa Continue. Valitse Resize Your Picture -kohdasta Fit to Screen: 1024 tai jos tiedät tarkan koon, jossa haluat kuvan näyttää, valitse Custom Size ja syötä leveys (width). Lataa pienennetty kuva koneellesi I m Done -napista. Siirrä kuva imageskansioon ja nimeä uudelleen kuva1.jpg:ksi 3. Lisää sivulle <img src="images/kuva1.jpg" alt="tämä on 1. kuva"/> 4. Pienennä tarvittaessa kuva haluamaasi kokoon lisäämällä sille width tai height - attribuutti: <img src="images/kuva1.jpg" alt="tämä on 1. kuva" width="500" />
Tehtävä: Elementtien lisääminen sisäkkäin 1. Lisää lista ja sen sisälle listan yksittäisiä kohtia: <ul> <li>...</li> <li>...</li> </ul> 2. Lisää yksi <article>-elementti otsikoiden, leipätekstien ja listan ympärille: <article> <h1>...</h1> <p>...</p> <p>...</p> <ul>...</ul> </article>
Tehtävä: Elementtien lisääminen sisäkkäin 1. Lisää yksi <div>-elementti kaikkien muiden lisäämiesi elementtien ympärille: <div> <article> <h1>...</h1> <p>...</p> <p>...</p> <ul>...</ul> </article> </div>
HTML CSS
CSS? Cascading Style Sheets HTML:n ulkoasua muokkaavia tyylisääntöjä Värejä, kuvia, fontteja, tekstin kokoja, viivoja, korkeuksia, leveyksiä Asetteluja, läpinäkyvyyksiä, animaatioita...
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tämä on selaimen otsikkopalkissa näkyvä teksti</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>tämä on sivun pääotsikko</h1> <p>tämä on ensimmäinen tekstikappale.</p> </body> </html>
style.css h1 { } color: white; background-color: black; p { } color: orange;
index.html
index.html + style.css
Tehtävä: Lisää taustaväri CSS:llä 1. Mene osoitteeseen www.colorpicker.com ja etsi sopiva taustaväri sivullesi. Vinkki: yleensä vaalea tausta on parempi kuin tumma. 2. Avaa css-kansiossa oleva style.css 3. Lisää body { } -kohdan sisään background-color: ja sen perään valitsemasi värin koodi, esim. body { } background-color: #C5B6E3; HUOM! Muista risuaita (#)!
Tehtävä: Lisää pääotsikolle tekstiväri CSS:llä 1. Lisää body { } -kohdan jälkeen h1 { } 2. Lisää h1 { } -kohdan sisään color: ja sen perään valitsemasi värin koodi, esim. h1 { color: #7B4DD1; } Vinkki: yleensä tumma teksti on parempi kuin vaalea 3. Valitse jokin itse lisäämäsi elementti, jolle lisäät taustavärin tai tekstivärin, esim. p, article tai ul
Taulukot HTML <table> <tr> <td>rivin 1 solu 1</td> <td>rivin 1 solu 2</td> </tr> <tr> <td>rivin 2 solu 1</td> <td>rivin 2 solu 2</td> </tr> </table> CSS table { border-collapse: collapse; } td { border: 1px solid black; padding: 5px; } Lopputulos