Meniul
AcasăRețea socială

Care este limbajul html. Tutorial HTML. De ce avem nevoie de HTML acum?

Înainte de a începe să învățăm CSS, să ne amintim pentru ce este de fapt limbajul de marcare hipertext HTML și să decidem cum îl vom folosi în viitor.

Cum a fost folosit HTML înainte de CSS

Scopul principal al HTML (HyperText Markup Language) este de a structura informații pe paginile web. Inițial, acest limbaj a fost inventat tocmai în aceste scopuri. Dar pe măsură ce popularitatea internetului a început să crească, la fel a crescut și dorința utilizatorilor de a-și diversifica și de a decora cumva site-urile.

Designerii web au început să caute modalități de a prezenta informațiile frumos. Unele etichete HTML au fost folosite în alte scopuri decât scopul propus, de ex.

. Metoda de aranjare a documentelor web folosind această etichetă a devenit atât de populară încât a primit chiar și un nume separat - aspect tabelar. Anterior, aceasta era singura modalitate de a poziționa cu precizie elementele pe o pagină.

Cu aspect tabelar, designul paginii web a fost creat direct în documentul HTML. Alte etichete au fost, de asemenea, folosite pentru stilare și formatare. La ce probleme a dus asta? În primul rând, codul HTML a devenit incredibil de mare în lungime, ceea ce a afectat negativ atât greutatea documentului, cât și indexarea acestuia de către roboții de căutare. În al doilea rând, pentru a schimba, de exemplu, culoarea titlurilor h1 de pe fiecare pagină a site-ului, a trebuit să lucrez manual prin fiecare dintre ele. Toate acestea au luat mult timp și efort.

De ce avem nevoie de HTML acum?

Astăzi, datorită existenței CSS, este posibilă separarea designului unei pagini de conținutul acesteia, precum și accelerarea procesului de lucru și reducerea semnificativă a dimensiunii documentului HTML. Cei care creează site-uri web de foarte mult timp vor trebui să scape de vechile obiceiuri și să învețe să perceapă HTML doar ca un limbaj de marcare destinat structurării și organizării datelor. Începătorilor le va fi mai ușor să învețe noi principii de creare a paginilor web din cauza lipsei de vizualizări pe HTML ca instrument pentru a face paginile să arate atractiv. CSS este acum responsabil pentru acest lucru.

Important: Când creați un document HTML, gândiți-vă doar la modul de organizare a conținutului, nu la modul de decorare. Uită de etichetele care nu structurează în niciun fel pagina și schimbă doar designul, pentru că cu CSS vei obține aceleași efecte vizuale, dar în același timp păstrezi codul HTML curat și lipsit de lucruri inutile.

Iată câteva etichete HTML care pot (și ar trebui) să fie înlocuite în siguranță cu stiluri CSS:

  • „decorare”, atribute de aliniere la etichete (culoare, bgcolor, align etc.);
  • etichetă
(atunci când este folosit pentru a configura o pagină web);
  • etichetă .

    • Etichete HTML pentru structurare

    Utilizați următoarele etichete pentru a vă structura paginile:

    H1-H6 (titlu) Etichetele h1-h6 sunt destinate să indice titlurile. Aceste etichete fac foarte convenabil separarea textului. Pentru a înțelege mai bine, imaginați-vă o carte care are capitole și subcapitole. Titlul unui capitol de carte este h1, subcapitolele sunt h2, părțile subcapitolelor sunt h3 etc. Este mai bine să plasați etichetele de titlu secvenţial. P (paragraf) Tag

    Folosit pentru a indica paragrafe de text. OL, UL (listă ordonată, listă neordonată) Etichete

      ,
        – un instrument convenabil pentru marcarea listelor (legături de navigare, puncte din text, listă secvențială etc.). DL (lista de definiții) Tag
        împreună cu etichetele
        ,
        folosit la crearea unei liste de definiții, unde
        – denumirea definiției (termen de definiție),
        – descrierea definiției. DIV (diviziune) DIV este un element bloc care poate fi folosit pentru a evidenția un fragment dintr-un document, precum și pentru a combina logic mai multe elemente. Folosind CSS puteți da un bloc
        aspectul și poziționarea necesare, dar în sine
        nu modifică în niciun fel aspectul documentului. Etichetă SPAN (span). rolul său este similar cu
        . Dar
        este un element bloc și – litere mici. De exemplu, dacă trebuie să schimbați stilul unui cuvânt în interiorul unei etichete

        „Înfășurați” acest cuvânt într-o etichetă , adăugați un id sau un atribut de clasă cu numele selectorului și apoi atribuiți-i stilul necesar în CSS. Etichete semantice HTML5 Pentru a structura mai bine documentul HTML, utilizați etichete noi care vă ajută să descrieți mai bine conținutul. De exemplu, cum să distingem antetul site-ului, meniul de navigare și subsolul de alt conținut dacă toate sunt marcate cu etichete

        ? Etichete HTML5 precum:
        ,
    pentru aspectul documentului.

    Pentru ca browserele să afișeze corect o pagină web, trebuie să utilizați elementulîn prima linie de cod.

    În următorul capitol, ne vom familiariza cu sintaxa CSS și conectarea tabelelor la HTML și, de asemenea, vom scrie primul stil.

    HTML- înseamnă HyperText Markup Language, care este cel mai utilizat limbaj pentru scrierea paginilor web.

    • Hipertext se referă la modul în care sunt legate paginile web (documente HTML). Astfel, un link disponibil pe o pagină web se numește hipertext.
    • După cum sugerează și numele, HTML este un limbaj de marcare, ceea ce înseamnă că utilizați HTML pentru a „marca” pur și simplu un document text cu etichete care spun browserului web cum să-l structureze pentru afișare.

    HTML a fost dezvoltat inițial pentru a defini structura documentelor, cum ar fi titluri, liste, paragrafe și așa mai departe, pentru a facilita schimbul de informații științifice între cercetători.

    HTML este acum utilizat pe scară largă pentru a formata pagini web folosind diverse etichete disponibile în limbajul HTML.

    document HTML

    Următorul exemplu arată un document HTML în cea mai simplă formă:

    Titlul documentului

    Titlu

    Iată conținutul documentului...

    Să salvăm codul într-un fișier HTML document.html folosind editorul de text preferat. Și deschideți fișierul folosind un browser web, cum ar fi Internet Explorer, Google Chrome sau Firefox, etc. Ar trebui să arate următorul rezultat:

    Etichete pentru crearea unui document HTML

    După cum am menționat mai devreme, HTML este un limbaj de marcare și folosește diverse etichete pentru a formata conținutul. Aceste etichete sunt incluse în paranteze unghiulare. Majoritatea etichetelor au etichete de închidere corespunzătoare, cu excepția câtorva etichete. De exemplu, etichetați are o etichetă de închidere și etichetați are o etichetă de închidere si altii.

    Exemplul de mai sus folosește următoarele etichete pentru a crea un document HTML:

    EtichetăDescriere
    Această etichetă specifică tipul documentului și versiunea HTML.
    Această etichetă acoperă întregul document HTML și constă în principal din titlul documentului, care este reprezentat de etichete ... și corpul documentului, care este reprezentat de etichete ... .
    Această etichetă reprezintă titlul documentului, care poate conține alte etichete html, cum ar fi , <link>etc.</td> </tr><tr><td><title> </td><td>Etichetă <b><title> </b> folosit în interiorul unei etichete <head>pentru a preciza titlul documentului.</td> </tr><tr><td><body> </td><td>Această etichetă reprezintă corpul documentului, care stochează alte etichete html, cum ar fi <h1>, <div>, <p>Si altii.</td> </tr><tr><td><h1> </td><td>Această etichetă reprezintă titlul.</td> </tr><tr><td><p> </td><td>Această etichetă reprezintă un paragraf.</td> </tr></table><p>Cunoașterea acestor etichete este suficientă pentru a crea un document HTML (pagina html).</p> <p>Pentru a învăța HTML, trebuie să cunoașteți diferitele etichete și să înțelegeți cum se comportă atunci când formatați un document text. Învățarea HTML este ușor, deoarece utilizatorii trebuie doar să învețe utilizarea diferitelor etichete pentru a formata text sau imagini, creând astfel o pagină web frumoasă.</p> <h2>Structura documentului HTML</h2> <p>Structura unui document HTML tipic va arăta astfel:</p><p>Eticheta de declarare a documentului <html> <head> <title>Etichete asociate cu titlul documentului Etichete asociate cu corpul documentului

    Vom învăța toate etichetele cap și corp în lecțiile ulterioare, acum să vedem ce este o etichetă de declarare a documentului.

    Declaraţie

    Declarație de etichetăutilizat de browserul web pentru a înțelege versiunea de HTML folosită în document. Versiunea actuală de HTML este 5 și folosește următoarea declarație:

    Există multe alte tipuri de declarații care pot fi utilizate într-un document HTML, în funcție de versiunea de HTML folosită. Vom vedea mai multe detalii despre asta atunci când discutăm despre etichetăîmpreună cu alte etichete HTML.

    În acest articol ne vom uita la întrebarea ce este html și ne vom uita la istoria dezvoltării sale. Să vorbim despre cum să creezi un site web și dacă este deloc dificil. Deci, să începem

    1. Cod HTML - ce este în cuvinte simple

    HTML(Engleză: „hiper text markup language” – hypertext markup language) este un limbaj special de marcare care este folosit la crearea site-urilor web pe Internet.

    Browserele înțeleg html-ul perfect și îl pot interpreta într-un mod ușor de înțeles. În general, orice pagină a unui site este un cod html pe care browserul îl traduce într-o formă ușor de utilizat. Apropo, codul oricărei pagini este disponibil pentru toată lumea. Pentru a-l vizualiza, faceți clic dreapta și selectați Vizualizare cod sursă sau apăsați CTRL+U de pe tastatură:

    Limbajul de marcare HTML a câștigat o mare popularitate. În acest moment, aceasta este singura limbă în care este creat marcarea site-ului. Vreau să subliniez faptul că este un marcaj. Așa-numitul „motor” este creat într-un alt limbaj de programare (cel mai adesea PHP), care vă permite să creați pagini interactive (html nu permite acest lucru).

    Notă

    Cititorul atent va observa că nu toate paginile de pe Internet au extensia .html la sfârșit. De exemplu, există pagini /catalog/list (fără nicio extensie). Acest lucru este incorect, dar browserul va putea înțelege că acesta este un document web și îl va afișa corect.

    2. Exemplu și structură de cod html

    Mai jos este un exemplu cu structura unei pagini html tipice. Vă rugăm să rețineți că codul html este împărțit în două zone: antetul și corpul paginii.

    <span>Titlul paginii</span> ... Etichete de titlu (stiluri de conectare, scripturi) ... ...
    Antetul site-ului
    ...
    Coloana din stânga
    ...
    ...Partea principală a site-ului...
    ...
    Coloana din dreapta
    ...
    Partea de jos a paginii
    ...

    Acest cod poate fi editat în orice editor de text. Cel mai adesea, notepad++ este folosit pentru a dezvolta un site web html (un editor avansat care evidențiază etichetele și arată erori). Dar este mai bine să folosiți editori mai avansati pentru a lucra cu marcaj HTML.

    Markupul constă din etichete html (uneori scrise „etichetă”).

    3. Ce este o etichetă HTML

    Etichetă HTML- acesta este unul dintre elementele de aspect html necesare pentru structură. Etichetele au un semn de deschidere< и закрывающий > .

    De exemplu, . Aproape fiecare etichetă este asociată și necesită o etichetă de închidere. Dacă webmasterul uită să pună eticheta de închidere sau o face incorect, atunci aspectul nu va fi valid (vezi validarea site-ului). Dacă această etichetă este una care deține „cadru” site-ului, atunci site-ul poate „pluti” (coloana laterală se va deplasa în jos etc.).

    Este interzisă închiderea etichetelor în afara ordinii în care au fost deschise. De exemplu

    Citiți articolul pentru mai multe detalii despre crearea unei pagini HTML.

    Salutare tuturor!. Vom dedica a doua lecție întrebării ce este HTML și cum să lucrăm cu el. În acesta veți afla despre caracteristicile celui mai popular limbaj de programare web și veți înțelege clar esența sa principală.

    Odată ce l-ai stăpânit, îți va fi mai ușor să mergi mai departe și atunci poți cu ușurință (deși nu, tot va trebui să muncești din greu) să te apuci de limbaje mai complexe de creare a site-urilor, de exemplu PHP. Deci să trecem la treabă.

    Ce este HTML

    HTML (hipertext markup language) este un limbaj de marcare hipertext în viața de zi cu zi. Limbajul de marcare standard pentru documentele de pe Internet de pe World Wide Web. Aceasta este una dintre cele mai populare limbi pentru crearea de site-uri web. De asemenea, este considerat cel mai ușor de încărcat în browsere.

    Nu are trucuri complicate precum PHP, care, înainte de a afișa pagina în browser, face mai întâi o solicitare către baza de date MySql, apoi afișează doar conținutul utilizatorului. Nu voi intra în preludii verbale lungi despre cum a fost creat, pentru că este lung și nu este interesant.

    Pentru toate aceste puncte, marea Wikipedia te va ajuta. Vrem să învățăm cum să creăm rapid site-uri web, nu? Grozav! Atunci să mergem mai departe și să înțelegem toate complexitățile acestei științe web.

    Bazele limbajului HTML. Conceptul de etichetă

    Fără cunoașterea unei baze solide, nu poți ajunge nicăieri; „partea materială” („fundamentul” oricărui subiect) nu a fost încă anulată. Și nu ne vom abate de la tradiții și reguli.

    Elementele de bază ale limbajului HTML sunt etichetele sau, mai precis, un set de etichete. Ele sunt desemnate astfel<тег>. Etichetele sunt întotdeauna asociate și sunt afișate astfel

    <тег>.

    < тег> < / тег> .

    Fiecare dintre ele îndeplinește o funcție strict definită pentru afișarea în browsere.

    Unii afișează o imagine pe ecran, alții un link, alții sunt responsabili pentru paragrafe, alții fac un tabel și așa mai departe. Putem scrie orice text în interiorul lor. Îmi place să le numesc containere, pentru claritate, ca să spun așa. Dar sunt și singure, le vom studia în lecțiile următoare.

    Și înțelegeți, de asemenea, un punct important. Acest limbaj folosește principiul Pareto, adică, ca în orice domeniu al vieții, activității sau oriunde altundeva, există regula 80/20.

    Ce înseamnă acest lucru? Acest lucru ne spune că 20% (în cazul nostru, acesta este html) din limbă face 80% din muncă. Logica este că nu este necesar să înveți toate etichetele, deoarece multe dintre ele pur și simplu nu sunt folosite sau sunt folosite foarte rar. Așa că în lecțiile noastre ne concentrăm pe cele mai frecvente și importante. Și ai făcut o treabă grozavă cu asta!

    Structura documentului HTML

    Structura oricărui document html arată astfel:

    document fara titlu

    < ! DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Tranzițional//EN”„http://www.w3.org/TR/html4/loose.dtd”>

    < html >

    < head >

    < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" >

    < title >document fara titlu< / title >

    < / head >

    < body >

    < / body >

    < / html >

    Acum să descriem fiecare punct mai detaliat:

    Ce este Doctype și semnificațiile sale

    Elementul doctype este folosit pentru a indica tipul paginii noastre web. Aceasta este așa-numita „Declarație de tip de document” sau Declarație de tip de document.

    Această etichetă ar trebui să apară întotdeauna prima pe fiecare pagină. Este o componentă cheie a paginilor web care pretind că respectă standardele: fără ea, codul tău nu va trece validatorul.

    Un validator de documente web este un program de calculator care verifică conformitatea unui document, flux de date sau bucată de cod cu un format specific și verifică corectitudinea sintactică a documentului sau fișierului (conform Wikipedia).

    Există mai multe valori Doctype:

    1. Strict
    2. Tranzitorie
    3. Set de rame (cu rame)

    Eu folosesc a doua varianta. Este cel mai convenabil să lucrați, deoarece nu limitează dezvoltatorul. Este confuz pentru cititor, deci care este diferența dintre ele și care este cel mai bun de folosit?

    O să explic diferența dintre ele. Versiunea de tranziție nu respectă strict standardele de validare W3C (sau în rusă, verificarea), adică browserul va afișa conținutul unui document web în același mod, chiar dacă acesta conține variații de cod învechite, nerecomandate și alte variante de cod nestandard. . Dar versiunea Strict respectă cu strictețe toate standardele, adică, în practică, dacă ați uitat să puneți simbolul corespunzător undeva în cod (de exemplu, o bară oblică /), atunci când verificați, vi se va da un avertisment.

    Iată cum arată un document web care utilizează versiunea strictă:

    Respectarea strictă a standardelor lingvistice

    < ! DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN”

    „http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

    < html xmlns = „http://www.w3.org/1999/xhtml”>

    < head >

    < title >Respectarea strictă a standardelor lingvistice< / title >

    < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / >

    < / head >

    < body >

    < p > . . . < / p >

    < / body >

    < / html >

    Vă sfătuiesc să utilizați a doua opțiune și să nu vă faceți griji, deoarece este cea mai convenabilă. Acum ne vom uita la celelalte componente ale paginii noastre.

    - sau eticheta „head”, conține cele mai importante etichete care explică browserului ce trebuie făcut în pagină și ce mecanisme să lanseze. Acesta definește un document web și conținutul acestuia. Conține adesea diverse scripturi care lansează diverse funcții pe pagină și există, de asemenea, un „container” important pentru promovarea SEO - o etichetă

    Când creați un site web, primul lucru pe care trebuie să-l imaginați este modul în care este formată pagina web. Acesta este un fel de „fundație” în construirea site-ului web. Prin urmare, înainte de a vă aprofunda în tehnologii mai complexe de creare a site-urilor web, este recomandat să aveți cel puțin cunoștințe de bază de HTML. În această lecție ne vom familiariza HTML, hai să rezolvăm Structura documentului HTMLși folosiți exemple practice pentru a consolida cunoștințele acumulate.

    Ce este HTML?

    HTMLînseamnă HyperText Markup Language. Acest limbaj este responsabil pentru exact modul în care va fi afișat hipertextul pe paginile site-ului. Acum să ne dăm seama ce este hipertextul? Nu este un secret pentru nimeni că o singură pagină web poate conține o mulțime de tipuri diferite de informații, fie că este vorba de text, unele tabele, grafice, videoclipuri, audio etc. Deci, toate aceste informații pot fi numite într-un singur cuvânt - hipertext.

    Rețineți că HTML este un limbaj de marcare, nu un limbaj de programare. Acest limbaj nu are funcții logice și este imposibil să se efectueze calcule matematice în el. Paginile HTML au extensie .html sau .htmși sunt procesate de browsere - IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera etc.

    Acum să ne dăm seama cum înțelege browserul ce și cum să afișeze pe o pagină web? E foarte simplu. Limbajul de marcare hipertext HTML are comenzi încorporate numite etichete. De către ei este orientat browserul.

    Structura documentului HTML

    Orice document HTML (pagină web) trebuie să aibă o anumită structură. Acest lucru va evita posibile probleme la deschiderea paginilor în browsere. De exemplu, să ne uităm la o pagină care conține următorul cod HTML:

    Structura documentului HTML ...

    Să ne uităm la ceea ce este inclus în această structură în ordine:

    1. Primul lucru care apare într-un document HTML este indicarea versiunii (prima linie). Pentru o funcționare corectă, această linie trebuie specificată atunci când așezați pagina web.

    3. Apoi vine zona pentru partea de sus a site-ului (header). Eticheta este folosită pentru aceasta . În antet indicăm numele paginii noastre plasând titlul paginii între etichete Și. În continuare, este indicată codificarea documentului HTML (linia a cincea). Acest lucru se face pentru a afișa corect alfabetul chirilic. Închiderea zonei antetului cu o etichetă.

    4. Meta tag „descriere” - un rezumat al paginii, destinat motoarelor de căutare. Această etichetă este importantă pentru optimizarea motoarelor de căutare și trebuie completată.

    5. Metaetichetă „cuvinte cheie” – cuvinte cheie care pot apărea pe pagină. Această etichetă este, de asemenea, destinată motoarelor de căutare. Această etichetă este rar folosită în zilele noastre.

    6. Corpul paginii se deschide cu o etichetă și se închide, în consecință, cu eticheta. Corpul unei pagini web conține de obicei conținutul principal - text, video, audio și alte informații.

    Astfel, am răspuns la întrebarea ce este HTML și am studiat structura unui document HTML. Informatiile primite in aceasta lectie sunt concepte de baza, nu te poti lipsi de ele. Despre lucruri mai complexe vom vorbi în alte lecții.