Lær HTML
Lær HTML — Et HTML-kursus med en editor med direkte forhåndsvisning lige ved hånden
Lær HTML er et HTML-kursus til iPhone og Android, hvor en HTML-editor med direkte forhåndsvisning er ét tryk væk fra hver lektion. Skriv et tag, se siden blive gengivet, og gå derefter fra den første overskrift til formularer, tabeller, semantisk HTML5, tilgængelighed og web components gennem 40 korte kurser.
- Pris
- Gratis, Pro-opgradering
- Platforme
- iOS og Android
- Sprog
- 22
- Aldersmærkning
- 4+
- Kræver
- iOS 15.1 eller nyere
- App Store
- 3.0 ★ (1)
Et tag betyder mere, når du har set det tegne noget.
HTML er et markup-sprog, så den hurtigste måde at forstå et nyt element på er at skrive det og se resultatet. Hver lektion i appen slutter med editoren allerede åben, med forhåndsvisningen ved siden af din markup, og du tilføjer først CSS- eller JavaScript-filer, når du er klar til dem.
Hvad det er
Lær HTML er et gratis HTML-kursus til iOS og Android, hvor du lærer markup til websider gennem 40 kurser og 159 korte lektioner, ordnet fra begynder (A1) til avanceret (C1). Hvert emne kombineres med en indbygget HTML-kodeeditor og øjeblikkelig forhåndsvisning, 20 guidede projekter som en kontaktformular og en tilgængelig pristabel, 20 debugging-missioner og en AI-mentor, så en komplet nybegynder kan gå fra et tomt dokument til semantiske, tilgængelige og velstrukturerede sider.
Inde i appen
Sådan ser det ud
Kurset
Dette dækker HTML-kurset
40 kurser og 159 lektioner fra appens egen kursusliste i den rækkefølge, læringsstien gennemgår dem.
Dokumentstruktur, tekst, links, billeder og lister
Grundstrukturen på enhver side: dokumentstruktur, overskrifter og afsnit, links og navigation, billeder og figurer samt ordnede og uordnede lister.
Tabeller, attributter og globale attributter
Sådan organiserer du data i tabeller og bruger derefter attributter til at finjustere et element, herunder globale attributter, der fungerer på alle tags.
Formularer: grundlæggende, avancerede kontroller og validering
Først de grundlæggende inputfelter, derefter de mere avancerede kontroller og til sidst valideringsattributterne, der lader browseren kontrollere et felt, før det sendes.
Semantisk HTML5, head og metadata, audio og video
Semantiske elementer, dokumentets head og metadata samt audio- og videoelementerne.
Tilgængelighed, ARIA-roller og avancerede ARIA-mønstre
Grundlæggende tilgængelighed, ARIA-roller og -attributter samt de avancerede mønstre, der bruges til brugerdefinerede widgets.
Dataattributter, templates, canvas, SVG og iframes
Brugerdefinerede dataattributter, HTML-templates, canvas-elementet, SVG i HTML og indlejret indhold i iframes.
Web Storage, træk og slip, SEO og e-mailskabeloner
Web Storage og træk-og-slip-API'et, SEO og sociale metatags samt de særlige regler for HTML-e-mailskabeloner.
Web Components, ydeevne og HTML i stor skala
Brugerdefinerede elementer, shadow DOM, import maps og progressive enhancement samt ydeevne, sikkerhed, PWA'er og testning, der afsluttes med HTML i stor skala.
Sådan fungerer det
Sådan lærer du et tag – fra læsning til gengivelse
En lektion er kort, og editoren ligger ved siden af den, så du kan læse om et begreb og afprøve det i samme session.
Læs én kort lektion
Fortsæt læringsforløbet, hvor du slap. Hver lektion dækker én idé, såsom en uordnet liste eller et billede med alt-tekst, og tager kun få minutter.
Skriv det i editoren, og se forhåndsvisningen
Åbn editoren, og skriv din markup. Forhåndsvisningen tegner siden igen, og fanerne til CSS og JavaScript er klar, når du vil style siden eller få den til at reagere.
Tjek det, ret det, byg med det
En quiz og en kodeudfordring afslutter hvert emne. Når et tag eller en fejl er uklar, forklarer AI-mentoren det, en debugging-mission giver dig en ødelagt side, du skal reparere, og et guidet projekt hjælper dig med at bygge noget, du kan vise frem.
Hvad det indeholder
Dette indeholder Learn HTML
40
Kurser fra A1 til C1
159 lektioner går fra dokumentstruktur, tekst, links, billeder og lister over tabeller, formularer og semantisk HTML5 til tilgængelighed, web components, sikkerhed samt History and Navigation API.
Direkte
HTML-editor med forhåndsvisning
Skriv markup, og se den gengivne side blive opdateret. Du kan tilføje CSS- og JavaScript-filer til det samme projekt, så et almindeligt dokument bliver til et lille fungerende website.
20
Guidede projekter
Trinvise projekter, blandt andet en opskriftsside, en kontaktformular, et fotogalleri, en navigationslinje og en tilgængelig pristabel.
20
Debugging-missioner
Find rigtige fejl: en tilmeldingsformular, der ikke sender noget, en etiket, ingen kan trykke på, eller en side, der indlæses zoomet ud på en telefon.
80
Oversigt over tags
En opslagsliste med 80 HTML-tags, elementer og attributter til det øjeblik, hvor du ved, hvad du vil, men ikke hvad det hedder.
50
Interviewspørgsmål
Halvtreds interviewspørgsmål til webudviklere med klare svar samt et kodebibliotek med korte eksempler, du kan åbne og redigere, og et sted, hvor du kan gemme din egen kode og dine noter.
Baggrund
Hvad er HTML, og kan man lære det ved at skrive på en telefon?
HTML (HyperText Markup Language) er sproget, der beskriver strukturen på en webside: hvilken tekst der er en overskrift, hvilken der er et afsnit, hvor et link fører hen, og hvad en formular spørger om. Det er ikke et programmeringssprog, så du slipper for løkker og variabler, hvilket er grunden til, at det normalt er det første skridt ind i webudvikling. Fordi resultatet bliver synligt, så snart du skriver det, egner HTML sig godt til korte sessioner på telefonen: et tag er lille nok til at skrive med en tommelfinger, og en forhåndsvisning viser med det samme, om det virkede.
Elementer, tags og attributterde tre ord, som bruges i hver lektion
Et element er et stykke indhold med en betydning, skrevet mellem et åbnings- og et afslutningstag, for eksempel et afsnit eller et listeelement. Attributter står inde i åbningstagget og justerer det, såsom adressen et link fører til, eller teksten der beskriver et billede. Næsten alle begynderfejl skyldes et manglende afslutningstag eller en attribut, der er placeret forkert.
Semantisk HTMLoverskrifter, navigation, main og footer
Semantiske elementer fortæller, hvad en blok på siden er, i stedet for hvordan den ser ud. En navigationslinje, en artikel og en footer har hver deres eget element, hvilket hjælper skærmlæsere, søgemaskiner og alle, der senere skal redigere siden. Det er den vane, der adskiller en overskuelig side fra en bunke generiske containere.
HTML, CSS og JavaScripthvem gør hvad
HTML indeholder strukturen og indholdet, CSS styrer, hvordan indholdet ser ud, og JavaScript tilføjer funktionalitet, såsom at reagere på et klik. Når du lærer HTML først, får de to andre noget at hægte sig fast på. Editoren i appen har separate faner til HTML, CSS og JavaScript, så du kan holde de tre opgaver adskilt fra starten.
Formularer og tilgængelighedher bliver simple sider alvorlige
Formularer er den måde, en side beder den besøgende om noget på, og det er også her, de fleste problemer med tilgængelighed begynder: en etiket, ingen kan trykke på, eller et felt, som en skærmlæser ikke kan navngive. Etiketter, valideringsattributter og ARIA-roller er små stykker markup, der afgør, om en side fungerer for alle.
Egnethed
Hvem det er til — og hvem det ikke er til
Det passer godt til dig, hvis du
- Er du i gang med at skrive din første webside og vil have alle tags forklaret, før du bruger dem
- Lærer du bedst, når du kan se resultatet af hver linje med det samme
- Driver du en blog, en butiksside eller en portfolio og vil redigere markuppen bag den
- Planlægger du at gå videre med CSS, JavaScript eller front-end-arbejde og vil have et solidt grundlag først
- Forbereder du dig til en jobsamtale som webudvikler og vil øve dig på spørgsmål
Det er ikke det rette værktøj, hvis du
- Har du brug for et komplet desktop-workflow med filer, mapper og en lokal server
- Forventer du, at alle kurser er gratis? Det første kursus, det første guidede projekt og to missioner er gratis; Pro låser resten op
- Skriver du allerede HTML til produktion hver dag og vil have et opslagsværk i stedet for et kursus
- Vil du lære et designværktøj? Dette handler om markup og koden bag websider
Spørgsmål
Ofte stillede spørgsmål
Hvad er Lær HTML?
Lær HTML er en app til iPhone og Android, der lærer dig HTML fra det første tag til avancerede emner. Den kombinerer 40 korte kurser med en indbygget HTML-editor og livevisning, 20 guidede projekter, 20 fejlfindingsmissioner og en AI-mentor. Du kan komme gratis i gang, og appen fås på 22 sprog.
Kan jeg virkelig skrive og forhåndsvise HTML på en telefon?
Ja. Editor i Lær HTML har faner til HTML, CSS og JavaScript, og forhåndsvisningen viser den side, din markup skaber. En telefon er velegnet til den fokuserede øvelse, som HTML kræver, fordi tags er korte. En større skærm bliver først nyttig, når du arbejder med mange filer på én gang.
Skal jeg have erfaring med kodning, før jeg går i gang?
Nej. Læringsstien begynder med, hvordan et HTML-dokument er opbygget, og forklarer hvert begreb i et enkelt sprog, før det bruges. HTML har ingen løkker eller variabler, du skal lære først, så Lær HTML tager udgangspunkt i, at du er helt nybegynder, ikke at du er undtagelsen.
Hvad er forskellen på HTML og CSS?
HTML definerer, hvad der er på siden, og hvad hver del betyder, f.eks. en overskrift, et link eller et formularfelt. CSS definerer, hvordan det ser ud, herunder farver, afstande og layout. Appen lærer dig HTML først og lader dig tilføje CSS-filer i editoren, så du kan se de to arbejde sammen uden at blande deres opgaver.
Hvor lang tid tager det at lære det grundlæggende i HTML?
De fleste kan skrive en enkel og korrekt side efter en håndfuld korte sessioner, fordi de vigtigste elementer er få: overskrifter, afsnit, links, billeder, lister og grundlæggende formularer. Mere avanceret stof som tilgængelighed, semantisk struktur og Web Components tager længere tid. Lektionerne her er skrevet, så de kan gennemføres på få minutter, hvilket gør en daglig rutine realistisk.
Hvilke slags projekter kan jeg bygge i appen?
De 20 guidede projekter omfatter en opskriftsside, en kontaktformular, et fotogalleri, en navigationslinje og en tilgængelig pristabel. Hvert projekt bygges trin for trin. De er med vilje små, så du kan færdiggøre dem og gemme koden i dine gemte kodestykker.
Dækker Learn HTML tilgængelighed og formularer?
Ja, og det går i dybden. Formularer har tre kurser, der dækker det grundlæggende, avancerede kontroller og valideringsattributter. Tilgængelighed har sine egne kurser om det grundlæggende, ARIA-roller og avancerede ARIA-mønstre. Fejlfindingsmissionerne omfatter også fejl som en label, ingen kan trykke på, hvilket gør emnerne praktiske i stedet for abstrakte.
Er appen gratis, og hvad får jeg med Pro?
Du kan downloade den gratis og gå i gang med det samme: Det første kursus, det første guidede projekt, to missioner og liveeditoren er inkluderet sammen med et dagligt antal AI-mentorforespørgsler. Pro låser alle kurser, projekter og missioner, certifikateksamen og et ubegrænset antal spørgsmål til AI-mentoren op, og fjerner reklamer.
Kom i gang
Skriv dit første tag, og se det blive vist
Gratis at komme i gang på iOS og Android på 22 sprog.
Mere fra CoddyKit
Tilgængelig på iOS og Android.