Dacă doriți să creați un site web, prima limbă pe care trebuie să o învățați este HTML.

În acest articol, vom trece prin elementele de bază ale HTML. La final, vom construi un site web de bază folosind doar HTML.

Iată un videoclip pe care îl puteți viziona dacă doriți să completați acest articol:

Dacă preferați videoclipul, îl puteți viziona aici

Ce este HTML?

HTML, care înseamnă Hypertext Markup Language, este un limbaj destul de simplu. Acesta constă din diferite elemente pe care le folosim pentru a structura o pagină web.

Aflati elementele de baza HTML pentru incepatori in doar 15
Ce este HTML?

Ce sunt elementele HTML?

1611717308 461 Aflati elementele de baza HTML pentru incepatori in doar 15
Elemente HTML

Elementul începe de obicei cu o etichetă de deschidere, care constă din numele elementului. Este înfășurat în paranteze unghiulare de deschidere și închidere. Eticheta de deschidere indică de unde începe elementul.

Similar cu eticheta de deschidere, eticheta de închidere este, de asemenea, înfășurată în paranteze unghiulare de deschidere și închidere. Dar include și o bară înainte înainte de numele elementului.

Totul din interiorul etichetelor de deschidere și închidere este conținutul.

Dar nu toate elementele urmează acest model. Le numim pe cele care nu golesc elemente. Acestea constau doar dintr-o singură etichetă sau o etichetă de deschidere care nu poate avea conținut. Aceste elemente sunt de obicei utilizate pentru a insera sau încorpora ceva în document.

De exemplu, <img> elementul este utilizat pentru a încorpora un fișier imagine sau fișierul <input> elementul este folosit pentru a insera o intrare pe pagină.

<img src="https://images.unsplash.com/photo-1610447847416-40bac442fbe6" width="50">

În exemplul de mai sus, <img> elementul constă doar dintr-o etichetă care nu are conținut. Acest element este utilizat pentru a insera un fișier imagine din Unsplash în document.

Cum să cuibărești elemente HTML

<div class="my-list">
  <h4>My list:</h4>

  <ul>
     <li>Apple</li>
     <li>Orange</li>
     <li>Banana</li>
  </ul>
</div>

Elementele pot fi plasate în interiorul altor elemente. Aceasta se numește Nesting. În exemplul de mai sus, în interiorul <div> element avem un <h4> element și un <ul> sau element de listă neordonat. Și în mod similar în interiorul <ul> element, sunt 3 <li> sau elemente de element de listă.

Cuibul de bază este destul de simplu de înțeles. Dar când pagina devine mai mare, cuibărirea poate deveni complicată.

Prin urmare, înainte de a lucra cu HTML, gândiți-vă la structura de aspect pe care ați dori să o aveți. Puteți să o extrageți pe o bucată de hârtie sau în minte. Va ajuta foarte mult.

Cum să cuibărești elemente HTML

Ce sunt atributele HTML?

Elementele au și atribute, care conțin informații suplimentare despre elementul care nu va apărea în conținut.

<img src="https://images.unsplash.com/photo" width="50">

În exemplul de mai sus, <img> elementul are 2 atribute: src sau sursă pentru a specifica calea imaginii și width pentru a specifica lățimea imaginii în pixeli.

1611717308 446 Aflati elementele de baza HTML pentru incepatori in doar 15

Cu acest exemplu, puteți vedea următoarele caracteristici ale atributelor:

  • Există un spațiu între atribute și numele elementului
  • Atributele sunt adăugate în eticheta de deschidere
  • Elementele pot avea multe atribute
  • Atributele au de obicei un nume și o valoare: nume = „valoare”

Dar nu fiecare atribut are același model. Unele pot exista fără valori și le numim atribute booleene.

<button onclick=“alert('Submit')" disabled>Button</button>

În acest exemplu, dacă vrem să dezactivăm butonul, tot ce trebuie să facem este să trecem un disabled atribut fără nicio valoare. Aceasta înseamnă că prezența atributului reprezintă valoarea adevărată, altfel absența reprezintă valoarea falsă.

Elemente HTML comune

În total sunt mai mult de 100 de elemente. Dar 90% din timp le veți folosi doar în jur de 20 dintre cele mai frecvente. Le-am pus în 5 grupuri:

Elemente de secțiune

  <div>, <span>, <header>, <footer>, <nav>, <main>, <section> 

Aceste elemente sunt utilizate pentru a organiza conținutul în diferite secțiuni. De obicei, ele se explică de la sine, de exemplu, <header> reprezintă de obicei un grup al secțiunii de introducere și navigare, <nav> reprezintă secțiunea care conține legături de navigare și așa mai departe.

Conținut text

  <h1> to <h6>, <p>, <div>, <span>, <ul>, <ol>, <li>

Aceste elemente sunt utilizate pentru a organiza conținut sau blocuri de text. Acestea sunt importante pentru accesibilitate și SEO. Acestea spun browserului scopul sau structura conținutului.

Formulare

  <form>, <input>, <button>, <label>, <textarea>

Aceste elemente pot fi utilizate împreună pentru a crea formulare pe care utilizatorii le pot completa și trimite. Formularele ar putea fi cea mai dificilă parte a HTML.

  <img>, <a>

Aceste elemente sunt utilizate pentru a insera o imagine sau a crea un hyperlink.

Alții

  <br>, <hr>

Aceste elemente sunt folosite pentru a adăuga o pauză la pagina web.

Puteți găsi toate elementele pe developer.mozilla.org. Dar pentru începători, trebuie doar să știți cele mai frecvente.

Elemente HTML la nivel de bloc vs.

În mod implicit, un element poate fi fie la nivel de bloc, fie un element în linie.

Elementele la nivel de bloc sunt elementele care pornesc întotdeauna pe o nouă linie și ocupă întreaga lățime disponibilă.

Elementele în linie sunt elementele care nu pornesc pe o nouă linie și ocupă doar lățimea necesară.

1611717308 165 Aflati elementele de baza HTML pentru incepatori in doar 15
Blocare nivel vs. elemente HTML în linie

Două elemente care reprezintă elemente la nivel de bloc și, respectiv, elemente în linie sunt <div> și <span>. În acest exemplu, puteți vedea că <div> elementele are 3 linii, în timp ce <span> elementul ocupă doar 1 linie.

Dar întrebarea este: de unde știm care sunt elemente la nivel de bloc și care sunt elemente în linie? Ei bine, din păcate, trebuie să-ți amintești de ele. Cel mai simplu este să ne amintim care sunt elementele în linie – iar restul sunt elemente de bloc.

Dacă ne uităm înapoi la cele mai comune elemente HTML, elementele în linie includ: <span>, <input>, <button>, <label>, <textarea>, <img>, <a>, <br>.

Cum să comentați în HTML

<p>This is a paragraph.</p>

<!-- <p>I am not showing.</p> -->

Scopul comentariilor este de a include note în cod pentru a explica logica dvs. sau pur și simplu pentru a vă organiza codul.

Comentariile HTML sunt înfășurate în marcatori speciali: <!-- and --> și sunt ignorate în browser.

Cum se utilizează entități HTML

Ce se întâmplă dacă doriți să afișați textul: the <p> tag defines a paragraph., dar browserul interpretează <p> ca etichetă de deschidere pentru un element nou? În acest caz, putem folosi entități HTML ca în exemplul următor:

<p>the <p> tag defines a paragraph.</p>

<p>the &lt;p&gt; define a paragraph.</p>

Cum se utilizează emoji în HTML

Pe web-ul modern, putem afișa emoji în HTML destul de ușor, astfel: 👻

<p>😀 Grinning Face.</p>

<p>🎂 Birthday</p>

Greșeli frecvente pentru începători în HTML

1. Etichete / nume de elemente

Etichetele / numele elementelor sunt cAse-inSensitive. Aceasta înseamnă că pot fi scrise cu litere mici sau mari, dar este recomandat să scrieți totul cu litere mici: <button> nu <ButTon>.

2. Etichetă de închidere

Includerea unei etichete de închidere este o eroare obișnuită pentru începători. Prin urmare, ori de câte ori creați o etichetă de deschidere, introduceți imediat o etichetă de închidere.

3. Cuibărit

Este gresit:

<div>Div 1 <span> Span 2 </div></span>

Etichetele trebuie să se deschidă și să se închidă astfel încât să fie în interiorul sau în exteriorul celuilalt.

4. Ghilimele simple și ghilimele duble

Este gresit:

<img src="https://images.unsplash.com/'>

Nu puteți amesteca ghilimele simple și ghilimele duble. Ar trebui să utilizați întotdeauna ghilimele duble și să utilizați entități HTML, dacă este necesar.

Cum să construiești un site web simplu cu HTML

Elementele HTML individuale nu sunt suficiente pentru a crea un site web. Deci, să vedem de ce mai avem nevoie pentru a construi un site web simplu de la zero.

Cum se creează un document HTML

Mai întâi, să deschidem Cod Visual Studio (sau editorul de cod preferat). În dosarul la alegere, creați un fișier nou și denumiți-l index.html.

În fișierul index.html, tastați! (semnul exclamării) și apăsați Enter. Veți vedea așa ceva:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Acesta este codul minim pe care ar trebui să îl aibă un document HTML pentru a alcătui un site web. Și aici avem:

  1. <!DOCTYPE html>: Mai întâi avem Doctype. Din motive istorice ciudate în HTML, trebuie să includem tipul de document pentru ca totul să funcționeze corect.
  2. <html lang="en"></html>: <html> elementul împachetează tot conținutul de pe pagină, cunoscut și sub numele de element rădăcină. Și ar trebui să includem întotdeauna lang atribut pentru a declara limba paginii.
  3. <head></head>: <head> element este un container pentru tot ceea ce doriți să includeți, dar nu conținut pe care îl afișați utilizatorilor dvs.
  4. <meta charset="UTF-8" />: Primul metaelement este utilizat pentru a seta setul de caractere să fie UTF-8, care include cele mai multe caractere din limbile scrise.
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />: Al doilea element meta specifică fereastra de vizualizare a browserului. Această setare este pentru un site optimizat pentru dispozitive mobile.
  6. <title>Document</title>: Acesta este <title> element. Setează titlul paginii.
  7. <body></body>: <body> elementul conține tot conținutul de pe pagină.

Cum se construiește o pagină de rețetă de clătite

Bine, acum că avem codul de pornire, să construim o pagină de rețete de clătite. Vom folosi conținutul din aceasta Pagina AllRecipes.

Mai întâi, să dăm <title> conținutul elementului din rețeta de clătite. Veți vedea textul din fila paginii web modificată. În <body> element, să creăm 3 elemente: <header>, <main> și <footer> reprezentând 3 secțiuni.

1. Construiți secțiunea antet

În antet, vrem să avem logo-ul și navigarea. Prin urmare, să creăm un div cu conținutul ALL RECIPE pentru sigla.

Pentru navigare, să folosim <nav> element. În cadrul <nav> element, putem folosi <ul> pentru a crea o listă neordonată. Vrem să avem 3 <li> elemente pentru 3 linkuri: ingrediente, pași și abonare. Codul antetului arată astfel:

...
    <header>
      <div>ALL RECIPE</div>
      <nav>
        <ul>
          <li><a href="https://www.freecodecamp.org/news/html-basics-for-beginners/#ingredients">Ingredients</a></li>
          <li><a href="#steps">Steps</a></li>
          <li><a href="#subsribe">Subscribe</a></li>
        </ul>
      </nav>
    </header>
...

2. Construiți secțiunea principală

În secțiunea principală, mai întâi, dorim să avem un titlu și o imagine. Putem folosi h1 pentru titlu și <img> pentru imagine (putem folosi o imagine din Unsplash gratuit):

...
    <main>
      <h1>Good Old Fashioned Pancakes</h1>
      <img
        src="https://images.unsplash.com/photo-1575853121743-60c24f0a7502"
        alt="pancake"
        width="250"
      />
    </main>
...

În continuare, vrem să enumerăm toate ingredientele. Putem folosi <ol> pentru a crea o listă ordonată și <input type="checkbox" /> pentru a crea o casetă de selectare.

Dar înainte de asta, putem folosi <h2> pentru a porni un nou bloc de conținut. De asemenea, dorim să adăugăm id atribut pentru <h2> astfel încât linkul din navigare să știe unde să meargă:

...
    <main>
    ...
      <h2 id="ingredients">Ingredients</h2>
      <ol>
        <li><input type="checkbox" /> 1 ½ cups all-purpose flour</li>
        <li><input type="checkbox" /> 3 ½ teaspoons baking powder</li>
        <li><input type="checkbox" /> 1 teaspoon salt</li>
        <li><input type="checkbox" /> 1 tablespoon white sugar</li>
        <li><input type="checkbox" /> 1 ¼ cups milk</li>
        <li><input type="checkbox" /> 1 egg</li>
      </ol>
    </main>
...

După ingrediente, vrem să enumerăm toți pașii. Putem folosi <h4> pentru titlul pasului și <p> pentru conținutul pasului:

...
    <main>
    ...
      <h2 id="steps">Steps</h2>
      
      <h4>Step 1</h4>
      <p>
        In a large bowl, sift together the flour, baking powder, salt and sugar.
        Make a well in the center and pour in the milk, egg and melted butter;
        mix until smooth.
      </p>
      
      <h4>Step 2</h4>
      <p>
        Heat a lightly oiled griddle or frying pan over medium-high heat. Pour
        or scoop the batter onto the griddle, using approximately 1/4 cup for
        each pancake. Brown on both sides and serve hot.
      </p>
    </main>
...

Bine, acum că am terminat cu secțiunea principală, să trecem la secțiunea de subsol.

În subsol, dorim să avem un formular de abonare și un text privind drepturile de autor.

Pentru formularul de abonare, putem folosi <form> element. În interiorul său, putem avea un <input type="text"> pentru introducerea textului și a <button> pentru butonul de trimitere.

Pentru textul cu drepturi de autor, putem folosi pur și simplu un <div>. Observați aici, putem folosi entitatea HTML $copy; pentru simbolul drepturilor de autor.

Putem adăuga <br> pentru a adăuga spațiu între formularul de abonare și textul privind drepturile de autor:

...
    <footer>
      <h6 id="subscribe">Subscribe</h6>
      <form onsubmit="alert('Subscribed')">
        <input type="text" placeholder="Enter Email Address" />
        <button>Submit</button>
      </form>
      <br />
      <div>&copy; dakota kelly at Allrecipe.com</div>
    </footer>
...

Bine acum am terminat! Iată codul complet de referință:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pancake Recipe</title>
  </head>
  <body>
    <header>
      <div>ALL RECIPE</div>
      <nav>
        <ul>
          <li><a href="https://www.freecodecamp.org/news/html-basics-for-beginners/#ingredients">Ingredients</a></li>
          <li><a href="#steps">Steps</a></li>
          <li><a href="#subsribe">Subscribe</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Good Old Fashioned Pancakes</h1>
      <img
        src="https://images.unsplash.com/photo-1575853121743-60c24f0a7502?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8cGFuY2FrZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60"
        alt="pancake"
        width="250"
      />
      <h2 id="ingredients">Ingredients</h2>
      <ol>
        <li><input type="checkbox" /> 1 ½ cups all-purpose flour</li>
        <li><input type="checkbox" /> 3 ½ teaspoons baking powder</li>
        <li><input type="checkbox" /> 1 teaspoon salt</li>
        <li><input type="checkbox" /> 1 tablespoon white sugar</li>
        <li><input type="checkbox" /> 1 ¼ cups milk</li>
        <li><input type="checkbox" /> 1 egg</li>
      </ol>
      <h2 id="steps">Steps</h2>
      <h4>Step 1</h4>
      <p>
        In a large bowl, sift together the flour, baking powder, salt and sugar.
        Make a well in the center and pour in the milk, egg and melted butter;
        mix until smooth.
      </p>
      <h4>Step 2</h4>
      <p>
        Heat a lightly oiled griddle or frying pan over medium-high heat. Pour
        or scoop the batter onto the griddle, using approximately 1/4 cup for
        each pancake. Brown on both sides and serve hot.
      </p>
    </main>
    <hr />
    <footer>
      <h6 id="subscribe">Subscribe</h6>
      <form onsubmit="alert('Subscribed')">
        <input type="text" placeholder="Enter Email Address" />
        <button>Submit</button>
      </form>
      <br />
      <div>&copy; dakota kelly at Allrecipe.com</div>
    </footer>
  </body>
</html>

Concluzie

Puteți construi un site web simplu doar cu HTML. Dar pentru a putea construi site-uri web frumoase și funcționale, trebuie să studiați CSS și JavaScript.

Puteți să mă urmăriți pe rețelele de socializare sau pe YouTube pentru actualizări viitoare cu privire la aceste subiecte. Între timp, puteți verifica programul Routech pentru a practica HTML rezolvând sarcini mici.

În caz contrar, rămâneți fericit codificându-vă și ne vedem în postările viitoare 👋.

__________ 🐣 Despre mine __________