Kas soovite teada saada, kuidas veebisaite luua? Siin on meie tasuta täispikk HTML5 kursus.

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

Nii et maailma tehnoloogilise kirjaoskuse parandamiseks oleme kokku puutunud arendaja, kujundaja ja õpetaja Eric Tiradoga ning loonud HTML5-le tasuta kursuse.

Kursuse lehele pääsemiseks klõpsake sellel pildil.

Kogu kursuse vältel viib Eric teid algajast HTML-i valdamiseni, näidates teile, kuidas veebisaiti luua. Ja parim osa on see: kursuse läbimiseks kulub teil vähem kui tund!

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

Kursuse sisu

Kursus sisaldab 14 interaktiivset ekraanisaadet. Iga osaleja tegeleb HTML-i põhikontseptsiooniga ja enamus neist on vahemikus kolm kuni kuus minutit. Mõnes neist julgustatakse teid koodi sisse minema ja ise katsetama, nagu Scrimba platvormi puhul on võimalik.

1. õppetund: sissejuhatus veebi

Alustuseks õpetatakse teile natuke veebi kohta üldiselt, vaadates kliente, servereid ja kolme keelt kõnelevaid keeli: HTML, CSS ja JavaScript.

See annab teile hea aluse järgmisteks tundideks, kuna saate HTML-i üldisest rollist veebis paremini aru saada.

2. tund: HTML-dokumendi loomine

Järgmine samm on oma esimese HTML-dokumendi loomine. Selles loengus selgitatakse, kuidas HTML-failid töötavad, ja see annab teile ka kiire ülevaate brauseri URL-i ribalt.

3. tund: elementide pesitsemine

Pesastamine on HTML-i kriitiline mõiste, nii et seda käsitletakse kolmandas õppetunnis. Pesitsemine tähendab põhimõtteliselt seda, et saate sildid üksteise sisse pesa panna. HTML-elemendi pesastamiseks lisage see lihtsalt mõne teise HTML-i elemendi avamis- ja sulgemissiltide vahele.

4. õppetund: peaelemendid ja skriptid


   HTML-i õppimine 
  
  
  
  
  
  
    h1 {
      teksti joondamine: keskel;
    }
  
  
    document.getElementById ("h1"). innerHTML = "Tere, universum!";
  

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

Nii saate sellest loengust teada, kuidas täita metasilt mitut erinevat tüüpi sisu, nagu näete ülaltoodud lõigust.

Õppetund nr 5: paigutuse elemendid

HTML5 tutvustas hunnikut paigutuselemente, mis muudavad HTMLi semantilisemaks. Need uued sildid tugevdavad nüüd enamkasutatavate paigutuse elementide tähendust, nagu

ja , samas kui varem oli meil olnud ainult mõttetu element, nagu
, mida kasutada. Selles ekraanisaates saate teada kõige kasulikumad ja olulisemad.

Õppetund nr 6: joonis- ja pildielemendid

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

Õppetund nr 7: videote kinnistamine

Võib-olla olete märganud, et YouTube'i videod on kogu veebis, eks? Mitte ainult saidil youtube.com. See on võimalik tänu ühele HTML-i funktsioonile, mis võimaldab manustada meediumid mujalt veebist lehele. Selles õppetükis käsitleme meetodit videote manustamiseks sellistelt saitidelt nagu YouTube ja ka otse videofailist.

8. õppetund: navigeerimisriba ja üksuste loend

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

9. tund: pealkirjad

Pealkirjad luuakse sildi on see, mida tavaliselt kasutate teie lehe kõige olulisem pealkiri või tekst.

10. õppetund: lõigu ja teksti vormindamine (1. osa)

Veebisaitide loomiseks on oluline teada ka teksti vormindamist ja selles loengus saate teada selle põhitõed. Tõenäoliselt tunnete siin tekstitöötlejate, näiteks Word ja Lehed, ära palju mõisteid.

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

Selles õppetükis saate teada rohkem vormindamise kohta, kuid siltidega, mis mõjutavad suuri tekstiplokke. Selle näideteks on element ja

.

12. tund: lauad (1. osa)

Tabelid võivad olla natuke keerulised, kuid see loeng püüab seda võimalikult lihtsalt selgitada. Teiseks pühendatakse sellele ainele kaks loengut, et saaksite sellest õigesti aru.

13. õppetund: lauad (2. osa)

Selles õppetükis saate teada tabelites täpsemaid elemente, näiteks , ja . Need võimaldavad teil pea, keha ja jaluse sisemisi elemente eraldi juhtida.

Samuti puutute kokku , mis võimaldab teil konkreetsetele veergudele stiile lisada.

Õppetund nr 14: lehe linkimine ja viimased puudutused

Viimases vaatuses pakime selle kõik kokku ja viime veebisaidi valmis. Lisame navigeerimise lingi lehe erinevatesse jaotistesse ja tutvustame ka mõnda muud lehte, et mõistaksite, kuidas lehtedevahelised lingid toimivad.

Selleks hetkeks peaks teil olema HTML-ist ja keele tähtsamatest siltidest täielik arusaam.

Märkus. Eric algatab aprillis ka jätkukursuse, mis tegeleb CSS-iga algajatele. Varase juurdepääsu saamiseks jätke oma e-post siia.

Scrimba formaat

Lõpuks vaatame ka kursuse taga olevat tehnoloogiat, kuna see on üsna libe. Kursuse ülesehitamiseks kasutatakse interaktiivset kodeerimise ekraaniülekande tööriista Scrimba. Scrimba näeb välja nagu tavalised videod, kuid need on täielikult interaktiivsed. Koodi saab redigeerida valettide sees!

Siin on gif, mis selgitab mõistet:

Kuvaekraani peatamine → muutke koodi → käivitage see! → Vaadake muudatusi

See sobib suurepäraselt siis, kui tunnete, et peate koodi mõistmiseks katsetama, või kui soovite lihtsalt koodi kopeerida.

Mida sa siis ootad? Minge kursuste lehele ja alustage juba täna!

Täname, et lugesite! Minu nimi on Per, olen Scrimba kaasasutaja ja armastan aidata inimestel uusi oskusi õppida. Jälgige mind Twitteris, kui soovite saada teavitust uute artiklite ja ressursside kohta.