Bazele html pentru începători într-un limbaj ușor de înțeles. HTML: Noțiuni de bază pentru începători Programarea HTML pentru începători

HTML înseamnă H yper Text M arkup Language, adică. Hypertext Markup Language este elementul de bază al paginilor web, folosit pentru a crea și prezenta vizual pagini web.

HTML adaugă markup textului simplu. Hipertextul conține diverse link-uri prin care paginile web sunt conectate între ele. CU folosind HTML Oricine poate crea atât site-uri statice, cât și dinamice. HTML este un limbaj care descrie structura și semantica conținutului unui document web. Conținutul unei pagini web este marcat cu ajutorul etichetelor, care reprezintă elemente HTML. Exemple de astfel de elemente sunt: , și așa mai departe. Aceste elemente formează elementele de bază ale oricărui site web.

HTML a fost inventat în 1991 de omul de știință Tim Berners-Lee și a fost inițial destinat schimbului de documente între oamenii de știință de la diferite universități. Cu invenția sa, Tim Burns-Lee a pus bazele rețea modernă Internet.

Există mai multe versiuni de HTML. Standardul lingvistic este actualizat și completat continuu, drept urmare este publicat aproape în fiecare an noua versiune HTML. Versiunea „HTML 2.0” a fost prima specificație standard HTML, care a fost publicată în 1995. HTML 4.01 este versiunea majoră a HTML care a fost publicată la sfârșitul anului 1999 și este utilizat pe scară largă astăzi. Astăzi, cea mai populară versiune este HTML-5, care este o extensie a HTML 4.01, publicată în 2012.

Un document HTML sau o pagină web este un document text simplu care conține etichete (care, la rândul lor, sunt text simplu cuprins între paranteze unghiulare). Pagina web poate fi tastată ca de obicei editor de text(Notepad, WordPad, Word etc.), iar într-unul de specialitate, cu evidențierea codului (Notepad++, Sublime Text etc.). Documente HTML sunt stocate ca fișiere cu extensia .htm sau .html.

Exemple online în fiecare lecție

Pe măsură ce prezentăm materialul, fiecare lecție va oferi exemple care vă vor ajuta să înțelegeți fiecare cod în detaliu și, prin practică, să vă bucurați de învățare. Cu editorul nostru HTML online, puteți edita un document HTML și apoi faceți clic pe butonul portocaliu „Run” din editor, care se află deasupra ferestrei editorului din stânga pentru a vedea rezultatul. Dacă utilizați un editor HTML specializat, atunci puteți copia exemplul și vizualiza rezultatele muncii dvs. în browserul instalat pe computer.

Exemplu HTML: Încercați singur


Titlul paginii

Acesta este titlul

Acesta este un paragraf.



Exemple HTML online

Tutorialul HTML vă oferă peste 100 de exemple online care vă vor ajuta să stăpâniți cu ușurință limbajul de marcare. E mai bine să vezi o dată decât să auzi de o sută de ori! Teoria plus practica este cheia succesului tău în stăpânirea HTML-ului.

Noțiuni de bază HTML conține regulile de bază ale limbajului HTML, o descriere a structurii unei pagini HTML și relațiile din structura unui document HTML între elementele HTML.

Un document HTML este un document text obișnuit care poate fi creat fie într-un editor de text obișnuit (Notepad), fie într-unul specializat cu evidențierea codului (Notepad++, Visual Studio Cod etc.). Un document HTML are extensia .html.

Un document HTML constă dintr-un arbore de elemente HTML și text. Fiecare element este identificat în documentul sursă printr-o etichetă de început (deschidere) și de sfârșit (închidere) (cu rare excepții).

Eticheta de început arată unde începe elementul, eticheta de final arată unde se termină. Eticheta de închidere se formează prin adăugarea unei bare oblice / înainte de numele etichetei: .... Între etichetele de început și cele de închidere se află conținutul etichetei - conținutul.

Etichetele individuale nu pot stoca direct conținutul; este scrisă ca valoare de atribut, de exemplu, o etichetă va crea un buton cu textul Button în interior.

Etichetele pot fi imbricate una în alta, de exemplu,

Text

. Când investiți, ar trebui să urmați ordinea în care sunt închise (principiul „matryoshka”), de exemplu, următoarea intrare va fi incorectă:

Text

.

Elementele HTML pot avea atribute (globale, aplicate tuturor elementelor HTML și propriile lor). Atributele sunt scrise în eticheta de deschidere a elementului și conțin un nume și o valoare, specificate în formatul atribut name="value" . Atributele vă permit să modificați proprietățile și comportamentul elementului pentru care sunt setate.

Fiecărui element i se pot atribui mai multe valori de clasă și o singură valoare de id. Mai multe valori de clasă sunt scrise separate printr-un spațiu, . Valorile de clasă și id-ul trebuie să fie compuse numai din litere, cifre, cratime și caractere de subliniere și trebuie să înceapă doar cu litere sau cifre.

Browserul vizualizează (interpretează) documentul HTML, construindu-i structura (DOM) și afișându-l în conformitate cu instrucțiunile incluse în acest fișier (fișe de stil, scripturi). Dacă marcajul este corect, fereastra browserului va afișa o pagină HTML care conține elemente HTML - anteturi, tabele, imagini etc.

Procesul de interpretare (parsare) începe înainte ca pagina web să fie complet încărcată în browser. Browserele procesează documentele HTML secvenţial, de la început, în timp ce procesează CSS şi relaţionează foile de stil cu elementele paginii.

Un document HTML este format din două secțiuni - antetul - între etichete ... și partea de conținut - între etichete ....

Structura paginii web 1. Structura documentului HTML

HTML urmează regulile conținute în fișierul de declarare a tipului de document (Definiția tipului de document sau DTD). Un DTD este un document XML care definește ce etichete, atribute și valorile acestora sunt valabile pentru un anumit tip HTML. Fiecare versiune de HTML are propriul DTD.

DOCTYPE este responsabil pentru afișarea corectă a unei pagini web de către browser. DOCTYPE definește nu numai Versiunea HTML(ex. html), dar și fișierul DTD corespunzător de pe Internet.

...

Elementele din interiorul etichetei formează un arbore de document, așa-numitul model de obiect de document, DOM ( obiect document model). În acest caz, elementul este elementul rădăcină.


Orez. 1. Cea mai simplă structură a unei pagini web

Pentru a înțelege interacțiunea elementelor paginii web, este necesar să se ia în considerare așa-numitele „relații de familie” dintre elemente. Relațiile dintre mai multe elemente imbricate sunt clasificate ca părinte, copil și soră.

Un strămoș este un element care conține alte elemente. În figura 1, strămoșul pentru toate elementele este . În același timp, elementul este strămoșul tuturor etichetelor pe care le conține: ,

.

Un descendent este un element situat într-unul sau mai multe tipuri de elemente. De exemplu, este un descendent al , și elementul

Este un descendent al ambelor și .

Element părinte - un element care este legat de alte elemente prin mai multe nivel scăzut, și situat pe copacul deasupra lor. În figura 1 și . Etichetă

Este părinte numai pentru .

Element copil - un element care este direct subordonat unui alt element mai mult nivel înalt. În figura 1 există doar elemente , ,

Și sunt copii ai .

Un element soră este un element care are un element părinte comun cu cel în cauză, așa-numitele elemente de același nivel. În figura 1 și sunt elemente de același nivel, precum și elemente , și

Sunt surori una cu cealaltă.

1.1. Elementul 1.2. Element

Secțiunea... conține informatii tehnice despre pagină: titlu, descriere, cuvinte cheie pentru motoarele de căutare, codificare etc. Informațiile pe care le introduceți acolo nu sunt afișate în fereastra browserului, dar conțin informații care îi spun browserului cum să proceseze pagina.

1.2.1. Element

Eticheta de secțiune necesară este . Textul plasat în interiorul acestei etichete apare în bara de titlu a browserului web. Titlul nu trebuie să aibă mai mult de 60 de caractere pentru a se încadra complet în titlu. Textul titlului trebuie să conțină cât mai mult posibil descriere completă continutul paginii web.

1.2.2. Element

O etichetă de secțiune opțională este o singură etichetă. Cu ajutorul acestuia, puteți seta o descriere a conținutului paginii și a cuvintelor cheie pentru motoarele de căutare, autorul documentului HTML și alte proprietăți ale metadatelor. Un element poate conține mai multe elemente, deoarece poartă informații diferite în funcție de atributele utilizate.

Descrierea conținutului paginii și a cuvintelor cheie pot fi specificate simultan în mai multe limbi, de exemplu, în rusă și engleză:

Folosind o etichetă, puteți bloca sau permite indexarea unei pagini web de către motoarele de căutare:

Pentru repornire automată pagină după o anumită perioadă de timp, trebuie să utilizați valoarea de reîmprospătare:

Pagina va fi reîncărcată după 30 de secunde. Pentru a redirecționa vizitatorul către o altă pagină, trebuie să specificați adresa URL în parametrul URL:

) poate rămâne necotat, dar este recomandat să citați toate valorile atributelor, deoarece face codul mai consistent și mai ușor de înțeles.

Elemente de cuibărit

Puteți pune elemente și în interiorul altor elemente - aceasta se numește imbricare. Dacă am vrea să afirmăm că pisica noastră este foarte morocănoasă, am putea înveli cuvântul „foarte” într-un element, ceea ce înseamnă că cuvântul trebuie subliniat puternic:

Pisica mea este foarte morocănosă.

Cu toate acestea, trebuie să vă asigurați că elementele dvs. sunt imbricate corect. În exemplul de mai sus, am deschis

mai întâi elementul, apoi elementul; prin urmare, trebuie să închidem mai întâi elementul, apoi

element. Următoarele sunt incorecte:

Pisica mea este foarte morocănosă.

Elementele trebuie să se deschidă și să se închidă corect, astfel încât să fie clar unul în interiorul sau în exteriorul celuilalt. Dacă se suprapun așa cum se arată mai sus, atunci dvs browser web va încerca să ghicească cel mai bine ceea ce încercați să spuneți, ceea ce poate duce la rezultate neașteptate. Deci nu o face!

Elemente goale

Unele elemente nu au conținut și sunt numite elemente goale. Luați element pe care îl avem deja în nostru Pagina HTML:

Acesta conține două atribute, dar nu există închidere etichetă și fără conținut interior. Acest lucru se datorează faptului că un element de imagine nu împachetează conținutul pentru a-l afecta. Scopul său este de a încorpora o imagine în pagina HTML în locul în care apare.

Anatomia unui document HTML

Aceasta cuprinde elementele de bază ale elementelor HTML individuale, dar acestea nu sunt la îndemână singure. Acum ne vom uita la modul în care elementele individuale sunt combinate pentru a forma o întreagă pagină HTML. Să revedem codul pe care l-am introdus în exemplul nostru index.html (pe care l-am întâlnit prima dată în articolul Tratarea fișierelor):

Pagina mea de testare

Aici, avem următoarele:

  • - doctype. Este necesar un preambul. În negura vremurilor, când HTML era tânăr (în jurul anilor 1991/92), doctypes erau menite să acționeze ca legături către un set de reguli pe care pagina HTML trebuia să le respecte pentru a fi considerată HTML bun, ceea ce ar putea însemna verificarea automată a erorilor și alte lucruri utile. Cu toate acestea, în zilele noastre, ele nu fac mare lucru și, practic, sunt necesare doar pentru a vă asigura că documentul dumneavoastră se comportă corect. Asta este tot ce trebuie să știți pentru moment.
  • - elementul. Acest element include tot conținutul de pe întreaga pagină și este uneori cunoscut ca element rădăcină.
  • - elementul. Acest element acționează ca un container pentru toate lucrurile pe care doriți să le includeți pe pagina HTML nu este conținutul pe care îl afișați pentru vizitatorii paginii dvs.. Aceasta include lucruri precum cuvinte cheie și o descriere a paginii pe care doriți să apară în rezultatele căutării, CSS pentru a stila conținutul nostru, declarații de seturi de caractere și multe altele.
  • - Acest element stabilește setul de caractere pentru documentul dvs ar trebui să folosească la UTF-8 care include majoritatea caracterelor din marea majoritate a limbilor scrise. În esență, acum poate gestiona orice conținut textual pe care l-ați putea pune pe el. Nu există niciun motiv pentru a nu seta acest lucru și poate ajuta la evitarea unor probleme mai târziu.
  • - elementul. Aceasta setează titlul paginii dvs., care este titlul care apare în fila browser în care este încărcată pagina. De asemenea, este folosit pentru a descrie pagina atunci când o marcați/o favorizați.
  • - elementul. Aceasta contine toate conținutul pe care doriți să îl afișați utilizatorilor web atunci când vă accesează pagina, fie că este text, imagini, videoclipuri, jocuri, melodii audio redate sau orice altceva.
Imagini

După cum am spus mai înainte, încorporează o imagine în pagina noastră în poziția în care apare. Face acest lucru prin atributul src (sursă), care conține calea către fișierul nostru imagine.

Am inclus și un atribut alt (alternativ). În acest atribut, specificați text descriptiv pentru utilizatorii care nu pot vedea imaginea, posibil din următoarele motive:

  • Au deficiențe de vedere. Utilizatorii cu deficiențe de vedere semnificative folosesc adesea instrumente numite cititoare de ecran pentru a le citi textul alternativ.
  • Ceva a mers prost, ceea ce face ca imaginea să nu fie afișată. De exemplu, încercați să schimbați în mod deliberat calea în interiorul atributului dvs. src pentru a o face incorectă. Dacă salvați și reîncărcați pagina, ar trebui să vedeți ceva de genul acesta în locul imaginii:

    • Cuvintele cheie pentru text alternativ sunt „text descriptiv”. Textul alternativ pe care îl scrieți ar trebui să ofere cititorului suficiente informații pentru a avea o idee bună despre ceea ce transmite imaginea. În acest exemplu, textul nostru actual „Imaginea mea de testare” nu este deloc bun. O alternativă mult mai bună pentru logo-ul nostru Firefox ar fi „Sigla Firefox: o vulpe în flăcări care înconjoară Pământul”.

    Încercați să găsiți un text alternativ mai bun pentru imaginea dvs. acum.

    Marcarea textului

    Această secțiune va acoperi câteva dintre elementele HTML esențiale pe care le veți folosi pentru a marca textul.

    Titluri

    Elementele de titlu vă permit să specificați că anumite părți ale conținutului dvs. sunt titluri - sau subtitluri. În același mod în care o carte are titlul principal, titlurile capitolelor și subtitrări, un document HTML poate și el. HTML conține 6 niveluri de titluri, – , deși în mod obișnuit veți folosi cel mult 3 până la 4:

    Titlul meu principal Titlul meu de nivel superior Subtitlul meu Subtitlul meu

    Acum încercați să adăugați un titlu potrivit paginii dvs. HTML chiar deasupra dvs element.

    Notă: Veți vedea că nivelul dvs. de antet 1 are un stil implicit. Nu utilizați elemente de antet pentru a mări sau a face textul aldine, deoarece acestea sunt folosite din motive de accesibilitate și din alte motive precum SEO. Încercați să creați o secvență semnificativă de titluri pe paginile dvs., fără a sări peste niveluri.

    Liste de paragrafe

    O mare parte din conținutul web este format din liste, iar HTML are elemente speciale pentru acestea. Listele de marcare constau întotdeauna din cel puțin 2 elemente. Cele mai comune tipuri de liste sunt liste ordonate și neordonate:

  • Listele neordonate sunt pentru liste în care ordinea articolelor nu contează, cum ar fi o listă de cumpărături
      element.
    • Listele ordonate sunt pentru liste în care ordinea articolelor contează, cum ar fi o rețetă. Acestea sunt învelite într-un element.

      • Dacă rămâneți blocat, puteți oricând să vă comparați munca cu exemplul nostru de cod de pe GitHub.

      Aici, am zgâriat doar suprafața HTML-ului. Pentru a afla mai multe, accesați subiectul nostru.