Grunnleggende om HTML
I denne artikkelen forklarer vi det grunnleggende om HTML.
Dette forklarer hovedtagger som DOCTYPE-erklæringen, <html>, <head> og <body>-tagger. Det beskriver også tagger, attributter og spesialtegn.
YouTube Video
Grunnleggende om 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 begynnelsen av filen erklærer vi at dette er et HTML5-dokument, som indikerer at det følger HTML5-reglene.
-
<html>Html
-taggen er det ytterste elementet i et HTML-dokument som omfatter hele innholdet. Hver HTML-fil inneholder bare én-tag, og alle andre tagger er nestet innenfor denne taggen. Lang="en"inni det åpnende<html>-tagget kalles et attributt og informerer nettleseren om at dokumentet er skrevet på engelsk. Dette hjelper til med å varsle skjermlesere og søkemotorer om dokumentets språk. -
<head><head>-taggen definerer metadata (informasjon) for siden. Dette inkluderer sidens tittel, tegnkoding og innstillinger for responsivt design. Responsivt design refererer til en metode designet for nettsteder eller apper for å tilpasse seg og vise godt på ulike enheter og skjermstørrelser. Dette lar brukerne komfortabelt vise innhold på forskjellige enheter som smarttelefoner, nettbrett og skrivebord.<meta charset="UTF-8">setter dokumentets tegnkoding til UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">er en innstilling som optimaliserer visningen for mobile enheter. Siden tilpasser seg bredden på enhetens skjerm.<title>representerer tittelen på siden som vises i nettleserfanen. I dette eksempelet er tittelen 'Grunnleggende om HTML' satt. -
<body><body>-taggen inneholder delen som viser innhold til brukerne. Innenfor denne taggen skrives tekst, bilder, lenker osv. -
<main><main>-taggen representerer hovedinnholdet på siden. Dette inkluderer overskrifter og avsnitt. -
<h1><h1>-taggen representerer den viktigste overskriften på siden. Det er vanlig å bruke<main>- og<h1>-tagger bare én gang i et dokument. -
<p><p>-taggen representerer et avsnitt. -
<!-- Comment -->Du kan skrive kommentarer i HTML i dette formatet. Siden HTML på klientsiden kan sees av alle, må du ikke inkludere sensitiv informasjon som passord eller API-nøkler i kommentarer.
HTML har mange tagger, men vær oppmerksom på følgende punkter her. En HTML-fil består av en DOCTYPE-erklæring og én <html>-tag. <html>-taggen inneholder én <head>-tag og én <body>-tag. I HTML er alle tagger inneholdt i <html>-taggen, som uttrykker strukturen til teksten gjennom foreldre-, barne- og søskenrelasjoner, lignende en trestruktur. Når du skriver HTML, sørg for å fokusere på dokumentstrukturen også.
Tagger og attributter
La oss se nærmere på HTML-tagger 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> -->Tagger er omsluttet av vinkelparenteser (<, >) og består vanligvis av et par åpning og lukketagger. Imidlertid finnes det også enkeltstående tagger, som <meta>-taggen og <img>-taggen, som ikke inneholder innhold. Enkeltstående tagger krever ikke en lukketagg.
Tagger kan ha attributter, som gir tilleggsinformasjon til taggen. Attributter skrives inne i åpningstaggen i formatet attributtNavn="verdi".
Her refereres <div> til som en tagg, og <div>Innhold</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>Vanlige attributter i HTML inkluderer id, class og style. id-attributtet brukes for å gi et element en unik identifikator, og det kan bare være ett element med samme id på en side. Det er nyttig når man manipulerer spesifikke elementer med JavaScript eller CSS. class-attributtet lar deg gruppere flere elementer med CSS eller JavaScript ved å tildele et klassenavn. Du kan tildele den samme klassen til flere elementer, slik at stiler kan deles. style-attributtet angir CSS-stiler inline for et element. Vanligvis defineres stiler i et eksternt stilark eller innenfor <style>-taggen, men dette attributtet brukes når du vil spesifisere stiler direkte for individuelle elementer.
Spesialtegn i HTML
La oss undersøke spesialtegn i HTML.
I HTML finnes det spesialtegn som brukes til å vise spesifikke symboler og tegn. Disse spesialtegnene kalles entiteter. Spesialtegn begynner med & (ampersand), etterfulgt av et navn eller nummer, og slutter med ; (semikolon).
Representerende spesialtegn i HTML
Her er noen vanlige spesialtegn.
| 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å bruk av spesialtegn i HTML
Spesielt må vinkelparenteser (<, >) og doble anførselstegn brukes riktig i HTML.
Vinkelkonsoller (<, >) og doble anførselstegn bør representeres som spesialtegn 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-versjoner
La oss ta en titt på HTML-versjonene her.
HTML-versjoner har utviklet seg for å definere strukturen og funksjonaliteten til nettsider. Her er de viktigste versjonene:.
-
HTML 1.0 (1993)
Den første HTML-versjonen hadde bare svært grunnleggende merkingsfunksjoner. Den definerte elementer som lenker, overskrifter, avsnitt og lister.
-
HTML 2.0 (1995)
Den første standardiserte versjonen, med flere elementer lagt til, inkludert støtte for skjemaer og tabeller.
-
HTML 3.2 (1997)
Flere layoutegenskaper ble lagt til, som gjorde det mulig å innlemme stilelementer og skript. I tillegg ble layout ved bruk av
<table>-elementet vanlig. -
HTML 4.01 (1999)
Separasjonen av struktur og presentasjon avanserte, og CSS ble introdusert. Opprettelsen av standardkompatible nettsteder ble anbefalt. Videre ble internasjonalisering og tilgjengelighet av dokumenter forbedret.
-
HTML5 (2014)
Den nyeste hovedversjonen, som introduserer støtte for video og lyd, canvas, lokal lagring, geolokalisering og andre nye APIer. Den er mobilvennlig, noe som gjør det mulig å utvikle mer interaktive nettapplikasjoner.
HTML5.2 er en versjon av HTML anbefalt i 2017, og er en forbedret versjon av HTML5. Siden HTML5.2 har det blitt kontinuerlig oppdatert som HTML Living Standard, i stedet for å ha et statisk versjonsnummer.
HTML har utviklet seg gjennom disse versjonene, og blitt til en mer fleksibel og kraftig nett-teknologi.
Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.