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

Transkriptio

1 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. Ongelmallisia olivat varsinkin skandinaaviset merkit (å, ä ja ö). Lisäksi esim. < ja > merkit on varattu. Selaimet tulkitsevat niiden mukaan elementtejä. Siksi myös ne on korvattava entiteeteillä. Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla Etsi esim. W3C-sivustolta, miten seuraavat merkit korvataan entiteeteillä ä ö å Ä Ö Å < > & Merkki Entiteetti LISTAT JA LUETTELOT Listaukset jäsentävät www-sivun tekstiä helpommin silmäiltävään muotoon. Listauksia on kolmen tyyppisiä: järjestämätön lista (unordered list) järjestetty lista (ordered list) määrittelylista (definition list) Järjestämätön lista tehdään <UL> ja <LI> tageilla <ul> </ul> <li>kahvi</li> <li>tee</li> <li>kaakao</li>

2 2 Listattavien asioiden edessä on merkki, joka voi olla pallo, ympyrä, neliö tai merkkiä ei ole ollenkaan. Määritys tehdään style attribuutilla. Jos tyyppiä ei valita, niin oletuksena käytetään palloa. <ul style="list-style-type:disc"> <ul style="list-style-type:circle"> <ul style="list-style-type:square"> <ul style="list-style-type:none"> Järjestetty lista tehdään <OL> ja <LI> tageilla <ol> <li>mittaa vesi</li> <li>lisää kahvijauhe suodattimeen</li> <li>napsauta keitin päälle</li> </ol> Määrittelylista tehdään <DL>-tagilla, määritettävä asia tehdään <DT>-tagilla ja määritelmä <DD>-tagilla. <dl> <dt>määritettävä asia</dt> <dd>asian määritelmä</dd> <dt>toinen määritettävä asia</dt> </dl> <dd>toisen asian määritelmä</dd> Tehtävä 2. a) Kirjoita yllä olevat esimerkit html-dokumenttiin ja kokeile listoja käytännössä. b) Tee HTML-sivu, jossa seuraavat webselaimet on listattu jonkin listaelementin avulla: Chrome, Firefox, IE, Safari ja Opera. *lisätehtävä) W3C-sivustolla on lisätietoja listoista. Tutustu sivustoon ja testaa omassa sivussasi sisäkkäistä listaa.

3 3 KUVA HTML-SIVULLA HTML-sivuille voi lisätä kuvia. Suositeltavia tallennusmuotoja ovat:.gif,.jpg tai.png Kuva lisätään sivulle <img> -tagilla (image), jolla itsessään ei ole sisältöä, vaan sisältö määritellään attribuuttien avulla. Sillä ei myöskään ole lopputagia. <img>-tagin lisäksi tarvitaan attribuutti src (source), jossa määritellään kuvan nimi ja sijainti. <img src="esimerkkikuva.png" alt="esimerkkikuva" width="leveys" height="korkeus"> Toinen suositeltava attribuutti on alt (alternate), joka kertoo lukijalle vaihtoehtoisen tekstin, jos kuvaa ei jostain syystä pystytä näyttämään. height ja width -attribuutit kertovat kuvan korkeuden ja leveyden pikseleinä. Tämä tieto on tärkeää graafisille selaimille, jotta ne osaavat varata kuville oikean kokoisen tilan ennen kuin kuva on haettu palvelimelta. Kuvat tulee kuitenkin tehdä aina oikeaan kokoonsa kuvankäsittelyohjelmassa. Jos kuva sijaitsee samassa hakemistossa, kuin html-dokumentti, niin kuvan osoitteeksi riittää kuvan nimi ja tiedostopääte. Esim. <img src= auto.jpg alt= BMW width= 150 height= 100 border= 1 > Jos sivustolle on tulossa paljon kuvia, on hyvä luoda kuville oma hakemisto. Silloin kuvan osoitteeseen on muistettava lisätä hakemiston nimi, jossa kuva sijaitsee. Alla olevassa esimerkissä kuva sijaitsee kuvat-alihakemistossa. Esim. <img src= kuvat/auto.jpg alt= BMW width= 150 height= 100 border= 1 > Kuvan sijainti tekstin suhteen voidaan määrittää align-attribuutilla. Attribuutit top (ylhäällä), middle (keskellä) ja bottom (alhaalla) määrittävät, miten tekstin ensimmäinen rivi sijoitetaan suhteessa kuvaan. Jos sijaintia ei määritellä, niin oletuksena käytetään bottomia. border-attribuutti määrittää kuvan ympärillä olevan reunuksen vahvuuden pikseleinä. TÄRKEÄÄ! Tekijänoikeuksista. Mikään, mitä et ole itse tehnyt ei ole sinun! Netissä on kuvapankkeja, joista voi luvallisesti tallentaa kuvia ja käyttää niitä omilla sivuillaan. Niitä löytyy helposti Googlen kautta esimerkiksi hakusanalla free photos. sivusto on yksi esimerkki sivustosta, jonka kuvia voi vapaasti käyttää.

4 4 Tehtävä 3. a) Tallenna itselle jokin kuva netistä tai piirrä itse esim. Paintohjelmalla ja tallenna se. Lisää tallentamasi kuva htmltiedostoon ja tallenna tiedosto nimellä kuvaharjoitus.html Käytä kuvassa border-attribuuttia. Mitä tapahtuu, kun määrittelet border arvoksi 0? entä 10? Kokeile height ja widthattribuuteille erilaisia arvoja. b) Lisää vielä kaksi kuvaa htmltiedostoon ja kirjoita sivulle myös hiukan tekstiä. Sijoita kuvat tekstien suhteen align-attribuutin avulla kuvien osoittamalla tavalla. ylhäällä align=? keskellä align =? alhaalla align =? c) Tee uusi hakemisto ja tallenna jokin kuva sinne. Lisää seuraavaksi kuva html-tiedostoon. Mitä pitikään muistaa, kun kuva ei sijaitse samassa hakemistossa kuin html-sivu? Tehtävä 4. Jatketaan Joonatan sivuston muokkaamista. Lisää dokumenttiin sopivia kuvia (muista tekijänoikeudet Tarkista sivun entiteetti asiat. Etsi-korvaa toiminto on aika kätevä. Tee lisäksi kokonaan uusi sivu. Avaa tiedosto Prinssi.txt ja muokkaa siitä html-muotoinen tiedosto. Käytä otsikoita ja jaa teksti kappaleisiin. Muokkaa myös sivun ulkoasu värien ym. suhteen mieleiseksesi. Lisää myös kuvia ja tarkista tässäkin sivussa entiteetti asiat. Laadi kirjailijan kirjoista haluamasi tyyppinen lista sivulle. Tallenna sivut ja pidä ne tallessa, jatketaan molempien sivujen työstämistä seuraavilla tunneilla. Lisätehtäviä: Taustakuvan lisääminen html-sivulle. Voit kokeilla lisätä kuvan taustakuvaksi sivulle. Se tapahtuu lisäämällä body-tagiin background-attribuutti. Tässäkin tapauksessa pätee se, että kuvan pitää olla samassa hakemistossa tai muutoin hakemistopolku on kirjoitettava. <body background="esimerkkikuva.png">

5 Jos halutaan tehdä kuva, jota klikkaamalla aukeaa suurempi kuva, niin laitetaan <img>-tagi <a>-tagin sisään. (a-tagista tulee lisää tietoa seuraavalla tunnilla. a-tagi on linkki). Tallenna hakemistoosi kaksi kuvaa nimillä suurikuva.png ja pienikuva.png. Lisää sen jälkeen html-tiedostoosi alla oleva rivi. <a href="suurikuva.png"><img src="pienikuva.png"></a> Tallenna ja tutki mitä sait aikaiseksi? 5