Ce este HTML. HTML - ce este această extensie? HTML pentru începători: coduri, fișiere și editori. Cum se creează un fișier HTML

Și se traduce prin „limbaj de marcare hipertext”. Hypertextul este o metodă specială de navigare a paginilor de Internet, implementată sub formă de link-uri hipertext. Făcând clic pe aceste linkuri, puteți naviga cu ușurință în structura site-ului. Tranzițiile în acest caz nu au loc liniar, adică. ai întotdeauna posibilitatea de a merge la orice pagină a site-ului, link-ul către care este vizibil în prezent.

Markup se referă la anumite reguli și proprietăți care sunt atribuite elementelor paginii. Ele sunt implementate sub formă de așa-numite etichete. De exemplu, pentru a indica faptul că un anumit text de pe o pagină ar trebui să fie centrat, îl puteți marca cu eticheta centrală. Puteți vedea codul HTML al unei anumite pagini prin meniul contextual al acesteia. De exemplu, pentru a accesa acest cod în browserul Firefox, trebuie să faceți clic dreapta pe pagină și să selectați „Codul sursă paginii”.

Cum funcționează codul HTML?

Codul HTML este un set de etichete scurte care conțin elemente de pagină. Tot acest cod este stocat într-un fișier cu extensia .html sau .htm. Când deschideți un astfel de fișier într-un browser, codul este interpretat de acesta, iar pagina finală este afișată în fereastra programului. Cunoscând limbajul de marcare HTML, aproape oricine își poate crea propria pagină.

Care sunt tipurile de etichete?

Etichetele sunt constructe separate în codul HTML. Acesta este text simplu inclus în parantezele unghiulare „”. Puteți vedea etichete în codul HTML al aproape oricărei pagini. Etichetele în sine nu sunt afișate pe pagini; ele afișează un element specific care este codificat folosind etichete. De exemplu, dacă există o imagine pe pagină, atunci codul ei HTML conține eticheta img.

Limitări HTML

În ciuda faptului că codul HTML vă permite să construiți o pagină de hipertext destul de de înaltă calitate, acesta are limitările sale. Paginile care conțin exclusiv un astfel de cod sunt statice, adică. le lipsește dinamica, efectele speciale și alte caracteristici. Dar ele pot fi introduse folosind alte limbaje, cum ar fi Java Script. Marea majoritate a site-urilor web moderne sunt create folosind limbi suplimentare care le fac mai vii și mai interactive.

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:

...

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 . Î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.

Probabil o sa incep de la inceput...

Limbajul HTML nu este în mod inerent un limbaj de programare, este un limbaj de marcare pentru documente hipertext. Cu alte cuvinte, el este responsabil de aranjarea în document a textelor, desenelor, tabelelor... destinate vieții pe Internet. Este imposibil să-l forțezi să calculeze cât de mult doi ori doi este doi, nu există funcții logice în el, dar este frumos și, cel mai important, ușor să postezi informațiile că de două ori doi înseamnă patru - este ușor. Acest limbaj este citit folosind programe familiare pentru dvs., numite browsere (browsere), care „cunosc” comenzile standard ale limbajului html și le „mestecă”, afișează documente pe monitorul computerului în forma în care webmasterul - compilator de documente - vrea să le prezinte.

Acum despre comenzi - se numesc descriptori, dar mai des - etichete.

Să revenim la prima noastră pagină... așa că am scris:

Salut Lume!!!

Deci asta este scris între<…>- se numesc etichete; nu sunt vizibile pentru cititorul care se uită la pagina dvs., dar sunt vizibile clar pentru browserul care dă peste etichetă înțelege asta ca un semnal că în continuare va fi un document care trebuie citit și afișat pe monitor în forma cerută... și aici este eticheta indică faptul că documentul s-a încheiat și nu este nevoie de nimic mai mult de la acesta, adică browserul, și se poate odihni cu conștiința curată.

Deci ce am scris? și cum îl citește browserul?

Gânduri despre browser:

- începutul documentului.. este mult de lucru din nou..
- uită-te la dicționarul englez și traduce „head”...nu e nicio problemă cu rumegușul în capul meu!! ... aici sunt informațiile de bază ale serviciului despre document.. deci ce vor de la mine?
- tot numele s-a terminat.. poți merge mai departe..
- da, și pe lângă nume, nu mai ținem gânduri prostii în cap..
- „Corpul” documentului, tot ce este scris mai jos este expus public
Salut Lume!!! - ce drăguț! Destul deja!!!

- mutați textul la rândul următor... chiar pot ghici ce va fi în el...
Numele meu este (numele tău aici), aceasta este prima mea pagină!- Ei bine, da, este... ei nu pot veni cu ceva mai original..
- asta e tot? Nu arăta nimic altceva?
- Ei bine, ăsta e sfârșitul!! Nu vă treziți, nu vă întoarceți, în caz de incendiu, scoateți primul!!

Cam așa funcționează citirea paginii noastre.. După cum puteți vedea, browserul este un tip destul de capricios, deci trebuie să dea comenzi clare și precise, altfel va înjură... și cu voce tare.. și, prin urmare, să ne amintim următoarele lucruri:

1) Este necesar să ne amintim o dată pentru totdeauna că dacă există o etichetă de deschidere <…> atunci trebuie să existe una de închidere

Deși există excepții, cum ar fi eticheta noastră
- nu necesita inchidere pentru ca scrie doar ca ar trebui scris pe un rand nou. Apropo, încercați să adăugați încă câteva din același înainte de linia „Numele meu este....” și veți vedea că, ca rezultat, a scăzut vizibil.. (Ei bine, bineînțeles, salvați modificările în bloc-notes și faceți clic pe butonul „reîmprospătare” din browser)

2) Toate documentele trebuie să aibă următorul șablon de cod:

- începutul documentului
- începutul capului
- închizând capul
- începutul corpului
- închiderea corpului
- sfârşitul documentului

Aceste etichete sunt necesare! Ele trebuie scrise întotdeauna pentru fiecare pagină nouă, și numai în această ordine! Nu incerca sa dai totul peste cap...

3) Despre comandă:

Etichetă de deschidere și închidere după tip<…> este un fel de container, o cutie în care pot fi depozitate alte etichete - cutii mai mici... prin urmare, conform logicii, documentul ar trebui să arate așa:

<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
conţinut

Dacă scrii, de exemplu, așa:

<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
conţinut

Se va dovedi a fi gunoi care nu ți se potrivește în cap, cel „mare” este deja închis, iar cel „mic” „ie iese” din el, care este blocat în „mijloc”, iar „ conținut” s-a împrăștiat peste tot.. Este greu chiar și pentru o persoană să-și imagineze ce se vorbește acolo despre browser.. Structurați clar codul paginii dvs., altfel nimic nu va funcționa..

Ei bine, am învățat cum să scriem text simplu, a fost început! in capitolul urmator voi vorbi despre ce poti face cu el..

Când scrieți un site web, creați un folder în orice loc convenabil de pe hard disk, numiți-l cum doriți, atâta timp cât este clar... salvați paginile în acest folder, dându-le nume semnificative... opțiuni precum aaa. html, 123.html va duce la confuzie și confuzie... În această etapă, acest sfat nu va părea practic, dar pe viitor vă va facilita foarte mult munca. Imaginați-vă, de exemplu, cel puțin 20-30 de astfel de fișiere ale căror nume trebuie să aveți în vedere pentru a le face referințe încrucișate. Comanda mai intai!

Când scrieți cod, vă sfătuiesc să respectați „stilul de scriere bun”, adică să scrieți etichetele într-o manieră „scăriță”, deoarece o etichetă este imbricată în alta. În timp, veți înțelege acel cod de citire scris astfel:






Salut Lume!!!

Numele meu este Carlson, aceasta este prima mea pagină!



Mult mai usor decat asta:






Salut Lume!!!

Numele meu este Carlson, aceasta este prima mea pagină!



Și chiar mai mult decât atât:

Salut Lume!!!
Numele meu este Carlson, aceasta este prima mea pagină!

Deși aceasta este o chestiune de obicei... este totuși mai bine să te obișnuiești să scrii „lizibil”.

Pentru apariția HTML, lumea modernă are de mulțumit unui om de știință de la Consiliul European pentru Cercetare Nucleară (Conseil Européen pour la Recherche Nucléaire, CERN). Numele acestui om de știință este Timothy John Berners-Lee. Prima versiune de HTML a fost creată în scopul formatării documentelor științifice. Este formatare structurală fără elemente de descriere a schemelor de culori, parametrilor fontului etc. Astfel, HTML a făcut inițial posibilă evidențierea titlurilor, paragrafelor, listelor și elementelor structurale similare în text. Rezultatul procesării sau „redării” HTML nu ar trebui să depindă de caracteristicile tehnice ale hardware-ului pentru vizualizarea acestuia, deoarece nu conținea parametrii acestei vizualizări. De-a lungul timpului, această caracteristică a limbajului de marcare hipertext a fost parțial pierdută.

Așadar, apariția primelor versiuni de HTML datează din 1986, iar în 1991 HTML a fost îmbunătățit semnificativ și a început să fie folosit special pentru transmiterea hipertextului pe World Wide Web. Ei spun că abrevierea de renume mondial HTML, care înseamnă Hyper Text Markup Language, a apărut exact la începutul anilor 90 ai secolului trecut. Și acum o scurtă excursie în pedigree-ul limbajelor de marcare. Prima versiune a limbajului de marcare hipertext HTML a fost creată pe baza Standardului Generalized Markup Language (SGML), care într-un fel poate fi considerat un prototip al limbajului de marcare eXtensible. Standardul XML a câștigat o popularitate imensă în timpul nostru datorită numărului mare de extensii utilizate în tehnologia computerelor. Pentru a deruta complet cititorul, voi adăuga imediat că ulterior, pe baza XML, a fost dezvoltat limbajul de marcare hipertext XHTML (Extensible Hypertext Markup Language), care reproduce în esență HTML. Ca rezultat, avem acronimele SGML, HTML, XML și XHTML și trebuie să înțelegem care este care. De fapt, totul este simplu: SGML nu este altceva decât un set de reguli pe baza cărora poate fi construit orice limbaj de marcare. HTML este una dintre aceste limbi - aplicația SGML. Cu alte cuvinte, SGML definește cum ar trebui să arate elementele de markup, iar HTML definește ce anume ar trebui să fie elementele și cum ar trebui să fie interpretate de browsere. XHTML, la rândul său, este o aplicație a XML, iar XML în sine nu este altceva decât o versiune simplificată a SGML. , în ciuda faptului că sunt foarte asemănătoare ca aspect, au diferențe ascunse semnificative, care, în cea mai mare parte, se află în principiul prelucrării lor.

Acum să revenim la istoria dezvoltării HTML. Deci, până în 1994, HTML era încă folosit doar pentru marcarea structurală a datelor, deși includea deja etichete pentru evidențierea textului cu caractere aldine sau cursive. În același 1994, a fost creată organizația W3C (World Wide Web Consortium) - World Wide Web Consortium, care este condus, destul de logic, de același Tim Berners-Lee, iar în 1995 a fost publicată recomandarea HTML 2.0. Creatorii de HTML au înțeles deja că, în timp, creația lor va evolua dintr-un limbaj de marcare statică a textului în principalul instrument de creare a resurselor dinamice de Internet. Adăugarea principală a HTML 2.0 a fost apariția ca parte a limbajului formularelor cu seturi de controale de utilizator care urmau să fie folosite pentru ca utilizatorul să introducă parametrii pentru solicitările HTTP.

După lansarea celei de-a doua versiuni, au început imediat lucrările la următoarea generație de HTML. În 1997, a fost lansată recomandarea HTML 3.2, care a completat limbajul de marcare cu tabele, cadre, imagini și alte etichete importante. Dar cea mai importantă realizare a versiunii a 3-a este că autorii acesteia au revenit din nou la problema vizualizării marcajului în browser, amintindu-și că HTML ar trebui doar să marcheze structura documentului și nu ar trebui să conțină direct parametri pentru stilurile grafice pentru afișarea elementelor în browserul. Rezultatul muncii lor pe HTML 3.2 a fost apariția unui limbaj CSS independent (Cascading Style Sheets) - foi de stil în cascadă, al căror cod poate fi acum conectat la codul de markup HTML și, prin urmare, poate personaliza aspectul paginii.

Până la lansarea versiunii 4 de HTML în 1997, personalul W3C a scăpat de la ideea acelor elemente inutile care, odată cu apariția CSS, deveniseră învechite și au compromis ideea de a separa structura de marcare de parametrizarea prezentării. Dar nimeni nu ar bloca o nouă versiune din cauza unor astfel de fleacuri. Principala realizare a recomandărilor HTML 4.0 a fost apariția modelului de obiecte de pagină (Document Object Model, DOM), ale cărui elemente puteau fi acum manipulate prin limbaje de programare de scriptare executate de browsere. Cel mai popular astfel de limbaj de programare este JavaScript. HTML plus DOM plus JavaScript este egal cu HTML dinamic sau pur și simplu DHTML, care a marcat o descoperire în designul web. Acum elementele unei pagini de Internet încărcate își pot schimba aspectul ca răspuns la acțiunile utilizatorului, precum și să adauge noi și să ștergă elemente existente. Pe 24 decembrie 1999, a fost lansată cea mai recentă ediție a celei de-a patra versiuni a limbajului de marcare hipertext, HTML 4.01.

HTML5 nu a primit încă statutul de recomandare oficială W3C, dar este deja clar că autorii HTML continuă să lucreze pentru dezvoltarea cerințelor pentru suportul modelului obiect document și interpretarea JavaScript. Deși HTML5 va primi o serie de etichete noi, majoritatea recomandărilor se referă în continuare la comportamentul browserului în contextul DHTML: va exista suport încorporat pentru funcțiile drag-and-drop, capacitatea de a desena pe o pânză virtuală , controlați istoricul de navigare și partajați mesaje între pagini, salvați contextul de execuție și multe altele. Se speră că odată cu lansarea de noi recomandări HTML, problemele lipsei de compatibilitate între browsere, atunci când același cod JavaScript este executat diferit în browsere diferite, vor dispărea treptat. La urma urmei, tendința de a defini cerințele pentru lucrul cu modelul obiect și JavaScript va continua, iar dezvoltatorii de browsere vor fi obligați (dacă doresc ca produsele lor software să fie utilizate) să respecte aceste cerințe.

HTML5 este programat pentru lansare în 2014. Poate că până atunci W3C va fi dezvoltat recomandări separate referitoare doar la programarea JavaScript, iar HTML va deveni în cele din urmă din nou exclusiv un limbaj de marcare pentru structura documentului. În ciuda faptului că astăzi este doar 2012, multe sunt deja acceptate de cele mai populare browsere. Multe lucruri pe care designerii web trebuiau să facă anterior pe cont propriu (același drag-and-drop), odată cu lansarea HTML5 vor fi suportate la nivel de browser, iar această dezvoltare a evenimentelor nu poate decât să se bucure. Nu putem decât să sperăm că tendința va continua.

Călătorind prin imensitatea World Wide Web, ați putut observa cât de diferit designul și capacitățile paginilor web. Dar nu toți dintre voi știe că toată această diversitate este implementată pe baza limbii HTML.

Tot ceea ce vedeți pe pagină - textul, imaginile, tabele și alte elemente care formează conținutul semantic al paginii web, numit conținut, sunt create folosind limbajul de marcare. HTML. Faceți clic dreapta pe orice pagină web și selectați elementul din meniul derulant „vezi codul HTML” sau "Sursă"– va apărea un editor de text cu simboluri și pictograme pe care nu le înțelegeți – asta este HTML-codul paginii.

Orice document WWW poate conține text stilizat și formatat, grafică și hyperlinkuri către diverse resurse de pe Internet. Pentru a realiza toate aceste posibilități, a fost dezvoltat un limbaj special pentru descrierea documentelor WWW, numit Limbajul de marcare hipertext (HTML), acesta este, Limbajul de marcare hipertext.

Descrierea HTML a unei pagini Web este un set de instrucțiuni interpretate de un program de browser.

Un document scris în HTML este un fișier text care conține textul real care transportă informații către cititor și etichete de marcare. Etichetele sunt secvențe de caractere definite de standardul HTML care servesc drept instrucțiuni pentru browser.

Conform acestor instrucțiuni, programul plasează text pe ecran, include imagini stocate în fișiere grafice separate și formează hyperlinkuri către alte documente sau resurse de Internet. Astfel, un fișier HTML capătă aspectul unui document Web doar atunci când este interpretat de browser.

Cu toate acestea, există un defect semnificativ în limbajul HTML standard. De exemplu, pentru a descrie aspectul paragrafelor în conținut și designul lor, este necesar să se descrie aceste proprietăți pentru fiecare paragraf, chiar dacă există 10 sau 20 de paragrafe pe o pagină. Și, imaginați-vă că site-ul poate avea 100 de pagini. Ca rezultat, trebuie să inserați aceeași bucată de cod HTML în pagină de douăzeci sau două sute de ori, mărind dimensiunea fișierului.

Ce bătaie de cap pentru programatori! Pentru a ușura viața webmasterilor săraci, au fost inventați Foi de stil în cascadă (CSS)- foi de stil în cascadă.

CSS funcționează într-un mod diferit, mai convenabil și mai economic. Pentru a proiecta paragrafe în conținutul site-ului, un cod sau un stil de design este scris o dată. Acest cod sau descrierea stilului este salvată într-un fișier separat. În continuare, trebuie să utilizați HTML doar pentru a marca textul în paragrafe, iar CSS se va ocupa de designul acestora. Codul este redus de zeci și sute de ori.

Plasarea descrierilor stilurilor într-un fișier separat este foarte convenabilă, mai ales dacă site-ul are mai multe pagini. De exemplu, pentru a schimba decor toate paragrafele de pe site, trebuie doar să schimbați codul din foaia de stil.

CSS împreună cu HTML pot face minuni, totul datorită diviziunii muncii în crearea paginilor web. Marcarea elementelor paginii se bazează pe HTML, iar designul vizual al elementelor este dat folosind tabele CSS

Foi de stil CSS- o încercare de a separa detaliile designului paginii de structura și conținutul acesteia.

Deocamdată, aceasta este o scrisoare chineză pentru tine. Dar nu mă voi preface că sunt un guru și nu voi scrie un alt tutorial „Ce este HTML și CSS”. Veți găsi o întreagă mașină de informații similare pe Internet, plus multe manuale publicate. Dacă vrei să aprofundezi subiectul, steagul este în mâinile tale. Nu-ți fie frică, HTMLȘi CSS sunt foarte simple și orice ceainic le poate stăpâni. Dar încă nu este nevoie să te grăbești în asta.

Din propria mea experiență știu că este mai bine să nu supraîncărcați creierul ceainicului cu informații inutile, în caz contrar, de exemplu. creierul va fierbe din timp. Nu-i crede pe băieții deștepți de pe diverse site-uri care susțin că crearea unui site web trebuie să înceapă cu învățarea HTML și CSS. Am o veste bună pentru tine - nu trebuie să scrii singur codul HTML, pentru că au venit oameni deștepți CMS .

< Как работает браузер