550 likes | 665 Views
Internet ja XHTML. Heikki Hietala Jukka Mutikainen. Muutamia käsitteitä. WWW World Wide Web Web World Wide Web SGML Standard Generalized Markup Language—standardi joka kuvaa markup- eli merkintäkieliä DTD Document Type Definition – SGML-muotoinen kielen kuvaus HTML
E N D
Internet ja XHTML Heikki Hietala Jukka Mutikainen
Muutamia käsitteitä • WWW • World Wide Web • Web • World Wide Web • SGML • Standard Generalized Markup Language—standardi joka kuvaa markup- eli merkintäkieliä • DTD • Document Type Definition – SGML-muotoinen kielen kuvaus • HTML • HyperText Markup Language--HTML on eräs SGML-muotoinen DTD • Käytännössä HTML on kokoelma laitteisto- ja ympäristöriippumattomia tyylejä, jotka kuvataan tageina ja jotka muodostavat WWW-asiakirjan. Tagit mahdollistavat asiakirjan näyttämisen samanlaisena ympäristöstä riippumatta.
Kuinka selain toimii HTTP-pyyntö saavuttaa palvelimen HTTP-pyyntö sis. IP-osoitteen Internetin runkoverkko HTML-asiakirja tekstijonona (FTP-pyyntö saisi tiedoston, TELNET-pyyntö etäyhteyden…) Asiakaskone Palvelinkone HTML-asiakirja selaimeen, joka muodostaa siitä halutun muotoisen asiakirjan
HTML 1 • Mitä ovat HTML-asiakirjat? • ASCII- eli tekstitiedostoja, joita voidaan muokata millä tahansa tekstieditorilla (UNIXissa EMACS tai vi; Windowsissa Notepad) • Voidaan myös muokata tekstinkäsittelyssä, mutta täytyy tallentaa ”text only with line breaks” –muodossa • URL-pyyntö palvelimelle on muotoa http://
HTML-editorit • Vaikka HTML on ASCII-tekstiä, HTML-editorit voivat näyttää tiedoston sisällön WYSIWYG-muodossa • Editoreita ovat HotMetal, FrontPage, Visual Studio, DreamWeaver, PageMill (Word) • Myös Wordilla voi tallentaa HTML-asiakirjan, mutta sen HTML-koodi ei ole standardin mukaista ja sisältää ylimääräisiä tageja
HTML:n rakenne • Elementit • HTML-asiakirja sisältää tietoelementtejä, jotka erotetaan toisistaan HTML-merkinnöillä • elementit voivat sisältää tekstiä, kuvia, tai muita elementtejä • Kaikki elementit ovat samaa muotoa: • ”<” ”merkintä” ”>” • Kaikilla HTML-merkinnöillä on alku- ja lopetusmerkintä • <P> ja vastaava </P>
HTML:n rakenne 2 • Lopetusmerkintä on samanlainen kuin aloitusmerkintä paitsi että se alkaa / -merkillä • Tageilla voi olla myös määreitä (attributes) • <IMG SRC = ”kuva.gif” WIDTH=”200”></IMG> • HTML:ssä gemena ja versaali ovat samanarvoisia • <TITLE> on sama kuin <Title> tai <title> • Muutama poikkeus säännöstä
Pieni HTML-tiedosto <html> <head> <TITLE>Pieni HTML-esimerkki</TITLE> </head> <body> <H1>HTML on helppoa!</H1> <P>Tervetuloa HTML:n kiehtovaan maailmaan.Tämä on ensimmäinen kappale. Vaikka se on lyhyt, se on silti kappale!</P> <P>Ja tämä on toinen kappale.</P> </body> </html>
Pieni HTML-tiedosto 2 Avaa HTML-koodatun tiedon Avaa alkutunnistetiedot <TITLE> sisältää otsikkotekstin</TITLE> Sulkee alkutunnistetiedot Avaa leipätekstin H1-tason otsikko <P>aloittaa kappaleen ja </P> päättää sen Sama toisessa kappaleessa, <P> ja </P> Suljetaan leipäteksti Suljetaan HTML-koodi <html> <head> <TITLE>Pieni HTML-esimerkki</TITLE> </head> <body> <H1>HTML on helppoa!</H1> <P>Tervetuloa HTML:n kiehtovaan maailmaan.Tämä on ensimmäinen kappale. Vaikka se on lyhyt, se on silti kappale!</P> <P>Ja tämä on toinen kappale.</P> </body> </html>
Otsikot (Headings) • Kuusi esimääriteltyä tasoa <H1>…<H6> • näytetään selaimessa isompana tai lihavoituna • Käytön olisi oltava loogista • Heading-tagien on oltava erillään, eli <H1> -tagin sisään ei voi laittaa <H3> -tagia
Paragraph <P> </P> • HTML-selaimet eivät esitä tekstitiedostoissa olevia rivinvaihtoja tai välilyöntisarjoja • Teksti ”Tässä on kappalejako” esiintyy selaimessa”Tässä on kappalejako” • Ainoa tapa esittää kappalejako on <P> -tag • Sen lopetus </P>:llä ei ole välttämätöntä mutta erittäin suotavaa • Ilman <P>-tageja koko teksti esitetään yhtenä kappaleena
Paragraph 2 • Paragraph-elementillä on muutama määre • ALIGN=”LEFT” vasen tasaus (oletus) • ALIGN=”RIGHT” oikea tasaus • ALIGN=”CENTER” keskitys (vaikealukuinen) • Lisäksi P-elementtiin voidaan liittää ns. actioneja (OnMouseOver jne.)
Luettelot Numeroidut, numeroimattomat ja määritelmäluettelot käytössä Olennaista on se, että jokainen luettelon osa on <LI> ja </LI> -tagien välissä Luetteloiden sisältö kaikissa sama, avaustagi määrittelee luettelon tyypin Numeroimaton luettelo <UL></UL> Numeroitu luettelo <OL></OL> Määritelmäluettelo <DL></DL> Vuotava luettelo (puuttuva lopputagi) on hankala huomata
<html> <head> <TITLE>Luetteloiden käyttö</TITLE> </head> <body> <H1>Näin listaan mäkihyppääjiä:</H1> <ul> <li>Matti Nykänen</li> <li>Eddie Edwards</li> <li>Matti Hietala</li> </ul> </body> </html>
määrittelyluettelot <html> <head> <TITLE>Luetteloiden käyttö</TITLE> </head> <body> <H1>Näin listaan tähtiä</H1> <dl> <dt>Regulus</dt> <dd><i>Alpha Leonis</i></dd>, Leijonan päätähti <dt>Sirius</dt> <dd><i>Alpha Canis Major</i></dd>, Ison Koiran päätähti <dt>Aldebaran</dt> <dd><i>Alpha Tauri</i></dd>, Härän päätähti </dl> </body> </html>
Harjoituksia • Luo sivu, jossa on otsikko ja kolme kappaletta tekstiä hedelmistä. • Luo sivu, jossa on edellä mainitut kolme kappaletta ja lisäksi luettelo mielihedelmistäsi (ainakin 3) • Jatka tätä ja lisää sisäkkäiset luettelot: • Sitrushedelmät (ainakin 3) • Sitruuna • Greippi • Omena • Lisää määrittelyluettelo mielihedelmistäsi (ainakin 3), joissa luettelet hedelmän ja sen latinankielisen nimen. Internetistä saattaa olla apua tässä tehtävässä.
BODY-tag ja sen määreet • <BODY> -tagilla on seuraavat määreet: • bgcolor="black" • bgcolor=“#CCCCFF” • text="red" • link="yellow" • alink="orange" • vlink="white" • background="image.gif"
<PRE> -tag • Preformatted (esimuotoiltu teksti) • tekee välilyönnit ja rivinvaihdot merkitseviksi • Esim. ohjelmakoodia esitettäessä näppärä
<BR> -tag • Rivinvaihdot saa pakotettua tällä tagilla • National Center for Supercomputing Applications<BR> 605 East Springfield Avenue<BR> Champaign, Illinois 61820-5518<BR> • näkyy National Center for Supercomputing Applications 605 East Springfield Avenue Champaign, Illinois 61820-5518
<HR>-tag • Piirtää vaakaviivan, jonka paksuus ja pituus voidaan asettaa määreissä: • <HR SIZE=“4” WIDTH="50%">
Loogiset vs fyysiset tyylit <DFN> for a word being defined. <EM> for emphasis. <CITE> for citations <CODE> for computer code. <KBD> <SAMP> <STRONG> for strong emphasis. <VAR> for a variable. <B> bold <I> italics <TT> keyboard • Loogiset tyylit voidaan asettaa tyylitiedostosta • fyysiset tyylit vaikuttavat suoraan tekstiin, joka tagien välissä on
Loogiset ja fyysiset tyylit 2 • Pyritään käyttämään jompaakumpaa • Loogisia tyylejä voidaan muokata joka puolella sivustoa muokkaamalla tyylitiedostoa, joka niiden pohjana on • fyysisillä tyyleillä vaikutetaan pieniin kohtiin • Pyrkimyksenä on erottaa tietoaines esitysaineksesta
Escape Sequence -merkit • Joitakin merkkejä ei voi esittää HTML:ssä sellaisenaan. • <, >, &ovat varattuja merkkejä • erikoismerkit Ä, Ö, Å, é ó jne ovat myös hankalia • < < • > > • & & • ö ö • ñ ñ • È È • Merkki alkaa & ja päättyy ; • http://www.w3.org/hypertext/WWW/MarkUp/html-spec/html-spec_13.html#SEC106
<TABLE> -tagi • Aloittaa taulukon. • Jokainen taulukon rivi kuitenkin luotava erikseen • Jokainen solu luotava erikseen. • Määritteet: • Width: taulukon leveys • Bgcolor: taustan väri • Cellpadding: tyhjä tila solun sisällön ympärillä • Cellspacing: solujen välinen tila
<TH>, <TR>, <TD> • <TH> on Table Heading – sarakkeen otsikot • <TR> alkaa rivin • <TR> täytyy päättää </TR>:ään, muuten rivi valuu läpi • <TD> määrittelee solun • Määreet: align, valign (pystytasaus)
Linkittäminen • <A> -tag • linkitys sekä tiedoston sisällä että toisiin tiedostoihin • <A name=”#nimi”> -määre • määrittää tiedoston sisällä ankkurin, johon voi luoda linkin • <A HREF=”tiedosto.html”> luo linkin toiseen tiedostoon • <A HREF=”tiedosto.html#nimi”> luo linkin tiettyyn kohtaan tiedostossa
LINK 2 • Suhteellinen linkki: • ”..\kuvat\kuva1.gif” • Absoluuttinen linkki: • ”http://www.mun-sivu.com/kuvat/kuva1.gif” • Suhteelliset linkit hyviä sivuston sisäisen rakenteen kannalta • Absoluuttiset tarpeen sivuston ulkopuolisiin linkkeihin
LINK 3 • Linkillä on muutama määre: • target: kertoo, mihin uusi sivu avataan: • ”_self”: samaan ikkunaan • ”_blank”: uusi ikkuna • ”_parent”: ylätason kehys • ”_top”: koko sivu • eli esimerkiksi: • <A HREF=”w ww.mun.com/index.html TARGET=”_blank”>linkkiteksti</A> • uusi ikkuna, johon sisältö avataan
<IMG> • Kuvien lisäämiseen • <IMG SRC=”\kuvat\kuva1.gif” /> • monta määrettä • SRC: kuvatiedoston osoite ja nimi • Width: kuvan leveys • Height: kuvan korkeus • Border: reunaviiva • Voidaan käyttää linkkinä: • <A href=”tiedosto2.htm><img src=”kuva1.gif></a>
Frameset (kehys) • Menetelmä, joka mahdollistaa ruudulla pysyvien elementtien luomisen • Osat <FRAMESET> ja <FRAME> • Kuvassa kolme kehystä, ylävalikko, alivalikko ja sisältökehys • koon voi asettaa suhteelliseksi tai pikselin tarkkuudella • Ei näy kaikissa selaimissa, esimerkiksi kämmenmikroissa • Väärinkäyttö aiheuttaa pulmia (liiat kehykset tekevät sivustosta vaikeaselkoisen)
Kehykset ovat erilaisia HTML-tiedostoja • Perus –HTML-tiedostossa on HEAD –elementti ja BODY-elementti. • FRAMESET-tiedostossa on HEAD ja BODY-elementin tilalla FRAMESET . • FRAMESET –elementti määrittää selainikkunaan kehyksiä, joiden sisältöä voidaan ohjata toisistaan riippumatta. • FRAMESET –elementissä voi olla myös NOFRAMES –elementti ja siinä sisältöä niille selaimille jotka eivät tue kehyksiä. • BODY –elementti ei voi sisältää dataa ennen FRAMESET- elementtiä tai FRAMESET ei toimi.
Varoituksia kehyksistä • <FRAMESET>-määritys ei muutu, mutta kehysten sisältö muuttuu. Kun kehyksen sisältö kerran muuttuu, FRAMESET-määritys ei vastaa enää kehysten tilaa. • Koko FRAMESET-elementin tilaa ei voi määrittää nykyisin. Näin ollen, FRAMESET-elementtiin ei välttämättä voi määrittää kirjanmerkkiä. • Kehyksistä voi olla haittaa kun käyttäjä yrittää hyödyntää selaimen historiatietoja navigoinnissa.
FRAMESET-määreet • ROWS: moneenko vaakaosaan ruutu jaetaan • yksikköinä pikseli, prosentti tai jako-osa • <FRAMESET rows="50%, 50%"> </FRAMESET> • COLS: moneenko sarakkeeseen ruutu jaetaan • yksikköinä pikseli, prosentti tai jako-osa • <FRAMESET cols="50%, 50%"> </FRAMESET> • Seuraava esimerkki luo 2x3 -ruudukon. • <FRAMESET rows="30%,70%" cols="33%,34%,33%"> </FRAMESET>
Sisäkkäiset FRAMESET-elementit ovat mahdollisia <FRAMESET cols="33%, 33%, 34%"> ...contents of first frame... <FRAMESET rows="40%, 50%"> ...contents of second frame, first row... ...contents of second frame, second row... </FRAMESET> ...contents of third frame... </FRAMESET>
<FRAME>-elementti • <FRAMESET>-elementin sisään tulee <FRAME>-elementti • <FRAME>-elementtejä täytyy olla sama määrä kuin <FRAMESET>-elementissä on mainittu • <FRAME>-elementin tärkein määre on SRC (sisältötiedosto) • Toiseksi tärkein on NAME, jolla kehykseen viitataan.
<FRAME>-elementin määreet • name =nimi jolla kehykseen viitataan • longdesc = kehyksen sisällön kuvaus • src = kehyksen alkuperäisen sisällön osoite • Noresize= määre joka estää kehyksen koon muuttamisen • scrolling = auto|yes|no = vieritys sisällön määrän mukaan, aina tai ei koskaan • frameborder = 1|0 = kehyksen reunaviivan piirto • marginwidth = pixels = sisällön ja kehyksen välinen sivumarginaali • marginheight = pixels= sisällön ja kehyksen välinen ylä- ja alamarginaali.
Esimerkki <HTML> <HEAD> <TITLE>Kehysesimerkki</TITLE> </HEAD> <FRAMESET cols="33%,33%,33%“ FRAMEBORDER=“1”> <FRAMESET rows="*,200"> <FRAME src=“kehys1_sisältö.html"> <FRAME src=“kehys2_sisältö.gif"> </FRAMESET> <FRAME src=“kehys3.html"> <FRAME src=“kehys4.html"> </FRAMESET> </HTML> • Huomatkaa, että kehyksellä tulee olla sisältö, jotta se näkyisi 1 3 3 4 2
CSS • CSS tulee sanoista Cascading Style Sheet • Idea on liittää sivuihin linkki yhteen tiedostoon (.css), joka sisältää kaikki tyylit • Näin tyylitiedoston muuttaminen saa kaikki siihen viittaavat sivut muuttumaan yhdellä kertaa • CSS:n avulla voi muokata kaikkia HTML-tageja, joiden ulkoasua voi yleensäkään muuttaa • Hyvä ohje http://wendypeck.com/css101.html joka on tässä lähteenä
CSS on tekstitiedosto • Samoin kuin HTML, CSS on ASCII-tiedosto • Siihen ei saa liittää mitään muuta kuin CSS:n oman syntaksin mukaisia lausekkeita • Linkitys HTML:stä CSS:ään tapahtuu HEAD-elementin LINK-tagin avulla: • <link href=“tyyli.css" rel="stylesheet" type="text/css“ />
CSS:n syntaksi • Syntaksi on hyvin yksinkertainen: • Tagi { muotoilu_1:arvo; muotoilu_2:arvo;… muotoilu_n:arvo } • On oltava tarkkana sekä tagin nimen että varsinkin puolipisteiden ja aaltosulkujen kanssa • Viimeisessä rivissä ei tarvita puolipistettä
On kahdenlaista CSS:ää • Ensinnäkin, on mahdollista muokata CSS:n avulla HTML:n omien koodien ulkonäköä: • p {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;color: #000000;} • Tämä muuttaa paragraph-tagin ulkoasua
Toisaalta voi luoda omaa • HTML:n tagejahan ei voi muuttaa tai lisäillä omia sellaisia • CSS:n avulla voi kuitenkin luoda omia tyylejä: • .punateksti {color: #FF0000;} • Tämä luo uuden luokan nimeltä ’punateksti’ • Sitä kutsutaan näin: • <p class=”punateksti">
Sivun marginaalit • Käyttämällä body-tagin ulkoasua ohjaavaa koodia, on mahdollista luoda kapea sivu: • body { width:800px; background:#8cacbf; margin:auto; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; } • Tämä kaventaa bodyn 800 px:n levyiseksi
Linkkien ulkoasun muokkaus • Linkkejä voi muokata käyttämällä näitä kolmea tyyliä: • a:link { color: #000099;text-decoration: underline;} • a:visited {color: #666666;} • a:hover {text-decoration: none;background-color: #CCCCCC;} • Nämä ovat perusasetukset ja niitä voi muuttaa.
Sisäkkäiset CSS-tyylit • Jos ensin luodaan oma tyyli .menu, • .menu {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color: #000000;} • Voidaan sen jälkeen lisätä edellisen esimerkin kaltaisia tyylejä
Omat valikot • .menu a:link {color: #336600; text-decoration: none;} • .menu a:visited {color: #666666;text-decoration: none;} • .menu a:hover {color: #990000;text-decoration: none;} • .menu a:active {color: #666666;text-decoration: none;}
Ja niiden käyttö: • <p class="menu"><a href="services.html">services</a> | <a href="products.html">products</a> | <a href="company.html">company</a> | <a href="contact.html">contact</a></p> • Tämä luo valikon, jossa ulkoasu on aivan toinen kuin perusversiossa.
Osien asettelu • Osien asettelussa on apuna position: • h1{position:absolute;left:100px;top:150px;} • Tämä sijoittaa h1-tason elementit aina määräpikselien verran alas ja oikealle
Lisää positionista Lähde: http://www.w3schools.com/Css/pr_class_position.asp
CSS ja DIV • div (division) on kätevä tapa sijoittaa tekstilohkoja sivulle, koska DIVille voidaan käyttää position-määrityksiä • Luodaan haluttu tyyli, vaikka .laatikko, ja käytetään sitä näin: • <div class=”laatikko”><p>tekstiä</p> </div>