Esittely latautuu. Ole hyvä ja odota

Esittely latautuu. Ole hyvä ja odota

Internet Kehittynyt ARPAnet:istä 1960-luvun lopulla

Samankaltaiset esitykset


Esitys aiheesta: "Internet Kehittynyt ARPAnet:istä 1960-luvun lopulla"— Esityksen transkriptio:

1 Internet Kehittynyt ARPAnet:istä 1960-luvun lopulla
Tarvittiin tehokkaampaa ja luotettavampaa yhteiskäytäntöä Kehittäjänä USA:n puolustusvoimat ja joitakin yliopistoja Peitto käytännössä koko maailma Sisältää mm WWW:n, sähköpostin, FTP…

2 Sanastoa ja käsitteitä
HTML(Hyper Text Markup Language)=hypertekstin merkintäkieli TCP/IP(Transmission Configuration Protocol/Internet Protocol)=Internetin tiedonsiirtoprotokolla HTTP(Hyper Text Transfer Protocol)=hypertekstin siirtoprotokolla IP-osoite=Internetiin liitetyn laitteen uniikki osoite. (Esim jonka DNS muuttaa nimeksi

3 Internetin toiminta Root DNS for .com Root DNS for .fi Root DNS for .
Root DNS for . Root DNS for microsoft.com ISP (palveluntarjoaja) Sonera, Elisa, MTV3, Saunalahden Serveri

4 WYSIWYG-editorit WYSIWYG(What You See Is What You Get)
Helpottaa sivujen luontia ja vanhojen muokkausta Luontivaiheessa ei tarvitse kirjoittaa koodia Parhaimmillaan työläissä työvaiheissa (interaktiiviset kuvat, lomakkeet, kehykset, taulukot) JavaScript ominaisuudet Koodi ei ole kovin taloudellista Ohjelma ei aina osaa toteuttaa sitä, mitä käyttäjä haluaa Tuottaa joskus virheellistä koodia Maksullinen Frontpage, Dreamweaver

5 ASCII-editorit Ascii-editorit Arachnophilia, SiteAid
Helpottaa koodin luomista: ei tarvitse muistaa pilkulleen elementtien parametreja Tuottaa taloudellista koodia Koodi on koko ajan näkyvillä -> virheet vähenevät JavaScript ominaisuudet Vaatii HTML-koodaus osaamista Ilmainen Arachnophilia, SiteAid

6 Koodaus Koodaus Tärkeää hallita, vaikka loisikin sivuja editorilla: koodin tunteminen on ylläpitäjän tärkein ominaisuus Koodi on aina taloudellista Melko työlästä

7 Yleistä HTML-koodista
Eri HTML-versioita, sekä IE ja NN laajennukset Koodissa teksti on rajattu alku- ja lopputunnisteilla Tagin sisälle on kirjoitettu tieto siitä, mitä HTML-elementtiä käytetään Voi käyttää isoja ja pieniä kirjaimia Tagipari alkaa aina <elementti> ja päättyy </elementti>(jos päättymistä tarvitaan)

8 Yleistä HTML-koodista
WWW-osoitteissa(sivujen nimissä) ei sallita ääkkösiä Aloitussivun nimi pitää yleensä olla ”index.htm”, ”index.html”

9 HTML-elementti Rajaa koko HTML-dokumentin teksteineen ja komentoineen.
Sisältää kaksi osaa: HEAD-elementti (otsikkotiedot) ja BODY-elementti (varsinainen dokumentti) Esim: <HTML>sivun sisältö</HTML>

10 HEAD-elementti Määrittelee otsikko-osan
Sisältää TITLE-elementin, josta näkyy käyttäjälle selaimen yläpalkissa dokumentin nimi Voi sisältää META-informaatiot, joita voidaan käyttää dokumentin identifioinnissa ja indeksoinnissa Esim: <HEAD><TITLE>Yläpalkin teksti</TITLE></HEAD>

11 BODY-elementti Dokumentin runko, joka pääasiassa näkyy käyttäjälle
Sisältää varsinaiset tekstit, kuvat jne. Voi sisältää myös JavaScriptiä, VBScriptiä… Parametreilla voidaan määrittää mm taustan, tekstin, käyttämättömien linkkien, käytettyjen linkkien, aktiivisten linkkien värit, taustakuvat... Esim: <BODY>dokumentin runko</BODY>

12 BODY-elementin parametreja
bgcolor = taustan väri (oletuksena valkoinen) Esim: <BODY bgcolor=”black”> TAI <BODY bgcolor=”#000000”></BODY> text = tekstin väri (oletuksena musta) Esim: <BODY text=”white”> TAI <BODY text=”#FFFFFF”> dokumentin runko</BODY>

13 BODY-elementin parametreja
background = taustakuva Mikäli taustakuva on selainikkunaa pienempi, selain lisää kuvia toistensa viereen ja alle, kunnes ruutu on täytetty Latautuu taustavärimäärittelyn päälle Kuvan koko ei mielellään saisi olla yli 150 kilotavua (JPG) Selain tallentaa kuvan välimuistiin, joten samaa kuvaa kannattaa käyttää mahdollisimman monella sivulla Esim: <BODY background=”kuva.jpg”> dokumentin runko</BODY>

14 Otsikko-elementti Otsikoksi määritelty teksti sijaitsee aina omalla rivillään ja sen ylä- ja alapuolelle selain tekee hieman tyhjää tilaa HTML-dokumentissa voi olla kuudentasoisia otsikoita Esim: <H1>Pääotsikko</H1> <H6>Alaotsikko</H6>

15 BR-elementti Komento <BR> sijoittaa tekstiin rivinvaihdon, mutta ei vaihda kappaletta Komennon jälkeen jatkuva teksti alkaa seuraavalta tyhjältä riviltä Ei ole lopettavaa komentoa

16 Lihavointi-elementti
Esim: <B>lihavoitu teksti</B> Kursivointi-elementti Esim: <I>kursivoitu teksti</I> Alleviivaus-elementti Esim: <U>alleviivattu teksti</U>

17 Ylä- ja alaindeksi-elementti
Esim: <SUB>alaindeksi</SUB> Esim: <SUP>yläindeksi</SUP> Yliviivaus-elementti Esim: <STRIKE>Yliviivattu teksti </STRIKE>

18 FONT-elementti FONT-elementin parametrit sisältävät mahdollisuuden muuttaa tagiparin rajaamalla alueella tekstin tyyppiä, väriä ja kokoa

19 FONT-elementin parametreja
color = tekstin väri Ohittaa BODY-elementin text-parametrin määrittelyt rajatulla alueella Esim: <FONT color=”yellow”> tekstiä </FONT> face = fontin tyyppi Toimii JOS fonttityyppi on asennettu käyttäjän koneelle, muuten selain käyttää oletusfonttia Esim: <FONT face=arial> tekstiä </FONT>

20 FONT-elementin parametreja
size=tekstin koko Kokomuutokset tehdään suhteessa muihin fonttikokoihin Kokomuutokset ovat välillä 1 – 7 Perusfontti on 3 Esim <FONT size=+2> fontti koosta 3 kokoon 5 </FONT> <FONT size=-2> fontti koosta 3 kokoon 1 </FONT>

21 P-elementti Kirjoitettu teksti jaetaan kappaleisiin
Esim: <P>kappale1</P><P>kappale2</P> align=tasaustapa Vaihtoehdot ovat left (vasen), center (keskitetty) ja right (oikea). Oletuksena on left. Esim:<P align=center>kappale</P>

22 HR-elementti Piirtää kuvaruudun poikki vaakasuoran viivan, jota voidaan käyttää erottelemaan kappaleita ja tekstin osia toisistaan Oletuksena viiva ulottuu selainikkunan laidasta laitaan.

23 HR-elementin parametreja
align=viivan tasaustapa center | left | right widht=viivan absoluuttinen tai suhteellinen leveys pikseli|prosentti(suhteessa selainikkunan leveyteen) size=paksuus pikseleinä(0-100, oletuksena 2) color=viivan väri heksa|nimi

24 CENTER-elementti Keskittää kaikki elementit, jotka ovat tagiparin välissä, jollei tagiparin sisällä muuta määrätä Esim: <CENTER> <H1>Keskitettävä otsikko</H1> <HR> <P align=right> Tekstikappaleen align-parametri ohittaa CENTER-elementin vaikutukset ja teksti tasataankin oikeaan laitaan. </P> </CENTER>

25 UL-elementti Määrittelee luettelon Parametreja listamerkiksi:
disc=pallo circle=ympyrä square=neliö Listan jokainen kohta määritellään komennolla <LI> </UL> lopettaa listauksen Esim: <UL type=”square”> <LI>listan eka rivi <LI>listan toka rivi </UL>

26 UL-elementti UL-elementtiä voidaan käyttää myös tekstin sisentämiseen, jolloin <LI> elementtiä ei käytetä Jos kappaletta halutaan sisentää lisää, komentoja kirjoitetaan useampia Esim:<H1>otsikko</H1> <UL><UL><UL> <P>kappale1</P> <P>kappale2</P> </UL></UL></UL>

27 A-elementti A-elementillä on kaksi pääasiallista tehtävää: ilmoittaa kohta mihin viitataan tai muodostaa linkki Sillä voidaan rajata dokumenttiin sijoitettuja objekteja ja tekstiä A-elementti ei yksinään tee mitään, vaan sen täytyy sisältää vähintään yksi parametri

28 A-elementin parametreja
Linkki toiseen objektiin, elementtiin tai dokumenttiin yhdistetään A-elementin href-parametrilla Linkki voi viitata toisen HTML-dokumentin lisäksi esim uutisalueelle, telnet-yhteyden takana olevaan palveluun, sähköpostiosoitteeseen, FTP-palvelimella olevaan tiedostoon… Esim <A href= Mikkisoftan sivuille</A>

29 A-elementin parametreja
Jos viitattava tiedosto sijaitsee samassa hakemistossa, voi koneosoitteen jättää kokonaan pois ja antaa pelkän tiedoston nimen Jos viitattava tiedosto sijaitsee muokattavan tiedoston kansion alikansiossa, riittää kun kirjoittaa alikansio/tiedostonimi Esim <A href=”lisatiet.htm”>lisätietoja saat tästä</A>

30 A-elementin parametreja
Linkki voi viitata myös tiettyyn tekstin kohtaan samassa tai jossain toisessa dokumentissa. Tällöin on kyse ankkurista Ankkuri suoritetaan A-elementin parametrilla name Ankkurointi toteutetaan kahdella erillisellä elementillä: itse linkillä ja viitattavan kohdan määrittelevällä ankkurilla

31 Esimerkkejä ankkuroinnista
Ankkuri:<A name=”avainsana”>tekstiä</A> Jos viitattava tieto on samassa dokumentissa kuin linkki, linkitys toimii seuraavasti: <A href=”#avainsana”>linkki ankkuriin</A> Jos viitattava tieto on eri dokumentissa: <A href=”dokumetti#avainsana”>linkki ankkuriin</A>

32 Sähköpostiosoite linkkinä
A-elementillä voidaan myös määritellä sähköpostilinkin esimerkiksi henkilön yhteystietojen yhteyteen. Tämä toteutetaan lisäämällä mailto-komento sähköpostin eteen Esim <A Janille</A>

33 BODY-elementin parametreja
link = käyttämättömän linkin väri(sininen) alink = aktiivisen linkin väri (violetti) vlink = vierailtun linkin väri (punainen) Esim: <BODY link=”blue” vlink=”green” alink=””FF0000”>dokumentin runko</BODY>

34 IMG-elementti IMG-elementillä voidaan tuoda kuvia dokumenttiin
src-parametrilla määritellään kuvan osoite/nimi Esim <IMG src=”kuva.jpg”>

35 Kuva linkkinä Kuva voi myös toimia linkkinä sijoittamalla IMG-elementin A-elementin tagiparin sisälle Esim : <A href=”lisatiet.htm”><IMG src=”kuva.jpg”></A>

36 PRE-elementti PRE-elementti tuo tekstin näyttöön sellaisenaan välilyönteineen sisennyksineen ja rivinvaihtoineen kuin se on koodiin kirjoitettu Käyttökelpoinen esim yksinkertaisten taulukoiden tekemiseen Syntaksi: <PRE>teksti</PRE>

37 TABLE-elementti Taulukko määritellään TABLE-tagien väliin
TABLE-elementti ei tee yksinään mitään, vaan se sisältää aina taulukon rivin luovan TR-elementin, joka taas sisältää sarakkeen luovan TD-elementin Sarakkeita tai rivejä ei määritellä erikseen. Selain laskee tarvittavan sarakkeiden määrän sen mukaan, montako solua määrittelet taulukon leveimmälle riville

38 TABLE-elementti Esim <TABLE>
<TR><TD>vasen ylä</TD><TD>oikea ylä</TD></TR> <TR><TD>vasen ala</TD><TD>oikea ala</TD></TR> </TABLE> Border-parametrilla määritellään taulukon kehyksen paksuus pikseleinä, oletuksena on useimmiten 0 <TABLE border=”1”> taulukko

39 Lomakkeet FORM-elementillä luodaan esim palautelomakkeita
Lomakkeen täytyy tietää miten ja minne informaatio lähetetään. Tämä ilmoitetaan action-parametrilla Esimerkki sähköpostilla lähetettävästä <FORM syöttötiedot</FORM>

40 Lomakkeet Halutessasi palautteen lähetettävän suoraan Internetistä ilman sähköpostia, täytyy käyttää cgi-ohjelmistoja Tällöin kerrotaan mm minkä palvelimen cgi-ohjelmaa käytetään lähetystyyppi (post) määritellään erikseen vastaanottaja ja otsikko Lisäksi seuraavan sivun esimerkki kääntää käyttäjän ”kiitos palautteesta”-sivulle

41 Lomakkeet <form action=" method="post"> <input type=hidden name="recipient" <input type=hidden name="subject" value="Palaute"> <input type=hidden name="redirect" value=”

42 INPUT-elementti Lomakkeen syöttökentät määritellään pääasiassa INPUT-elementillä Name-parametrilla määritellään kentälle nimi. Tämä on välttämätöntä INPUT-elementille, sillä tällä tiedolla kerrotaan käyttäjän kirjoittaman tiedon laatu.

43 INPUT-elementin type-parametri
Type-parametri on tärkein parametri INPUT-elementissä. Sillä määritellään mikä tyyppisen syötekentän selain piirtää näytölle Type-parametrilla mm seuraavat vaihtoehdot syötteen tyypiksi:

44 Type=”text” Yksinkertaisin lomakkeen syöttökenttä, johon käyttäjä voi syöttää tekstiä Oletuskoko on 1riviä korkea ja 20 merkkiä leveä. Esim sähköpostiosoitteeni:<BR> <INPUT type=”text” name=”sposti”>

45 Type=”radio” Radio-kentällä luodaan monivalintakyselyitä, joista yksi vaihtoehto voi olla valittuna Eri vaihtoehdot ryhmitellään samaan ryhmään samansisältöisellä name-kentällä Value-kentällä määritellään kunkin vaihtoehdon nimi

46 Type=”radio” Esim sivusto on mielestäni:
<INPUT type="radio" name="valinta" value="huono">huono<br> <INPUT type="radio" name="valinta" value="kohtalainen">kohtalainen<br> <INPUT type="radio" name="valinta" value="hyvä">hyvä<br>

47 Type=”checkbox” Checkbox-kentällä luodaan rastitettava valintaruutu
Esim <INPUT type=”checkbox” name=”lehtitilaus”>Lähettäkää minulle osaston lehti

48 TEXTAREA-elementti Text komennolla on helppo syöttää yksittäinen sana; suuremmat tekstimäärät syötetään TEXTAREA-elementillä Oleisimmat parametrit ovat name (syötekentän nimi) cols (kentän leveys merkkeinä) rows (rivien määrä) Esim <TEXTAREA name=”palaute” rows=”5” cols=”40”> Olen sitä mieltä, että </TEXTAREA>

49 RESET- ja SUBMIT-kentät
Lomakkeen tietojen lähetysnappula luodaan submit-kentällä. Value-kentällä annetaan nappulan teksti Reset kentällä tyhjennetään lomake Esim <INPUT type=”submit” value=”Lähetä”> <INPUT type=”reset” value=”tyhjennä”>

50 Kehykset Kehyksen määrittelyt tehdään omaan erilliseen dokumenttiin. Tämä dokumentti ei näy käyttäjälle FRAMESET-elementillä saadaan jaettua selainikkuna pienempiin osiin Eri osat ovat itsenäisiä ja toisistaan riippumattomia, joihin voi ladata minkä tahansa erillisen dokumentin FRAMESET-elementti ei poikkeuksellisesti sijoitu HEAD otsikko-osaan, eikä BODY runko-osaan. Dokumentti ei edes tarvitse BODY runko-osaa

51 FRAMESET-elementti Kehysmäärittelyt rajaavassa dokumentissa täytyy olla ainakin cols (sarakkeet) tai rows (rivit) määritteet. Eri osien kokoa määritellään joko prosentteina tai pikseleinä Esim <FRAMESET cols=”50%,50%”> määrittelyt </FRAMESET>

52 FRAME-elementti FRAME-elementillä kutsutaan kehykseen haettavaa dokumentti Src-parametrilla määritellään kutsuttavan dokumentin osoite Name-parametrilla märitellän kehykselle nimi Esim <FRAME src=”vasenpuoli.htm” name=”vasen”>

53 Esimerkki kehysmäärittelystä
<HTML> <HEAD> <TITLE>AO XX</TITLE> </HEAD> <FRAMESET cols=”20%,80%”> <FRAME src=”vasenpuoli.htm” name=”vasen”> <FRAME src=”oikeapuoli.htm” name=”oikea”> </FRAMESET> </HTML>

54 Esimerkki kehysmäärittelystä
Määrittely jakaa näytön pystysuunnassa kahteen osaan kokosuhteessa 20/80 ja lataa kehyksiin kaksi eri dokumenttia Määrittelyllä rows=”20%,80%” selain jakaisi näytön vaakasuunnassa

55 Linkki kehysmäärittelyä käytettäessä
Linkillä pyydettyä dokumenttia avattaessa toisessa kehyksessä, kuin missä itse linkki sijaitsee, käytetän linkin target-parametria Esim <A href=” target=”oikea”>Metalliliiton kotisivu</A>

56 Linkki kehysmäärittelyä käytettäessä
Jos linkki on samassa kehyksessä johon sivua pyydetään ja avatavassa sivussa on myös kehykset kannattaa lisätä linkin perään parametri, jolla saadaan pyydetty sivu avautumaan omaan ikkunaan Esim <A href= target=”_blank”>linkkiteksti</A>

57 META-elementti META-elementillä voidaan määritellä sopivia hakusanoja hakurobotille, jotta sivut löytyisivät robottia käytettäessä mahdollisimman loogisesti META-elementillä on kaksi pakollista, mutta vaihtoehtoista parametria: http-equiv tai name

58 Name-parametri Voidaan käyttä esimerkiksi sivun sisällön kertomiseksi description-parametrilla <META name=”description” content=”metallityöväen liiton ammattiosasto xx:n kotisivut”> Voidaan syöttää hakusanoja, joilla sivusto löytyy hakukoneesta keywords-parametrilla <META name=”keywords” content=”ao xx, ammattiosasto xx, metallin xx, ao”>

59 Name-parametrin toiminta
Esimerkiksi Altavista-hakurobotti indeksoi antamasi hakusanat (keyword) korkeammalla prioriteetilla, kuin ”normaalit” dokumentin osat. Haettaessa hakusanoilla, Altavista näyttää linkkilistassa ao:n sivuston kohdalla tekstin ” metallityöväen liiton ammattiosasto xx:n kotisivut” eli description-arvon

60 Tekijänoikeudet Internetin tarjoamat materiaalit ovat yleisesti tekijänoikeuksien alaisia Halutessasi julkaista kotisivullasi esim Metallin kotisivuilla tai Ahjossa olevaa materiaalia, kysy artikkelin kirjoittajalta ja muista mainita lähde Liiton logoa saa käyttää, kunhan ottaa huomioon tunnuksen graafiset ohjeet


Lataa ppt "Internet Kehittynyt ARPAnet:istä 1960-luvun lopulla"

Samankaltaiset esitykset


Iklan oleh Google