5 pași pentru a înțelege codul HTML de bază

5 pași pentru a înțelege codul HTML de bază

HTML este o parte vitală a web-ului așa cum îl cunoaștem. Și în timp ce puțini designeri web creează pagini tastând manual HTML, este totuși la îndemână să știți puțin despre el.





Vom analiza câteva elemente de bază ale limbajului, inclusiv ce este cu adevărat HTML, câteva concepte fundamentale și cum interacționează cu alte limbi. Gândiți-vă la acest lucru ca la un curs accidental „HTML pentru manechine”.



Noțiuni de bază HTML: Ce este HTML?

HTML înseamnă Limbaj de marcare hipertext . Și, deși este uneori combinat cu limbaje de programare, acest lucru nu este corect.





Ca limbaj de marcare , HTML vă permite doar să creați aspectul afișării paginilor. Un adevar limbaj de programare , cum ar fi Java sau C ++, conține logică și comenzi care sunt efectuate.

Deși este simplu, HTML este coloana vertebrală a fiecărei pagini de pe web. Este responsabil pentru textul care apare ca îndrăzneț, adăugând imagini și conectând la alte pagini. Avem un FAQ HTML care explică mai multe.



Puteți face clic dreapta pe majoritatea paginilor web din browser și alegeți Vezi sursa paginii sau similar pentru a vedea codul HTML din spatele lor. Acest lucru va conține, de asemenea, o mulțime de cod care nu este HTML, dar puteți trece prin asta.

Chiar dacă nu aveți experiență zero cu limbaje de marcare sau de programare, învățarea puțin despre HTML vă va face un utilizator web mai informat. Să parcurgem cinci pași de bază pentru a vă ajuta să înțelegeți cum funcționează HTML. Vă vom oferi exemple pe parcurs.



Pasul 1: Înțelegerea conceptului de etichete

HTML folosește un sistem de Etichete pentru a clasifica diferite elemente ale documentului.

Majoritatea etichetelor vin în perechi pentru a înfășura textul afectat în interiorul lor. Iată un exemplu simplu (



eticheta face text îndrăzneţ ; vom discuta acest lucru mai mult într-o clipă.)

This is some bold text .

Observați cum începe eticheta de închidere cu o bară (/). Aceasta înseamnă o etichetă de închidere, ceea ce este important. Dacă nu închideți o etichetă, totul de la început va avea acel atribut.

cum să anulați o plată venmo

Cu toate acestea, nu toate etichetele au o pereche. Unele elemente HTML, numite elemente goale , nu au conținut și există pe cont propriu. Un exemplu este


tag, care este o întrerupere de linie. Puteți „închide” astfel de etichete adăugând o bară (cum ar fi


) dar nu este strict necesar.

Pasul 2: Aspectul scheletului HTML

Un document HTML adecvat trebuie să aibă anumite etichete definite, astfel încât să fie așezate corect. Acestea sunt părțile esențiale:

  • Fiecare document HTML trebuie să înceapă cu să se declare ca atare. Astfel, eticheta sa de închidere, , este ultimul element dintr-un fișier HTML.
  • Apoi, secțiunea include informații precum titlul paginii, diverse scripturi care rulează pe pagină și altele similare. După cum sugerează și numele, acest lucru apare de obicei imediat după inițială etichetă. Utilizatorul final nu vede mare parte din conținutul din aceste etichete.
  • În cele din urmă, | | + _ | eticheta conține textul paginii pe care cititorul o vede (plus multe altele). Aici veți găsi imagini, linkuri și multe altele.

Din moment ce

secțiunea reprezintă cea mai mare parte a unui document HTML, restul pasajului nostru analizează elementele care îi aparțin.

Pasul 3: Etichete HTML de bază pentru formatare

În continuare, să analizăm câteva etichete uzuale care alcătuiesc documente HTML. Desigur, nu este posibil să acoperim fiecare element, așa că vom trece în revistă unele dintre cele mai importante. Am acoperit multe alte exemple HTML dacă acestea nu te satisfac.

Dacă aceste etichete par destul de simple, amintiți-vă că HTML a fost creat până în 1993.

Formatare simplă a textului

HTML acceptă stiluri de text de bază, cum ar fi în Microsoft Word:

  • etichetele fac text îndrăzneţ .
  • etichetele (care înseamnă „accent”) vor cursiva text.

HTML acceptă și cele mai vechi

eticheta pentru bold și

pentru cursiv. Cu toate acestea, este de preferat să le folosiți pe cele de mai sus.

În scurt,

și

arată cum ar trebui înțeles ceva, în timp ce etichetele din urmă vă spun doar cum ar trebui să arate. Aceste foste etichete sunt mai accesibile pentru cititoarele de ecran utilizate de persoanele cu deficiențe de vedere.

Paragraf și alte divizii

HTML-uri

tag vă permite să definiți o secțiune a documentului. De obicei, acest lucru este asociat cu CSS (a se vedea mai jos) pentru a formata o secțiune într-un anumit mod.

The

tag vă permite să împărțiți textul în paragrafe. Browserele vor pune automat un spațiu înainte și după acestea, permițându-vă să separați în mod natural textul.

Puteți adăuga anteturi la documentul dvs. și puteți face mai ușor de urmărit folosind

prin

Etichete. H1 este cel mai important antet, în timp ce H6 este cel mai puțin important. Aproape fiecare articol MakeUseOf folosește anteturile H2 și H3 pentru a organiza informații.

Lovind introduce pentru a adăuga întreruperi de linie în documentul HTML nu le va afișa de fapt. În schimb, puteți utiliza

pentru a adăuga o întrerupere de linie.



Iată un exemplu care folosește toate acestea:


Pasul 4: inserarea imaginilor

Imaginile sunt o parte vitală a majorității paginilor web. Le puteți adăuga cu ușurință cu HTML și chiar le puteți seta diferite proprietăți.

Introduceți o imagine folosind


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



etichetă. Combinând acest lucru cu

cum se convertește o carte kindle în pdf

atributul vă permite să specificați de unde doriți să se încarce imaginea.

Un alt atribut important al

src

tag-uri este

. Textul alternativ vă permite să descrieți imaginea pentru cititoarele de ecran sau în cazul în care imaginea nu se încarcă corect. Puteți trece cu mouse-ul peste o imagine pentru a vedea textul alternativ al acesteia.

Folosește

alt

și

width

elemente pentru a specifica numărul de pixeli la care apare imaginea.

Puneți totul împreună și o etichetă de imagine arată astfel:

height

World Wide Web nu ar fi mult un web fără linkuri către alte pagini. Folosind

Dr. Phil

tag, puteți face link către alte pagini din orice text.

În interiorul

eticheta,

atributul spune unde faceți legătura. Pur și simplu lipiți adresa URL va funcționa bine. Puteți utiliza

href

element pentru a adăuga un pic de text care apare atunci când cineva trece peste link.

Un link de bază arată astfel:

title

The

Visit Google

eticheta are multe alte elemente posibile, dar nu ne vom scufunda în ele aici.

Cum se conectează HTML cu CSS și JavaScript

Am analizat elementele de bază ale HTML și modul în care acesta creează o pagină web. Dar, după cum vă puteți imagina, HTML singur nu îl reduce pentru web-ul modern. Paginile web HTML simple erau obișnuite în zilele „Web 1.0”, când majoritatea site-urilor web nu erau altceva decât text static.

Dar acum, avem mult mai multe. CSS (Cascading Style Sheets) este un limbaj folosit pentru a descrie cum ar trebui să arate textul pe care l-ați pregătit în HTML. Amintiți-vă

eticheta pe care am discutat-o? În interiorul acestui (și al altor etichete), puteți defini un

atribut. Apoi, în documentul dvs. CSS însoțitor, puteți scrie instrucțiuni despre modul în care

class

ar trebui să arate.

Puteți defini aceste elemente de stil în linie în codul dvs. HTML, dar aceasta este considerată o practică slabă, deoarece este mult mai dificil de întreținut. Aflați mai multe cu aceste exemple simple CSS . De asemenea, verificați cum să vă optimizați fișierele CSS .

JavaScript

Am văzut că HTML definește conținutul și CSS determină aspectul. JavaScript, ultimul membru al trio-ului vital pentru web, permite paginilor web să răspundă la acțiunile oamenilor fără a încărca de fiecare dată o pagină nouă.

De exemplu, JavaScript permite unui site web să vă avertizeze că parola pe care ați introdus-o nu îndeplinește cerințele sale înainte de a încerca să o trimiteți. Un designer web ar putea folosi JavaScript pentru a parcurge imaginile dintr-o prezentare de diapozitive sau poate solicita utilizatorului să introducă date.

Acestea sunt doar câteva exemple elementare. JavaScript este un limbaj de scriptare capabil să facă multe lucruri și este comparativ mult mai complicat decât HTML și CSS. Vedea prezentarea noastră generală despre JavaScript pentru mult mai mult.

Privirea asupra domeniului complet de proiectare web depășește domeniul de aplicare al acestui articol, dar este suficient să spunem că HTML interacționează cu alte limbi pentru a crea paginile web pe care le cunoaștem astăzi.

Evoluția HTML

Este important să rețineți că HTML nu este static. HTML a trecut prin mai multe revizuiri, cea mai recentă fiind HTML 5. În special, acest standard acceptă încorporarea video nativă în loc să se bazeze pe formate proprietare precum Adobe Flash.

Noile iterații de HTML declară, de asemenea, anumite etichete arhaice ca fiind depreciate din când în când. Acestea includ etichete îngrozitoare, cum ar fi

class

și

(respectiv textul de defilare și respectiv flash) văzut în mod obișnuit în proiectarea site-ului web din anii 1990. Așadar, rețineți că standardele se schimbă în timp.

O mică cunoaștere HTML merge mult

Am făcut un scurt tur al modului în care funcționează un document HTML. Acum știți elementele fundamentale ale modului în care sunt structurate paginile web. Chiar dacă nu continuați să creați pagini web, sunteți puțin mai conștienți de web-ul pe care îl utilizați în fiecare zi.

cum să-ți dai seama ce placă de bază ai

Pentru a afla mai multe, actualizați-vă abilitățile de dezvoltare web cu instrumente esențiale și apoi verificați ghidul nostru cu privire la modul de proiectare a primului dvs. site web .

Credit de imagine: Belyaevskiy / Depositphotos

Acțiune Acțiune Tweet E-mail 5 sfaturi pentru a vă supraîncărca mașinile VirtualBox Linux

V-ați săturat de slaba performanță oferită de mașinile virtuale? Iată ce ar trebui să faceți pentru a vă spori performanța VirtualBox.

Citiți în continuare Subiecte asemănătoare
  • Programare
  • HTML
  • Dezvoltare web
  • JavaScript
  • Instrumente pentru webmasteri
  • Programare
  • HTML5
Despre autor Ben Stegner(1735 articole publicate)

Ben este redactor adjunct și manager Onboarding la MakeUseOf. Și-a părăsit serviciul IT pentru a scrie cu normă întreagă în 2016 și nu s-a uitat niciodată înapoi. De mai bine de șapte ani acoperă tutoriale tehnologice, recomandări de jocuri video și multe altele ca scriitor profesionist.

Mai multe de la Ben Stegner

Aboneaza-te la newsletter-ul nostru

Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

Faceți clic aici pentru a vă abona