Heikki Hietala Jukka Mutikainen

Heikki Hietala Jukka Mutikainen
Internet ja XHTML Heikki Hietala Jukka Mutikainen

Muutamia käsitteitä WWW Web SGML DTD HTML
World Wide Web 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

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

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" aqua gray navy silver black green olive teal blue lime purple white fuschia maroon red yellow

<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 näkyy
National Center for Supercomputing Applications<BR> 605 East Springfield Avenue<BR> Champaign, Illinois <BR> näkyy National Center for Supercomputing Applications 605 East Springfield Avenue Champaign, Illinois

<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 ;

<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 <A name=”#nimi”> -määre
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: Absoluuttinen linkki:
”..\kuvat\kuva1.gif” Absoluuttinen linkki: ” 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 <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...

<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 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 Static
Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations) Relative An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position Absolute An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties (fixed) An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode) Lähde:

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>

Kuvat ja CSS CSS:ää voidaan käyttää kuvien sijoitteluun ihan yhtä lailla. img { position:relative; align:center left:0px;}

CSS:n yhteenveto Kaikkea voi muuttaa käyttämällä CSS:ää
Pitää tietää tagi jota muutetaan ja se, mitä määrityksiä sille voi asettaa Syntaksi on helppo mutta tarkka Apuna on w3Schools.com, jossa on hyvät referenssilistat ja varsinkin demot, joissa voi kokeilla muutosten vaikutusta Myös muita hyviä CSS-sivustoja löytää helposti

BACKUP

Sivuston rakenne Perusajatus on, että HTML-koodi on omassa hakemistossaan ja kuvat ja muu materiaali omissaan \ \mun-sivu\html \mun-sivu\kuvat \mun-sivu\script helpottaa ylläpitoa ja hahmotusta kun sivuston koko kasvaa

HARJOITUSTYÖ 1 Kerro Jupiterista ja sen kuista (lähdemateriaalia löytyy kasoittain Internetistä) Sisällytä sivuun hyvä <title> <h1>.. <h3> -otsikoita muutama yleisluontoinen kappale tekstiä taulukko, joissa on sarakkeina kuu, sen löytäjä, kuun erikoispiirteet sekä ulkoinen linkki johonkin toiseen sivustoon (muista <TH> -tag sekä _target linkissä) käytä <body bgcolor> ja <body text> -tageja lisäksi yksi definition-lista, jossa kerrotaan Jupiteriin liittyvien asioiden selityksiä, omaan HTML-tiedostoonsa.

Heikki Hietala Jukka Mutikainen

Samankaltaiset esitykset

Esitys aiheesta: "Heikki Hietala Jukka Mutikainen"— Esityksen transkriptio:

Samankaltaiset esitykset

Projektista

Palaute

Kirjaudu sisään

Kirjaudu sisään sosiaaliverkostojen kautta:

Heikki Hietala Jukka Mutikainen

Samankaltaiset esitykset

Esitys aiheesta: "Heikki Hietala Jukka Mutikainen"— Esityksen transkriptio:

Samankaltaiset esitykset

Projektista

Palaute