de Eric Tirado

Aflați HTML în 5 minute

Un tutorial rapid pentru a vă ajuta să începeți să creați site-uri web.

HTML este limbajul de marcare utilizat pentru structurarea și prezentarea conținutului pe World Wide Web. Împreună cu CSS și JavaScript, ne permite să avem site-uri web frumoase și interactive.

Întrucât HTML este fundamentul web-ului, acesta este, de asemenea, cel mai esențial limbaj pentru orice carieră în dezvoltarea web. În acest tutorial rapid, vă voi învăța noțiunile de bază ale acestuia.

Și când ai terminat, Am lansat deja un program gratuit Curs în 14 părți despre HTML5 peste pe Scrimba.com – o platformă interactivă în care puteți sări în codul unui screencast de redare în orice moment.

Puteți consulta prima prelegere aici:

Aflati HTML in 5 minute

În regulă, înainte de a intra în HTML, vreau să încep prin a-ți povesti puțin despre arhitectura web. Acest lucru va pune rolul HTML în perspectivă pentru noi.

Arhitectura web de bază

După ce ați dezvoltat un site web, va trebui să îl găzduiți pe un server pentru a-l face accesibil pe internet. Toate serverele au o adresă IP (adică 149.56.240.169) la care vă puteți gândi ca un număr de telefon. În mod normal, punem un nume de domeniu (adică scrimba.com) peste acea adresă IP, astfel încât să fie mai ușor de reținut.

Când introduceți acel nume de domeniu în browser, acesta va da serverului un apel. Serverul va trimite apoi peste o grămadă de fișiere HTML, CSS și JavaScript, astfel:

1611669309 621 Aflati HTML in 5 minute

Browserul dvs. începe prin încărcarea fișierului HTML principal, înainte ca acesta să continue cu CSS și JavaScript. Aceste fișiere permit browserului să redea un site web frumos și interactiv.

Acum să aruncăm o privire mai atentă asupra rolurilor pe care aceste trei limbi le joacă.

Ce este HTML?

Să ne imaginăm un site web ca persoană. Vom folosi această analogie pentru a înțelege site-ul nostru. HTML este cel mai bine descris ca schelet:

1611669309 586 Aflati HTML in 5 minute

Ce este CSS?

Cu toate acestea, doar un site web simplu HTML arată destul de urât, deci va trebui să îl coafați cu CSS. Poate fi văzut ca pielea și îmbrăcămintea site-ului web.

1611669309 178 Aflati HTML in 5 minute

Ce este JavaScript?

Odată ce stăpânești CSS, ar trebui să continui cu JavaScript. În analogia noastră, este ca și creierul și mușchii site-ului nostru:

1611669310 563 Aflati HTML in 5 minute

Scrierea primului fișier HTML

Pentru a putea scrie HTML, veți avea nevoie de un document HTML, care este doar un document cu un .html extensie. Nu contează ce editor de text folosiți, dar cele mai populare în zilele noastre sunt Text sublim, Cod VS și Atom. Puteți utiliza, de asemenea Scrimba ca editor în browser.

Să creăm un fișier nou și să-l numim index.html, si scrie Hello world! în ea.

Hello world!

Dacă tragem acest fișier în browser sau îl îndreptăm către adresa acestuia, vom obține următoarele.

1611669310 887 Aflati HTML in 5 minute
Cum arată în Scrimba când deschideți index.html într-o fereastră a browserului.

Felicitări, acum ți-ai creat primul site web!

Prima dvs. etichetă HTML

Cu toate acestea, nu am scris încă niciun tag HTML. Pentru a face acest lucru, să înfășurăm Hello world! text în <h1> etichete, ca aceasta:

<h1>Hello world!</h1>

Primul <h1> este o etichetă de deschidere, iar a doua one,

, este o etichetă de închidere. După cum puteți vedea, diferența este doar backslash-ul din eticheta de închidere. Acest lucru va avea ca rezultat următoarele pe pagină:

1611669310 343 Aflati HTML in 5 minute

Ați spus acum browserului că doriți Hello world! textul să fie un antet. Astfel, browserul îi aplică un anumit stil, mărind practic dimensiunea textului.

Deci, atât de ușor este să începeți să scrieți HTML.

Scrierea unui document HTML adecvat

Dar acesta nu este de fapt un document HTML valid, deoarece acestea ar trebui să urmeze o structură clar definită. În scopul acestui tutorial, pur și simplu îți voi arăta pe scurt și apoi vom continua cu lucrurile distractive.

Iată cum Hello world! exemplu ar trebui să arate ca:

<!DOCTYPE html><html>  <head>  </head>  <body>    <h1>Hello world!</h1>  </body></html>

Nu trebuie să vă faceți griji cu privire la <!DOCTYPE>, tml>; și pentru moment, deoarece vom scrie pur și simplu our concort în eticheta. Să continuăm cu asta!

Paragrafele

Sub eticheta h1 vom adăuga un paragraf. Această etichetă este de obicei utilizată pentru, bine, paragrafe de text.

<h1>Hello world!</h1><p>Hello, and welcome to my website!<p>

Iată cum arată:

1611669310 627 Aflati HTML in 5 minute

Liste

Acum să adăugăm o listă. Pentru a face acest lucru, trebuie să adăugăm două etichete diferite, <ul>; and

  • . Anteriorul înseamnă unulistă rdered și cea din urmă stă fsau element de listă. Vom avea nevoie to wrapul
  • ; tags în interiorul etichetei
      .

      <ul>  <li>Eat</li>  <li>Sleep</li>  <li>Code</li></ul>
      1611669311 971 Aflati HTML in 5 minute

      Dacă schimbați <ul> to an

        , apoi gloanțele vor fi înlocuite cu numere, ca și el înseamnă olistă listată.

        Câmpuri de introducere

        Obținerea de date de la utilizatori este o activitate critică pe site-uri web. Să adăugăm un câmp de intrare.

        <input type="text" placeholder="Enter your email" />

        Ceea ce ar adăuga câmpul de intrare în partea de jos a site-ului nostru:

        1611669311 703 Aflati HTML in 5 minute

        Acum există două noi concepte de învățat aici: atribute și etichete cu închidere automată. Primul, atribute, oferă informații suplimentare despre elementele HTML.

        În cazul nostru, adăugăm două atribute: tip și substituent. tip spune browserului că acesta ar trebui să fie un câmp text. Aici am fi putut alege între o serie de tipuri (radio, selectare, casetă de selectare, dată) care l-ar fi transformat în elemente complet diferite.

        substituent dictează textul de ajutor din interiorul elementului.

        În cele din urmă, eticheta de intrare este, de asemenea, un închiderea de sine element (cunoscut și ca element nul), adică nu constă dintr-o etichetă de deschidere și de închidere, ci doar o singură etichetă care se închide singură.

        Pasii urmatori

        Există mult mai multe lucruri de învățat în HTML și nu este deloc dificil. Cursul meu complet poate fi finalizat în mai puțin de o oră și vă va oferi o înțelegere solidă a elementelor de bază și vă va permite să începeți să construiți site-uri web reale!

        Dacă ți-e foame de mai mult, avem o masă gratuită de 14 feluri …
        pe mine Aflați HTML5 gratuit curs la Scrimba.com.

        Ne vedem acolo. ?