HTML este unul dintre elementele esențiale ale web-ului, deoarece încapsulează conținutul de pe site-urile web pe care le vizitați. Cu toate acestea, în ciuda influenței sale imense, foarte puțini oameni sunt conștienți de modul în care funcționează.

Deci, pentru a îmbunătăți alfabetizarea tehnologică a lumii, ne-am alăturat dezvoltatorului, designerului și profesorului Eric Tirado și a creat un curs gratuit pe HTML5.

Faceți clic pe imagine pentru a ajunge la pagina cursului
Apasă pe aici pentru a ajunge la pagina cursului

De-a lungul cursului, Eric vă va duce de la începători la competenți în HTML, în timp ce vă va arăta cum să creați un site web. Și cea mai bună parte este: îți va lua mai puțin de o oră pentru a finaliza cursul!

Acum să aruncăm o privire asupra modului în care este construit.

Conținutul cursului

Cursul conține 14 capturi de ecran interactive. Fiecare distribuție gestionează un concept de bază al HTML-ului, iar majoritatea sunt cuprinse între trei și șase minute. În unele dintre ele, veți fi încurajați să intrați în cod și să experimentați singuri, așa cum este posibil cu platforma Scrimba.

Lecția nr. 1: Introducere pe web

1611886507 233 Aflati HTML5 in acest curs gratuit si interactiv pentru incepatori

Începe prin a vă învăța puțin despre web, în ​​general, privind clienții, serverele și browserele din cele trei limbi: HTML, CSS și JavaScript.

Acest lucru vă oferă o bază bună pentru lecțiile următoare, deoarece veți înțelege mai bine rolul general al HTML-ului pe internet.

Lecția # 2: Crearea unui document HTML

1611886507 498 Aflati HTML5 in acest curs gratuit si interactiv pentru incepatori

Următorul pas este crearea primului dvs. document HTML. Această prelegere va explica modul în care funcționează fișierele HTML și vă va oferi, de asemenea, o descriere rapidă pe bara URL a browserului.

Lecția nr. 3: Elemente de cuibărire

1611886507 95 Aflati HTML5 in acest curs gratuit si interactiv pentru incepatori

Cuibărirea este un concept critic în HTML, deci va fi abordat în a treia lecție. Cuibărirea înseamnă, în esență, că puteți cuibă etichete unul în celălalt. Pentru a cuibra un element HTML, pur și simplu adăugați-l între etichetele de deschidere și de închidere ale unui alt element HTML.

Lecția # 4: Elemente de cap și scripturi

<head>  
  <title>Learning HTML</title>  
  <meta charset="UTF-8">  
  <meta name="desctiption" content="My first HTML website">  
  <meta name="viewport" content="width=device-width, intial-scale=1.0">  
  <link rel="stylesheet" href="https://www.freecodecamp.org/news/want-to-learn-how-to-built-websites-heres-our-free-full-length-html5-course-4ca68cd4a39a/index.css">  
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">  
  <style>  
    h1 {  
      text-align: center;  
    }  
  </style>  
  <script>  
    document.getElementById("h1").innerHTML = "Hello Universe!";  
  </script>  
</head>

Elementul head este primul tag HTML după <html> etichetați-vă. Este un container pentru metadate și definește adesea titlul **, ** setul de caractere, stilurile, linkurile, scripturile și alte meta-informații.

Așadar, în această prelegere, veți învăța cum să completați metaeticheta cu o grămadă de tipuri de conținut diferite, după cum puteți vedea în fragmentul de mai sus.

Lecția # 5: Elemente de aspect

1611886508 873 Aflati HTML5 in acest curs gratuit si interactiv pentru incepatori

HTML5 a introdus o grămadă de elemente de aspect care fac HTML mai semantic. Aceste noi etichete consolidează acum semnificația celor mai frecvent utilizate elemente de aspect, cum ar fi <header> <article> <aside> și <footer>, în timp ce în trecut am avut doar un element lipsit de sens ca <div> a folosi. În acest screencast, veți învăța cele mai utile și importante.

Lecția # 6: Elemente de imagine și imagine

1611886508 531 Aflati HTML5 in acest curs gratuit si interactiv pentru incepatori

Imaginile sunt o parte esențială a aproape tuturor site-urilor web. În această prelegere, veți afla cum să adăugați imagini pe site și, de asemenea, cum să adăugați subtitrări la acestea.

Lecția nr. 7: încorporarea videoclipurilor

1611886508 537 Aflati HTML5 in acest curs gratuit si interactiv pentru incepatori

S-ar putea să fi observat că videoclipurile de pe YouTube sunt peste tot pe web, nu? Nu doar pe youtube.com. Acest lucru este posibil datorită uneia dintre caracteristicile HTML pentru încorporarea conținutului media într-o pagină din altă parte de pe web. În această lecție, acoperim metodele de încorporare a videoclipurilor de pe site-uri precum YouTube și, de asemenea, direct dintr-un fișier video.

Lecția # 8: Bara de navigare și elementele listei

1611886509 926 Aflati HTML5 in acest curs gratuit si interactiv pentru incepatori

În această prelegere, veți învăța cum să construiți bara de navigare folosind o listă și elemente de listă neordonate. Aceasta implică atât o bară de navigare orizontală, cât și una verticală, pentru utilizare în antet și în bara laterală a site-ului nostru.

Lecția # 9: titluri

1611886509 187 Aflati HTML5 in acest curs gratuit si interactiv pentru incepatori

Titlurile sunt create folosind <h*> etichetă, unde semnul * trebuie înlocuit cu numere de la 1 la 6. Importanța antetului scade pe măsură ce numărul crește, adică <h1> este cel pe care l-ați folosi în mod normal pentru cel mai important titlu sau text de pe pagina dvs.

Lecția # 10: Formatarea paragrafului și a textului (partea 1)

1611886510 826 Aflati HTML5 in acest curs gratuit si interactiv pentru incepatori

Formatarea textului este, de asemenea, importantă de știut pentru a crea site-uri web și, în această prelegere, veți învăța noțiunile de bază ale acestuia. Probabil că veți recunoaște o mulțime de concepte aici de la procesoare de text precum Word și Pages.

Lecția # 11: Formatarea textului (partea 2)

1611886510 154 Aflati HTML5 in acest curs gratuit si interactiv pentru incepatori

În această lecție, veți afla mai multe despre formatare, dar cu etichete care afectează blocuri mari de text. Exemple în acest sens sunt <code> element și <blockquote> element.

Lecția # 12: Tabelele (partea 1)

1611886511 741 Aflati HTML5 in acest curs gratuit si interactiv pentru incepatori

Tabelele pot fi un pic complicate, dar această prelegere încearcă să o explice cât mai simplu posibil. În al doilea rând, două prelegeri vor fi dedicate acestui subiect, astfel încât să îl înțelegeți în mod corespunzător.

Lecția # 13: Tabelele (partea 2)

1611886511 144 Aflati HTML5 in acest curs gratuit si interactiv pentru incepatori

În această lecție, veți afla elemente mai avansate în tabele, cum ar fi <thead>, <tbody>, și <tfoot>. Acestea vă permit să controlați separat elementele din interiorul capului, corpului și subsolului.

Veți fi, de asemenea, expus la <colgroup>, care vă permite să adăugați stiluri la anumite coloane.

Lecția # 14: legarea paginii și atingerile finale

1611886511 633 Aflati HTML5 in acest curs gratuit si interactiv pentru incepatori

În screencast-ul final, vom încheia totul și vom termina site-ul web. Vom adăuga un link din navigare către diferite secțiuni ale paginii și, de asemenea, vom introduce o altă pagină, astfel încât să înțelegeți cum funcționează legăturile dintre pagini.

În acest moment, ar trebui să aveți o înțelegere solidă a HTML-ului și a celor mai importante etichete ale limbajului.

Notă: Eric va lansa, de asemenea, un curs de urmărire în aprilie, care va aborda CSS pentru începători. Lăsați-vă e-mailul aici dacă doriți acces anticipat.

Formatul Scrimba

În cele din urmă, să aruncăm o privire și asupra tehnologiei din spatele cursului, deoarece este destul de elegantă. Cursul este construit folosind Scrimba, un instrument de screencast de codare interactiv. Scrimba arată ca videoclipuri normale, dar sunt complet interactive. Puteți edita codul în cadrul distribuțiilor!

Iată un gif care explică conceptul:

Întrerupeți ecranul → Editați codul → Rulați-l!  → Vedeți modificările dvs.

Întrerupeți ecranul → Editați codul → Rulați-l! → Vedeți modificările dvs.

Acest lucru este minunat atunci când simți că trebuie să experimentezi codul pentru a-l înțelege corect sau când vrei pur și simplu să copiezi o bucată din cod.

Deci ce mai aștepți? Mergeți spre cursul pagină și începeți astăzi!


Mulțumesc pentru lectură! Numele meu este Per Borgen, sunt cofondatorul Scrimba – cel mai simplu mod de a învăța să codezi. Ar trebui să verificați bootcamp de design web receptiv dacă doriți să învățați să construiți un site web modern la nivel profesional.

1611011407 121 Aflati TypeScript gratuit cu acest curs interactiv Scrimba
Faceți clic aici pentru a ajunge la bootcampul avansat.