5 trinn for å forstå grunnleggende HTML -kode

5 trinn for å forstå grunnleggende HTML -kode

HTML er en viktig del av nettet slik vi kjenner det. Og mens få webdesignere lager sider ved å skrive HTML manuelt, er det fortsatt praktisk å vite litt om det.





Vi skal se på noen grunnleggende språk, inkludert hva HTML egentlig er, noen grunnleggende begreper og hvordan det samhandler med andre språk. Tenk på dette som et 'HTML for dummies' -kurs.



Grunnleggende HTML: Hva er HTML?

HTML står for Hypertekstmarkeringsspråk . Og selv om det noen ganger er slått sammen med programmeringsspråk, er dette ikke nøyaktig.





Som en markeringsspråk , HTML lar deg bare lage visningsoppsettet for sider. En sannhet programmeringsspråk , som Java eller C ++, inneholder logikk og kommandoer som utføres.

Selv om det er enkelt, er HTML ryggraden på hver side på nettet. Det er ansvarlig for hvilken tekst som vises som fet, legge til bilder og koble til andre sider. Vi har en HTML -FAQ som forklarer mer.



Du kan høyreklikke på de fleste nettsidene i nettleseren din og velge Vis sidekilde eller lignende for å se HTML -koden bak dem. Dette vil sannsynligvis også inneholde mye kode som ikke er HTML, men du kan sile gjennom det.

Selv om du har null erfaring med markup eller programmeringsspråk, vil lære deg litt om HTML gjøre deg til en mer informert nettbruker. La oss gå gjennom fem grunnleggende trinn for å hjelpe deg å forstå hvordan HTML fungerer. Vi kommer med eksempler underveis.



Trinn 1: Forstå begrepet tagger

HTML bruker et system av tagger å kategorisere forskjellige elementer i dokumentet.

De fleste tagger kommer i par for å pakke inn den berørte teksten. Her er et enkelt eksempel (



tag lager tekst modig ; vi diskuterer dette mer om et øyeblikk.)

This is some bold text .

Legg merke til hvordan den avsluttende koden starter med en skråstrek (/). Dette betyr en avsluttende tag, som er viktig. Hvis du ikke lukker en tag, vil alt fra starten av ha det attributtet.

gjenopprett tittelen på slettet youtube -video

Imidlertid har ikke alle tagger et par. Noen HTML -elementer, kalt tomme elementer , har ikke noe innhold og eksisterer på egen hånd. Et eksempel er


tag, som er et linjeskift. Du kan 'lukke' slike tagger ved å legge til en skråstrek (f.eks


), men det er ikke strengt nødvendig.

Trinn 2: Skjelett -HTML -oppsettet

Et riktig HTML -dokument må ha bestemte koder definert, slik at det er lagt opp riktig. Dette er de viktigste delene:

  • Hvert HTML -dokument må begynne med | _+_ | å erklære seg som sådan. Dermed er den avsluttende taggen, | _+_ | , er det siste elementet i en HTML -fil.
  • Deretter vil | _+_ | delen inneholder informasjon som sidetittelen, forskjellige skript som kjøres på siden og lignende. Som navnet antyder, kommer dette vanligvis rett etter initialen | _+_ | stikkord. Sluttbrukeren ser ikke mye av innholdet i disse kodene.
  • Til slutt, | _+_ | tag inneholder teksten på siden som leseren ser (pluss mye mer). Her finner du bilder, lenker og mer.

Siden

delen utgjør hoveddelen av et HTML -dokument, resten av gjennomgangen vår ser på elementer som gjelder det.

Trinn 3: Grunnleggende HTML -koder for formatering

La oss deretter se på noen vanlige koder som består av HTML -dokumenter. Selvfølgelig er det ikke mulig å dekke hvert element, så vi skal gå gjennom noen av de viktigste. Vi har dekket mange flere HTML -eksempler hvis disse ikke tilfredsstiller deg.

Hvis disse taggene virker ganske grunnleggende, husk at HTML ble opprettet helt tilbake i 1993. Nettet var veldig tekstbasert den gang i sine tidlige stadier.

Enkel tekstformatering

HTML støtter grunnleggende tekststiler som du finner i Microsoft Word:

  • | _+_ | tagger lager tekst modig .
  • | _+_ | tagger (som står for 'vektlegging') vil kursivere tekst.

HTML støtter også de eldre

tag for fet og

for kursiv. Imidlertid er det å foretrekke å bruke de ovenfor.

Kort oppsummert,

og

vise hvordan noe skal forstås, mens de sistnevnte taggene bare forteller deg hvordan det skal se ut. Disse tidligere taggene er mer tilgjengelige for skjermlesere som brukes av synshemmede.

Avsnitt og andre divisjoner

HTML -er

tag lar deg definere en del av dokumentet. Vanligvis er dette paret med CSS (se nedenfor) for å formatere en seksjon på en bestemt måte.

De

tag lar deg dele tekst inn i avsnitt. Nettlesere legger automatisk til litt plass før og etter disse, slik at du naturlig kan bryte opp tekst.

Du kan legge til overskrifter i dokumentet og gjøre det lettere å følge med

gjennom

tagger. H1 er den viktigste overskriften, mens H6 er minst viktig. Nesten hver MakeUseOf -artikkel bruker H2- og H3 -overskrifter for å organisere informasjon.

Treffer Tast inn Hvis du vil legge til linjeskift i HTML -dokumentet, vises det faktisk ikke. I stedet kan du bruke

for å legge til et linjeskift.

Her er et eksempel som bruker alle disse:

Trinn 4: Sette inn bilder

Bilder er en viktig del av de fleste nettsider. Du kan enkelt legge til dem med HTML, og til og med angi forskjellige egenskaper for dem.

Du setter inn et bilde ved hjelp av

stikkord. Kombinere dette med

attributt lar deg angi hvor du vil at bildet skal lastes fra.

En annen viktig egenskap av

hvordan finne ip -adresse på Android -telefon

tagger er

. Alt -tekst lar deg beskrive bildet for skjermlesere, eller hvis bildet ikke lastes riktig. Du kan holde musepekeren over et bilde for å se alt -teksten.

Bruke

og




elementer for å angi antall piksler bildet vises på.

Sett alt sammen, og en bildemerke ser slik ut:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



World Wide Web ville ikke være mye av et web uten lenker til andre sider. Bruker

tag, kan du koble til andre sider på hvilken som helst tekst.

Inne i

src

tag, den

attributt forteller hvor du linker. Bare å lime inn nettadressen vil fungere fint. Du kan bruke

alt

element for å legge til litt tekst som vises når noen holder musepekeren over lenken.

En grunnleggende lenke ser slik ut:

width

De

height

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

Hvordan HTML kobles til CSS og JavaScript

Vi har sett på det grunnleggende i HTML og hvordan det oppretter en webside. Men som du kan forestille deg, kutter HTML alene det ikke for det moderne nettet. Enkle HTML -nettsider var vanlige i 'Web 1.0' -dagene, da de fleste nettstedene ikke var annet enn statisk tekst.

Men nå har vi mye mer. CSS (Cascading Style Sheets) er et språk som brukes til å beskrive hvordan teksten du utarbeidet i HTML skal se ut. Husk

Dr. Phil

tag vi diskuterte? Inne i denne (og andre tagger) kan du definere a

Egenskap. Deretter kan du i det medfølgende CSS -dokumentet skrive instruksjoner for hvordan det gjøres

bør se.

Du kan definere disse stilelementene innebygd i HTML -koden, men dette anses som dårlig praksis siden det er mye vanskeligere å vedlikeholde. Lær mer med disse enkle CSS -eksemplene . Sjekk også ut hvordan du optimaliserer CSS -filene dine .

JavaScript

Vi har sett at HTML definerer innholdet og CSS bestemmer utseendet. JavaScript, det siste medlemmet i trioen som er viktig for nettet, lar nettsider svare på folks handlinger uten å laste inn en ny side hver gang.

For eksempel lar JavaScript et nettsted advare deg om at passordet du skrev inn ikke oppfyller kravene før du prøver å sende det. En webdesigner kan bruke JavaScript for å bla gjennom bilder i en lysbildefremvisning eller be brukeren om å skrive inn.

Dette er bare noen få elementære eksempler. JavaScript er et skriptspråk som er i stand til å gjøre mye, og er relativt langt mer komplisert enn HTML og CSS. Se vår oversikt over JavaScript for mye mer.

Å se på hele omfanget av webdesign er utenfor omfanget av denne artikkelen, men det er nok å si at HTML samhandler med andre språk for å lage nettsidene vi kjenner i dag.

Evolusjonen av HTML

Det er viktig å merke seg at HTML ikke er statisk. HTML har gjennomgått flere revisjoner, den siste er HTML 5. Spesielt støtter denne standarden innebygd videoinnbygging i stedet for å stole på proprietære formater som Adobe Flash.

Nye iterasjoner av HTML erklærer også visse arkaiske koder som av og til. Disse inkluderer forferdelige tagger som

href

og

title

(som henholdsvis ruller og blinker tekst) vanligvis sett på nettsteddesign fra 1990 -tallet. Så husk at standarder endres over tid.

Litt HTML -kunnskap kommer langt

Vi har tatt en kort gjennomgang av hvordan et HTML -dokument fungerer. Nå vet du det grunnleggende om hvordan nettsider er strukturert. Selv om du ikke fortsetter å bygge nettsider, er du litt mer bevisst på nettet du bruker hver dag.

hva betyr smilefjes $

Hvis du vil lære mer, kan du oppgradere ferdigheter i webutvikling med viktige verktøy og deretter sjekke ut vår guide om hvordan du designer ditt første nettsted .

Bildekreditt: Belyaevskiy/ Depositphotos

Dele Dele kvitring E -post 5 tips for å overbelaste VirtualBox Linux -maskinene dine

Lei av den dårlige ytelsen som tilbys av virtuelle maskiner? Her er hva du bør gjøre for å øke VirtualBox -ytelsen.

Les neste Relaterte temaer
  • Programmering
  • HTML
  • Webutvikling
  • JavaScript
  • Verktøy for nettredaktører
  • Programmering
  • HTML5
Om forfatteren Ben Stegner(1735 artikler publisert)

Ben er assisterende redaktør og Onboarding Manager på MakeUseOf. Han forlot IT-jobben for å skrive på heltid i 2016 og har aldri sett seg tilbake. Han har dekket tekniske opplæringsprogrammer, anbefalinger for videospill og mer som en profesjonell skribent i over syv år.

Mer fra Ben Stegner

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere