12 KiB
Terrarium Projekt Del 1: Introduktion til HTML
Sketchnote af Tomomi Imura
Quiz før lektionen
Se videoen
Introduktion
HTML, eller HyperText Markup Language, er 'skelettet' på nettet. Hvis CSS 'klæder' din HTML på, og JavaScript giver det liv, så er HTML kroppen i din webapplikation. HTML's syntaks afspejler endda denne idé, da den inkluderer "head", "body" og "footer" tags.
I denne lektion skal vi bruge HTML til at opbygge 'skelettet' af vores virtuelle terrariums interface. Det vil have en titel og tre kolonner: en højre og en venstre kolonne, hvor de trækbare planter befinder sig, og et midterområde, som vil være det glaslignende terrarium. Ved slutningen af denne lektion vil du kunne se planterne i kolonnerne, men interfacet vil se lidt mærkeligt ud; bare rolig, i næste sektion vil du tilføje CSS-stilarter til interfacet for at få det til at se bedre ud.
Opgave
På din computer skal du oprette en mappe kaldet 'terrarium' og inde i den en fil kaldet 'index.html'. Du kan gøre dette i Visual Studio Code efter at have oprettet din terrarium-mappe ved at åbne et nyt VS Code-vindue, klikke på 'open folder' og navigere til din nye mappe. Klik på den lille 'file'-knap i Explorer-panelet og opret den nye fil:
Eller
Brug disse kommandoer i din git bash:
mkdir terrariumcd terrariumtouch index.htmlcode index.htmlellernano index.html
index.html-filer angiver til en browser, at det er standardfilen i en mappe; URL'er som
https://anysite.com/testkan være bygget ved hjælp af en mappestruktur, der inkluderer en mappe kaldettestmedindex.htmlindeni;index.htmlbehøver ikke at vises i en URL.
DocType og html-tags
Den første linje i en HTML-fil er dens doctype. Det er lidt overraskende, at du skal have denne linje helt øverst i filen, men den fortæller ældre browsere, at browseren skal gengive siden i standardtilstand og følge den aktuelle HTML-specifikation.
Tip: I VS Code kan du holde musen over et tag og få information om dets brug fra MDN Reference guides.
Den anden linje skal være <html>-taggets åbningstag, efterfulgt af dets lukningstag </html>. Disse tags er roden af dit interface.
Opgave
Tilføj disse linjer øverst i din index.html-fil:
<!DOCTYPE html>
<html></html>
✅ Der er et par forskellige tilstande, der kan bestemmes ved at sætte DocType med en forespørgselsstreng: Quirks Mode og Standards Mode. Disse tilstande blev brugt til at understøtte virkelig gamle browsere, som normalt ikke bruges i dag (Netscape Navigator 4 og Internet Explorer 5). Du kan holde dig til standard doctype-deklarationen.
Dokumentets 'head'
'Head'-området i HTML-dokumentet inkluderer vigtig information om din webside, også kendt som metadata. I vores tilfælde fortæller vi webserveren, som denne side vil blive sendt til for at blive gengivet, disse fire ting:
- sidens titel
- sidens metadata, herunder:
- 'character set', som fortæller, hvilken tegnkodning der bruges på siden
- browserinformation, herunder
x-ua-compatible, som angiver, at IE=edge-browseren understøttes - information om, hvordan viewporten skal opføre sig, når den indlæses. At sætte viewporten til at have en initial scale på 1 kontrollerer zoomniveauet, når siden først indlæses.
Opgave
Tilføj et 'head'-blok til dit dokument mellem åbning og lukning af <html>-tags.
<head>
<title>Welcome to my Virtual Terrarium</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
✅ Hvad ville der ske, hvis du satte et viewport meta-tag som dette: <meta name="viewport" content="width=600">? Læs mere om viewport.
Dokumentets body
HTML-tags
I HTML tilføjer du tags til din .html-fil for at oprette elementer på en webside. Hvert tag har normalt et åbningstag og et lukningstag, som dette: <p>hej</p> for at angive et afsnit. Opret kroppens interface ved at tilføje et sæt <body>-tags inde i <html>-tagparret; din markup ser nu sådan ud:
Opgave
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Virtual Terrarium</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body></body>
</html>
Nu kan du begynde at opbygge din side. Normalt bruger du <div>-tags til at oprette de separate elementer på en side. Vi opretter en række <div>-elementer, som vil indeholde billeder.
Billeder
Et HTML-tag, der ikke behøver et lukningstag, er <img>-tagget, fordi det har et src-element, der indeholder al den information, siden har brug for til at gengive elementet.
Opret en mappe i din app kaldet images, og tilføj alle billederne fra source code folder; (der er 14 billeder af planter).
Opgave
Tilføj disse plantebilleder i to kolonner mellem <body></body>-tags:
<div id="page">
<div id="left-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
</div>
</div>
<div id="right-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
</div>
</div>
</div>
Bemærk: Spans vs. Divs. Divs betragtes som 'block'-elementer, og Spans er 'inline'. Hvad ville der ske, hvis du ændrede disse divs til spans?
Med denne markup vises planterne nu på skærmen. Det ser ret dårligt ud, fordi de endnu ikke er stylet med CSS, og det gør vi i næste lektion.
Hvert billede har alt-tekst, der vises, selvom du ikke kan se eller gengive et billede. Dette er en vigtig attribut at inkludere for tilgængelighed. Lær mere om tilgængelighed i fremtidige lektioner; for nu skal du huske, at alt-attributten giver alternativ information for et billede, hvis en bruger af en eller anden grund ikke kan se det (på grund af langsom forbindelse, en fejl i src-attributten, eller hvis brugeren bruger en skærmlæser).
✅ Bemærkede du, at hvert billede har den samme alt-tekst? Er dette god praksis? Hvorfor eller hvorfor ikke? Kan du forbedre denne kode?
Semantisk markup
Generelt er det at foretrække at bruge meningsfuld 'semantik', når du skriver HTML. Hvad betyder det? Det betyder, at du bruger HTML-tags til at repræsentere den type data eller interaktion, de er designet til. For eksempel bør hovedtitelteksten på en side bruge et <h1>-tag.
Tilføj følgende linje lige under dit åbningstag <body>:
<h1>My Terrarium</h1>
At bruge semantisk markup, som at have overskrifter som <h1> og uordnede lister som <ul>, hjælper skærmlæsere med at navigere gennem en side. Generelt bør knapper skrives som <button>, og lister bør være <li>. Selvom det er muligt at bruge specielt stylet <span>-elementer med klikfunktioner til at efterligne knapper, er det bedre for handicappede brugere at bruge teknologier til at bestemme, hvor på en side en knap findes, og interagere med den, hvis elementet vises som en knap. Af denne grund bør du forsøge at bruge semantisk markup så meget som muligt.
✅ Tag et kig på en skærmlæser og hvordan den interagerer med en webside. Kan du se, hvorfor ikke-semantisk markup kan frustrere brugeren?
Terrariet
Den sidste del af dette interface involverer at oprette markup, der vil blive stylet til at skabe et terrarium.
Opgave:
Tilføj denne markup over det sidste </div>-tag:
<div id="terrarium">
<div class="jar-top"></div>
<div class="jar-walls">
<div class="jar-glossy-long"></div>
<div class="jar-glossy-short"></div>
</div>
<div class="dirt"></div>
<div class="jar-bottom"></div>
</div>
✅ Selvom du tilføjede denne markup til skærmen, ser du absolut intet blive gengivet. Hvorfor?
🚀Udfordring
Der er nogle vilde 'ældre' tags i HTML, som stadig er sjove at lege med, selvom du ikke bør bruge forældede tags som disse tags i din markup. Kan du stadig bruge det gamle <marquee>-tag til at få h1-titlen til at rulle horisontalt? (hvis du gør det, så husk at fjerne det bagefter)
Quiz efter lektionen
Gennemgang & Selvstudie
HTML er det 'prøvede og sande' byggesystem, der har hjulpet med at opbygge nettet til, hvad det er i dag. Lær lidt om dets historie ved at studere nogle gamle og nye tags. Kan du finde ud af, hvorfor nogle tags blev forældede og andre tilføjet? Hvilke tags kunne blive introduceret i fremtiden?
Lær mere om at bygge sider til nettet og mobile enheder på Microsoft Learn.
Opgave
Øv dig i HTML: Byg en blogmockup
Ansvarsfraskrivelse:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten Co-op Translator. Selvom vi bestræber os på at sikre nøjagtighed, skal det bemærkes, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.