Grundlæggende HTML
I denne artikel forklarer vi det grundlæggende i HTML.
Dette forklarer de vigtigste tags som DOCTYPE-deklarationen, <html>, <head> og <body>-tags. Det beskriver også tags, attributter og specialtegn.
YouTube Video
Grundlæggende HTML
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>I begyndelsen af filen erklærer vi, at dette er et HTML5-dokument, hvilket betyder, at det følger HTML5-reglerne.
-
<html><html>tagget er det yderste element i et HTML-dokument, der indpakker hele indholdet. Hver HTML-fil indeholder kun ét<html>tag, og alle andre tags er indlejret inde i dette tag.lang="en"inde i det åbne<html>tag kaldes en attribut og informerer browseren om, at dokumentet er skrevet på engelsk. Dette hjælper med at informere skærmlæsere og søgemaskiner om dokumentets sprog. -
<head><head>tagget definerer metadata (information) for siden. Dette inkluderer sidens titel, tegnkodning og responsive designindstillinger. Responsivt design refererer til en metode designet til at tilpasse og vise websteder eller apps godt på forskellige enheder og skærmstørrelser. Dette gør det muligt for brugere komfortabelt at se indhold på forskellige enheder såsom smartphones, tablets og desktops.<meta charset="UTF-8">sætter dokumentets tegnkodning til UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">er en indstilling, der optimerer visningen for mobile enheder. Siden tilpasses til bredden af enhedens skærm.<title>repræsenterer titlen på siden, der vises i browserfanen. I dette eksempel er titlen 'Grundlæggende HTML' indstillet. -
<body><body>-tagget indeholder den del, der viser indholdet til brugerne. Inden for dette tag skrives tekst, billeder, links osv. -
<main><main>-tagget repræsenterer hovedindholdet på siden. Dette inkluderer overskrifter og afsnit. -
<h1><h1>-tagget repræsenterer den vigtigste overskrift på siden. Det er almindeligt at bruge<main>- og<h1>-tagget kun en gang i et dokument. -
<p><p>-tagget repræsenterer et afsnit. -
<!-- Comment -->Du kan skrive kommentarer i HTML i dette format. Da klient-side HTML kan ses af alle, bør du ikke inkludere følsomme oplysninger såsom adgangskoder eller API-nøgler i kommentarer.
HTML har mange tags, men vær opmærksom på følgende punkter her. En HTML-fil består af en DOCTYPE-erklæring og et <html>-tag. <html>-tagget indeholder et <head>-tag og et <body>-tag. I HTML er alle tags indeholdt inden for <html>-tagget, hvilket udtrykker tekstens struktur gennem overordnet, underordnet og søskenderelationer, svarende til en træstruktur. Når du skriver HTML, skal du også fokusere på dokumentets struktur.
Tags og attributter
Lad os nu tage et kig på HTML-tags og attributter.
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->Tags er omsluttet af vinkelparenteser (<, >) og består typisk af et par af åbne og lukkede tags. Dog findes der også enlige tags, såsom <meta> taggen og <img> taggen, som ikke indeholder indhold. Enlige tags kræver ikke et lukket tag.
Tags kan have attributter, der giver yderligere information til tagget. Attributter skrives indeni det åbne tag i formatet attributNavn="værdi".
Her refereres <div> til som en tag, og <div>Content</div> som et element.
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>Almindelige attributter i HTML inkluderer id, class og style. id-attributten bruges til at give et element en unik identifikator, og der kan kun være ét element med det samme id på en side. Det er nyttigt, når man manipulerer specifikke elementer med JavaScript eller CSS. class-attributten giver dig mulighed for at gruppere flere elementer med CSS eller JavaScript ved at tildele en klassenavn. Du kan tildele den samme klasse til flere elementer, hvilket tillader deling af styles. style-attributten specificerer CSS-styles inline for et element. Normalt defineres styles i et eksternt stylesheet eller indenfor <style> taggen, men denne attribut bruges, når du vil specificere styles direkte for individuelle elementer.
Specialtegn i HTML
Lad os nu undersøge specialtegn i HTML.
I HTML er der specialtegn, der bruges til at vise specifikke symboler og tegn. Disse specialtegn kaldes entiteter. Specialtegn starter med & (ampersand), efterfulgt af et navn eller nummer, og ender med ; (semikolon).
Repræsentative specialtegn i HTML
Her er nogle almindelige specialtegn.
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
Eksempler på brug af specialtegn i HTML
Specielt skal vinkelparenteser (<, >) og dobbelte anførselstegn bruges korrekt i HTML.
Vinkelslutklammerne (<, >) og dobbelte anførselstegn bør repræsenteres som specialtegn i HTML, som vist nedenfor.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
HTML-versioner
Lad os tage et kig på HTML-versioner her.
HTML-versioner har udviklet sig for at definere strukturen og funktionaliteten af websider. Her er de vigtigste versioner:.
-
HTML 1.0 (1993)
Den første HTML-version havde kun meget basale markup-funktioner. Den definerede elementer såsom links, overskrifter, afsnit og lister.
-
HTML 2.0 (1995)
Den første standardiserede version, med flere tilføjede elementer, herunder støtte til formularer og tabeller.
-
HTML 3.2 (1997)
Flere layout-funktioner blev tilføjet, hvilket tillod indlejring af stilelementer og scripts. Desuden blev layout ved hjælp af
<table>-elementet almindeligt. -
HTML 4.01 (1999)
Adskillelsen af struktur og præsentation skred frem, og CSS blev introduceret. Oprettelse af standardkompatible sider blev anbefalet. Desuden blev dokumenternes internationalisering og tilgængelighed forbedret.
-
HTML5 (2014)
Den nyeste store version, der introducerer støtte til video og lyd, canvas, lokal lagring, geolokalisering og andre nye API'er. Den er mobilvenlig, hvilket muliggør udvikling af mere interaktive webapplikationer.
HTML5.2 er en version af HTML anbefalet i 2017 og er en forbedret version af HTML5. Siden HTML5.2 opdateres det løbende som HTML Living Standard, i stedet for at have et statisk versionsnummer.
HTML har udviklet sig gennem disse versioner, og er blevet til en mere fleksibel og kraftfuld webteknologi.
Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.