HTML er en vigtig del af nettet, som vi kender det. Og selvom få webdesignere opretter sider ved manuelt at indtaste HTML, er det stadig praktisk at vide lidt om det.

Vi vil se på nogle af de grundlæggende sprog, herunder hvad HTML virkelig er, nogle grundlæggende koncepter, og hvordan det interagerer med andre sprog. Tænk på dette som en “HTML til dummies” Lyn kursus.

Grundlæggende om HTML: Hvad er HTML?

HTML står for Hypertext Markup Language. Og selvom det undertiden er klumpet ind med programmeringssprog, er dette ikke nøjagtigt.

Som en markup sprog, HTML giver dig kun mulighed for at oprette visningslayoutet for sider. En sand programmeringssprog, som Java eller C ++, indeholder logik og kommandoer, der udføres.

Selvom det er enkelt, er HTML i rygraden på hver side på nettet. Det er ansvarligt for, hvilken tekst vises som fed, tilføjelse af billeder og link til andre sider. Vi har en HTML Ofte stillede spørgsmål De essentielle HTML-spørgsmål, du skal bogmærke De væsentlige HTML-spørgsmål, du skal bogmærke HTML har eksisteret i et stykke tid, så det er på tide at du lærte det grundlæggende. Her er hvad er det, hvordan det fungerer, og hvordan du kan skrive nogle almindelige elementer i HTML i dag! det forklarer mere.

Du kan højreklikke på de fleste websider i din browser og vælge Vis kildetekst eller lignende for at se HTML bag dem. Dette vil sandsynligvis også indeholde en masse kode, der ikke er HTML, men du kan sile igennem det.

Selv hvis du har nul erfaring med markup eller programmeringssprog, vil det at lære lidt om HTML gøre dig til en mere informeret webbruger. Lad os gennemgå fem grundlæggende trin for at hjælpe dig med at forstå, hvordan HTML fungerer. Vi giver eksempler undervejs.

Trin 1: Forstå begrebet tags

HTML bruger et system af tags at kategorisere forskellige elementer i dokumentet.

De fleste tags kommer parvis for at indpakke den berørte tekst inde i dem. Her er et simpelt eksempel (the tag skaber tekst dristig; vi diskuterer dette mere på et øjeblik.)

Dette er en vis fed tekst.

Bemærk, hvordan det afsluttende tag starter med et skråstreg (/). Dette betyder et lukningskode, hvilket er vigtigt. Hvis du ikke lukker et tag, har alt fra starten og frem den attribut.

Imidlertid har ikke alle tags et par. Nogle HTML-elementer, kaldet tomme elementer, har intet indhold og eksisterer på egen hånd. Et eksempel er
tag, som er en linjeskift. Du kan “tæt” sådanne tags ved at tilføje en skråstreg (som f.eks
) men det er ikke strengt nødvendigt.

Trin 2: Skeleton HTML-layout

Et korrekt HTML-dokument skal have bestemte tags defineret, så det er korrekt lagt. Dette er de væsentlige dele:

• Hvert HTML-dokument skal begynde med at erklære sig selv som sådan. Således er dets afsluttende tag, , er det sidste punkt i en HTML-fil.
• Derefter afsnit indeholder oplysninger som sidetitlen, forskellige scripts, der kører på siden og lignende. Som navnet antyder kommer dette typisk lige efter det indledende tag. Slutbrugeren ser ikke meget af indholdet i disse tags.
• Endelig mærket rummer teksten på den side, som læseren ser (plus meget mere). Her finder du billeder, links og mere.

Siden sektion udgør hovedparten af ​​et HTML-dokument, resten af ​​vores gennemgang ser på elementer, der vedrører det.

Trin 3: Grundlæggende HTML-tags til formatering

Lad os derefter se på nogle almindelige tags, der udgør HTML-dokumenter. Selvfølgelig er det ikke muligt at dække ethvert element, så vi gennemgår nogle af de vigtigste. Vi har dækket mange flere HTML-eksempler 17 enkle HTML-kodeeksempler, du kan lære på 10 minutter 17 enkle HTML-kodeeksempler, du kan lære på 10 minutter Vil du oprette en grundlæggende webside? Lær disse HTML-eksempler, og prøv dem i en teksteditor for at se, hvordan de ser ud i din browser. hvis disse ikke tilfredsstiller dig.

Hvis disse tags synes temmelig basale, skal du huske, at HTML blev oprettet helt tilbage i 1993. Internettet var meget tekstbaseret dengang i sine tidlige stadier.

Simpel tekstformatering

HTML understøtter grundlæggende tekstformater, som du kan finde i Microsoft Word:

• tags laver tekst dristig.
• tags (som står for “vægt”) vil kursiv tekst.

HTML understøtter også de ældre tag til fed og til kursiv. Det foretrækkes dog at bruge ovenstående.

Kort sagt, og vis, hvordan noget skal forstås, mens sidstnævnte tags kun fortæller dig, hvordan det skal se ud. Disse tidligere tags er mere tilgængelige for skærmlæsere, der bruges af synshæmmede.

Afsnit og andre afdelinger

HTML-s tag giver dig mulighed for at definere et afsnit af dokumentet. Normalt er dette parret med CSS (se nedenfor) for at formatere et afsnit på en bestemt måde.

Det

Du kan tilføje overskrifter til dit dokument og gøre det lettere at følge det ved hjælp af

igennem

tags. H1 er den vigtigste header, mens H6 er mindst vigtig. Næsten hver MakeUseOf-artikel bruger H2- og H3-overskrifter til at organisere information.

rammer Gå ind at tilføje linjeskift i dit HTML-dokument viser dem faktisk ikke. I stedet kan du bruge
at tilføje en linjeskift.

Her er et eksempel, der bruger alle disse:

 
Eksempel på overskrift
 
Dette er et afsnit.
 
Dette er et sekund
afsnit opdelt mellem to linjer.
  

Trin 4: Indsættelse af billeder

Billeder er en vigtig del af de fleste websider. Du kan nemt tilføje dem med HTML og endda indstille forskellige egenskaber til dem.

Du indsætter et billede vha

Men nu har vi meget mere. CSS (Cascading Style Sheets) er et sprog, der bruges til at beskrive, hvordan teksten, du forberedte i HTML, skal se ud. Husk tag vi drøftede? Inde i dette (og andre tags) kan du definere en klasse attribut. Derefter kan du i dit ledsagende CSS-dokument skrive instruktioner til, hvordan det sker klasse skal se ud.

Du kan definere disse stilelementer inline i din HTML-kode, men dette betragtes som dårlig praksis, da det er meget vanskeligere at vedligeholde. Lær mere med disse enkle CSS-eksempler 10 enkle CSS-kodeeksempler, du kan lære på 10 minutter 10 enkle CSS-kodeeksempler, du kan lære på 10 minutter. Vi vil undersøge, hvordan du opretter et inline stilark, så du kan øve dine CSS-færdigheder. Derefter går vi over på 10 grundlæggende CSS-eksempler. Derfra er din fantasi grænsen! .

JavaScript

Vi har set, at HTML definerer indholdet, og CSS bestemmer udseendet. JavaScript, det sidste medlem af det trio, der er vigtigt for internettet, giver websider mulighed for at reagere på folks handlinger uden at indlæse en ny side hver gang.

For eksempel tillader JavaScript, at et websted advarer dig om, at det indtastede kodeord ikke opfylder kravene, før du prøver at indsende det. En webdesigner bruger muligvis JavaScript til at bladre gennem billeder i en slideshow eller bede brugeren om input.

Dette er kun et par elementære eksempler. JavaScript er et scriptingsprog, der er i stand til at gøre en hel masse, og er relativt langt mere kompliceret end HTML og CSS. Se vores oversigt over JavaScript Hvad er JavaScript, og hvordan fungerer det? Hvad er JavaScript, og hvordan fungerer det? Hvad er Javascript? Det er et programmeringssprog, der bruges til at forbedre websider. Det inkluderer dynamisk opdatering af websider, brugergrænseflader og mere. Lad os dykke ned i hvad Javascript handler om. for meget mere.

At se på det komplette omfang af webdesign er uden for denne artikels rækkevidde, men det er tilstrækkeligt at sige, at HTML interagerer med andre sprog for at oprette de websider, vi kender i dag.

Udviklingen af ​​HTML

Det er vigtigt at bemærke, at HTML ikke er statisk. HTML har gennemgået flere revisioner, den seneste er HTML 5. Denne standard understøtter især indbygget videoindlejring i stedet for at stole på proprietære formater som Adobe Flash.

Nye iterationer af HTML erklærer også visse arkaiske tags som værende udskrevet fra tid til anden. Disse inkluderer forfærdelige tags som og (henholdsvis rulle- og flashtekst), der ofte ses i webstedsdesignet fra 1990'erne. Så husk, at standarder ændrer sig over tid.

Lidt HTML-viden går langt

Vi har taget en kort rundvisning i, hvordan et HTML-dokument fungerer. Nu kender du grundlæggende elementer i, hvordan websider er struktureret. Selv hvis du ikke fortsætter med at bygge websider, er du lidt mere opmærksom på det web, du bruger hver dag.

Hvis du vil lære mere, skal du opgradere dine webudviklingsevner med essentielle værktøjer Opgradere dine webudviklingsevner med disse 10 væsentlige værktøjer Opgradere dine webudviklingsevner med disse 10 væsentlige værktøjer Klar til at begynde at udvikle websteder? Disse online værktøjer til nye og ekspert webudviklere er garanteret at øge dine evner! og tjek derefter vores guide til, hvordan du designer din første hjemmeside Sådan oprettes et websted: For begyndere Sådan oprettes et websted: For begyndere I dag vil jeg guide dig gennem processen med at oprette et komplet websted fra bunden. Bare rolig, hvis dette lyder svært. Jeg vil guide dig gennem det hvert skridt på vejen. .

Billedkredit: Belyaevskiy / Depositphotos