Övningar - Grundläggande webbutveckling

1a

  1. Logga in, byt inte lösenordet vid första frågan! Byt efter du loggat in från Start-menyn.
  2. Gör enkel hemsida i Claris Home Page där du presenterar dig själv. Sidan skall ha ditt namn som filnamn t ex: aake_jansson1.html. 1 som i övning 1.
  3. Ladda upp sidan så tidigt som möjligt med upload funktionen i Netscape. Detta åstadkommer du genom att skriva ftp://användarnamn@ftpdatornamn/användarnamn/, lösenord fås av övningsledaren.
  4. Kolla på sidan vid http://httpdatornamn/användarnamn/

1b

  1. Skicka din sidas URL med Netscape Messenger Mailbox till mikael.bonnier@te.mah.se.
  2. Gör ett inlägg i diskussionsgruppen lth.test.
  3. Hämta en bild från http://www.passagen.se/, HTML-verkstad och lägg in den på sidan. Ladda upp bild och sida igen och beskåda resultatet på webbservern. Förbättra sidan efterhand och ladda upp och kolla fler gånger. Du kan t ex presentera dig själv och berätta din historia som datoranvändare och utnyttja finesserna i Claris Home Page för att göra det snyggt.

2a

Skriv ett litet HTML-dokument i NotePad/Anteckningar, kolla i Netscape lokalt, ladda sen upp det till din mapp på FTP-servern, kolla med Netscape på HTTP-servern, validera med en HTML-validator. Lägg till mer HTML-kod som du lärt dig i boken. Validera, rätta tills "No errors!" och lägg in koden som validatorn föreslår, så får du en liten bild. Ändra länken dvs texten i HREF till den som validatorn föreslår så att HTML-filen valideras automatiskt när man trycker på bilden.

2b

Lär dig Claris Home Page med Help/Tutorial. Använd texttaggar, listor, tabeller mm för att göra några ambitiösa sidor som du laddar upp till din mapp. Använd WS FTP för att ladda upp.

3a

Gör en länksida med namnet DittNamn_links.html, ladda upp i din mapp:

  1. Länka till bilden på dig själv absolut och relativt. (Flytta inte bilden!)
  2. Länka till vårt FTP-site så att du kan klicka på länken och sen bara behöver fylla i lösenord för att hamna i vår mapp.
  3. Länka till Mikael Bonniers länkar, ankare webconstr. Dvs webbläsaren hoppar direkt ner till rubriken Webbkonstruktion.
  4. Gör en e-postlänk till den e-adress som du oftast kollar.
  5. Validera med http://validator.w3.org/ och lägg in W3C HTML 4.0-bilden med en länk så att din sida automatiskt valideras.

3b

Gör en listsida med namnet DittNamn_lists.html, ladda upp i din mapp:

  1. Gör några oordnade listor med olika punkttyper (TYPE=circle, square eller disc).
  2. Gör några ordnade listor, använd olika typer, t ex 1, a, A, i, I.
  3. Gör en definitionslista.
  4. Kolla din bookmark.htm i WordPad, lägg till ett bokmärke och editera beskrivningen i Netscape, ladda in en gång till i WordPad och se skillnaden.
  5. Gör en hierarkisk lista med olika listtyper på din sida.
  6. Validera sidan.

För övning 3 finns det förtydligande här (dock finns inte alla övningsmoment med): http://www.df.lth.se/~bengt/web/ovn3/ovn3.html

4a

Tabeller

  1. Använd Notepad/Anteckningar för att skapa en HTML-fil kallad DittNamn_tables.html. Ladda upp och validera med http://validator.w3.org/. Lägg in en automatisk valideringsbild (W3C HTML 4.0) längst ner.
  2. Gör en tabell på sidan:
  3. Gör en annan tabell på sidan:
  4. Sätt BORDER, CELLSPACING, CELLPADDING och BGCOLOR på tabellen.
  5. Använd ALIGN och VALIGN på celler. Sätt även BGCOLOR på celler, t ex schackrutigt.
  6. Validera sidan.

4b

Ramar

  1. Gör en webbplats i en undermapp kallad ovn4b med ramar, kalla sidan DittNamn_frames.html. Layout med tre ramar t ex:

    A

    C

    B
  2. Skapa ett antal t ex sju sidor som du använder i A, B resp C.
  3. Gör länkar så att:
    • Länkar i A byter innehåll i B (och eventuellt C - överkurs!).
    • Länkar i B byter innehåll i C.
  4. Ladda upp ovn4b till servern.
  5. Validera samtliga sidor.

5a

  1. Gå till http://www.te.mah.se/kurser/aktuellt/TE1015/. Lägg till som bokmärke. Gör bokmärken till din mapp både via ftp och http enligt tidigare e-post.
  2. Klicka på kurslitteratur och gå till "Kom igång med..." hemsida och kolla länkar som hör till kapitel 10, Bilder, och kapitel 11, Mer om bilder. Klicka på Bredvidläsningslitteratur och gå till "Nyckeln till..." hemsida och kolla länkar som hör till kapitel 6, Bilder. Använd dock inte alltför lång tid åt detta.
  3. Skapa en mapp på M: kallad ovn5a och en undermapp till den kallad images.
  4. Leta upp några fotografiska bilder från något PD-bildarkiv och spara i en ny mapp på M: kallad originals.
  5. Använd Paint Shop Pro till att kopiera ut en liten bild ur en stor. Klistra in som ny bild och spara som jpg-fil med nytt namn.
  6. Förminska den stora och spara som jpg-fil med nytt namn.
  7. Lägg in de tre bilderna i ett HTML-dokument kallat DittNamn_images.html, bilderna skall ligga i en undermapp images som i sin tur ligger i en mapp kallad ovn5a. Ladda upp hela mappen ovn5a till servern med WS FTP.
  8. Lägg till text och prova ALIGN, BORDER och övriga IMG-attribut.
  9. Validera sidan.

5b

  1. Gör en bildkarta i html dokumentet genom att montera flera förminskade bilder i ett snyggt montage, länkarna skall gå till de stora.
  2. Lägg till snygg text på bildkartans småbilder.
  3. Gör en rund gif-bild och lägg in i html-dokumentet. Använd Gif Construction Set för att sätta en färg genomskinlig så att bilden också ser rund ut när du har satt bakrundsfärgen. Lägg in någon lämplig bakgrund.
  4. Gör en egen GIF-animation eller manipulera en befintlig så att den t ex går baklänges. Lägg in den på sidan.
  5. Validera sidan.

6

  1. Logga in på vår chatt i eget namn och skriv några inlägg. Ha chatten uppe i ett eget webbläsarfönster under hela övningen. Titta till den då och då.
  2. Gör ett e-postformulär, med alla typer av komponenter, som skickar till dig själv. Gör t ex ett formulär för att lämna synpunkter på en tänkt webbplats.
  3. Spara det första formuläret med nytt namn. Gör om det till ett CGI-formulär med get. Låt det anropa http://www.df.lth.se/~mikaelb/cgienv.cgi.
  4. Spara det andra formuläret med nytt namn. Gör om det till ett CGI-formulär med post.
  5. Vad är skillnaden mellan post och get.
  6. Lägg in en räknare på en html-sida. Använd <IMG SRC="http://www.hultsfred.se/ns/counter/uniktnamn" WIDTH=64 HEIGHT=16>, byt ut uniktnamn mot något eget.
  7. Alternativ räknare:
    <!-- Start counter.bloke.com -->
<TABLE BORDER=4><TR><TD>
<APPLET ARCHIVE="http://counter.bloke.com/Counter.zip"
CODEBASE="http://counter.bloke.com/" CODE="Counter.class" WIDTH=75 HEIGHT=20>
<PARAM NAME=URL VALUE="http://domän/sökväg/webbsida.html">
<PARAM NAME=reset VALUE="0">
</APPLET></TD></TR></TABLE>
<FONT FACE=arial SIZE=1>Powered by <A TARGET="_top" HREF=http://counter.bloke.com/>counter.bloke.com</a></font><br>
<!-- End counter.bloke.com -->
  8. Till nästa gång: Tag med hörlurar eller head-set - helst med lång sladd.

7

  1. Använd APPLET-taggen för att installera Pocket Calculator (en Java-applet):
    1. Hämta ner pocketcalc11.zip via http://www.df.lth.se/~mikaelb/java-sve.html och spara i en mapp på M:.
    2. Packa upp med WinZip.
    3. Läs instruktionerna i readme.txt med Wordpad (ty den klarar Unix-radbrytningar) om hur man installerar.
    4. Lägg in PocketCalc med valfri bakgrundsfärg på en egen sida som du laddar upp till din mapp på servern. Glöm inte att ladda upp .class-filer.
  2. Koppla in dina hörlurar eller ditt head-set i 3.5 mm kontakten närmast styrspak/MIDI-urtaget. Sänk ljudet genom att klicka på den lilla högtalaren nere till höger.
  3. Punkt 1 nedan utförs om webbläsaren klarar att spela MIDI-filer annars görs punkt 2.
    1. Leta upp MIDI-filer via http://www.df.lth.se/~mikaelb/links-sve.html. Under rubriken Musik finns länkar till olika MIDI-webbplatser. Lägg in din favoritmusik med A-, EMBED- och OBJECT-taggarna.
    2. Leta upp au-filer. Lägg in dina filer med med A-, EMBED- och OBJECT-taggarna.
  4. Lägg in en valfri AVI-film med EMBED, t ex orbin.avi som du hittar via http://www.df.lth.se/~mikaelb/cad/orbin-sve.html. Flytta inte orbin.avi utan låt SRC gå direkt till den. Tips: View/Page Info är användbart för att få reda på länkar till inbäddade objekt.
  5. Ladda ner GoldWave och installera på M:. Omvandla en wav-fil till au (Java/Web, mono) och installera med EMBED på en sida.
  6. Gör en ny sida med valfria ljud, appletter och filmer.
  7. Gör en egen GIF-animation och lägg in på din sida.
  8. Multimediaexempel finns i mappen 00mm på vår ftp-server.

8

  1. Gå till http://www.df.lth.se/~mikaelb/edu/web/jsol.html
  2. Öppna ett nytt Netscape-fönster, skriv javascript: i Location-rutan.
  3. Kopiera från jsol.html till javascript typein-rutan. Tryck Enter för att köra. Du skall analysera JavaScript-programmen och skriva ner hur de fungerar i ett html-dokument kallat jsolanalysis.html. Sen laddar du upp html-filen till din mapp på servern.

    Förklaringar:

    1. Math.pow(a,b) = ab
    2. Math.random() = slumptal i intervallet [0, 1)
    3. Math.floor(x) = avrundar x till närmast lägre heltal
    4. 6.022E+23 = 6.022*1023
    5. && = and (och)
    6. || = or (eller)
    7. ! = not (icke)
    8. \n = newline-tecken (radmatning)
    9. ++i, ökar i med ett, dvs i = i + 1
    10. --i , minskar i med ett, dvs i = i - 1
    11. x += 10, betyder x = x + 10
    12. "Hej " + "du glade!" blir "Hej du glade!", dvs för strängar betyder + sammanfogning.
    13. Ytterligare förklaringar på begäran.
  4. Skriv egna one-liners i JavaScript.
  5. Lägg in några one-liners i en html-fil med <SCRIPT>JavaScript-kod</SCRIPT>.

9

Gör ett formulär med SELECT med size=1 och INPUT av type=button.

När man valt en titel i listan och tycker på knappen skall webbläsarn hoppa till motsvarande URL. Ledtråd: låt knappens onclick = "window.open(document.form1.select1.options[document.form1.select1.selectedIndex].value)".

Gör ett "kalkylark" med

Pris 1:

Pris 2:

Pris 3:

Summa:

Gör ett formulär som söker efter en text på en valfri webbplats. Utgå från exempel i 00javascript-mappen på vår ftp-server. Där finns också andra JavaScript-exempel.

Gör ett program som simulerar trappomkopplare (olika läge = tänt, lika = släckt). Utgå från exempel i 00javascript.

10

  1. Använd lokala style sheets t ex <SPAN STYLE="attribut:värde; attribut2:värde2;">En text</SPAN>.
  2. Prova de olika typerna av globala style sheets t ex de omdefinierade HTML-taggarna.
  3. Prova med klasser.
  4. Prova med ID.
  5. Prova länkade style sheets.
  6. Prova lager med text.
  7. Lägg in en bild med överlagrade texter.

Copyright © 1998 by Mikael Bonnier, Lund, Sweden