5 trin til forståelse af grundlæggende HTML -kode

5 trin til forståelse af grundlæggende HTML -kode

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





Vi vil se på nogle grundlæggende sprog, herunder hvad HTML egentlig er, nogle grundlæggende begreber og hvordan det interagerer med andre sprog. Tænk på dette som et 'HTML for dummies' crash -kursus.



Grundlæggende HTML: Hvad er HTML?

HTML står for Hypertext Markup Language . Og selvom det nogle gange stumper ind med programmeringssprog, er dette ikke korrekt.





Som en markeringssprog , HTML lader dig kun oprette visningslayoutet på sider. Et sandt programmeringssprog , ligesom Java eller C ++, indeholder logik og kommandoer, der udføres.

Selvom det er enkelt, er HTML rygraden på hver side på nettet. Det er ansvarligt for, hvilken tekst der vises som fed, tilføjer billeder og linker til andre sider. Vi har en HTML FAQ, der forklarer mere.



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

Selvom du har nul erfaring med markup eller programmeringssprog, vil lære dig 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åelse af begrebet tags

HTML bruger et system med mærker at kategorisere forskellige elementer i dokumentet.

De fleste tags kommer i par for at pakke den berørte tekst ind i dem. Her er et enkelt eksempel (



tag laver tekst fremhævet ; vi diskuterer dette mere om et øjeblik.)

This is some bold text .

Læg mærke til hvordan slutmærket starter med et skråstreg (/). Dette betyder et lukkemærke, hvilket er vigtigt. Hvis du ikke lukker et mærke, har alt fra start og frem den attribut.

hvordan man annullerer en venmo -betaling

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 et linjeskift. Du kan 'lukke' sådanne tags ved at tilføje et skråstreg (f.eks


), men det er ikke strengt nødvendigt.

Trin 2: Skelet -HTML -layoutet

Et korrekt HTML -dokument skal have bestemte tags defineret, så det er lagt korrekt ud. Disse 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 element i en HTML -fil.
  • Dernæst | _+_ | sektion indeholder oplysninger som sidetitlen, forskellige scripts, der kører på siden og lignende. Som navnet antyder, kommer dette typisk lige efter initialen | _+_ | tag. Slutbrugeren ser ikke meget af indholdet i disse tags.
  • Endelig | _+_ | tag indeholder teksten på siden, 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. Det er selvfølgelig ikke muligt at dække hvert element, så vi gennemgår nogle af de vigtigste. Vi har dækket mange flere HTML -eksempler hvis disse ikke tilfredsstiller dig.

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

Enkel tekstformatering

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

  • | _+_ | tags laver tekst fremhævet .
  • | _+_ | tags (som står for 'vægt') vil kursivere tekst.

HTML understøtter også de ældre

tag for fed og

for kursiv. Det er dog at foretrække at bruge dem ovenfor.

Kort sagt,

og

vise, 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 svagsynede.

Afsnit og andre divisioner

HTML'er

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

Det

tag lader dig opdele tekst i afsnit. Browsere lægger automatisk lidt plads før og efter disse, så du naturligt kan bryde tekst op.

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

igennem

mærker. H1 er det vigtigste header, mens H6 er mindst vigtigt. Næsten hver MakeUseOf -artikel bruger H2- og H3 -overskrifter til at organisere information.

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

for at tilføje et linjeskift.

Her er et eksempel, der bruger alle disse:

Trin 4: Indsætning af billeder

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

Du indsætter et billede ved hjælp af

tag. Kombinerer dette med

attribut lader dig angive, hvor billedet skal indlæses fra.

En anden vigtig egenskab af

ikonet for batterilevetid forsvandt windows 10

tags er

. Alt -tekst giver dig mulighed for at beskrive billedet for skærmlæsere, eller hvis billedet ikke indlæses korrekt. Du kan holde musen over et billede for at se dets alttekst.

Brug

og




elementer for at angive det antal pixels, billedet vises på.

Sæt det hele sammen, og et billedtag ser sådan ud:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



World Wide Web ville ikke være meget af et web uden links til andre sider. Bruger

tag, kan du linke til andre sider på enhver tekst.

Inde i

src

tag, den

attribut fortæller, hvor du linker. Bare at indsætte URL'en fungerer fint. Du kan bruge

alt

element for at tilføje en smule tekst, der vises, når nogen svæver over linket.

Et grundlæggende link ser sådan ud:

width

Det

height

tag har mange andre mulige elementer, men vi vil ikke dykke ned i dem her.

Sådan forbinder HTML med CSS og JavaScript

Vi har set på det grundlæggende i HTML, og hvordan det opretter en webside. Men som du kan forestille dig, skærer HTML alene det ikke til det moderne web. Enkle HTML -websider var almindelige i 'Web 1.0' -dagene, hvor de fleste websteder ikke var andet end statisk tekst.

Men nu har vi meget mere. CSS (Cascading Style Sheets) er et sprog, der bruges til at beskrive, hvordan den tekst, du forberedte i HTML, skulle se ud. Husk

Dr. Phil

tag vi diskuterede? Inde i dette (og andre tags) kan du definere a

attribut. Derefter kan du i dit ledsagende CSS -dokument skrive instruktioner til, hvordan det

skulle kigge.

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 . Tjek også ud hvordan du optimerer dine CSS -filer .

JavaScript

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

For eksempel tillader JavaScript et websted at advare dig om, at det indtastede kodeord ikke opfylder dets krav, før du prøver at indsende det. En webdesigner kan bruge JavaScript til at gennemgå billeder i et diasshow eller bede brugeren om at indtaste.

Dette er blot nogle få elementære eksempler. JavaScript er et scriptsprog, der er i stand til at gøre en hel masse og er forholdsvis langt mere kompliceret end HTML og CSS. Se vores oversigt over JavaScript for meget mere.

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

Evolutionen 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 af og til udfaset. Disse inkluderer forfærdelige tags som

href

og

title

(der henholdsvis ruller og blinker tekst) almindeligt set i 1990'ernes webstedsdesign. Så husk på, at standarder ændrer sig over tid.

Lidt HTML -viden rækker langt

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

jeg trykkede på en knap på mit tastatur, og nu kan jeg ikke skrive

Hvis du vil vide mere, skal du opgradere dine webudviklingsevner med vigtige værktøjer og derefter tjekke ud vores guide til, hvordan du designer dit første websted .

Billedkredit: Belyaevskiy/ Depositphotos

Del Del Tweet E -mail 5 tips til at overlade dine VirtualBox Linux -maskiner

Træt af den dårlige ydelse, der tilbydes af virtuelle maskiner? Her er hvad du skal gøre for at øge din VirtualBox -ydeevne.

Læs Næste Relaterede emner
  • Programmering
  • HTML
  • Web-udvikling
  • JavaScript
  • Webmasterværktøjer
  • Programmering
  • HTML5
Om forfatteren Ben Stegner(1735 artikler udgivet)

Ben er stedfortrædende redaktør og Onboarding Manager på MakeUseOf. Han forlod sit it-job for at skrive på fuld tid i 2016 og har aldrig set sig tilbage. Han har dækket tekniske tutorials, videospilanbefalinger og mere som en professionel forfatter i over syv år.

Mere fra Ben Stegner

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere