mandag 22. august 2016

Kodeverksted del 1: HTML

Ingenting er viktigere når man skriver ei nettside – det være seg ei fullverdig hjemmeside eller en artikkel på en blogg – enn at man har en god dokumentstruktur. Dette er det samme som når man skriver en lengre tekst til en hjemmeeksamen, en bachelor- eller mastergradsoppgave, eller en artikkel i en avis.

For å illustrere dette, skal jeg driste meg til å være så frekk at jeg bruker min egen masteroppgave som eksempel; for å lese den, er det bare å gå til Munin. Åpner man innholdsfortegnelsen, ser man at man har ei rekke hovedoverskrifter, som fra kapittel Ⅰ av har diverse underoverskrifter. Under hver av disse overskriftene er det en tilhørende tekst. Begynnelsen av dokumenttreet ser slik ut:

    Eksempel på dokumenttre i HTML basert på de første sidene av masteroppgaven «Cinaedus: Seksualmoral i førkristen romersk keisertid» av Tor-Ivar Krogsæter
    Eksempel på dokumentstruktur med HTML-overskriftsnivåene vist på siden. Av plasshensyn er ikke alle overskriftene er tatt med. For å se stor versjon, klikk på bildet.
  1. Dedikasjon
  2. Forord
  3. Forkortelser, konvensjoner og om latinen
  4. Introduksjon
    1. Problemstilling og avgrensning
      1. Struktur og metode
      2. Tidsperiode
      3. Kilder

Under hver av disse overskriftene hører det en tekst til. Teksten som står under «Dedikasjon» er ikke koblet til teksten som står under «Forord»; teksten under «Problemstilling og avgrensning» er underlagt «Ⅰ Introduksjon»; teksten under «Struktur og metode», «Tidsperiode», «Kilder» osv., er alle underlagt «Problemstilling og avgrensning», men er ikke underlagt hverandre i et kryssforhold.

Struktur i HTML

De to viktigste strukturelle elementene man må lære seg, er kodene for overskrift og avsnitt. Overskriftene setter man med <h1><h6>, og avsnitt med <p>. Eksempelet over hadde i HTML sett slik ut (oppgavetittelen er tatt med her for å vise den fullstendige strukturen; «[…]» indikerer utelatt tekst):

<h1>Cinaedus<br /> Seksualmoral i førkristen romersk keisertid</h1> <p>Masteroppgave i historie […]</p> <h2>Dedikasjon</> <p>Hadde jeg […]</p> <h2>Forord</h2> <p>Da professor Synnøve des Bouvries […]</p> <h2>Forkortelser, konvensjoner og om latinen</h2> <p>For verk fra det klassiske korpuset[,] forholder jeg meg til standardforkortelsene som vist i […]</p> <h2>&#8544;<!--romertall I-->&nbsp;Introduksjon</h2> <p>Seksualiteten står for ethvert samfunn forankret som én av grunnpillarene. Bruken, tolkninga og forståelsen av den er noe av det første som med nødvendighet blir underlagt menneskers regulering og kontroll, og avvik fra den vedtatte sannheta har derfor med letthet blitt tolket som […]</p> <h3>&#8544;.1&nbsp;Problemstilling og avgrensning</h3> <p>Interessen for temaet ble tent da jeg ved en tilfeldighet […]</p> <h4>&#8544;.1.1&nbsp;Struktur og metode</h4> <p>Oppgaven er delt i tre deler. I første del, […]</p> <h4>&#8544;.1.2&nbsp;Tidsperiode</h4> <p>Etter årevis med borgerkrig innledet keiser Augustus en […]</p> <h4>&#8544;.1.3&nbsp;Kilder</h4> <p>Noe av problemet dette studiet står overfor, […</p>

Som man ser av koden, er teksten tydelig strukturert, og det er kun det tekstlige innholdet og hvordan det skal struktureres som er skrevet inn i HTML-fila. Legg dessuten merke til at alle kommandoene man gir nettleseren, rammes inn av tegnene mindre enn (<) og større enn (>). Når nettleseren ser disse tegnene, forventer den at det skal komme en kommando, som f.eks. h1. Dersom man skriver bare h1, derimot, vet ikke nettleseren at det er en kommando. Man må altså ramme den inn, slik at det står slik: <h1>. Kommandoen avsluttes ved at man setter inn en skråstrek (/) foran selve kommandoen, inni ramma, for eksempel </h1>. Alt som står mellom kommandoene <h1> og </h1> blir formatert som overskriftsnivå 1 (h for heading), og forteller nettleseren at teksten som følger under skal regnes som barn av h1-overskrifta i dokumenttreet.

Andre grunnleggende HTML-elementer

Men når man skriver en tekst, trenger man mer enn bare struktur – det greier man jo like enkelt på en skrivemaskin – man trenger også form. Hvilken form som ønskes, erklæres i HTML-fila, og formes i stilarket. Stilarket skal vi ikke gå inn på her – det kommer i neste klasse – men vi skal se på en del andre elementer som kan være nødvendig for å skrive en vanlig tekst på ei nettside.

Sitering

En gefirt er lik kegelhøyda til skrifta; med andre ord er 2 gefirt i 10 punkt skrift lik 20 punkt. For mer, se Typografisk leksikon: «Gefirt»

I vanlige vitenskapelig tekster er det to sitattyper: «linjesitat» og blokksitat. Med «linjesitat» mener jeg sitater som står som del av teksten, utskilt kun med anførselstegn foran og bak. Blokksitater, derimot, er skilt ut fra den øvrige teksten, og har i ordinære, vitenskapelige tekster innrykk og mindre skrift (det vanlige er 2 gefirt innrykk og skriftstørrelse redusert til 10 pt).

For å sitere i HTML, bruker man kommandoene <q> og <blockquote>. Dersom kilden til den siterte teksten er ei nettkilde, tilføyer man cite="http://kildentilteksten.com" i sitatet; dersom kilden ikke er fra nettet, er det god skikk å legge til kildereferansen i title="Referanse", og dette sistnevnte kan man egentlig gjøre uansett. Språket sitatet er skrevet i, definerer man ved å tilføye lang="xx", der xx er bokstavkoden for språket, f.eks. en, en-uk, la eller no. Et eksempel:

Hvorfor er pietās av betydning for å forstå seksuelt avvik? Cicero er syrlig sarkastisk når han omtaler M. Antonius’ evne til å vise pietās: Etenim est pietātis plēna dēfēnsiō.⁵⁰ Skammen han påførte seg og familien ved å ha blitt bankerott før han var myndig var ille, men livet han førte var enda mer skjemmende, og det er her den velkjente passasjen kommer inn:

Sūmpsistī virīlem, quam statim muliebrem tŏgam reddidistī. Prīmō vulgāre scortum; certa flāgitī mercēs nec ea parva; sed citō Cūriō intervēnit quī tē ā meretrīciō quaestū abdūxit et, tamquam stŏlam dedisset, in mātrimōniō stăbĭlī et certō collocāvit.⁵¹

Et viktig rituale for enhver romer, var dagen man skiftet ut barnets tŏga praetexta (den purpurkantede togaen båret av fribårne romerske gutter samt embetsmenn⁵²) med tŏga virīlis. […]

Krogsæter, Tor-Ivar: Cinaedus : Seksualmoral i seinrepublikken og tidlig keisertid, masteroppgave i historie, UiT Norges arktiske universitet, høsten 2016, s. 68.

Sitatet over viser begge typene sitat – linjesitat og blokksitat – og koden for å skrive disse inkluderer altså både q og blockquote. Det kan være greit, for oversiktens skyld, å vise en komprimert versjon av koden; i det følgende eksempelet har jeg fjernet alt unødig (vist med […], slik at selve strukturformateringa kommer tydelig frem:

<blockquote cite="http://munin.uit.no/handle/10037/8432" title="Fra masteroppgaven _Cinaedus_ av Tor-Ivar Krogsæter, s. 68"> <p>Hvorfor […] evne til å vise […]: <q lang="la" […] title="Cic. Phil. 2.44 […]">Etenim est […].</q>[…] Skammen han påførte seg […] det er her den velkjente passasjen kommer inn:</p> <blockquote [cite og title som over] lang="la"> <p>S&#363;mpsist&#299; […]</p> </blockquote> <p>Et viktig rituale for enhver romer, var dagen man skiftet ut barnets <i lang="la">t&#335;ga praetexta</i> (den purpurkantede togaen båret av fribårne romerske gutter samt embetsmenn […]) med <i lang="la">t&#335;ga vir&#299;lis</i>. […]</p> <p class="ref">Krogsæter, […]</p> </blockquote>

Legg merke til at språket er klart definert hver gang det avviker fra det som er definert for nettsida (i dette tilfellet norsk). Dette er gjort hver gang noe som ikke er på sidas «morsmål» forekommer, slik at enhver nettleser skal kunne vite når et nytt språk opptrer. Dette er viktig ikke bare for orale nettlesere, men også når utenlandske brukere er innom sida og bruker automatisk oversetting av den.

Å sette kursiv og fet tekst

Koden for å definere kursiv og fet tekst er henholdsvis <i> (italic) og <b> (bold). Merk at dette ikke nødvendigvis betyr at teksten leses fremhevet eller sterkt; som alle studenter lærer rimelig raskt, brukes kursivert tekst både til å markere trykksterk tekst og til å markere bøker, leksika eller andre større verk.

Å markere trykk

Skal man markere trykk, brukes em (for emphasis) eller strong. Vanligvis ser disse ut som i og b, men som med alt annet, kan dette omkodes. Husk at fet tekst brukes når man ønsker at noe skal peke seg ut på sida og leses med trykk, mens kursivert tekst bare markerer trykk, og leder i utgangspunktet ikke leserens øyne til tekststedet.

Lister

Lister finnes i to varianter: Sorterte og usorterte. Disse får man tilgang til ved å bruke kommandoene <ol> og <ul>, som står for henholdsvis ordered list og unordered list. Selve listepunktene angis med <li>, list item. Eksempel:

<ul> <li>Punktlisteledd 1</li> <li>Punktlisteledd 2</li> <li>Punktlisteledd 3</li> </ul> <ol> <li>Nummerert liste, ledd 1</li> <li>Nummerert liste, ledd 1</li> <li>Nummerert liste, ledd 1</li> </ol>

På skjermen ser disse listene slik ut:

  • Punktlisteledd 1
  • Punktlisteledd 2
  • Punktlisteledd 3
  1. Nummerert liste, ledd 1
  2. Nummerert liste, ledd 2
  3. Nummerert liste, ledd 3

Ingen kommentarer:

Legg inn en kommentar