In English

Hur man gör en enkel hemsida
HTML-koder
Länkar

Carins webbsida


Webmaster
Copyright © 2001,
Carin Olofsson

Senast uppdaterad:
5 maj 2001

Du är besökare nummer

sedan 19 augusti 2001.
 

Innehåll


Inledning

Efter exemplen har jag skrivit hur HTML-koden ser ut.

Om du vill slippa skriva hela koden själv kan du kopiera den direkt från den här sidan. Markera texten med koderna genom att hålla ner vänster musknapp och dra musen över texten så långt du vill kopiera den. Tryck sedan Ctrl-C för att kopiera texten. Öppna Anteckningar eller WordPad och tryck Ctrl-V för att klistra in texten.

För att se hur kodningen av ett dokument är gjord, välj View Document source (eller View Frame source om dokumentet har ramar) om du använder Netscape. Välj Visa Källa om du använder Internet Explorer. Du kan också spara dokumentet som HTML-dokument och titta på det i en texteditor (som till exempel Anteckningar eller WordPad).

Om du vill göra en anteckning för eget bruk på din sida kan du använda följande kod:
<!--Detta är en kommentar-->
Texten syns inte på sidan, men du kan läsa den i koden. Detta är till hjälp om du vill kommentera de olika delarna i dina sidor.

Till innehållsförteckningen

Namnge områden i ditt dokument

Så här namnger du olika områden i ditt dokument, för att enkelt förflytta dig mellan olika delar av dokumentet.

Börja med att namnge ett område. Detta skapar en länk till området någon annanstans i texten (men det är fortfarande på samma sida).
Så här namnger du områden i ditt dokument
Kod: <A HREF="#namnge">Så här namnger du områden i ditt dokument</A>

Sedan måste du ange var området börjar.
Namnge områden i ditt dokument
Kod: <A NAME="namnge">Namnge områden i ditt dokument</A>
Till innehållsförteckningen

Olika textformateringar

Så här skriver man fet stil och kursiv stil
Kod: <B>fet</B> och <I>kursiv</I>

Så här skriver man citerad text.
Kod: <CITE>citerad</CITE>

Det här är typografisk emfas i en text.
Kod: <EM>typografisk emfas</EM>

Det här är stark typografisk emfas i en text.
Kod: <STRONG>stark typografisk emfas</STRONG>

Till innehållsförteckningen

Marginaler

Här är några olika metoder för att åstadkomma marginaler på websidan:

Genom att använda "BLOCKQUOTE" så kan man skapa marginaler till höger och till vänster. Detta är bra om man vill ha lite mer lättlästa stycken.
Kod: <BLOCKQUOTE>Här skriver du texten.</BLOCKQUOTE>
    Genom att använda "UL", men utan "LI", får man också marginaler på texten, dock bara vänstermarginal. Du kan skriva in så långa texter du vill på det här sättet.
    Kod: <UL>Här skriver du texten.</UL>
Slutligen kan man använda "TABLE" och sätta BORDER=0. Välj hur bred vänstermarginalen skall vara genom att sätta valfritt tal på "CELLSPACING", t.ex. som här där CELLSPACING=30. Nackdelen är att det tar längre tid att ladda hem sidorna när man använder tabellformat. Dessutom blir det stora mellanrum före och efter tabellen. Ju större tal som används till CELLSPACING desto större blir mellanrummet.
Kod: <TABLE BORDER=0 CELLSPACING=30><TR>
<TD ALIGN="LEFT">Här skriver du texten.
</TD> </TR></TABLE>
Till innehållsförteckningen

Menylista

Detta är exempel på en menylista (mer kompakt än vanliga listor):

Mina favoritkattraser

  • Europeisk korthår
  • Norsk skogkatt
  • Maine coon
  • Birma
  • ...m.fl.
  • Kod: <MENU COMPACT>
    <LI>Text</LI>
    <LI>Etc...</LI>
    </MENU>
    Till innehållsförteckningen

    Ickeordnad lista (punktlista)

    Detta är exempel på en ickeordnad lista:

    Fördelarna med ickeordnade listor

    • Man kan lägga till så många punkter som behövs.
    • Man kan lägga till punkterna i vilken ordning som helst.
    • Texten kan vara kort.
    • Eller också kan texten vara så lång att den sträcker sig över flera rader och då är det risk för att läsaren tröttnar på innehållet och väljer att titta på något annat istället. Därför är det nog en fördel att vara kortfattad när man skriver listor.
    • ... man kan lägga till fler punkter efterhand.
    Kod: <UL>
    <LI>Text</LI>
    <LI>Etc...</LI>
    </UL>
    Till innehållsförteckningen

    Numrerad (ordnad) lista

    Detta är exempel på en numrerad lista:

    Mina tre favoritkattraser

    1. Europeisk korthår
    2. Norsk skogkatt
    3. Maine coon
    Kod: <OL>
    <LI>Text</LI>
    <LI>Etc...</LI>
    </OL>
    Till innehållsförteckningen

    Ljud

    Så här infogar du en ljudfil på din sida:



    Kod: <EMBED SRC="ljudfil.wav" AUTOSTART="false" WIDTH="146" HEIGHT="60" LOOP="false">

    Om du vill att musiken skall börja spela när sidan laddas, ändra Autostart från false till true.
    Om du vill att musiken skall fortsätta spela hela tiden, ändra Loop till true.
    Om du vill att musiken skall repeteras t.ex. 5 gånger och sedan sluta spela, ändra Loop till 5.
    Om du inte vill att spelaren skall synas på sidan, ändra Width och Height till 0.

    Till innehållsförteckningen

    Olika fontformateringar

    Den här texten är röd.
    Den här texten är också röd.
    Kod: <FONT COLOR=#FF0000>Den här texten är röd.</FONT>
    <FONT COLOR=RED>Den här texten är också röd.</FONT>

    Den här texten kommer att bli antingen Comic Sans MS, Arial eller Times New Roman, beroende på vilka fonter som finns installerade på din dator. (Detta fungerar inte med alla webläsare).
    Kod: <FONT FACE="Comic Sans MS ,Arial,Times New Roman">Här skriver du texten.</FONT>

    Det här är textfärg FF0000
    Kod: <FONT COLOR=#FF0000>Det här är textfärg FF0000</FONT>
    Det här är textfärg 000000
    Det här är textfärg C0C0C0
    Det här är textfärg FFFFFF
    Det här är textfärg 00FF00
    Det här är textfärg 0000FF
    Det här är textfärg FFFF00
    Det här är textfärg F0F0F0
    Det här är textfärg CCC000
    Det här är textfärg CC0000
    Det här är textfärg 00CC00
    Det här är textfärg AAA000
    Det här är textfärg AA0000
    Det här är textfärg 00AA00
    Det här är textfärg 0000AA
    Det här är textfärg 99FFFF
    Det här är textfärg FFFFCC
    Det här är textfärg 6633FF
    Det här är textfärg CC3333
    Det här är textfärg 8E2323
    Det här är textfärg 0085FF
    Det här är textfärg FF77AA
    Till innehållsförteckningen

    Tabell

    Så här kan en tabell se ut:

    Vänster kolumn med lite längre text


    Under konstruktion

    Höger kolumn med lite längre text

    Vänster kolumn med lite längre text


    Under konstruktion

    Höger kolumn med lite längre text


    Kod: <TABLE BORDER=1><TR>
    <TD WIDTH="300">
    <P ALIGN="CENTER"><FONT SIZE="3"><B>Vänster kolumn med lite längre text</B></FONT></P></TD>
    <TD WIDTH="220">
    <P ALIGN="CENTER"><IMG SRC="undercon.gif" ALIGN="BOTTOM" WIDTH="40" HEIGHT="38"><BR>
    <STRONG>Under konstruktion</STRONG></P></TD>
    <TD WIDTH="220"<
    <P ALIGN="CENTER"><B>Höger kolumn med lite längre text</B></P></TD></TR>
    <TR><TD WIDTH="300">
    <P ALIGN="CENTER"><FONT SIZE="3"><B>Vänster kolumn med lite längre text</B></FONT></P></TD>
    <TD WIDTH="220">
    <P ALIGN="CENTER"><IMG SRC="undercon.gif" ALIGN="BOTTOM" WIDTH="40" HEIGHT="38"><BR>
    <STRONG>Under konstruktion</STRONG></P></TD>
    <TD WIDTH="220">
    <P ALIGN="CENTER"><B>Höger kolumn med lite längre text</B></P></TD></TR>
    </TABLE>

    ...eller så här:

    Centrerad text över två kolumner

    Högerställd text

    • Listning fungerar i tabeller också
    • Nästa rad
    • Och ytterligare en rad


    Under konstruktion



    Kod: <TABLE WIDTH="100%" BORDER=15 CELLPADDING=10 CELLSPACING=20><TR>
    <TD COLSPAN=2 ALIGN="CENTER">
    <FONT SIZE="3"><B>Centrerad text över två kolumner</B></FONT></P></TD>
    <TD COLSPAN=1 ALIGN="RIGHT">
    <B>Högerställd text</B></P></TD></TR>
    <TR><TD COLSPAN=1>
    <UL><LI>Listning fungerar i tabeller också</LI>
    <LI>Nästa rad</LI></UL></TD>
    <TD COLSPAN=1>
    <UL><LI><A HREF="http://www.annansida.se/">Länk till annan websida</A></LI>
    <LI><A HREF="MAILTO: email@tillmig.se">Skicka e-post</A></LI></UL></TD>
    <TD COLSPAN=1>
    <P ALIGN="CENTER"><IMG SRC="undercon.gif" ALIGN="BOTTOM" WIDTH="40" HEIGHT="38"><BR>
    Under konstruktion</P></TD></TR></TABLE>

    Till innehållsförteckningen

    Släktträd

    Så här kan man göra ett släktträd med hjälp av en tabell:

    Jag

    Pappa

    Mamma

    Farfar

    Farmor

    Morfar

    Mormor

    Farfars far

    Farfars mor

    Farmors far

    Farmors mor

    Morfars far

    Morfars mor

    Mormors far

    Mormors mor



    Kod: <TABLE WIDTH="100%" BORDER=0>
    <TR><TD COLSPAN=8 ALIGN="CENTER">
    <FONT SIZE="3">Jag</FONT>
    <P ALIGN="CENTER"><IMG SRC="foto.jpg"</P></TD></TR>
    <TR><TD COLSPAN=4 ALIGN="CENTER">
    <FONT SIZE="3">Pappa</FONT>
    <P ALIGN="CENTER"><IMG SRC="foto.jpg"</P></TD>
    <TD COLSPAN=4 ALIGN="CENTER">
    <FONT SIZE="3">Mamma</FONT>
    <P ALIGN="CENTER"><IMG SRC="foto.jpg"</P></TD></TR>
    <TR><TD COLSPAN=2 ALIGN="CENTER">
    <FONT SIZE="3">Farfar</FONT>
    <P ALIGN="CENTER"><IMG SRC="foto.jpg"</P></TD>
    <TD COLSPAN=2 ALIGN="CENTER">
    <FONT SIZE="3">Farmor</FONT>
    <P ALIGN="CENTER"><IMG SRC="foto.jpg"</P></TD>
    <TD COLSPAN=2 ALIGN="CENTER">
    <FONT SIZE="3">Morfar</FONT>
    <P ALIGN="CENTER"><IMG SRC="foto.jpg"</P></TD>
    <TD COLSPAN=2 ALIGN="CENTER">
    <FONT SIZE="3">Mormor</FONT>
    <P ALIGN="CENTER"><IMG SRC="foto.jpg"</P></TD></TR>
    <TR><TD COLSPAN=1 ALIGN="CENTER">
    <FONT SIZE="3">Farfars far</FONT>
    <P ALIGN="CENTER"><IMG SRC="foto.jpg"</P></TD>
    <TD COLSPAN=1 ALIGN="CENTER">
    <FONT SIZE="3">Farfars mor</FONT>
    <P ALIGN="CENTER"><IMG SRC="foto.jpg"</P></TD>
    <TD COLSPAN=1 ALIGN="CENTER">
    <FONT SIZE="3">Farmors far</FONT>
    <P ALIGN="CENTER"><IMG SRC="foto.jpg"</P></TD>
    <TD COLSPAN=1 ALIGN="CENTER">
    <FONT SIZE="3">Farmors mor</FONT>
    <P ALIGN="CENTER"><IMG SRC="foto.jpg"</P></TD>
    <TD COLSPAN=1 ALIGN="CENTER">
    <FONT SIZE="3">Morfars far</FONT>
    <P ALIGN="CENTER"><IMG SRC="foto.jpg"</P></TD>
    <TD COLSPAN=1 ALIGN="CENTER">
    <FONT SIZE="3">Morfars mor</FONT>
    <P ALIGN="CENTER"><IMG SRC="foto.jpg"</P></TD>
    <TD COLSPAN=1 ALIGN="CENTER">
    <FONT SIZE="3">Mormors far</FONT>
    <P ALIGN="CENTER"><IMG SRC="foto.jpg"</P></TD>
    <TD COLSPAN=1 ALIGN="CENTER">
    <FONT SIZE="3">Mormors mor</FONT>
    <P ALIGN="CENTER"><IMG SRC="foto.jpg"</P></TD></TR>
    </TABLE>

    Till innehållsförteckningen

    Prislista

    Så här kan en prislista se ut:

    Art. IDBenämningPris exkl momsPris inkl moms
    Avsnittsrubrik
    NR001
    NR002

    Ny avsnittsrubrik
    NR003
    NR004

    Artikelnamn 123
    Artikelnamn ABC


    Artikelnamn 456
    Artikelnamn DEF

    1.000,00
    700,00


    700,00
    1.000,00

    1.250,00
    875,00


    875,00
    1.250,00


    Kod: <TABLE BORDER="5" CELLPADDING="10" CELLSPACING="0"><TR>
    <TH ALIGN="LEFT">Art. ID</TH><TH ALIGN="LEFT">Benämning</TH><TH ALIGN="LEFT">Pris exkl moms</TH><TH ALIGN="LEFT">Pris inkl moms</TH></TR>
    <TD VALIGN="TOP">
    Avsnittsrubrik<BR>
    NR001<BR>
    NR002<BR><BR>
    Ny avsnittsrubrik<BR>
    NR003<BR>
    NR004<BR></TD>
    <TD VALIGN="TOP"><BR>
    Artikelnamn 123<BR>
    Artikelnamn ABC<BR><BR><BR>
    Artikelnamn 456<BR>
    Artikelnamn DEF<BR></TD>
    <TD VALIGN="TOP" ALIGN="RIGHT"><BR>
    1.000,00<BR>
    700,00<BR><BR><BR>
    700,00<BR>
    1.000,00<BR></TD>
    <TD VALIGN="TOP" ALIGN="RIGHT"><BR>
    1.250,00<BR>
    875,00<BR><BR><BR>
    875,00<BR>
    1.250,00<BR></TD>
    </TR></TABLE>

    Till innehållsförteckningen

    Tabell med bakgrundsfärg

    Så här ser prislistan ut med bakgrundsfärg inlagd (fungerar inte med alla webläsare):

    Art. IDBenämningPris exkl momsPris inkl moms
    Avsnittsrubrik
    NR001
    NR002

    Ny avsnittsrubrik
    NR003
    NR004

    Artikelnamn 123
    Artikelnamn ABC


    Artikelnamn 456
    Artikelnamn DEF

    1.000,00
    700,00


    700,00
    1.000,00

    1.250,00
    875,00


    875,00
    1.250,00


    Kod: <TABLE BORDER="10" CELLPADDING="10" CELLSPACING="0" BGCOLOR=#FF00FF> <TR>
    Resten av koden är exakt likadan som i exemplet ovan.
    Till innehållsförteckningen

    Bilder

    Så här ser jag ut:

    Text justerad i bildens överkant

    Kod: <A HREF="foto.jpg"><IMG SRC="foto.jpg" BORDER=3 ALIGN="TOP" WIDTH="100" HEIGHT="145"> Text justerad i bildens överkant</A>

    Här är en bild på min katt Frida när hon hoppar mellan köksdörrarna:

    Text justerad i bildens mitt

    Kod: <A HREF="foto.jpg"><IMG SRC="foto.jpg" BORDER=3 ALIGN="MIDDLE" WIDTH="355" HEIGHT="162"> Text justerad i bildens mitt</A>

    Här är en bild på mina katter Frida och Fritte:

    Text justerad i bildens nederkant

    Kod: <A HREF="foto.jpg"><IMG SRC="foto.jpg" BORDER=3 ALIGN="BOTTOM" WIDTH="251" HEIGHT="119"> Text justerad i bildens nederkant</A>
    Till innehållsförteckningen

    Så här kommer Du i kontakt med mig

    E-post adress
    carin@hembygdshistoria.se

    Webadress
    http://www.algonet.se/~carin_o/

    Kod: <ADDRESS>
    <STRONG>E-post adress</STRONG><BR>
    <A HREF="mailto:email@tillmig.se">email@tillmig.se</A><BR><BR>
    <STRONG>Webadress</STRONG><BR>
    <A HREF="http://www.minsida.se/">http://www.minsida.se/</A>
    </ADDRESS>

    Upp