Här följer dom vanligaste och enklaste taggar. Det är långt ifrån alla men dom räcker för att göra en enkel hemsida.
Det viktigaste av allt är att prova, prova och åter prova. Det är det bästa sättet att ta reda på om det fungerar.

Meny
Logiska formtaggar
Länkar
Listor
Tabeller
Frame eller Ramar som det även kan kallas.
Utökade Html koder för Netscape

Tillbaka till första sida

LOGISKA FORMATTAGGAR!  Tillbaka till Menyn

SAMP = Detta är ett fixerat typsnitt dvs. VIKTIGT.
BR = Radbrytning
KBD = keyboard - Då man vill visa att något ska knappas in på tangentbordet
EM = EMPHASIS - framhäver texten
STRONG = texten betonas starkt

P = när stycket är slut, alltså mellanrum mellan raderna


CODE = andväns vid uppläggning av kodsnuttar. Lämpar sig inte för längre längre text.
VAR = variabler - För att skilja variabler från vanlig text. Vanligtvis så blir dom kursiva.
CITE = citat - Passar bra för att markera ett citat. Vanligtvis så blir texten kursiv.
BLOCKQUOTE = Andväns vid långa citat. Inleds och avslutas på ny rad. Dessutom så blir det ofta kursivt eller så skjuts vänster marginalen in en smula.

ADRESS = Ett ställe att skriva e-postadress eller liknande. Teckensnitt???
BIG = Ger stor storlek på texten
SMALL = Ger liten storlek på texten

FYSISKA FORMATTAGGAR

B = Bold - Fet stil
I = Italic - Kursiv stil

 PRE = Preformatted - visar texten nästan exakt som i Html 
filen med alla mellanslag och enter ned slag

TT = Typeriter text - Text typ skrivmaskin. Både "SAMP" och "KBD" är att föredra.
< !--Detta är en kommentar som inte syns på webben--> Förgående syns inte på webben.
HR = Horisont linje.

SPECIAL KODER

Tecken Numerisk kod Teckenkod
å &#229; &aring;
ä &#228; &auml;
ö &#246; &ouml;
Å &#246; &ouml;
Ä &#196; &Auml;
Ö &#214; &Ouml;
Fast mellanslag &#160 &nbsp;
Copyright &#169 &copy;
< &#60; &lt;
> &#62; &gt;
& &#38; &amp;
" &#34; &quot;

LÄNKAR  Tillbaka till Menyn
Bild länkar Länkar till fragment

Sökverktyg
Ovan i Html står det <A HREF="http://www.infoseek.com"> Sökverktyg </A>
<A = ankare HREF> =destinationen </A> = slut tagg.

Maila mej!
Här ovan står det <A HREF="mailto:fam.jons@swipnet.se">Maila mej!</A>
<A = Ankare HREF> = Destination, i detta fallet min E-mail adress. </A> = Slut tagg.

LÄNKAR TILL FRAGMENT
Du måste förutom att referera till en speciell plats, dessutom lägga in en markering där mottagningen av referensen skall vara. Tex. <A HREF="kap1"> Länk till kapitel 1 </A> Detta är Länken.
<A NAME="kap1"> Kapitel 1 </A> Detta är mottagar markeringen som du här döper till "kap1".
<IMG SRC="comp20.jpg"> IMG = Image SRC = Sorce
<IMG SRC="comp20.jpg" ALT="text"> ALT = Alternativ text om inte bilden laddas
<IMG SRC="comp20.jpg" ALIGN=RIGHT eller LEFT eller BOTTOM eller MIDDLE eller TOP> Detta på verkar texten runtom bilden.
PJ <IMG SRC="comp20.jpg" ALT="PJ" ALIGN=RIGHT>
 Detta innebär att
flera rader kommer att hammna
sidan om bilden.

<BRCLEAR=RIGHT>Här fortsätter nu texten under bilden när höger marginalen är rak. Detsamma gäller om man skriver "CLEAR=LEFT" alt. "CLEAR=ALL"
Det finns även ABSBOTTOM, ABSMIDDLE, ABSTOP och BASELINE. Dessa är nya. Prova och kolla om det är något att ha.
Bilderna kan även centreras med <ALIGN=CENTER>
 
Bilderna kan även anges med storlek i pixel räknat. Detta för att webben i förväg skall veta ver texten skall fortsätta fast inte bilden är färdig laddad. Detta skrivs så här <IMG SRC="comp20.jpg" ALT="storlek" WIDTH=107 HEIGHT=85>

Bild länkar gör du så här
bild <A HREF="storbild.jpg"><IMG SRC="litenbild.jpg" ALT="bild"></A>
Här är "storbild.jpg" målet för länken och "comp20.jpg" själva länken. ALT står som bekant för texten under bilden.
<BACKGROUND="bakgrund.jpg"> Bakground = Bakgrunds bild.
Ljud fil  <A HREF="konsult.au">Ljud fil</A>
Här länkar jag helt enkelt till en ljudfil "konsult.au"
Detta låter sig även göras med video filmer eller andra filer. Men tänk på att det kan ta för lång tid att ladda ner om filerna är förstora.

LISTOR  Tillbaka till Menyn

Oordnad lista Ordnad lista Katalog lista  Meny lista Definitions lista Nästlad lista

Exempel på en Oordnad lista

Du behöver följande ingredienser för att göra pannkakor:

Man behöver även lite fett att steka i.

Så här ser kodningen ut
Exempel på <EM>en oordnad lista</EM>:
<P>Du behöver följande ingredienser för att göra pannkakor:</P>
<UL>  UL = Unordered List.
<LI>Mjöl  LI = List Item
<LI>Salt
<LI>Mjölk
<LI>Ägg
</UL>
<P><Man behöver även lite fett att steka i.</P>

Listor

Exempel på en Ordnad Lista

Så här gör man pannkakor: (3-4 pers.)

  1. Blanda 2,5 dl vetemjöl med 1/2 tsk salt.
  2. Vispa ner 6 dl mjölk i små omgångar.
  3. Rör i tre ägg, ett i taget.
  4. Bryn fett i stekpannan och stek en lagom stor mängd smet på båda sidorna.

Servera med sylt och vispad grädde.

Exempel på en <EM>Ordnad Lista </EM>
<P>Så här gör man pannkakor: (3-4 pers.) </P>
<OL>  OL = Ordered List. Även kallad Numrerad Lista
<LI>Blanda 2,5 dl vetemjöl med 1/2 tsk salt.
<LI>Vispa ner 6 dl mjölk i små omgångar.
<LI>Rör i tre ägg, ett i taget.
<LI>Bryn fett i stekpannan och stek en lagom stor mängd smet på båda sidorna.
</OL>
<P>Servera med sylt och vispad grädde. </P>

Listor

Exempel på en Katalog lista

Vanliga vinterfåglar

  • Talgoxe
  • Domherre
  • Grönfink
    • Exempel på <EM>Kataloglistor</EM>
    <h3>Vanliga vinterfåglar</h3>
    <DIR>  DIR taggen är nästan samma som UL. Meningen är att presentera listan i spalter
    <LI>Talgoxe
    <LI>Domherre
    <LI>Grönfink
    </DIR>

    Listor

    Exempel på en Menylista

    Tidningar

  • Svenska Dagbladet
  • Dagens Nyheter
  • Aftonbladet
  • Expressen
    • Exempel på <EM>Menylistor</EM>
    <h3>Tidningar</h3>
    <MENU>  Dessa är också ganska lika UL men ska egentligen presenteras på ett kompaktare sätt.
    <LI>Svenska Dagbladet
    <LI>Dagens Nyheter
    <LI>Aftonbladet
    <LI>Expressen
    </MENU>

    Listor

    Exempel på en Definitions lista

    Sminkbegrepp

    Kajal
    Ögonpenna, ofta svart, som man målar med runt ögat.
    Läppenna
    Penna som förstärker läppens konturer
    Mascara
    Färgkräm att måla ögonfransarna med
    Concealer
    Hudärgad kräm med vilken man döljer blemmor
    Exempel på <EM>Definitionslistor</EM>
    <h3>Sminkbegrepp</h3>
    <DL>  DL = Definitions lista.
    <DT>Kajal  DT = Term som ska definieras.
    <DD>Ögonpenna, ofta svart, som man målar med runt ögat.  DD= Själva definionen.
    <DT>Läppenna
    <DD>Penna som förstärker läppens konturer
    <DT>Mascara
    <DD>Färgkräm att måla ögonfransarna med
    <DT>Concealer
    <DD>Hudärgad kräm med vilken man döljer blemmor
    </DL>

    Klädesplagg

    Hot pants
    Korta åtsittande byxor i töjbart tyg.
    Omlottkjol
    Kjol som man knyter runt sig.
    <H3>Klädesplagg</H3>
    <DL COMPACT>  DL COMPACT = Samma som DL men den skall bli kompaktare. Tyvärr så funkar det inte så bra i Netscape
    <DT>Hot pants
    <DD>Korta åtsittande byxor i töjbart tyg.
    <DT>Omlottkjol
    <DD>Kjol som man knyter runt sig.
    </DT>

    Listor

    Exempel på en Nästlad Lista

    Köp av tapeter

    1. Välj ett tilltalande mönster
    2. ta reda på priset
    3. Kontrollera
    Exempel på <EM>en Nästlad Lista </EM>
    <h2>Köp av tapeter </h2>
    <OL>   Här finns inga nya "taggar" det är bara ordningen som är annorlunda. Först kommer en ordnad lista därefter en oordnad lista.
    <LI>Välj ett tilltalande mönster
    <LI>ta reda på priset
    <LI>Kontrollera
    <UL>
    <LI>Färgens hållbarhet i ljus
    <LI>Tvättningsmöjligheter
    <LI>mönsterpassning
    </UL>
    </OL>

    Listor

    Då så är väl allting solklart, eller?

    TABELLER  Tillbaka till Menyn
    Smälta ihopa en eller flera celler Tabell finesser

    Grundregeln är att alla HTML-tabeller måste inledas med start taggen <TABLE>, och dom måste avslutas med sluttaggen </TABLE>
    Om man ger attributet BORDER till starttaggen <TABLE> kommer tabellen att se ut som en traditionell sådan, med snygga linjer runt alla cellerna.
    Om man vill ha en "osynlig" tabell struntar man i att ge det attributet.
    Under själva konstruktionsarbetet är det emellertid ofta bra att se kanterna.

    Om man vill ge sin tabell någon form av beskrivning skriver man <CAPTION>Tabell Rubrik <CAPTION>.
    Observera att taxten inte hamnar i tabellen utan strax ovanför den.
    Man kan bestämma var genom att använda ALIGN. Tex. <CAPTION ALIGN=BOTTOM>

    En adressbok
    Namn Adress telefonnummer
    Lena Jönsson Sofiagatan 5 0411-42668
    Inga-Lill Lydahl Långgatan 8 0411-43861
    Gudrun Lindqvist Snapphanevägen 3c 044-47379

    Så här ser kodningen ut för ovanstående.

    <TABLE BORDER>  Table = Tabell.   Border = Synliga ramar.
     <CAPTION ALIGN=BOTTOM>  Caption = Beskrivnings text.   Align = Var beskrivnings texten ska hamna tex. Top, Bottom.
    <CITE>En adressbok</CITE>  Cite = Text typ.
     </CAPTION>
      <TR>   TR = Tabel Row   Indikerar en rad.
       <TH>Namn</TH>   TH = TabelHeading.   Detta är en rubrikcell. Här ger man en rad eller en kolumn en förklaring.
       <TH>Adress</TH>
       <TH>telefonnummer</TH>
      </TR>
      <TR>
       <TD>Lena Jönsson</TD>   TD = Table Data.   Detta är en Datacell. Här skriver man data, tex. siffervärden eller text, man kan också placera en bild här.
       <TD>Sofiagatan 5</TD>
       <TD>0411-42668</TD>
      </TR>
      <TR>
       <TD>Inga-Lill Lydahl</TD>
       <TD>Långgatan 8</TD>
       <TD>0411-43861</TD>
      </TR>
      <TR>
       <TD>Gudrun Lindqvist</TD>
       <TD>Snapphanevägen 3c</TD>
       <TD>044-47379<TD>
      </TR>
    </TABLE>
    I en vanlig cell
    hamnar texten till
    vänster på cellens mitt
    om man använder
    grundinställningarna.    		 I en rubrikcell
    är texten precis i mitten.
    Men här är inställningarna
    för hela raden ändrade.    		 Då kan det se ut så här.
    Här är också radens
    inställningar ändrade    		 Men om cellen också
    har en inställning
    är det den som gäller!
    <TABLE BORDER>
      <TR>
        <TD>I en vanlig cell<BR>
         hamnar texten till<BR>
         vänster på cellens mitt<BR>
         om man använder<BR>
         grundinställningarna.</TD>
        <TH>I en rubrikcell<BR>
         är texten precis i mitten.</TH>
      </TR>
      <TR ALIGN=CENTER VALIGN=BOTTOM>   ALIGN ändrar placeringen horisontellt. Tex LEFT, CENTER eller RIGHT.    VALIGN ändrar placeringen vertikalt. Tex. TOP, MIDDLE eller BOTTOM . Om man ger attributet till radtaggen <TR> så gäller inställningen hela raden. Om man ger det till en cell <TH> och <TD> så gäller den i cellen, oavsett om raden har en annan inställning.
        <TH>Men här är inställningarna<BR>
     &n bsp;   för hela raden ändrade.</TH>
        <TD>Då kan det se ut så här.</TD>
      </TR>
      <TR ALIGN=RIGHT VALIGN=TOP>
        <TD>Här är också radens<BR>
         inställningar ändrade</TD>
        <TD VALIGN=BOTTOM ALIGN=LEFT>
         Men om cellen också<BR>
         har en inställning<BR>
         är det den som gäller!</TD>
      </TR>
    </TABLE>

    Smälta ihopa en eller flera celler Tabeller

    COLSPAN = Antal kolumner som cellen ska sträcka sig över.
    ROWSPAN = Antal rader som cellen ska sträcka sig över.
    En liten betygstabell
    Elever
    Magnus Henning Ronnie
    Betyg Matematik MVG G MVG
    svenska MVG VG VG
    <TABLE BORDER>
    <CAPTION> En liten betygstabell</CAPTION>
      <TR>
        <TD COLSPAN=2 ROWSPAN=2></TD>   Här anger jag att datacellen skall vara 2 kolumner bred och 2 rader hög. Efter som ingen text är angiven så blir cellen tom.
        <TH COLSPAN=3>Elever</TH>   Här anger jag att rubrikcellen med texten "Elever" skall vara 3 kolumner bred.
      </TR>
      <TR>
        <TH>Magnus</TH>
        <TH>Henning</TH>
        <TH>Ronnie</TH>
      </TR>
      <TR>
        <TH ROWSPAN=2>Betyg</TH>    Här ager jag att rubrikcellen med texten "Betyg" skall vara 2 rader hög.
        <TH>Matematik</TH>
        <TD>MVG</TD>
        <TD>G</TD>
        <TD>MVG</TD>
      </TR>
      <TR>
        <TH>svenska</TH>
        <TD>MVG</TD>
        <TD>VG</TD>
        <TD>VG</TD>
      </TR>
    </TABLE>

    Extra tabell finesser Tabeller

    Här kommer lite olika former på tabellerna.

    Förklaringar:
    BORDER: Här kan man ställa in ramens tjocklek, tex. <TABLE BORDER=8>
    CELLPADDING: Här kan man tala om hur stort avståndet ska vara i bildpunkter räknat,
          från cellens innehåll till cellens kant, tex. <TABLE BORDER CELLPADDING=8>
    CELLSPACING: Här talar vi om hur tjocka linjer som går mellan cellerna,
      räknat i bildpunkter, tex. <TABLE BORDER CELLSPACING=8>
    WIDTH: Detta talar om hur bred hela tabellen ska vara. Man kan ange hur många
      bildpunkter bredden ska vara, eller också kan man ange bredden i procent av
      själva web-fönstrets bredd. Tex. <TABLE BORDER WIDTH=75%> eller < TABLE BORDER WIDTH=120>
    Man kan också använda <TH> och <TD> och på så sätt styra hur breda cellerna ska vara i förhållande till varandra.
    Det går också bra att lägga en bakgrunds färg i cellerna. Då använder man tex. <TD BGCOLOR="RED">
    Bra surfställe
    Malibu BeachKTH

    Supermodeller
    Cindy CrawfordClaudia Schiffer

    OriginalLook-alike
    BarbiePamela Anderson

    Inte lika som bär
    BlåbärBjörn bär

    Flörtningstips
    Borsta tändernaVissla

    UrsprungKopia
    Carl XVI GustavB. Parnevik

    Konstiga tabeller....
    Coola typer från USA
    CoolioL.L. Cool J
    och Sveriges svar:
    Papa Dee Björn Borg

    Tabeller

    FRAME  Tillbaka till Menyn
    <FRAME> utgör en egen HTML fil.
    Där skall inte <BODY> finnas med i bland taggarna.
    <FRAMESET>     utgör start taggen.
    Inne i start taggen skall attributen ROWS eller COLS finnas med (eller båda).
    Efter attributen anger man hur stor del av ramen som respektive rad eller kolumn ska upp ta.
    Detta göres antingen i procent eller i ett visst antal bild rutor. Här tar jag bara upp procenten.
    Tex. <FRAMESET COLS="20%,80%">
    Man måste även ange vilka Html filer som skall visas i viken ram.
    Tex.<FRAMSET COLS="35%,65%>
    <FRAME SRC="listtagg.htm"> (Denna hamnar i den först nämnda kolumnen dvs. 35%)
    <FRAME SRC="taggar"> (Denna hamnar i näst nämnda kolumn dvs. 65%)
    </FRAMESET>

    Man kan även göra nya ramar i dom som redan finns.
    Tex. <FRAMESET COLS="30%,70%">
    <FRAME SRC="listtagg.htm">
    <FRAMESET ROWS="40%,60%">
    <FRAME SRC="tabeller.htm">
    <FRAME SRC="taggar.htm">
    </FRAMESET>
    </FRAMESET>
    I COLS="70%" finns det ingen egen fil utan den är indelad i två rader som vardera har en egen fil.

    Man behöver inte ange procenten upp till det maximala 100%.
    Tex.
    <FRAMESET COLS="30%,40%,*>
    Här får du två kolumner på 30% respektive 40%. * betyder att resten skall tillfalla den sista kolumnen.

    <FRAME MARGENHEIGHT=8>
    Detta innebär att höjden på marginal linjen skall vara 8 bildpunkter.
    MARGINWIDHT talar om hur bred marginal linjen skall vara.
    <FRAME NORESIZE> betyder att surfaren inte kan ändra ramens storlek.
    <FRAME SCROLLING=NO> betyder att inga rullnings lister kommer att visas.
    SCROLING=YES betyder att rullnings listen alltid visas.
    SCROLLING=AUTO låter att webläsaren bestämma det själv.
    Tillbaka till Menyn Tillbaka till första sida

    Huvud delen av informations materialet är hämtat ifrån Jesper Ek, Svante Hellstadius bok Lätt pocket om Html. Jag tror inte att dom har något emot det.
    I så fall så får dom väl höra av sig.