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.
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ţinut
- 1 Conținutul cursului
- 1.1 Lecția nr. 1: Introducere pe web
- 1.2 Lecția # 2: Crearea unui document HTML
- 1.3 Lecția nr. 3: Elemente de cuibărire
- 1.4 Lecția # 4: Elemente de cap și scripturi
- 1.5 Lecția # 5: Elemente de aspect
- 1.6 Lecția # 6: Elemente de imagine și imagine
- 1.7 Lecția nr. 7: încorporarea videoclipurilor
- 1.8 Lecția # 8: Bara de navigare și elementele listei
- 1.9 Lecția # 9: titluri
- 1.10 Lecția # 10: Formatarea paragrafului și a textului (partea 1)
- 1.11 Lecția # 11: Formatarea textului (partea 2)
- 1.12 Lecția # 12: Tabelele (partea 1)
- 1.13 Lecția # 13: Tabelele (partea 2)
- 1.14 Lecția # 14: legarea paginii și atingerile finale
- 2 Formatul Scrimba
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
Î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
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
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
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
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
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.
Î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
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)
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)
Î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)
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)
Î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
Î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.
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.
#Aflați #HTML5 #în #acest #curs #gratuit #și #interactiv #pentru #începători
Aflați HTML5 în acest curs gratuit și interactiv pentru începători
