5 trinn for å forstå grunnleggende HTML-kode
Annonse
HTML er en viktig del av nettet slik vi kjenner det. Og mens få nettdesignere lager sider ved å skrive inn HTML manuelt, er det fremdeles nyttig å vite litt om det.
Vi skal se på noen av de grunnleggende språkene, inkludert hva HTML egentlig er, noen grunnleggende konsepter og hvordan det samhandler med andre språk. Tenk på dette som en "HTML for dummies" krasjekurs.
Grunnleggende om HTML: Hva er HTML?
HTML står for Hypertext Markup Language . Og selv om det noen ganger er klumpet inn med programmeringsspråk, er dette ikke nøyaktig.
Som markeringsspråk lar HTML deg bare lage visningsoppsettet for sider. Et ekte 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 hva teksten viser som fet skrift, legger til bilder og lenker til andre sider. Vi har en HTML-spørsmål om viktige spørsmål om viktige HTML-spørsmål. Du bør bokmerke De viktige spørsmålene om HTML-spørsmål. Her er hva det er, hvordan det fungerer og hvordan du kan skrive noen vanlige elementer i HTML i dag! Les mer som forklarer mer.
Du kan høyreklikke på de fleste nettsider i nettleseren din og velge Vis sidekilde eller lignende for å se HTML bak dem. Dette vil sannsynligvis også inneholde mye kode som ikke er HTML, men du kan bla gjennom det.
Selv om du har null erfaring med markering eller programmeringsspråk, vil det å lære litt om HTML gjøre deg til en mer informert nettbruker. La oss gå gjennom fem grunnleggende trinn for å hjelpe deg med å forstå hvordan HTML fungerer. Vi vil gi eksempler underveis.
Trinn 1: Forstå begrepet tagger
HTML bruker et system med koder for å kategorisere forskjellige elementer i dokumentet.
De fleste tagger kommer parvis for å pakke inn den berørte teksten inni dem. Her er et enkelt eksempel (taggen gjør tekst fet ; 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 kode, som er viktig. Hvis du ikke lukker en kode, vil alt fra start og frem ha den attributtet.
Imidlertid har ikke alle taggene et par. Noen HTML-elementer, kalt tomme elementer, har ikke noe innhold og eksisterer på egen hånd. Et eksempel er
Trinn 2: Skjelettet HTML-oppsett
Et ordentlig HTML-dokument må ha visse tagger definert slik at det er lagt opp riktig. Dette er de viktigste delene:
- Hvert HTML-dokument må begynne med
å erklære seg selv som sådan. Dermed lukker taggen,, er det siste elementet i en HTML-fil. - Neste,
delen inneholder informasjon som sidetittelen, forskjellige skript som kjøres på siden og lignende. Som navnet antyder kommer dette vanligvis rett etter initialenstikkord. Sluttbrukeren ser ikke mye av innholdet i disse taggene. - Endelig
-koden 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 ser på elementer som gjelder det.
Trinn 3: Grunnleggende HTML-tagger for formatering
La oss deretter se på noen vanlige koder som utgjør HTML-dokumenter. Det er selvfølgelig ikke mulig å dekke alle elementene, så vi vil gjennomgå noe av det viktigste. Vi har dekket 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 lage en grunnleggende webside? Lær disse HTML-eksemplene og prøv dem ut i en tekstredigerer for å se hvordan de ser ut i nettleseren din. Les mer hvis disse ikke tilfredsstiller deg.
Hvis disse taggene virker ganske grunnleggende, husk at HTML ble opprettet helt tilbake i 1993. Internett var veldig tekstbasert den gang i sine tidlige stadier.
Enkel tekstformatering
HTML støtter grunnleggende tekststiler som du finner i Microsoft Word:
- koder gjør teksten fet .
- tagger (som står for “vektlegging”) vil kursivere tekst.
HTML støtter også den eldre koden for fet skrift og kursiv. Det er imidlertid å foretrekke å bruke de ovenfor.
Kort sagt, og vis hvordan noe skal forstås, mens de sistnevnte kodene bare forteller deg hvordan det skal se ut. Disse tidligere kodene er mer tilgjengelige for skjermlesere som brukes av synshemmede.
Avsnitt og andre avdelinger
HTML er tag kan du definere en del av dokumentet. Vanligvis kobles dette sammen med CSS (se nedenfor) for å formatere en seksjon på en viss måte.
De
tag kan du dele tekst inn i avsnitt. Nettlesere vil automatisk legge litt plass før og etter disse, slik at du naturlig kan dele opp tekst.
Du kan legge til overskrifter i dokumentet og gjøre det enklere å følge med
gjennom tags. H1 er den viktigste overskriften, mens H6 er minst viktig. Nesten hver MakeUseOf-artikkel bruker H2- og H3-overskrifter for å organisere informasjon.
Å trykke på Enter for å legge til linjeskift i HTML-dokumentet ditt vil faktisk ikke vise dem. I stedet kan du bruke
Her er et eksempel som bruker alle disse:
Eksempel Overskrift
Dette er ett ledd.
Dette er et sekund
avsnitt delt mellom to linjer.
Trinn 4: Sett inn bilder
Bilder er en viktig del av de fleste nettsider. Du kan enkelt legge dem til med HTML, og til og med angi forskjellige egenskaper for dem.
Du setter inn et bilde ved å bruke src attributtet kan du spesifisere hvor du vil at bildet skal lastes inn fra.
En annen viktig egenskap av alt . Alt-tekst lar deg beskrive bildet for skjermlesere eller i tilfelle bildet ikke lastes ordentlig. Du kan muses over et bilde for å se alt-teksten.
Bruk width og height å spesifisere antall piksler bildet vises på.
Sett alt sammen, og en bildekode ser slik ut:
Trinn 5: Legge til lenker
World Wide Web ville ikke være mye av et nett uten lenker til andre sider. Bruker kan du koble til andre sider på hvilken som helst tekst.
Inne i tag, href attributtet forteller hvor du lenker. Bare å lime inn nettadressen fungerer bra. Du kan bruke tittelelementet til å legge til litt tekst som vises når noen svever over lenken.
En grunnleggende kobling ser slik ut:
Visit Google De -koden har mange andre mulige elementer, men vi vil ikke dykke ned i dem her.
Hvordan HTML kobles til med CSS og JavaScript
Vi har sett på det grunnleggende i HTML og hvordan det oppretter en webside. Men som du kan forestille deg, ikke HTML alene kutter det for det moderne nettet. Enkle HTML-sider var vanlige i "Web 1.0" -dager, da de fleste nettsteder ikke var mer enn statisk tekst.
Men nå har vi mye mer. CSS (Cascading Style Sheets) De essensielle CSS3-egenskapene Jukseark De essensielle CSS3-egenskapene Jukseark Master essensiell CSS-syntaks med vår CSS3-egenskaper jukseark. Les mer er et språk som brukes for å beskrive hvordan teksten du forberedte i HTML skal se ut. Husk tag vi diskuterte? Inne i dette (og andre tagger) kan du definere en klasseattributt. Deretter kan du i det tilhørende CSS-dokumentet skrive instruksjoner for hvordan den class skal se ut.
Du kan definere disse stilelementene på linje i HTML-koden din, men dette anses som dårlig praksis da det er mye vanskeligere å vedlikeholde. Lær mer med disse enkle CSS-eksemplene 10 enkle CSS-kodeeksempler du kan lære på 10 minutter 10 Enkle CSS-kodeeksempler du kan lære på 10 minutter. Vi skal gå nærmere inn på hvordan du lager et inline stilark slik at du kan øve dine CSS-ferdigheter. Deretter går vi over på 10 grunnleggende CSS-eksempler. Derfra er fantasien din grensen! Les mer .
Javascript
Vi har sett at HTML definerer innholdet og CSS bestemmer utseendet. JavaScript, det siste medlemmet av trioen som er viktig for nettet, lar websider svare på folks handlinger uten å laste inn en ny side hver gang.
For eksempel lar JavaScript et nettsted advare deg om at passordet du oppga 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 innspill.
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 Hva er JavaScript og hvordan fungerer det? Hva er JavaScript, og hvordan fungerer det? Hva er Javascript? Det er et programmeringsspråk som brukes til å forbedre websidene. Det inkluderer dynamisk oppdatering av websider, brukergrensesnitt og mer. La oss dykke inn i hva Javascript handler om. Les mer for mye mer.
Å se på hele omfanget av webdesign er utenfor rammen for denne artikkelen, men det er nok å si at HTML samhandler med andre språk for å lage de websidene vi kjenner i dag.
Utviklingen 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 videoinnstøting i stedet for å stole på proprietære formater som Adobe Flash.
Nye iterasjoner av HTML erklærer også visse arkaiske koder som avskrevet fra tid til annen. Disse inkluderer forferdelige tagger som og (som henholdsvis bla- og flashtekst) ofte sett på 1990-tallets nettdesign. Så husk at standarder endres over tid.
Litt HTML-kunnskap går langt
Vi har tatt en kort omvisning i hvordan et HTML-dokument fungerer. Nå vet du grunnleggende om hvordan nettsider er strukturert. Selv om du ikke fortsetter å bygge nettsider, er du litt mer bevisst på nettet du bruker hver dag.
Hvis du vil lære mer, kan du oppgradere dine nettutviklingsferdigheter med essensielle verktøy Oppgradere dine nettutviklingsferdigheter med disse 10 viktige verktøyene Oppgradere nettutviklingsferdighetene dine med disse 10 viktige verktøyene Klar til å begynne å utvikle nettsteder? Disse online verktøyene for nye og ekspert webutviklere vil garantert øke ferdighetene dine! Les mer, og sjekk deretter vår guide for hvordan du designer ditt første nettsted Hvordan lage et nettsted: For nybegynnere Hvordan lage et nettsted: For nybegynnere I dag vil jeg veilede deg gjennom prosessen med å lage et komplett nettsted fra bunnen av. Ikke bekymre deg hvis dette høres vanskelig ut. Jeg vil guide deg gjennom det hvert trinn på veien. Les mer .
Bildekreditt: Belyaevskiy / Depositphotos
Utforsk mer om: HTML, HTML5, JavaScript, programmering, webutvikling, webmasterverktøy.
