Olika fonter (textstorlekar), färger
Om du inte anger vilken textstorlek du vill ha blir det enligt standard. De
flesta browsers brukar använda Times New Roman 12 pt som standard-font, såvida du inte själv ändrat i inställningarna.
Denna text är skriven i default-storlek. Jag har alltså inte angivit någon
<font size="+/-x">. Numera är font nedskrivet i HTML 4.0 (finns med i HTML 4.0 Transitional) men det innebär ju inte med automatik att taggen font inte längre kommer att kunna tolkas av våra browsers. Men på sikt ska/bör du använda Style Sheets istället.
Vill du öka/minska storleken kan du använda -2 till +4 (relativa värden). Du kan även ange absoluta värden, siffrorna 1
till 7, men gör till en vana att ange relativa värden. Observera att här ska värdet citeras, då det innehåller ett - eller + tecken.
Vill du förändra din text-storlek i hela ditt dokument (gäller ej tabeller i dokumentet) och inte bara en del så kan du använda
<basefont size=x> där x står för en siffra mellan 1 och 7. Har ingen sluttag och skrives
direkt efter BODY-taggen, samt i Internet Explorer kan du ange face (se lite längre ned på denna sida)
<basefont size="4" face="wide latin,algerian">.
<font size="-2">din
text</font>
<font size="-1">din
text</font>
Standardstorlek, ingen font-storlek behöver anges
<font size="+1">din
text</font>
<font size="+2">din
text</font>
<font size="+3">din
text</font>
<font size="+4">din
text</font>
Färg får du genom att koda
<font color="#färgens hexadecimala-kod">texten</font>,
man kan göra hemsidan färglad och intressant utan att ha miljoner bilder som bara tar tid att ladda ned för besökaren.
Färg
häftigt
va?
<font color="#00ffff" size="+3">Färg</font>
<font color="#ff00ff" size="+2">häftigt</font>
<font color="#00ff00" size="+1">va?</font>
Fler exempel på färger och dess hexadecimala koder hittar du här.
<font color="#ffff00"> gult </font>
<font color="#990000"> brunt </font>
<font color="#cc00ff"> lila </font>
<font color="#ff9900"> orange </font>
<font color="#00ff00"> grönt </font>
<font color="#ff0000"> rött </font>
<font color="#0000ff"> blått </font>
<font color="#00ffff"> turkos </font>
<font color="#ffccff"> rosa </font>
<font size="xx"></font> koden ger dig möjlighet
att leka lite med din text.
V
ä
l
k
o
m
n
a
V
<font size="+1">ä</font>
<font size="+2">l</font>
<font size="+3">k</font>
<font size="+4">o</font>
<font size="+3">m</font>
<font size="+2">n</font>
<font size="+1">a</font>
<BIG>Netscape</BIG> och
<SMALL>Internet Explorer </SMALL>ger en ökning
respektive minskning av standard teckenstorleken med ett steg.
Vill du göra en snygg anfang? Dvs. det första ordet i ett
stycke visas med stor bokstav.
En anfang!
<font size="+3">E</font>n anfang!
Ändra teckensnitt
Du kan ändra teckensnitt med <font face="teckensnitt">. Det visas
då hos den som gästar din sida såvida han eller hon har
det teckensnittet installerat på sin dator. Det bästa är
att ge några andra alternativ också. Har de inte dem heller
ser de texten i sitt default-teckensnitt. En bra kombination för både PC och Mac är
<font face="verdana,geneva,arial,helvetica">
Min Hemsida
<font face="arial,helvetica" size="+4">Min hemsida</font>
| PC-typsnitt | Mac-motsvarighet |
| Arial | Helvetica |
| Times New Roman | Times |
| Courier New | Courier |
| MS Serif | New York |
Rubriker
Rubriker, headings anges från h1 till h6. Stilen blir fetare än vanlig normal text och du kan jämföra med Words formatmallar vilket innebär att h1 har störst betydelse.
Vill du centrera rubriken anger du
<h1 align=center>Heading 1</h1>
Du kan även justera rubriken höger och vänster. Byt ut center mot
right eller left, men left är standard och behöver inte kodas
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
Formatering
Vill du ha nytt stycke, skriv <p>. Det finns faktiskt en sluttag </p>.
Det fungerar utan denna, men varför inte göra till en vana att avsluta
styckena med </p>. Det kan vara bra att ha sluttaggen om du använder
<p align="xxxxx"> (se under Justering) vid stycke-justering och sedan lägger en tabell
efter. Då bryts justeringen ordentligt och du slipper få tabellen justerad också vilket kan förekomma i den del browsers.
Vill du avsluta en rad utan att ha nytt stycke, skriv <br>, ingen sluttagg.
Vill du ha flera tomma rader efter varandra i ditt dokument så använd <pre> - taggen, se nedan.
Taggen <br> har några attribut som kan vara bra om du har använt någon justering innan:
<br clear="right"> om du vill göra en radbrytning till närmast lediga marginal
<br clear="left"> som ovan men till vänster
<br clear="all"> flyttar ex. efterföljande text till närmast lediga ny rad.
<nobr>radens innehåll</nobr> hindrar browsern att bryta en rad.
Vill du ha bara ha några hopp (mellanslag) fram till nästa ord
är koden för mellanslag   eller det antal gånger som du vill ha mellanslag. Att göra mellanslag i koden utan att koda om dem innebär att de inte kommer att synas på sidan.
Sitter du och skriver i en textredigerare och glömmer taggarna för nytt stycke,
radbrytningar och extra mellanslag på HTML-språk kommer du att bli besviken när du sedan
ser resultatet. Browsern kommer helt enkelt att strunta i din egna
formateringar om du inte har skrivit dit de taggar som krävs.
Du kan använda <pre></pre>
för att innesluta en längre textmassa för att få den
så som du vill.
När man skriver innanför pre-taggarna
så syns alla
radbrytningar och mellanslag du gör
i editorn utan att dessa behövs kodas om.
Bra till
en snabb
tabell kanske
Du ser att texten skiljer sig från annan text,
formatted kallas den.
Pre-taggarna är jättebra om man vill ha lite luft på sidan. Eftersom du inte
skriver något innanför pre-taggarna, utan bara gör x antal mellanslag i editorn är det ingen text som förändras till utseende.
Vill du se ett till exempel på hur pre-taggen kan användas?
Kika in här!
Du kan skriva kursivt, Italic
<i>Du kan skriva kursivt, Italic</i>
Du kan skriva fetstil, bold
<b>Du kan skriva fetstil, bold</b>
Du kan skriva med fast bredd
<tt>Du kan skriva med fast bredd</tt>
Understruket, underline
<u>Understruket, underline</u>
Genomstruket, strikethrough
<strike>Genomstruket</strike>
Exponent 3x
Exponent 3<sup>x</sup>
Variabeln y
Variabeln <SUB>y</SUB>
Detta är ett citat
<cite>Detta är ett citat</cite>
Så här skrivs en kod
<code>Så här skrivs en kod</code>
Detta är en logisk betoning
<em>Detta är en logisk betoning</em>
Detta är en logisk stark betoning
<strong>Detta är en logisk stark betoning</strong>
En Netscape-specifik tagg som ger blinkande text är
<blink>Blinkande</blink>
Address-taggen används till bl.a adresser och e-mail dvs. kontaktinformation.
Visas ofta i kursiv stil, se nedan.
<address>Annica Tiger och du får resultatet nedan
<a href="mailto:a_t@tele2.se">E-mail</a>
</address>
Men vill du att din e-mail adress ska synas vid utskrift av sidan är det mer lämpligt att du skriver in den istället för att bara skriva E-mail. Mer om mailto hittar du under avsnittet Formulär.
<address>
Annica Tiger
<a href="mailto:a_t@tele2.se">a_t@tele2.se</a>
</address>Annica Tiger a_t@tele2.se
En textavgränsare får du genom att skriva så här,<hr>.
OBS. Ingen sluttagg.
I Internet Explorer kan man färga sin avgränsare,
<hr color="blue">.
Du kan få en avgränsare utan skugga, <hr noshade>
Du kan ändra storleken, här <hr width="50%" size="3">,
du kan justera den med<hr align=center width="50%" size="3"> eller right/left
Glöm ej citera %.
Justering
Du kan skriva vänsterjusterat
<p align="left">
standard, behöver ej anges
Du kan skriva centrerat
<p align="center">Du kan skriva centrerat
Du kan skriva högerjusterat
<p align="right">Du kan skriva högerjusterat
Är det en större del av sidan du vill justera, kanske en tabell,
en bild och text? Då kan du använda <div align="center">
det som ska justeras</div>, byt ut center mot right om det ska högerjusteras och left är standard och behöver ej anges.
Man kan även centrera genom
att använda <center>det som ska centreras</center>, men den taggen är under avskrivning i HTML 4.0.
<blockquote>texten som ska citeras</blockquote> används vid längre stycken
av citat eller liknande. Visas ofta med indrag vänster-högermarginal.
Detta visas ofta med ett indrag på vänster/höger sida. Användningsområde är till långa citat.. Alla browsers gör inte indrag. En del visar indraget i kursiv stil och en del texten i ex. blått. Därför använd exempelvis tabell-metoden vid indrag av rent layout-mässiga skäl. Se nedan under Indrag hur man gör då.
Indrag, marginaler
När du ska göra indrag i din text använd absolut inte "list-indrag".
Visst finns det snabb-knappar i ex. WYSIWYG-editorn i Netscape för indrag. Men använd
icke dem om du vill ge ett proffsigt intryck eller koda felfritt. Du kan aldrig ha
<ul>indragen text</ul>. Taggen ul måste alltid åtföljas av list-taggar (li), se under
avsnittet Listor.
Det finns ett flertal sätt att göra indrag på. Jag har listat 5 olika sätt för
den eventuellt intresserade. Kliv in här får du se.
Ibland kanske man vill få bort *tomrummen* som visas som standard på sidan i marginalerna. Ett sätt som funkar (är dock ej enligt rekommendationen) på både NS och MSIE är att i body-taggen skriva in:
topmargin=0 leftmargin=0 marginwidth=0 marginheight=0
Skriva text i kolumner/tabeller
Det går att skriva in sin text i kolumner. Snabbast och enklast,
gör en tabell som består av två eller fler celler, för att få bägge cellerna i samma läge upptill justeras de via valign=top i tr, läs mer om detta i avsnittet Tabeller. Så
här ser koden ut i editorn för två spalter. Här kan du se du ett exempel hur det
kommer att se ut. När du jobbar med text i tabeller och använder font size för att öka/minska fonten kan det bli oönskat *space* mellan de två sista raderna, kika in här så får du se ett exempel.
<table cellpadding="5">
|
Länkar, ankare
Nu har vi kommit till det nästan viktigaste. Länkarna, för
vad vore en hemsida utan länkar. Det är ju det som webben bygger
på.
Vi börjar med att länka till andras sidor. Först bestämmer du dig för vilket ord eller vilken del av texten som ska länkas. (Länka bilder tar jag upp under Grafik, men principen är detsamma. Sedan måste du ha URL-adressen dit länken ska leda. Det är mycket viktigt att alla bokstäver och konstiga tecken kommer i rätt ordning, annars kommer man ingen vart. Viktigt att du även skiljer på stora och små bokstäver. Står det INDEX.html måste du skriva så i länken också, se mer om detta under Html, filnamn/sökvägar.
Jag valt att ordet Netscape ska länkas till Netscapes hemsida. Du ser att ordet är understruket och har en annan färg än övriga text, standard färgen för länkar brukar vara blå. Det kan du själv koda i <body> vilken färg du vill ha på dina länkar. För du markören över den understrukna texten förvandlas den till en knuten näve.
Länktaggen ser ut så här
<a href="URL_adress">ordet/orden_som_ska_länkas</A>
Det är viktigt att du inte glömmer citationstecknen som omger
url-adressen. Den korrekta länken skulle se ut så här:
<a href="http://www.netscape.com/">Netscape</A>
Om du av någon anledning vill att den nya länkade sidan ska öppnas i ett nytt fönster över din sida och din sida ligger kvar bakom kan du använda ett attribut
som heter target, läs mer om target under avsnittet Frames. Klicka på länken bredvid så förstår du vad jag menar,
Netscape. Koden för detta är då:
<a href="http://www.netscape.com/" target="_blank">Netscape</A>
Vill du ej att dina länkar ska vara understrukna kan du via Style sheets ta bort detta. Inom head-taggarna lägger du denna kod:
<style type="text/css">
<!--
a {text-decoration: none }
-->
</style>
Du kanske vill att det ska komma upp en länkbeskrivning när besökaren för musen över din länk, oftast visas det som en liten gul *pop-up*-ruta.
Testa och för musen över det länkade ordet här bredvid,
Netscape, funkar dock ej i bl.a Netscape.
<a href="http://www.netscape.com/" title="Du kan ge besökaren kort info om vart länken leder inom title.">Netscape</a>
När du gör din egen hemsida brukar man börja med en startsida
som heter index.htm eller index.html. Har du mycket material du vill lägga
upp så kanske det inte räcker med en sida. Då gör
du bara det antal sidor du vill ha och gör länkar mellan sidorna.
Lägg bara alla dokument och bilder i samma mapp (katalog) om du är osäker (om sökvägar kan du läsa mer i avsnittet Html).
När du då
ska länka från index.html till info.html byter du ut URL-adressen
mot t.ex
<a href="info.html">länktexten</A> Du behöver
inte sitta och skriva in din egen URL-adress när du länkar bland
dina egna dokument.
Ibland vill du kanske länka till ett speciellt ställe inne
i själva dokumentet eller inne i ett annat dokument. Då gör du ett ankare
på det ord, dit du vill styra länkningen. Ett ankare på
rubriken ovan Länkar, ankare, skulle
kunna kodas så här.
<A NAME="Lankar">Länkar,</A> ankare
Du kodar alltså ankaret direkt vid ordet du vill *ankra*, här döpte jag ankaret till Lankar via name.
Ett ankare syns inte på websidan. Det är bara browsern
som läser av koden. Tänk på att det är viktigt att skriva rätt, det _är_ skillnad på stora och små bokstäver - ankaret Lankar är inte samma ankare som lankar.
Ska du länka till ankaret i samma dokument
blir koden så här:
Tillbaka till <a href="#Lankar">rubriken</A>
Glöm inte staketet,
med staketet menar jag # och glöm ej heller att citera. Tillbaka till rubriken.
När man då klickar på ordet rubriken hamnar man vid ankaret
Lankar, dvs vid rubriken ovan. Ordet som har *ankrats* hamnar högst upp på skärmen, prova själv. Du ser att
rubriken Länkar, ankare hamnar högst upp på sidan.
Du kan även länka till ett ankare på
en annan lokal sida.
Tillbaka till <a href="text.html#Lankar">rubriken.</A>
När man då klickar på ordet rubriken hamnar vid ankaret Lankar vid rubriken Länkar, ankare
i dokumentet text.html.
Givetvis kan du även länka till ett
ankare på en annan URL-adress.
Då blir koden <a href="http://www.ok.se/index.html#Lankar">