Lær HTML5 i dette gratis og interaktive kursus for begyndere

HTML er en af ​​de vigtigste byggesten på Internettet, da den indkapsler indholdet på de websteder, du besøger. Men på trods af sin enorme indflydelse er meget få mennesker faktisk klar over, hvordan det fungerer.

Så for at forbedre verdens teknologiske læsefærdigheder har vi gået sammen med udvikler, designer og lærer Eric Tirado og oprettet et gratis kursus om HTML5.

Klik på billedet for at komme til kursussiden

I løbet af kurset vil Eric tage dig fra begynder til dygtig HTML, mens han viser dig, hvordan du bygger et websted. Og det bedste er: det tager mindre end en time at gennemføre kurset!

Lad os nu se på, hvordan det er bygget op.

Kursusindhold

Kurset indeholder 14 interaktive screencasts. Hver rollebesætning håndterer et kernekoncept med HTML, og de fleste er mellem tre og seks minutter. I nogle af dem opfordres du til at hoppe ind i koden og eksperimentere for dig selv, da det er muligt med Scrimba-platformen.

Lektion 1: Introduktion til internettet

Det starter med at lære dig lidt om internettet generelt, se på klienter, servere og de tre sprog, browsere taler: HTML, CSS og JavaScript.

Dette giver dig et godt fundament til de næste lektioner, da du bedre kan forstå HTML's overordnede rolle på internettet.

Lektion 2: Oprettelse af et HTML-dokument

Det næste trin er at oprette dit første HTML-dokument. Dette foredrag forklarer, hvordan HTML-filer fungerer, og det giver dig også en hurtig primer på URL-linjen i browseren.

Lektion 3: Indlejringselementer

Indlejring er et kritisk koncept i HTML, så det vil blive dækket i den tredje lektion. Indlejring betyder grundlæggende, at du kan rede tags inde i hinanden. For at indlejre et HTML-element skal du blot tilføje det mellem åbnings- og lukkemærkerne til et andet HTML-element.

Lektion 4: Hovedelementer og scripts

 Learning HTML       h1 { text-align: center; }   document.getElementById("h1").innerHTML = "Hello Universe!";   

Hovedelementet er det første HTML-tag efter selve tagget. Det er en container til metadata og definerer ofte titlen **, ** tegnsæt, typografier, links, scripts og andre metaoplysninger.

Så i denne forelæsning lærer du, hvordan du udfylder metatagget med en masse forskellige indholdstyper, som du kan se i uddraget ovenfor.

Lektion 5: Layoutelementer

HTML5 introducerede en masse layoutelementer, der gør HTML mere semantisk. Disse nye tags styrker nu betydningen af ​​de mest almindelige layoutelementer, ligesom og mens vi tidligere kun havde et meningsløst element som at bruge. I denne screencast lærer du de mest nyttige og vigtige.

Lektion # 6: Figur- og billedelementer

Billeder er en vigtig del af næsten alle websteder. I denne forelæsning lærer du, hvordan du tilføjer billeder til webstedet og også hvordan du tilføjer billedtekster til dem.

Lektion 7: Integrering af videoer

Du har måske bemærket, at YouTube-videoer er overalt på nettet, ikke? Ikke kun på youtube.com. Det er muligt takket være en af ​​HTML-funktionerne til indlejring af medier i en side fra andre steder på internettet. I denne lektion dækker vi metoderne til indlejring af videoer fra websteder som YouTube og også direkte fra en videofil.

Lektion 8: Navbar og listeelementer

I denne forelæsning lærer du, hvordan du opbygger navigationslinjen ved hjælp af en ikke-ordnet liste og listeelementer. Dette involverer både en vandret og en lodret navigationslinje til brug i overskriften og i sidepanelet på vores site.

Lektion 9: Overskrifter

Overskrifter oprettes ved hjælp af mærket, hvor * tegnet skal erstattes med tal fra 1 til 6. Vigtigheden af ​​overskriften falder, når antallet stiger, hvilket betyder

er den, du normalt bruger til din vigtigste titel eller tekst på din side.

Lektion # 10: Afsnit og tekstformatering (del 1)

Formatering af tekst er også vigtigt at vide for at oprette websteder, og i denne forelæsning lærer du det grundlæggende. Du genkender sandsynligvis mange af begreberne her fra tekstbehandlere som Word og Pages.

Lektion # 11: Tekstformatering (del 2)

I denne lektion lærer du mere om formatering, men med tags, der påvirker store tekstblokke. Eksempler på dette er element and the element.

Lesson #12: Tables (part 1)

Tables can be a bit complicated, but this lecture tries to explain it as simply as possible. Secondly, two lectures will be dedicated to this subject so that you’ll properly understand it.

Lesson #13: Tables (part 2)

In this lesson, you’ll learn more advanced elements in tables, like , , and . These allow you to control the elements inside the head, body and footer separately.

You’ll also be exposed to the , which allows you to add styles to specific columns.

Lesson #14: Page linking and final touches

In the final screencast, we’ll wrap it all up and finish the website. We’ll add a link from the navigation to various sections on the page, and also introduce another page so that you understand how links between pages work.

By this point, you should have a solid understanding of HTML, and the most important tags of the language.

Note: Eric will also be launching a follow-up course in April, which will tackle CSS for beginners. Leave your email here if you want early access.

The Scrimba format

Finally, let’s also have a look at the technology behind the course, as it’s pretty slick. The course is built using Scrimba, an interactive coding screencast tool. Scrimba looks like normal videos, but they’re fully interactive. You can edit the code inside the casts!

Here’s a gif which explains the concept:

Pause the screencast → Edit the code → Run it! → See your changes

Pause the screencast → Edit the code → Run it! → See your changes

This is great for when you feel you need to experiment with the code in order to properly understand it, or when you simply want to copy a piece of the code.

So what are you waiting for? Head over to the course page and get started today!

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.