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

Taggar och dylikt

Allmän Speciella tecken Layout Listor Länkar Tabeller Annat

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

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


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


    <title>... </title> visas i överkanten av weblä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.

  2. Några speciella tecken

    3. &lt; < &gt; > &amp; &
    &aring; å &auml; ä &ouml; ö
    &Aring; Å &Auml; Ä &Ouml; Ö
    &sect; § &copy; © &reg; ®
    &pound; £ &yen; ¥ &cent; ¢
    &micro; µ &para; &plusmn; ±
    &frac14; ¼ &frac12; ½ &frac34; ¾
    &nbsp; blankt



  3. Layout

    4. &nbsp; Ett blankttecken.
    <br> Radbyte (har inte sluttag)
    <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 sluttag), 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 sluttag), 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> x3
    x <sup> 2 </sup> x2


    <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
    <small><small>U</small>P</small>P<big>S</big>A<small>L<small>A</small>
    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 &lt;FONT&gt;... </I>
    </FONT>
    producerar
    Ett exempel på hur man kan använda <FONT>...
       

  4. LISTOR

    5. 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.

    <ol type=a> <li> ett ... <li> två ... </ol>
    1. ett ...
    2. två ...
    <ol> <li value=20> ett ... <li value=30> två ... <li> Tre... </ol>
    1. ett ...
    2. två ...
    3. 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 >
    <ul> <li> ett ... <li type=circle> två ... <li type=square> tre ... </ul>
    • ett ...
    • två ...
    • tre ...

    Menylistor <MENU> (Menu list)
    <menu type=disc|circle|square>
    <menu> <li> Ett... <li type=square> Två... <li> Tre... </menu>
  5. Ett...
  6. Två...
  7. Tre...

    8. Definitionslistor <dl> (definition list)
    <dt> rubriken (defined term),   <dd> texten under rubriken (definition)
    <dl> <dt> frukter</dt> <dd> mango.... <dd> banan.... <dt> grönsaker </dt> <dd> spenat.... <dd> zucchini.... </dl>
    frukter
    mango....
    banan....
    grönsaker
    spenat....
    zucchini.....

  8. LÄNKAR (ANKARE)

    9. <a name="namn"> hypertext </a>
    definierar ett lokalt mål i dokumentet.
    <a href="#namn"> hypertext </a>
    länkar till ett lokalt mål i samma dokument.
    <a href="url"> hypertext </a>
    länkar till ett annat dokument.
    <a href="url#namn"> hypertext </a>
    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

    TDB1:s <a href="http://www.tdb.uu.se/~tdb1"> hemsida.</a> visas som TDB1:s 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

    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:

    <h3><li><a name="LISTOR"> </a> LISTOR </h3> och sedan länkar vi till LISTOR i början av dokumentet med <a href="#LISTOR">Listor</a> 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 .

  9. Tabeller

    10. <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.
    Ex.

    <table bgcolor=cyan border=1> <caption align=top> Tabell 1 </caption> <tr> <th colspan=2> Ex. 1 </th> </tr> <tr> <td> rad 1, kol 1 </td> <td> rad 1, kol 2</td> </tr> </table>
    Tabell 1
    Ex. 1
    rad 1, kol 1 rad 1, kol 2

    Se mera om tabeller

  10. Annat

    11. 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.