80 besökare online
Drömvävaren webbshop

webdesign och HTML

« Färger och hexadecimala färgkoder | Listor  »

Text och specialtecken

Text och teckensnitt (fonter, typsnitt) som visas på webbsidan beskrivs bara för webbläsaren av HTML-koden. Teckensnittet laddas alltså inte ned när du läser in sidan i webbläsaren. Du kan även använda dig av specialtecken » som framgår av tabellen längst ned på denna sida.

Eftersom teckensnittet inte bäddas in och följer med HTML-filen kan textens utseende variera på olika datorer. Om det valda teckensnittet inte finns på användarens dator ersätts det av ett teckensnitt. Det innebär att din layout kan förändras. Förutom att texten inte visas som du vill så kan förskjutning i texten uppstå vilket i sin tur kan placera bilder och grafik felaktigt.

Vill du vara säker på att din layout bibehålls så kan du använda något av dessa teckensnitt:

Arial Arial Black Times New Roman
Courier New Verdana Comic Sans
Impact Georgia Trebuchet
Webdings abcdefgh

Teckensnittens utseende kan variera beroende på vilken storlek du valt och dessutom beror det på vilken bildskärmsupplösning dina besökare har. Här är några exempel på teckensnitt i olika storlekar där du själv kan avgöra läsbarheten:

TIMES NEW ROMAN size=1 Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
ARIAL size=1 Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
VERDANA size=1 Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
TIMES NEW ROMAN size=2 Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
ARIAL size=2 Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
VERDANA size=2 Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
TIMES NEW ROMAN size=3 Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
ARIAL size=3 Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
VERDANA size=3 Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!

För att ha ännu bättre kontroll över sina webbsidor kan man i HTML-koden lägga in ett eller flera ersättningsteckensnitt. Om det valda teckensnittet inte finns visas istället det valda erättningsteckensnittet. Ange de valda teckensnitten åtskilda med kommatecken:

font-family: Verdana, Arial, Helvetica, sans-serif;

 

Storlekar på tecken

Storlekar på text kan anges med olika enheter och den vanligaste enheten för text i HTML var tidigare "size" som utgick ifrån en standardstorlek (default) och angav storlek i 7 steg. CSS ger möjlighet att skala text obegränsat och olika enheter för att ange storleken. En vanlig enhet är pixlar som även används för att ange storlek på bildskärmar och därför erbjuder bra kontroll över hur resultatet blir på en bildskärm.

Textstorlekar kan anges i enheterna:

px - pixlar (pixels) - samma enhet som bildskärmars upplösning
pt - Punkter (point) - 1 pt är lika med 1/72 inch
in - tum (inch)
cm - centimeter
mm - millimeter
p - picas - 1 pc är lika med 12 punkter
em - em - relativ till andra element
ex - exs - en ex är x-höjden på ett tecken
% - Procent - relativ till andra element

Enheterna "pt", "pica" och "ems" har traditionellt använts i typografin och trycksaker och det är förmodligen "punkter" (pt) som är mest allmänt använt i tex ordbehandling.

Enheten em är ursprungligen ett horisontellt mått som utgår från bredden på bokstaven "M". Två bindestreck ihop (--) kallas för "em-dash" och har samma bredd som bokstaven "M". Endast ett bindestreck (-) kallas "en-dash". Begreppet "em" har inte samma betydelse i CSS som i typografin då bokstaven "M" inte finns i alla länders teckenuppsättningar. Alla teckenuppsättningar har däremot en höjd på tecknen och "em" används i CSS som en enhet för höjd på tecken.

 

Rubriker - Headings

Du kan använda rubriker (heading) som finns i fasta storlekar. Här visas de fasta storlekar som kan användas i HTML-koden:

Heading1

Heading2

Heading3

Heading4

Heading5

Heading6

Rubriker kan användas tillsammans med CSS för att ange fördefinierade Rubrikformat i valfria storlekar.

HEADING anges med märket <H1>, <H2>, <H3> osv.
Här anges Rubriknivå 1:

<h1>Rubrik</h1>
<p>Texten här..</p>

 

Teckensnitt och format på sidinnehåll

Fortsätt arbeta med ditt dokument "index.html" som du arbetade med tidigare.

Teckensnittet som du vill använda som "standard-teckensnitt" anger du som en CSS-egenskap för <BODY>och detta gäller då allt textinnehåll på sidan.

  1. Lägg till "font-family" och "font-size" som STYLE för märket <BODY>:

    <html>
    <head>
    <title>Min webbplats</title>
    <style type="text/css">
    <!--
    body {
    background-color: #CFE7B8;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    }
    -->
    </style>
    </head>
    <body>
    Det här är min första webbsida!
    </body>
    </html>

    Notepad++


    Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:



  2. När du vill dela upp texten i olika stycken används märket <P>(Paragraph) som även ger ett extra radavstånd till texten som kommer efter textstycket.

    Skriv mer text och formatera denna med rubrik och styckeindelning enligt nedan:

    <html>
    <head>
    <title>Min webbplats</title>
    <style type="text/css">
    <!--
    body {
    background-color: #CFE7B8;
    }
    -->
    </style>
    </head>
    <body>
    <h1>Det här är min första webbsida!</h1>
    <p>Jag har precis lärt mig att använda olika storlekar
    på texten.</p>
    </body>
    </html>

    Notepad++


    Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:



  3. Du kan ange delar av texten eller enstaka ord feta, kursiva genom att använda taggarna <STRONG><EM>

    Skriv in mer text och ändra textens attribut:

    <html>
    <head>
    <title>Min webbplats</title>
    <style type="text/css">
    <!--
    body {
    background-color: #CFE7B8;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    }
    -->
    </style>
    </head>
    <body>
    <h1>Det här är min första webbsida!</h1>
    <p>Jag har precis lärt mig att använda olika storlekar på texten.</p>
    <p>Jag kan också göra vissa ord i <strong> fet stil</strong>, andra i <em>kursiv stil</em>.</p>
    </body>
    </html>


    Notepad++


    Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:



  4. Ändra textstorleken på rubriken genom att lägga till en CSS-mall för märket <H1> enligt nedan. Notera att formatet för <H1>här anges inom ett eget block omslutna med måsvingar { krullparenteser }:

    <html>
    <head>
    <title>Min webbplats</title>
    <style type="text/css">
    <!--
    body {
    background-color: #CFE7B8;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    }
    h1 {
    font-size: 36px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
    }
    -->
    </style>
    </head>
    <body>
    <h1>Det här är min första webbsida!</h1>
    <p>Jag har precis lärt mig att använda olika storlekar på texten.</p>
    <p>Jag kan också göra vissa ord i <strong> fet stil</strong>, andra i <em>kursiv stil</em>.</p>
    </body>
    </html>

    font-weight: normal; anger att texten kan vara något "tunnare" än standardfonten. Det passar ofta bra i stora storlekar när vissa teckensnitt blir alltför framträdande och "tjocka".

    Notepad++


    Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:



  5. Läs avsnittet om specialtecken nedan. Byt sedan ut alla förekomster av ÅÄÖåäö enligt nedan:

    <html>
    <head>
    <title>Min webbplats</title>
    <style type="text/css">
    <!--
    body {
    background-color: #CFE7B8;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    }
    -->
    </style>
    </head>
    <body>
    <h1>Det h&auml;r &auml;r min f&ouml;rsta webbsida!</h1>
    <p>Jag har precis l&auml;rt mig att anv&auml;nda olika storlekar p&aring; texten.</p>
    <p>Jag kan ocks&aring; g&ouml;ra vissa ord i<strong> fet stil</strong>, andra i <em>kursiv stil</em>.</p>
    </body>
    </html>


    Notepad++

 

 

Specialtecken

Vissa specialtecken motsvaras i HTML-koden av ett namn eller ett nummer. I vissa fall krävs det för att tecknet ska visas och i andra fall rekommenderas det för korrekt återgivning i de webbläsare som inte är svenskspråkiga. Våra bokstäver ÅÄÖ brukar ersättas vilket gör att chansen att de visas korrekt på flera plattformar och webbläsare då är större än om du anger själva tecknet i HTML-koden. Så här ersätts bokstäverna ÅÄÖåäö:

å = &aring;
Å = &Aring;
ä = &auml;
Ä = &Auml;
ö = &ouml;
Ö = &Ouml;

Liten översättningstabell för vanliga specialtecken:
Tecken Kod Tecken Kod Tecken Kod
å &aring; © &copy; § &sect;
ä &auml; ® &reg; « &laquo;
ö &ouml; ™ &#153; » &raquo;
< &lt; £ &pound; ° &deg;
> &gt; ¥ &yen; æ &aelig;
& &amp; € &euro; ø &oslash;
£ &pound; “ &#147; ‰ &#137;
´ &acute; ” &#148; ü &uuml;
" &quot; — &#151; ˜ &#152;
Större översättningstabell för specialtecken. Du kan ange kod eller mostvarande ASCII-nummer:
Tecken Kod ASCII Tecken Kod ASCII
  nonbraking
space		 &nbsp; &#160; Ð &ETH; &#208;
¡ &iexcl; &#161; Ñ &Ntilde; &#209;
¢ &cent; &#162; Ò &Ograve; &#210;
£ &pound; &#163; Ó &Oacute; &#211;
¤ &curren; &#164; Ô &Ocirc; &#212;
¥ &yen; &#165; Õ &Otilde; &#213;
¦ &brvbar; &#166; Ö &Ouml; &#214;
§ &sect; &#167; × &times; &#215;
¨ &uml; &#168; Ø &Oslash; &#216;
© &copy; &#169; Ù &Ugrave; &#217;
ª &ordf; &#170; Ú &Uacute; &#218;
« &laquo; &#171; Û &Ucirc; &#219;
¬ &not; &#172; Ü &Uuml; &#220;
­ &shy; &#173; Ý &Yacute; &#221;
® &reg; &#174; Þ &THORN; &#222;
¯ &macr; &#175; ß &szlig; &#223;
° &deg; &#176; à &agrave; &#224;
± &plusmn; &#177; á &aacute; &#225;
² &sup2; &#178; â &acirc; &#226;
³ &sup3; &#179; ã &atilde; &#227;
´ &acute; &#180; ä &auml; &#228;
µ &micro; &#181; å &aring; &#229;
&para; &#182; æ &aelig; &#230;
· &middot; &#183; ç &ccedil; &#231;
¸ &cedil; &#184; è &egrave; &#232;
¹ &sup1; &#185; é &eacute; &#233;
º &ordm; &#186; ê &ecirc; &#234;
» &raquo; &#187; ë &euml; &#235;
¼ &frac14; &#188; ì &igrave; &#236;
½ &frac12; &#189; í &iacute; &#237;
¾ &frac34; &#190; î &icirc; &#238;
¿ &iquest; &#191; ï &iuml; &#239;
À &Agrave; &#192; ð &eth; &#240;
Á &Aacute; &#193; ñ &ntilde; &#241;
 &Acirc; &#194; ò &ograve; &#242;
à &Atilde; &#195; ó &oacute; &#243;
Ä &Auml; &#196; ô &ocirc; &#244;
Å &Aring; &#197; õ &otilde; &#245;
Æ &AElig; &#198; ö &ouml; &#246;
Ç &Ccedil; &#199; ÷ &divide; &#247;
È &Egrave; &#200; ø &oslash; &#248;
É &Eacute; &#201; ù &ugrave; &#249;
Ê &Ecirc; &#202; ú &uacute; &#250;
Ë &Euml; &#203; û &ucirc; &#251;
Ì &Igrave; &#204; ü &uuml; &#252;
Í &Iacute; &#205; ý &yacute; &#253;
Î &Icirc; &#206; þ &thorn; &#254;
Ï &Iuml; &#207; ÿ &yuml; &#255;

 

Nästa guide: Listor  »