Datorer och programmering TDB1
Föreläsningar

Föreläsningsanteckningar TDB1:
OM HTML

Syfte: Att lära sig grunderna i HTML.

Välkommen!
Vissa delar av HTML behandlas ej här - exempelvis formulär ("forms"), "style-sheets" och "image-maps". Fullständiga tag- och argumentlistor finns ej heller.
Den kunskapshungrige läsaren uppmanas därför att komplettera detta dokument med information på Nätet eller en bok i HTML. Se även referenserna i slutet av dokumentet.

Inledning

HTML (HyperText Markup Language) är ett språk som används för att skriva dokument som ska visas på WWW (det finns andra, men HTML är det mest utbredda, och en global standard).

Upphovsmannen till WWW och HTML är Tim Berners-Lee, som då arbetade i CERN - hans ursprungsidé var att utbyta information med forskargrupper etc. i ett nätverk.

HTML-dokument

HTML-dokument är inget annat än vanliga textfiler som kan skapas med vilka texteditorer som helst. De utmärks av ändelsen ".html" eller ".htm".

HTML använder sk tags, som vi något svengelskt kommer att kalla "taggar" i fortsättningen, för att ge information till webläsare om hur dokument ska se ut.

En tag är ett kommando omgivet av < >-klamrar. Taggar kan ha argument, som står innanför klamrarna, samt en avslutande tag (se exemplen nedan). Om argumentet antar ett värde som bestå av mer än ett ord eller ett tal måste värdet omslutas av citationstecken - dock är det en god vana att alltid använda citationstecken.

Principen för HTML är att taggarna gör saker med dokumentet - det kan röra sig om textformatering, radbrytning, infogande av bilder, mm mm. Webläsaren vet hur varje tag ska tolkas.

Exempel: taggar

Enkel tag
<TAG>

Tag med argument
<TAG ARGUMENT1="värde 1" ARGUMENT2="värde 2" ARGUMENTn="värde n">

Tag med sluttag
<TAG> text som taggen påverkar </TAG>

Tag med sluttag och argument
<TAG ARGUMENT1="värde 1" ARGUMENT2="värde 2" ARGUMENTn="värde n"> text som taggen påverkar </TAG>

En lista av taggar, kanske inte ej så ofullständig, finns här.

Det finns rekommendationer om hur HTML-dokument "bör" se ut och vad god HTML är - det är ganska naturligt om man beaktar hur många aktörer som är inblandade. Dock, av samma skäl, är webläsarna snälla - HTML-koden kan se ut lite hur som helst.

Fler än ett blanktecken ignoreras, och likaså returtecken. Om ett kommando råkar vara felaktigt så hoppas det över. Om ett argument är felaktigt så ignoreras just det argumentet. Vidare hoppas allt inom <!- --> över - det är så man skriver kommentarer till koden.

Ett exempel på god HTML är indentering av koden samt VERSALER i taggarna och ARGUMENTEN. Det är givetvis för att det anses ge ökad läsbarhet.

Ett HTML-dokument delas traditionellt in i huvud (head) och kropp (body).

Huvudet kan innehålla <TITLE>-taggen, som innesluter dokumentets titel (denna visas längst upp i listen hos de flesta webläsare), samt diverse information om dokumentet som ej har med utseendet att göra.

Kroppen innehåller grovt sagt allt som har med dokumentets utseende att göra, och är nästan alltid den större delen. I själva verket kommer nästan alla taggar som vi beskriver i det här dokumentet vara BODY-taggar.

Ett HTML-dokument ska enligt rekommendation ha den här formen:

<HTML> <HEAD> <!- diverse HEAD-taggar och vanlig text --> </HEAD> <BODY> <!- diverse BODY-taggar och vanlig text --> </BODY> </HTML>

Observera att det är en rekommendation. Följ den, dock, om du vill vara så kompatibel som möjligt, vilket är en human inställning (det kan även vara tecken på affärssinne).

Om HTML-editorer

För den som inte gillar eller har tid att skriva HTML manuellt, tag för tag, finns det program som underlättar skapandet.
Dessa sk HTML-editorer finns i många utföranden. Det finns editorer som helt döljer koden för användaren, och de som är till för snabbare och smidigare tag-skrivande.
Vissa editorer av den förstnända typen producerar "ful" kod, så för de som retar sig på sådant, vilket seriösa användare förmodligen gör, duger endast den senare typen.

<BODY>-taggen

Argument till den här taggen tillåter en att ange färg på texten (som dock kan ändras explicit med tex. <FONT>), bakgrunden, samt länkar. Man kan även ange en bakgrundsbild.

Argumenten är i nämnd ordning: text, bgcolor, link, alink (active link; den färg en länk antar precis när den aktiveras, dvs tex. klickas på), vlink (visited link; en länk man redan besökt), samt background.

Alla ovanstående argument tar en färg (se mer om färger nedan), utom background, som tar en adress till en bild.

Exempel: BODY

Nedanstående kod ger ett dokument med svart bakgrund, gul text och gul hypertext (se avsnittet om länkar). Hypertexten kommer att vara vit då den klickas på. Besökta länkar kommer att visas i grå färg.

<BODY BGCOLOR="black" TEXT="yellow" ALINK="white" LINK="yellow" VLINK="grey">

Man kan även specificera storleken, med <BASEFONT SIZE="storlek">, där storlek kan vara absolut, tex. 5, eller relativ, tex. +2.

Rubriker

HTML har 6 olika nivåer på rubriker, där nummer 1 är störst/har högst nivå. Dessa är <H1></H1>, ... , <H6></H6>.
Samtliga tar argumentet ALIGN, som anger rubrikens justering. Det kan anta något av "left", "center" och "right".
(För att centrera saker i allmänhet, även rubriker, kan man använda en omslutande <CENTER>).

Exempel: rubriker

Kod:

<H1>Rubrik 1</H1> <H3 ALIGN="center">Rubrik 3</H3> <H6 ALIGN="right">Rubrik 6</H6> Vanlig text

Resultat:

Rubrik 1

Rubrik 3

Rubrik 6

Vanlig text

Blanktecken och speciella tecken

HTML ignorerar som sagt mer än ett blanktecken i rad, samt returtecken.
För att verkligen formatera texten med blank- och returtecken måste man använda antingen taggar eller speciella HTML-symboler.

Vill man skriva mer än ett blanktecken i rad kan man använda   (non-blank space).

Allmänt kan man skriva många speciella tecken med hjälp av &-notation.
Om vi t.ex. vill att alla användare ska kunna se å, ä, ö korrekt bör vi använda respektive å, ä, samt ö. (Å, Ä, Ö ges av respektive & Aring;, Ä, samt Ö).

För ytterligare några speciella tecken, se http://www.tdb.uu.se/~tdb1/privat/forant/html/taggar.html#SP.

Stycken och radbrytning

I en löpande text är det naturligt med olika stycken.
I HTML är taggen <P> (som i paragraph) avsedd för detta ändamål - den skjuter in ett par blankrader före sig. Man får använda slut-tag (</P>), men det är ej nödvändigt.

Raderna bryts implicit när det behövs, precis som i ordbehandlare, men man kan även bryta raden explicit med <BR> (break).

<HR> (horizontal ruler) stoppar in en avgränsande linje, liknande linjerna runt exemplen i detta dokument (som för övrigt är skrivet i HTML).

Teckenformatering

HTML tillåter en att specificera färg, storlek och typsnitt för all text i dokumentet.

Vi har sett hur man kan specificera färgen och fontstorleken på en standardtext med hjälp av <BODY>.

Vidare kan man använda <FONT>-taggen runt valfri text. <FONT> har naturligtvis högre prioritet än standardtexten.

Här ser Ni olika fontstorlekar: 1 2 3 4 5 6 7

Om färger

Färger används som sagt lite här och var i HTML.
För att representera färger använder HTML speciella sexsiffriga hexadecimala koder, sk RGB-koder (RedGreenBlue).
Koderna har formen #r₁r₂g₁g₂b₁b₂, där det första sifferparet anger graden rött osv. Ju lägre siffra, desto mörkare - svart är "#000000".
På det här sättet kan man alltså skilja på 16⁶ = 16.7 miljoner färger.
Vissa färger är fördefinierade, så att man kan skriva tex. "white" istället för "#FFFFFF".
Läs om fördefinierade färger:


http://www.w3.org/TR/REC-html40/types.html#h-6.5

Formatmallar ("style-sheets") är ett kraftfullt verktyg för att formatera tecken, som faktiskt kan göra allt ovanstående och lite till.
Den intresserade kan läsa mer här: http://www.w3.org/TR/REC-html40/present/styles.html

Exempel: teckenformatering

Kod:

<FONT COLOR="maroon" FACE="Bookman Old Style" SIZE="+1"> <I> Det här är ett exempel på hur man kan använda <FONT>... </I> </FONT>

Resultat:

Det här är ett exempel på hur man kan använda <FONT>...

Exempel: en enkel hemsida

<HTML> <HEAD> <TITLE>Min lilla hemsida</TITLE> </HEAD> <BODY> <H1 ALIGN="center">Välkommen!</H1> Det här är min lilla hemsida.<BR> Den saknar innehåll just nu, men jag arbetar på det... <P> Avsikten med den här sidan är att presentera mig själv. <HR> <H2>Om mig</H2> <FONT SIZE=+2>För närvarande går jag en kurs där jag lär mig HTML. Om ett par veckor kommer därför den här sidan att vara MYCKET snyggare.</FONT> <HR> </BODY> </HTML> I Netscape kommer sidan att se ut så här:

Fysisk och logisk formatering

Man kan formatera texten som i en vanlig ordbehandlare - fet, kursiv, understruken stil, m.m. Detta går utmärkt i HTML också, och kallas fysisk formatering. Vanliga taggar för detta ändamål är respektive <B>bold</B>, <I>italic</I>, <U>underlined</U>, <STRIKE>~~striked~~</STRIKE>.

Liksom de fysiska stilarna har att göra med textens "fysiska" egenskaper, har de logiska att göra med textens "syfte".
Exempel på dessa stilar är <ADDRESS> - används runt text som har med adresser att göra, t.ex. författarens namn och e-mail-adress; <CITE> - för att citera text; <CODE> - för kodexempel; <BLOCKQUOTE> - för att citera ett längre avsnitt (block) med text.

Exempel: fysisk och logisk formatering

Kod:

<CODE>Code</CODE> <TT>Typewriter</TT> <EM>Emphasis</EM> <I>Italic</I> <CITE>Cite</CITE> <ADDRESS>Address</ADDRESS> <BLOCKQUOTE>Blockquote</BLOCKQUOTE> <STRONG>Strong</STRONG> <B>Bold</B>

Resultat:

Code Typewriter Emphasis Italic Cite

Address

Blockquote

Strong Bold

Notera att på de flesta webläsare, så kan man inte se skillnad på vissa fysiska och logiska stilar, t.ex. kursiv stil och adresstil (observera dock hur <ADDRESS> bryter raden i exemplet ovan).
Det är trots det en god vana att tänka över sitt användande av stilarna - det kan finnas användare som vill/kan behandla dem olika.

Förformaterad text

Ibland vill man återge text "precis" som den är skriven (med avseende på blanktecken och radbrytningar), utan att HTML formaterar den. Detta åstadkommer man med ett omgivande <PRE> ("pre-formatted").
Ett användningsområde för detta är inklistring av text som innehåller en mängd blanktecken vilka man vill ha kvar (man slipper en massa  ), som tex. ASCII-konst.

Exempel: förformaterad text

Kod:

<PRE>

    ___         _
     \         / )
      ========= 
  ___/ \     / \___
 /  /\  \ ] /  /\  \
(  q-----( )  (  o  )
 \___/    [    \___/

</PRE>

Resultat:

    ___         _
     \         / )
      ========= 
  ___/ \     / \___
 /  /\  \ ] /  /\  \
(  q-----( )  (  o  )
 \___/    [    \___/

(Okänd konstnär.)

Samma sak utan <PRE>:

___ _ \ / ) ========= ___/ \ / \___ / /\ \ ] / /\ \ ( q-----( ) ( o ) \___/ [ \___/

Listor

Det går att skriva olika sorters listor i HTML; punktade och numrerade.
De punktade skriver man på den här formen (UL står för unordered list):

Kod:	Resultat:
`<UL>`	listelement (diverse text) ett till listelement ännu ett listelement
`<LI> listelement (diverse text)`
`<LI> ett till listelement`
`<LI> ännu ett listelement`
`</UL>`

Numrerade listor skriver man på motsvarande sätt, fast med <OL> (ordered list).

Det går att ha olika räknare - romerska siffror, bokstäver, etc., såväl som olika "klattar" för <UL>. Det gör man med argumentet TYPE. Vidare kan man ange vilket nummer listan ska börja på, med START. Mer om listor; se taggar.html#LISTOR

Tabeller

Liksom i ordbehandlare, kan man skapa ganska godtyckliga tabeller med hjälp av HTML. Tabeller är kraftfulla hjälpmedel för att placera bilder, textblock etc. där man vill ha det. Det är nämligen så att tabellceller, bör det påpekas, kan innehålla alla standardtaggar.

De grundläggande taggarna vid tabellskapande är <TABLE>, <TR> ("table row") och <TD> ("table data").

Exempel: enkel 2x2-tabell

Kod:

<TABLE BORDER=1 CELLPADDING=10 CELLSPACING=4> <TR> <TD> Rad 1, kolumn 1 <TD> Rad 1, kolumn 2 </TR>  <TR> <TD> Rad 2, kolumn 1 <TD> Rad 2, kolumn 2 </TR>  </TABLE>

Resultat:

Rad 1, kolumn 1 Rad 1, kolumn 2

Rad 2, kolumn 1 Rad 2, kolumn 2

<TABLE> har att göra med tabellens generella utseende; justering, cellernas avstånd, etc.
Dess argument är ALIGN ("left", "right" eller "center"), BORDER (kantlinjens tjocklek, som även kan vara 0), CELLPADDING (cellinnehållets avstånd till kantlinjerna), CELLSPACING (avståndet mellan cellerna) och WIDTH (tabellens bredd i pixels, eller i procent av fönstrets bredd).

Då man har skrivit <TABLE>-taggen, är det tänkt att man ska definiera tabellens innehåll radvis och cellvis, i den ordningen. Man skriver en radtagg <TR>, och därefter den radens celler från vänster till höger med <TD>.

<TR> har argument ALIGN och VALIGN ("vertical alignment") som definierar cellinnehållets justering relativt kantlinjerna på just "den här" raden. Den senare kan anta värdena "top", "middle", "bottom" och "baseline".
<TD> har även den argument ALIGN och VALIGN - om man vill ha annan justering än radens. Yttermera har den argument COLSPAN och ROWSPAN för att definiera hur många kolumner respektive rader cellen täcker.

Vidare kan man piffa upp tabellen med t.ex. rubrik (<CAPTION>) och med interna cellrubriker (<TH> - table header).

Exempel: mer om tabeller

Kod:

<TABLE BORDER="1" CELLPADDING="5" CELLSPACING="5" WIDTH="70%"> <CAPTION> Tabell 1 </CAPTION> <TR ALIGN="CENTER"> <TH ROWSPAN="2" BGCOLOR="LIGHTBLUE"> År </TH> <TH COLSPAN="3" BGCOLOR="RED"> Bilförsäljning</TH> </TR> <TR ALIGN="CENTER"> <TH BGCOLOR="CYAN"> Volvo </TH> <TH BGCOLOR="YELLOW"> Saab </TH> <TH BGCOLOR="ORANGE"> VW </TH> </TR> <TR ALIGN="CENTER"> <TD BGCOLOR="LIGHTGREEN">1998</TD> <TD BGCOLOR="CYAN"> 11 </TD> <TD BGCOLOR="YELLOW"> 12 </TD> <TD BGCOLOR="ORANGE"> 13 </TD> </TR> <TR ALIGN="CENTER" BGCOLOR="CYAN"> <TD BGCOLOR="LIGHTGREEN">1999</TD> <TD BGCOLOR="CYAN"> 21 </TD> <TD BGCOLOR="YELLOW"> 30 </TD> <TD BGCOLOR="ORANGE"> 40 </TD></TR> </TR> </TABLE> Resultat:

Tabell 1
År Bilförsäljning

Volvo Saab VW

1998 11 12 13

1999 21 30 40

Tabell 1
År	Bilförsäljning
Volvo	Saab	VW
1998	11	12	13
1999	21	30	40

Fler exempel på tabeller finns i tabeller.html

Länkar

Hittills har vi inte märkt att HTML kan uträtta något som en ordbehandlare inte kan. Nu kommer vi dock till något utmärkande - länkar.
En länk erbjuder en genväg till ett annat objekt, t.ex. ett HTML-dokument eller en bild. Genom att klicka på, eller på annat sätt aktivera, en länk kommer vi åt dess objekt.

För att skapa en länk använder man ankare <A>-taggen runt det man vill ska vara hypertext (mao det som är klickbart, och som oftast visas som understruken blå text). Adressen till objektet definieras i HREF-attributet till <A>. Adresser anges infattade i sk URL (Uniform Resource Locator), som anger hur webläsaren ska hämta/tolka objektet.

Exempel på URL: http://www.sunet.se/
Här anger http att webläsaren ska använda protokollet http (HyperText Transfer Protocol).

Ex. Koden

TDB1:s <A HREF="http://www.tdb.uu.se/~tdb1"> hemsida.</A> visas som TDB1s hemsida.

Ex. Bild som hypertext, koden

<CENTER> Back to the main page<BR> <A HREF="http://www.tdb.uu.se/~tdb1"> <IMG SRC="ned.gif"> </A> </CENTER> visas som (och fungerar som en länk till tdb1:s hemsida).

Back to the main page

Om objektet man länkar till är i samma filhierarki som HTML-dokumentet behöver man inte ange fullständig adress, utan det räcker med en sk relativ adress. Man använder något av dessa skrivsätt för relativa adresser:

objektets_namn (samma katalog)
/underkatalog_1/underkatalog_2/objektets_namn (i underkatalog_2)
../../överkatalog_3/objektets_namn (i överkatalog_3)

Fördelen att använda relativa adresser inom ett paket sammanhängande HTML-dokument (mao dokumenten i en site - ens egen tex.) är att man slipper en massa länkändrande om man flyttar på filerna lokalt (eller byter värd). Det finns inga sådana fördelar med relativa länkar till externa dokument.

Exempel: absoluta och relativa adresser

Antag att vi har följande filhierarki:

C:/

bilder

frukter

djur

dikter

Dvs, rot C:/ med kataloger bilder och dikter. Underkataloger till bilder: frukter och djur.

Antag vidare att vi befinner oss i roten. Då kan vi referera till filen banan.jpg (som är i lämplig katalog) på följande sätt:

absolut adress:
- file://C|/bilder/frukter/banan.jpg
relativ adress:
- /bilder/frukter/banan.jpg

Om vi var i bilder/frukter/ och ville referera till en bild i djur, skulle vi kunna använda den relativa adressen, ../djur/orangutang.jpg.
Givetvis kunde vi även ha använt file://C|/bilder/djur/orangutang.jpg.
Samma princip gäller andra URL också.

Notera, förresten, att kolontecknet i "C:" skrivs som en "stav": '|' (Alt Gr + <).

Ankare (anchors)

Vi kan indexera en del av ett dokument, som då blir länkbart. Där vi vill placera det sk ankaret skriver vi <A NAME=namn>. För att länka till ankaret refererar man till #namn. Det går utmärkt att referera till ankare i andra dokument än det aktuella.

Exempel: ankare

I det här HTML-dokumentet lektion.html kan vi skapa en ankare till platsen Tabeller genom att skriva

 
<H2><A NAME="tabell"> Tabeller </A> </H2>

där avsnittet om Tabeller börjar.

För att länka dit från samma dokument, använder vi den relativa adressen:

 
<A HREF="#tabell"> Gå till tabeller </A>

Resultatet blir: Gå till tabeller

Vi kan även referera till lektion.html#tabell. Som alltid går det att använda absolut adress.

Multimedia

Man kan ha med bilder, ljud och videoklipp mm i HTML-dokument.

Bilder

För att infoga en bild, används <IMG> med diverse argument.
Vanliga argument:
SRC (anger källan, dvs bildens URL, och är mer eller mindre obligatoriskt, såvida man inte vill infoga en tom bild);
ALT ("alternative" - en beskrivning av bilden som visas innan bilden har laddats. Användare inte vill eller kan se bilder ser denna istället);
BORDER (bredd på ev. ram runtom);
HEIGHT och WIDTH (om dessa anges så laddas bilden snabbare. Man kan även ändra storlek på bilden mha dessa);
HSPACE och VSPACE (anger det horisontella resp. vertikala avstådet mellan bilden och omgivande objekt);
ALIGN ("left", "right", "top", "middle" eller "bottom" - anger hur bilden ställer sig i förhållande till närmast efterkommande objekt/text).

Man kan även länka till bilder, som vi har sett tidigare.
Skillnaden är att om man länkar så kan användaren ha möjlighet att styra hur bilden ska visas i webläsarens inställningar - kanske med ett speciellt program. Standardinställningen brukar vara att visa bilden i ett eget fönster.

Bilder som verkligen "hör till" dokumentet bör dock ej länkas till (utan infogas). Exempel på sådana är textavgränsare, knappar, anfanger och andra dekorationer.

Man kan länka till bilder, men man kan även göra bilderna sjäva till länkar (hypertext, eller kanske "hyperbilder"). Det är mycket enkelt - placera helt enkelt <IMG> innanför <A>.
En mer avancerad variant är att definiera "klickbara" områden på bilder, sk "image-maps". Läs mer om detta i en lärobok.

Ljud och video

Man kan länka till ljud- och videofilmer på vanligt sätt. För att användare ska kunna höra/se dem som tänkt så måste dock deras webläsare tillåta det - liksom med bilder kan externa program väljas att hantera ljud och video. Det kan behövas sk plug-ins, som dock kan laddas ned gratis från respektive webläsares site.

Det går att ha bakgrundsljud i HTML-dokument mha speciella web-läsar-pecifika taggar. Exempelvis tar Netscape's <EMBED> och Internet Explorer tar <BGSOUND>.

Exempel: multimedia

Infoga ljudfil (Netscape):
<EMBED SRC="file://C|/Musik/Apornas sång.mp3" LOOP="true">

Infoga bild:
<IMG SRC="http://www.bildlandet.se/djur/apa05.gif" ALT="En liten grobian" HEIGHT="120" WIDTH="90">

Extern video:
<A HREF="http://www.filmstallet.se/apfilmer/orangutanger.mov"> Se en filmsnutt om orangutanger </A>

Frames

Med s.k. "frames" kan man dela upp fönster i andra fönster (delfönster) på godtyckligt sätt. Man skapar därmed tomma ramar (därav namnet) i vilka valfria HTML-dokument etc. kan öppnas.

Tillvägagångssättet är detta: med <FRAMESET> definierar man indelning av fönstret. Man fyller delarna med hjälp av <FRAME>-taggar.

Alla delfönster kan ges namn, så att de kan refereras till då man vill öppna något i dem. Vissa taggar, däribland <A>, tillåter ett argument TARGET, där fönstrets namn kan anges. (TARGET kan dessutom sättas till _blank, _parent, _self eller _top).

<FRAMESET> tar två argument: COLS och ROWS. Deras värde kan vara absolut - ett antal pixels, eller relativt - i procent eller angivet med asterisk (*) som betyder "all återstående plats".

<FRAME> tar en hel del argument, nämligen: NAME (delfönstrets namn, som TARGET använder), SRC ("source" - adressen till det som ska visas i fönstret), MARGINHEIGHT och MARGINWIDTH (anger storlek på marginalerna), NORESIZE (delfönstrets storlek kan ej ändras), SCROLLING (kan anta "auto", "yes" eller "no", och anger om rullningslisten ska vara synlig eller ej. Auto är default och betyder att rullningslist finns om det behövs), FRAMEBORDER ("yes" eller "no" - anger om delfönstret ska ha en synlig kant eller ej), FRAMESPACING (anger avståndet mellan delfönster).

Det finns en tag, <NOFRAMES>, som låter en definiera hur dokumentet ska se ut i webläsare som inte kan (eller vill) visa frames. Endast det inuti taggen visas.
<NOFRAMES> skriver man inom <FRAMESET>.
Notera att <BODY> ligger i <NOFRAMES>, och eftersom att <NOFRAMES> ej behöver finnas i alla frame-dokument, så behöver följdaktligen ej heller <BODY> det.

Exempel: frames

Vi definierar en typisk FRAMESET - en vertikal uppdelning av fönstret i en meny-del och en "informations"-del.
Tanken är att ena delen ska innehålla en sorts meny med (främst interna, dvs till dokument i samma site) länkar, vilka ska visas i den andra.

<HTML> <FRAMESET COLS="200,*"> <!- ena 200 pixels bred, andra täcker återstående plats --> <FRAME SRC="meny.html"> <!- vänster frame --> <FRAME SRC="main.html" NAME="info"> <!- höger frame --> </FRAMESET> <NOFRAMES> <BODY> Hej, tyvärr kan du inte se mina fina frames. Här kommer innehållet utan, för din skull: <!- och så vidare --> </BODY> </NOFRAMES> </HTML>

Ovanstående skulle vi lämpligen skriva i index.html. Då skulle webläsaren dela upp fönstret som vi skrev, och sedan försöka visa meny.html i vänstra fönstret och main.html i det högra.

meny.html skulle i princip kunna ha det här innehållet:

<HTML> <HEAD> <TITLE>Meny</TITLE> </HEAD> <BODY> <STRONG>Min lilla meny<STRONG> <MENU> <LI> Läs om mina <A HREF="hobbys.html" TARGET="info">hobbyer</A> <LI> Mina <A HREF="linx.html">favoritlänkar</A> <LI> Tankar kring <A HREF="min_chokladsida.html" TARGET="info">choklad</A> <LI> <A HREF="mailto:mig@minaddress.se">Kontakta mig</A> </MENU> </BODY> </HTML>

Klickandet på t.ex. "hobbyer" ovan, skulle leda till att hobby.html öppnades i fönstret info, dvs det högra.

Kvällskursens VT01-hemsida använder frames. Kolla gårna index.html och övriga sidor genom att använda View-Page Source och View-Page Info.

Referenser

Slutligen en sammanfattning av nämnda länkar.

Om taggar	http://www.tdb.uu.se/~tdb1/privat/forant/html/taggar.html
Om tabeller	http://www.tdb.uu.se/~tdb1/privat/forant/html/tabeller.html
Om fördefinierade färger	http://www.w3.org/TR/REC-html40/types.html#h-6.5
Om "style-sheets"	http://www.w3.org/TR/REC-html40/present/styles.html
Stilguider, HTML-specifikationer m.m.	href=http://validator.w3.org/

Gratis hemsida

kan man få på många ställen. Sök på "hemsida + gratis" i någon sökmotor så får du många napp. Exempelvis Passagen erbjuder gratis plats för egen hemsida.

© Detta material är skyddat enligt lagen om upphovsrätt.
Eftertryck eller annan kopiering förbjuden.
Uppsala universitet, institutionen för Informationsteknologi.

Rad 1, kolumn 1	Rad 1, kolumn 2
Rad 2, kolumn 1	Rad 2, kolumn 2

Föreläsningsanteckningar TDB1: OM HTML

Inledning

HTML-dokument

Om HTML-editorer

<BODY>-taggen

Rubriker

Rubrik 1

Rubrik 3

Rubrik 6

Blanktecken och speciella tecken

Stycken och radbrytning

Teckenformatering

Om färger

Fysisk och logisk formatering

Förformaterad text

Listor

Tabeller

Länkar

Ankare (anchors)

Multimedia

Bilder

Ljud och video

Frames

Referenser

Gratis hemsida

Föreläsningsanteckningar TDB1:
OM HTML