Lær HTML
Lær HTML — Et HTML-kurs med redigeringsverktøy og forhåndsvisning i sanntid i lommen
Lær HTML er et HTML-kurs for iPhone og Android som gir deg et HTML-redigeringsverktøy med forhåndsvisning i sanntid ett trykk unna i hver leksjon. Skriv inn en tagg, se siden bli gjengitt, og gå fra din første overskrift til skjemaer, tabeller, semantisk HTML5, tilgjengelighet og web components gjennom 40 korte kurs.
- Pris
- Gratis, Pro-oppgradering
- Plattformer
- iOS og Android
- Språk
- 22
- Aldersgrense
- 4+
- Krever
- iOS 15.1 eller nyere
- App Store
- 3.0 ★ (1)
En tagg betyr mer når du har sett den tegne noe.
HTML er et markeringsspråk, så den raskeste måten å forstå et nytt element på er å skrive det inn og se på resultatet. Hver leksjon i denne appen avsluttes med redigeringsverktøyet allerede åpent, med forhåndsvisningen ved siden av markeringen din. Du legger først til CSS- eller JavaScript-filer når du er klar for dem.
Hva det er
Lær HTML er et HTML-kurs for iOS og Android som er gratis å komme i gang med, og som lærer deg markering av nettsider gjennom 40 kurs og 159 korte leksjoner, ordnet fra nybegynnernivå (A1) til avansert nivå (C1). Hvert emne kombineres med et innebygd HTML-kodeverktøy og umiddelbar forhåndsvisning, 20 veiledede prosjekter som et kontaktskjema og en tilgjengelig pristabell, 20 feilsøkingsoppdrag og en AI-mentor. Dermed kan en helt nybegynner gå fra et tomt dokument til semantiske, tilgjengelige og velstrukturerte sider.
Inne i appen
Slik ser den ut
Kurset
Dette dekker HTML-kurset
40 kurs og 159 leksjoner fra appens egen kursliste, i den rekkefølgen læringsstien lærer dem bort.
Dokumentstruktur, tekst, lenker, bilder og lister
Skjelettet i alle nettsider: dokumentstrukturen, overskrifter og avsnitt, lenker og navigasjon, bilder og figurer samt nummererte og unummererte lister.
Tabeller, attributter og globale attributter
Slik setter du opp data i tabeller, og deretter attributtene som finjusterer et element – inkludert de globale attributtene som fungerer på alle tagger.
Skjemaer: grunnleggende, avanserte kontroller og validering
Først grunnleggende inndatafelt, deretter mer avanserte kontroller og til slutt valideringsattributtene som lar nettleseren kontrollere et felt før det sendes inn.
Semantisk HTML5, head og metadata, lyd og video
Semantiske elementer, dokumentets head og metadata, samt lyd- og videoelementene.
Tilgjengelighet, ARIA-roller og avanserte ARIA-mønstre
Grunnleggende tilgjengelighet, ARIA-roller og -attributter samt de avanserte mønstrene som brukes for egendefinerte widgeter.
Dataattributter, maler, Canvas, SVG og iframes
Egendefinerte dataattributter, HTML-maler, canvas-elementet, SVG i HTML og innebygd innhold i iframes.
Web Storage, dra og slipp, SEO og e-postmaler
Web Storage og dra-og-slipp-API-et, SEO og sosiale metatagger samt de særegne reglene for HTML-e-postmaler.
Web Components, ytelse og HTML i stor skala
Egendefinerte elementer, shadow DOM, import maps og progressiv forbedring, i tillegg til ytelse, sikkerhet, PWA-er og testing – og til slutt HTML i stor skala.
Slik fungerer det
Slik lærer du en tagg, fra lesing til gjengivelse
En leksjon er kort, og redigeringsverktøyet ligger ved siden av den, så du kan lese om et konsept og prøve det ut i samme økt.
Les én kort leksjon
Fortsett læringsstien der du slapp. Hver leksjon tar for seg én idé, for eksempel en usortert liste eller et bilde med alt-tekst, og tar noen minutter.
Skriv det inn i redigeringsverktøyet, og se forhåndsvisningen
Åpne redigeringsverktøyet, og skriv inn markeringen. Forhåndsvisningen tegner siden på nytt, og fanene for CSS og JavaScript er klare når du vil utforme siden eller få den til å reagere.
Kontroller, rett opp og bygg med det
Hvert emne avsluttes med en quiz og en kodeutfordring. Når en tagg eller en feil er uklar, forklarer AI-mentoren den. Et feilsøkingsoppdrag gir deg en ødelagt side du må reparere, og et veiledet prosjekt hjelper deg med å bygge noe du kan vise frem.
Hva den inneholder
Dette finner du i Learn HTML
40
Kurs fra A1 til C1
159 leksjoner går fra dokumentstruktur, tekst, lenker, bilder og lister via tabeller, skjemaer og semantisk HTML5 til tilgjengelighet, web components, sikkerhet og History and Navigation API.
Direkte
HTML-redigeringsverktøy med forhåndsvisning
Skriv inn markering, og se den gjengitte siden oppdateres. Du kan legge til CSS- og JavaScript-filer i det samme prosjektet, slik at et enkelt dokument blir til et lite fungerende nettsted.
20
Veiledede prosjekter
Trinnvise prosjekter, blant annet en oppskriftsboks, et kontaktskjema, et bildegalleri, en navigasjonslinje og en tilgjengelig pristabell.
20
Feilsøkingsoppdrag
Finn og rett virkelige feil: et registreringsskjema som ikke sender noe, en etikett ingen kan trykke på, eller en side som lastes inn med for liten visning på en telefon.
80
Huskeliste for tagger
En oppslagsliste med 80 HTML-tagger, elementer og attributter for øyeblikkene der du vet hva du vil bruke, men ikke hva det heter.
50
Intervjuspørsmål
50 intervjuspørsmål for webutviklere med tydelige svar, samt et kodebibliotek med korte eksempler du kan åpne og redigere, og et område der du kan lagre din egen kode og egne notater.
Bakgrunn
Hva er HTML, og kan du lære det ved å skrive på en telefon?
HTML (HyperText Markup Language) er språket som beskriver strukturen til en nettside: hvilken tekst som er en overskrift, hvilken som er et avsnitt, hvor en lenke peker, og hva et skjema spør etter. Det er ikke et programmeringsspråk, så du slipper løkker og variabler, og derfor er det vanligvis det første steget inn i webutvikling. Fordi resultatet blir synlig i det øyeblikket du skriver det, passer HTML godt til korte økter på telefonen: En tagg er liten nok til å skrives med tommelen, og en forhåndsvisning viser med én gang om det fungerte.
Elementer, tagger og attributterde tre ordene hver leksjon bruker
Et element er et innholdsstykke med en betydning, skrevet mellom en åpningstagg og en avslutningstagg, for eksempel et avsnitt eller et listeelement. Attributter står inne i åpningstaggen og justerer den, for eksempel adressen en lenke peker til eller teksten som beskriver et bilde. Nesten alle nybegynnerfeil skyldes en manglende avslutningstagg eller et attributt som er plassert feil.
Semantisk HTMLoverskrifter, navigasjon, hovedinnhold og bunntekst
Semantiske elementer forteller hva en del av siden er, i stedet for hvordan den ser ut. En navigasjonslinje, en artikkel og en bunntekst har hvert sitt element. Det hjelper skjermlesere, søkemotorer og alle som senere må redigere siden. Dette er vanen som skiller en ryddig side fra en haug med generiske containere.
HTML, CSS og JavaScripthvem gjør hva
HTML inneholder strukturen og innholdet, CSS styrer hvordan innholdet ser ut, og JavaScript legger til funksjonalitet, for eksempel ved å reagere på et klikk. Når du lærer HTML først, får de to andre noe å bygge videre på. Redigeringsverktøyet i appen har separate faner for HTML, CSS og JavaScript, slik at du kan holde de tre oppgavene adskilt fra starten.
Skjemaer og tilgjengelighetder enkle sider blir seriøse
Skjemaer er måten en side ber den besøkende om noe på, og det er også her de fleste tilgjengelighetsproblemene begynner: en etikett ingen kan trykke på, eller et felt en skjermleser ikke kan navngi. Etiketter, valideringsattributter og ARIA-roller er små deler av markeringen som avgjør om en side fungerer for alle.
Passer
Hvem den er for – og ikke for
Passer godt for deg hvis du
- Skriver du din første nettside og vil ha hver tagg forklart før du bruker den
- Lærer du best når du kan se resultatet av hver linje med én gang
- Driver du en blogg, en butikkside eller en portefølje og vil redigere markupen bak den
- Planlegger du å gå videre til CSS, JavaScript eller frontend-utvikling og vil ha et solid grunnlag først
- Forbereder du deg til et jobbintervju som webutvikler og vil ha spørsmål å øve på
Ikke riktig verktøy for deg hvis du
- Trenger du en komplett arbeidsflyt på datamaskin med filer, mapper og en lokal server
- Forventer du at alle kurs skal være gratis? Det første kurset, det første veiledede prosjektet og to oppdrag er gratis, mens Pro låser opp resten.
- Skriver du allerede HTML for produksjon hver dag og vil ha et oppslagsverk snarere enn et kurs
- Vil du lære et designverktøy? Dette handler om markup og koden bak nettsider.
Spørsmål
Ofte stilte spørsmål
Hva er Lær HTML?
Lær HTML er en app for iPhone og Android som lærer deg HTML, fra den første taggen til avanserte emner. Den kombinerer 40 korte kurs med en innebygd HTML-redigerer og forhåndsvisning i sanntid, 20 veiledede prosjekter, 20 feilsøkingsoppdrag og en KI-mentor. Du kan komme i gang gratis, og appen er tilgjengelig på 22 språk.
Kan jeg virkelig skrive og forhåndsvise HTML på en telefon?
Ja. Redigereren i Lær HTML har faner for HTML, CSS og JavaScript, og forhåndsvisningen viser siden markupen din lager. En telefon passer godt til den konsentrerte øvingen HTML krever, siden taggene er korte. En større skjerm blir først nyttig når du håndterer mange filer samtidig.
Trenger jeg programmeringserfaring før jeg begynner?
Nei. Læringsstien starter med hvordan et HTML-dokument er bygget opp, og forklarer hvert begrep med et enkelt språk før det tas i bruk. HTML har ingen løkker eller variabler du må lære først, så Lær HTML tar utgangspunkt i at du er nybegynner – ikke at du er et unntak.
Hva er forskjellen på HTML og CSS?
HTML definerer hva som finnes på siden, og hva hver del betyr, for eksempel en overskrift, en lenke eller et skjemafelt. CSS definerer hvordan det ser ut, inkludert farger, avstand og layout. Appen lærer deg HTML først og lar deg legge til CSS-filer i redigereren, slik at du kan se hvordan de to fungerer sammen uten å blande rollene deres.
Hvor lang tid tar det å lære det grunnleggende i HTML?
De fleste kan skrive en enkel og korrekt side etter noen få korte økter, fordi de viktigste elementene er få: overskrifter, avsnitt, lenker, bilder, lister og grunnleggende skjemaer. Mer omfattende emner som tilgjengelighet, semantisk struktur og web components tar lengre tid. Leksjonene her er skrevet for å kunne fullføres på noen minutter, så en daglig vane er realistisk.
Hva slags prosjekter kan jeg lage i appen?
De 20 veiledede prosjektene inkluderer en oppskriftsside, et kontaktskjema, et bildegalleri, en navigasjonslinje og en tilgjengelig pristabell. Hvert prosjekt bygges trinn for trinn. De er små med vilje, slik at du fullfører dem og beholder koden i de lagrede kodesnuttene dine.
Dekker Learn HTML tilgjengelighet og skjemaer?
Ja, og ganske grundig. Skjemaer har tre kurs som dekker det grunnleggende, avanserte kontroller og valideringsattributter. Tilgjengelighet har egne kurs om grunnleggende konsepter, ARIA-roller og avanserte ARIA-mønstre. Feilsøkingsoppdragene inkluderer også feil som en etikett ingen kan trykke på, slik at disse emnene blir praktiske i stedet for abstrakte.
Er appen gratis, og hva får jeg med Pro?
Du kan laste den ned gratis og komme i gang med én gang: Det første kurset, det første veiledede prosjektet, to oppdrag og live-redigereren er inkludert, sammen med en daglig kvote for KI-mentoren. Pro låser opp alle kurs, prosjekter og oppdrag, sertifiseringseksamen og et ubegrenset antall spørsmål til KI-mentoren, og fjerner reklame.
Kom i gang
Skriv den første taggen din og se den gjengis
Gratis å komme i gang på iOS og Android, på 22 språk.
Mer fra CoddyKit
Tilgjengelig på iOS og Android.