5 trin til at forstå grundlæggende HTML-kode
Reklame
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 for dummies" -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 markeringssprog giver HTML dig kun mulighed for at oprette visningslayoutet for sider. Et ægte 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! Læs mere, der forklarer mere.
Du kan højreklikke på de fleste websider i din browser og vælge Vis sidekilde eller lignende for at se HTML'en 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 med tags til 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 (tagget gør teksten fed ; vi diskuterer dette mere i et øjeblik.)
This is some bold text . 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 alene. Et eksempel er
Trin 2: Skeleton HTML-layout
Et korrekt HTML-dokument skal have bestemte tags defineret, så det er korrekt lagt. Dette er de vigtigste dele:
- Hvert HTML-dokument skal begynde med
at erklære sig selv som sådan. Dermed er dens afsluttende tag,, er det sidste punkt i en HTML-fil. - Dernæst
afsnit indeholder oplysninger som sidetitlen, forskellige scripts, der kører på siden og lignende. Som navnet antyder kommer dette typisk lige efter det indledendetag. 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. Læs mere, 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 gør teksten fed .
- tags (som står for “vægt”) kursiverer tekst.
HTML understøtter også det ældre tag til fed og 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
tag giver dig mulighed for at opdele tekst i afsnit. Browsere lægger automatisk lidt plads før og efter disse, så du naturligt kan opbryde tekst.
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.
Hvis du trykker på Enter for at tilføje linjeskift i dit HTML-dokument, vises de ikke faktisk. I stedet kan du bruge
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 src attributten kan du angive, hvor du vil have billedet til at indlæses fra.
En anden vigtig egenskab af alt . Alt-tekst giver dig mulighed for at beskrive billedet til skærmlæsere, eller hvis billedet ikke indlæses korrekt. Du kan flytte musen hen over et billede for at se dens alt-tekst.
Brug width og height til at specificere antallet af pixels billedet vises på.
Sæt det hele sammen, og et billedmærke ser sådan ud:
Trin 5: Tilføjelse af links
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 tag, href attributten fortæller, hvor du linker. Bare at indsætte URL'en fungerer fint. Du kan bruge titelelementet til at tilføje en smule tekst, der vises, når nogen svæver over linket.
Et grundlæggende link ser sådan ud:
Visit Google Det tag har mange andre mulige elementer, men vi kan ikke dykke ned i dem her.
Sådan forbindes 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 ikke det til det moderne web. Enkle HTML-websider var almindelige i "Web 1.0" -dage, hvor de fleste websteder ikke var mere end statisk tekst.
Men nu har vi meget mere. CSS (Cascading Style Sheets) De væsentlige CSS3-egenskaber snyderark De væsentlige CSS3-egenskaber snyderi Master essentielle CSS-syntaks med vores CSS3-egenskaber snyderi. Læs mere er et sprog, der bruges til at beskrive, hvordan teksten, du forberedte i HTML, skal se ud. Husk tag vi drøftede? Inde i denne (og andre tags) kan du definere en klasseattribut. Derefter kan du i dit ledsagende CSS-dokument skrive instruktioner til, hvordan den class 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! Læs mere .
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. Læs mere 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! Læs mere 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. Læs mere .
Billedkredit: Belyaevskiy / Depositphotos
Udforsk mere om: HTML, HTML5, JavaScript, programmering, webudvikling, webmasterværktøjer.
