STARTSIDAN - ANSLAGSTAVLA - ACTIVE X - ABC-KOM IGÅNG - CGI - DIVERSE - FAQ - FORMULÄR - FRAMES - GRAFIK - DHTML - HTML4 - HTML - JAVA - JAVASCRIPT - LISTOR - LÄNKAR - SITEMAP - SÖK - TABELLER - TEXT - ANNICA TIGER - TIGER-LÄNKAR - TIPS - STYLE SHEETS - CSS - WAP - WEB-DESIGN - XHTML - XML

TEXT - att formatera text

Fonter, färger
Ändra teckensnitt
Rubriker
Formatering
Justering
Indrag, marginaler
Skriva text i kolumner/tabeller
Länkar, ankare

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-typsnittMac-motsvarighet
ArialHelvetica
Times New RomanTimes
Courier NewCourier
MS SerifNew 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 &#160; eller &nbsp; 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
<a href="mailto:a_t@tele2.se">E-mail</a>
</address>
och du får resultatet nedan

Annica Tiger E-mail

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">
<tr valign="top">
<td>
Här skriver du texten som ska infogas i vänsterspalten.
</td>
<td>
Här skriver du texten som ska inforga i högerspalten.
</td>
</tr>
</table>
<p> Här slutar tabellen och texten blir som vanligt igen.

Länkar, ankare
linksNu 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">

© Annica Tiger a_t@tele2.se

Besök gärna min blog

Mina andra sidor ser ni nedan.

www.tiger.se, www.atiger.se, www.tiger.pp.se, www.atiger.pp.se, www.atiger.nu och www.nodaddy.se.


STARTSIDAN - ANSLAGSTAVLA - ACTIVE X - ABC-KOM IGÅNG - CGI - DIVERSE - FAQ - FORMULÄR - FRAMES - GRAFIK - DHTML - HTML4 - HTML - JAVA - JAVASCRIPT - LISTOR - LÄNKAR - SITEMAP - SÖK - TABELLER - TEXT - ANNICA TIGER - TIGER-LÄNKAR - TIPS - STYLE SHEETS - CSS - WAP - WEB-DESIGN - XHTML - XML