Scurtă descriere a limbajului HTML. HTML: Noțiuni de bază pentru începători Care este scopul limbajului de marcare html
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țiere de cod (Notepad++, Visual Studio Code 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 unice nu pot stoca conținut direct; 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 trebuie să fie compuse numai din litere, cifre, cratime și liniuțe 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 HTMLHTML 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 specifică nu numai versiunea HTML (de exemplu html), ci și fișierul DTD corespunzător de pe Internet.
...
Elementele din interiorul etichetei formează un arbore de document, așa-numitul model de obiect document, DOM (model de obiect de document). Î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: ,
, , etc.
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 .
Un element părinte este un element care este legat de alte elemente la un nivel inferior și este situat deasupra lor în arbore. În figura 1 și . Etichetă
Este părinte numai pentru .
Un element copil este un element care este direct subordonat unui alt element la un nivel superior. Î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. ElementSecțiunea... conține informații 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. ElementEticheta 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ă cea mai completă descriere a conținutului paginii web.
1.2.2. ElementO 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 de metadate. 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 a reîncărca automat pagina după o anumită perioadă de timp, trebuie să utilizați valoarea de reîmprospătare:
Pagina va fi reîncărcată în 30 de secunde. Pentru a redirecționa vizitatorul către o altă pagină, trebuie să specificați adresa URL în parametrul URL:
. Eticheta de final, dacă este cerută de sintaxa limbajului, este precedată de o bară oblică: .
Cadrul este o zonă a unui document hipertext cu propriile bare de defilare. Cadrele vă permit să împărțiți paginile în zone dreptunghiulare, fiecare dintre acestea afișând propria pagină. Puteți plasa unul sau mai multe
cadre pe o pagină (această pagină se numește pagină cadru sau set de cadre).
Formularul este o zonă a unui document hipertext care este necesară pentru organizarea feedback-ului de la vizitatorii site-ului.
Applet este un mic program de aplicație transferat pe computerul clientului ca fișier separat și lansat la vizualizarea unei pagini Web.
Script este un program inclus într-o pagină Web pentru a-și extinde capacitățile.
UpLoad - copierea unui document de pe computerul unui client pe un server Web - este utilizată atunci când vă creați propria pagină Web (adică, când o publicați).
Pixel este cel mai mic punct de culoare de pe ecranul unui monitor.
Structura generală a unui document html simpluStructura generală a unui document HTML simplu este:
cometariu
< TITLE >Numele documentului
< BODY >
Aici se află textul documentului HTML în sine.
Să explicăm etichetele specificate ale documentului HTML.
< COMMENT >- comentariu asupra documentului. Nu este necesar.
< HTML >- identificatorul întregului bloc de comenzi HTML.
< HEAD >- Identificator antet document HTML.
< TITLE >- identificatorul titlului viewportului.
< BODY >- identificatorul comenzilor HTML ale documentului de vizualizat.
Trei etichete principale< HTML >, < HEAD >Și< BODY >furnizați browserului informații de bază pentru identificarea și organizarea documentului.
Toate etichetele specificate sunt împerecheate, de ex. fiecare se termină cu o etichetă de capăt cu o oblică. Toate comenzile pot fi scrise atât cu litere mici, cât și cu majuscule.
- o etichetă neîmperecheată este utilizată pentru a indica informații detaliate despre document.
HTML este un limbaj de marcare pentru site-uri web. Mulți oameni 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, un dezvoltator poate crea doar aspectul site-ului. Este important să înțelegeți că niciun site web 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 HTMLPuteți crea o pagină web simplă în orice editor. Chiar și Notepad-ul va face. Pentru un dezvoltator începător, este recomandat 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. Dar în Notepad, trebuie să scrieți fiecare literă manual.
De regulă, Notepad-ul este utilizat numai în cazurile în care nu există alte instrumente la îndemână. Mai întâi, un document text este creat ș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? Să ne uităm la asta mai jos pentru claritate.
Structura documentului HTML. ExempluStructura 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, întreaga structură va fi creată automat. Va trebui să ajustați valorile implicite.
Structura documentului HTML - etichete principale:
Cadrul întregului site este format din aceste trei etichete. Fii atent la imagine. 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 scrieți codul corect, browserul vă va afișa în continuare doar text. Nu va exista nicio conversie de cod.
sectiunea capuluiFigura de mai jos punctul 3 arată secțiunea capului. Această secțiune conține informații despre service. De exemplu, puteți specifica codificarea (articolul 4) și titlul paginii (articolul 5).
Ar trebui să existe întotdeauna un titlu. 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. În plus, 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 este specificată în secțiunea corpului sau după ea, manipulatorul nu îi va acorda atenție.
În plus, secțiunea de cap conține informații pentru conectarea scripturilor, fișierelor de stil, instrucțiuni pentru motoarele de căutare sau orice alte date pe care utilizatorul nu ar trebui să le vadă, dar sunt importante pentru browser sau programatori.
Stiluri de legăturăStructura unui document HTML vă permite să conectaț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.
Fișierul este conectat după cum urmează.
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.
O altă opțiune este să definiți stilurile direct în secțiunea de cap.
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 aduse acestuia 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 tuturor paginilor existente ale site-ului.
Dacă clasa pe care o creați va fi folosită doar pe o singură pagină, atunci această opțiune este potrivită pentru dvs.
Scripturi de conectareScripturile sunt conectate după cum urmează.
Două atribute sunt necesare aici: type și src. În primul indicăm 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.
secțiunea corpuluiStructura documentului html este de așa natură încât trebuie să plasați conținut care va fi vizibil pentru utilizator doar în secțiunea body. Numele etichetei vorbește de la sine.
Aici este indicat întregul cod principal al paginii, 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.
Să ne uităm la cele mai de bază etichete care pot fi folosite în zona corpului. Nu sunt multe dintre cele principale. Veți învăța totul pe măsură ce cunoștințele și practica dvs. cresc.
Etichetele principaleStructura unui document HTML necesită o ordine obligatorie a elementelor de scriere. Etichetele ar trebui să fie întotdeauna înconjurate de paranteze la margini. Fără aceasta, browserul nu va înțelege că aceasta este o etichetă. Paranteza de deschidere este întotdeauna urmată de numele elementului (etichetă). Dacă permiteți un spațiu între< и именем, то браузер посчитает это текстом.
Să ne uităm la exemplul unei etichete de imagine. Vă rugăm să rețineți că această etichetă nu este o etichetă de închidere, spre deosebire de linkuri, paragraf și multe altele.
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.
Atributul src din toate etichetele indică calea fișierului care trebuie încărcat. Atributul alt pe toate elementele specifică o scurtă descriere. În acest caz, fotografia bird.jpg este încărcată cu o descriere - o fotografie a unei păsări.
În plus, puteți specifica dimensiuni, numai lățime sau înălțime, titlu, aliniere, clasă de stil sau chenar.
Să ne uităm la alte etichete principale care sunt specificate în secțiunea body.
Scop |
|
Imagini |
|
Încadrați textul într-o nouă linie |
|
… | Miniatură |
Text tăiat |
|
Text subliniat |
|
Dezvoltatorii începători nu pot întotdeauna să-și imagineze imediat toate acestea în mod speculativ. Uită-te la câteva exemple de structură a paginii web și atunci cu siguranță vei înțelege.
Termenul HTML (HyperText Markup Language) înseamnă „limbaj de marcare hipertext”. Prima versiune de HTML a fost dezvoltată de Tim Berners-Lee, un bursier la Laboratorul European de Fizică a Particulei.
HTML a suferit câteva modificări de la crearea primei versiuni. Ca multe lucruri din lumea computerelor, versiunile sau specificațiile HTML s-au dovedit a fi numerotate. Specificațiile 2.0, 3.0 și 3.2 sunt cunoscute. Specificația HTML actuală poate fi întotdeauna găsită pe serverul W3C.
HyperText Markup Language (HTML) este un limbaj standard conceput pentru crearea de documente hipertext în mediul WEB. Documentele HTML pot fi vizualizate de diferite tipuri de browsere WEB. Când un document este creat folosind HTML, un browser WEB poate interpreta HTML pentru a evidenția diferitele elemente ale documentului și pentru a le procesa mai întâi. Utilizarea HTML permite formatarea documentelor astfel încât să poată fi prezentate folosind fonturi, linii și alte elemente grafice pe orice sistem care le vizualizează.
Majoritatea documentelor au elemente standard, cum ar fi un titlu, paragrafe sau liste. Folosind etichete HTML puteți desemna aceste elemente, oferind browserelor WEB informații minime pentru afișarea acestor elemente, păstrând în același timp structura generală și completitudinea informațională a documentelor. Tot ceea ce este necesar pentru a citi un document HTML este un browser WEB care interpretează etichetele HTML și afișează documentul pe ecran în forma pe care i-o oferă autorul.
În cele mai multe cazuri, autorul documentului determină strict aspectul documentului. În cazul HTML, cititorul (pe baza capacităților browserului WEB poate, într-o anumită măsură, să controleze aspectul documentului (dar nu și conținutul acestuia). HTML vă permite să marcați unde ar trebui să fie un titlu sau un paragraf. documentul utilizând o etichetă HTML și apoi furnizează browser-ul WEB pentru a interpreta aceste etichete.
De exemplu, un browser WEB poate recunoaște începutul unei etichete de paragraf și poate prezenta documentul în forma dorită, în timp ce altul nu are această capacitate și prezintă documentul într-o singură linie. Utilizatorii unor browsere WEB au și posibilitatea de a personaliza dimensiunea și tipul fontului, culoarea și alți parametri care afectează afișarea documentului.
Documentele HTML pot fi create folosind orice editor de text sau editori și convertoare HTML specializate. Alegerea editorului care va fi folosit pentru a crea documente HTML depinde numai de confortul și preferințele personale ale fiecărui autor. De exemplu, editorii HTML precum Netscape Navigator Gold de la Netscape vă permit să creați documente grafic folosind tehnologia WYSIWYG (What You See Is What You Get). Pe de altă parte, majoritatea instrumentelor tradiționale de creare a documentelor au convertoare care vă permit să convertiți documentele în format HTML.
Toate etichetele HTML încep cu „” (paranteză în unghi drept). De obicei, există o etichetă de început și o etichetă de final. De exemplu, iată etichetele de titlu care definesc textul din interiorul etichetelor de început și de sfârșit care descriu titlul documentului: Titlul documentului
HTML nu face distincție între majuscule și minuscule, așa că exemplul de mai sus ar putea arăta astfel:
Titlul documentului
Eticheta de sfârșit arată la fel ca eticheta de început și diferă de aceasta printr-o bară oblică înainte de textul dintre parantezele unghiulare. În acest exemplu, eticheta îi spune browserului WEB să folosească formatul titlului, iar eticheta îi spune textului antetului să se termine.
Unele etichete precum
(etichetă care definește un paragraf) nu necesită o etichetă de final, dar utilizarea acesteia oferă textului sursă al documentului o lizibilitate și o structură îmbunătățite.
Când un browser WEB primește un document, acesta determină modul în care documentul trebuie interpretat. Prima etichetă care apare în document trebuie să fie . Această etichetă spune browserului WEB că documentul dvs. este scris folosind HTML. Un document HTML minim ar arăta astfel:
...corpul documentului...
Antetul documentului
Eticheta pentru capul documentului trebuie folosită imediat după etichetă și nicăieri în corpul documentului. Această etichetă este o descriere generală a documentului. Evitați să plasați orice text în interiorul . Eticheta de început este plasată imediat înaintea etichetei și a altor etichete care descriu documentul, iar eticheta de final este plasată imediat după sfârșitul descrierii documentului. De exemplu:
Lista angajaților Titlul documentului
Majoritatea browserelor WEB afișează conținutul etichetei în bara de titlu a ferestrei care conține documentul și în fișierul de marcaje, dacă este acceptat de browserul WEB. Titlul, delimitat de etichetele și, este plasat în interiorul etichetelor -, așa cum se arată în exemplul de mai sus. Titlul documentului nu apare atunci când documentul în sine este afișat în fereastră.
Comentarii
Ca orice limbă, HTML vă permite să inserați comentarii în corpul unui document, care sunt salvate atunci când documentul este transferat în rețea, dar nu sunt afișate de browser. Sintaxa comentariului:
Comentariile pot apărea oriunde într-un document și în orice cantitate.
Etichetele pentru corpul documentului identifică componentele documentului HTML afișate în fereastră. Corpul documentului poate conține link-uri către alte documente, text și alte informații formatate.
Corpul documentului
Corpul documentului trebuie să fie între etichetele și. Aceasta este partea din document care este afișată ca text și informații grafice (semantice) ale documentului dumneavoastră.
Eticheta de paragraf
Spre deosebire de majoritatea procesoarelor de text, returnările transport sunt în general ignorate într-un document HTML. O pauză fizică de paragraf poate fi localizată oriunde în textul sursă al documentului (pentru a fi mai ușor de citit). Cu toate acestea, browserul separă paragrafele numai dacă există o etichetă
Dacă nu separați paragrafele cu eticheta
Documentul dvs. va apărea ca un paragraf mare.
Legăturile hipertext sunt o componentă cheie care face WEB-ul atractiv pentru utilizatori. Prin adăugarea de link-uri hipertext (denumite în continuare linkuri), realizați un set de documente conectate și structurate, care permite utilizatorului să obțină informațiile de care are nevoie cât mai rapid și comod posibil.
Legăturile au un format standard care permite browserului să le interpreteze și să realizeze funcțiile necesare (metode de apelare) în funcție de tipul de legătură. Legăturile pot indica un alt document, o locație specifică din documentul respectiv sau pot efectua alte funcții, cum ar fi solicitarea unui fișier prin FTP pentru afișare de browser. O adresă URL poate indica o anumită locație dintr-o cale absolută sau poate indica un document din calea curentă, care este adesea folosită atunci când se organizează site-uri WEB structurate mari. Reveniți la linkul anterior dacă mișcarea a avut loc în cadrul documentului. Dacă utilizați linkuri într-un document și apoi apăsați tasta Înapoi, nu veți merge la linkul anterior, ci veți reveni la partea din document pe care o vizualizați înainte.
Una dintre cele mai atractive caracteristici ale Web-ului este capacitatea de a include link-uri către grafice și alte tipuri de date într-un document HTML. Acest lucru se face folosind o etichetă . Utilizarea acestei etichete poate îmbunătăți semnificativ aspectul și funcționalitatea documentelor.
Există două moduri de a utiliza grafica în documentele HTML. Prima este încorporarea imaginilor grafice în document, ceea ce permite utilizatorului să vadă imaginile direct în contextul altor elemente ale documentului.
Aceasta este cea mai utilizată tehnică în proiectarea documentelor, numită uneori „imagine inline”.
Unele browsere WWW permit utilizatorului, prin completarea unui formular special care returnează valoarea rezultată, să efectueze anumite acțiuni pe serverul tău WWW. Când formularul este interpretat de un browser WEB, sunt create elemente speciale de ecran GUI, cum ar fi câmpuri de introducere, casete de selectare, butoane radio, meniuri derulante, liste derulabile, butoane etc. Când un utilizator completează un formular și dă clic pe butonul „Trimite” (Trimite este un tip special de buton care este specificat atunci când descrie un document), informațiile introduse de utilizator în formular sunt trimise către serverul HTTP pentru procesare și transmitere la alte programe care rulează pe server, în conformitate cu interfața CGI (Common Gateway Interface).
Când descrii un formular, fiecare element de introducere a datelor are o etichetă. Când un utilizator plasează date într-un element de formular, informațiile sunt plasate în secțiunea VALUE a acelui element. Una dintre cele mai atractive caracteristici ale Web-ului este capacitatea de a include link-uri către grafice și alte tipuri de date într-un document HTML.
Î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 CSSScopul 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.