HTML-ohjeet. Sivun perusrakenne <HTML> <HEAD> <STYLE TYPE="text/css"> ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset...

Koko: px

Aloita esitys sivulta:

Download "HTML-ohjeet. Sivun perusrakenne <HTML> <HEAD> <STYLE TYPE="text/css"> ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset..."

Maija-Liisa Juusonen
8 vuotta sitten
Katselukertoja:

1 HTML-ohjeet Sivun perusrakenne <HTML> <HEAD> <STYLE TYPE="text/css">...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset... </STYLE> <SCRIPT TYPE="text/javascript">...tänne tulee javascript-koodi... </SCRIPT> </HEAD> <BODY>...tänne tulee sivun sisältö... </BODY> </HTML>

.. </STYLE> <SCRIPT TYPE="text/javascript">.

2 HTML-elementit eli Tagit Otsikot H1,H2,H3,H4,H5,H6 <H1> Pääotsikko tähän väliin </H1> Tekstikappale <P> Tähän väliin teksti </P> Kuvat <IMG SRC="tähän kuvatiedoston osoite tai nimi"> Vaakaviiva <HR> Rivivaihto <BR> Tekstin korostukset <B> Lihavoitu teksti </B> <I> Kursivoitu teksti </I> <U> Alleviivattu teksti </U> <STRIKE> Yliviivattu teksti </STRIKE> Ylä- ja alaindeksit <SUP> Ylös esim. neliösenttimetrin nro.2 cm 2 </SUP> <SUB> Alas esim. kemiallisen kaavan nro.2 CO 2 </SUB>

<B> Lihavoitu teksti </B> <I> Kursivoitu teksti </I> <U> Alleviivattu teksti </U> <STRIKE> Yliviivattu teksti </STRIKE>

3 Erikoismerkit < < > > & & " " Unicode-merkit &#xkoodi; esim. Listat Numeroimaton lista <UL> <LI> listan eka <LI> listan toka jne. </UL> Numeroitu lista <OL> <LI> listan eka <LI> listan toka </OL>

4 Taulukot TABLE määrää taulukon, TR rivin ja TD solun <TABLE> </TABLE> <TR> </TR> <TR> </TR> <TD> eka rivi eka sarake </TD> <TD> eka rivi toka sarake </TD> <TD> toka rivi eka sarake</td> <TD> toka rivi toka sarake</td> Solujen yhdistäminen <TD COLSPAN="3"> tämä solu on yhdistetty viereisten 2 solun kanssa </TD> <TD ROWSPAN="4"> tämä solu on yhdisteety alla olevien 3 solun kanssa </TD> Sivun sisäinen kehys <iframe name="apusivu" src=" Lomakkeet Tekstilaatikko <INPUT type="text" name="laatikonnimi" maxlenght="maksimipituus" size="laatikon pituus" value="oletusarvo" > Tekstialue <TEXTAREA name="kentän nimi" rows="kuinka monta riviä" cols="kuinka monta saraketta"> oletusteksti </TEXTAREA>

alla olevien 3 solun kanssa </TD> Sivun sisäinen kehys <iframe name="apusivu" src="http://www.w3schools.

5 Radionappi <INPUT type="radio" name="nappiennimi"> Valintalaatikko <INPUT type="checkbox" name="laatikon nimi"> esivalittu valintalaatikko <INPUT type="checkbox" name="laatikon nimi" CHECKED> Valikot <SELECT name="valikonnimi"> <OPTION value="eka"> Ensimmäinen vaihtoehto <OPTION value="toka"> Toinen vaihtoehto </SELECT> Nappi <BUTTON> Napin teksti </BUTTON> Ryhmittely <DIV> </DIV> <SPAN> </SPAN> Piirtoalusta <CANVAS width="leveys" height="korkeus" id="nimi"></canvas> Määreet CLASS css-tyylin nimi ID tunniste javascriptiä varten NAME nimi esim. <P CLASS="punasini" ID="punasiniteksti">..tekstii.. </P>

Toinen vaihtoehto </SELECT> Nappi <BUTTON> Napin teksti </BUTTON> Ryhmittely <DIV> </DIV> <SPAN> </SPAN> Piirtoalusta <CANVAS width="leveys"

6 Tapahtumat (hiiri) onclick hiiren klikkaus ondblclick hiiren tuplaklikkaus onmousedown hiiren nappia painetaan alas onmouseup hiiren nappi vapautetaan onmousemove hiirtä liikutetaan elementin päällä onmouseout hiiri poistuu elementin päältä onmouseover hiiri tulee elementin päälle Tapahtumat (näppäimistö) onkeydown näppäimistön painetaan onkeyup näppäimistö vapautetaan onkeypress näppäimistöllä kirjoitetaan (down ja up) Tapahtumat (muut) onload sivun latauduttua onchange syöttettä muutetaan (input) Esim. nappia klikataan hiirellä niin suoritetaan napinpainallus() niminen javascripti <BUTTON onclick="napinpainallus();"> Paina!! </BUTTON>

onkeydown näppäimistön painetaan onkeyup näppäimistö vapautetaan onkeypress näppäimistöllä kirjoitetaan (down ja up) Tapahtumat (muut) onload sivun latauduttua

7 CSS-tyylit Yleinen muoto Tagi {ominaisuus: arvo; ominaisuus: arvo; ominaisuus: arvo;} Esim. Kaikki tekstikappaleiden fontiksi punainen, Times New roman, 30pt P {font-family: Times New Roman; color: Red; font-size: 30pt;} CSS tyylejä voidaan myös tarkentaa esim. alleviivatut tekstinosat ovat sinisellä P U {color: Blue;} CSS-tyylejä voidaan määrittää yksittäiseen tekstin osaan esim. kirjaimeen <P> Tässä on tekstiä ja tahtoisin erikoisen huutomerkin <span class="huuto">! </span> </P> Huutomerkki on ryhmitelty span-tagillä ja käytetään tyylinä käyttäjän määrittelemää huuto-nimistä tyylimäärittelyä. CSS-koodissa se tehdään liittämällä nimen eteen piste, esim. huutomerkki on vihreä ja kokoa 40pt..huuto {color: green; font-size: 40pt;} CSS-ominaisuudet Fonttien ominaisuudet Värit ja tausta color: red; värin nimi englanniksi, heksakoodi #FF00FF, RGB-koodi rgb(255,30,50), RGBA-koodi rgba(255,30,30,0.5) background-color: yellow; background-image: url(kuvatiedoston osoite tai polku); background-image: url(kissa.jpg); Fontti font-family: Verdana; font-size: 12pt; font-style: normal; font-weight: normal; Times New Roman, Arial, Courier New, Lucida Console fontin koko pt, px, em italic, oblique (kursivointi) bold, bolder (lihavointi)

alleviivatut tekstinosat ovat sinisellä P U {color: Blue;} CSS-tyylejä voidaan määrittää yksittäiseen tekstin osaan esim.

8 Tekstin tyyli text-decoration: none; text-transform: none; text-align: left; vertical-align: baseline; underline, overline, line-through (alle-, ylle- ja yliviivaus) capitalize, uppercase, lowercase capitalize=jokaisen Sanan Etukirjain Isolla uppercase=jokainen SANA ISOLLA lowercase=jokainen sana pienellä right, center, justify (tekstin asettelu) top, bottom, middle, sub, super Listan ominaisuudet list-style-type: none; disc, circle, square, decimal, lowe-roman, upper-roman, lower-latin, upper-latin list-style-image: url(kuvakkeen polku); Elementin koko width: 200px; height: 300px; elementtilaatikon leveys elementtilaatikon korkeus Kursori (hiiren nuoli) cursor: auto; crosshair, help, move, text, pointer, progress, wait, url(kuvapolku) esim. url(munkursori.cur) Reunat border-style: none; border-color: red; border-width: 2px 3px 4px 5px; border-spacing: 3px; border-collapse: separate; solid, double, dotted, dashed reunan väri reunan paksuus ylä, oikea, ala, vasen tyhjä tila reunuksen ympärillä collapse (soluilla omat reunat vai ei, TÄRKEÄ!)

ominaisuudet list-style-type: none; disc, circle, square, decimal, lowe-roman, upper-roman, lower-latin, upper-latin list-style-image: url(kuvakkeen polku); Elementin koko width: 200px; height:

9 Elementin asettelu position: static; top: 20px; left: 20px; relative, absolute static=normaali asettelu (selain päättää) relative=asetuksen muutos suhteessa miten asettelu tapahtuisi normaalisti absolute=ei mene normaalin asettelun mukaan vaan asettelu tapahtuu suhteessa siihen elementiin, joka on isä-elementtinä (varsin usein BODY-elementti) Alaspäin 20px (aina yhdessä position-asetuksen kanssa) Ylöspäin miinusluvuilla oikealle 20px, vasemmalle miinusluvuilla z-index: 3; visibility: visible; Päällekkäisten elementtin järjestys, suuremella luvulla on päällimäisenä hidden (onko elementti näkyvissä vai piilotettu)

isä-elementtinä (varsin usein BODY-elementti) Alaspäin 20px (aina yhdessä position-asetuksen kanssa) Ylöspäin miinusluvuilla oikealle 20px, vasemmalle

Samankaltaiset tiedostot

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.