Helsingin normaalilyseo Jani Kiviharju Syksy 2016 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. <p align=”center”>Tekstiä, tekstiä, tekstiä.</p> 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 (<h1>,< h2>,< p>) 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. <font size=”3” face=”Verdana”>Tekstiä</font> Fontin kooksi asetetaan 3 (asteikolla 1-7) ja fontiksi Verdana Esim. <font size=”-1” color=”blue” face=”Times”>Tekstiä</font> Pienennetään fontin kokoa kerran, asetetaan fontin väriksi sininen ja fontiksi Times New Roman Esim. <font color=”#FF0000”>Tekstiä</font> Asetetaan fontin väriksi #FF0000 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 #FF0000, vihreä #00FF00, sininen #0000FF keltainen #FFFF00, violetti #FF00FF, turkoosi #00FFFF Yhteensä 256*256*256 eli 16 777 216 vaihtoehtoa Muutamia esimerkkejä: http://www.w3schools.com/html/html_colors.asp tai http://www.colourlovers.com/blog/2007/06/30/ultimate-html-color-hex-code-list/ Useimmat selaimet ymmärtävät myös värien nimeämisen sanallisesti (red, green, lightcyan, silver, ...) Värien nimiä: http://www.w3schools.com/html/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) #FF0000 b) #8000FF c) #FFFFFF d) #58FAF4 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 bgcolor-attribuutilla Samat värivaihtoehdot ja merkintä kuin font-komennolla <body bgcolor=”#CC6633”> <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 <p><font size="3" color="red">Tämä on tekstiä!</font></p> <h2><font color="blue">Muuttuiko teksti?</font></h2> <p><font face="verdana" color="green">Taisihan se muuttua.</font></p> Avaa verkkosivu kansiostasi Firefoxilla (Open With -> Choose Program -> Browse -> Mozilla Firefox -> Firefox) Kokeile verkkosivun taustavärin muuttamista <body bgcolor=”#CC6633”> <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%C3%A4rjestelm%C3%A4 RGB-värimalli - http://en.wikipedia.org/wiki/RGB_color_model