I denna laboration ska du skapa ett HTML-dokument och börja skriva kod för en webbsida. Syftet är att du ska lära dig strukturen och experimentera med några olika "taggar", så innehållet kommer bara bli nonsenstext.
15 min.
Följande steg är förslag på hur du kommer igång med att skriva HTML-kod. Gör också egna experiment, utöver dessa punkter. Visual Studio Code ger dig viss hjälp med att skriva koden, men du bör också titta i kursboken eller en referenslista samtidigt som du arbetar med laborationen, för att se hur HTML-elementen ska skrivas.
Förberedelser
- Öppna mappen L2 i Visual Studio Code (VSC).
Första HTML-dokumentet
- Skapa en ny fil kallad index.html
- Öppna filen i editorn och lägg in grundstrukturen för HTML, genom att i filen skriva ett utropstecken och sedan trycka på tab-tangenten,
!+ tab
Öppna webbsidan i webbläsaren
- Klicka på Go Live i statusraden i VSC, för att öppna sidan i webbläsaren.
- Alternativt högerklickar du på filen i VSC och väljer Open with Live Server.
- Arrangera webbläsarens fönster och VSC:s fönster så att du kan se båda samtidigt, eller så att du enkelt kan växla mellan dem.
Meta-data
- Skriv in lämpligt namn (t.ex. "Laboration 2") i
title-elementet. - Ändra
lang-attributet till"sv".
Innehåll på sidan
- Inom
body-elementet lägger du in enh1-rubrik med valfri text.- Kontrollera att webbsidan uppdateras i webbläsaren och att du där nu kan se rubriken.
- Lägg in ett textstycke (
p-element) med valfri text under rubriken. - Lägg in ytterligare några textstycken med Lorem ipsum-text:
- Du kan använda så kallade emmets, för att snabbt få in koden, t.ex.
p>Lorem+ tab ger ett p-element med Lorem ipsum-text.p>Lorem7+ tab ger ett p-element med sju Lorem ipsum-ord.p*5>Lorem40+ tab ger fem p-element med 40 Lorem ipsum-ord vardera.
- Du kan använda så kallade emmets, för att snabbt få in koden, t.ex.
- Lägg in fler rubriker med
h2ochh3mellan dina textstycken. - Bryt en rad med en
br-tagg. - Lägg in en skiljelinje med en
hr-tagg. - Lägg in en bild med en
img-tagg.- Referera till någon av bildfilerna i mappen
img. - Använd en relativ adress till bildfilen.
- Referera till någon av bildfilerna i mappen
Formatera koden
- Formatera koden genom att välja kommandot Format Document i Command Palette eller genom att trycka på tangenterna shift + alt + F.
- Om formateringen inte fungerar, kontrollerar du att du gjort de inställningar som beskrivs för Visual Studio Code i lab L1a.
- Indentering av koden ska då justeras, så att strukturen tydligare framgår. Ser du ingen förändring, har du antagligen skrivit koden bra redan då du skrev den. Prova då att "stöka till" koden och välj kommandot igen, för att se hur koden justeras.
Klar
Fortsätt öva med egna exempel, tills du känner dig säker på det som tagits upp i denna laboration. Sedan går du vidare med föreläsning F2b och därefter laboration L2b.