[ACC-Logo]

Hur man skapar web-sidor, fortsättning

[ACC Hemsida] [Hjälp] [Information] [Index]

[The same information in English]


Här kommer förklaringar till en del olika html-taggar. Det är lite si och så med pedagogiken och exemplen, men det är iallafall ett försök till en enkel förklaring.

html

html dokument börjar med <html> och slutar med </html>, för att nät-bläddraren ska veta att det är en html-sida som laddas in.

head, title

Runt om titeln på sidan ska du ha taggen <head> resp. </head>. För att skapa en titel blir det alltså så här:
<head><title>Det här är titelraden på sidan</title></head>.

body

För att ändra bakgrunden eller färgen på texten på sidan så använder man sig av taggen <body>. Den lägger man in direkt efter <html> eller direkt efter </title>. Alldeles innan dokumentet avslutas med </html> lägger man in </body>.

body kan ta flera argument. Här är några:
background - lägger in en bakgrundsbild på sidan. Har man en bild i katalogen ~/public_html/bilder/ som man vill ha som bakgrund, blir det så här:
<body background="~/bilder/bakgrund.gif">
bgcolor - anger bakgrundsfärg.
text - anger färg på texten.
link - anger färg på länkar.
vlink - anger färg på besökta länkar.
alink - anger färg på aktiva länkar.
Ett exempel på hur det kan se ut:
<body background="~/bilder/bild.gif" bgcolor="#ffffff" text="#000000" link="#00ffff" vlink="#a62a2a" alink="#000000">

br, p

<br> används för att åstadkomma radbrytningar (ny rad), och <p> används för att markera stycken. <p> skall avslutas med </p>. Exempel:

<p>
Detta är ett stycke. Jag bryter rad med br:<br>
Nu är jag på en ny rad. För att avsluta stycket, använder jag /p:
</p>

Blir:

Detta är ett stycke. Jag bryter rad med br:
Nu är jag på en ny rad. För att avsluta stycket, använder jag /p:

hr

<hr> ger ett horisontellt streck, som detta:

center

<center> centrerar allting mellan <center> och </center>

h1 till h6

<h1> t.o.m. <h6> bestämmer storleken på texten. 1 är störst, och 6 minst. Exempel:
<h1>Stor text</h1>

blir:

Stor text

Som ni ser blir det automatiskt radbyte innan <h1> och efter </h1>.

font

Nackdelen med <h1> o.s.v. är att texten hamnar på en egen rad. Vill man ha varierande storlek på texten på samma rad, använder man <font>. Exempel:

Här kommer <font size="+4">lite större text</font> som sedan blir normal igen.

blir:

Här kommer lite större text som sedan blir normal igen.

Man kan även ändra färg på texten med <font>. Exempel:

Texten kan vara <font color="red">röd</font> om man vill.

blir:

Texten kan vara röd om man vill.

a href

Länkar skapas med <a href>. Måste stängas med </a>. Exempel:

<a href="http://www.cnn.com/">CNN huvudsida</a>

blir:

CNN huvudsida

<a href="annanfil.html">Annan fil i min katalog</a>

blir:

Annan fil i min katalog

<a href="annankatalog/">Underkatalog till denna katalog</a>

blir:

Underkatalog till denna katalog

Exemplet ovan gör att WWW-läsaren automatiskt försöker svara med sidan index.html från den nya katalogen. Finns inte den, visas en lista över filer i den katalogen.

img

För att lägga in bilder i en sida så kan du skriva såhär:

<img src="/images/logo/acc_small.gif">

eller så här:

<img src="http://www.cnn.com/TECH/9703/04/clinton.cloning/clinton.jpg">

eller så här:

<img align="bottom" width="230" border="0" src="/images/logo/acc_small.gif" alt="en tråkig bild">

Som synes kan man även här ha diverse argument:
align: bottom, top, middle
right -- Bilden placeras till höger om omgivande text, som fyller ut utrymmet till vänster om bilden.
left -- Bilden placeras till vänster om omgivande text, som fyller ut utrymmet till höger om bilden.
border: tjockleken på ramen runt bilden. 0 = ingen ram.
height, width: bredd, höjd. procent (ex. 10%) eller bildpunkter (ex. 100) (man kan skriva in bildpunkter för att bilden ska komma fram snabbare)
hspace, vspace: tomrum runt bilden, horisontellt och/el. vertikalt (ex. hspace=10).
alt: den text som dyker upp om WWW-läsaren inte kan hitta bilden, eller om man har ställt in WWW-läsaren på att inte visa bilder.

Bild-länkar
Om man vill att en bild ska vara en länk går det också bra. Det är bara att skriva t.ex.:

<a href="http://www.cnn.com/"><img src="/images/logo/acc_small.gif"></a>

kommentarer

Vill man lägga in kommentarer i html-dokumentet, som inte syns i WWW-läsaren, gör man så här:

<!-- kommentar, som inte syns i dokumentet då det visas i WWW-läsaren -->

blir:


Just det! Ingenting.

listor

För att göra listor använder man taggarna <ul>, <li> och <ol>. Exempel:

Lista över punkter:<br>
<ul>
<li>Första punkten.
<li>Andra punkten.
<li>Tredje punkten.
</ul>

blir:

Lista över punkter:


Ett annat exempel:

Numrerad lista över punkter:<br>
<ol>
<li>Första punkten.
<li>Andra punkten.
<li>Tredje punkten.
</ol>

blir:

Numrerad lista över punkter:
  1. Första punkten.
  2. Andra punkten.
  3. Tredje punkten.

åäö

ÅÄÖ
Åäö kan skrivas in direkt som dom ser ut, eller som nedanstående koder:
Å - &Aring;
Ä - &Auml;
Ö - &Ouml;
å - &aring;
ä - &auml;
ö - &ouml;

Här är några länkar till bra ställen, med info om html-kodning:

Publicera information på WWW (HTML-kurs)
Svenska Skoldatanätet - Publicera information på WWW - Appendix A - förklaringar till alla tags.

Och här kan man hämta lite bakgrundsbilder, etc.:

Background Colors
Background Shop
Backgrounds and Textures


[ACC] [Help] [Web]
Denna sida ändrades sist av wmaster den 29/09 - 2022.