Helsingin normaalilyseo Jani Kiviharju Syksy 2016 WWW & HTML Helsingin normaalilyseo Jani Kiviharju Syksy 2016
World Wide Web World Wide Web on Internetissä toimiva hypertekstien järjestelmä World Wide Web eli WWW on eräs Internetin palvelumuoto Puhekielessä WWW (web) ja Internet (net) virheellisesti samaistetaan toisiinsa WWW toimii Internetissä muiden Internetpalvelujen, kuten sähköpostin ja tiedostonsiirron, ohella World Wide Webin kehittivät Tim Berners-Lee ja Robert Cailliaun vuonna 1990 CERN:ssä. WWW:n läpimurto tulo vuosina 1993-1995 graafisten selainten julkaisemisen myötä Mosaic -93, Netscape Navigator -94 ja Internet Explorer -95
World Wide Webin osia WWW:ssä on useita erilaisia teknisiä standardeja WWW:ssä toimimisen mahdollistamiseksi HTTP – hypertekstin siirtoprotokolla HTML ja XHTML – hypertekstin merkintäkieliä URL – WWW-sivujen osoitekäytäntö CSS – sivun ulkoasun määrittelykieli Javascript – WWW-sivujen sisällön ja sovelmien ohjelmointikieli ...
WWW:n toimintaperiaate Käyttäjä hakee selaimella web-sivuiksi kutsuttuja dokumentteja web-palvelimilta Käyttäjä (web-asiakas) ja web-palvelin siirtävät tietoa HTTP-protokollan avulla (HTTP = HyperText Transfer Protocol) Selain esittää palvelimelta haetut sivut käyttäjälle web-sivulla ja selaimessa määrätyssä muodossa, yleensä graafisesti WWW-sivut voivat sisältää tekstiä, kuvia, videoita ja muuta multimediaa Esitetyt sivut ovat tyypillisesti hypertekstiä, joka sisältää hyperlinkkejä uusiin sivuihin Selaimen avulla käyttäjä voi myös lähettää informaatiota web-palvelimelle
WWW:n toimintaperiaate Taustalla Internet ja TCP/IP-protokolla, jotta asiakas ja palvelin voivat kommunikoida keskenään http-palvelupyyntö http-vastaus palvelin (server) asiakas (client)
Hypertekstidokumentti tavallinen, lineaarinen dokumentti hypertekstidokumentti
Merkintäkielet Merkintäkielellä merkitään dokumentissa olevat eri tyyppiset elementit Siten dokumenttia käsittelevä ohjelma tunnistaa elementin tyypin ja oikean käsittelytavan Erilaisia merkintäkieliä on useita HTML (HyperText Markup Language), tunnetuimpia XML (Extensible Markup Language), metatason merkintäkieli uusien merkintäkielien määrittämiseen ja muokkaamiseen XHTML (Extensible HyperText Markup Language), eräs XML-kielellä määritellyistä HTML-pohjaisista merkintäkielistä TeX, ladontakieli erityisesti matemaattisia dokumentteja varten
Merkintäkielet Merkinnän rakenne on <tyyppi> elementin data </tyyppi> <tyyppi> on elementin aloitusmerkki, </tyyppi> on elementin lopetusmerkki ja näiden merkkien väliin kirjoitetaan elementin data Esimerkiksi <title> Helsingin normaalilyseo </title> merkitsee dokumentin otsikoksi ”Helsingin normaalilyseo” Merkinnät voivat olla sisäkkäisiä <p>Tämä on leipätekstiä, jossa on <i>kursivoitua</i> tekstiä.</p> i-merkkaus kursivoi merkinnän sisällä olevan datan, sanan kursivoitua ”Tämä on leipätekstiä, jossa on kursivoitua tekstiä.”
HTML HTML eli HyperText Markup Language on yleisin www-sivujen merkintäkieli HTML-kieli noudattaa rakennetta <tyyppi> elementin data </tyyppi> HTML-dokumentit ovat tekstieditorilla tehtyjä tiedostoja, joiden pääte on .html Mikä tahansa tekstieditori käy, kunhan tulokset tallentaa ns. ASCII-muodossa eli ilman tekstieditorin omia elementtejä (Wordart yms.) Notepad (Windows) tai Emacs (Linux/Unix) käy hyvin html-dokumenttien tekemiseen Tarjolla on myös erityisesti html-sivujen tekemiseen suunniteltuja tekstieditoreja (esim. EditPlus ja HTML-Kit) sekä editoreja, joilla voi suoraan suunnitella verkkosivuja käyttämättä html-kieltä, kuten Microsoft FrontPage ja Adobe Dreamweaver Kurssilla ei perehdytä verkkosivujen laadintaohjelmiin
Esimerkki HTML-kielestä <body> <h1>Janin kotisivut</h1> <p> Tervetuloa kotisivuilleni! Olen matematiikan ja tietotekniikan opettaja Helsingin normaalilyseossa. </p> </body> </html>
HTML-dokumentin osia Jokaisessa on html-dokumentissa on seuraavat elementit (tagit): <html> Aloittaa ja lopettaa html-dokumentin <head> Head- eli otsakeosaan tulee kaikki muu kuin varsinaiselle sivulle näkyviin tuleva tieto, kuten sivun otsikko ja tietoa dokumentista <body> Sivun varsinainen sisältö tulee body- eli runko-osaan <title> Otsakeosaan tuleva otsikkoelementti
Esimerkki HTML-dokumentista <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>AT2 – Verkkojulkaisun perusteet</title> </head> <body> <h1>Verkkojulkaisun perusteet</h1> <p> Kurssin tavoitteena on tutustua verkkoliikenteen periaatteisiin ja oppia verkkojulkaisemiseen tarvittavat tiedot ja taidot. Kurssin aikana opiskelija rakentaa omat www-sivut ja tutustuu palveluihin ja työvälineisiin, joita tarvitaan omien sivujen julkaisussa ja ylläpidossa. Opiskelijalla on myös mahdollisuus syventää taitojaan esimerkiksi JavaScript- tai PHP- ohjelmoinnin perusteilla.</p> </body> </html>
HTML - tekstielementit HTML-kielessä on tekstiä varten useita tageja. Tekstin rakennetta määrittävät tagit: Otsikot (header) <h1>, <h2>, <h3>, ... , <h6> Luku 1-6 määrää otsikon koon. Yläotsikko h1 on otsikoista suurin. Kappale (paragraph) <p> Rivinvaihto <br> Rivinvaihdolla ei eroteta kappaleita toisistaan, vaan katkaistaan saman kappaleen rivejä. Kappaleet erotetaan useilla <p>-tageilla. Rivinvaihtotagilla ei ole lopputagia. Tekstiä korostavat tagit: Lihavointi <b> Kursivointi <i> Alleviivaus <u> Vahva korostus <strong> Vaikutus selainkohtainen, usein lihavointi tai suurennos Lievä korostus <em> Vaikutus selainkohtainen, usein kursivointi
HTML-kielen kirjoittamisesta HTML-komennot voidaan kirjoittaa isolla tai pienellä kirjaimella <body> tai <BODY> Ohjelmakoodin seuraamista helpottaa, jos kirjoitustapaa ei vaihdella kesken html-koodin HTML-tagien rivityksellä ei ole merkitystä selaimen kannalta <h4> Otsikko </h4> tai <h4> Otsikko </h4> Sisennyksillä ja rivien vaihdolla ohjelmakoodista saadaan selkeämpää ja usein helpommin muokattavaa (ks. seuraava dia)
Tehtävä 1 – HTML-sivu 1.) Avaa tekstieditoriohjelma Notepad++ ja kirjoita uusi html-sivu 2.) Sivulla tulee olla a) yleiset html, head, title ja body–tagit b) vähintään kaksi kappaletta tekstiä (mitä tahansa tekstiä, saa olla hölynpölyä) c) ainakin yksi rivinvaihto (<br>) d) vähintään kaksi erityyppistä otsikkoa (<h1>-<h6>) e) ainakin kaksi tekstiä korostavaa tagia (<i>, <b>, <u>, <strong>) 3.) Kun olet kirjoittanut html-koodin, tallenna tiedosto nimellä kotisivu.html Huom! Muuta Notepadissa tallennustyyppi txt-tiedostosta tyypiksi ”All Files”, jotta tiedostosta tulee html-tiedosto 5.) Muokkaa tekstieditorilla tekemääsi sivua, korjaa mahdolliset virheet, tee ainakin yksi muutos sivun rakenteeseen ja tutki uudelleen tulosta
Sama tulos, erinäköinen ohjelmakoodi <html> <head> <title>AT2 – Verkkojulkaisun perusteet</title> </head> <body> <h1>Verkkojulkaisun perusteet</h1> <p> Kurssin tavoitteena on tutustua verkkoliikenteen periaatteisiin ja oppia verkkojulkaisemiseen tarvittavat tiedot ja taidot. Kurssin aikana opiskelija rakentaa omat www-sivut ja tutustuu palveluihin ja työvälineisiin, joita tarvitaan omien sivujen julkaisussa ja ylläpidossa. Opiskelijalla on myös mahdollisuus syventää taitojaan esimerkiksi JavaScript- tai PHP- ohjelmoinnin perusteilla.</p> </body> </html> <html><head><title>AT2 – Verkkojulkaisun perusteet</title></head> <body><h1>Verkkojulkaisun perusteet</h1> <p> Kurssin tavoitteena on tutustua verkkoliikenteen periaatteisiin ja oppia verkkojulkaisemiseen tarvittavat tiedot ja taidot. Kurssin aikana opiskelija rakentaa omat www-sivut ja tutustuu palveluihin ja työvälineisiin, joita tarvitaan omien sivujen julkaisussa ja ylläpidossa. Opiskelijalla on myös mahdollisuus syventää taitojaan esimerkiksi JavaScript- tai PHP- ohjelmoinnin perusteilla.</p> </body> </html>
Lisätehtävä 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> <p>Muista ostaa kaupasta <s>maitoa</s> ei kun limua!</p> <p>Uusin James Bond –elokuva on <strike>Casino Royale</strike> Quantum of Solace.</p> Lisää erilaisia tageja löydät osoitteesta http://www.w3schools.com/tags/
Taustamateriaalia HTML-opas - http://cs.stadia.fi/~lehtk/html.html Kattava HTML-opas - http://www.w3schools.com/html/html_intro.asp Tagit - http://www.w3schools.com/tags/default.asp