Ce etichete sunt folosite pentru cuvântul Moscova. Etichete HTML de bază. Ce sunt etichetele muzicale în fișierele audio?

16.01.2021 Sfat

Etichetele HTML sunt baza limbajului HTML. Etichetele sunt folosite pentru a delimita începutul și sfârșitul elementelor în marcare.

Fiecare document HTML constă dintr-un arbore de elemente HTML și text. Fiecare element HTML este identificat printr-o etichetă de început (deschidere) și de sfârșit (închidere). Etichetele de deschidere și de închidere conțin numele etichetei.

Toate elementele HTML sunt împărțite în cinci tipuri:

  • elemente goale - , ,
    , , , , , , , , , , , , ;
  • elemente cu text neformatat - , ;
  • elemente care afișează text neformatat - , ;
  • elemente dintr-un alt spațiu de nume - MathML și SVG;
  • elemente obișnuite - toate celelalte elemente.

Tabelul arată lista plina elemente suportate de HTML4 și HTML5. Etichetele experimentale și vechi sunt excluse. Elementele adăugate la specificația HTML5 sunt evidențiate cu culoarea galbenă.

Lista completă a elementelor HTML Tabelul 1. Elemente HTML Descrierea etichetei
Folosit pentru a adăuga comentarii.
Declara tipul documentului și oferă informații de bază browserului - limba și versiunea acestuia.
Creează legături hipertext.
Identifică textul ca abreviere sau acronim. Textul explicativ este specificat folosind atributul title.
Specifică informațiile de contact ale autorului/proprietarului documentului sau articolului. Afișat cu caractere cursive în browser.
Este un hyperlink cu text corespunzător unei anumite zone de pe o hartă imagine sau unei zone active din cadrul unei hărți imagine. Întotdeauna imbricat într-o etichetă.
O secțiune de conținut care formează o parte independentă a unui document sau a unui site web, cum ar fi un articol de revistă, o postare pe blog, un comentariu.
Reprezintă conținutul paginii care are legătură indirectă cu conținutul principal al paginii/site-ului.
Încarcă conținut audio într-o pagină web.
Setează un pasaj de text să fie aldine fără a adăuga accent sau importanță textului evidențiat.
Specifică adresa de bază (URL) din care sunt calculate toate adresele relative. Acest lucru va ajuta la evitarea problemelor la mutarea paginii în altă locație, deoarece toate linkurile vor funcționa ca înainte.
Izolează un pasaj de text scris într-o limbă în care textul este citit de la dreapta la stânga de restul textului.
Afișează textul în direcția specificată de atributul dir, suprascriind direcția curentă a textului.
Evidențiază textul ca citat, folosit pentru a descrie ghilimele mari.
Reprezintă corpul documentului (conținut care nu face parte din metadatele documentului).

Încadrați textul într-o nouă linie.
Creează un buton interactiv. Puteți plasa conținut în interiorul etichetei - text sau imagine.
Container canvas pentru afișarea dinamică a imaginilor, cum ar fi imagini simple, diagrame, grafice etc. Limbajul de scripting JavaScript este folosit pentru desen.
Adaugă o legendă la tabel. Se introduce imediat după etichetă . , și coloana .

De exemplu, codul html:

Folosit pentru a indica sursa unei citari. Afișat cu caractere cursive.
Reprezintă o bucată de cod de program, afișată într-o familie de fonturi monospace.
Selectează una sau mai multe coloane de tabel pentru formatare care nu conțin același tip de informații.
Creează un grup structural de coloane care identifică multe celule omogene din punct de vedere logic.
Elementul este folosit pentru a asocia valoarea atributului value, care este într-un format care poate fi citit de mașină și poate fi procesat de un computer, cu conținutul etichetei.
Element container pentru un element de listă verticală. Valorile variantelor sunt plasate în elemente.
Folosit pentru a descrie un termen dintr-o etichetă.
Marchează textul ca șters, eliminându-l.
Creează un widget interactiv pe care utilizatorul îl poate deschide sau închide. Reprezintă un container pentru conținut, titlul vizibil al widget-ului este plasat în etichetă.
Identifică un cuvânt ca termen punându-l cu caractere cursive. Textul care urmează ar trebui să conțină o definiție a acestui termen.
Un element interactiv cu care utilizatorul interacționează pentru a finaliza o sarcină, cum ar fi o casetă de dialog, un inspector sau o fereastră. Fără atributul deschis, acesta nu este vizibil pentru utilizator.
O etichetă de container pentru secțiuni ale unui document HTML. Folosit pentru a grupa elemente de bloc pentru formatare cu stiluri.
O etichetă de container care conține un termen și descrierea acestuia.
Folosit pentru a specifica un termen.
Evidențiază pasaje importante ale textului afișându-le cu caractere cursive.
O etichetă de container pentru încorporarea conținutului interactiv extern sau a unui plugin.
Grupează elementele înrudite într-o formă desenând o casetă în jurul lor.
Titlu/titlu pentru element.
O etichetă de container autonomă pentru conținut, cum ar fi ilustrații, diagrame, fotografii, exemple de cod, de obicei cu o legendă.
Definește zona de sfârșit (subsol) a unui document sau a unei secțiuni.
Un formular pentru colectarea și trimiterea informațiilor de la utilizatori către server. Nu funcționează fără atributul acțiune.
Creați șase niveluri de titluri pentru secțiunile conexe.
Un element container pentru metadatele documentelor HTML, cum ar fi , , , , .
Secțiune pentru informații introductive despre un site sau un grup de link-uri de navigare. Poate conține unul sau mai multe titluri, logo, informații despre autor.
O linie orizontală pentru împărțirea tematică a paragrafelor.
Elementul rădăcină al unui document HTML. Spune browserului că acesta este un document HTML. Este un container pentru toate celelalte elemente html.
Cursiv un pasaj de text fără a-i acorda un accent suplimentar.
Creează un cadru inline prin încărcarea unui alt document în documentul HTML curent.
Încorporează imagini într-un document HTML utilizând atributul src, a cărui valoare este adresa URL a imaginii încorporate.
Creează câmpuri de formulare bogate în care utilizatorul poate introduce date.
Evidențiază textul cu subliniere. Folosit pentru a evidenția modificările aduse unui document.
Selectează textul care urmează să fie introdus de către utilizator utilizând tastatura într-un font monospațiu.
Folosit pentru a stoca informații suplimentare despre pagină. Aceste informații sunt folosite de browsere pentru a procesa pagina și de motoarele de căutare pentru a o indexa. Pot exista mai multe tag-uri într-un bloc, deoarece în funcție de atributele utilizate, acestea poartă informații diferite.
Indicator de măsurare într-un interval dat.
O secțiune a unui document care conține link-uri de navigare pentru site.
Definește o secțiune care nu acceptă scripting.
Container pentru încorporarea multimedia (de exemplu, audio, video, applet-uri Java, ActiveX, PDF și Flash). De asemenea, puteți insera o altă pagină web în documentul HTML curent. Eticheta este folosită pentru a trece parametrii pluginului.
Lista numerotata ordonata. Numerotarea poate fi numerică sau alfabetică.
Un container cu un titlu pentru un grup de elemente.
Specifică o opțiune/opțiune de selectat din lista derulantă , sau ,.
Câmp pentru afișarea rezultatului unui calcul calculat cu ajutorul scriptului.

Paragrafe din text.
Definește parametrii pentru pluginurile încorporate folosind elementul.
Un element container care conține un element și zero sau mai multe elemente. În sine nu afișează nimic. Permite browserului să selecteze imaginea cea mai potrivită.
Produce text fără formatare, păstrând spațiile și pauzele de text. Poate fi folosit pentru a afișa codul computerului, mesajele de e-mail etc.
Un indicator al finalizării unei sarcini de orice fel.
Definește o citație scurtă.
Container pentru simbolurile din Asia de Est și decodarea acestora.
Definește textul său imbricat ca componentă de bază a adnotării.
Adaugă o scurtă descriere deasupra sau sub caracterele conținute în element, afișată într-un font mai mic.
Marchează textul încorporat ca adnotare suplimentară.
Afișează text alternativ dacă browserul nu acceptă elementul.
Afișează text care nu este actual cu barat.
Folosit pentru a afișa text reprezentând rezultatul execuției codului programului sau scriptului, precum și mesajele de sistem. Afișat cu font monospațiu.
Folosit pentru a defini un script pe partea client (de obicei JavaScript). Conține fie text script, fie indică către un fișier script extern folosind atributul src.
Definește o zonă logică (secțiune) a unei pagini, de obicei cu un antet.
Un element de control care vă permite să selectați valori dintr-un set propus. Valorile variantelor sunt plasate în .
Afișează textul într-o dimensiune mai mică a fontului.
Specifică locația și tipul resurselor media alternative pentru , , .
Container pentru elemente inline. Poate fi folosit pentru a formata pasaje de text, cum ar fi evidențierea cuvintelor individuale cu culoare.
Pune accent în text, evidențiind-o cu caractere aldine.
Include foi de stil încorporabile.
Specifică scrierea în indice a simbolurilor, de exemplu, indicele elementului în formule chimice.
Creează un titlu vizibil pentru etichetă. Afișat cu un triunghi umplut, făcând clic pe acesta vă permite să vizualizați detaliile titlului.
Specifică scrierea în superscript al caracterelor.
Etichetă pentru crearea unui tabel.
Definește corpul tabelului.
Creează o celulă de tabel.
Folosit pentru a declara fragmente de cod HTML care pot fi clonate și inserate într-un document printr-un script. Conținutul unei etichete nu este un copil al acesteia.
Creează câmpuri mari de introducere a textului.
Definește subsolul tabelului.
Creează un titlu de celulă de tabel.
Definește titlul tabelului.
Definește data/ora.
Titlul unui document HTML care apare în partea de sus a barei de titlu a browserului. Poate apărea și în rezultatele căutării, așa că acest lucru ar trebui să fie luat în considerare atunci când furnizați un titlu.
Creează un rând de tabel.
Adaugă subtitrări pentru elemente și .
Evidențiază un pasaj de text prin subliniere, fără un accent suplimentar.
Creează o listă cu marcatori.
Evidențiază variabilele din programe afișându-le cu caractere cursive.
Adaugă fișiere video pe pagină. Suporta 3 formate video: MP4, WebM, Ogg.
Indică browserului unde se poate rupe o linie lungă.
Cheat sheet cu etichete

Pentru ușurință în utilizare, am grupat etichetele în secțiuni tematice, adăugând valorile proprietăților de afișare pentru fiecare etichetă. Pentru a merge la tabel, dați clic pe imagine.

Ne-am uitat la un exemplu de creare a unei pagini simple în care s-au dat comentarii la unele etichete html, deoarece mi se pare că este mai bine să arătăm mai întâi ceva cu un exemplu și apoi să trecem la o descriere mai detaliată. De aceea, crearea unei pagini a fost discutată în a doua lecție, iar mai detaliat în a treia.

Deci, mai jos sunt descrieri ale etichetelor HTML comune care sunt utilizate pe aproape fiecare pagină a site-ului. Crede-mă, sunt deja destui pentru a scrie un întreg site.

Lista etichetelor HTML 1. Etichetă HTML (pentru paragrafe) - afișează un paragraf text (permite stil, clasă, atribute id). Cea mai comună etichetă, deoarece textul este plasat cel mai adesea în ea (cu toate acestea, pentru asta a fost creat).

De exemplu, codul html:

Text paragraful numărul unu

Și acesta este un alt paragraf

Text paragraful numărul unu

Și acesta este un alt paragraf

De asemenea, puteți adăuga un parametru de stil la etichetă:

Aceste valori diferite pot fi folosite pentru a edita aspectul fontului. Puteți citi despre acești parametri într-o lecție separată: stiluri în html și proprietatea fontului css.

De asemenea, puteți specifica atributele CLASS și ID. De exemplu:

2. Etichetă HTML și (în aldine)

Și - două etichete care vă permit să faceți fontul bold. Nu există nicio diferență între aceste etichete.

Să dăm un exemplu. Cod HTML:

miniatură

Se convertește în următoarele pe pagină:

miniatură

De asemenea, puteți specifica atributele CLASS și ID (ca și în cazul Note

Aceste etichete au un impact redus asupra clasamentului documentelor în motoare de căutare, așa că este mai bine să nu le folosiți fără scop.

3. Etichetă HTML (creați cursive)

- font italic (permite stil, clasă, parametrii id)

De exemplu, cod html:

text italic

Se convertește în următoarele pe pagină:

4. Etichetă HTML (text subliniat)

- font subliniat (permite stil, clasă, parametrii id)

De exemplu, codul html:

text subliniat

Se convertește în următoarele pe pagină:

text subliniat

5. Etichetă HTML (crearea unui hyperlink)

Creează un link pe pagină (permite stil, clasă și alți parametri).

De exemplu, codul html:

textul linkului

Se convertește în următoarele pe pagină:

Toți parametrii și atributele etichetei vor fi tratate într-o lecție separată: etichetă html.

6. Etichetă HTML (titluri din conținut)

,..., - etichete de antet în interiorul conținutului (permite stilul, clasa, parametrul id). Mai mult, cu cât numărul este mai mic, cu atât greutatea și dimensiunea (în mod implicit) a textului inclus în aceste etichete sunt mai mari.

De exemplu, codul html:

Titlul h1

Eticheta este folosită pentru titlul paginii (precum și titlul)

Aceste etichete trebuie utilizate numai în scopul propus, de exemplu. numai atunci când articolul are nevoie de un titlu. Acest lucru se datorează faptului că etichetele,..., au o mare influență asupra motoarele de căutare. Dacă le folosești corect, atunci șansele de a ajunge în partea de sus a rezultatelor căutării sunt foarte mari.

7. Etichetă HTML (aliniere)

- aliniază conținutul în centru.

De exemplu, codul html:

Acest text va fi în centru

Se convertește în următoarele pe pagină:

Acest text va fi în centru

Notă
  • - pentru text
  • ... - pentru orice (de exemplu, o imagine)
8. Etichetă HTML (text subscript)

- afișează fontul de indice.

De exemplu, codul html:

Text simplu, text interliniar

Se convertește în următoarele pe pagină:

Text simplu, text interliniar

9. Etichetă HTML (text superscript)

- afișează fontul superscript.

De exemplu, codul html:

Text simplu, text în indicele

Se convertește în următoarele pe pagină:

Text simplu, text în indicele

10. Etichetă HTML,

, - afișează un font cu un pixel mai mare/mai mic decât dimensiunea curentă (permisă de parametrul stil, clasă, id).

De exemplu, codul html:

Font obișnuit, acest font este cu un pixel mai mare

Se convertește în următoarele pe pagină:

Font obișnuit, acest font este cu un pixel mai mare

11. Etichetă HTML
    (crearea listelor)

    Afișează o listă (acceptă stil, clasă, parametri id). Fiecare element nou este scris între

  • Și
  • .

    De exemplu, codul html:

    Listă:
    • primul element al listei
    • al doilea element al listei

    Se convertește în următoarele pe pagină:

    Listă:

    • primul element al listei
    • al doilea element al listei
    12. Etichetă HTML (crearea de tabele)

    - creează un tabel (permite stilul, parametrul de clasă). Fiecare linie nouă este creată de etichete
1 linie 1 element1-a linie 2-a element
2 linii 1 element2-linie 2 element

Se convertește în următoarele pe pagină:

Toate capabilitățile de etichetă

13. Etichetă HTML
(rupere de linie)


- tranziția la următoarea linie, este o singură etichetă.

De exemplu, codul html:

Linia 1
2 linii
Linia a 3-a Și acest text va fi pe linia a 3-a, deoarece nu a existat nicio tranziție

Se convertește în următoarele pe pagină:

1-linie
2 linii
Linia a 3-a Și acest text va fi pe linia a 3-a, deoarece nu a existat nicio tranziție

14. Etichetă HTML (linie orizontală)

- desenează o linie, reprezintă o singură etichetă (permite stilul, parametrul de clasă).

De exemplu, codul html:

Un text deasupra liniei și acest text va fi sub linie

Se convertește în următoarele pe pagină:

Un text deasupra liniei și acest text va fi sub linie

15. Etichetă HTML (ieșire imagine)

De exemplu, codul html:

http://img-fotki.yandex.ru/get/5821/27743399.2b/0_8875d_14383ca6_M.jpg ">

Se convertește în următoarele pe pagină:

Toate capabilitățile de etichetă va fi discutat într-o lecție separată: .

16. Etichetă HTML (formatarea textului)

- pentru a formata text, a schimba stilul etc. (permite stilul parametrului, clasă, id). Greutatea sa în ochii motoarelor de căutare este absentă, așa că îl puteți folosi cât doriți.

De exemplu, codul html:

Acest text este verde și dimensiunea lui este de 15 pixeli

Se convertește în următoarele pe pagină:

Notă

O etichetă similară este .

17. Etichetă HTML (crearea formularului)

- crearea unui formular pe pagină (permite stilul, parametrul de clasă).

De exemplu, introducerea unui login și a unei parole, orice butoane, orice formular de înregistrare - toate acestea sunt formulare.

18. Etichetă HTML (crearea blocurilor)

- folosit pentru a crea blocuri pe pagină (permite stilul, parametrul de clasă). Anterior, tabelele erau folosite în principal pentru a marca paginile. După ce a apărut eticheta, sarcina a devenit mai ușoară. Aproape toate site-urile web conțin blocuri ca o alternativă convenabilă la tabele.

Atributele sunt specificate în eticheta de început a elementului și constau dintr-un nume și o valoare, care sunt separate printr-un semn egal (=). De exemplu, în atribut href="http://www.site/" href este un nume și http://www.site/ sens.

Etichetele HTML pot conține unul sau mai multe atribute. Atributele sunt adăugate unei etichete pentru a informa browserul cum ar trebui să fie afișată eticheta într-un document HTML.

atributul titlului

Luați în considerare următorul exemplu:

Acest exemplu folosește eticheta, care este menită să reprezinte o abreviere sau un acronim. Un atribut suplimentar a fost adăugat etichetei de pornire a elementului. Acest atribut conține titlul elementului.

Numele atributului titlului. În acest exemplu, i-am dat valoarea Limbajul de marcare hipertext.

Atributul title poate fi utilizat (opțional) pe orice element HTML pentru a oferi informații suplimentare despre conținutul elementului.

Atunci când utilizați atributul title, majoritatea browserelor își vor afișa valoarea ca un „tooltip” atunci când utilizatorul trece cu mouse-ul peste element.

atribut alt

Știți deja că imaginile sunt inserate în paginile Web folosind o singură etichetă. . Atributul alt este adăugat în interiorul tera și definește text alternativ pentru elementul fizic adăugat la pagina Web. Acest text se numește alt text deoarece poate apărea pe ecran ca alternativă la imaginea în sine.

În exemplul următor, veți vedea cum gestionează browserul atributul alt când apare o imagine „lipsă”. Dacă imaginea nu poate fi găsită sau dintr-un motiv oarecare nu se încarcă, este afișată în schimb valoarea atributului alt. Schimbați numele fișierului imagine din orange.jpg în pencil.jpg. Nu există de fapt un astfel de fișier, așa că veți ajunge cu o imagine „lipsă”.

atributul href

Puteți adăuga mai multe atribute unui element simultan.

Iată un exemplu de adăugare a două atribute la un element (care este folosit pentru a crea un hyperlink către o altă pagină web).

Exemplu HTML: Încercați tutorialele HTML pentru dvs

Atributul href specifică locația paginii web la care duce linkul.

De asemenea, folosim atributul title pentru a oferi anumite îndrumări utilizatorului sub forma unui balon explicativ.

Puteți specifica atribute numai în interiorul etichetelor de deschidere, iar dacă există mai multe atribute, atunci este plasat un spațiu între ele. În același timp, nu puteți seta două atribute identice într-o etichetă, chiar dacă au valori diferite, adică duplicarea lor este interzisă. Atributele, cum ar fi etichetele, nu sunt sensibile la majuscule, ceea ce înseamnă că pot fi scrise cu litere mari sau mici. Valorile atributelor pot fi incluse între ghilimele duble (" ") sau simple ("").

Uneori este necesar să folosiți ghilimele. În acest exemplu, atributul titlu nu se va afișa corect deoarece valoarea atributului conține spații:

Singur sau
ghilimele duble?

Cel mai frecvent folosit ghilimele în HTML este „ghilimele duble”, dar puteți folosi și „ghilimele simple”. Uneori, va trebui să utilizați ghilimele simple dacă există o parte din valoare care trebuie citată separat:

HTML

O poți face invers:

HTML

Atribute generale

Mai jos este o listă cu câteva atribute care sunt standard pentru majoritatea elementelor HTML:

Atribut Valoare Descriere
aliniadreapta, stânga, centruAlinierea orizontală a etichetelor
valinisus, mijloc, josAlinierea verticală a etichetelor într-un element HTML.
fundalURLLocația imaginii de fundal
idNume unicUn nume unic pentru utilizare cu foi de stil în cascadă.
clasăregula de clasă sau stilul claseiClasifică un element pentru utilizare cu Foi de stil în cascadă.
lăţimeValoare numericaDefinește lățimea tabelelor, imaginilor sau celulelor tabelului.
înălţimeValoare numericaDetermină înălțimea tabelelor, imaginilor sau celulelor tabelului.
titluText indicativTextul de afișat în balonul cu instrumente.

Lista completă a tuturor atributelor pentru fiecare element HTML, listate în directorul nostru: Atribute HTML.

Sarcini Prima sarcină finală

Te-ai familiarizat cu tag-urile necesare pentru a crea o pagina HTML simpla, precum si cu atributele si valorile acestora, care sunt foarte importante pentru afisarea corecta a unui document, optimizare si promovare in motoarele de cautare.

Este timpul să revizuiți ceea ce ați învățat și să finalizați sarcini simple:

Indicator
  • Decide singur"

Creați un sfat explicativ cu textul „Site bun” care apare când treceți mouse-ul peste un paragraf, așa cum se arată în Fig. 1.

Indicator

Title="Site bun">сайт - сайт для разработчиков.!}

Dimensiunile imaginii
  • Decide singur"

Redimensionați imaginea la 200 de pixeli lățime și 150 de pixeli înălțime.

Dimensiunile imaginii

Dimensiunile imaginii

Bună ziua, dragi cititori ai blogului! În ultimul articol, ne-am dat seama ce este un tip de document și cum determină browserele limba folosită folosind . Eticheta a fost luată în considerare, dar conceptul (termenul) în sine nu a fost. În acest articol vă voi spune ce este o etichetă, de ce este necesară și ce tipuri de etichete există. După cum am spus în ultimul articol din această secțiune, vom crea o pagină de fișier, pe care o vom experimenta, pe baza cunoștințelor pe care le-am dobândit. Dar acesta este la sfârșitul articolului, dar deocamdată să ne uităm la eticheta HTML.

Ce este o etichetă HTML, tipuri de etichete HTML, exemple de scriere a etichetei HTML - tradus din engleză etichetă - pentru a marca - caracterele cuprinse între paranteze unghiulare și care sunt elemente ale limbajului de marcare hipertext (HTML). Simbolurile pot fi de folos Limba engleză(întregul Internet este construit pe el). Eticheta arată ca

Aceasta este o etichetă pentru a face textul aldine. Etichetele au trei tipuri:

  • Eticheta de deschidere este eticheta care vine la început. În exemplul discutat mai sus, eticheta este eticheta de deschidere și se află înaintea textului care trebuie evidențiat.
  • Eticheta de închidere este eticheta care vine la sfârșit. Trăsătură distinctivă servește ca o bară oblică „/” înaintea caracterelor din paranteze unghiulare. Să ne uităm din nou la exemplul discutat mai sus. Eticheta este o etichetă de închidere și vine după text, care trebuie evidențiat cu caractere aldine
  • Etichetele unice sunt etichete care nu au o etichetă de închidere. Un exemplu ar fi
    Iată un exemplu de etichetă de deschidere și de închidere:

Întregul design, inclusiv textul, va arăta astfel:

Acest text va fi evidențiat cu caractere aldine

Și așa va arăta acest text atunci când browserul îl prelucrează și ni-l oferă: Acest text va fi evidențiat cu caractere aldine. Există, de asemenea, etichete de container, dar acesta este doar un nume generalizat pentru etichetele de deschidere și de închidere. După cum am scris mai sus, pe lângă etichetele containerului, există și etichete unice. Diferența este că astfel de etichete nu trebuie să fie închise. Cel mai clar și cel mai comun exemplu este eticheta newline.

Practic, etichetele simple sunt folosite pentru a insera un element, cum ar fi o imagine sau un tabel.

Ce sunt atributele, regulile de scriere și de ce sunt necesare? Pe lângă etichete, există și așa-numitele atribute. Mai exact, nu în afară, ci în etichete. Folosind atribute pe care le puteți seta Opțiuni suplimentare pentru orice etichetă. Fiecare etichetă are propriile atribute, iar în acest subiect vom experimenta cu eticheta, care, fără atribute, nu are de fapt nimic semnificativ.

Fontul este o etichetă de container folosită pentru a formata textul. Folosind această etichetă, puteți face textul îngroșat, puteți modifica dimensiunea și distanța dintre linii - în general, tot ce puteți face cu textul. Să ne uităm la un exemplu cu dimensiunea textului. Mai întâi, să includem textul într-o etichetă Font.

Text

Acum puțin despre regulile de scriere a atributelor. Atributele sunt întotdeauna scrise în eticheta de deschidere și după caracterele etichetei în sine. Puteți scrie mai multe atribute într-o singură etichetă, în orice ordine. Atributele le găsiți pe site-ul validatorului W3C (despre care voi scrie mai jos). Deci, iată un exemplu de etichetă de font cu un atribut de dimensiune:

Text

Acest atribut din eticheta fontului modifică dimensiunea textului inclus în etichete.
Dacă deschizi sursă pagina, veți vedea că locul în care se află cuvântul mare „Text” arată ca

Text

Ați văzut deja cum sunt scrise atributele. Ele sunt scrise exact în același mod în alte etichete: mai întâi scriem atributul în sine (în acest caz dimensiunea), apoi punem „=” și închidem parametrul de atribut între ghilimele duble. Puteți găsi toți parametrii de atribut pe același site web World Wide Web Consortium.

Ce este un validator W3C, reguli de scriere și lista de etichete După cum am scris, există o mulțime de etichete. Dar unde le poți găsi pe toate? În acest scop, există un validator W3C W3C - World Wide Web Consortium, sau în rusă - World Wide Web Consortium. Nu este complet clar, nu? Acesta este locul în care sunt dezvoltate standardele web - (limbajele de marcare hipertext sunt creația lor). În fruntea întregului consorțiu se află Tim Berners-Lee, cunoscut din articolul precedent, creatorul HTML-ului. Site-ul web al acestei organizații este w3.org. Vă avertizez, site-ul este în întregime în engleză, așa că aveți un dicționar sau un traducător în browser. Apropo, ratingul Google pentru acest site este 9 și 37.000 (asta este mult, dacă cineva nu știe).

Să revenim la subiectul articolului. Suntem interesați de standardele lingvistice HNTML 4.01. Urmați linkul HTML 4.01 Specification, după care vedem fila elemente în partea de sus, faceți clic pe ea. Aici se deschide pagina cu toate etichetele. Aceste etichete au fost dezvoltate și adoptate ca standard de către consorțiu. Totul, din nou, este în engleză. Imediat după cuvintele „Indexul elementelor” vedem o legendă (sensul literelor din coloane):

Și imediat după legendă există un tabel cu etichetele în sine:

  • În prima coloană - Nume - numele etichetei în sine - ce ar trebui să fie între paranteze unghiulare (< и >).
  • A doua coloană - Start Tag - prezența unei etichete de deschidere. ÎN această coloană puteți vedea litera „O”, care înseamnă „Opțional”, iar în traducere din engleză - Opțional. Această literă este prezentă doar în fața etichetelor , și înseamnă că puteți pune o etichetă de deschidere sau nu este necesar - browserul va face totul singur.
  • A treia coloană - End Tag - prezența unei etichete de închidere. Vizavi de această etichetă puteți vedea atât litera „O”, cât și litera „F”. Sensul primului nu s-a schimbat. A doua literă - „F” - literalmente „interzis” în engleză - înseamnă că este interzis să puneți o etichetă de închidere, pur și simplu nu există. De exemplu, nu există nicio etichetă, pentru că nu există nimic de ascuns în ea.
  • Al patrulea - Gol - înseamnă că eticheta este singură (golă). Toate etichetele care au litera „E” în ​​fața lor în această coloană au și litera „F” în coloana anterioară. La urma urmei, etichetele simple nu au etichete de închidere. Un exemplu este aceeași etichetă .
  • A cincea coloană este Depr. sau Depreciat - din engleză „nu este recomandat”. Dacă această coloană conține litera „D” (care înseamnă exact aceeași) înseamnă că această etichetă nu este recomandată pentru utilizare în HTML. Privind puțin înainte, astăzi pentru designul atât a textului, cât și aspectÎntregul site și documentul HTML utilizează foi de stil în cascadă (CSS). Pe scurt și simplu, se creează un singur fișier în care sunt scriși toți parametrii de text care pot fi apelați de anumite atribute de etichetă. Asa de, această funcție folosit doar pe site-uri web, deoarece CSS nu este aplicabil atunci când trimiteți știri prin e-mail sau RSS. Și aici aceleași etichete vin în ajutor. Majoritatea acestor etichete, apropo, se referă la designul textului (și sunt un exemplu)
  • A șasea coloană - DTD - poate conține fie litera „L”, fie „F”. Prima - „L” - Loose DTD - înseamnă că eticheta vizavi de care apare această literă poate fi folosită doar într-un tip de document tranzițional (- Tranzițional, despre care am scris în articolul anterior). Al doilea - „F” - Frameset DTD - înseamnă că eticheta poate fi utilizată numai într-un document de tip FRAMESET ( - Frameset). Dacă scrisoarea lipsește, atunci eticheta poate fi folosită în toate tipurile de documente.
  • Și ultima, a șaptea coloană - Descriere - scurta descriere tag, din nou în engleză

Atributele sunt conținute în aceeași pagină a specificației HTML 4.01, dar în fila „atribute”. Există mult mai multe atribute decât etichete. Și din nou voi scrie totul punct cu punct.

  • Prima coloană este Nume - ca și în cazul etichetelor, numele atributului. Totul este în limba engleză, dar cu cunoștințe de bază poți ghici ce face cutare sau cutare atribut.
  • A doua coloană - Elemente înrudite - este o listă cu toate etichetele care folosesc orice atribut. Toate etichetele au linkuri, astfel încât să puteți accesa imediat informații despre etichetă.
  • A treia coloană - Tip - reprezintă toate valorile posibile pentru un anumit atribut. De exemplu, vizavi de atributul dimensiune pe care l-am selectat în eticheta Font este valoarea CDATA. Ne vom uita mai târziu, dar pe scurt, este un set special de opțiuni de dimensiune (în acest caz). La urma urmei, puteți scrie atât pixeli, cât și procente
  • A patra coloană - Implicit - indică dacă atributul este necesar într-o anumită etichetă. De exemplu, în eticheta Img este necesar atributul src, deoarece indică sursa de la care să ia imaginea.
  • Coloanele 6, 7 și 8 înseamnă același lucru ca și în cazul etichetelor.

Toate cele de mai sus se aplică numai pentru versiunea HTML 4.01. Despre HTML 5 vom vorbi într-un alt articol și vom atinge și XHTML. Și acum, așa cum am promis, vom crea o pagină în HTML, pe care o vom experimenta.

Crearea unui fișier în format html - document HTML

În primul rând, să ne dăm seama ce este un document HTML. Și acesta este, de fapt, un fișier în format HTML. Și toate paginile de internet sunt documente HTML. De exemplu, când ajungeți la un site web în bara de adrese de la sfârșit, puteți vedea „.html” sau „.htm” după adresă. Acesta este fișierul pe care îl vom crea cu această extensie. În general, dacă doriți să experimentați mai degrabă cu un site web decât cu o pagină, atunci este mai bine să creați server local— Denver (despre care vreau să scriu totul).

Având în vedere că nici măcar nu am vorbit despre etichetele prezente pe fiecare pagină, pur și simplu vom crea un fișier cu orice nume și extensie.html. Este posibil (și cel mai bine) să utilizați Notepad++ deoarece în acest caz editor de text Se folosește evidențierea codului, ceea ce este foarte convenabil la editarea codului, iar fișierele pot fi salvate într-o varietate de formate. Există și programe în care, atunci când tastați un cod, rezultatul apare imediat în formă procesată.

Deci, trebuie doar să deschidem Notepad++ și să salvăm un fișier cu text arbitrar (poate fi gol), dar în format .html. Pentru a face acest lucru, ca de obicei, faceți clic pe eticheta fișierului, apoi „salvați ca” și căutați „Fișier HyperText Markup Language (extensii de fișiere)” printre lista mare de extensii. Asta e tot, de fapt. Vom adăuga primele rânduri la acest fișier în următorul articol din secțiunea „Crearea unui site web de la zero”

Am decis să creez un tabel în care să vă uitați la etichetele principale limbaj html, și, de asemenea, pentru ce sunt necesare. Etichetele sunt împărțite în categorii pentru a facilita navigarea.

Fiecare etichetă este scrisă între paranteze unghiulare, astfel: . Pentru confortul meu, am enumerat numai numele etichetelor în tabel fără paranteze unghiulare.

Tag Ce înseamnă Citește mai mult
De bază
!doctype Definește tipul de document Stabilește exact modul de procesare a paginii.
html Întregul document Este un container pentru toate elementele unei pagini web
corp Corpul paginii Tot conținutul paginii care va fi afișat pe ecran, structura acestuia
cap Informații importante despre pagina Nu va fi afișat pe ecran, dar este necesar pentru ca site-ul să funcționeze (codificare, conectarea unei foi de stil etc.)
titlu Titlul paginii Numele principal va fi afișat în motorul de căutare și în linia de sus browser
legătură Se conectează fișiere externe Folosind această etichetă, sunt incluse foi de stil și alte fișiere externe
scenariu Include fișiere javascript Atributul necesar este src, care specifică calea către fișier
meta Specifică metainformații Meta informațiile includ codificare și metaetichete.
Etichete semantice html5
antet Creează un antet de site sau de secțiune Pot exista mai multe astfel de etichete pe o pagină. Antetul poate forma antetul site-ului ca întreg,
și titlul articolului etc.
subsol Etichetă pentru crearea unui subsol sau a unei secțiuni de site Similar ca semnificație cu elementul anterior, dar creat pentru a crea partea de jos a site-ului în acesta
articol Container pentru afișarea conținutului în el (principal informații text) Textul principal care este prezent pe pagina dvs. ar trebui să fie inclus în această etichetă.
deoparte Afișează informații secundare care nu au legătură cu cea principală Un container pentru afișarea diverselor widget-uri și alte informații care nu au legătură directă
la textul principal.
Formatare
p Paragraf Eticheta creează un paragraf care este separat de alte elemente prin verticală
indentare.
h1-h6 Titluri h1 este cel mai important titlu (a unui articol, site-ul web), h6 este cel mai mic.
HR Linie orizontală Creează linie orizontalăîntreaga lăţime a blocului în care se află. Înălțimea sa
de obicei 1 pixel. Nu are niciun sens, este doar un separator.
br Rupere forțată de linie Poate fi folosit atunci când nu este creat un paragraf nou, dar trebuie să scrieți text pe un rând nou.
O singură etichetă, cum ar fi hr.
span Element universal în linie Span este conceput pentru a fi utilizat pentru a încheia bucățile de text dorite și pentru a le aplica
design unic.
div Element bloc universal Nu are niciun sens semantic. În esență, un container obișnuit cu proprietăți de bloc.
Folosit pentru o varietate de scopuri.
pre Etichetă pentru afișarea textului așa cum a fost introdus în editor Textul va fi scos cu toate spațiile, întreruperile de rând și indentările păstrate.
figura Un container pentru gruparea elementelor. Cel mai simplu exemplu este gruparea imaginilor și legendelor pentru ele. Eticheta a apărut în specificația html5.
figcaption Titlu pentru elementele colectate în figură. Poate fi poziționat deasupra sau sub figură, în funcție de modul în care este poziționat în cod.
Legături
A Legătură Eticheta are un atribut href obligatoriu, care specifică adresa URL
documentul la care duce linkul.
nav Container pentru link-uri importante Tag din html5, care a fost creat special pentru a plasa cele mai importante link-uri în el
Pe pagina. De fapt, a fost creat pentru a forma meniul principal de pe site.
Liste
ol Lista numerotata Container pentru articolele din listă care vor fi numerotate
ul Listă cu puncte Container pentru articolele din listă care vor fi marcate cu același marcator
li Element din listă Fiecare element individual din listă este plasat în această etichetă asociată. În mod implicit, are proprietăți de bloc.
Imagini
img Afișează orice imagine Atributul necesar este src (calea către imagine). O singură etichetă.
Pentru text
b Font aldine Etichetă asociată. Tot textul care este încadrat în el devine aldine. Nu are niciun sens logic.
puternic Evidențiază textul ca fiind important + îl face aldine Funcționează similar cu eticheta b, dar oferă și cuvintelor o importanță suplimentară.
i Textul cu caractere italice Oferă stil italic
ei Text cu caractere cursive + accentuează cuvintele Adaugă evidențierea logică a cuvintelor pe fundalul altora
q Un mic citat Conceput pentru a evidenția citatele mici pe o pagină
s Afișează textul cu baraj Acționează numai asupra designului, fără a adăuga niciun sens
u Afișează textul subliniat Ca s, aceasta este o etichetă pur de design.
pre Ieșirea textului, păstrând formatarea Păstrează toate spațiile și rupturile de rând care sunt făcute în timpul tastării.
sub Pentru a afișa fontul în indice De asemenea, reduce dimensiunea fontului în sine
cina Pentru a afișa fontul în superscript Funcționează similar cu sub
Rame
iframe Emite un cadru plutitor Parametrul necesar este src. De asemenea, puteți seta lățimea și înălțimea.
Forme
formă Recipient pentru mucegai Conține toate câmpurile care trebuie completate. Are parametrii de metodă necesari
și acțiune astfel încât trimiterea acesteia să funcționeze.
intrare Afișează diferite câmpuri de formular Tipul câmpului depinde de atributul tip. Acesta ar putea fi un câmp pentru introducerea de text, parolă, selectarea unei date etc.
set de câmpuri Separă o parte a formularului de alta De exemplu, dacă unele câmpuri sunt pentru date generale de înregistrare, iar altele sunt pentru
selectarea intereselor, atunci acestea pot fi separate prin astfel de etichete, deoarece acestea sunt grupuri diferite de câmpuri.
legendă Afișează un titlu pentru un grup de câmpuri Acesta este numele containerului fieldset
eticheta Legendă de câmp Vă permite să stabiliți o conexiune între câmpul de intrare și acest element. Când faceți clic pe etichetă, se întâmplă
mutarea focalizării către câmpul cu care este asociat. Și dacă eticheta este asociată cu o casetă de selectare sau butoane radio, atunci când faceți clic pe ea
butonul corespunzător este selectat automat. Legarea se face folosind atributul for.
Selectați Listă derulantă de opțiuni Când faceți clic pe el, puteți selecta una dintre opțiunile specificate anterior. Cu atribut multiplu
Puteți selecta mai multe valori dintr-o astfel de listă.
opțiune Afișează o opțiune pentru o listă derulantă Această etichetă este unică, textul necesar este scris în atributul value.
zona textului Câmp text cu mai multe linii Folosit atunci când trebuie să scrieți mult text. De exemplu, pentru comentarii, recenzii etc.
Mese
masa Recipient principal pentru masă Conține tot conținutul său - rânduri și celule.
legendă Titlul tabelului Poate fi amplasat oriunde în containerul de masă; în orice caz, va fi afișat în partea de sus sau de jos.
tr Creează un rând de tabel Poate exista un număr nelimitat de celule într-un rând. Nu are rost să plasezi altceva decât celule în rândul propriu-zis.
td Creează o celulă Acest text este scris și în celulă. Puteți insera alte elemente HTML în el. De exemplu, poze
video și chiar alte tabele
th Creează o celulă antet Textul din el devine aldin și aliniat la centru
Multimedia
audio Vă permite să introduceți un fișier audio Inserarea are loc folosind etichete unice sursă, care conține calea către fișier. Până acum pentru
Compatibilitate între browsere, dezvoltatorii web trebuie să insereze mai multe formate de fișiere, astfel încât orice browser web
putea să-l identifice.
video Inserează videoclip Procesul este același ca și în cazul audio. Atribut gol controalele adaugă elemente
comenzi video, atribut poster - adaugă o imagine în miniatură.
sursă Specifică calea către fișierul media (audio sau video) Inserate în interiorul etichetelor audio sau video, între părțile lor de deschidere și de închidere.
Calea este specificată folosind atributul src, sunt specificate și codecurile.
Acestea nu sunt toate etichete

În acest tabel puteți găsi toate etichetele principale, dar asta nu este absolut totul. Acestea sunt însă cele care îți vor fi de folos, restul vor fi folosite doar în 5-10% din cazuri și le poți căuta într-o carte de referință detaliată.