Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta:

HTML
DOWNLOAD

Koko: px

Aloita esitys sivulta:

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

Jaana Myllymäki
9 vuotta sitten
Katselukertoja:

1 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 muutakin kuin pelkästään tekstiä ja linkkejä. Nykyaikaiset www-sivut voivat olla toiminnoiltaan varsin monipuolisia. Voimme esimerkiksi hoitaa pankkiasioitamme www-sivujen kautta. Voimme myös ostaa tuotteita ja palveluita webin kautta. Tällä kurssilla keskitymme kuitenkin vain HTML:n perusteisiin ja staattisiin sivuihin. HTML-tiedosto on tekstitiedosto, jonka tiedostotarkenne on html (tai htm). HTML-tiedosto sisältää merkkaustageja kuten esimerkiksi <p> tai <bold>. HTML-koodia eli tageja tarvitaan, jotta wwwselain voisi tulkita dokumentin sisällön. Selaimella tarkoitetaan ohjelmaa, jonka avulla www-sivuja tarkastellaan. Tunnettuja selaimia ovat esim. Internet Explorer, Opera, Firefox, Chrome ja Safari. Jotta kaikki selaimet osaisivat näyttää sivut samalla tavalla, on luotu standardi. Ohessa muutamia muistettavia asioita HTML-koodin kirjoittamisesta: HTML_tagit ympäröidään < ja > merkein o tageja käytetään yleensä pareittain <h1> ja </h1> - näitten väliin tulee elementtien sisältö aloittava tagi <h1> ja päättävä tagi </h1> Kirjoita tagien sisältö aina pienellä xhtml-kieltä silmällä pitäen. Kirjoita koodi sisentäen, jolloin sitä on helpompi lukea. Koodia kannattaa kommentoida, jolloin on helpompi myöhemmin muistaa mistä olikaan kyse. o <! Kommentti merkitään näin.--> HTML-tiedosto voidaan luoda yksinkertaisella tekstieditorilla kuten Windowsin muistio, mutta käytetään tällä kurssilla Notepad++ editoria. Sen etuja ovat mm.: syntaksi korostetaan väreillä mukana on rivinumerointi, joka helpottaa vaikkapa virheiden etsimistä työstettäviä html-tiedostoja on mahdollista pitää useampia auki kerrallaan (vrt. muistiossa vain 1 tiedosto kerrallaan). Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta: Käytämme tunneilla W3C-sivustoa W3C eli World Wide Web Consortium on kansainvälinen yritysten ja yhteisöjen yhteenliittymä, joka ylläpitää ja kehittää WWW:n standardeja tai suosituksia kuten W3C niitä kutsuu. W3C-sivustolta löytyy käytännössä kaikki tarvittava tieto. Tarvittaessa voit käyttää apuna myös Koudatan verkkosivuilta löytyvää, Jukka Harjun noin kolme vuotta vanhasta versiosta suomentamaa sivustoa.

Voimme esimerkiksi hoitaa pankkiasioitamme www-sivujen kautta. Voimme myös ostaa tuotteita ja palveluita webin kautta.

HTML-sivun rakenne 2 <HTML> Jokainen HTML-sivu alkaa tagilla <html> ja päättyy tagiin </html>. HTML on juurielementti eli kaikkien muiden elementtien on oltava täysin sen sisällä.

Tärkein elementti sen sisällä on <title>, joka määrittää sivulle otsikon. Head-tagi päätetään juuri ennen body-tagia. <BODY> Body-tagin sisään tulee sivun kaikki sisältö.

2 HTML-sivun rakenne 2 <HTML> Jokainen HTML-sivu alkaa tagilla <html> ja päättyy tagiin </html>. HTML on juurielementti eli kaikkien muiden elementtien on oltava täysin sen sisällä. Minimissään HTML-sivu sisältää tagit html, head ja body. <HEAD> Head-tagin sisään kirjoitetaan metatietoja, tyylitietoja ja skriptejä. Tärkein elementti sen sisällä on <title>, joka määrittää sivulle otsikon. Head-tagi päätetään juuri ennen body-tagia. <BODY> Body-tagin sisään tulee sivun kaikki sisältö. Body-tagi alkaa välittömästi kun head-tagi päättyy. Jokaisen sivun toiseksi viimeisen tagin tulisi olla </body>. Avaa Notepad++ editori ja kirjoita sinne seuraavat rivit ja tallenna tiedosto nimellä eka.html Avaa tallentamasi sivu haluamasi selaimeen (joka koneelle on asennettu) Suorita Launch in Sivun voi tietenkin avata myös suoraan selaimeen: avaa selain (esim. Internet Explorer) valitse Tiedosto Avaa, selaa esille tiedosto (tässä eka.html) ja hyväksy OK:lla. eka.html aukeaa. Jatkossa kannattaa pitää sekä Notepad++ että selain auki, jolloin koodiin tehdyt muutokset saa näkyviin päivittämällä sivua selaimessa. Mitä kirjoittamasi teksti tarkoittaa? <html> <body> <h1>eka otsikko</h1> <p>tässä on eka kappale tekstiä.</p> <p>tässä on tekstiä, joka kuuluu toiseen kappaleeseen.</p> </body> </html> ALOITTAA aina html-dokumentin varsinaisessa dokumentissa näkyvä sisältö tekstit, kuvat jne. Otsikkotasoja on <h1> <h6> <p> elementti tarkoittaa kappaletta (paragraph) tässä kappaleita on kaksi sisältö päättyy LOPETTAA aina html-dokumentin taso 1 suurin otsikko taso 6 pienin otsikko

Tehtävä 1. 3 Kokeile eri otsikkokokoja ja kirjoita html-dokumenttiisi seuraavat rivit: Tallenna ja tarkastele tulosta selaimessa muistithan päivittää sivun? Lisää eka.

3 Tehtävä 1. 3 Kokeile eri otsikkokokoja ja kirjoita html-dokumenttiisi seuraavat rivit: Tallenna ja tarkastele tulosta selaimessa muistithan päivittää sivun? Lisää eka.html-tiedostoon seuraavat rivit: Mitä <title>-elementti tekee? Missä sitä voi mm. hyödyntää? Tehtävä 2. Kirjoita alla oleva teksti html-koodilla, jotta se näyttäisi samalta kuin tässä alla. Käytettävissä ovat vain HTML-tagit <html>, <head>, <body>, <p> ja <h2> Tekstiä ei tarvitse kirjoittaa: voit kopioida raakatekstin tästä: Pilvien muodostuminen Pilvet muodostuvat, kun ilmakehässä vesihöyry tiivistyy kylmässä ympäristössä. Vesihöyryn tiivistyminen alkaa, kun ilma jäähtyy kastepistelämpötilaan, eli suhteellinen kosteus on 100 %. Pilvet koostuvat miljoonista pienistä pilvipisaroista ja jääpisaroista. Pilvipisarat ovat tuhannesosan kokoisia normaalista sadepisarasta, tämän vuoksi ne pystyvät leijailemaan ilmassa ja kulkeutumaan pitkiäkin matkoja. Pilvien valkoinen tai harmaa väri johtuu siitä, että ne sirottavat tehokkaasti kaikkia valon aallonpituuksia. Pilvisyys vaikuttaa maanpinnan lämpötiloihin ja säteilytasapainoon. Lähde:

Käytettävissä ovat vain HTML-tagit <html>, <head>, <body>, <p> ja <h2> Tekstiä ei tarvitse kirjoittaa: voit kopioida raakatekstin tästä: Pilvien muodostuminen Pilvet muodostuvat, kun ilmakehässä

4 Taulukossa on muutamia tageja lisää tekstin muotoiluun: kirjoita dokumenttiisi seuraavat muotoilukomennot ja tagien väliin jotain tekstiä ja tarkista, miltä muotoilut näyttävät selaimessa. 4 Lihavointi <b> </b> bold Kursivointi <i> </i> italic Alleviivaus <u> </u> underline Ala indeksi <sub> </sub> subscript Ylä indeksi <sup> </sup> superscript Yliviivaus <del> </del> delete Tehtävä 3. Entä mitä tekevät seuraavat tagit? mene W3C-sivuille ja etsi vastaukset HTML References ja sieltä Tag Lists. Kun napsautat elementtiä, avautuu toinen sivu, jossa selitetään elementin merkitys. Napsauta vielä Try it Yourself >> jolloin näet käytännössä, miten elementti toimii. <hr> <pre> <code> <s> <var> <samp> <address> <abbr> <blockquote> <q> Elementtejä voi käyttää myös sisäkkäin, mutta niiden päättämisjärjestys on silloin tarkoin määrätty eli ensin alkanut tagi päättyy viimeisenä. <p>tässä kappaleessa on <b>lihavoidulla tekstillä</b>korostettu kohta.</p> <br> (line break = rivin vaihto) on tyhjä elementti, jolla ei ole lopetustagia. Tyhjä elementti voidaan sulkea: <br />. Aloitustunnisteeseen saattaa lisäksi sisältyä attribuutteja, jotka määrittävät elementin ominaisuuksia tarkemmin kuin tunnisteen nimeämä elementin tyyppi: <tunniste attribuutti="arvo lainausmerkeissä">elementin sisältö</tunniste>

Entä mitä tekevät seuraavat tagit? mene W3C-sivuille ja etsi vastaukset HTML References ja sieltä Tag Lists. Kun napsautat elementtiä, avautuu toinen sivu, jossa selitetään elementin merkitys.

5 Värit 5 Kuvankäsittelyohjelmissa värit määritellään RGB-arvoina. RGB-värijärjestelmä muodostetaan kolmesta pääväristä eli punainen (Red), vihreä (Green) ja sininen (Blue). Selain kuitenkin käyttää heksadesimaalilukuja, joten RGB-värit on muutettava sellaisiksi. Väriarvo alkaa #-merkillä ja sitä seuraa kuuden merkin mittainen värikoodi. Kaksi ensimmäistä merkkiä määrittää punaisen määrän, kaksi seuraavaa vihreän ja viimeiset kaksi sinisen määrän. Voidaan myös käyttää nimettyjä värejä, kuten black ja white. Alla olevaan taulukkoon on kerätty muutamia värejä ja niiden arvot RGB ja heksadesimaalina. Väri RGB-väri Heksadesimaali Esimerkki valkoinen R=255 G=255 B=255 #FFFFFF <body bgcolor="#ffffff"> Sivun taustaväriksi valkoinen punainen R=255 G=0 B=0 #FF0000 <font color="#ff0000"></font> Fontin väriksi punainen sininen R=000 G=000 B=255 #0000FF <font color="#0000ff"></font> Fontin väriksi sininen musta R=000 G=000 B=000 # <font color="#000000"></font> Fontin väriksi musta W3C: sivuilta löytyy kattava värikartta ja eri värien heksadesimaaliarvot Tehtävä 4. Muokkaa HTML_dokumenttisi <body>-tagia kirjoittamalla siihen oheiset attribuutit. Tallenna ja päivitä selain. Mitä tapahtui? Mitä muita attribuutteja löydät W3C-sivustolta <body>-elementille? Entä mitä tapahtuu, kun lisäät tiedostoon seuraavan rivin? Tehtävä 5. Avaa Joonatan.txt ja muokkaa siitä html-muotoinen tiedosto. Laita elementit <html>, <head> ja <body> oikeille paikoilleen. Käytä otsikoita ja jaa teksti kappaleisiin. Muokkaa myös sivun ulkoasu värien ym. suhteen mieleiseksesi. Tallenna sivu ja pidä se tallessa, jatketaan sen työstämistä seuraavilla tunneilla.

Kaksi ensimmäistä merkkiä määrittää punaisen määrän, kaksi seuraavaa vihreän ja viimeiset kaksi sinisen määrän. Voidaan myös käyttää nimettyjä värejä, kuten black ja white.

Samankaltaiset tiedostot

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