Skriva och formatera text

HTML (Hypertext Markup Language) är från början inte avsett för formatering av innehållet på webbsidorna, det viktigaste i begynnelsen var inte utseendet utan textinnehållet/budskapet. De flesta som surfar idag är däremot vana att webbsidor ser ut som tidningsuppslag eller TV-reklam och skulle förmodligen uppleva en oformaterad webbsida som extremt tråkig... Möjligheterna att formatera placering och utseende av webbsidans innehåll är begränsat med "vanlig" HTML enligt den standard som fastställs av W3C (World wide web consortium) ». Även om du förmodligen kommer att använda Tabeller eller CSS för att få den formatering du önskar så är det bra att känna till vad du kan göra med "vanlig" HTML.

 

Radavstånd och styckemellanrum (break och paragraph)

Exempeltexten som används nedan är hämtad från den tidigare övningen "Grunderna i Dreamweaver - Skapa en webbplats" »

Genom att trycka ENTER i slutet av en textrad så anger du att du vill ha ett nytt stycke, "paragraph". Notera i koden att märket <P> (paragraph) skapas:


Radavstånd finns inte i "vanlig" HTML men däremot i CSS (stilmallar) ». Det finns i grunden två avstånd mellan textområden:

Nytt stycke = <P> (ENTER)
Ny rad = <BR> (SHIFT+ENTER)

Om du endast vill ha en radbrytning (break) men inte skapa ett nytt stycke kan du använda SHIFT+ENTER för att skapa en <BR> (break) i koden:


Notera skillnaden i avstånd mellan <P> (ENTER) och <BR> (SHIFT+ENTER).

OBS! Använd inte <BR> (SHIFT+ENTER) för att styra var dina rader ska brytas i längre löpande texter. Då uppstår problem med textförskjutning om tex webbläsarfönstret minskar! Använd <BR> sparsamt, formatering av radlängd i texter gör du bättre med Tabeller (tables) »

Radbrytning gjord med <BR> (SHIFT+ENTER):


...blir inte lika rolig när webbläsarfönstret minskas:

 

Rubrikformat H1 - H6 (heading)

I de första HTML-standarderna fanns ingen möjlighet att välja teckensnitt och storlek på texterna. Formateringen bestod i att ange om texten var vanlig stycketext eller rubrik (heading). Det fanns och finns fortfarande 6 st rubrikstorlekar som anges från <H1> till <H6>. Tanken var delvis att det skulle vara så lite kod som möjligt för att det skulle gå fortare att koda HTML. Idag används ofta inte märket "Heading" i de olika HTML-editorerna utan formatering sker med FONT och Size (mer om det nedan). Det finns dock en bra anledning att använda rubrikmärket <H> även fortsättningsvis, det är en av de märken man ofta kopplar rubriknivåer till i CSS (stilmallar) för att enkelt kunna ändra rubrikstorlek på många sidor samtidigt.

Rubrikformaten "Heading" anger du i paletten "Properties" (Egenskaper) eller med snabbtryckningen CTRL+1 (H1) till CTRL+6 (H6).

Exempel på de olika rubrikstorlekarna:

 

Storlek på text (Font size)

HTML begränsas till 7 st olika textstorlekar (1-7) och anges som ett attribut (Size) till märket <FONT>. All text som ska ha en viss storlek måste ligga mellan <FONT SIZE> och </FONT> (start- och slutmärke). Dreamweaver upprepar märket <FONT> på varje förekomst av textavsnitt, tex <BR> och <P> fast det egentligen är onödigt då formatering i HTML gäller till ny formatering anges. Det skulle alltså räcka med <FONT SIZE> i början av dokumentet och </FONT> i slutet av dokumentet.

Om du inte anger någon bestämd storlek tolkar de flesta webbläsare det som <FONT SIZE 3> (storlek 3, ca 12 punkters storlek) och det är alltså Standardvärdet. Fontstorlekar kan anges i steg från 1-7:

Exempel på storlekarna:

Ett alternativt sätt att ange storleken är med + (plus) och - (minus). Utgångsstorleken är då Size 3 och <FONT SIZE -1> skulle alltså motsvara <FONT SIZE 2> osv...

Exempel på storlekar:

OBS! När du testar de olika storlekarna bör du hålla koll på koden så att det inte blir flera format på samma text. Rensa gärna bort gammal formatering med egenskapen "None":

 

Justering av text (Align)

Justering av text i förhållande till webbläsarens kanter kan vara Vänster, Centrerat och Högerställd text (Standard är Vänsterställd om inget annat anges).

Justering sker med attributet "ALIGN" som läggs till aktuellt märke/tagg. Det kan alltså variera var i koden ALIGN hamnar beroende på vad texten är formaterad som.

Här är texten formaterad som stycke <P> och ALIGN="CENTER" blir ett attribut till märket <P>:

Här är texten formaterad som rubrik<H> och ALIGN="CENTER" blir ett attribut till märket <H>:

Här är texten oformaterad och ALIGN="CENTER" blir ett attribut till märket <DIV> som omsluter ett innehåll, i detta fall texten:

 

Färg på text (Color)

Färg på teckensnitt anges med attributet "COLOR" som läggs till märket <FONT>. Alla färger anges med Hexadecimala värden som består av 6 tecken och inleds med en "brädgård" #.

Du kan välja färg i paletten "Properties" (Egenskaper):

Vill du se fler färger väljer du "System Color Picker":

I Färgväljaren har du tillgång till miljoner färger och kan även ange RGB-värden istället för Hexadecimala färgvärden:

 

Teckensnitt (Font type)

Teckensnitt, font eller typsnitt. Egentligen olika typografiska begrepp på samma sak, vilken som är den rätta benämningen på en textstil finns det olika åsikter om. Här kallar vi det för Teckensnitt.

Du kan egentligen välja vilket teckensnitt du vill men bör tänka på att de inte är inbäddade (följer med) i HTML-filen när den laddas ner i användarens webbläsare. Om det teckensnitt du valt inte finns hos dina besökare så ersätts det med ett annat vilket kan innebära att texten förskjuts eller på olika sätt inte stämmer med det utseende du själv tänkt dig...

Standardteckensnittet om inget välj är för de flesta webbläsare "Times" eller "Times New Roman". De teckensnitt som anses "säkra" att använda därför att de flesta Internetanvändare har dem är bla:

Dreamweaver lägger till ett par alternativa teckensnitt som webbläsaren kan använda om förstavalet inte finns tillgängligt. Om du tex väljer "Verdana" så anges "Arial, Helvetica, sans-serif" som alternativa teckensnitt:

 

Om du vill använda dina egna teckensnitt i Dreamweaver så lägger du till dem:

OBS! Tänk på att de teckensnitt du väljer eventuellt inte finns på dina besökares datorer och då ersätts med annat teckensnitt.

 

 

Standardteckensnitt och teckenfärg för hela webbsidan

Du kan ange en teckenfärg som ska gälla för hela webbsidan om inget annat anges. Det hexadeciamala färgvärdet läggs då inom <BODY>.

Du väljer textfärgen med menyn "Modify/Page Properties..." (Ändra/Sidegenskaper...):

Den valda textfärgen anges som ett attribut till <BODY>:

<BASEFONT> för teckensnitt och storlek

Ett attribut som inte är valbart i Dreamweaver men som kan användas för att ange ett teckensnitt för hela webbsidan är <BASEFONT>. Du kan ange det före textinnehållet så gäller det till annat teckensnitt anges. (OBS! Syns inte i Dreamweaver utan endast när du förgranskar i webbläsaren).

Vill du använda <BASEFONT> måste du skriva koden själv:

 

Listor (List objekts)

Text i listform har två egenskaper; Numrerade listor <OL> (Ordered list) och Onumrerade listor <UL> (Unordered list). De olika listelementen kodas med <LI>.

Numrerad lista <OL>:

Onumrerad lista <UL>:

Flernivålistor

Listor i flera nivåer skapas genom att listorna "nästlas" i varandra, en ny lista <OL> börjar i ett listelement <LI>.

Du skapar de olika nivåerna genom att öka eller minska "indraget" med knappen "Text Indent" (Indrag) och "Text Outdent" (Minska Indrag):

Ändra listsymbol

Det finns alternativa utseenden på de olika listsymbolerna bla Fyrkant (Square) och Cirkel (Circle). Du hittar de olika sorterna i menyn "Text/List/Properties..." (Text/Lista/Egenskaper...) OBS! Markera inte hela listan utan placera bara markören i listan innan du väljer menyn.

(Typen "circle" finns inte valbar i menyn, den får du koda själv...)

 

Indrag av text (Blockquote)

En enkel metod att justera texten så att raderna blir kortare är att använda Indrag (Indent). Märket i koden blir <BLOCKQUOTE>. Det finns inget höger eller vänster indrag utan texten blir lika mycket indragen från båda håll. Du kan heller inte själv bestämma avstånd på indraget. (Bättre kontroll på texten får du med tabeller »)

Du skapar "indraget" med knappen "Text Indent" (Indrag) och "Text Outdent" (Minska Indrag):

Ett enkelt indrag med <BLOCKQUOTE>:

Dubbelt indrag med <BLOCKQUOTE><BLOCKQUOTE>:

 

Förgranska/visa din webbsida i en webbläsare

Även om Dreamweaver är en sk "WYSIWYG-editor" (What You See Is What You Get) så visar den inte alltid 100% rätt utseende. Det är viktigt att du förgranskar din webbsida i en riktig webbläsare. Du kan använda menyn "File/Preview in browser..." (Arkiv/Förhandsgranska i webbläsare...) eller tangenten F12 för att se sidan i den förvalda webbläsaren.

Du kan även byta förvald webbläsare med samma meny eller ange flera webbläsare om du vill testa den i flera (du måste ha de olika webbläsarna installerade i din dator):

Förgranska webbsidan ofta så att du har full koll på det rätta utseendet.

Copyright © www.webdesignskolan.se
Materialet får skrivas ut och användas för personligt bruk.
Användning i undervisningssyfte är ej tillåten utan vårt tillstånd - läs mer här »