1 / 55

Internet ja XHTML

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

lael
Download Presentation

Internet ja XHTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Internet ja XHTML Heikki Hietala Jukka Mutikainen

  2. 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.

  3. 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

  4. 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://

  5. 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

  6. 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>

  7. 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ä

  8. 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>

  9. 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>

  10. 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

  11. 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

  12. 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.)

  13. 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

  14. <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>

  15. 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>

  16. 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ä.

  17. 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"

  18. <PRE> -tag • Preformatted (esimuotoiltu teksti) • tekee välilyönnit ja rivinvaihdot merkitseviksi • Esim. ohjelmakoodia esitettäessä näppärä

  19. <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

  20. <HR>-tag • Piirtää vaakaviivan, jonka paksuus ja pituus voidaan asettaa määreissä: • <HR SIZE=“4” WIDTH="50%">

  21. 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

  22. 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

  23. Escape Sequence -merkit • Joitakin merkkejä ei voi esittää HTML:ssä sellaisenaan. • <, >, &ovat varattuja merkkejä • erikoismerkit Ä, Ö, Å, é ó jne ovat myös hankalia • &lt; < • &gt; > • &amp; & • &ouml; ö • &ntilde; ñ • &Egrave; È • Merkki alkaa & ja päättyy ; • http://www.w3.org/hypertext/WWW/MarkUp/html-spec/html-spec_13.html#SEC106

  24. <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

  25. <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)

  26. 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

  27. 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

  28. 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

  29. <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>

  30. 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)

  31. 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.

  32. 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.

  33. 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>

  34. 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>

  35. <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.

  36. <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.

  37. 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

  38. 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ä

  39. 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“ />

  40. 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ä

  41. 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

  42. 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">

  43. 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

  44. 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.

  45. 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ä

  46. 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;}

  47. 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.

  48. 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

  49. Lisää positionista Lähde: http://www.w3schools.com/Css/pr_class_position.asp

  50. 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>

More Related