DESIGN
SLUTET !

HTML-kurs för Lärarförbundets Uppsalaavdelning, första gången

Vi började att göra en mycket enkel hemsida genom att först starta det lilla Windowsprogrammet
Anteckningar: STARTKNAPPEN / PROGRAM / TILLBEHÖR / ANTECKNINGAR

Vi skrev in grundkoden för en hemsida:

<HTML>
<HEAD>
<TITLE>
Hemsidans titel
</TITLE>
</HEAD>
<BODY>

Välkommen till min hemsida!

</BODY>
</HTML>

Nästa steg var att vi skulle spara den här filen. Vi klickade på ARKIV -menyn och valde SPARA SOM.

Vi kom till en dialogruta SPARA SOM.

Jag sa att hemsidan skulle heta index, om vi bara hade skrivit index och sedan valt den mapp som den skulle ligga i och slutligen klickat på SPARA, så hade filen sedan hetat index.txt. Varje program, Word, Excel o.s.v. lägger till sitt eget filtillägg och Anteckningar lägger till .txt . Därför skrev vi in namnet index plus filtillägget .html, alltså vi skrev index.html . Startsidan på en webbplats bör alltid heta index.html eller index.htm.

Sedan skulle vi titta på vår första hemsida genom att starta Utforskaren, jag lärde ut ett kortkommando för att starta Utforskaren; WINDOWS-knappen + E vilket betyder tryck och håll ned WINDOWS-knappen (den finns mellan CTRL och ALT längst ned till vänster på tangentbordet) och tryck sedan (mycket kort) på tangenten för bokstaven E (vilket står för det engelska namnet på Utforskaren = Explorer).

Vi klickade oss fram till rätt mapp och slutligen såg vi vår fil index.html med ikonen för webbläsarprogrammet Microsoft Internet Explorer . Vi dubbelklickade på filen och den öppnades i webbläsaren. [ -->Kolla exempel 1! ] Om vi sedan klickade upp Anteckningar från Aktivitetsfältet (eller använde ALT + TABB för att växla mellan programmen), så kunde det se ut så här:

 

Så kan det se ut när man arbetar med sin hemsida; webbläsarprogrammet öppet och maximerat och kodningen ( Anteckningar) också öppet och icke maximerat. Man gör sina ändringar i kodningen, trycker följande tangenter på tangentbordet för att spara:

ALT (och släpp) och A (och släpp) och S (och släpp). Sedan klickar man på Uppdatera-knappen i webbläsaren (som ligger bakom). Alltså gör ändringen i Anteckningar och spar och sedan uppdaterar i webbläsaren!

Sedan pratade jag litet mer om vad de olika taggarna (tags på engelska och i vissa kursböcker kallas dom för märken ) betyder. Varje tagg ska omslutas av < och >, exempelvis första taggen <HTML> och de flesta taggar ska avslutas, exempelvis taggen för fet stil, du ser ett exempel här:

<B> dessa ord kommer att bli i fet stil </B>.

Som du kanske kommer ihåg är det snedstrecket som visar att taggen avslutas. Skulle du i exemplet här ovan glömma att avsluta taggen för fet stil, så kommer all text efter <B> att bli i fet stil, så det lär du snart märka!

De taggar som jag pratade om var följande:

För det första de fyra taggarna, som alltid måste finnas på en hemsida:

<HTML>

Start av hemsida.

<HEAD>

Start av sidans huvud.

<TITLE>

Start av sidans titel.

<BODY>

Start av sidans innehåll (kropp).

och

<H1>

Största rubriktaggen, lägger dessutom på fet stil och gör styckebrytning efter. Sex storlekar, <H1> den största och <H6> den minsta.
[ -->Kolla exempel 2 med H1-taggen ]

<CENTER>

Centrerar allt, både bild och text, ända tills taggen avslutas </CENTER>

<B>

Fet stil.

<I>

Kursiv stil.

<U>

Understruken stil.

<BR>

Radbrytning, ska ej avslutas.

<P>

Nytt stycke, radbrytning och tom rad. Behöver ej, men kan avslutas.

<IMG>

Taggen för att infoga en bild med attributet SRC följt av bildens namn och sökväg.

 

Exempel på att lägga in en bild: <IMG SRC="bilder/kitty.jpg">

   

Om man inte vill använda ALT + TABB för att växla mellan program, i det här fallet att växla mellan webbläsaren (Explorer ) och programmet Anteckningar, så får man klicka på respektive knapp på aktivitetsfältet och då gäller det att lära sig känna igen ikonerna för respektive program, här nedan kommer ikonerna för Anteckningar och Explorer:

Ikonen för webbläsaren Explorer

Ikonen för Anteckningar


Nytt andra träffen [2001-10-08]:
  • Några ord om utseende och layout. Vi kollar några sidor.
  • Färger på text och på hemsidans bakgrund. (Vi pratade en del om färger förra gången)
  • Bakgrundsbilder
  • Listor
  • Länkar; både text och bild som en länk.
  • Tabeller

Om vi börjar andra träffen med att bygga på vår sida genom att centrera rubriken med en tagg som ser ut så här: <CENTER> och den ska naturligtvis avslutas när du inte vill att text eller bild ska centreras längre! [ -->Kolla exempel 3 ]

Vi fortsätter vår hemsida genom att lägga på en bakgrundsfärg och en färg på rubriktexten och vi kan skriva litet mer text på sidan. Det går att skriva det engelska namnet på en del färger; [ -->Kolla färgkarta ]

Det bästa, tycker jag är ett litet färgprogram, som heter htcl.exe och det är ett freeware-program, alltså gratis! [--> Kan hämtas här! ]

Det bästa är att använda den hexadecimala färgkoden, som det lilla programmet htcl.exe skapar.
Om vi nu fortsätter med vår sida, vi lägger på en blå bakgrundsfärg med färgkoden #004080 och en gul text med färgkoden #FFFFC9, så kan du kolla [ -->Kolla exempel 4 ], här kommer koden för den sidan:

<HTML>
<HEAD>
<TITLE>
Hemsidans titel
</TITLE>
</HEAD>
<BODY BGCOLOR="#004080">

<CENTER>

<H1><FONT COLOR="#ffffc9">
Välkommen till min hemsida!
</H1></FONT>

</CENTER>

<FONT COLOR="#ffffc9">
Jag heter Rolf och arbetar som datautbildare och tycker om att göra hemsidor, därför att det är ett kreativt skapande, eller åtminstone så kan det vara det!

</FONT>

<HR>

</BODY> </HTML>

KOMMENTARER
Om vi tittar på koden, hur jag har fått dit färgerna. Bakgrundsfärgen på sidan läggs in som ett attribut i BODY-taggen:
<BODY BGCOLOR="#004080">

BGCOLOR står för backgroundcolor. Ska och kan inte avslutas.

Den gula färgen på texten lägger man som ett attribut i FONT-taggen, så här:
<FONT COLOR="#ffffc9">

Ska avslutas när man vill byta färg, storlek eller typsnitt. Avslutas enbart med </FONT>.

Linjen under texten är taggen <HR>.

Kom ihåg att kolla länken ovan för att se resultatet: kolla exempel 4!

Men framförallt: PROVA SJÄLV!


(TIPS: Om du vill se koden för en sida, kan du högerklicka på sidan och välja Visa källa i snabbmenyn!)

Innan vi går över och pratar om listor ska jag berätta hur du lägger in en bakgrundsbild på din hemsida. Vi tar samma sida som nyss med blå bakgrund och gul text och lägger in en bakgrundsbild och låter bakgrundsfärgen ligga kvar. När man kollar hemsidan lokalt hinner man inte se bakgrundsfärgen, men när man lagt upp sin hemsida på en server, så hinner man nog se bakgrundsfärgen först innan bakgrundsbilden laddas in i webbläsaren. Koden för bakgrundsbilden läggs in i BODY-taggen.
Så här: <BODY BGCOLOR="#004080" BACKGROUND="bg1.jpg">
Bakgrundsbilden heter i detta fall bg1.jpg. [ -->Kolla exempel 5 ]
Du ser direkt att färgen på texten är för ljus, så då ändrar vi färgen till mörkgrön: <FONT COLOR="#004040">. [ -->Kolla exempel 6 ]

PUNKTLISTOR OCH NUMRERADE LISTOR
Titta först på exemplet. [ -->Kolla exempel 7 ] Titta sedan på kodningen och kommentarerna här nedan!

<HTML><HEAD><TITLE>PUNKTLISTOR OCH NUMRERADE LISTOR</TITLE></HEAD>

<BODY BGCOLOR="#ffff80">

<H2>
Exempel på två listor
</H2>

<UL>
<LI>3 kg potatis
<LI>4 l mjölk
<LI>1 kg kaffe
<LI>1 bit ost
</UL>

<OL>
<LI>Färger
<LI>Bilder
<LI>Listor
<LI>Länkar
</OL>

</BODY></HTML>

KOMMENTARER
För det första har jag lagt in en gul färgkod som bakgrundsfärg på sidan. Sedan har jag lagt in taggen <H2> i stället för <H1>, <H2> är den näst största rubriktaggen.

Starttaggen för en punktlista är <UL> och det betyder unorded list. <UL> ska avslutas när listan är klar. <LI> är taggen för själva punkten och behöver inte avslutas (enligt HTML-gurun Annica Tiger)!

Starttaggen för en numrerad lista är <OL> och det betyder orded list och den ska precis som <UL> också avslutas när listan är klar!

Kolla också det som står mellan <TITLE> och </TITLE>, d. v. s. PUNKTLISTOR OCH NUMRERADE LISTOR. Var syns det på själva hemsidan? Ja, inte någonstans på hemsidan, men på namnlisten i webbläsarfönstret.

Ja, det här räcker när det gäller punktlistor och numrerade listor.

LÄNKAR (BILD ELLER TEXT)
Nu först kommer vi till något, som verkligen är det som kännetecknar Internet: Hypertext eller hypermedia. Alltså länkar, antingen i form av en text, som är klickbar eller í form av en bild, som är klickbar. Det enda som idag säkert kännetecknar en länk, är att när du för muspekaren dit så ändrar den utseende från en muspil till en hand, och då kan du klicka en gång med vänster musknapp och så bär det iväg till en annan hemsida någonstans i världen eller på samma server!

Koden för att lägga in en länk ser du här:
<A HREF="http://dn.se">DAGENS NYHETER</A>
A betyder anchor (ankare) och HREF betyder hyper reference. Taggen är A och HREF är attributet. Avslutas med enbart </A>. Det som står mellan koderna, i det här fallet Dagens Nyheter, blir den klickbara textlänken!

För att få en bild klickbar, så lägger du in koden för bilden i stället för orden Dagens Nyheter! Exempel: <A HREF="http://dn.se"><IMG SRC="bild.jpg"></A>
För att slippa få en blå ram runt bilden kan man lägga in BORDER="0", se exempel:
<A HREF="http://dn.se"><IMG SRC="bild.jpg" BORDER="0"></A>

Kolla exemplet här nedan och titta på koden, antingen i vita rutan här nedan, eller genom att ta fram koden själv, genom att högerklicka och välja Visa källa!

[ -->Kolla exempel 8 ]

<HTML><HEAD><TITLE>LÄNKAR</TITLE></HEAD>
<BODY BGCOLOR="#ffff80">

<CENTER>
<H2>
Olika länkar
</H2>

Den här länken går till <A HREF="http://dn.se">Dagens Nyheter</A><P>

<A HREF="http://www.motorcities.com/"><IMG SRC="rollsroyce.jpg" BORDER="0" ALT="Det här är en Rolls Royce Phantom II, årsmodell 1934! Om du klickar här kommer du till en fantastisk sida med foton på både gamla och nya bilar! Hur mycket som helst!"><P>

<A HREF="green.html">Bakgrundssida</A>
</CENTER>
</BODY></HTML>

KOMMENTARER
Bakgrundsfärgen är gul igen.
Den första textlänken går till Dagens Nyheter och här, när man anger vad länken ska leda, måste man ange hela URL:en, alltså hela webbadressen, även http://

I nästa länk, som är en bild, skulle det ha blivit en blå ram om jag inte hade skrivit dit BORDER="0" ! Attributet ALT, där kan man skriva informativ text om vart länken leder eller om bilden.

Den sista länken, texten där det står bakgrundssida, innehåller inte en hel webbadress, utan det står bara att länken leder till green.html. Det beror på att det är enhemsida, som ligger i samma mapp på samma server.

TABELLER
Det bästa sättet att hålla ordning på sin text eller sina bilder är att lägga in dom i en tabell. Kodningen är enkel, om man inte fördjupar sig för mycket. Det är mycket att koda om det är långa tabeller, men då har man stor nytta av att kunna markera, kopiera och klistra in.

[ -->Kolla exempel 9 ]

Kolla också nästa exempel för att lära mer om tabeller! [ -->Kolla exempel 10 ]


En länk till en hemsida som visar hur man för över sina hemsidor till en webbserver med ett FTP-program. Läs och lär! Om du inte har något FTP-program, välj att ladda ned programmet som är gratis! Du kan ladda ned det här: WS FTP_LE
Här kan du läsa några ord om design och layout, som jag pratade om på träff 3: Läs här!

Vad skulle jag göra till nästa gång?

En repetition av vad du ska göra till nästa gång (det kallas visst läxa!):

Här nedan ser du tre länkar (i den blå tabellen längre ned) och det är inga länkar till några hemsidor, utan länkarna leder till tre st bildfiler. Du ska inte klicka med vänster musknapp, som du brukar göra när det är en länk, utan för att spara dem ska du klicka med höger musknapp (i tur och ordning) på en av dom och välja Spara mål som... i snabbmenyn, som dyker upp.

Den första är en bakgrundsbild, som heter bak1.gif (grön vit grön) och den andra är också en bakgrundsbild, som heter bak3.gif (gulgrön gul gulgrön). Den tredje bilden är ett inskannat foto på spelmannen Funk-Olle från Rättvik, den filen heter funkolle_150.tif, 150 står för att den är inskannad med inställningen 150 dpi (dot per inch), eller ppt (punkter per tum). Den filen är störst, c:a 1 MB medans bakgrundsbilderna bara är på knappt 1 KB!

Meningen var att du skulle göra en hemsida med en av bakgrundsbilderna och infoga en tabell som i och med vänstra kolumnen tvingar in texten på det mittersta fältet.

Här nedan kommer det text om Funk-Olle som du kan kopiera in på din sida! Du kan också infoga bilden på Funk-Olle, men först ska du minska den till halva storleken (och det gör du med ett bildbehandlingsprogram; Paint Shop Pro eller Irfan View), d. v. s. nu är den 435 pixlar hög och 754 pixlar bred och den ska alltså bli 377 pixlar hög och 217 pixlar bred.

Det som var viktigt med tabellen, det var att ha ett fast pixelmått på hela tabellen, jag tror vi valde 600 pixlar (annars är det bara bra om du provar dig fram!). Sedan ska du också ha ett fast pixelmått på den vänstra cellen och det tror jag var c:a 70 pixlar, men sedan var det viktigt att ta bort procentmåttet för den högra cellen! Den högra cellen ska alltså inte ha något mått alls, utan den cellen (eller kolumnen) tar den plats som blir kvar!

Den förminskade bilden på Funk-Olle!

Texten är hämtad på hemsidan med adressen: http://www10.aname.net/~rattviks/2fsdata/funkolle2000.html

Född i Fix gården Västgärde utanför Rättvik 1910-11-14. Han lärde sig spela fiol av far sin. Den äldsta spelmannen vi har som är aktiv i laget. Syns alltid på spelmansstämmorna och är den som oftast håller ut längst. Blev Riksspelman 1950 i Leksand. Beundransvärt är att han kan spela efter en olycka i handen, som gjort att han endast spelar med tre fingrar.

Resultatet kan bli så här:

Hämta bakgrunder och tif-bild

bakgrund 1
bakgrund 2

tif-bild

UPP
 
Sista gången!


© Rolf Malmquist
e-post: rolf@itpedagogen.nu
webbplats: itpedagogen.nu