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 tagg- 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, på svenska taggar, för att ge information till webbläsare om hur dokument ska se ut.

En tagg är ett kommando omgivet av < >-klamrar. Taggar kan ha argument, som står innanför klamrarna, samt en avslutande tagg (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 förändrar dokumentets utseende på skärmen - det kan röra sig om textformatering, radbrytning, infogande av bilder, mm mm. Webbläsaren vet hur varje tagg ska tolkas.

Exempel: taggar

Enkel tagg
<TAG>

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

Tagg med sluttagg
<TAG> text som taggen påverkar </TAG>

Tagg med sluttagg 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, inte helt fullstä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 webblä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 webblä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, tagg för tagg, 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 tagg-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-breaking 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.it.uu.se/edu/course/homepage/dopTDB1/protected/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. Man får använda sluttagg (</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 webblä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. Dessutom 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:

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

Resultat:

Tabell 1
År	Bilförsäljning
År	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 webbläsaren ska hämta/tolka objektet.

Exempel på URL: http://www.sunet.se/aktuellt/nystyrelse.html
Här anger http att webbläsaren ska använda protokollet http (HyperText Transfer Protocol), objektet ligger på webservern www.sunet.se i katalogen aktuellt (längst upp i html-objektens filhierarki) och är ett html-dokumentmed namnet nystyrelse.html.
Om det inte finns något explicit namn på objektet i URL:en, som tex i http://www.sunet.se/ menas oftast html-dokumentet index.html, dvs vi avser URL:en http://www.sunet.se/index.html

Ex. Koden

TDB1:s hemsida.

visas som TDB1s hemsida.

Ex. Bild som hypertext, koden

Back to the main page

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 som 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).

Bilder sparas inte fysiskt i ett HTML-dokument. Det är bara en länk som pekar på bildens fil.
Man kan även länka till bilder. Ex <A HREF=bild.jpg> klicka här får du se en bild </A>
Skillnaden är att om man länkar så kan användaren ha möjlighet att styra hur bilden ska visas i webblä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> och </A>. Se exempel tidigare under avsnittet om länkar.
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 webblä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 webbläsares site.

Det går att ha bakgrundsljud i HTML-dokument mha speciella webbläsar-specifika 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 tagg, <NOFRAMES>, som låter en definiera hur dokumentet ska se ut i webblä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 <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 -->

<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>
</FRAMESET>
</HTML>

Ovanstående skulle vi lämpligen skriva i index.html. Då skulle webblä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" TARGET="info">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.it.uu.se/edu/course/homepage/dopTDB1/protected/forant/html/taggar.html
Om tabeller	http://www.it.uu.se/edu/course/homepage/dopTDB1/protected/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.

TDB-logo

Datorer och programmering TDB1
Föreläsningsanteckning och hjälpmedel vid tentamen

Kort om HTML

Taggar

A
ADDRESS
B
BIG
BLINK
BLOCKQUOTE
BODY

BR
CAPTION
CENTER
CITE
CODE
DD
DL

DT
EM
FONT
H?
HEAD
HR
HTML

I
IMG
LI
MENU
NOBR
OL
P

PRE
Q
SMALL
STRIKE
STRONG
SUB
SUP

TABLE
TD
TH
TITLE
TR
U
UL

URL
XMP

Det du inte hittar här kan du söka i
http://www.w3.org/TR/REC-html40/index/elements.html

1. Allmän

<html> ... </html>	Ett html-dokument, inom ... ingår <head > och <body>.

<head> ... </head>	Inom ... ingår <title>.

<title>... </title>	visas i överkanten av webbläsare.

<body>... </body>	har argument `text`, `bgcolor`, `link`, `alink`, `vlink`, samt `background`. Alla ovanstående argument tar en färg, utom `background`, som tar en adress till en bild.
Koden `<body bgcolor="black" text="yellow" alink="white" link="yellow" vlink="grey">` ger ett dokument med svart bakgrund, gul text och gula länkar. Länkarna kommer att vara vita då de aktiveras. Besökta länkar kommer att visas i grå färg.

<address> ... </address>	Används för författarens/firmans namn.

<!-- ... -->	Allt inom <!-- och --> tolkas som kommentar.

3. Några speciella tecken

<	<	>	>	&	&
å	å	ä	ä	ö	ö
Å	Å	Ä	Ä	Ö	Ö
§	§	©	©	®	®
£	£	¥	¥	¢	¢
µ	µ	¶	¶	±	±
¼	¼	½	½	¾	¾
	blankt

4. Layout

	Ett blankttecken.
<br>	Radbyte (har inte sluttagg)
<nobr> ... <nobr>	avbryt ej

<hr>	Avgränsande linje längden kan anges i `WIDTH` i absoluta storlekar i pixel eller relativt i %-form, tjocklek anges med `SIZE`. noshade ger fylligare yta. Välj `ALIGN = LEFT\|CENTER\|RIGHT`
<hr noshade width=75>
<hr width=50%>
<hr width=75 align=left noshade size=5>

<p>	Nytt stycke (kräver inte sluttagg), argumenten kan vara `LANG ALIGN STYLE` etc.

<center> ... </center>	centrerad text eller grafik.

<pre> .... </pre>	bibehåller blanka och radbyte, wysiwyg (what you see is what you get). Bra för vanlig text, problem med kontroll-tecken (typ >).

<xmp> .... </xmp>	bibehåller blanka, radbyte och kontrolltecken; bra för t ex c++-kod, wysiwyg.

<code> .... </code>	för kod, ignorerar blanka och radbyte, har problem med kontroll-tecken, `<xmp>` ger bättre resultat.

<h?> ... </h?> ?=1-6	rubriker med storlekar 1-6, h1 störst, fet stil och radbyte. Samma argument som i <p> kan ingå.

<blockquote> ...</blockquote>	indenterar texten (kräver sluttagg), argumenten kan vara `LANG ALIGN STYLE` etc

<cite> citera inte mig </cite>	citera inte mig
<q> citera gärna mig </q>	citera gärna mig
<em> betonat </em>	betonat
<strong> strong </strong>	strong
<b> fet stil </b>	fet stil
<blink> lilla * </blink>	lilla *
<i> kursivt </i>	kursivt
<u> understruken </u>	understruken
<strike> struken </strike>	~~struken~~ , ej standard.

x <sub> 3 </sub>	x₃
x <sup> 2 </sup>	x²

<big> ökar fontstorleken med 1. </big>	ökar fontstorleken med 1.
<small> minskar fontstorleken med 1. </small>	minskar fontstorleken med 1.

Taggar kan nästlas, koden
UPPSALA
producerar	UPPSALA

<font> ... </font>	har argument `SIZE COLOR FACE`
Koden `<font color="maroon" face="Bookman Old Style" size="+1">` `<I> Ett exempel på hur man kan använda <FONT>... </I>` `</FONT>`
producerar Ett exempel på hur man kan använda <FONT>...

5. LISTOR

Det finns ett antal olika typer av listor, t ex <ul>, <menu>, <ol> och <dl>.

Numrerade listor <OL> (ordered list)
<ol type=a|A|i|I|1 > default är siffror.

a.          ett ...

b.

c.          två ...

d.

e. ett ...

f. två ...

t.          ett ...

u.

aa.     två ...

bb.

cc.     Tre...

dd.

20. ett ...

30. två ...

31. Tre...

START kan anges i <ol> , t ex <ol start=10>, listan börjar då med 10.

Onumrerade listor <UL> (unordered list)
<ul type=disc|circle|square >

o                ett ...

o                två ...

§                 tre ...

§

§ ett ...

o två ...

§ tre ...

Menylistor <MENU> (Menu list)
<menu type=disc|circle|square>

·   Ett...

·   Två...

·   Tre...

· Ett...

· Två...

· Tre...

Definitionslistor <dl> (definition list)
<dt> rubriken (defined term), <dd> texten under rubriken (definition)

 frukter

 mango....

 banan....

 grönsaker

 spenat....

 zucchini....

frukter

mango....

banan....

grönsaker

spenat....

zucchini.....

2. LÄNKAR (ANKARE)

  hypertext

definierar ett lokalt mål i dokumentet.

  hypertext

länkar till ett lokalt mål i samma dokument.

  hypertext

länkar till ett annat dokument.

  hypertext

länkar till ett lokalt mål i ett annat dokument.

Taggen <A> kräver antingen NAME eller HREF som argument.
Hypertexten är den text eller bild som beskriver målet, det som är klickbart.

Länkar kan sättas i löpande text.

Ex. Koden

Kursens  hemsida.

visas som Kursens hemsida.

Ex. Bild som hypertext, koden

Back to the main page

/center>

visas som (och fungerar som en länk till kursens hemsida).

Back to the main page

Länkar till en del av dokumentet görs genom att man definierar en ankare till en viss del av dokumentet med <A NAME=namn> och sedan refererar man till #namn.

Ex. I HTML-koden för detta dokument i avsnittet LISTOR har vi definierat name som LISTOR på följande sätt:

3. LISTOR

och sedan länkar vi till LISTOR i början av dokumentet med

 Listor

Genom att klicka på länken kommer man till det avsnittet.

Man kan komma åt LISTOR via andra dokument genom att referera till taggar.html#LISTOR, givetvis krävs det absoluta eller relativa adressen till dokumentet (taggar.html) om man inte är i samma katalog. Se adress .

4. Tabeller

`<table> ... </table>`	har argument `ALIGN BGCOLOR BORDER CELLSPACING CELLPADDING COLS WIDTH`etc.

`align = left\|center\|right`	defaulten är `left`
`bgcolor = färgkod`	bakgrundsfärg
`border = pixelvärde`	tjocklek på ramen kan anges i pixel, border=0 tillåtet.
`cellspacing = pixelvärde`	avståndet mellan individuella celler, värdet 0 tillåtet.
`cellpadding = pixelvärde`	avståndet mellan texten och cellens inre kant, 0 tillåtet.
`cols = heltal`	bestämmer antalet kolonner i tabellen. Ej nödvändigt, rekommenderas ej.
`width = storlek`	bestämmer bredden av tabellen. Storleken anges i % (av fönstret) eller i pixel.

I <table> kan ingå `CAPTION (rubrik utanför tabellen) TH (rubrik i tabellen) och TR (rader)`

`<caption> ... </caption >`	Har argument `ALIGN BGCOLOR` etc.
`align = top\|bottom\|left\|right`	defaulten är `top`

`<tr> ... </tr>`	Rader: har argument `ALIGN VALIGN BGCOLOR` etc. I ... ingår `TH` (rubriker för celler) och `TD` (data för celler)
`align = left\|center\|right`	defaulten är `left`
`valign = top\|middle\|bottom`	defaulten är `middle`

`<td> ... </td>`	Celldata: har argument `ALIGN VALIGN BGCOLOR COLSPAN ROWSPAN` etc. Samma som ovan.
`<th> ... </th>`	Cellrubrik: har argument `ALIGN VALIGN BGCOLOR COLSPAN` etc. Samma som ovan.

Tabell 1
Ex. 1
rad 1, kol 1	rad 1, kol 2

Tabell 1
Ex. 1
rad 1, kol 1	rad 1, kol 2

Se mera om tabeller

7. Annat

Adresser
Vi befinner oss i katalogen:
~tdb1/privat/forant/html och dokumentet är taggar.html.

En relativ adress till ett annat dokument lektion.html i samma katalog blir "lektion.html".
Absoluta adressen blir ~tdb1/privat/forant/html/lektion.html.

D v s URL (refrensen) med absoluta adressen är
"http://www.tdb.uu.se/~tdb1/privat/forant/html/lektion.html"
och relativa adressen är "lektion.html"

URL
URL är antingen en absolut eller relativ Universal Resource Locator.

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

TDB-logo

Datorer och programmering TDB1
Föreläsningar

Om Tabeller

1. En tabell med två rader och tre kolumner.

11	12	13
21	22	23

2.

ger följande tabell:

11	12	13
21	22	23

4. Samma med ramar.

11	12	13
21	22	23

5.

och vi får:

11	12	13
21	22	23

border="5" ger

11	12	13
21	22	23

7. Cellpadding.

Cellpadding anger hur stort mellanrummet ska vara mellan texten och cellens inre kant. Avståndet ges i pixlar.

11	12	13
21	22	23

och vi får:

11	12	13
21	22	23

cellpadding="20" ger

11	12	13
21	22	23

8. Cellspacing.

Cellspacing anger hur stort mellanrummet ska vara mellan individuella celler.

11	12	13
21	22	23

och vi får:

11	12	13
21	22	23

cellspacing="0" ger

11	12	13
21	22	23

9. Rubriker.

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

10.

ger följande tabell:

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

12. Align = left|center|right

A. Tabeller:

Volvo	Saab	VW
11	12	13

B.

ger följande tabell:

Volvo	Saab	VW
11	12	13

D. Tabellrader:

Volvo	Saab	VW
11	12	13

E.

ger följande tabell:

Volvo	Saab	VW
11	12	13

G. Tabellrader:valign=top|middle|bottom|baseline

Jag har en lång rad här med massor av text.	12	13
12	13	Jag har en lång rad här med massor av text.
Jag har en lång rad här med massor av text.	12	13
Jag har en lång rad här med massor av text.	12	13

H.

ger följande tabell:

Jag har en lång rad här med massor av text.	12	13
12	13	Jag har en lång rad här med massor av text.
Jag har en lång rad här med massor av text.	12	13
Jag har en lång rad här med massor av text.	12	13

14. Width (bredd)

Bredden anges antingen i pixlar eller i procent. Man kan välja bredden för både hela tabellen och dess celler.

A. Exempel på tabellbredd med 75% av fönstrets bredd

Bilförsäljning
Volvo	Saab	VW
25	25	25

B.

ger följande tabell:

D.

Bilförsäljning
Volvo	Saab	VW
25	25	25

Ni ser att rubrikerna är centrerade men inte siffror, använd align i tr.

Bilförsäljning
Volvo	Saab	VW
25	25	25

G.

ger följande tabell:

Bilförsäljning
Volvo	Saab	VW
25	25	25

J. Exempel på celler med olika bredd:

I exemplet nedan har vi en tabell med 70% av fönsterbredden och första cellen har 50% av tabellbredden.

Bilförsäljning
Volvo	Saab	VW
50	30	20

ger följande tabell:

Bilförsäljning
Volvo	Saab	VW
50	30	20

15. Celler som sträcker sig över rader eller kolonner

colspan= 2 sträckar över 2 kolonner.
rowspan= 2 sträckar över 2 rader.

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

ger följande tabell:

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

16. Färger

Bilförsäljning
Volvo	Saab	VW
11	12	13

17.

ger följande tabell:

Bilförsäljning
Volvo	Saab	VW
11	12	13

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