Laboration med Internet och HTML

Storlek: px

Starta visningen från sidan:

Download "Laboration med Internet och HTML"

Siv Sofia Göransson
för 8 år sedan
Visningar:

1 Laboration med Internet och HTML Denna laboration går ut på att du skall kunna skapa enkla hemsidor i HTML. Vi kommer inte att ta upp edstorer för hemsidor som t.ex. DreamWeaver eller FrontPage. Dessa verktyg (eller något av dem) finns dock på institutionens datorer så att du kan prova dig fram själv. Hör i så fall med läraren mot slutet av laborationen så kan vi se till att du kommer igång. Syftet med denna (och den tidigare laborationen) är att du skall kunna använda PC:n och nätet som ett arbetsverktyg för dina fortsatta studier. Du skall efter denna laboration t.ex. kunna använda PC:n för att skriva ett PM, söka information för PM:en på nätet, och publicera PMet på din egen hemsida. Under de följande övningarna kan du gärna ha en sida med en bra tutorial som finns på öppen i Internet Explorer. Då kan du enkelt gå dit och titta på hur HTML-koden skall skrivas. Om du vill kan du följa den tutoralen istället för att fortsätta med det här dokumentet. Här har jag försökt att göra en ganska enkel experimentera dig fram anvisning. Oavsett vilket du väljer så skall du experimentera dig fram genom HTML. Ju mer du testar, ju mer förstår du utav hur det fungerar, och ju enklare blir det också att fortsätta lära sig hemsideredigering. Nu skall vi börja med att skriva lite html-kod. Tyvärr är det lite bökigt att skapa htmldokument utan att använda en html-editor i Windows. Eftersom tanken är att ni skall få praktisera html-skrivande så kommer vi att gå en liten enkel genväg för att skapa ett nytt html-dokument. För detta kommer vi att använda Microsoft Word. 1. Starta Microsoft Word och skapa ett nytt, tomt dokument. 2. Om du vill skriva in lite text, kan du naturligtvis göra det, men risken är att Word fixar till html-koden, så det enklaste är att du inte skriver något i det nya dokumentet. 3. Välj Spara som HTML från Arkiv-menyn. 4. Lägg dokumentet med passande namn i din dokumentarea. 5. Starta programmet WordPad från Tillbehörsmenyn under Start -knappen. 6. Öppna det dokument du sparade i html-form med Word men nu i Word-pad 7. Du har nu ett tomt HTML-dokument framför dig. Även när dokumentet är tomt innehåller det en hel del saker som Word har lagt in. Bland annat finns det t.ex. några <META> </META> märken. Dessa innehåller information on vem som skapat dokumentet, vilket program som användes m.m.

Syftet med denna (och den tidigare laborationen) är att du skall kunna använda PC:n och nätet som ett arbetsverktyg för dina fortsatta studier. Du skall efter denna laboration t.ex.

2 Du kan nu sudda allt mellan <HTML> </HTML> märkena. Nu är du färdig att börja skriva HTML-kod. Nu har du ett tomt HTML-dokument som du kan använda för att testa lite HTMLkodning. All kod skall hamna mellan <HTML> </HTML> Delmoment 1. Mitt första HTML-dokument Nu skall du skriva ett första HTML-dokument. Tanken är att det skall ha en titel, som du anger. Titeln finns i huvudet. Alltså måste du först definiera de två delarna huvud och kropp. <HTML> <HEAD> </HEAD> <BODY> </BODY> <HTML> Nu har du ett helt korrekt, (om än ganska tråkigt) HTML-dokument. (Indenteringen är inte viktig, men gör det enklare att läsa). Spara det. Öppna sedan Internet Explorer och välj Öppna från Arkiv menyn. Välj din sparade fil och betrakta resultatet. Nu placerar du in titeln i huvudet. <TITLE>Mitt första dokument.</title> Spara igen och öppna dokumentet på nytt i Explorer. (Du gör det enklast genom att klicka på knappen Uppdatera som syns på verktygsfältet. Fortfarande rätt tråkigt. Men nu skall vi ta i lite grand. Vi skall lägga in lite text. I kroppen skriver du nu in en rubrik (<H1> </H1> och lite text. Varje stycke text skall omges av <p> </p>. Prova att lägga in några rubriker på olika nivåer <H2> - <H5> t.ex. Kom bara ihåg att varje rubrik omges av ett par märken. Titta lite då och då på dokumentet i Internet Explorer Om du vill ha lite enkel grafik kan du lägga in en horisontell linje enkelt. Du skriver bara in <HR> där du vill ha den placerad. Nu är det klart! Fint va? Delmoment 2 Strukturer Nu vill man kanske ha lite annat än text och rubriker. T.ex. vill man kanske ha listor. Med punkter eller nummer. Då fixar vi det. Ta ditt gamla dokument. Låt texten vara kvar. Nu skall vi definiera en lista. Det finns några färdiga listformat osorterade och sorterade listor. De förra markeras med punkter ( ), de senare med numrering.

Alltså måste du först definiera de två delarna huvud och kropp. <HTML> <HEAD> </HEAD> <BODY> </BODY> <HTML> Nu har du ett helt korrekt, (om än ganska tråkigt) HTML-dokument.

3 Varje lista är en enhet som omges av märken: osorterad lista <UL> </UL> sorterad lista <OL> </OL> Innanför listmärkena så anger man varje listelement med ett eget märke <LI> </LI>. Så en enkel osorterad lista skulle alltså se ut som: <UL> <LI> lite text </LI> <LI> mera text </LI> <LI> och så vidare </LI> </UL> Skriv in en liten lista och se hur den ändras om man gör den sorterad. Kanske vi skall ha en liten tabell? En tabell definieras genom märkena <TABLE> </TABLE>. Inuti tabellen markeras sedan varje rad med märkena <TR> </TR>. och på varje rad blir tabellcellen markerad med <TD> </TD>. I första raden kan man även markera att man vill ha tabellrubriker med märkena <TH> </TH>. En enkel tabell skulle kunna se ut så här: <table border="0" cellpadding="0" cellspacing="0" width="90%"> </table> Som du ser står det lite saker före > i <TABLE>. Det är saker som modifierar hur tabellen skall se ut. Prova hur du kan ändra de olika värdena innanför -tecknen. Se hur det påverkar din hemsidas utseende.

sorterad. Kanske vi skall ha en liten tabell? En tabell definieras genom märkena <TABLE> </TABLE>. Inuti tabellen markeras sedan varje rad med märkena <TR> </TR>.

4 Delmoment 3 Länkar Den viktigaste delen av HTML är nog länkhanteringen. Genom att länka ihop dokument bygger man enkelt sin egen hemsida som ett litet nätverk. När man skriver HTML direkt är det lite krångligare, men har man ett webbredigeringsprogram är det mycket lättare. Vi skall ta och ordna en länkad fil till att börja med. En länk är egentligen bara ett märke som anger en adress som en viss del av dokumentet skall kopplas till. Adressen är en URL, och märket är <A> </A> med lite modifierare som i tabellen ovan. Antag att du vill koppla en länk till institutionens hemsida. Då skriver du helt enkelt (!) in följande delar: Märke med modifierare, texten som skall ha länken kopplad, och slutmärke. <A HREF = > Institutionens hemsida </A> Prova!!! Nu skall du skapa ett nytt dokument på samma sätt som du skapade ditt första dokument i Word, fast med ett nytt namn. Skriv sedan in lite HTML-kod i det så att du har två HTML-dokument i samma katalog. Antag att det första heter ettan.htm och det andra tvaan.htm. Då kan du i ettan.htm skriva in följande lilla snutt: <A HREF = tvaan.htm > Institutionens hemsida </A> Observera att om man bara anger ett filnamn så tittar Internet Explorer i samma mapp som det första dokumentet ligger i. Man behöver alltså inte ange hela URL:en utan bara filen. Om du vill att någon skall kunna skicka brev till dig med en klickning byter du ut URL:en mot en adresslänk: <A HREF = mailto:min.adress@dis.uu.se > maila mig! </A> Delmoment 5 Slut När du har kommit hit har du en grund i att skapa HTML-dokument. Med hjälp av program som OpenOfficeWeb, DreamWeaver eller FrontPage kan du nu fortsätta och göra mer avancerade sidor. Men jag rekommenderar ändå att du går igenom tutorialen som finns på adressen ovan, för att du skall förstå hur det fungerar och även kunna finjustera sidorna lite bättre. Dreamweaver skall finnas installerad på några av institutionens datorer. Principen är ganska lik en vanlig ordbehandlare, och man kan ganska enkelt experimentera sig fram.

En länk är egentligen bara ett märke som anger en adress som en viss del av dokumentet skall kopplas till. Adressen är en URL, och märket är <A> </A> med lite modifierare som i tabellen ovan.

5 Inlämning: Som inlänmningsuppgift skall du skicka in en liten hemsida. Den skall presentera dig och vem du är med lite färger, en tabell, en bild och någon av de olika formerna av listor. Du får göra layouten precis som du vill men det skall se ut som en seriös hemsida. Eftersom det kan vara svårt att lägga in en bild på dig själv, så får du använda en annan bild, kanske någon fri bild från nätet (utan copyright). I slutändan skall du kunna lägga upp det som din hemsida på din egen area (under public_html). Då kanske du kan lägga in en bild på dig själv som du skannat in i Maclabbet efter labben på Mac OS X.

Du får göra layouten precis som du vill men det skall se ut som en seriös hemsida.

Relevanta dokument

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll FrontPage Express I programpaketet Internet Explorer 4.0 och 5.0 ingår också FrontPage Express som installeras vid en fullständig installation. Det är ett program som man kan använda för att skapa egna