Code Camp for Girls. Sanna Nygård. Lokakuussa 2015

Koko: px
Aloita esitys sivulta:

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

Transkriptio

1

2 Code Camp for Girls Sanna Nygård Lokakuussa 2015

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

6

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

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

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="http://www.google.com">linkki Googleen</a>

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

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli. HTML & CSS Antti Koivisto HTML (HyperText Markup Language)! HTML on sivujen kuvauskieli.! Se ei ole ohjelmointikieli.! HTML on merkintäkieli, joka koostuu monista merkintä tägeistä ().! Voidaan

Lisätiedot

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

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006 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

Lisätiedot

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne Kotisivuohjeet Tässä ohjeessa käydään läpi kotisivujen tekemisen perusteet keskittyen html-koodiin ja sen ominaisuuksiin. Sivupohjissa ulkoasu ja rakenne on pääasiassa jaettu erilliseen css-tyylitiedostoon,

Lisätiedot

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot.

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. 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

Lisätiedot

TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN

TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN YLEISTÄ LUENNOT (8 H) & TYÖPAJA (2 H) YHTEYSTIEDOT ville.salminen@oulu.fi VÄLINEET Tekstieditori Mieluummin Windowsin Notepad kuin esimerkiksi Microsoft Word

Lisätiedot

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla 1 ENTITEETIT Tehtävä 1. Tietokoneet ja käyttöjärjestelmät käyttävät erilaisia merkkijärjestelmiä ja varsinkin Internetin alkutaipaleella aiheutti sen, että jotkut merkit eivät näkyneet kaikilla oikein.

Lisätiedot

AT4-kotisivukurssi. 4. jakso 5.2. 5.4.2013.

AT4-kotisivukurssi. 4. jakso 5.2. 5.4.2013. AT4-kotisivukurssi 4. jakso 5.2. 5.4.2013. Ohjeita, kotisivueditori HTML-opas http://www.iki.fi/mikaves/html/ (Mika Westerholm) Kotisivueditorit: Notepad (yksinkertainen BlueGriffon (tehokas, ilmainen)

Lisätiedot

Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009

Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009 Verkkosivut perinteisesti Tanja Välisalo 11.2.2009 WWW-sivujen vieminen omaan kotisivutilaan yliopiston mikroverkossa https://salasana.jyu.fi Klikkaa painiketta Activate WWW Klikkaa painiketta Activate

Lisätiedot

XML, XHTML ja CSS. T-111.361 Hypermediadokumentin laatiminen. Mikko Pohja

XML, XHTML ja CSS. T-111.361 Hypermediadokumentin laatiminen. Mikko Pohja XML, XHTML ja CSS T-111.361 Hypermediadokumentin laatiminen Mikko Pohja Sisältö XML Yleensä Eri kieliä XHTML CSS XSL XML EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard

Lisätiedot

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne Kotisivuohjeet Tässä ohjeessa käydään läpi kotisivujen tekemisen perusteet keskittyen html-koodiin ja sen ominaisuuksiin. Ohjetta voidaan käyttää sivupohjien luonnin apuna, on kuitenkin suositeltavaa että

Lisätiedot

Verkkojulkaiseminen Minna Väisänen. HTML5-tehtävä

Verkkojulkaiseminen Minna Väisänen. HTML5-tehtävä Verkkojulkaiseminen Minna Väisänen HTML5-tehtävä Kirjoita Dreamweaverissa oheisen nettisivun koodi. Lisää xx-kohtiin omat tietosi. Kuvan nimi on joki.jpg. Ensin tehdään sivusto ja sitten yksittäinen sivu.

Lisätiedot

Kopseptisuunnittelu Verkkomultimedia ICT1tn004

Kopseptisuunnittelu Verkkomultimedia ICT1tn004 Kopseptisuunnittelu Verkkomultimedia ICT1tn004 Sivustokartta Käsikirjoitus Graafinen suunnitelma Elina Ulpovaara Konseptisuunnittelu ICT1TN004 toiminnallisuus toimintatarinat -> käyttötarinat kuvatarinat

Lisätiedot

http://www.microsoft.com/expression/

http://www.microsoft.com/expression/ Verkkojulkaisuharjoitus1 TAVOITE Harjoituksen tarkoituksena on opiskella käyttämään verkkojulkaisueditoria (Microsoft Expression Web) ja käynnistämään verkkosivu internetissä. VERKKOSIVUEDITORIN KÄYTTÖOHJEITA

Lisätiedot

Lisätehtävät. Frantic 2015 sivu 1 www.frantic.com

Lisätehtävät. Frantic 2015 sivu 1 www.frantic.com Lisätehtävät Frantic 2015 sivu 1 www.frantic.com Fontit - Google fonts Fonttien käyttäminen verkossa ilman uusien fonttien lataamista on melko rajattua, sillä koskaan ei voi tietää mitä fontteja vastaanottajan

Lisätiedot

Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.

Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta. 3 HTML ja XHTML Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.

Lisätiedot

Vaasan yliopiston toimintaa tukevat informaatiopalvelut ovat käytettävissä WWW:n kautta.

Vaasan yliopiston toimintaa tukevat informaatiopalvelut ovat käytettävissä WWW:n kautta. 1. Julkaisutoiminnan peruskysymyksiä a) Mieti kohderyhmät b) Mieti palvelut c) Mieti palvelujen toteutus Vaasan yliopiston toimintaa tukevat informaatiopalvelut ovat käytettävissä WWW:n kautta. PALVELUKOKONAISUUDET:

Lisätiedot

Teeman rakentaminen Wordpressiin

Teeman rakentaminen Wordpressiin 1 Teeman rakentaminen Wordpressiin Jari Sarja lokakuu 2009 Sisältö Johdanto... 2 Valmiin teeman muokkaaminen... 2 XHTML:n perussäännöt... 4 Teeman tiedostot... 5 Sanasto... 5 Hierarkia... 5 Template...

Lisätiedot

Ylläpitoalue - Etusivu

Ylläpitoalue - Etusivu Crasmanager 5.2 Ylläpitoalue - Etusivu Sivut osiossa sisällön selaus ja perussivujen ylläpito. Tietokannat osiossa tietokantojen ylläpito. Tiedostot osiossa kuvien ja liitetiedostojen hallinta. Työkalut

Lisätiedot

Sivupohjien täyttö suppeat sivupohjat

Sivupohjien täyttö suppeat sivupohjat Sivupohjien täyttö suppeat sivupohjat Tässä kuvataan sivupohjien muokkaus askelittain yksinkertaisemman sivupohjan avulla. Tätä ohjetta tunnollisesti seuraamalla saat aikaan yksinkertaiset, mutta toimivat

Lisätiedot

WWW-sivujen Verkkosivujen ulkoasu (CSS)

WWW-sivujen Verkkosivujen ulkoasu (CSS) WWW-sivujen Verkkosivujen ulkoasu (CSS) T-111.1100 Digitaalisen median työvälineet (3 op) T-111.1100 Digitaalisen median työvälineet (3 op) Markku Laine DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan

Lisätiedot

Kuva xhtml-sivulla. Mirja Jaakkola

Kuva xhtml-sivulla. Mirja Jaakkola Kuva xhtml-sivulla Mirja Jaakkola Sisältö 3. Kuva www-sivulla 4. img-elementti 5. Kuvan koko 6. Kuvan keskitys vaakasuoraan & kuvateksti 7. Kuvan tasaus pystysuoraan 8. Esimerkki: pystysuora tasaus eri

Lisätiedot

HTML perusteita (ei julkiseen jakeluun)

HTML perusteita (ei julkiseen jakeluun) HTML perusteita (ei julkiseen jakeluun) Tämä opas pyrkii selvittämään joitain verkkoviestintään liittyviä käsitteitä ja antamaan perustiedot HTML- kielestä sekä musiikin WWW- julkaisusta. Internetissä

Lisätiedot

CSS - tyylit. 13.11.2000 Seppo Räsänen

CSS - tyylit. 13.11.2000 Seppo Räsänen CSS - tyylit 13.11.2000 Seppo Räsänen Sivu 2 1 CSS-tyylit Dynaaminen HTML tai DHTML on standardi, joiden käyttöä tukevat uusimmat Netscapen ja Microsoftin selaimet. DHTML:n ominaisuuksia ovat tyylitiedostot

Lisätiedot

LibreOffice Writer perusteita

LibreOffice Writer perusteita LibreOffice Writer perusteita Käytetään Digabi-käyttöjärjestelmää (DigabiOS) ja harjoitellaan LibreOfficen käyttöä. 1. Ohjelman käynnistys Avaa Sovellusvalikko => Toimisto => LibreOffice Writer. Ohjelma

Lisätiedot

VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE

VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE 1. SISÄÄN KIRJAUTUMINEN Sisään kirjautuminen VerkkoVelho-ylläpitotyökaluun tapahtuu yrityksesi osoitteessa www.omaosoitteesi.fi/yllapito, esim. www.verkkovelho.fi/yllapito.

Lisätiedot

Turun yliopiston Nelli ohje käyttöönottoon

Turun yliopiston Nelli ohje käyttöönottoon Turun yliopiston Nelli ohje käyttöönottoon Perusajatus Perusajatus on sulkea metalib sivu sarakkeeseen, jonka vierelle toiseen sarakkeeseen sijoitetaan hakemistovalikko. Metalib sivujen muokkaus Metalib

Lisätiedot

Adobe Photoshop. 12.2.2015 ATK Seniorit Mukanetti/ Kuvakerho. Elements tutuksi

Adobe Photoshop. 12.2.2015 ATK Seniorit Mukanetti/ Kuvakerho. Elements tutuksi Adobe Photoshop Elements tutuksi 1 Adobe Photoshop Elements tutuksi 1.Puhekuplan lisääminen 2.Kuvan koon muutos (Esimerkkinä Elements V6) 12.2.2015 ATK Seniorit Mukanetti/ Kuvakerho 2 Photoshop Elements

Lisätiedot

Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta: http://notepad-plus-plus.org/

Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta: http://notepad-plus-plus.org/ 1 HTML-perusteita HTML on lyhenne sanoista Hyper Text Markup Language. Aluksi oli kyse tekstidokumenteista, jotka oli linkitetty toisiinsa nk. hyperlinkkien avulla. Nykyään HTML-dokumentit sisältävät paljon

Lisätiedot

Kyläsivujen InfoWeb-ohje

Kyläsivujen InfoWeb-ohje Kyläsivujen InfoWeb-ohje Kirjoita internet-selaimesi osoitekenttään kyläsivujen hallintaosoite; www.yla -savo.fi/admin Saavut seuraavalle sivulle, johon kirjoitat käyttäjätunnuksesi ja salasanasi: Paina

Lisätiedot

XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa:

XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa: XHTML - harjoitus Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa Tiedoston tallennus notepad (muistio) ohjelmassa: Jokaisen XHTML-dokumentin tulisi alkaa XML-määrittelyllä(engl.XML-prologue),

Lisätiedot

Written by Administrator Wednesday, 05 October 2011 08:06 - Last Updated Monday, 17 October 2011 15:28

Written by Administrator Wednesday, 05 October 2011 08:06 - Last Updated Monday, 17 October 2011 15:28 Sivupohja Joomlalle Sivupohjan tekeminen Joomlalle itse alusta saakka kuulostaa vaikealle. Työ on kuitenkin varsin helppo, jos vaan tietää tekemisen kaavan ja ymmärtää idean sivupohjasta. Joomlalle sivupohjan

Lisätiedot

HTML-ohjeet. Sivun perusrakenne