Tutorial HTML pentru începători

Dacă doriți să deveniți un webmaster și să învățați cum să creați un site web, s-ar putea să considerați că perspectiva de a vă familiariza cu HTML este destul de descurajantă.

Este ceva ce nu poate fi evitat, totuși, deoarece marea majoritate a paginilor de destinație a site-urilor web pe care le vizitați vor fi fost scrise și structurate folosind elemente HTML. De fapt, HTML este folosit acum de peste 74% din toate site-urile web cunoscute, în timp ce acest limbaj ajută, de asemenea, la îmbunătățirea tuturor aspectelor, de la designul site-ului dvs. până la calitatea conținutului pe care îl prezintă.

În acest ghid, vom explora principiile de bază ale HTML și aplicațiile sale potențiale, înainte de a examina exemple de elemente individuale pe care le folosiți atunci când vă codificați site-ul web.

Ce este HTML?

În termeni simpli, HTML reprezintă limbajul standard de marcare pentru crearea de pagini web online. Este acronimul de la Hyper Text Markup Language (limbaj de marcare a hipertextului), iar funcția sa cea mai importantă este de a stabili structura, aspectul și prezentarea paginilor de destinație individuale. Deși browserele web nu afișează în mod direct limbajul HTML, acesta joacă un rol esențial în a ajuta la crearea unui site vizibil, accesibil și ușor de utilizat.

HTML este, de asemenea, susținut de o serie de elemente individuale, care construiesc treptat pagini web, structurează prezentarea conținutului și dau viață site-ului dumneavoastră. Aceste elemente sunt create și conținute în „etichete”, care definesc bucăți alternative de conținut, cum ar fi titlurile, paragrafele și alte exemple similare.

Vom explora aceste elemente și construcția lor în detaliu mai jos, analizând în același timp modul în care pot fi personalizate pentru a introduce culoare, link-uri și tipografie variabilă pe site-ul dumneavoastră.

Unde se folosește HTML?

După cum putem vedea, cea mai comună aplicație pentru HTML este proiectarea paginilor de destinație individuale care alcătuiesc site-ul dumneavoastră. Aceasta nu este singura aplicație a popularului instrument de codificare, totuși, înțelegerea utilizărilor sale suplimentare vă va ajuta să profitați la maximum de acest limbaj în calitate de nou webmaster. Așadar, iată câteva dintre modalitățile suplimentare în care HTML poate fi aplicat:

• Creați elemente personalizabile în cadrul unei pagini existente. Dacă intenționați să permiteți comentarii la postările de pe blog sau publicarea de conținut generat de utilizatori pe site-ul dvs. web, puteți utiliza fragmente de cod HTML pentru a permite acest lucru. Aceste elemente vor permite utilizatorilor să sublinieze cuvinte cheie, să integreze link-uri și să formateze comentariile în funcție de restricțiile pe care le puneți în calitate de moderator.
• Creați conținut suplimentar pentru e-mail. E-mailul folosește, de asemenea, HTML ca limbaj pentru mesajele cu text bogat, care prezintă linkuri, text și o varietate de alte elemente care nu pot fi prezentate doar în text simplu. Astfel, dacă doriți să partajați un ebook care are legătură cu site-ul dvs. web prin e-mail, puteți utiliza HTML pentru a optimiza impactul mesajului dvs.
• Înțelegeți documentele de ajutor offline care sunt instalate pe computerul dvs. Este interesant faptul că HTML este utilizat ca format pentru documentele de ajutor pe calculator care sunt accesibile offline. Cunoștințele de bază de HTML vă pot ajuta, prin urmare, să înțelegeți problemele cu hardware-ul dvs. și să le rezolvați mai repede, ceea ce, la rândul său, vă poate asigura că vă puteți restabili mai repede site-ul dvs. web în cazurile în care acesta a devenit offline.

Structura paginii HTML

Înainte de a putea construi o pagină html, aveți nevoie de elementele de bază la locul lor.

În mod obișnuit, o pagină va fi alcătuită din trei elemente structurale:

1. Header: Antetul conține conținut relevant pentru toate paginile de pe site-ul dumneavoastră, cum ar fi un logo sau numele site-ului și un sistem de navigare. Antetul este văzut pe fiecare pagină.
3. Corpul principal: Acesta ocupă cea mai mare suprafață de pe o pagină web. Acesta conține conținut specific paginii care este vizualizată.
4. Footer: Conținutul subsolului include, de obicei, informații de contact, o adresă de expediere sau anunțuri legale. La fel ca și antetul, footer-ul apare pe fiecare pagină, dar este poziționat în partea de jos.

Iată cum arată aceste elemente structurale de bază atunci când sunt reunite:

Iată un alt exemplu, în care se folosesc etichetele de antet și eticheta paragraf pentru a structura conținutul din punct de vedere estetic. În plus, am adăugat o etichetă footer pentru conținutul de sub corpul principal al unei pagini:

Blapsuri HTML

Punctul de plecare pentru orice cod HTML sunt tagurile individuale, care pot fi folosite pentru a crea toate elementele esențiale și care ajută la structurarea paginilor web.

În cele ce urmează, vom arunca o privire asupra celor mai comune tag-uri înainte de a explora modul în care acestea pot fi valorificate pentru a genera elemente specifice, pe pagină:

Tag-uri de antet

Toate documentele online, inclusiv paginile web, încep cu un titlu. Acestea sunt construite cu ajutorul etichetelor HTML, limbajul permițând în prezent până la șase elemente de dimensiuni variabile, care vă permit, de asemenea, să vă structurați conținutul cu titluri suplimentare, subtitluri și linii de text evidențiate cu bold. Pentru a vă începe titlul, pur și simplu prefixați textul relevant cu tag-ul <h1> , <h2> , <h3> , <h4> , <h5> sau <h6> în funcție de dimensiunea dorită.

Trebuie să aplicați apoi o etichetă de închidere la sfârșitul titlului pentru a încapsula textul, iar acesta va fi afișat după cum urmează în format HTML:

După confirmare, acest lucru se va traduce în următoarea estetică pe pagina de destinație a site-ului dumneavoastră:

Aceasta este rubrica 2

Aceasta este rubrica 3

Aceasta este rubrica 4

Aceasta este rubrica 5

Aceasta este rubrica 6

Aici, diferitele dimensiuni ale rubricilor variabile sunt clar vizibile, la fel ca și faptul că browserul adaugă o linie înainte și după rubrică. Veți observa, de asemenea, că eticheta de închidere de la sfârșitul textului titlului are o estetică ușor diferită, dar vom aborda acest aspect în capitolul următor, când vom căuta să folosim etichete pentru a defini elemente specifice.

Etichete de paragraf

Un principiu similar se aplică etichetelor de început de paragraf, care sunt reprezentate de <p>. Acest lucru vă permite să vă structurați conținutul și să îl împărțiți în paragrafe relevante, ceea ce, la rândul său, se traduce printr-o experiență de lectură mai ușoară și mai transparentă. Încă o dată, tag-ul <p> trebuie plasat la începutul textului relevant, înainte de a se aplica tag-ul alternativ de închidere la sfârșit pentru a completa efectul. Spre deosebire de etichetele de titlu, însă, nu există diverse numerice care pot modifica dimensiunea textului prezentat în paragraf.

În afara formatului HTML, acest lucru va împărți textul după cum urmează pe pagina dumneavoastră web finalizată:

Blaiere de întrerupere a liniei

Primile exemple reprezintă cele mai de bază etichete HTML, dar există și altele care utilizează un format diferit și luări de închidere alternative. Să luăm, de exemplu, pauzele de linie, care creează o distincție la care liniile de text sunt întrerupte și continuate pe linia următoare. Există o diferență esențială între pauzele de linie și paragrafe în domeniul HTML, deoarece, în timp ce acestea din urmă sunt elemente de bloc standard care conțin text, primele creează o separare în cadrul unui element <p> existent.

Din acest motiv, pauzele de linie reprezintă un element gol în HTML și, prin urmare, nu sunt definite nici de tag-uri de deschidere, nici de închidere. În schimb, ele sunt reprezentate de eticheta <br />, care poate fi inserată în elementele <p> existente pentru a întrerupe textul și pentru a evidenția, eventual, informații importante. Spațiul unic dintre caracterul <be> și bara oblică este crucial, deoarece, în caz contrar, eticheta nu este recunoscută în format HTML.

După ce va fi aplicat, acesta va rupe textul după cum urmează:

După cum vedeți, puteți aplica pauze de linie ori de câte ori doriți în cadrul unui element de paragraf existent, atâta timp cât acestea adaugă valoare și fac ca informația să fie mai ușor de digerat. Veți vedea, de asemenea, că etichetele de deschidere și de închidere a paragrafului rămân neschimbate, etichetele de întrerupere de linie fiind folosite pentru a modifica aspectul textului inclus în ele.

Acesta este unul dintre exemplele modului în care etichetele HTML pot fi folosite pentru a modifica elementele existente, ceea ce joacă un rol cheie în definirea aspectului vizual al paginilor și conținutului dvs. web.

Lini orizontale

În mod similar, există și alte etichete care pot fi utilizate în cadrul elementului <p> sau pentru a separa mai departe corpurile de text din pagina dumneavoastră web. Una dintre cele mai utilizate este eticheta <hr>, care ajută la crearea unui element gol care trasează o linie vizuală, orizontală, între secțiunile alternative ale unui document online. Este posibil să doriți să poziționați o linie între două corpuri de text, de exemplu, pentru a reorienta cititorul sau pur și simplu pentru a introduce un nou element vizual. Iată cum creați o astfel de pauză în HTML:

Aici, întreruperea dintre caracterele hr și slash-ul înainte evidențiază construcția unui element gol, în timp ce, încă o dată, nu este necesară o etichetă de închidere pentru a finaliza efectul. Acest lucru va crea următoarea imagine:

Etichete de imagine

Etichetele de imagine reprezintă, de asemenea, elemente goale în HTML, ceea ce înseamnă, încă o dată, că ele nu prezintă o etichetă de închidere. Deoarece conțin doar atribute care se referă la URL-ul imaginii pe care o încorporați pe site, ele sunt definite pur și simplu prin tag-ul <img > de la începutul elementului. Acestea pot fi plasate oriunde pe site-ul dumneavoastră, deși este neobișnuit să le includeți în elemente existente, cum ar fi paragrafele sau titlurile. Iată cum se va prezenta o etichetă HTML tipică de imagine:

<img src=”url” alt=”some_text” style=”width:width;height:height;”>

De asemenea, ar trebui să furnizați un text alternativ pentru imagine, care să ajute oamenii să o vizualizeze în cazul unor timpi de încărcare lenți sau al utilizării unui cititor de ecran. Astfel, în cazul în care browserul nu poate găsi o imagine, acesta va afișa valoarea atributului alternativ pentru spectatori. Aceasta folosește din nou tag-ul imagine, dar include un set diferit de atribute:

Elemente HTML

Anterior, am analizat modul în care tag-urile HTML simple sunt utilizate pentru a defini elementele de pe pagină, explorând în același timp modul în care acestea pot fi personalizate în continuare prin utilizarea elementelor goale care conțin tag-uri de imagine și de întrerupere de linie. Acest lucru ne ajută să înțelegem relația care există între etichete și elemente și modul în care acestea pot fi utilizate pentru a defini diferite tipuri de conținut pe site-ul dumneavoastră.

În timp ce toate aspectele limbajului HTML sunt reprezentate de o etichetă, de exemplu, un element definit care include conținut trebuie să aibă atât o etichetă de început, cât și una de sfârșit. Așadar, titlurile și paragrafele sunt elemente HTML deoarece folosesc etichete de început și de sfârșit pentru a încapsula și spori textul relevant. În schimb, elementele goale fie conțin atribute, fie nu au nici un conținut, ceea ce le permite să fie utilizate în cadrul elementelor existente fără a fi nevoie de o etichetă de închidere.

Definirea elementelor HTML

Când se folosesc exemple precum titlurile și paragrafele, aplicarea corectă a etichetelor de început și de sfârșit este crucială. Eticheta de început (cum ar fi <h1> sau <p>) este cea care definește elementul în cauză, de exemplu, în timp ce eticheta de închidere asigură faptul că acest element nu este continuat în restul paginii web. Dacă nu utilizați eticheta de închidere </ p> la sfârșitul unui paragraf dorit, de exemplu, textul va apărea într-un singur bloc inestetic și extrem de greu de citit.

Toate etichetele de închidere sunt identice cu etichetele de început, în afară de faptul că primele prezintă o bară oblică înainte de caracterele respective. Astfel, în cazul unui titlu <h1>, eticheta de închidere va fi </ h1> , în timp ce pentru paragrafe veți folosi întotdeauna </ p> pentru a defini întreruperea în text. Acest lucru necesită atenție la detalii în timpul codificării și este important să rețineți, atunci când programați titluri, că numărul pe care îl utilizați (cum ar fi h1 sau h2) se aplică atât în tag-ul de început, cât și în cel de închidere.

Utilizarea elementelor HTML imbricate

În acest stadiu, este clar că documentele HTML și paginile web sunt formate dintr-un arbore de diverse elemente, care servesc ca blocuri de construcție pentru o serie de active. Am analizat, de asemenea, modul în care aceste elemente pot fi formate și utilizate pentru a structura conținutul online, iar acum vom continua acest lucru analizând elementele HTML imbricate.

La fel cum elementele goale și etichetele de sine stătătoare (cum ar fi <br / >pot fi încorporate în elemente HTML definite, așa-numitele elemente imbricate pot fi, de asemenea, găzduite în cadrul conținutului, cum ar fi titlurile și paragrafele. Acestea includ exemple precum litere bold și italice și text subliniat, în timp ce pot fi aplicate pentru a adăuga personalitate conținutului dvs. și pentru a atrage privirea cititorului către anumite puncte de interes.

Text bold, italic și strikethrough în HTML

Să spunem că doriți să evidențiați un cuvânt în cadrul unui element de paragraf existent. Puteți realiza acest lucru făcându-l bold, folosind tag-uri simple în cadrul elementului standard <p>. Folosind HTML, veți programa acest lucru după cum urmează:

<p>Vreau ca <b>acest</b> cuvânt să fie bold. </p>

Aici, elementul imbricat are atât o etichetă de început cât și una de sfârșit, fiecare dintre acestea urmând un format similar cu cele asociate titlurilor și paragrafelor. Acestea pot fi utilizate fără probleme în cadrul elementelor existente, iar în acest caz, va produce următoarele rezultate:

Acum, să spunem că doriți, de asemenea, să schimbați tipografia acestui cuvânt astfel încât să fie și italic. Acest lucru poate fi realizat pur și simplu prin adăugarea unui alt element imbricate, care ar trebui să fie codificat astfel:

<p>Vreau ca <b><i>acest</b></i> cuvânt să fie bold.</ p>

După cum vedeți, etichetele italice de început și de sfârșit au fost pur și simplu încorporate în elementul <p>. Acest lucru va transforma acum conținutul din cadrul elementului astfel încât să apară după cum urmează:

Desigur, puteți decide că ați prefera să evidențiați acest cuvânt într-un mod diferit. Prin urmare, puteți utiliza un element imbricați alternativ, cum ar fi strikethrough (care este reprezentat de tag-urile <s> și </s>. Aceste tag-uri pot fi aplicate în același mod în cadrul elementului <p>, apărând astfel în HTML:

În acest caz, textul va apărea după cum urmează în documentul sau pe pagina dvs. de destinație:

Acest lucru oferă o perspectivă asupra elementelor care pot fi formate de tag-uri, care, la rândul lor, definesc structura paginilor dvs. web și conținutul pe care acestea îl prezintă. Nu numai atât, dar elementele goale și cele imbricate pot fi, de asemenea, folosite pentru a vă defini și mai bine conținutul.

Atributele HTML

Dacă tag-urile sunt blocurile de construcție care construiesc și definesc elementele, atunci atributele HTML pot fi folosite pentru a le personaliza caracteristicile (cum ar fi stilul, culoarea și limba. Toate elementele HTML au atribute de bază, care furnizează informații de bază și care sunt întotdeauna specificate în cadrul tag-ului stat. Acestea tind să vină în perechi, astfel încât vor apărea adesea în următorul format: name=”value.”

În termeni simpli, numele reprezintă proprietatea pe care doriți să o setați, în timp ce valoarea se referă la criteriile specifice pe care doriți să le încorporați.

Există un număr mare de atribute care pot fi aplicate elementelor HTML, dar cele care sunt cele mai relevante pentru webmasterii începători sunt:

Atributul ‘lang’

Atributul cel mai de bază definește limba documentului și a elementelor sale. Aceasta este declarată cu ajutorul atributului ‘lang’ și, deși este ușor de trecut cu vederea, are avantajul de a face conținutul mai accesibil cititorilor de ecran și motoarelor de căutare. De obicei, va fi prezentat la începutul documentului în următorul format:

<html lang=”en-US” >

După atributul „lang”, primele două litere specifică limba (care este engleza în acest caz). După cratimă, următoarele două litere stabilesc dialectul, deși acesta nu va fi prezent pentru fiecare limbă. Este important să obțineți acest atribut corect dacă doriți să ajungeți cu succes la publicul dumneavoastră.

Atributul „align”

Am abordat deja formatul atributelor HTML (name=”value”), iar cea mai bună întruchipare a acestuia are loc atunci când încercați să aliniați conținutul din elementele dumneavoastră. Puteți decide să centrați toate paragrafele de pe o anumită pagină, de exemplu, alinierea fiind proprietatea pe care doriți să o setați. Ulterior, „center” este valoarea atributului, deși aveți posibilitatea de a alege să vă aliniați textul la stânga sau la dreapta.

Aceasta va alinia elementele <p> în centrul paginii și va crea o dispunere uniformă care să se potrivească cu natura specifică a site-ului dumneavoastră (a se vedea mai jos):

Atributul ‘href’

Dacă aveți de gând să construiți un site web vizibil, este important să încorporați atât link-uri de intrare, cât și de ieșire. Construirea unui portofoliu de legături care să includă backlink-uri către pagini de destinație interne este, de asemenea, o strategie viabilă, așa că va trebui să învățați cum să le codificați în HTML.

Legăturile HTML sunt definite cu eticheta <a>, care include link-ul de destinație împreună cu textul de ancorare afiliat care va găzdui URL-ul. Atributul ‘href ‘ este cel care specifică adresa site-ului, însă acesta este încorporat ca parte a tag-ului start. Acesta este codificat în HTML după cum urmează:

Acest lucru evidențiază în mod clar distincția dintre tag-ul de început și cel de sfârșit și se va traduce după cum urmează pe pagina dvs. de destinație:

Atributul „color”

Este un alt atribut important, deoarece utilizarea culorilor poate da viață site-ului dvs. web, ajutând în același timp la crearea unor contraste importante și a unei estetici puternice a designului. În HTML, o culoare poate fi specificată prin utilizarea numelui său, deși este, de asemenea, posibil să se utilizeze o valoare RGB sau HEX pentru a atinge acest scop. Cu toate acestea, prima opțiune este cea mai ușor de urmat, în timp ce poate fi aplicată și titlurilor, paragrafelor și altor elemente din pagina dumneavoastră.

Este un atribut de stil, culoarea aleasă de dumneavoastră reprezentând valoarea pe care doriți să o stabiliți. Atunci când se aplică culoarea roșie la titlul principal, de exemplu, va arăta astfel:

După ce va fi aplicat, acest element va apărea după cum urmează pe site-ul dumneavoastră:

Încă o dată, există o distincție clară între tag-urile de început și de sfârșit care definesc elementul, în timp ce acesta este unul dintre cele mai ușor de aplicat atribute în HTML. De asemenea, evidențiază și mai mult formatul name=”value al atributelor HTML, ceea ce face ca procesul de învățare și de aplicare a acestora să fie mult mai ușor pe întregul site web.