Internet and HTML Heikki Hietala

Internet stats 7/2005 WORLD INTERNET USAGE AND POPULATION STATISTICS World Regions Population ( 2005 Est.) Population % of World Internet Usage, Latest Data Usage Growth % Population ( Penetrati on ) World U s er s % Africa896,721, %16,174, %1.8 %1.7 % Asia 3,622,994, %323,756, %8.9 %34.5 % Europe731,018, %269,036, %36.8 %28.7 % Middle East260,814, %21,770, %8.3 %2.3 % North America328,387, %223,392, %68.0 %23.8 % Latin America/Cari bbean 546,723, %68,130, %12.5 %7.3 % Oceania / Australia 33,443, %16,448, %49.2 %1.8 % WORLD TOTAL 6,420,102, %938,710, %14.6 % %

Terms Internet  Set of computers that use the TCP/IP protocol. TCP/IP  Transmission Control Protocol / Internet protocol  A description of a method that sends packets of data between computers. WWW / Web  World Wide Web. One of the services available on the Internet. HTML  HyperText Markup Language. Set of tags that are interpreted by the browser software and used to create page representations.

Terms part 2 IP address  unique identifier on every machine that has access to the Internet  of the form xxx.xxx.xxx.xxx, where xxx<=255  gives a maximum of 255^4 IPs, or  In 5/2005 there were connected devices  Machines use solely IP addresses for communication  People need a DNS (domain name service), to translate into

More terms… Services are the core of the Internet  www, browse pages  telnet, remote operation service  ftp, file service  mms, multimedia streaming (video etc.)  nntp, network news transmission protocol  smtp, simple mail transmission protocol

So what are the machines? Client sits on your desk right now. Server  A computer connected to the trunk network (i.e. communications hardware) that answers calls of specific sorts (telnet, www, smtp jne), and does nuthin’ else. Router  A machine between the two above that... •knows its own IP •knows nearby IPs •can receiev datagrams and forward them on their way to the server that is being sought

Old days… a mainframe computer connected terminals Mainframe offline, network offline... Vulnerable systems needed more stability Mainframe Terminal

Solution: routing network Server Router AP User Every router has a routing table that contains the IP addresses of nearby machines. Packets are sent until they all get through one route or another.

Routing goes like this Every router does the following trick to every single packet: Extract destination address D from datagram Compute network prefix N If N matches any directly-connected network address Deliver datagram to D over that network Else if routing table contains a host-specific route for D Send datagram to next hop specified in table Else if routing table contains a route for N Send datagram to next hop specified in table Else if routing table contains a default route Send datagram to default router specified in table Else declare a routing error

What’s in a datagram? Ethernetframe (IP): 1500 left IP data packet (TCP): 1480 bytes left TCP packet payload (data): 1460 bytes left Total length: 1536 bytes

Kuinka selain toimii Internetin runkoverkko AsiakaskoneServerkone HTTP-pyyntö sis. IP-osoitteen HTTP-pyyntö saavuttaa palvelimen HTML-asiakirja tekstijonona (FTP-pyyntö saisi tiedoston, TELNET-pyyntö etäyhteyden…) 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:  ” ”  Kaikilla HTML-merkinnöillä on alku- ja lopetusmerkintä • ja vastaava

HTML:n rakenne 2 Lopetusmerkintä on samanlainen kuin aloitusmerkintä paitsi että se alkaa / -merkillä Tageilla voi olla myös määreitä (attributes) • HTML:ssä gemena ja versaali ovat samanarvoisia  on sama kuin tai  Tämä piirre poistuu pikapuoliin ja ristiin käytettynä kirjasinkoko tekee koodista vaikealukuista

Pieni HTML-tiedosto Pieni HTML- esimerkki HTML on helppoa! Tervetuloa HTML:n kiehtovaan maailmaan.Tämä on ensimmäinen kappale. Vaikka se on lyhyt, se on silti kappale! Ja tämä on toinen kappale.

Pieni HTML-tiedosto 2 Pieni HTML- esimerkki HTML on helppoa! Tervetuloa HTML:n kiehtovaan maailmaan.Tämä on ensimmäinen kappale. Vaikka se on lyhyt, se on silti kappale! Ja tämä on toinen kappale. Avaa HTML-koodatun tiedon Avaa alkutunnistetiedot sisältää otsikkotekstin Sulkee alkutunnistetiedot Avaa leipätekstin H1-tason otsikko aloittaa kappaleen ja päättää sen Sama toisessa kappaleessa, ja Suljetaan leipäteksti Suljetaan HTML-koodi

Otsikot (Headings) Kuusi esimääriteltyä tasoa … näytetään selaimessa isompana tai lihavoituna Käytön olisi oltava loogista Heading-tagien on oltava erillään, eli -tagin sisään ei voi laittaa -tagia

Paragraph 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 -tag Sen lopetus :llä ei ole välttämätöntä mutta erittäin suotavaa Ilman -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 ja -tagien välissä Luetteloiden sisältö kaikissa sama, avaustagi määrittelee luettelon tyypin  Numeroimaton luettelo  Numeroitu luettelo  Määritelmäluettelo Vuotava luettelo (puuttuva lopputagi) on hankala huomata

Luetteloiden käyttö Luetteloiden käyttö Näin listaan mäkihyppääjiä: Matti Nykänen Eddie Edwards Matti Hietala

Määrittelyluettelot Luetteloiden käyttö Näin listaan tähtiä Regulus Alpha Leonis, Leijonan päätähti Sirius Alpha Canis Major, Ison Koiran päätähti Aldebaran Alpha Tauri, Härän päätähti

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 -tagilla on seuraavat määreet:  bgcolor="black"  bgcolor=“CCCCFF”  text="red"  link="yellow"  alink="orange"  vlink="white"  background="image.gif" aquagraynavysilver blackgreenoliveteal bluelimepurplewhite fuschiamaroonredyellow

-tag Rivinvaihdot saa pakotettua tällä tagilla •National Center for Supercomputing Applications 605 East Springfield Avenue Champaign, Illinois  näkyy National Center for Supercomputing Applications 605 East Springfield Avenue Champaign, Illinois

-tag Piirtää vaakaviivan, jonka paksuus ja pituus voidaan asettaa määreissä: 

Linkittäminen -tag  linkitys sekä tiedoston sisällä että toisiin tiedostoihin -määre  määrittää tiedoston sisällä ankkurin, johon voi luoda linkin luo linkin toiseen tiedostoon luo linkin tiettyyn kohtaan tiedostossa

LINK 2 Suhteellinen 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: • linkkiteksti •uusi ikkuna, johon sisältö avataan

Kuvien lisäämiseen Ei lopputagia monta määrettä  SRC: kuvatiedoston osoite ja nimi  Width: kuvan leveys  Height: kuvan korkeus  Border: reunaviiva Voidaan käyttää linkkinä: 

BACKUP

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 ; spec/html-spec_13.html#SEC106

Frameset (kehys) Menetelmä, joka mahdollistaa ruudulla pysyvien elementtien luomisen Osat ja 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.HEAD BODY FRAMESET-tiedostossa on HEAD ja BODY- elementin tilalla FRAMESET.HEADBODYFRAMESET FRAMESET –elementti määrittää selainikkunaan kehyksiä, joiden sisältöä voidaan ohjata toisistaan riippumatta. FRAMESETFRAMESET –elementissä voi olla myös NOFRAMES –elementti ja siinä sisältöä niille selaimille jotka eivät tue kehyksiä.NOFRAMES BODYBODY –elementti ei voi sisältää dataa ennen FRAMESET- elementtiä tai FRAMESET ei toimi. FRAMESET

Varoituksia kehyksistä -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 User yrittää hyödyntää selaimen historiatietoja navigoinnissa.

FRAMESET-määreet ROWS: moneenko vaakaosaan ruutu jaetaan  yksikköinä pikseli, prosentti tai jako-osa  COLS: moneenko sarakkeeseen ruutu jaetaan  yksikköinä pikseli, prosentti tai jako-osa  Seuraava esimerkki luo 2x3 -ruudukon.

Sisäkkäiset FRAMESET- elementit ovat mahdollisia...contents of first frame......contents of second frame, first row......contents of second frame, second row......contents of third frame...

-elementti -elementin sisään tulee -elementti -elementtejä täytyy olla sama määrä kuin -elementissä on mainittu -elementin tärkein määre on SRC (sisältötiedosto) Toiseksi tärkein on NAME, jolla kehykseen viitataan.

-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 sivumarginaalipixels marginheight = pixels = sisällön ja kehyksen välinen ylä- ja alamarginaali.pixels

Esimerkki Kehysesimerkki Huomatkaa, että kehyksellä tulee olla sisältö, jotta se näkyisi

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ä .. -otsikoita  muutama yleisluontoinen kappale tekstiä  taulukko, joissa on sarakkeina kuu, sen löytäjä, kuun erikoispiirteet sekä ulkoinen linkki johonkin toiseen sivustoon (muista -tag sekä _target linkissä)  käytä ja -tageja  lisäksi yksi definition-lista, jossa kerrotaan Jupiteriin liittyvien asioiden selityksiä, omaan HTML-tiedostoonsa.

-tag Fontin määrittelyyn käytetty tagi Poistuu XHTML:n myötä

-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

,, on Table Heading – sarakkeen otsikot alkaa rivin täytyy päättää :ään, muuten rivi valuu läpi määrittelee solun  Määreet: align, valign (pystytasaus)