Lær HTML på 5 minutter

En hurtig vejledning, der hjælper dig med at komme i gang med at opbygge websteder.

HTML er det markup-sprog, der bruges til at strukturere og præsentere indhold på World Wide Web. Sammen med CSS og JavaScript giver det os mulighed for at have smukke og interaktive websteder.

Da HTML er grundlaget for internettet, er det også det mest vigtige sprog for enhver karrierevej til webudvikling. I denne hurtige vejledning lærer jeg dig det grundlæggende om det.

Og når du er færdig, har jeg allerede lanceret et gratis 14-delt kursus på HTML5 over på Scrimba.com - en interaktiv platform, hvor du til enhver tid kan hoppe ind i koden til en afspilende screencast.

Du kan tjekke den første forelæsning her:

Okay, før vi hopper ind i HTML-koden, vil jeg starte med at fortælle dig lidt om webarkitekturen. Dette vil sætte HTML's rolle i perspektiv for os.

Grundlæggende webarkitektur

Når du har udviklet et websted, skal du være vært for det på en server for at gøre det tilgængeligt på internettet. Alle servere har en IP-adresse (dvs. 149.56.240.169), som du kan tænke på som et telefonnummer. Vi lægger normalt et domænenavn (dvs. scrimba.com) over denne IP-adresse, så det er lettere at huske.

Når du skriver dette domænenavn i browseren, giver det serveren et opkald. Serveren sender derefter en masse HTML-, CSS- og JavaScript-filer som denne:

Din browser starter med at indlæse den vigtigste HTML-fil, før den fortsætter med CSS og JavaScript. Disse filer gør det muligt for browseren at gengive et smukt og interaktivt websted.

Lad os nu se nærmere på de roller, som disse tre sprog spiller.

Hvad er HTML?

Lad os forestille os et websted som person. Vi bruger denne analogi til at forstå vores hjemmeside. HTML beskrives bedst som skeletet:

Hvad er CSS?

Imidlertid ser bare et almindeligt HTML-websted ret grimt ud, så du bliver nødt til at style det med CSS. Det kan ses som hud og tøj på hjemmesiden.

Hvad er JavaScript?

Når du mestrer CSS, skal du fortsætte til JavaScript. I vores analogi er dette som hjernen og musklerne på vores websted:

Skrivning af din første HTML-fil

For at kunne skrive HTML skal du bruge et HTML-dokument, som kun er et dokument med en .html- udvidelse. Det betyder ikke noget, hvilken teksteditor du bruger, men de mest populære i disse dage er Sublime Text, VS Code og Atom. Du kan også bruge Scrimba som en browser-editor.

Lad os oprette en ny fil og kalde den index.html og skrive Hello world!i den.

Hello world!

Hvis vi trækker denne fil ind i browseren eller peger browseren på adressen på denne fil, får vi følgende.

Tillykke, du har nu oprettet dit første websted!

Dit første HTML-tag

Vi har dog ikke skrevet nogen HTML-tags endnu. For at gøre det, lad os pakke Hello world!teksten ind i <h1> tags, som denne:

Hello world!

Den første <h1> er et åbningsmærke, og det andet one,er et afsluttende mærke. Som du kan se, er forskellen kun tilbageslag i det afsluttende tag. Dette vil resultere i følgende på siden:

Du har nu fortalt browseren, at du vil have Hello world!teksten til en overskrift. Således anvender browseren noget styling på den, hvilket grundlæggende øger størrelsen på teksten.

Så det er så let det er at begynde at skrive HTML.

Skrivning af et ordentligt HTML-dokument

Men dette er faktisk ikke et gyldigt HTML-dokument, da de skal følge en klart defineret struktur. Med henblik på denne vejledning skal jeg bare vise det kort for dig, og så fortsætter vi med de sjove ting.

Sådan ser vores Hello world!eksempel ud:

Hello world!

Du behøver ikke bekymre dig om ; og tag for nu, da vi simpelthen skriver telt i tagget. Lad os fortsætte med det! PE>, tml> ur con

Stk

Under h1-koden tilføjer vi et afsnit. Dette tag bruges normalt til tekststykker.

Hello world!

Hello, and welcome to my website!

Sådan ser det ud:

Lister

Lad os nu tilføje en liste. For at gøre det skal vi tilføje to forskellige tags, <ul> ; and

  • . Førstnævnte står for ikke- ordnet liste, og sidstnævnte står for f eller listeelement. Vi får brug for to wrap
  • ; tags inde i
      tag.

      
            
      • Eat
      • Sleep
      • Code

      Hvis du ændrer <ul> to an

        , derefter udskiftes kuglerne med tal, da det står for en ordret liste.

        Indtastningsfelter

        At få input fra brugere er en kritisk aktivitet på websteder. Lad os tilføje et indtastningsfelt.

        Hvilket tilføjer inputfeltet nederst på vores websted:

        Nu er der to nye begreber at lære her: attributter og selvlukkende tags . Den første, attributter , giver yderligere oplysninger om HTML-elementerne.

        I vores tilfælde tilføjer vi to attributter: type og pladsholder. Den type, fortæller browseren, at dette bør være et tekstfelt. Her kunne vi have valgt mellem en række typer (radio, vælg, afkrydsningsfelt, dato), som ville have gjort det til helt andre elementer.

        Den pladsholder dikterer hjælpeteksten inde i elementet.

        Endelig er inputtagget også et selvlukkende element (også kendt som et ugyldigt element.) , Hvilket betyder, at det ikke består af et åbnings- og lukkemærke, men kun et tag, der lukker sig selv.

        Næste skridt

        Der er så meget mere at lære i HTML, og det er slet ikke svært. Mit fulde kursus kan gennemføres på mindre end en time, og det giver dig en solid forståelse af det grundlæggende og giver dig mulighed for at begynde at opbygge rigtige hjemmesider!

        Hvis du er sulten efter mere, har vi et gratis 14-retters måltid ...

        på min Learn HTML5 for Free kursus over på Scrimba.com.

        Vi ses der. ?