Structura documentului HTML: etichete principale, exemplu

HTML este limbajul de marcare. Mulți oameni o consideră programabilă, dar nu este. În HTML, nu există variabile, calcule, matrice sau alte elemente prezente în niciun limbaj de programare.

Folosind codul HTML, dezvoltatorul poate crea doar aspectul site-ului. Este important să înțelegeți că niciun site nu există fără marcare. HTML reprezintă baza pentru crearea paginilor web. Restul funcțional este adăugat de diferite limbi de programare.

Crearea unui document html

Puteți crea o pagină de site simplu în orice editor. Chiar și "Notepad" va face. Este recomandat unui dezvoltator novice să utilizeze și alți editori care au funcții de auto-substituire și alte sugestii. Datorită acestui fapt, puteți crea mese gata făcute, link-uri, imagini și alte elemente. Și în "Notepad" fiecare literă trebuie scrisă manual.

De regulă, "Notepad" este folosit numai în cazurile în care nu există alte instrumente la îndemână. Mai întâi, este creat un document de tip text și apoi salvat în format html. Toate paginile de pe site trebuie să aibă extensia html.

Limba html este ierarhică. Adică, există o structură specială pentru documentul html. Ce este? Să luăm în considerare mai jos pentru claritate.

Structura documentului html. exemplu

Structura este întotdeauna aceeași. Dacă doriți să schimbați ceva, browserul nu va putea să o proceseze. Ca urmare, nu veți obține ceea ce ați intenționat.

Figura de mai sus arată structura oricărui fișier html. Primul element indică tipul fișierului. Această etichetă este specificată o singură dată. Dacă folosiți editoare speciale, întreaga structură va fi creată automat. Va trebui să ajustați valorile implicite.

Structura documentului html este principalele etichete:

Dintre aceste trei etichete este scheletul întregului site. Fiți atenți la imagine. Toate aceste etichete au o etichetă de închidere cu un caracter "/". Dacă scrieți manual, vă obișnuiți să puneți ambele etichete simultan - deschiderea și închiderea.

Deasupra sa spus că paginile site-urilor au extensia .html. Asta este, dacă creați un document text, dar în același timp scrieți codul corect, browserul vă va arăta totuși doar textul. Nu va exista conversie de cod.

Secțiunea capului

În figura de mai jos, punctul 3 este indicat. Această secțiune indică informațiile despre serviciu. De exemplu, puteți specifica codificarea (elementul 4) și titlul paginii (pasul 5).

Titlul ar trebui să fie întotdeauna. Fără aceasta, niciun motor de căutare nu poate determina numele conținutului (textului) de pe pagina web. Și acest lucru este rău pentru promovarea site-ului. Mai mult, browserul din partea de sus nu specifică titlul paginii. Acesta este un inconvenient pentru utilizator.

Structura html-document este astfel încât titlul

În plus, secțiunea cap specifică informații pentru conectarea scripturilor, fișierelor de stil, instrucțiunilor pentru motoarele de căutare sau a altor date pe care un utilizator nu ar trebui să le vadă, dar acestea sunt importante pentru browser sau programatori.

Conectarea stilurilor

Structura html-document vă permite să conectați stiluri în diverse moduri. Mai mult, ele pot fi scrise individual în fiecare element. Dar această metodă nu este recomandată, deoarece codul devine prea mare și incomod.

Motoarele de căutare recomandă ca toate stilurile să fie redate într-un fișier separat, iar elementele să utilizeze pur și simplu diferite clase.

Fișierul este conectat după cum urmează.

Atributul href specifică calea spre fișier. Dacă există o eroare în cale, stilurile nu se vor încărca. De asemenea, este necesar atributul type, ceea ce indică faptul că acesta este un fișier css.

O altă opțiune este definirea stilurilor direct în secțiunea cap.

Dar această opțiune nu este, de asemenea, foarte recomandată. Aceste metode sunt foarte diferite prin faptul că fișierul css poate fi unul pentru întregul site și toate modificările din acesta vor fi aplicate instantaneu tuturor paginilor. Și dacă utilizați metoda prezentată în figura de mai sus, atunci va trebui să faceți modificări la toate paginile existente de pe site.

Dacă clasa pe care o creați va fi utilizată numai pe o singură pagină, atunci această opțiune este potrivită pentru dvs.

Conectarea scripturilor

Scripturile sunt conectate după cum urmează.

Două atribute sunt necesare aici: tip și src. În primul rând, indicați că acesta este un fișier jаvascript, iar al doilea este locul unde este localizat fișierul. Dacă faceți o greșeală, nimic nu va funcționa.

Organismul secțiunii

Structura documentului html este de așa natură încât este necesar să se plaseze un conținut care va fi vizibil pentru utilizator numai în secțiunea corpului. Numele etichetei vorbește de la sine.

Acesta specifică tot codul paginii principale, care poate include un număr nelimitat de elemente. Cu cât codul este mai lung, cu atât mai mult va fi procesat.

Luați în considerare cele mai elementare etichete pe care le puteți utiliza în zona corpului. Nu sunt atât de multe de bază. Toate celelalte vor fi descoperite pe masura ce cresteti cunoasterea si practica.

Etichete de bază

Structura html-documentului necesită o ordine obligatorie de elemente de scriere. Etichetele ar trebui să fie întotdeauna înconjurate de paranteze în jurul marginilor <>. Fără aceasta, browserul nu înțelege că este o etichetă. După paranteza de deschidere, numele elementului (eticheta) urmează întotdeauna. Dacă permiteți un spațiu între < și numele, browserul va considera acest lucru drept text.

Luați în considerare exemplul unei etichete de imagine. Rețineți că această etichetă nu se închide, spre deosebire de linkuri, paragrafe și multe altele.

Ordinea atributelor nu contează. Dar scrierea lor este foarte importantă. Întotdeauna vine numele atributului, apoi semnul egal, apoi valoarea atributului este scrisă în ghilimele. Valoarea poate fi diferită - digital sau text.

Atributul src din toate etichetele indică calea fișierului pe care doriți să îl încărcați. Atributul alt în toate elementele indică o scurtă descriere. În acest caz, este încărcată o imagine a bird.jpg cu o descriere a unei fotografii de pasăre.

În plus, în tag img, puteți specifica dimensiunile, numai lățimea sau înălțimea, titlul, alinierea, clasa de stil sau cadrul.

Luați în considerare celelalte etichete principale care sunt enumerate în secțiunea de caroserie.

tabele

Cum îmi pot imagina toate astea în capul meu

Dezvoltatorii încep să nu-și imagineze întotdeauna că toate acestea sunt speculative. Uitați-vă la câteva exemple de structură a paginilor web, iar apoi veți deveni clare.

Există o astfel de opțiune:

Și aceasta:

Utilizarea stilurilor

După cum sa menționat la început, puteți conecta stiluri la ambele fișiere și specificați în secțiunea cap. În orice caz, descrierea claselor este destul de aceeași.

De exemplu, puteți specifica un stil pentru antet. Apoi trebuie să scrieți h1 (deoarece stilul va fi pentru antetul al doilea nivel), deschideți paranteze și scrieți ce proprietăți vor fi în acest element. Dacă cunoașteți engleza de bază, atunci nu ar trebui să existe probleme. Toate proprietățile sunt numite limbaj uman.

Dacă doriți să specificați acest stil pentru mai multe elemente simultan, scrieți-le separat prin virgule.

Rezultatul este un antet roșu.

Metodele de mai sus sunt potrivite pentru proiectarea elementelor standard. Dar puteți crea și propriile clase. Numele lor ar trebui să înceapă cu un punct, apoi se scrie un nume arbitrar.

Trebuie să le folosiți așa.

Notă: dacă ați specificat setările de stil pentru un element standard, nu este necesar să scrieți clasa de cuvinte. Stilul va fi aplicat în mod implicit. În atributul de clasă, puteți specifica numai acele stiluri pe care le începeți cu o perioadă.