Structura documentului html

HTML - limba de marcare hipertext a paginilor, vă permite să proiectați pagini web în forma în care le vedem pe Internet.

Comenzile în limba HTML sunt făcute cu ajutorul etichetelor - cuvinte speciale rezervate în paranteze unghiulare. Etichetele pot arăta astfel:

și așa mai departe.

Pentru ce sunt etichete? Cu ajutorul acestora, scriem codul paginii trimise de la un server la distanță către browserele vizitatorilor site-ului dvs. și revine browser-ului să transforme acest cod într-un fel de pagină în care puteți vedea text, grafică și animație.

Pentru a înțelege mai bine modul în care sunt create paginile pentru web, să studiem acest lucru cu un exemplu. Creați prima pagină pentru site-ul nostru viitor. Apoi, cu timpul și experiența, o veți suplimenta și o veți îmbunătăți, dar pentru moment ne vom limita la cele mai necesare.

Mai întâi de toate, trebuie să spun că toate site-urile au o pagină de intrare și, de obicei, această pagină de intrare se numește index.html. Nu vom rupe tradiția.

Deci, să începem. Pentru ca browserul să înțeleagă codul atunci când primește codul pe care îl ocupă cu HTML, trebuie să-l raportăm. Acest lucru se face folosind etichete

Prima etichetă este o etichetă de deschidere, adică va fi la începutul codului, a doua etichetă va fi eticheta de închidere (eticheta acesteia este slash-ul înainte "/" după brațul de deschidere). Acesta este situat la sfârșitul codului și închide pagina html.

În general, aproape toate etichetele necesită închidere. Astfel se formează perechi de etichete: deschidere-închidere. Puțin mai târziu, acest lucru va fi explicat în detaliu.

Deci, am explicat browserului că îi transmitem un document html. Restul codului pe care îl vom plasa între aceste două etichete.

În parte conține pentru ce, de fapt, și a fost făcută o pagină - text, imagini, forme etc.

Deci, vom lipi în codul tag-urilor noastre de pagină și . Avem următoarele:

Această construire este obligatorie pentru toate paginile html.

Antetul documentului

Acum trebuie să completați titlul paginii. Alegeți un nume pentru acesta. De exemplu, "Prima pagină". Deci, între etichete și codul nostru, adică în antet, introduceți următoarele:

După aceea, în bara de titlu a ferestrei browserului și pe butonul din bara de activități, putem vedea numele paginii.

Pentru a specifica atributele unui document, vom folosi eticheta . Cu ajutorul acestuia, puteți descrie metoda de codare, numele creatorului paginii, informații despre motoarele de căutare. Sintaxă generală pentru etichete .

Astfel, scriem în antet (adică între etichete și ) următoarele linii:

Deci, iată codul primei noastre pagini:

Dar dacă deschideți pagina în browser, veți vedea că în ea nu este scris nimic. La urma urmei, tot ceea ce am scris până acum în cod este în interiorul etichetelor .

Acum puteți începe să creați partea vizibilă a paginii.

Corpul documentului

Să începem prin selectarea aspectului paginii. În interiorul etichetei puteți seta culoarea sau fundalul de fundal, culoarea și mărimea fontului și a hiperlegăturilor etc. Culorile sunt specificate în hexazecimal, adică în formularul # 000000.

De exemplu, alegeți culoarea fontului albastru închis, fundalul alb, legăturile albastre, legăturile active sunt albastre, legăturile vizitate sunt gri. De asemenea, puteți seta o imagine de fundal.

Deci, acum scriem toți parametrii selectați în etichetă .

Aici trebuie menționat faptul că registrul în scris etichetele nu contează, adică pe deplin consecvent . În același timp, la scrierea numelor de fișiere, registrul este semnificativ. Dacă fișierul este numit «bkg.jpg», și în codul l-ați scris ca «Bkg.jpg» sau «BKG.JPG» sau «bkg.JPG», el pur și simplu nu va fi găsit la deschiderea unei pagini și, prin urmare, nu vor apărea în browser-ul.

Parametrii de culoare, precum și alte valori ale etichetelor, ar trebui incluse în ghilimele: text = "# 000099". dar acest lucru nu este necesar.

Culorile pot fi setate nu numai ca o valoare digitală, ci și cuvinte rezervate în mod special pentru desemnarea lor, de exemplu text = "blue" link = "red". Cu toate acestea, numărul acestor simboluri este destul de limitat și nu sunt afișate corect în toate browserele, așadar nu le recomand să le folosiți.

În general, aproape toate etichetele destinate determinării tipului de pagină, text, formatare paragraf etc. pot și ar trebui să fie setate utilizând stilurile de cascadă CSS. Acest lucru simplifică foarte mult viața webmasterului, economisește timp și reduce dimensiunea codului paginii (și, respectiv, timpul de descărcare din rețea). Dar trebuie încă să studiem CSS.

Pentru a proiecta pagina, puteți aplica etichete de formatare care determină locația textului și a imaginilor, tipul de text, dimensiunea fontului și așa mai departe.

Textul oricărui document este, de obicei, structurat în părți, prin intermediul titlurilor, iar titlurile pot fi de diferite nivele. Aproape toate browserele acceptă șase nivele de anteturi. Sintaxă generală pentru etichete . unde x este nivelul antetului. De exemplu:

Poziția celui de-al doilea nivel

Poziția celui de-al treilea nivel

Când utilizați numai cod HTML, utilizarea acestei etichete nu oferă avantaje mult mai mari. Dar trebuie doar să conectați CSS - și totul devine imediat. Prin aceasta, puteți seta toți parametrii tuturor anteturilor la trivia. Deci, pentru moment, să ținem cont de existența unei astfel de etichete, iar când studiem CSS, vom începe să o folosim cu forță.

Pentru a determina tipul de font în HTML, utilizați eticheta . În interiorul acestei etichete, putem specifica dimensiunea fontului, numele, culoarea. De exemplu, să scriem prima frază în pagina noastră: "Aceasta este prima mea pagină web" cu fontul "Arial" sau "Verdana" în roșu, vom selecta dimensiunea fontului de 12 pt. Acesta va arata astfel:

Fiți atenți la eticheta de închidere. Dacă nu îl puneți la sfârșitul frazei, atunci tot textul ulterior (înainte de prima etichetă de închidere ) vor fi afișate în font roșu 12pt. După aceea, fontul va fi afișat așa cum este definit în etichetă .

Dimensiunea fontului poate fi setată în moduri diferite. Una dintre ele este sarcina la punctele (pt). De asemenea, puteți măsura dimensiunea fontului după pixeli (px), unități. Astfel, iată câteva opțiuni pentru scrierea parametrilor fontului:

text
text
text - de obicei instalat implicit
text
text

Cu toate acestea, rețineți că definirea greu de dimensiune a fontului nu este întotdeauna utilă. Nu toți vizitatorii dvs. vor avea aceleași setări de browser ca dvs. Majoritatea oamenilor folosesc, potrivit statisticilor, dimensiunea ecranului de 800x600 pixeli, dar mulți, după toate, și cei care aleg alte setări. Dacă, de exemplu, determinați fontul textului principal egal cu 2 unități, în browser-ul dvs. probabil că va arăta grozav. Dar este posibil ca cineva care vine pe site-ul dvs. va dori să facă fontul mai mare, dar nu poate. Dacă nu specificați această opțiune, fontul va fi afișat așa cum este setat implicit, adică 3 unități în mărime și în același timp va permite utilizatorului să schimbe setările la discreția sa.

De asemenea, trebuie subliniat faptul că aranjarea corectă a consolelor unghiulare în care etichetele sunt închise este foarte importantă. Este necesar doar să uitați să puneți brațul de închidere - și nu s-au întâmplat părți ale paginii! Tot ce va fi în partea de după bracket de deschidere, va fi invizibil pentru browser, pentru că va apărea ca și cum în interiorul etichetei!

De asemenea, puteți seta tipul de font. Pentru aceasta, utilizați următoarele etichete:

- cursivitate
- gras
- subliniat