Ekstraopgaver til Løbeseddel 1: HTML, Web-services og simpel TCL

af Niels Hallenberg

sidst rettet 27. august, 2001

Du kan installere en Tcl fortolker på din hjemme PC, og dermed lave alle opgaver nedenfor hjemme.

Der udleveres ikke vejledende løsninger til disse opgaver, men du kan rådføre dig hos din hjælpelærer, hvis du er i tvivl om hvorledes nogle af opgaverne løses.

PS: Du kan også finde løsningerne til nogle af HTML opgaverne i dette dokument:-)

Generel Side Layout

1. Prøv at lave en HTML-skabelon til dine HTML sider. Den bør være opdelt i en top, en krop og en bund. Bundsektionen kan for eksempel anvende <address> til at angive navn og email på den der vedligeholder siden.
2. Prøv at indsætte nogle

   overskrifter

   af

   forskellig

   størrelse

   i din skabelon.
3. Indsæt en skillelinie,

   ---

   en tekst og derefter en ny skillelinie.

   ---

4. Indsæt et afsnit,

   noget tekst, en ny linie.
   Derefter noget mere tekst, f.eks. en

   quote.

5. Kan du centrere tekst?
6. Kan du lave fed, kursiv, understregning og kombinere dem.

Ordnede og Uordnede Lister

1. med 1
2. 2
3. og tre elementer

• med en linie
• og en mere.

• denne pind indeholder en indlejret ordnet liste.
  1. et element
  2. et element mere
• og nu på yderste niveau igen

Hyperlinks

1. Kan du linke til afsnittet med ordnede og uordnede lister ovenfor. Dette kræver bl.a. at du kan lave et bogmærke.
2. Kan du linke til en ekstern side som f.eks. IT-C's hjemmeside.
3. Kan du lave et mail-link.

Tabeller

Det er normalt, at anvende tabeller til at formattere en HTML side, så hvis du behersker de mange variationsmuligheder, så har du større mulighed for at variere dit design, og stadig holde dig indenfor robust HTML kode, dvs HTML kode som kan vises af selv de ældste browsere.

1. Lav en simpel tabel med to kolonner og to rækker. Den første række skal være kolonneoverskrifter, dvs. <th> skal anvendes.

   Overskrift 1	Overskrift 2
   Data	Data

2. Til mærket <table> kan du f.eks. anvende forskellige attributter som angiver formattering på hele tabellen: Du kan f.eks. anvende <align>, <bgcolor>,<border>,<cellpadding>, <cellspacing> og <width>.

   Lav ovenstående tabel uden nogen mellemrum mellem cellerne:

   Overskrift 1	Overskrift 2
   Data	Data

3. Ret ovenstående tabel, så den ligner denne table:

   Overskrift 1	Overskrift 2
   Data	Data

4. Mærket <tr> indleder en ny tabelrække, og her kan du bl.a. anvende følgende attributter: <align>, <bgcolor>,<valign>. Lav en tabel med rækkerne i forskellige farver:

   Overskrift 1	Overskrift 2
   Data	Data

5. Til <th> og <td> mærkerne kan man bl.a. anvende følgende attributter: <align>,<bgcolor>, <colspan>, <height>, <nowrap>, <rowspan>, <valign>, <width> Lav en tabel hvor de enkelte cellers placering er til højre, center og venstre:

   Overskrift 1	Ov 2
   Data	Meget Data

6. Lav en tabel med en meget bred og høj række, der kun har et felt:

   Overskrift 1	Ov 2
   Data

7. Lav noget der ligner et login-billede. Du bliver nok nødt til at anvende en form som kalder et script som ikke findes. Hvis du ikke ved hvad en form er, dvs <form method=post action=...>, da spørg din hjælpelærer:

   Cool Navn Login navn Løsen

8. Lav en tabel, hvor der er rammer om alle celler, inklusive tomme celler. Denne løsning er forkert:

   Overskrift 1	Overskrift 2
   	Data

   og denne løsning er korrekt:

   Overskrift 1	Overskrift 2
   	Data

   Hint: anvend  

   Billeder

   Du kan indsætte billeder med mærket <img>, og skalere det til forskellige størrelser med attributterne height, width, give billedet en tekststreng med alt, angive placering med align, angive ramme omkring billedet med border, og angive afstand til ombrydende tekst med hspace og vspace. Kan du lave følgende:

   Farver

   Når du anvender farver, så er det normalt bekvemt at henvise til dem med navne. Her følger en tabel med de mest anvendte farver:

   	Black		Green		Silver		Lime		Gray		Olive
   	White		Yellow		Maroon		Navy		Red		Blue
   	Purple		Teal		Fuchsia		Aqua

   Hvis du udskriver denne side vil du kunne se, at ikke alle farver vises pænt på en ikke farve udskrift. Dette bør man overveje ved valg af farver.

   Du kan også vælge at gå helt amok i farver, se. f.eks. Per's farvekort. Her angives farver med et hexadecimalt tal i stedet for et navn, f.eks. #CCFF99. Tallet har formen #RRGGBB, hvor RR angiver intensiteten af rød, GG angiver intensiteten af grøn og BB intensiteten af blå.

   Specialtegn

   Nogle specialtegn skal skrives med specielle koder. Normalt behøver man ikke at kode de danske tegn æ,ø,å,Æ,Ø og Å specielt. Men tegnet

   < skal skrives <
   > skal skrives > og
   & skal skrives &.

   Nogle Simple Tcl Programmer

   1. Gem følgende program i en fil name.tcl og kør det i Tcl-fortolkeren.

        set firstname Martin
        set lastname Elsman
        set age 30
        set email mael@itu.dk
        puts "My name is $firstname $lastname and my email address is $email."
      

   2. Gem følgende program i en fil loop.tcl og kør det i Tcl-fortolkeren.

      proc mul_tab {n} {
        puts "<html><body><table>";
        puts "<tr><th>n</th><th>n*3</th><th>n*n</th></tr>";
        for {set i 0} {$i<$n} {incr i} {
              puts "<tr><td>$i</td><td>[expr $i * 3]</td>
                    <td>[expr $i * $i]</td></tr>"
        }
        puts "</table></body></html>"
      }
      

      Programmet giver som uddata HTML kode med en tabel. Du kan kopiere HTML koden til en fil, f.eks. loop.html og derefter vise HTML koden i en browser.

   ---

   nh@it.edu
   
   
   

   ---

   Readers' Comments (if you don't see anything below, try clicking here)