Codul programului HTML. Bazele HTML

Au fost inventate multe limbi, dar HTML este unul dintre limbile speciale și cele mai populare. Multe alte evoluții cheie în programare sunt asociate cu acesta. Multe devin posibile atunci când mintea dezvoltatorului are cunoștințe despre limbajul de marcare - HyperText Markup Language (HTML).

În esență, nu este nimic complicat în HTML și, în câteva minute, oricine chiar îndepărtat de programare și Internet va putea crea o pagină HTML în Notepad. Un exemplu demn de atentie, simplitate cu adevarat accesibila oricui.

descriere generala

Un fișier HTML este o pagină a site-ului, deși acest lucru poate fi argumentat, dar faptul că un fișier alcătuiește o pagină este clar de la început.

Fișierul HTML începe cu un antet DOCTYPE, care afirmă că tipul a acestui dosar- HTML. Toate elementele paginii (etichetele) sunt indicate între paranteze unghiulare. Fiecare pereche ("<» и «>") include o etichetă HTML. De obicei, etichetele HTML vin în perechi, adică pentru fiecare „etichetă” există o „/etichetă”. Ambele sunt incluse în paranteze unghiulare. Există etichete unice, dintre care cea mai populară este „br/” - trecerea la următoarea linie.

Cea mai mare etichetă din fișier este HTML-ul în sine, care conține doar două etichete: HEAD și BODY. În primul sunt făcute descrieri diverse, link-uri către altele pagina necesară fișierele pot fi prezente Scripturi PHPși JavaScript. Al doilea înregistrează conținutul paginii. De asemenea, sub formă de etichete și scripturi.

Pagina HTML simplă

Un exemplu de creare a unei astfel de pagini este dat mai jos în articol. Să ne uităm cu atenție.

Secțiunea CAP

Scop principal - descriere generala pagini și scripturi generale, deși acesta din urmă este un concept destul de relativ. De obicei, doar două lucruri primesc o importanță semnificativă aici:

cuvinte cheie și descrierea paginii;
link-uri către alte fișiere (*.css și *.js).

Pentru a afișa conținutul paginii aceasta sectiune are doar sens indirect, deoarece indică: undeva în alte fișiere există reguli CSS pentru etichete și scripturi din alte limbi.

O pagină HTML are una care este afișată atunci când vizitatorul mută mouse-ul în fila în care este deschisă pagina. Acest punct important, deoarece face pagina semnificativ mai prezentabilă, mai ușor de spus, semnată cu text care poate fi citit.

Etichetele META sunt importante în programarea pe Internet în general, dar atunci când trebuie să creați o pagină HTML în Notepad, nu este recomandabil să aglomerați exemplul cu constructe inutile.

Dacă scripturile ar trebui abordate odată ce s-au stabilit cunoștințele despre HTML, atunci Foile de stil în cascadă ar trebui abordate imediat. ÎN fișiere CSSÎn special, sunt date regulile de formatare a etichetelor HTML.

Sectiunea CORP

De fapt, exemplul de pagină HTML este secțiunea BODY. Aici sunt cuprinse toate informațiile, tot conținutul paginii site-ului. Toate informațiile sunt prezentate sub formă de etichete și scripturi, de exemplu inserarea de cod JavaScript sau bucăți de programe PHP.

Este important să înțelegeți că un exemplu Pagini web HTMLîntr-un browser și același exemplu într-un editor de text, în special notepad, este departe de același lucru. În primul caz, avem un text HTML gata făcut în care sunt executate toate scripturile. De exemplu, PHP și-a făcut partea și și-a format codul în locurile potrivite etichetele necesare. JavaScript și-a îndeplinit și misiunea, deși rămâne de discutat separat.

HTML sunt etichete, nu scripturi. În cele din urmă, browserul afișează doar conținutul paginii, doar etichetele acesteia. Nu există cod PHP acolo.

JavaScript se află într-o poziție specială, preocuparea sa este să servească pagina nu numai în momentul încărcării (supraîncărcării), ci și în momentele în care pagina se află în browserul vizitatorului, iar acesta o studiază.

Un exemplu simplu (numai secțiunea BODY) este prezentat mai jos.

Și în browserul vizitatorului arată astfel:

Codul nu a specificat cum ar trebui să arate elementele pe care le-ar afișa browserul. Toate design vizibil este in reguli CSS. ÎN în acest caz,în fișierul Mcss/scPhpWordRW.css care a fost legat (vezi primul exemplu al paginii HTML).

Spre deosebire de HTML, tema CSS este mai simplă, există reguli foarte accesibile și numărul lor este mic, când un exemplu de creare a unei pagini HTML nu necesită altceva decât notepad. Totul este foarte accesibil pentru stăpânire imediată:

Aceasta arată cât de simplu este descrisă eticheta scLogo_vDoc, iar această descriere este astfel încât, în starea sa normală, eticheta afișează imaginea vDoc-logo.png, iar când mouse-ul este peste ea, este afișat vDoc-logo-h.png.

Structura descrierilor HTML

Limbajul nu implică nicio structură și conceptul de sintaxă aici este foarte relativ. Nu există variabile, dar există o mulțime de posibilități. Baza fundamentală a hipertextului este că există un element (etichetă) care are în mod necesar un nume.

Numele, în cazul unei etichete pereche, este alcătuit din numele în sine (tagName) și paranteze unghiulare („<» + tagName +«>"), Dacă despre care vorbim despre începutul etichetei și „„dacă se consemnează sfârșitul lui.

Un exemplu de pagină HTML care descrie atributele se află mai jos în text.

O etichetă poate avea atribute, caz în care acestea sunt plasate cu un spațiu după numele etichetei înainte de paranteza unghiulară de închidere „>”. Atributele, dacă o etichetă le are, sunt scrise doar la începutul etichetei. Conținutul unei etichete este considerat a fi ceea ce se află între începutul etichetei și sfârșitul acesteia.

HTML vă permite să descrieți bloc și elemente inline. Primele ocupă o anumită zonă în fereastra browserului, pot fi poziționate absolut, adică în locul dorit în zona de afișare a paginii HTML, și au o anumită dimensiune.

Elemente în linie în caz general sunt afișate într-un singur fir, adică așa cum au fost specificate în fișierul de pagină, sunt afișate pe ecran. Afișarea fluxului general poate fi influențată atunci când pagina se încarcă. Despre plasare, vizibilitate și alte proprietăți elemente de bloc poate fi influențat oricând prin codul JavaScript.

in afara de asta elemente simple,HTML oferă pentru a descrie tabele și formulare. Aceste elemente sunt foarte solicitate în „construcția de zi cu zi a site-urilor”.

Descrierea tabelului: etichete TABLE, TR, TD

Folosind eticheta TABLE, puteți crea un tabel, puteți specifica un anumit număr de rânduri TR și un anumit număr de celule TD în fiecare rând. Spre deosebire de organizarea tabelară obișnuită, datorită particularităților de marcare HTML, organizarea tabulară este limitată la această declarație, prin urmare, dacă dezvoltatorul dorește să aibă un tabel dreptunghiular în care numărul de coloane din toate rândurile să fie același, atunci trebuie să monitorizează el însuși acest lucru.

Poziția de principiu a HTML este de a face tot ceea ce este specificat, dar nimic care nu este înțeles. În unele cazuri, numărul de coloane din fiecare rând al tabelului nu este atât de important, dar dacă trebuie să îmbinați celulele pe verticală sau pe orizontală, va trebui să numărați totul cu mare atenție.

Un exemplu de pagină HTML care descrie un tabel simplu este prezentat clar în articol.

Aici este prezentat un tabel de trei rânduri cu trei coloane, iar pe primul rând, în locul etichetei TD, a fost folosită eticheta TH - antetul coloanei. Aceste două etichete nu sunt deosebit de diferite, dar este destul de posibil să îl folosiți pe primul pentru a distinge primul rând al tabelului, iar în CSS puteți atașa propriul stil, ceea ce îl diferențiază de alte TD-uri.

Descriere formular: etichete FORM, INPUT

Formularele sunt cea mai populară parte a etichetelor HTML. Folosind formulare puteți transfera informații. De fapt, pagina în sine este rezultatul informațiilor, dar forma este intrarea acesteia.

Exemplu de pagină HTML care descrie un formular simplu:

Există mai multe opțiuni pentru utilizarea formularelor, dar acestea sunt principalele posibilități. Puteți specifica câmpuri de intrare, le puteți atribui un design și handlere pentru a analiza datele introduse de utilizator. Puteți specifica câmpuri ascunse și puteți transmite informații de fundal din pagină. Puteți desemna butoane pentru transmiterea informațiilor, făcând clic pe care inițiază procesul de transmitere a informațiilor.

Folosind HTML

Cunoașterea limbajului hipertext este o meserie în orice specializare din domeniul programarii pe Internet, dar dacă trebuie să scrieți programe în PHP sau JavaScript, atunci trebuie să cunoașteți perfect HTML + CSS.

Limbajul PHP a fost indicat în exemplul anterior. PHP rulează pe server, așa că pagina cu acest formular a zburat de la server la browser cu câmpurile completate. În special, funcția TestOnBlur menționată în eticheta INPUT (managerul de evenimente onblur) a primit toți parametrii ca câmpuri de text.

JavaScript rulează în browser și pentru ca butonul de trimitere a datelor înapoi către server să funcționeze corect, adică construcția: onclick=jQuery("#to").val("cart"), trebuie să aveți o idee nu numai despre ce este jQuery, ci și despre ce este #to, val, cart. Mai precis, trebuie să cunoașteți etichetele HTML de bază și reguli generale aplicare la ei Stiluri CSS.

Acest lucru este suficient pentru a vă îmbunătăți rapid calificările în orice specializare în domeniul programării pe Internet.

Călătorind prin întinderi World wide web, ai 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 "vizualizare HTML cod" sau « Sursă» - va aparea editor de text cu simboluri și icoane care sunt de neînțeles pentru tine - 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 limbaj special descrieri ale documentelor WWW numite Limbajul de marcare hipertext (HTML), acesta este, Limbajul de marcare hipertext.

Descrierea paginii web pe limbaj HTML este un set de instrucțiuni interpretate de un program de browser.

Un document scris în HTML este fisier text, care conține textul real care transmite 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 și include imagini stocate separat fisiere grafice, și formează hyperlinkuri cu alte documente sau resurse de pe 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 în dosar separat. Mai departe este necesar doar atunci când Ajutor HTML marcați 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 și design vizual elementele sunt date 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 nu este nevoie să ne grăbim încă în asta.

De propria experiențăȘtiu că este mai bine să nu supraîncărcați creierul ceainicului cu informații inutile, altfel, 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 pentru tine Vești bune– nu trebuie să scrieți singur codul HTML, deoarece oameni destepti a venit cu CMS .

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

Ș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 acest moment.

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ă text specific pe pagină ar trebui să fie situată în centrul acesteia; Consultați codul HTML pagina specifica posibil prin el meniul contextual. De exemplu, pentru a accesa acest cod în browser Firefox trebuie să faceți clic dreapta în 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. Cunoașterea limbii Marcaj HTML, crea pagina proprie Aproape oricine poate.

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, efecte speciale si alte posibilitati. 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.

Fiecare pagină web are structura generala coduri html de bază. Să ne uităm la cele mai simple coduri html ale paginilor site-ului web

Codul HTML al celui mai simplu site web (pagina web):

 Numepagini

Textpagini

În codul site-ului în sine, cazul literelor nu contează, puteți scrie atât „HTML, BODY...” cât și „html, body...”.

T egi Și servesc pentru a se asigura că codul documentului este recunoscut ca html.

– indică faptul că începe „capul” paginii – titlul paginii și informațiile tehnice ale acesteia.

 Titlul paginii - titlul paginii. Ceea ce este scris între aceste două etichete va fi afișat în antetul browserului.

– „capul” paginii s-a terminat.

Există etichete de deschidere <тег> si inchidere . Există etichete care nu trebuie să fie închise. Unele etichete, chiar dacă nu sunt închise, nu provoacă erori, dar se închid întotdeauna dacă trebuie să fie închise.

Textul paginii – între aceste etichete se află tot conținutul paginii – text, imagini, link-uri etc.

– documentul s-a încheiat. De obicei, aceasta este etichetează-te pe y moara este adăugat chiar la sfârșitul documentului.

Etichete de formatare a textului