Opi HTML5 tällä ilmaisella ja vuorovaikutteisella kurssilla aloittelijoille

HTML on yksi verkon ydinrakenteista, koska se kiteyttää vierailemiesi verkkosivustojen sisällön. Huolimatta sen valtavasta vaikutuksesta hyvin harvat ihmiset ovat todella tietoisia siitä, miten se toimii.

Joten parantaaksemme maailman teknistä lukutaitoa olemme yhdessä kehittäjän, suunnittelijan ja opettajan Eric Tiradon kanssa ja luoneet ilmaisen kurssin HTML5: lle.

Napsauta kuvaa päästäksesi kurssisivulle

Koko kurssin ajan Eric vie sinut aloittelijasta HTML-taitoon ja näyttää samalla kuinka rakentaa verkkosivustoa. Ja parasta on: Kurssin suorittaminen vie alle tunnin!

Katsotaan nyt, miten se on rakennettu.

Kurssin sisältö

Kurssi sisältää 14 interaktiivista kuvaruutua. Jokainen näyttelijä käsittelee HTML: n ydinkonseptin, ja suurin osa on välillä 3–6 minuuttia. Joissakin niistä sinua kannustetaan siirtymään koodiin ja kokeilemaan itseäsi, koska se on mahdollista Scrimba-alustan kanssa.

Oppitunti # 1: Johdanto verkkoon

Se alkaa opettamalla sinulle hieman verkosta yleensä, tarkastelemalla asiakkaita, palvelimia ja kolmea kieltä, joita selaimet puhuvat: HTML, CSS ja JavaScript.

Tämä antaa sinulle hyvän pohjan seuraaville oppitunneille, kun ymmärrät paremmin HTML: n yleisen roolin Internetissä.

Oppitunti # 2: HTML-asiakirjan luominen

Seuraava vaihe on luoda ensimmäinen HTML-dokumenttisi. Tässä luennossa selitetään, kuinka HTML-tiedostot toimivat, ja se antaa sinulle myös nopean alukkeen selaimen URL-palkissa.

Oppitunti # 3: Elementtien pesiminen

Pesiminen on kriittinen käsite HTML: ssä, joten se käsitellään kolmannessa oppitunnissa. Pesiminen tarkoittaa periaatteessa, että tunnisteita voidaan sijoittaa toisiinsa. HTML-elementin sijoittamiseksi lisää se vain toisen HTML-elementin avaus- ja sulkutunnisteiden väliin.

Oppitunti # 4: Pään elementit ja komentosarjat

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

Head-elementti on ensimmäinen HTML-tagi tagin jälkeen . Se on metatietojen säilö ja määrittelee usein otsikon **, ** merkistö, tyylit, linkit, komentosarjat ja muut metatiedot.

Joten tässä luennossa opit täyttämään sisällönkuvauskentän joukolla erilaisia ​​sisältötyyppejä, kuten näet yllä olevasta katkelmasta.

Oppitunti # 5: Asetteluelementit

HTML5 esitteli joukon ulkoasuelementtejä, jotka tekevät HTML: stä semanttisen. Nämä uudet tunnisteet vahvistavat nyt merkitystä yleisimmin käytetyille ulkoasuelementeille, kuten, ja vaikka aikaisemmin meillä oli vain merkityksetön elementti, jota haluaisimme käyttää. Tässä kuvaruudussa opit hyödyllisimmät ja tärkeimmät.

Oppitunti # 6: Kuva- ja kuvaelementit

Kuvat ovat keskeinen osa melkein kaikkia verkkosivustoja. Tässä luennossa opit lisäämään kuvia sivustoon ja myös lisäämään niihin kuvatekstejä.

Oppitunti # 7: Videoiden upottaminen

Olet ehkä huomannut, että YouTube-videoita on kaikkialla verkossa, eikö? Ei vain youtube.comissa. Se on mahdollista yhden HTML-ominaisuuden ansiosta, jonka avulla media voidaan upottaa muualta verkosta tulevalle sivulle. Tässä oppitunnissa käsitellään menetelmiä videoiden upottamiseksi YouTuben kaltaisilta sivustoilta ja myös suoraan videotiedostosta.

Oppiaihe # 8: Navigointipalkki ja luettelokohteet

Tässä luennossa opit rakentamaan navigointipalkin käyttämällä järjestämätöntä luetteloa ja luettelokohteita. Tähän liittyy sekä vaaka- että pystysuuntainen navigointipalkki, joita käytetään sivustomme otsikossa ja sivupalkissa.

Oppitunti # 9: Otsikot

Otsikot luodaan tunnisteen avulla, jossa * -merkki on korvattava numeroilla 1-6. Otsikon merkitys laskee, kun luku kasvaa

on se, jota normaalisti käytät sivusi tärkeimmässä otsikossa tai tekstissä.

Oppiaihe # 10: Kappaleen ja tekstin muotoilu (osa 1)

Tekstin muotoilu on myös tärkeää tietää verkkosivustojen luomiseksi, ja tässä luennossa opit sen perusteet. Luultavasti tunnistat monet käsitteet täältä tekstinkäsittelijöiltä, ​​kuten Word ja Pages.

Oppiaihe # 11: Tekstin muotoilu (osa 2)

Tässä oppitunnissa opit lisää muotoilusta, mutta tunnisteilla, jotka vaikuttavat suuriin tekstilohkoihin. Esimerkkejä tästä ovat 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.