Õppige HTML5-d sellel tasuta ja algajatele mõeldud interaktiivsel kursusel

HTML on üks veebi põhielemente, kuna see kapseldab külastatud veebisaitide sisu. Vaatamata selle tohutule mõjule on väga vähesed inimesed tegelikult teadlikud selle toimimisest.

Nii et maailma tehnoloogilise kirjaoskuse parandamiseks oleme teinud koostööd arendaja, disaineri ja õpetaja Eric Tiradoga ning loonud HTML5-le tasuta kursuse.

Kursuse lehele pääsemiseks klõpsake pilti

Kogu kursuse jooksul viib Eric teid algajast HTML-i valdamiseni, näidates samal ajal veebisaidi koostamist. Ja parim osa on: kursuse läbimiseks kulub vähem kui tund!

Vaatame nüüd, kuidas see üles ehitatud on.

Kursuse sisu

Kursus sisaldab 14 interaktiivset ekraanikuva. Iga näitleja käsitleb HTML-i põhimõistet ja enamik neist on vahemikus kolm kuni kuus minutit. Mõnes neist soovitatakse teil koodi sisse hüpata ja ise katsetada, kuna see on Scrimba platvormi puhul võimalik.

Õppetund nr 1: veebi tutvustus

Alustuseks õpetatakse teile natuke veebist üldiselt, vaadates kliente, servereid ja räägitakse kolmest brauserist: HTML, CSS ja JavaScript.

See annab teile hea aluse järgmisteks õppetundideks, sest saate paremini aru HTML-i üldisest rollist veebis.

Õppetund nr 2: HTML-dokumendi loomine

Järgmine samm on oma esimese HTML-dokumendi loomine. Selles loengus selgitatakse, kuidas HTML-failid töötavad, ja saate ka kiire brauseri URL-i riba.

Õppetund nr 3: elementide pesitsemine

Pesitsemine on HTML-is kriitiline mõiste, seega käsitletakse seda kolmandas tunnis. Pesitsemine tähendab põhimõtteliselt seda, et saate märgendeid üksteise sisse pesitseda. HTML-elemendi pesastamiseks lisage see lihtsalt teise HTML-elemendi algus- ja sulgemissiltide vahele.

Õppetund nr 4: peaelemendid ja skriptid

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

Head-element on esimene HTML-märgend pärast silti ennast. See on metaandmete konteiner ja määratleb sageli pealkirja **, ** märgistiku, stiilid, lingid, skriptid ja muu metateabe.

Nii et selles loengus saate teada, kuidas täita metasilt paljude erinevate sisutüüpidega, nagu näete ülaltoodud katkendist.

Õppetund nr 5: küljenduse elemendid

HTML5 tutvustas hulga paigutuselemente, mis muudavad HTML-i semantilisemaks. Need uued sildid tugevdavad nüüd kõige sagedamini kasutatavate paigutuselementide, nagu näiteks, tähendust ja kui meil oli varasematel aegadel kasutada ainult mõttetut elementi . Selles ekraanikuva saate teada kõige kasulikumad ja olulisemad.

Õppetund nr 6: joonise ja pildi elemendid

Pildid on pea kõigi veebisaitide põhiosa. Selles loengus saate teada, kuidas saidile pilte lisada ja ka neile pealdisi lisada.

Õppetund nr 7: videote manustamine

Võib-olla olete märganud, et YouTube'i videod on kogu veebis, eks? Mitte ainult youtube.com-is. See on võimalik tänu ühele HTML-i funktsioonist meediumide kinnistamiseks mujalt veebis asuvale lehele. Selles õppetükis käsitleme videote manustamise viise saitidelt nagu YouTube ja ka otse videofailist.

Õppetund nr 8: navigeerimisriba ja üksuste loend

Selles loengus saate teada, kuidas üles ehitada navigeerimisriba järjestamata loendi ja loendiüksuste abil. See hõlmab nii horisontaalset kui ka vertikaalset navigeerimisriba, mida kasutatakse meie saidi päises ja külgribal.

9. õppetund: pealkirjad

Pealkirjad luuakse sildi abil, kus * märk tuleb asendada numbritega 1 kuni 6. Päise tähtsus väheneb numbri suurenedes, see tähendab

on see, mida tavaliselt kasutate oma lehe kõige olulisema pealkirja või teksti jaoks.

Õppetund nr 10: Lõikude ja teksti vormindamine (1. osa)

Veebisaitide koostamiseks on oluline teada ka teksti vormindamist ja selles loengus saate teada selle põhitõed. Tõenäoliselt tunnete paljusid siinseid mõisteid tekstiprotsessoritest nagu Word ja Pages.

11. õppetund: teksti vormindamine (2. osa)

Selles õppetükis saate lisateavet vormindamise kohta, kuid siltidega, mis mõjutavad suuri tekstiplokke. Selle näiteks on 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.