Attribuutit Helsingin normaalilyseo Jani Kiviharju Syksy 2016 HTML

Attribuutit Helsingin normaalilyseo Jani Kiviharju Syksy 2016

HTML ja attribuutit • Monia html-komentoja voidaan muokata tai täsmentää erilaisilla lisämääreillä eli attribuuteilla • Esim. Tekstiä, tekstiä. • Joihinkin tageihin attribuutti on välttämätön – <img src=”http: //www. nokia. com/kannykka. jpg”> • Esimerkki attribuutista – Align-attribuutti toimii mm. otsikko- ja kappaletagien (<h 1>, < h 2>, ) kanssa – align=”center” keskittää tekstin – align=”left” tasaa tekstin vasempaan laitaan – align=”right” tasaa tekstin oikeaan laitaan

HTML - Fonttikomennot • Font-komennolla voidaan säätää fontin kokoa, tyyliä ja väriä • Font-komennolla on kolme attribuuttia: size, face ja color • Esim. Tekstiä – Fontin kooksi asetetaan 3 (asteikolla 1 -7) ja fontiksi Verdana • Esim. Tekstiä – Pienennetään fontin kokoa kerran, asetetaan fontin väriksi sininen ja fontiksi Times New Roman • Esim. Tekstiä – Asetetaan fontin väriksi #FF 0000 eli punainen

Värit • • HTML-koodissa eri värit ilmaistaan yleensä punaisen, vihreän ja sinisen yhdistelminä heksadesimaalilukuna #-merkki ilmaisee, että kyseessä on heksadesimaaliluku ja sen jälkeen ilmoitetaan punaisen, vihreän ja sinisen värin määrä asteikolla 00 -FF (vastaa kymmenlukujärjestelmässä asteikkoa 0 -256) – valkoinen #FFFFFF, musta #000000 – punainen #FF 0000, vihreä #00 FF 00, sininen #0000 FF – keltainen #FFFF 00, violetti #FF 00 FF, turkoosi #00 FFFF Yhteensä 256*256 eli 16 777 216 vaihtoehtoa – Muutamia esimerkkejä: http: //www. w 3 schools. com/html_colors. asp tai http: //www. colourlovers. com/blog/2007/06/30/ultimate-html-color-hexcode-list/ Useimmat selaimet ymmärtävät myös värien nimeämisen sanallisesti (red, green, lightcyan, silver, . . . ) – Värien nimiä: http: //www. w 3 schools. com/html_colornames. asp

Tehtävä 1 - värit Etsi verkosta tai kuvankäsittelyohjelmasta vastaukset alla oleviin kysymyksiin. Kirjoita vastauksesi ylös tekstinkäsittelyohjelmaan. 1. ) Selvitä kullekin värille sitä vastaava heksadesimaaliluku a) sininen b) vihreä c) keltainen d) oranssi e) musta f) harmaa 2. ) Selvitä, mitä väriä kukin heksadesimaaliluku vastaa a) #FF 0000 b) #8000 FF c) #FFFFFF d) #58 FAF 4 3. ) Selvitä väriä vastaava heksadesimaaliluku a) b) c) Vinkki: Kopioi kuva (varitehtava. jpg) kurssikansiosta kuvankäsittelyohjelmaan ja käytä värinkaappaustyökalua (pipetti). Useimmat kuvankäsittelyohjelmat ilmoittavat värin värivalikossa heksadesimaalilukuna.

Taustaväri ja taustakuva • HTML-sivun taustaväriä muutetaan body-elementin bgcolorattribuutilla – Samat värivaihtoehdot ja merkintä kuin font-komennolla – <body bgcolor=”#CC 6633”> – <body bgcolor=”yellow”> • Taustakuva asetetaan body-elementin background-attribuutilla – <body background=”diamond. gif”> • Kuva samassa kansiossa kuin verkkosivu (ns. suhteellinen viittaus) – <body background=”http: //www. helsinki. fi/tietotekniikka/tausta. jpg”> • Kuva osoitteessa http: //www. helsinki. fi/tietotekniikka/tausta. jpg (ns. absoluuttinen viittaus) – <body background=”kuvat/pallot. gif”> • Kuva verkkosivun kansion kuvat-alakansiossa (suhteellinen viittaus)

Tehtävä 2 – tagien attribuutit Tutki, mitä alla olevat html-koodit tekevät • Tämä on tekstiä! • <h 2>Muuttuiko teksti? </h 2> • Taisihan se muuttua. Avaa verkkosivu kansiostasi Firefoxilla (Open With -> Choose Program -> Browse -> Mozilla Firefox -> Firefox) Kokeile verkkosivun taustavärin muuttamista <body bgcolor=”#CC 6633”> <body bgcolor=”yellow”> Lisätehtävä: Etsi verkkosivullesi sopiva taustakuva, tallenna se omaan kansioosi ja lisää kuva verkkosivusi taustakuvaksi <body background=”diamond. gif”>

Taustamateriaalia • • • Värikartta - http: //www. computerhope. com/htmcolor. htm Väriohjelma - http: //html-color-codes. info/ Taustavärisivu - http: //www. elkoo. net/html/taustavarit. php – Varoitus: tausta vilkkuu, mikä hiirtä liikutetaan värikartalla • • Heksadesimaalijärjestelmä http: //fi. wikipedia. org/wiki/Heksadesimaalij%C 3%A 4 rjestelm%C 3%A 4 RGB-värimalli - http: //en. wikipedia. org/wiki/RGB_color_model