-5
Tags:
html
Skrevet af
Bruger #1140
@ 27.12.2002
Den typografiske tilrettelæggelse
Den typografiske tilrettelæggelse
Når først dokumentets grundlæggende struktur er lagt fast og hyperlinks lagt ind, vil man naturligvis gerne lave et tiltalende grafisk design. Opbygningen af HTML-dokumenter behøver naturligvis ikke foregå i denne rækkefølge, selv om den kan være fornuftig at følge de første gange, man giver sig i kast med konstruktionen. Design er en måde at tiltrække brugerne og en måde at organisere sine informationer på. De typografiske muligheder er slet ikke så udbyggede som i tekstbehandlingsprogrammer, men det er nogle af de samme virkemidler, man kan tage i anvendelse i HTML.
Skriftstørrelse og fremhævninger
Der er to muligheder for at forestørre eller formindske skriften i forhold til grundstørrelsen. Denne er, medmindre man koder det anderledes i HTML-dokumentet, bestemt af den browser, der læser dokumentet.
I kodningen af HTML-dokumentet kan man sætte grundskriftens størrelse via et positionsflag, <BASEFONT SIZE=..>, der palceres inden for <BODY>-flaget (som regel lige efter dette), f.eks.
<BODY>
<BASEFONT SIZE=4>
..
</BODY>
Skriftens størrelse kan variere mellem 1 og 7. Hvis dokumentet har et specielt layout, eller man ønsker at styre skriftbilledet helt præcist, er det nødvendigt at fastsætte grundstørrelsen. Ellers vil det normalt ikke være nødvendigt, bl.a. fordi kombinationen HTML-dokument og browser er så fleksibel en kombination, at teksten vil blive tilpasset automatisk med et tilfredsstillende resultat.
Med udgangspunkt i grundskriftstørrelsen kan man definere enkelte tekstelementers størrelse - helt ned til et enkelt bogstav - enten ved at anvende de prædefinerede headings, ved at angive en konkret skriftstørrelse eller ved at bestemme skriftens størrelse i forhold til grundstørrelsen.
Headings findes i seks varianter med <H1> som den største og <H6> som den mindste. De tre første er større end grundskriften, de tre sidste er mindre:
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
Grundskriften
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
Headings fortolkes som regel som fed skrift, og det er altså unødvendigt at gøre det med <B>
eller <STRONG>-flaget. Headings er logiske og bestemt af browseren, og derfor kræver de ikke overførsel af specielle typografiske elementer. Efter afslutningen af en heading følger automatisk et linieskift, som man altså heller ikke behøver at indsætte manuelt.
Det er en af de få undtagelser fra anvendelsen af hhv. <BR>- og <P>-flagene ved linie- og afsnitsskift. Man får altså med headings et linieskift, også selv om man ikke har behov for det. Man kan derfor heller ikke ændre skriftstørrelsen midt i en linie ved at anvende headings.
Hvis man vil styre dette mere præcist, er man nødt til at anvende en anden mulighed for at bestemme skriftens størrelse. Det kan være nyttigt i mange tilfælde, f.eks. i forbindelse med tilpasning af tekst til grafik og kombination af forskellige skriftstørrelser. Man kan mere fleksibelt bestemme skriftens størrelse på en skala fra 1 til 7 ved at anvende:
<FONT SIZE=..>..</FONT>
Her er nogle eksempler:
<FONT SIZE=7>Skriftstørrelse 7</FONT>
<BR>
<FONT SIZE=6>Skriftstørrelse 6</FONT>
<BR>
<FONT SIZE=5>Skriftstørrelse 5</FONT>
<BR>
<FONT SIZE=4>Skriftstørrelse 4</FONT>
<BR>
<FONT SIZE=3>Skriftstørrelse 3</FONT>
<BR>
<FONT SIZE=2>Skriftstørrelse 2</FONT>
<BR>
<FONT SIZE=1>Skriftstørrelse 1</FONT>
<FONT SIZE>-flaget kan også bruges relativt, set i forhold til den aktuelle skrift, oftest grundskriften. I det tilfælde ser den således ud:
<FONT SIZE=+4>Stor skrift</FONT>
Dette flag er dog ikke standard, og man vil ofte komme ud for, at det ikke kan forstås af browseren. Anvendelse kan derfor ikke anbefales, medmindre man er sikker på, at det kan fortolkes af den modtagende browser.
De prædefinerede headings er nemmere at bruge og kan altid aktiveres nemt i en HTML-editor, ligesom de er nemmere at huske og indtaste, hvis man f.eks. arbejder fra et tekstbehandlingsprogram. Ulempen er, at der altid følger et automatisk linieskift med, så man kun kan have én heading i hver linie. Brug af <FONT SIZE>-flaget er mere fleksibel, helt ned til et bogstav:
<FONT SIZE=3>F</FONT>
<FONT SIZE=4>l</FONT>
<FONT SIZE=5>e</FONT>
<FONT SIZE=6>k</FONT>
<FONT SIZE=7>s</FONT>
<FONT SIZE=6>i</FONT>
<FONT SIZE=5>b</FONT>
<FONT SIZE=4>e</FONT>
<FONT SIZE=3>l</FONT>
Der er forskellige muligheder for at styre sine skrifer via fremhævninger og store/små skrifter. Fremhævninger kan foretages på to forskellige måder: fysisk og logisk. Man kan således anvende fed og kursiv, og hver af disse har altså to varianter:
Fremhævning | Fysisk | Logisk
Fed skrift |<B>..</B> | <Strong>..</STRONG>
Kursiv | <I>..</I> | <EM>..</EM>
Eksempel:
<B> Fed skrift, fysisk</B><P>
<STRONG>Fed skrift, logisk</STRONG><P>
<I>Kursiv skrift, fysisk</I><P>
<EM>Kursiv skrift, logisk</EM>
De logiske fremhævninger er afhængige af browserens udmøntning. F.eks. vises <STRONG> som regel som fed, men ikke altid. Derimod vises <B> altid som fed. Fordelen ved de logiske fremhævninger er, at de ikke er så tids- og ressourcekrævende og derfor bedre understøtter fleksibiliteten i HTML. Man skal derfor bruge disse, medmindre det er absolut nødtvendigt at en skrift vises som fed. Hvis man f.eks. skriver "klig på den fede tekst," må man anvende <B>-flaget for at sikre sig, at teksten rent faktisk bliver fed. Man skal også anvende de fysiske varianter, hvis man vil blande forskellige fremhævninger, f.eks. kursiv og fed:
<B> Fed skrift, der også bliver <I>kursiveret</I></B><P>
<STRONG>En anden fed skrift, der også bliver <EM>kursiveret</EM></STRONG>
Alle fire grundlæggende fremhævningsflag er lukkede og gælder den tekst, der står imellem startflag og slutflag
Skrifttyper
Ved at anvende parameteren FACE i forbindelse med <FONT>-flaget, kan man opsætte tekst med en bestemt skrifttype, f.eks.
<FONT FACE="Arial">Tekst sat med Arial</FONT>
Dette forudsætter, at Arial er installeret på brugerens maskine. Er den ikke det, vil browseren i stedet hente systemskriften. Nu vil Arial være tilgængelig på langt de fleste PC'er med Windows, og man kan derfor godt tillade sig at anvende den. Som alternativ kan man angive flere forskellige fonte, der så vil blive prøvet i rækkefølge.
<FONT FACE="Arial, Helvetica, Times, Courier">Tekst sat med FONT-flaget</FONT>
Ønsker man derimod, at brugeren skal anvende en mere speciel skrift, må man give en mulighed for, at brugeren kan downloade den. Det er en "tung" procedure, som kun skal anvendes, hvis den er afgørende.
Flaget <FONT FACE> er langt den bedste og mest fleksible metode, når man vil anvende bestemte skrifttyper. Der findes dog også nogle prædefinerede skrifter, der alle angives med lukkede flag. Også her er der såvel fysiske som logiske flag. Lad os tage de fysiske først, som altså foruden <B>- og <I>-flagene tæller bl.a.:
<TT>..</TT>, der bruges til at angive tekst, der skal skrives som skrivemaskineskrift.
<U>..</U>, der skal bruges til at angive understreget skrift.
Dertil kommer en række logiske flag, som kan anvendes til f.eks. skriftstørrelser og placering af skrift:
<S>..</S>, der angiver, at teksten skal vises med en vandret linie igennem. Det kan ikke altid lade sig gøre at vise, og der vil blive anvendt et alternativ.
<BIG>..</BIG>, der angiver stor skrift i forhold til grundstørrelsen.
<SMALL>..</SMALL>, der angiver tilsvarende lille skrift i forhold til grundstørrelsen.
<SUB>..</SUB>, der angiver, at skriften skal skrives lidt lavere end den øvrige skrift.
<SUP>..</SUP>, der angiver, at skriften skal skrives lidt højere end den øvrige skrift.
Anvendelsen af disse flag kan illustreres med et eksempel:
<H2>Eksempler på forskellige skrifter</H2>
<TT>Skrivemaskineskrift</TT>
<P><HR><P>
<BIG>Stor skrift</BIG><P>
<SMALL>Lille skrift</SMALL><P>
<SUP>Forhøjet tekst</SUP>i forhold til<SUB>sænket tekst</SUB>
Et specielt logisk flag (<PRE>) angiver præformateret tekst. Det har været anvendt fra de tidlige versioner af HTML-specifikationen, men er ved at blive afløst af den mere fleksible tabelfunktion.
<PRE>..</PRE> anvendes, hvis teksten skal se nøjagtig ud som udgangspunktet, dvs. at der ikke kan ske ombrydninger af teksten. Hvis man f.eks. vil have en række mellemrum vist i browseren, kan man gøre det som præformateret tekst. Dog vil det som regel være nemmere at anvende tabeller. Et eksempel kan se således ud
<PRE>
Navn E-post adresse
Hans Jensen HansJe@abc.de.dk
Peter Hansen PH@acb.de.dk
</PRE>
<P>
Navn E-post adresse<BR>
Hans Jensen HansJe@abc.de.dk<BR>
Peter Hansen PH@abc.de.dk
Justering af tekst
Justering af tekst er en af de mest anvendte virkemidler i tekstbehandling, og man kan, i noget begrænset udformning, anvende det i HTML-dokumenter. Justeringen styres nemmest ved at anvende <P>-flaget, hvortil man kan knytte align-parameteren, f.eks.:
<H2><P ALIGN=LEFT>Venstrestillet tekst</P>
<P ALIGN=CENTER>Centreret tekst</P>
<P ALIGN=RIGHT>Højestillet tekst</P></H2>
Man kan altså anvende <P>-flaget som et lukket flag, men denne mulighed er først kommet med HTML3 og kan altså kun læses med en moderne browser. De enkelte afsnit placeres således mellem start- og slutflag. Centrering kan også opnås ved at anvende <CENTER>-flaget:
<CENTER>..</CENTER>
Lister
Tabuleringer kan man som nævnt ikke anvende direkte i HTML-dokumenter, og en række mellemrum efter hinanden vil heller ikke virke. Hvis man derfor vil indrykke tekst, er man henvist til såkaldte lister, der er prædefinerede måder for opsætning. En anden mulighed er at anvende tabeller, som vi skal kigge nærmere på i næste artikel.
Lister starter og slutter med et lukket flag, der angiver listens opbygning, f.eks. for en unummereret liste med bullets:
<UL>..</UL>
De enkelte punkter angives med et positionsflag, som f.eks.:
<UL>
<LI>Skrifter
<LI>Lister
</UL>
Denne listeform er absolut den mest anvendte, og den er en god og fleksibel måde at organisere information på. Når man konstruerer denne type lister, skal man huske at være konsekvent, både med hensyn til at gruppere informationer af samme type (semantisk) og med den orden, de præsenteres i (typografisk), f.eks. i alfabetisk orden.
Også i forbindelse med de enkelte punkter i en liste, får man automatisk et linieskift, som man altså ikke behøver indsætte manuelt. Det giver sjældent, for ikke at sige aldrig, nogen problemer.
Listerne kan indeholde nye lister, og man kan på den måde skabe sig en hel struktur. Man skal blot passe på, at strukturen ikke bliver uoverskuelig. F.eks. vil velanbragte afsnitskift være meget nyttige.
<UL>
<LI>Skrifter
<UL>
<LI>Brug af headings
<LI>Brug af font flaget
</UL><P>
<LI>Lister
<UL>
<LI>Unummerede lister
<LI>Nummerede lister
</UL>
</UL>
Der anvendes i forbindelse med unummererede lister standarder for bullets. Hvis man selv vil bestemme det, kan man angive typen til en af tre typer: kugle (disc), cirkel (circle) eller kvadrat (square). Typen gælder så for hele listen. Kommandoen er dog ikke standard:
<UL TYPE=..>
F.eks.
<UL TYPE=CIRLCE>
Denne kommando kan også anvendes for et enkelt punkt:
<LI TYPE=..>
Man kan også angive bullettypen som et parameter til <UL>-flaget, f.eks.:
<UL DINGBAT=..>
som i stedet bruger det specificerede standardtegn. Man kan tillige undertrykke visningen af bullets ved at angive følgende:
<UL PLAIN>
Endvidere kan man gøre listen mere kompakt på følgende vis:
<UL COMPACT>
En tilpasset liste kan derefter opbygges på følgende vis:
<HTML>
<BODY>
<UL>
<LI><STRONG>Skrifter</STRONG>
<UL>
<LI>Brug af headings
<LI>Brug af font flaget
</UL><P>
<LI><STRONG>Lister</STRONG>
<UL PLAIN>
<LI>Unummererede lister
<LI>Nummererede lister
</UL>
</UL>
</BODY>
</HTML>
Der findes en række forskellige lister, der alle anvendes på samme principelle måde:
Listetype | Start-/slutflag | Flag for punkter
Unummererede lister | <UL>..</UL> | <LI>
Menulister | <MENU>..</MENU> | <LI>
Indekslister | <DIR>..</DIR> | <LI>
Nummererede lister | <OL>..</OL> | <LI>
Definitionslister | <DL>..</DL> | <DT>, <DD>
Menulister og indekslister blev med HTML3 afløst af den fleksible tilspasning af den unummererede liste. Menulister vises typisk unummereret og i kompakt form, mens indekslister indeholder korte elementer under hvert punkt. Nummererede lister fungerer på samme måde som de unummererede, blot bliver de enkelte punkter fortløbende nummereret:
<OL>
<LI>Æbler
<LI>Pærer
<LI>Appelsiner
</OL>
Som for de unummererede lister kan man angive tegntypen, enten for hele listen eller for enkelte punkt. Der er fem værdier: store bogstaver (A), små bogstaver (a), store romertal (I), små romertal (i) og tal (1), f.eks.:
<OL TYPE=I>
<LI TYPE=A>
Man kan tillige bestemme, ved hvilket nummer den skal starte, f.eks.:
<OL SEQNUM=23>
Definitionslister er beregnet til at knytte bestemte beskrivelser til bestemte begreber på en typografisk smart måde. Det kan nemmest vises ved et ekspempel:
<DL>
<DT>Browser
<DD>Et program, der kan anvendes til at læse og fortolke filer produceret efter HTML-specifikationen.
<DT>HTML
<DD>En specifikation for opbygning af dokumenter, der kan læses og fortolkes af en browser.
</DL>
Detfinitionslisten er afbrænses med <DL>-flaget, de enkelte begreber angives med <DT> og definitionerne med <DD>.
Listerne er også et meget fleksibelt redskab, der tillader, at man kombinerer med grafik, med hyperlinks, og at man bygger flere forskellige typer af lister ind i hinanden.
Vandrette streger
Igen er der her tale om et fleksibelt redskab, som næsten altid kommer til at se fornuftigt ud, uafhængigt af den browser, der læser dokumentet.
Streger er populære. De kan skabe overblik i en stor stofmængde og bevirker ikke, at transmissionstiden stiger.
Vandrette streger angives med positionsflaget:
<HR>
Der kan knyttes flere parametre til dette flag: bredde, tykkelse, justering og skyggevirkning. Sådanne parametre angives inden for flaget på følgende måde:
<HR WIDTH=90% SIZE=2 ALIGN=CENTER NOSHADE>
WIDTH angiver bredden af stregen, målt enten i pixels eller i procent af skærmbredden. SIZE angiver tykkelsen af stregen, målt i pixels. ALIGN bestemmer placeringen af stregen og kan have værdierne left, center og right. Endelig angiver NOSHADE/SHADE om stregen skal have skygge eller ej. Ved blot at bruge <HR> uden parametre benytter man standard, der svarer til den øverste streg i eksemplet figur 5.16.
<HR>
<P>
<HR WIDTH=50% SIZE=5 ALIGN=RIGHT SHADE>
<P>
<HR WIDTH=30% SIZE=3 ALIGN=CENTER NOSHADE>
Dette er så ved at være en af de sidste artikler i serien, regner med at udgive en måske 2 mere. Som nok vil handle lidt om tabeller/formularer/rammer, men dette håber jeg var en meget lærerrig og uddybende artikel om den typografiske tilrettelæggelse :-)
Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.
Del også gerne artiklen med dine Facebook venner:
Kommentarer (10)
jeg er nu nice
God.
Det er jo helt vildt "old-school" det du har gang i. Man bør anvende Cascading StyleSheets (CSS) til ovenstående for at adskille stil og layout fra hinanden, hvormed der opnås mange fordele.
denne artikel ville have været meget god for 5 år siden..
Som MHA skrev er CSS ret vigtigt specielt når man snakker om typografiske tilrettelæggelse...
Ja, det er vigtigt med CSS, men nu er det mere det grundlæggende til den der ikke helt har fået fat i HTML endnu - nogen kan jo godt noget HTML men ikke meget mere end lige det. Disse 3 artikler uddyber jo lidt mere end hvad man sådan selv lige finder ud af. Men kan da godt lave noget med CSS hvis det er så vigtigt!
Hvorfor bruger du _overhovedet_ den forbudte font?
eller egenskaber i hr - eller egenskaber i p - der kunne - og ifølge de nyeste specifikationer - sagtens blive erstatet af nyttig css?
a
Det er næste spild af tid, idag bruger man CSS, det er lettere og MEGET nemmere
Det er ikke længere rigtig HTML at skrive sådan, da det ikke er en del af de vedtagne HTML 4.0 og XHTML 1.0/1.1 standarder, dvs. at W3C's XHTML validator vil kende den ugyldig.
I stedet for bruger man i dag CSS til at placere, formattere og definere sidens layout, og det er også meget mere praktisk end at bruge de besværlige BASEFONT, etc. kommandoer.
Du skal være
logget ind for at skrive en kommentar.