Opi HTML
Opi HTML — HTML-kurssi, jonka live-esikatselueditori kulkee taskussasi
Opi HTML on iPhonelle ja Androidille tarkoitettu HTML-kurssi, jossa HTML-editori live-esikatselulla on yhden napautuksen päässä jokaisella oppitunnilla. Kirjoita tagi, näe sivun hahmottuvan ja etene ensimmäisestä otsikosta lomakkeisiin, taulukoihin, semanttiseen HTML5:een, saavutettavuuteen ja web-komponentteihin 40 lyhyen kurssin aikana.
- Hinta
- Ilmainen, Pro-päivitys
- Alustat
- iOS ja Android
- Kielet
- 22
- Ikäraja
- 4+
- Vaatimukset
- iOS 15.1 tai uudempi
- App Store
- 3.0 ★ (1)
Tagi merkitsee enemmän, kun olet nähnyt sen piirtävän jotain.
HTML on merkintäkieli, joten nopein tapa ymmärtää uusi elementti on kirjoittaa se ja katsoa tulosta. Tämän sovelluksen jokaisen oppitunnin lopussa editori on jo avoinna, merkintäsi vieressä näkyy esikatselu, ja lisäät CSS- tai JavaScript-tiedostoja vasta, kun olet valmis niitä käyttämään.
Mikä se on
Opi HTML on ilmaiseksi aloitettava iOS- ja Android-laitteille tarkoitettu HTML-kurssi, joka opettaa verkkosivujen merkintää 40 kurssin ja 159 lyhyen oppitunnin avulla aloittelijatasolta (A1) edistyneelle tasolle (C1). Jokaisessa aiheessa on sisäänrakennettu HTML-koodieditori ja välitön esikatselu, 20 ohjattua projektia, kuten yhteydenottolomake ja saavutettava hintataulukko, 20 virheenkorjaustehtävää sekä AI-mentori. Näin täysi aloittelija voi edetä tyhjästä dokumentista semanttisiin, saavutettaviin ja hyvin jäsenneltyihin sivuihin.
Sovelluksen sisältö
Miltä se näyttää
Kurssi
Mitä HTML-kurssi sisältää
40 kurssia ja 159 oppituntia sovelluksen omalta kurssilistalta siinä järjestyksessä, jossa oppimispolku ne opettaa.
Dokumentin rakenne, teksti, linkit, kuvat ja listat
Jokaisen sivun perusta: dokumentin rakenne, otsikot ja kappaleet, linkit ja navigointi, kuvat ja kuviot sekä järjestetyt ja järjestämättömät listat.
Taulukot, attribuutit ja globaalit attribuutit
Tietojen jäsentäminen taulukoihin ja sen jälkeen attribuutit, joilla elementtiä säädetään, mukaan lukien globaalit attribuutit, jotka toimivat jokaisessa tagissa.
Lomakkeet: perusteet, edistyneet ohjauskomponentit ja validointi
Ensin perussyötekentät, sitten monipuolisemmat ohjauskomponentit ja lopuksi validointiattribuutit, joiden avulla selain voi tarkistaa kentän ennen sen lähettämistä.
Semanttinen HTML5, head ja metatiedot, audio ja video
Semanttiset elementit, dokumentin head ja sen metatiedot sekä audio- ja videoelementit.
Saavutettavuus, ARIA-roolit ja edistyneet ARIA-mallit
Saavutettavuuden perusteet, ARIA-roolit ja -attribuutit sekä mukautetuissa käyttöliittymäkomponenteissa käytettävät edistyneet mallit.
Data-attribuutit, templatet, canvas, SVG ja iframe-kehykset
Mukautetut data-attribuutit, HTML-templatet, canvas-elementti, HTML:n sisäinen SVG ja iframe-kehyksiin upotettu sisältö.
Web Storage, vedä ja pudota, SEO ja sähköpostitemplatet
Web Storage ja vedä ja pudota -API, SEO ja sosiaalisen median meta-tagit sekä HTML-sähköpostitemplaten erityissäännöt.
Web Components, suorituskyky ja HTML suuressa mittakaavassa
Mukautetut elementit, shadow DOM, import maps ja progressiivinen parantaminen sekä suorituskyky, tietoturva, PWA:t ja testaus – lopuksi HTML suuressa mittakaavassa.
Miten se toimii
Näin opit tagin lukemisesta renderöintiin
Oppitunti on lyhyt ja editori on sen vieressä, joten käsitteen lukeminen ja kokeileminen tapahtuvat samalla kertaa.
Lue yksi lyhyt oppitunti
Jatka oppimispolkua siitä, mihin jäit. Jokainen oppitunti käsittelee yhtä ideaa, kuten järjestämätöntä luetteloa tai alt-tekstillä varustettua kuvaa, ja vie muutaman minuutin.
Kirjoita se editoriin ja seuraa esikatselua
Avaa editori ja kirjoita merkintä. Esikatselu piirtää sivusi uudelleen, ja CSS- ja JavaScript-välilehdet ovat valmiina, kun haluat muotoilla sivua tai saada sen reagoimaan.
Tarkista, korjaa ja rakenna
Tietovisa ja koodaushaaste päättävät jokaisen aiheen. Kun tagi tai virhe on epäselvä, AI-mentori selittää sen, virheenkorjaustehtävä antaa korjattavaksesi rikkinäisen sivun ja ohjattu projekti auttaa rakentamaan jotain esiteltävää.
Mitä se sisältää
Mitä Learn HTML sisältää
40
Kursseja tasoilta A1–C1
159 oppituntia johdattavat dokumentin rakenteesta, tekstistä, linkeistä, kuvista ja luetteloista taulukoihin, lomakkeisiin ja semanttiseen HTML5:een sekä saavutettavuuteen, web-komponentteihin, tietoturvaan ja History and Navigation API:in.
Live
HTML-editori esikatselulla
Kirjoita merkintä ja näe renderöidyn sivun päivittyvän. Voit lisätä samaan projektiin CSS- ja JavaScript-tiedostoja, jolloin pelkästä dokumentista tulee pieni toimiva verkkosivusto.
20
Ohjatut projektit
Vaiheittain rakennettavia kokonaisuuksia, kuten reseptilaatikkosivu, yhteydenottolomake, kuvagalleria, navigointipalkki ja saavutettava hintataulukko.
20
Virheenkorjaustehtävät
Oikeita vikoja jäljitettäväksi: rekisteröitymislomake, joka ei lähetä mitään, tunniste, jota kukaan ei voi napauttaa, ja sivu, joka latautuu puhelimessa pienennettynä.
80
Tagien lunttilappu
Hakulista, jossa on 80 HTML-tagia, elementtiä ja attribuuttia tilanteisiin, joissa tiedät, mitä haluat tehdä, mutta et tiedä sen nimeä.
50
Haastattelukysymykset
Viisikymmentä verkkokehittäjän työhaastattelukysymystä selkeine vastauksineen sekä lyhyiden esimerkkien koodikirjasto, jonka voit avata ja jota voit muokata, ja tila omalle koodillesi ja muistiinpanoillesi.
Taustaa
Mitä HTML on, ja voiko sen oppia kirjoittamalla puhelimella?
HTML (HyperText Markup Language) on kieli, joka kuvaa verkkosivun rakenteen: mikä teksti on otsikko, mikä kappale, mihin linkki johtaa ja mitä lomakkeella kysytään. Se ei ole ohjelmointikieli, joten siinä ei tarvitse kamppailla silmukoiden tai muuttujien kanssa. Siksi se on tavallinen ensimmäinen askel verkkokehitykseen. Koska tulos näkyy heti kirjoittamisen jälkeen, HTML sopii hyvin lyhyisiin puhelimella opiskelun hetkiin: tagi on riittävän pieni kirjoitettavaksi peukalolla, ja esikatselusta näkee saman tien, toimiko se.
Elementit, tagit ja attribuutitkolme sanaa, joita jokaisella oppitunnilla käytetään
Elementti on merkityksellinen sisältökokonaisuus, joka kirjoitetaan avaavan ja sulkevan tagin väliin, esimerkiksi kappale tai luettelon kohta. Attribuutit ovat avaavan tagin sisällä ja muokkaavat sitä, kuten osoite, johon linkki johtaa, tai teksti, joka kuvaa kuvaa. Lähes jokainen aloittelijan virhe johtuu puuttuvasta sulkevasta tagista tai väärään paikkaan sijoitetusta attribuutista.
Semanttinen HTMLotsikot, navigointi, pääsisältö ja alatunniste
Semanttiset elementit kertovat, mikä sivun osa on kyseessä, eivät sitä, miltä se näyttää. Navigointipalkilla, artikkelilla ja alatunnisteella on kullakin oma elementtinsä, mikä auttaa ruudunlukijoita, hakukoneita ja kaikkia, joiden täytyy myöhemmin muokata sivua. Tämä tapa erottaa siistin sivun yleisten säilöjen kasasta.
HTML, CSS ja JavaScriptkuka tekee mitäkin
HTML sisältää rakenteen ja sisällön, CSS hallitsee sisällön ulkoasua ja JavaScript lisää toiminnallisuutta, kuten reagoinnin napsautukseen. Kun opit ensin HTML:n, kaksi muuta saavat jotakin, mihin kiinnittyä. Sovelluksen editorissa on erilliset HTML-, CSS- ja JavaScript-välilehdet, joten voit pitää nämä kolme tehtävää erillään alusta lähtien.
Lomakkeet ja saavutettavuusmissä yksinkertaiset sivut muuttuvat vakaviksi
Lomakkeilla sivu pyytää kävijältä tietoja, ja niistä alkavat myös useimmat saavutettavuusongelmat: tunniste, jota kukaan ei voi napauttaa, tai kenttä, jolle ruudunlukija ei löydä nimeä. Tunnisteet, validointiattribuutit ja ARIA-roolit ovat pieniä merkintäkielen osia, jotka ratkaisevat, toimiiko sivu kaikille.
Sopivuus
Kenelle se sopii – ja kenelle ei
Se sopii sinulle, jos
- Kirjoitat ensimmäistä verkkosivuasi ja haluat, että jokainen tagi selitetään ennen sen käyttöä
- Opit parhaiten, kun näet jokaisen rivin tuloksen heti
- Ylläpidät blogia, verkkokauppasivua tai portfoliota ja haluat muokata sen taustalla olevaa merkintää
- Aiot siirtyä CSS:n, JavaScriptin tai front-end-kehityksen pariin ja haluat ensin vankan perustan
- Valmistaudut web-kehittäjän työhaastatteluun ja haluat harjoitella kysymyksiä
Se ei ole oikea työkalu sinulle, jos
- Tarvitset täydellisen työpöytätyönkulun tiedostoineen, kansioineen ja paikallisine palvelimineen
- Odotat jokaisen kurssin olevan maksuton; ensimmäinen kurssi, ensimmäinen ohjattu projekti ja kaksi tehtävää ovat maksuttomia, ja Pro avaa loput
- Kirjoitat jo tuotantotason HTML:ää päivittäin ja haluat kurssin sijaan hakuteoksen
- Haluat oppia design-työkalun; tämä sovellus käsittelee merkintää ja sivujen taustalla olevaa koodia
Kysymykset
Usein kysytyt kysymykset
Mikä on Opi HTML?
Opi HTML on iPhone- ja Android-sovellus, joka opettaa HTML:ää ensimmäisestä tagista edistyneisiin aiheisiin asti. Se yhdistää 40 lyhyttä kurssia sisäänrakennettuun HTML-editoriin ja reaaliaikaiseen esikatseluun, 20 ohjattuun projektiin, 20 virheenkorjaustehtävään ja AI-mentoriin. Sovelluksen käytön voi aloittaa maksutta, ja se on saatavilla 22 kielellä.
Voinko todella kirjoittaa ja esikatsella HTML:ää puhelimella?
Kyllä. Opi HTML -sovelluksen editorissa on HTML-, CSS- ja JavaScript-välilehdet, ja esikatselu näyttää sivun, jonka merkintäsi tuottaa. Puhelin sopii hyvin HTML:n vaatimiin keskittyneisiin harjoituksiin, koska tagit ovat lyhyitä. Suuremmasta näytöstä on hyötyä vasta, kun käsittelet useita tiedostoja samanaikaisesti.
Tarvitsenko aiempaa koodauskokemusta ennen aloittamista?
Et. Oppimispolku alkaa siitä, miten HTML-dokumentti rakennetaan, ja selittää jokaisen termin selkeällä kielellä ennen sen käyttöä. HTML:ssä ei ole ensin opeteltavia silmukoita tai muuttujia, joten Opi HTML pitää täydellistä aloittelijaa normaalina lähtökohtana eikä poikkeuksena.
Mitä eroa HTML:llä ja CSS:llä on?
HTML määrittää, mitä sivulla on ja mitä kukin osa tarkoittaa, kuten otsikko, linkki tai lomakekenttä. CSS määrittää ulkoasun, kuten värit, välit ja asettelun. Sovellus opettaa ensin HTML:ää ja antaa sinun lisätä CSS-tiedostoja editorissa, jotta näet niiden toimivan yhdessä ilman, että niiden tehtävät sekoittuvat.
Kuinka kauan HTML:n perusteiden oppiminen kestää?
Useimmat pystyvät kirjoittamaan yksinkertaisen ja toimivan sivun muutaman lyhyen harjoituskerran jälkeen, koska keskeisiä elementtejä on vähän: otsikot, kappaleet, linkit, kuvat, listat ja peruslomakkeet. Saavutettavuuden, semanttisen rakenteen ja web components -komponenttien kaltaisten syvempien aiheiden oppiminen kestää kauemmin. Tämän sovelluksen oppitunnit on suunniteltu suoritettaviksi muutamassa minuutissa, joten päivittäinen harjoittelu on realistista.
Millaisia projekteja voin rakentaa sovelluksessa?
20 ohjattuun projektiin kuuluu reseptilaatikkosivu, yhteydenottolomake, kuvagalleria, navigointipalkki ja saavutettava hintataulukko. Jokainen rakennetaan vaihe vaiheelta. Projektit ovat tarkoituksella pieniä, jotta saat ne valmiiksi ja voit säilyttää koodin tallennetuissa koodinpätkissäsi.
Käsitteleekö Learn HTML saavutettavuutta ja lomakkeita?
Kyllä, ja melko perusteellisesti. Lomakkeille on kolme kurssia, jotka käsittelevät perusteita, edistyneitä ohjauskomponentteja ja validointiattribuutteja. Saavutettavuudella on omat kurssinsa perusteista, ARIA-rooleista ja edistyneistä ARIA-malleista. Myös virheenkorjaustehtävissä on ongelmia, kuten tunniste, jota kukaan ei voi napauttaa, joten aiheet muuttuvat käytännöllisiksi abstraktien sijaan.
Onko sovellus maksuton, ja mitä Pro tarjoaa?
Voit ladata sovelluksen maksutta ja aloittaa heti: ensimmäinen kurssi, ensimmäinen ohjattu projekti, kaksi tehtävää ja reaaliaikainen editori sisältyvät käyttöön, samoin päivittäinen määrä AI-mentorille esitettävissä kysymyksiä. Pro avaa kaikki kurssit, projektit ja tehtävät, sertifikaattikokeen sekä rajattoman määrän AI-mentorille esitettävissä kysymyksiä ja poistaa mainokset.
Aloita
Kirjoita ensimmäinen tagisi ja katso, miten se renderöityy
Käytön voi aloittaa maksutta iOS:llä ja Androidilla 22 kielellä.
Lisää CoddyKitilta
Saatavilla alustoilla iOS ja Android.