Code Camp for Girls. Sanna Nygård. Lokakuussa

Koko: px

Aloita esitys sivulta:

Download "Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/"

Esa Toivonen
8 vuotta sitten
Katselukertoja:

2 Code Camp for Girls Sanna Nygård Lokakuussa

3 HTML?

4 HTML? HyperText Markup Language Ei ole nettisivua ilman HTML:ää Rakenteinen, hierarkkinen dokumentti Vain rakenne ja sisältö, ei ulkoasua

5 Kaikki koostuu laatikoista

7 <img> <h1> <a> <h2> <p> <p> <p> <img> <img> <div> <div>

8 <img> <a> <h1> <h2> <p> <p> <p> <img> <div>

9 Elementin rakenne Kahden tyyppisiä: 1. Sellaisia joilla on sisältö <h1>sisältö</h1> 2. Sellaisia joilla ei ole <img src="kuva.jpg" />

10 Elementin rakenne <tunniste nimi="arvo">sisältö</tunniste> attribuutti alkutägi lopputägi elementti

11 Sisällöllisen elementin rakenne <a href="toinensivu.html">klikkaa tästä!</a> attribuutti alkutägi lopputägi elementti

12 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

13 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>

14 Sivun rakenne <!DOCTYPE html> <html> <head> <body> <meta> <h1> <title> <p>

15 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

16 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

yleensä kursivoituna <ul> <li>...</li> <li>.

17 Elementtejä <table> <tr> <td>...</td> <td>...</td> </tr> </table> taulukko taulukon rivi taulukon solu taulukon solu

18 Elementtejä <header>...</header> <footer>...</footer> sivun ylätunniste sivun alatunniste <section>...</section> <article>...</article> erottelee sivun osion erottelee artikkelitekstin muusta sivun sisällöstä

19 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

Mieti sivusi rakennetta ja millaisia elementtejä siihen kuuluu 3.

20 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=" Googleen</a>

html:n <body>:n sisälle seuraava: <a href="sivu2.html">linkki sivulle 2</a> 4. Lisää sivu2.

21 Tehtävä: Kuvan lisääminen 1. Mene osoitteeseen etsi sivullesi sopiva kuva ja lataa se koneellesi 2. Mene osoitteeseen 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" />

22 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>

23 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>

24 HTML CSS

25 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...

26 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>

27 style.css h1 { } color: white; background-color: black; p { } color: orange;

28 index.html

29 index.html + style.css

30 Tehtävä: Lisää taustaväri CSS:llä 1. Mene osoitteeseen 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 (#)!

31 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

32 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

Samankaltaiset tiedostot

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin