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 13.9.2006"

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> a-tägi on sen sijaan muistettava laittaa kiinni anchor hypertext reference Linkkinä voi toimia yksi tai useampi sana tai vaikkapa kuva. 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> <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 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

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

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

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

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit Internetsivujen perusrakenne Html-dokumentin keskeiset elementit ja attribuutit Websivu html-dokumentti Internetsivun rakenne kuvataan html-kielellä Html-dokumentti on tekstimuotoinen tiedosto, jossa luetellaan

Lisätiedot

Tee html-sivu, jossa on yllä olevat kaksi taulukkoa.

Tee html-sivu, jossa on yllä olevat kaksi taulukkoa. TAULUKKO 1 Taulukoiden avulla voidaan informaatio esittää havainnollisesti esimerkiksi palstoitettuna. Lisäksi voidaan sijoittaa eri elementit haluttuihin paikkoihin (taulukkotaitto). Taulukko luodaan

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

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

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara Taulukot Taulukoita käytetään XHTML:ssä taulukkomuotoisen tiedon esittämiseen esim. tilastot, hinnastot jne sivun ulkoasun muotoiluun eli taittoon - voidaan korvata CSS:n asemointia käyttäen ICT01D 28.11.2005

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

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. CSS1 CSS (Cascading Style Sheets) CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. Esim.

Lisätiedot

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Valitsimista valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Muistin virkistykseksi elementtejä http://appro.mit.jyu.fi/doc/www/xhtml/ HTML-elementtien lisäksi valitsimille voidaan luoda

Lisätiedot

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Kuvat. 1. Selaimien tunnistamat kuvatyypit Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai

Lisätiedot

Sisältö. XML, XHTML ja CSS XML XML. XML:n ja HTML:n ero. XML kieliä XML XHTML CSS XSL. T Hypermediadokumentin laatiminen 2002

Sisältö. XML, XHTML ja CSS XML XML. XML:n ja HTML:n ero. XML kieliä XML XHTML CSS XSL. T Hypermediadokumentin laatiminen 2002 , XHTML ja CSS T-111.361 Hypermediadokumentin laatiminen 2002 XHTML CSS XSL Sisältö EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard Generalized Markup Language Kevyempi

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

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

Johdatusta selainohjelmointiin

Johdatusta selainohjelmointiin Johdatusta selainohjelmointiin Ohjelmat ja tyylit selaimessa ja HTML Jaana Holvikivi Selaimet ja HTML Selaimet: Internet Explorer, Exchange Firefox, Chrome Opera 10 Safari 4 Lukevat HTML sivuja ja asettelevat

Lisätiedot

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti 1 XHTML - aloitus Sisältö: s.2 Taustaa s.4 Elementin rakenne s.7 XHTML dokumentti s.8 DOCTYPE s.11 html s.13 head s.14 meta s.16 title s.17 link s.18 style s.19 body s.22 Lohko- ja inline-elementit s.23

Lisätiedot

Ulkopuolisen tyylitiedoston käyttö

Ulkopuolisen tyylitiedoston käyttö 1 CSS - aloitus Sisältö: s. 2. Ulkopuolisen tyylitiedoston käyttö s. 3. Tyyliohjeen kirjoittaminen s. 4. style-elementti s. 5. style-attribuutti s. 6. class-attribuutti s. 7. id-attribuutti s. 8. Fontit

Lisätiedot

2. PEHMEÄ XHTML XRAJAHTML

2. PEHMEÄ XHTML XRAJAHTML Luennot 1. Intro 2. PEHMEÄ XHTML XRAJAHTML Dokumentin (matalan tason) rakenne DOCTYPE ja merkistökoodaukset Elementtien syvät rajat 3. CSS 4. JavaScript 5. JavaScript-kirjastot & AJAX 6. Käytettävyys &

Lisätiedot

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets CSS - Cascading Style Sheets tyylikuvauskieli suunniteltu HTML:ää varten 1996, oma syntaksi CSS1 (1996), CSS2 (1998), CSS Mobile Profile CSS3 (tuleva) selaintuki nykyään hyvä, mutta

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1 Digitaalisen median tekniikat css tyylimääritykset 30.4.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset

Digitaalisen median tekniikat css tyylimääritykset Digitaalisen median tekniikat css tyylimääritykset 26.3.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää

Lisätiedot

HTML-ohjeet. Sivun perusrakenne