Formatering av text och listorLektion fyra

Rubriknivåer

Vi har redan lite kort berört rubriknivåer. Dessa används för att logiskt strukturera upp en webbsida. Koden nedan förevisar de olika rubriknivåerna. 

Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6

Och så här hade dessa sett ut som webbsida:

Stor: Heading 1, mindre HEading 2 osv.

Fet- och kursiv stil

Ett vanligt sätt att markera ord, uttryck, citat eller andra viktiga saker i en text är att kursivera eller fetmarkera. För att fetmarkera något används vanligtvis idag taggen strong

Koden nedan ger texten Denna text är nu fetmarkerad!

Denna text är nu fetmarkerad!

För kursiv stil används vanligtvis em

Koden nedan ger texten Denna text är kursiv!

Denna text är kursiv!

Uppgift

Öppna  sida_ett.html i programmet Anteckningar. Du kan antingen starta Anteckningar först och sen välja Öppna som vanligt, din webbsida kommer dock inte synas då den ju är en html-sida och Anteckningar letar efter textfiler. Välj ”Alla filer (*.*)” så kommer alla filer i mappen synas.

Ett lättare sätt är att gå till aktuell mapp i Utforskaren och högerklicka på filen och sen välja Öppna med och sen just Anteckningar.

Öppna med -> Anteckningar

Använd texten nedan för att formatera din webbsida enligt bilden. Texterna kan du kopiera härifrån

  • Se till att använda strong och em på rätt ställe
  • Länken Wikipedia ska länka till Wikipediasidan om labradorer. 
  • Använd p för att skapa ett nytt stycke till citatet.
  • Använd rubriknivåer h1 och h2.
  • Använd valfri hundbild.
Webbsida. Rubrik Labrador, lite brödtext, bild på labrador. Kursivt citat.

Listor

Punktlistor och numrerade listor är tacksamma verktyg för att formatera innehåll så det blir tydligare och lättare att ta till sig.

Hund Katt Hamster Storsjöodjur

Resultatet av denna på en webbsida blir: 

  • Hund
  • Katt
  • Hamster
  • Storsjöodjur

Om du istället har behov av att rangordna något är det en numrerad lista du ska använda. Skillnaden är att du använder ol , ordered list, istället för ul, unordered list.

Labrador Springer spaniel Schäfer Basenji

Denna topplista över hundraser hade på en webbsida sett ut så här:

  1. Labrador
  2. Springer spaniel
  3. Schäfer
  4. Basenji

Uppgift

Skapa en ny underrubrik, nivå 2, under bilden som du döper till ”Min topplista”. Skapa en ordnad lista där som innehåller din personliga djurtopplista. Dubbelkolla med exemplen ovan om du kör fast!

Om du loggar in kan du spara dina framsteg och få personligt rekommenderade kurser.

Författare: Ola Nilsson

Publicerad:

Reviderad: