Lathund för HTML-kodning Grunderna i dokumentet <HTML> Starttagg för Html-dokument, berättar för webbläsaren att här börjar det en sida med Html-koder. Hela dokumentet skall finnas inom dessa. <HEAD> Starttagg för huvudet, sidhuvud, platsen där man skriver in titeln. <TITLE> Här skall man skriva in titeln på sidan, en av de saker som sökmotorerna läser av. <BODY> Starttagg för själva sidan, alltså den del som visas i webbläsarens fönster. LEFTMARGIN= n Anger avståndet i antal punkter fån dokumentets vänstra sida till Webbläsarens vänstra kant. TOPMARGIN= n Anger avståndet i antal punkter från dokumentets övre kant till Webbläsarens övre kant. RIGHTMARGIN= n Anger avståndet i antal punkter från dokumentets högra sida till Webbläsarens högra kant. BOTTOMMARGIN= n Anger avståndet i antal punkter från dokumentets nedre kant till webbläsarens nedre kant. SCROLL=yes no Sätter på och stänger av rullningslister i webbläsaren <!--.--> Avänds för att göra kommentarer i HTML-koden. Påverkar ej kodningen av websidan och syns inte förutom som hjälp information i koden. Bakgrund BACKGROUND = bild.gif Används då vi vill att bakgrunden skall bestå av en bild. Storleken på bilden avgör hur den visas, som en bild eller som många bilder bredvid varandra. Koden för setta skrivs inom BODY taggen. Ex: <BODY BACKGROUND = bild.gif > BGCOLOR Skrivs inom BODY taggen om man önskar någon annan färg än grå på Sin hemsida. Följs av = BLACK eller någon annan av de sexton fördefinierade färgerna. Kan även följas av = #123456 eller något annat hexadecimaltalsvärde, de två första för röd, nästa två för grön och de två sista för blå = (RGB). Ex: <BODY BGCOLOR= #FF3300 > TEXT= färg Specificerar dokumentets genomgående textfärg Ex: <BODY TEXT= #0033FF >
LINK= färg Länkfärg. Specificerar dokumentets länkfärg. (standard blå, om inget annat Anges). Ex: <BODY LINK= #FFFF00 > ALINK= färg Aktiv länk. Specificerar aktiv länkfärg. Ex: <BODY ALINK= #00FFFF > VLINK= färg Besökt länk. Specificerar färgen för besökt länk. Ex: <BODY VLINK= #330033 > Skrivs ut tillsammans enligt följande: <BODY LINK= #8080FF VLINK= #FF0000 ALINK= #FFFF80 > Text <H1>RUBRIK</H1> Rubrikdefinitonstagg, består av H som står för heading, dvs rubrik samt en siffra mellan 1 och 6. 1 är störst och 6 minst. <H2 ALIGN=LEFT>Rubrik</H2> Rubriken justeras åt vänster. Ytterligare alternativ är: =CENTER Rubriken centreras. =RIGHT Rubriken justeras åt höger. Mellanrum i dokumentet <BR> Denna tagg skapar en radbrytning. <BR CLEAR=LEFT =RIGHT eller =ALL> Radbryter till slut. Används för att få radbrytningar där DU vill ha dem i texten. Tilllägget CLEAR används när du har en bild flytande på vänster sida om texten. (se bilder). Om du då använder ett vanligt <BR> så kommer nästa rad att börja precis under den nuvarande raden, om du istället använder ett <BR CLEAR=LEFT> så kommer den nya raden att börja vid sidans vänstra marginal, precis nedanför bildens undre kant. Om bilden ligger på höger sida om texten använder du <BR CLEAR=RIGHT> istället. <BR CLEAR=ALL> funkar bra när du har bilder på båda sidorna om texten (och inte vet vilken av bilderna som är störst). <P> Används för att skapa nytt stycke.   eller Används då man vill ha större mellanrum = mer än ett blanksteg. Är obrytbart mellanslag. <BLOCKQUOTE>.</BLOCKQUOTE nvänds när man vill lägga in längre stycken som separeras från resten av texten.(t.ex. Göra ett citatblock med indrag.).många browsers indenterar texten för att skilja den från resten av texten på sidan. De flesta HTML -taggar fungerar inom <BLOCKQUOTE> Används flera efter varandra på rad blir indraget större för varje gång. Ex: <BLOCKQUOTE>Text </BLOCKQUOTE> <CENTER>.</CENTER> Centrerar innehållet. Används för att centrera en rubrik, s tycke/n och bild/er. Används på samma sätt som <DIV ALIGN= center >
<DIV>.</DIV> Markerar ett eller flera stycken för formatering på sidan. Kombineras oftast med ALIGN= LEFT RIGHT CENTER eller JUSTIFY Ex: <DIV ALIGN= LEFT >Textblock</DIV> <P ALIGN>.</P> För att man skall kunna höger och vänsterställa samt centrera stycken. Följs av kommandon som = LEFT = RIGHT = CENTER = JUSTIFY <NOBR>.</NOBR> Står för No Break. Markerar att texten inte ska radbrytas (förhindrar radbrytning). Den här taggen kan du använda om du har en textsträng som webklienten absolut inte får radbryta. Kom ihåg att avsluta taggen ordentligt, annars kan du få väldigt långa rader. <WBR> Avstava här. (Bryt här vid behov) WBR står för Word Break. Talar om för browsern att det är tillåtet att lägga in ett radbrott på denna plats på raden om det skulle behövas. Används med fördel i långa ord i slutet av rader. Mellanrum i dokumentet i form av en linje <HR> Lägger in en horisontal linje på sidan. Kan kombineras med följande: <HR ALIGN= justering > Anger linjens justering. Du kan använda = LEFT = RIGHT eller = CENTER Ex: <HR WIDTH=70% ALIGN=RIGHT > <HR SIZE= n Anger linjens tjocklek (höjd i bildpunkter). Default (normalläge om inget anges alltså)är 1. Ex: <HR SIZE=8> <HR WIDTH= n Anger linjens bredd i bildpunkter av sidans bredd. Default (normalläge om inget anges alltså)är 1. Ex: <HR WIDTH= 3 > <HR WIDTH= n% Anger linjens bredd i procent av sidans bredd. Default är 100%. Ex: <HR WIDTH=60%> NOSHADE Användningen av noshade resulterar i att strecket förlorar sin 3D-effekt och blir platt, utan skugga. Ex: <HR WIDTH=20% ALIGN=RIGHT NOSHADE> Textstilar <B>.</B> Gör texten fetstil (Bold) <I>.</I> Italic, dvs gör texten kursiv <U>.</U> Underlined, dvs stryker under texten <S>.</S> gör att texten blir genomstryken. Alt <STRIKE> <SMALL>.</SMALL> Gör texten en storlek mindre
<BIG>.</BIG> Gör texten en storlek större <BASEFONT> Definierar egna egenskaper för standardtexten i dokumentet <SUB>.</SUB> Nedsänker texten <SUP>.</SUP> Upphöjer texten <PRE>.</PRE> Förformaterad text. Fast bredd. <PRE WIDTH= n >text</pre> Anger bredden på på bokstäverna.talar om för browsern att texten skall återges likadant som den står i HTML -filen. Texten återges med <TT> och alla mellanslag, radbrytningar och tabbar blir som i filen. Detta är bra för till exempel programlistningar eller när man har en text i ascii som man inte orkar göra om till korrekt HTML-kod. Det går att ange en maximal bredd (i tecken) för PRE-fältet, till exempel 80. Efter dessa 80 tecken kommer texten att radbrytas. OBS! Det går bra att lägga in länkar och ankare i PRE, de fungerar utmärkt. Undvik däremot alla andra taggar! <TT>.</TT> Skrivmaskinstext, ställer texten teletype, fast bredd. <BLINK>.</BLINK> Visar texten blinkande, kan endast användas i Netscape? Förändra ett ord eller text mitt i en mening, rad eller helt stycke <FONT>.</FONT> Formaterar din text <FONT COLOR> Tagg för att ändra färg på standardtexten, följs av = värde i form av ett hexadecimalt tal eller färgnamn Ex: <FONT COLOR= #FF0000 >Text </FONT> <FONT FACE> Används för att ändra typsnitt för standardtexten, åtföljs av = typsnittsnamn. Tänk på att ge fler alternativ, då typsnitten varierar från dator till dator. Flera typsnitt anges kommaseparerade. Ex: <FONT FACE= helvetica,arial,times >Text </FONT> <FONT SIZE> Tagg för att ange teckenstorlek på texten, skall även innehålla = ett värde mellan 1-7. Ett är minst och sju är störst.det går också att använda positiva eller negativa tal som utgår från standardstorleken Ex: <FONT SIZE = 6 >Text </FONT> Man kan även kombinera alla formateringar tillsammans; Ex: <FONT COLOR= #0034CC FACE= Helvetica,Arial SIZE= 5 >Text</FONT>
Listor <OL>.</OL> Gör en numrerad lista. Numrerade listor eller sorterade listor använder <OL> istället för <UL>. För övrigt är handhavandet identiskt med onumrerade listor. Ex: <OL> <LI> äpplen <LI> bananer <LI> apelsiner </OL> I WWW-klienten får detta följande utseende: 1. äpplen 2. bananer 3. apelsiner <OL COMPACT></OL> Visar en kompakt version av listan. TYPE= typ Specificerar typen av lista som ska användas. Du kan använda A, a, I, i eller l. Ex: <OL TYPE = A > (för hela listan) Ex: <LI TYPE= I > (denna och resten) START= n Nummer som listan ska börja med. Ex: <OL START = 1 > (för hela listan). Ex: <LI VALUE= 1 > (denna och resten) <UL>.</UL> Gör en onumrerad lista. Ex. på en sådan lista med tre elemen t. <UL> <LI> äpplen <LI> bananer <LI> apelsiner </UL> I WWW-Klienten får detta uts eende: äpplen bananer apelsiner <UL>COMPACT</UL> Visar en kompakt version av listan. TYPE= typ Typ av punkt som ska användas i en punktlista. Du kan använda circle disc eller square Ex: <UL TYPE= DISC > <LI> Gör en listrad i <OL> och <UL> (se ovan). TYPE= punkttyp Typ av nummer som ska användas i en nummerlista. Du kan använda A, a, I, i eller l. VALUE= n Startnummer för denna listrad och framåt i numrerade listor. <DL><DT><DD></DL> <DL> starttagg för att skaopa finitionslistor. Åtföljs av <DT> för att ange term, och <DD> för att ange definition.
<DL COMPACT></DL> Visar en kompakt version av listan. <MENY><LI></MENU> Menylista. (<LI> för varje post) <MENY COMPACT></MENU> Visar en kompakt version av listan. <DIR><LI></DIR> Kataloglista (<LI> för varje post) <DIR COMPACT></DIR> Visar en kompakt version av listan. Bilder <IMG> Taggen som lägger in en bild i dokumentet Ex: <IMG SRC= bildens_namn.gif SRC= filnamn Bildens filnamn. Det går också att använda en URL. LOWSRC= filnamn Den lågupplösta bildens filnamn. Det går också att använda en URL. ALIGN= justering Justeringen av bilden kan vara top, middle, bottom, left eller right. Ex: <IMG SRC= bildens_namn.gif ALIGN= RIGHT > ALIGN= justering Justeringen av bilden kan vara absbottom, absmiddle, baseline eller texttop ALT= text Beskrivning av bilden Ex: <IMG SRC= bildnamn.gif ALT= namn på bilden > BORDER= n Tjocklek på bildens ram, angiven i punkter. BORD ER= 0 syns ingen ram runt bilden. Ex: <IMG SRC= bildnamn.gif BORDER= 1 > HEIGHT= n Fixerad höjd av bilden, räknad i punkter. WIDTH= n Fixerad bredd av bilden, räknad i punkter. Ex: <IMG SRC= bilden.gif WIDTH=300 HEIGHT=184> HSPACE= n Horisontellt avstånd från bilden till omgivande objekt VSPACE= n Vertikalt avstånd från bilden till omgivande objekt. Ex: <IMG SRC= redknapp.gif HEIGHT=12 WIDTH=14 HSPACE=20 VSPACE=20> ISMAP Deklarerar att bilden är en imagemap. USEMAP= #namn Namnet på client -side imagemap. Namnet definieras i <MAP>. <MAP> </MAP> Samling av länkar för client-side imagemap.