Övningar - Programmering 1

1

Logga in, byt inte lösenordet vid första frågan! Byt efter du loggat in från Start-menyn.
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. Undvik åäö och andra specialtecken i filnamn.
Ladda upp sidan så tidigt som möjligt med upload funktionen i Netscape. Detta åstadkommer du genom att skriva ftp://användarnamn@datornamn/användarnamn/, lösenord fås av övningsledaren.
Kolla på sidan vid http://datornamn/användarnamn/
Skicka din sidas URL med Hotmail till mikael.bonnier@te.mah.se.
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.

2

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. Använd WS FTP för att ladda upp.

3

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 och lägg in koden som validatorn föreslår, så får du en liten bild.

4a

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

Länka till din bild absolut och relativt. (Flytta inte bilden!)
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.
Länka till Mikael Bonniers länkar, ankare webconstr. Dvs webbläsaren hoppar direkt ner till rubriken Webbkonstruktion.
Gör en e-postlänk till den e-adress som du oftast kollar.
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.

4b

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

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

5a

Tabeller

Använd Notepad/Anteckningar för att skapa en HTML-fil kallad DittNamn_tables.html. Lägg in en automatisk valideringsbild (W3C HTML 4.0) längst ner.
Gör en tabell på sidan:
Gör en annan tabell på sidan:
Sätt BORDER, CELLSPACING, CELLPADDING och BGCOLOR på tabellen.
Använd ALIGN och VALIGN på celler. Sätt även BGCOLOR på celler, t ex schackrutigt.

5b

Ramar

Gör en webbplats med ramar, kalla sidan DittNamn_frames.html. Layout med tre ramar t ex:

A

C

B
Skapa ett antal t ex sju sidor som du använder i A, B resp C, sidorna får gärna ligga i undermappar.
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.
Ladda upp webbplatsen till servern.

6a

Gå till http://www.te.mah.se/kurser/aktuellt/DA7030/. Lägg till som bokmärke.
Klicka på kurslitteratur och gå till "Nyckeln till..." hemsida och kolla länkar som hör till kapitel 6, Bilder. Klicka på Bredvidläsningslitteratur 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.
Leta upp några bilder från t ex http://www.kodak.com/ och spara i en egen mapp.
Använd Paint Shop Pro till att kopiera ut en liten bild ur en stor. Klistra in som ny bild och spara med nytt namn.
Förminska den stora, spara med nytt namn.
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 html. Ladda upp hela innehållet i mappen html till servern med WS FTP.
Lägg till text och prova ALIGN, BORDER och övriga IMG-attribut.

6b

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.
Lägg till snygg text på bildkartans småbilder.
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.
Gör en ny GIF-animation och manipulera en befintlig så att den t ex går baklänges.

7

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å.
Konfigurera Mail & Groups i Netscape.
Skicka e-post med Netscape Messenger Mailbox till mikael.bonnier@te.mah.se. Ta gärna upp synpunkter på kursen - var skoningslös, men avsluta med en vänlig hälsning.
Gör ett inlägg i diskussionsgruppen lth.test.
Gör ett e-postformulär som skickar till dig själv, med alla typer av komponenter.
Gör ett CGI-formulär med get.
Gör ett CGI-formulär med post.
Lägg in en räknare på en html-sida.

8

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.
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.
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.
Ladda ner GoldWave och installera på M:. Omvandla en wav-fil till au (Java/Web, mono) och installera med EMBED på en sida.
Gör en ny sida med valfria ljud, appletter och filmer.
Gör en egen GIF-animation och lägg in på din en sida.
Multimediaexempel finns i mappen 00mm på vår ftp-server.

9

Gå till http://www.df.lth.se/~mikaelb/edu/progr1/jsol.html
Öppna ett nytt Netscape-fönster, skriv javascript: i Location-rutan.

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:

Math.pow(a,b) = a^b
Math.random() = slumptal i intervallet [0, 1)
Math.floor(x) = avrundar x till närmast lägre heltal
6.022E+23 = 6.022*10²³
&& = and (och)
|| = or (eller)
! = not (icke)
\n = newline-tecken (radmatning)
++i, ökar i med ett, dvsi = i + 1
--i , minskar i med ett, dvs i = i - 1
x += 10, betyder x = x + 10
"Hej " + "du glade!" blir "Hej du glade!", dvs för strängar betyder + sammanfogning.
Ytterligare förklaringar på begäran.

Skriv egna one-liners i JavaScript.
Lägg in några one-liners i en html-fil med <SCRIPT>JavaScript-kod</SCRIPT>.

10

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 = "open(document.form1.select1.options[document.form1.select1.selectedIndex].value)".

Gör ett "kalkylark" med

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.

Pris 1:
Pris 2:
Pris 3:

Summa: