HTML este un limbaj de marcare a site-ului web. Mulți o consideră programare, dar nu este. HTML nu conține niciuna dintre variabilele, calculele, matricele și alte elemente găsite în niciun limbaj de programare.
Folosind HTML, dezvoltatorul poate crea doar aspectul site-ului. Este important să înțelegeți că niciun site nu există fără markup. HTML este baza pentru crearea paginilor web. Toate celelalte funcționalități sunt adăugate de diferite limbaje de programare.
Crearea unui document html
Puteți crea o pagină web simplă în orice editor. Chiar și Notepad-ul va face. Pentru un dezvoltator începător, se recomandă să folosească alți editori care au funcții de înlocuire automată și alte sfaturi. Datorită acestui lucru, puteți crea tabele gata făcute, link-uri, imagini și alte elemente. Și în Notepad, fiecare literă trebuie scrisă manual.
De regulă, Notepad-ul este utilizat numai atunci când nu există alte instrumente la îndemână. Mai întâi, este creat un document text și apoi salvat în format html. Toate paginile site-ului trebuie să aibă extensia html.
Limbajul html este ierarhic. Adică, există o structură specială a documentului html. Ce este? Luați în considerare mai jos pentru claritate.
Structura documentului html. Exemplu
Structura este întotdeauna aceeași. Dacă doriți să schimbați ceva, browserul nu îl va putea procesa. Drept urmare, nu vei obține ceea ce ți-ai propus.
Figura de mai sus arată structura oricărui fișier html. Primul element indică tipul fișierului. Această etichetă este specificată o dată. Dacă utilizați editori speciali, atunci întreaga structură va fi creată automat. Va trebui să modificați valorile implicite.
Structura documentului html - etichete principale:
Aceste trei etichete formează cadrul întregului site. Acordați atenție desenului. Toate aceste etichete au o etichetă de închidere cu semnul „/”. Dacă scrieți de mână, obișnuiți-vă să puneți ambele etichete simultan - deschiderea și închiderea.
S-a spus mai sus că paginile site-ului au extensia .html. Adică, dacă creați un document text, dar în același timp scrieți codul corect, browserul vă va afișa în continuare doar text. Nu va exista nicio conversie de cod.
sectiunea capului
În figură, sub punctul 3, este indicată secțiunea capului. Această secțiune conține informații despre service. De exemplu, puteți specifica codificarea (punctul 4) și titlul paginii (punctul 5).
Titlul ar trebui să fie întotdeauna. Fără el, niciun motor de căutare nu va putea determina numele conținutului (textului) pe o pagină web. Și acest lucru este rău pentru promovarea site-ului. Mai mult, browserul nu va afișa titlul paginii în partea de sus. Acesta este un inconvenient pentru utilizator.
Structura documentului html este de așa natură încât este indicat doar în secțiunea de cap. Dacă eticheta
specificat în secțiunea caroserie sau după aceasta, manipulatorul nu va acorda atenție acesteia.</p><p>În plus, secțiunea de cap conține informații pentru includerea de scripturi, fișiere de stil, instrucțiuni pentru motoarele de căutare sau orice alte date pe care utilizatorul nu trebuie să le vadă, dar sunt importante pentru browser sau programatori.</p><h2>Stiluri de conectare</h2><p>Structura documentului html vă permite să includeți stiluri în diferite moduri. Mai mult, ele pot fi scrise individual în fiecare element. Dar această metodă nu este recomandată, deoarece codul devine prea mare și incomod.</p><p>Fișierul este conectat după cum urmează.</p><p><link rel = “stylesheet” href = “style.css” type = “text/css”></p><p>Atributul href specifică calea către fișier. Dacă există o eroare în cale, stilurile nu se vor încărca. Este necesar și atributul type, ceea ce indică faptul că acesta este un fișier CSS.</p><p>O altă opțiune este să definiți stilurile direct în secțiunea de cap.</p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/43047/1327414.jpg' height="203" width="259" loading=lazy loading=lazy></p><p>Dar nici această opțiune nu este 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ă folosești metoda prezentată în imaginea de mai sus, atunci va trebui să faci modificări la toate paginile existente ale site-ului.</p><p>Dacă clasa pe care o creați va fi folosită doar pe o singură pagină, atunci această opțiune este pentru dvs.</p><h2>Scripturi de conectare</h2><p>Scripturile sunt conectate după cum urmează.</p><p><script type=“text/javascript” src=“main.js”></script></p><p>Două atribute sunt necesare aici: type și src. Primul indică faptul că acesta este un fișier Javascript, iar al doilea - unde se află fișierul. Dacă faci o greșeală de scriere, nimic nu va funcționa.</p><h2>secțiunea corpului</h2><p>Structura documentului html este de așa natură încât trebuie să plasați doar conținut care va fi vizibil pentru utilizator în secțiunea body. Numele etichetei vorbește de la sine.</p><p>Acesta specifică întregul cod al paginii principale, care poate include un număr nelimitat de elemente. Dar cu cât codul este mai lung, cu atât va dura mai mult procesarea.</p><p>Să ne uităm la cele mai de bază etichete care pot fi folosite în zona corpului. Nu sunt multe dintre cele principale. Tot restul le vei învăța pe măsură ce cunoștințele și practicile tale cresc.</p><h2>Etichete principale</h2><p>Structura unui document html necesită o ordine obligatorie a elementelor de scriere. Etichetele ar trebui să fie întotdeauna înconjurate de paranteze.<>. Fără aceasta, browserul nu va înțelege că aceasta este o etichetă. Paranteza de deschidere este întotdeauna urmată de numele elementului (tag). Dacă permiteți un spațiu între< и именем, то браузер посчитает это текстом.</p><p>Să luăm un exemplu de etichetă de imagine. Rețineți că această etichetă nu se închide, spre deosebire de linkuri, paragrafe și multe altele.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/43047/1327415.jpg' width="100%" loading=lazy loading=lazy></p><p>Ordinea atributelor nu contează. Dar scrierea (designul) lor este foarte importantă. Numele atributului este întotdeauna primul, apoi semnul egal, apoi valoarea atributului este scrisă între ghilimele. Valoarea poate fi diferită - digitală sau text.</p><p>Atributul src din toate etichetele specifică calea fișierului care urmează să fie încărcat. Atributul alt pe toate elementele specifică o scurtă descriere. În acest caz, o fotografie bird.jpg este încărcată cu o descriere - o fotografie a unei păsări.</p><p>În plus, puteți specifica dimensiuni, numai lățime sau înălțime, antet, aliniere, clasă de stil sau cadru.</p><p>Să ne uităm la alte etichete principale care sunt specificate în secțiunea body.</p><table align="center" cellpadding="5" cellspacing="0" class="if"><tbody><tr><td valign="top" width="153">
</td><td valign="top" width="554"><p>Scop</p>
</td>
</tr><tr><td valign="top" width="153">
</td><td valign="top" width="554">
</td>
</tr><tr><td valign="top" width="153">
</td><td valign="top" width="554"><p>Imagini</p>
</td>
</tr><tr><td valign="top" width="153"></p>
</td><td valign="top" width="554">
</td>
</tr><tr><td valign="top" width="153">
</td><td valign="top" width="554"><p>Încheierea textului pe o nouă linie</p>
</td>
</tr><tr><td valign="top" width="153"><p><strong>…</strong></p>
</td><td valign="top" width="554"><p>Miniatură</p>
</td>
</tr><tr><td valign="top" width="153">
</td><td valign="top" width="554">
</td>
</tr><tr><td valign="top" width="153">
</td><td valign="top" width="554"><p>Text barat</p>
</td>
</tr><tr><td valign="top" width="153">
</td><td valign="top" width="554"><p>Text subliniat</p>
</td>
</tr><tr><td valign="top" width="153">
</td><td valign="top" width="554">
</td>
</tr><tr><td valign="top" width="153"><p><table></table></p>
</td><td valign="top" width="554">
</td>
</tr></tbody></table><h2>Cum îți poți imagina toate astea în capul tău</h2><p>Dezvoltatorii începători nu își pot imagina întotdeauna imediat toate acestea în mod speculativ. Uită-te la câteva exemple de structură a paginii web și atunci cu siguranță vei înțelege.</p>
<i>
</i><p>Este timpul să luați în considerare cel mai simplu document HTML ca exemplu. Vom scrie cod care va afișa expresia „Bună, lume!” în fereastra browserului. (tradus literal din engleză - „Bună, lume!”). De obicei, această practică de a scrie cod este prima experiență atunci când învățați o nouă limbă. O astfel de enunțare a problemei atrage atenția elevului asupra mai multor puncte cheie ale limbajului de programare (în cazul nostru, limbajul de marcare), dintre care principalul este structura de bază a programului (în cazul nostru, pagina web).</p>
<h2>doctype</h2>
<!DOCTYPE html>
<html>
</html>
<p>Acest element este numit și element rădăcină, deoarece toate celelalte elemente ale documentului sunt situate în el. Elementul rădăcină poate avea doar două elemente copil: <head>Și <body>.</p>
<h2>element cap</h2>
<p>Element <head>este un container pentru alte elemente care oferă informații despre document, cunoscut sub numele de metadate. Aceste metadate indică browserului locația scripturilor externe și a foilor de stil, stabilește o relație între documentul curent și alte resurse și pot furniza date suplimentare destinate browserelor. Pe lângă elementul necesar <title>, discutat mai târziu în acest capitol, browserele nu redă nicio metadate care se află în interiorul elementului <head>.</p>
<p>Element <head>trebuie să fie primul element copil <html>, niciun conținut sau elemente nu ar trebui să fie înaintea acestuia:</p><p>
<!DOCTYPE html>
<html>
<head>
</head>
</html>
</p><h2>element de titlu</h2>
<p>Element <title>oferă un titlu text pentru document. Fiecare document HTML trebuie să aibă exact un element. <title>, care trebuie plasat în interiorul elementului <head>:</p><p>
<!DOCTYPE html>
<html>
<head>
<title>Titlul ferestrei
Browserele afișează conținutul elementului
ca titlul (numele) documentului, care este de obicei afișat în partea de sus a ferestrei browserului sau în titlul filei:</p>
<h2>element al corpului</h2>
<p>Element <body>este un container pentru tot conținutul unei pagini web. Tot ceea ce este afișat în fereastra browserului și pe care utilizatorul le vede este conținut în ea (fiecare document HTML poate avea un singur element <body>). Scopul său principal este de a separa conținutul documentului de metadate:</p><p>
<!DOCTYPE html>
<html>
<head>
<title>Titlul ferestrei
