Forklareren

VedRyan Dube

Sidst opdateret den22. juni 2021

HTML er et markup-sprog, som webstedsudviklere bruger til at oprette alle de websider, du finder på internettet.

Hvad er HTML?

HTML står for Hyper Text Markup Language. Den definerer layoutet og strukturen på en webside ved hjælp af formatering af "tags" inden for parenteser, der består af mindre end "" symboler.

Hvert websideelement indeholder en bestemt etiket, der fortæller browseren, hvordan den del af siden skal formateres eller struktureres. Således er en hel webside simpelthen en række af disse elementer.

For eksempel vil en af ​​de mest basale websider indeholde:

• : Markerer begyndelsen og slutningen af ​​en HTML-fil
• : Markerer begyndelsen og slutningen af ​​websideoverskriftoplysningerne
• : Mærker den titel, der skal vises i browserens titellinje
• : Markerer begyndelsen og slutningen af ​​websidens indhold
• til: Størrelser på overskrifter i hele dokumentet fra store (H1) til meget små (H6)
• : Indsætter et afsnit, når to vogne vender tilbage (et mellemrum mellem linjerne)
• 
  : Indsætter et linjeskift (intet mellemrum mellem linjerne)
• : Markerer teksten mellem tags
• : Kursiver teksten mellem tags
• : Indsætter et billede, hvor dette tag findes
• : Indsætter et link til en anden webside inde i dokumentet

Der er mange andre HTML-tags, du kan bruge, men ovenstående er de mest almindelige på de fleste websider på internettet.

Et eksempel på en HTML-fil

Det tager ikke en programmeringsbaggrund at oprette din egen webside. Faktisk kan du åbne Notepad lige nu, skrive en simpel tekst og gemme den som en .html- eller .htm-fil. Dette kan være den første webside, du nogensinde har oprettet, og alt hvad du behøver er din egen computer.

Følgende er et eksempel på en meget enkel HTML-fil.

Dette er den første header

Dette er mit første afsnit.

Dette er anden linje

Dette er et andet afsnit.

Sådan fungerer denne markering af hypertekst:

1. De to første linjer fortæller browseren, at dokumentet er i HTML-format, og at sproget er engelsk.
2. Sidetitlen vedlagt af indstil websiden, som browseren skal vises som “Webside-titel”.
3. Afsnittet vedlagt og fortæller browseren, at disse linjer indeholder det indhold, der skal vises på websiden.
4. Overskriften vedlagt med

   og

   tags opretter "Dette er den første overskrift" i den største overskriftsskrifttype, der er tilgængelig i HTML.
5. Det

   og

   tags indsætter et mellemrum efter tag.
6. Det
   tag indsætter et enkelt linjeskift efter denne sætning.
7. afslutter dokumentet, og websiden stopper indlæsningen på dette tidspunkt.

Her er ovenstående webside-fil, når du åbner den med din browser.

Som du kan se, er det ligetil at oprette en webside, selvom du ikke har en webserver. Alt hvad du behøver er at oprette en HTML-fil og indlæse den med din

Sådan fungerer HTML

Det er klart, at de fleste sider ikke er gemt på din computer. I stedet gemmes de på webservere ude på internettet. Så når du besøger en artikel eller andet indhold på et hvilket som helst websted, sender serveren din browser .html-filen, der indeholder indholdet til den side.

Du kan se HTML-koden for enhver webside i Chrome-browseren ved at højreklikke hvor som helst på siden og vælge Vis kildetekst.

Dette viser dig koden bag websiden. Du kan se, at det er en HTML-fil ved det første tag øverst i filen.

Du vil dog også bemærke, at kildekoden indeholder andre typer tags, der slet ikke er HTML-tags.

Indlejrede scripts i HTML-filer

For eksempel kan du se kode, der kalder .php- eller .js-filer. Disse er PHP- og Javascript-scripts, der tillader dynamiske websider, der indlæser forskelligt indhold afhængigt af brugerindgange eller output fra andre scripts der kører på webserveren eller browseren og leverer indhold til den samme HTML-fil, som din browser læser.

Da HTML er en "statisk" metode, der bruges til at formatere indhold på en webside, har webdesignere brug for en mere dynamisk måde at ændre indhold på siden ud fra, hvor browsere holder markøren eller klikker. Browsere kan læse og fortolke Javascript-kode ved at ændre formateringen eller andre elementer på en webside baseret på brugerinteraktion.

For eksempel skifter menuerne på en side farve, når du holder markøren over hvert menupunkt.

PHP-kode indlejret i websiden gør det muligt for ting som dynamiske knapper at fungere korrekt. F.eks Kommentarer knappen i bunden af ​​de artikler, du vil se på dette websted, er drevet af PHP-kode, der kører på serveren og leverer de kommentarer, der er lagt ud på hver artikel.

PHP tillader også webadministratorer at oprette innovative funktioner som uendelig rulning, der fortsætter med at indlæse nye artikler, når du ruller ned på websides hovedside.

Takket være de moderne webbaserede scriptsprog er nutidens websider ikke længere kun statiske, hvilket alt HTML-kode alene tillader.

Andre HTML-tags

Hvis du er klar til at komme i gang med at oprette dine egne HTML-filer, skal du vide, hvordan du bruger de mest almindelige HTML-tags ud over de grundlæggende, der er beskrevet ovenfor.

Følgende er et par eksempler på nogle flere HTML-tags, du kan bruge, når du koder dine egne websider.

HREF for at indsætte links

Brug for at integrere et link inde på din webside en href.

Find din iPhone ved hjælp af Hey Siri

Dette vil linke teksten "Find din iPhone ved hjælp af Hey Siri" til det URL-link, du har medtaget i dobbelt citater efter "href =".

IMG SRC for at indsætte billeder

Du kan indsæt billeder ind på en webside ved hjælp af img src.

Dette trækker billedet my-picture.jpg fra webserveren og viser det på den side, hvor du har placeret dette tag, med en bredde på 150 pixels og en højde på 120 pixels.

Det alt parameter viser teksten "mit profilbillede" i browsere, der ikke kan vise billedet. Hvis du ikke inkluderer "stil" -parameteren, vises billedet i sin originale opløsning, som muligvis er for stort eller for lille til det område af siden, hvor du integrerer det.

UL og OL til at oprette lister

Hvis du vil bruge punkttegn eller nummererede lister i dit indhold, er der to tags, der giver dig mulighed for at gøre dette.

Følgende kode indsætter en ikke-nummereret liste (punkttegn):

Punkt 1

Punkt 2

Punkt 3

Brug

i starten af ​​listen og

nederst på listen. Vedlæg hvert element indeni

og

tags.

Du kan bruge den samme tilgang til en nummereret liste ved hjælp af

som står for "Ordered List".

Punkt 1

Punkt 2

Punkt 3

Indsættelse af tabeller

Webdesignere brugte store tabeller til at formatere websider. Men med fremkomsten af ​​Cascading Style Sheets (CSS) er dette ikke længere nødvendigt. I stedet gemmes CSS-filer på webserveren, og HTML-sider kalder disse filer for at bestemme, hvordan man formaterer ting som margener, skriftstørrelser og farver og mere.

Imidlertid er tabeller stadig nyttige til at vise ting som data. For at indsætte en tabel skal du omslutte begyndelsen af ​​indholdet med

og afslut det med .

Afslut hver række med

og og hver enkelt kolonneoverskrift med og . Hver almindelig celle, vedlagt med og .

Navn
Adresse
Telefonnummer


Ryan Dube
100 Jones Lane; Johnson City, TN
317-555-1212

Dette sendes til en webside som følger:

Med netop disse grundlæggende elementer kan du oprette nyttige statiske websider til at vise dit indhold på internettet. Alt hvad du behøver, hvis du vil gøre det offentligt og synligt for verden, er tilmeldingen til en webhosting-konto og gem dine filer i den offentlige mappe på din konto.

Faktisk, lancering af dit eget websted er overraskende let, især hvis du vælger at bruge en indholdsadministration platform som WordPress.

Hvordan

Sådan ryddes Google Chrome-cache, cookies og browserhistorik

Chrome gør et fremragende stykke arbejde med at gemme din browserhistorik, cache og cookies for at optimere din browserydelse online. Hendes hvordan man ...

Tilbud

Matchende pris i butikken: Sådan får du onlinepriser, mens du handler i butikken

At købe i butikken betyder ikke, at du skal betale højere priser. Takket være prismatch-garantier kan du få online-rabatter, mens du handler i ...

Hvordan

Sådan giver du et Disney Plus-abonnement med et digitalt gavekort

Hvis du har haft glæde af Disney Plus og vil dele det med andre, kan du her købe et Disney + gaveabonnement til ...

Hvordan

Din guide til deling af dokumenter i Google Docs, Sheets og Slides

Du kan nemt samarbejde med Googles webbaserede apps. Her er din guide til deling i Google Docs, Sheets og Slides med tilladelserne ...