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

Koko: px
Aloita esitys sivulta:

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

Transkriptio

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

2 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin merkintöihin eli tägeihin normaalin tekstin seassa Voidaan luoda millä tahansa tekstieditorilla lopputulos tavallinen tekstitiedosto, pääte.html (myös.htm) myös kehittyneempiä kehitystyökaluja (ei kuitenkaan Microsoft Word) Toisin kuin Java, HTML hyväksyy (tai oikeastaan www-selaimet hyväksyvät) jos jonkinlaisia virheitä lähdekoodissa hyvää: kynnys kotisivun tekemiseen hyvin matala, sivun saa lähes aina näkyviin edes jossain muodossa huonoa: selainohjelmat raskaita, koska joutuvat sietämään paljon tulkinnanvaraa

3 HTML-dokumentin perusrakenne <html> <head> <title>vesisika Veijon kotisivu</title> </head> <body> <!-- sivun varsinainen sisältö alkaa tästä --> html head title Vesisika Veijon kotisivu <h1>vesisika Veijon kotisivu</h1> body <img src= veijo.jpg ><br> h1 Vesisika Veijon kotisivu Moi oon Veijo, nää on mun sivut. <!-- sivun varsinainen sisältö loppuu tähän --> img br Moi oon Veijo, nää on mun sivut. </body> </html>

4 Muutama keskeinen tägi <html> <head> <title> <body> <h1>, <h2>, <h3>, jne. <p> <br> <ul>, <ol> <li> <b> <i> <u> <!-- hähä --> aloittaa ja lopettaa jokaisen HTML-dokumentin otsikkotietoja, jotka eivät suoraan näy sivulla sivun otsikko, joka näkyy selaimen otsikkopalkissa sivun runko eli varsinainen sisältö otsikko (header), eri tasoisia tekstikappale (paragraph) rivinvaihto (break) numeroimaton (unordered) tai numeroitu (ordered) lista listan yksittäinen elementti (list item) vahvennettu teksti (bold) kursivoitu teksti (italic) alleviivattu teksti (underline) kommentti

5 Kuvat ja linkit img-tägi esiintyy aina yksin, sitä ei tarvitse sulkea <img src= veijo.jpg width= 300 height= 250 alt= Veijon kuva > image source Kokoa ei ole pakko määritellä, mutta se voi nopeuttaa sivun näyttämistä. Kuvalle voidaan määrittää myös alkuperäisestä poikkeava koko (yleensä huono idea). Alternative text, voidaan näyttää kuvan asemesta. <a href= veijo.html >Veijon oma sivu</a> anchor hypertext reference Linkkinä voi toimia yksi tai useampi sana tai vaikkapa kuva. a-tägi, kuten useimmat muutkin tägit, on sen sijaan muistettava lopuksi laittaa kiinni Linkki voi olla suhteellinen (viitata tiedostoon saman hakemistorakenteen sisällä) tai absoluuttinen (viitata kohteeseen täydellisellä osoitteella).

6 Heksadesimaaliluvut Käytössä 16 numeroa (kun kymmenjärjestelmässä vain 10), suuruusjärjestyksessä: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f Kahdella numerolla voidaan ilmaista 16 2 = 256 eri lukua 00 0 x x 1 0 0a 88 0 x x 1 8 x x Sangen kiehtovaa, mutta miten nää liittyy mihinkään? c3 12 x x ff 15 x x heksadesimaali kymmenjärjestelmä

7 Värit #2277aa punaisen valon määrä vihreän valon määrä sinisen valon määrä #ff0000 #00ff00 #0000ff #ffccaa #aaffcc #ccaaff # #ffffff # Yleensä ominaisuuden color, bgcolor tai background arvona.

8 Taulukot: helppo tapa sivun visuaalisen rakenteen luontiin <table width= 500 height= 400 border= 1 > <tr> <td width= 200 rowspan= 2 > eka </td> <td width= 150 align= center > toka </td> <td valign= middle > kolmas </td> </tr> <tr> <!-- miksi tämän rivin ekaa solua ei merkitä? --> <td colspan= 2 valign= bottom > neljäs </td> </tr> </table> eka toka neljäs tr = table row (rivi) td = table data (solu) kolmas

9 CSS (Cascading Style Sheets) Kaikki HTML-elementtien ulkoasumäärittelyt yhdessä paikassa. Helppo tehdä muutoksia ulkoasuun, samoin luoda uusia sivuja, joilla on sama visuaalinen tyyli. TYYLI- TIEDOSTO tyyli.css <html> <head> <title>vesisika Veijon kotisivu</title> viittauksia <link rel= stylesheet type= text/css href= tyyli.css > </head> <body>... </body> </html> TOINEN HTML-SIVU KOLMAS HTML-SIVU

10 CSS-tyylimäärittelyt Periaatteessa Käytännössä elementti { ominaisuus: arvo; toinen-ominaisuus: arvo; td { background: #ccffaa; padding: 12px; elementti.aliluokka { kolmas-ominaisuus: arvo; td.kehystetty { border: 1px dotted #ffbbaa; <td class= kehystetty > elementti alielementti { ominaisuus: arvo; td a { font: 14pt trebuchet ms; <td><a href=... ></a></td>

11 Diveistä ja CSS:stä Määritetään ominaisuuksia divelementille, jonka luokka on essee: div.essee { <div class= essee >... </div> font: 10pt/16pt georgia; color: #000; background: #fdc; border: 1px dotted #fb7; padding: 9px; margin-top: 50px; margin-left: 30px; width: 70%; Elementin tyyli voidaan määritellä: erillisessä CSS-tyylitiedostossa, joka linkitetään HTML-tiedostoon HTML-tiedoston <head>-osion sisällä erityisessä <style>-osiossa: <head> <style> div.essee { font: 14pt georgia; color: #005; </style> </head> yksittäisen elementin yhteydessä styleattribuutin sisällä: <div style= font: 14pt georgia; color: #005 > Kaikki CSS-määrittelyt osoitteessa:

12 Validi HTML eli miten kirjoitan kaikkien taiteen sääntöjen mukaista lähdekoodia 1. Määrittele dokumentin alussa sen tyyppi, ns. doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> 2. Määrittele head-osiossa, mitä merkistöä sivusi käyttää: 3. Muista sulkea tägit, vieläpä oikeassa järjestyksessä. 4. Muista pakolliset lisämääreet, kuten kuvien alt-attribuutti. 5. Vältä tägejä ja tägien lisämääreitä, jotka eivät ole standardinmukaisia. <meta http-equiv="content-type" content="text/html; charset=iso " /> doctype Strict on tarkka näistä, doctype Transitional sallii jo enemmän Voit tarkistuttaa sivusi validaattorilla, esimerkiksi

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

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

Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/ 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ö,

Lisätiedot

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

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

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

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

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

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

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

HTML-ohjeet. Sivun perusrakenne