Formatering av text och listor
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.
Och så här hade dessa sett ut som webbsida:
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!
För kursiv stil används vanligtvis em
Koden nedan ger texten 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.
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.
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.
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.
Denna topplista över hundraser hade på en webbsida sett ut så här:
- Labrador
- Springer spaniel
- Schäfer
- 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!