Un exemplu de pagină HTML și elementele de bază ale creării

Multe limbi au fost inventate, însă limba HTML este una dintre cele mai speciale și cele mai solicitate. Multe alte inițiative cheie în programare sunt asociate cu aceasta. Multe devin disponibile atunci când cunoașterea limbajului de markup este prezentă în mintea dezvoltatorului - HyperText Markup Language (HTML).

În esență, în HTML nu este nimic complicat și în câteva minute oricine, cel mai îndepărtat de programare și persoana de Internet, va crea o pagină HTML într-un notebook. Un exemplu care merită atenție este simplitatea, care este într-adevăr accesibilă tuturor.

Descrierea generală

Fișierul HTML este o pagină a site-ului, deși acest lucru poate fi argumentat, însă faptul că un fișier este o pagină este ușor de înțeles pentru început.

Fișierul HTML începe cu antetul DOCTYPE, care indică faptul că tipul acestui fișier este HTML. Toate elementele paginii (etichetele) sunt indicate în paranteze unghiulare. Fiecare pereche ("<"Și"> ") include o etichetă HTML. De obicei, etichetele HTML sunt asociate, adică există "/ tag" pentru fiecare "etichetă". Ambele sunt închise în paranteze unghiulare. Există etichete unice, dintre care cea mai populară "br /" este trecerea la linia următoare.

Cea mai mare etichetă din fișier este HTML în sine, care include doar două etichete: HEAD și BODY. În primul rând, se fac diferite descrieri, se specifică legături către alte pagini, pot fi prezente script-uri PHP și jаvascript. În al doilea rând, conținutul paginii este înregistrat. De asemenea, sub formă de etichete și scripturi.

Pagina HTML simplă

Un exemplu de creare a unei astfel de pagini este prezentat mai jos în articol. Luați în considerare cu atenție.

Secțiunea HEAD

Scopul principal al etichetei HEAD este o descriere generală a paginilor și a scripturilor comune, deși ultimul este un concept relativ relativ. De obicei, numai două lucruri sunt importante aici:

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

Pentru a afișa conținutul paginii, conținutul acestei secțiuni are doar o semnificație indirectă, deoarece indică faptul că: undeva în alte fișiere există reguli CSS pentru etichete și scripturi din alte limbi.

Pagina HTML are un titlu (TITLE), care este afișat atunci când vizitatorul aduce mouse-ul în fila în care pagina este deschisă. Acesta este un aspect important, deoarece face pagina mult mai prezentă, mai ușor de spus, semnată cu text lizibil.

Etichetele META sunt importante în programarea pe Internet, în general, dar atunci când doriți să creați o pagină HTML într-un notebook, exemplul este nedorit să se amestece cu construcțiile redundante.

Link-uri LINK și SCRIPT ar trebui să primească o atenție deosebită. Primul indică locul în care se află foaia de stil CSS, cea de-a doua locație a fișierului de cod jаvascript. Pot exista multe astfel de referințe.

Dacă scripturile ar trebui abordate, atunci când cunoașterea HTML este întărită, atunci foile de stil cascadă ar trebui să fie atente imediat. În fișierele CSS există, în special, regulile pentru proiectarea etichetelor HTML.

Secțiunea BODY

De fapt, un exemplu de pagină HTML este partiția BODY. Aici este conținută toate informațiile, tot conținutul paginii site-ului. Toate informațiile sunt prezentate sub formă de etichete și scripturi, de exemplu inserarea codului jаvascript sau a unor fragmente de programe PHP.

Este important să înțelegem că exemplul unei pagini web HTML în browser și același exemplu într-un editor de text, în special notepad, este departe de același. În primul caz, avem textul HTML finit, în care sunt executate toate scripturile. De exemplu, PHP și-a îndeplinit rolul și a generat etichetele necesare în loc de codul său în locurile potrivite. De asemenea, jаvascript și-a îndeplinit misiunea, deși există încă o conversație separată despre aceasta.

HTML este o etichetă, nu un script. În cele din urmă, browserul afișează numai conținutul paginii, doar etichetele sale. Nu există cod PHP aici.

jаvascript este într-o poziție specială, grija sa - pentru a servi pagina, nu numai la timpul de boot (suprasarcină), dar în momentele când pagina este în browser-ul vizitatorului, și studiilor pe care le.

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

Și în browser-ul vizitatorului, se pare ca cel prezentat mai jos.

Codul nu a specificat cum ar trebui să arate elementele afișate de browser. Toate modelele vizibile sunt în regulile CSS. În acest caz, în fișierul Mcss / scPhpWordRW.css, care a fost referit (a se vedea primul exemplu al unei pagini HTML).

Spre deosebire de HTML, tema CSS este mai simplă, există reguli foarte accesibile și numărul lor este mic, atunci când exemplul creării unei pagini HTML nu necesită altceva decât notepad. Totul este foarte accesibil pentru mastering instant:

Acest lucru arată cât de ușor este descris tag-ul scLogo_vDoc, iar această descriere este că într-o stare normală a tag-ul afișează o imagine VDOC-logo.jpg, iar atunci când mouse-ul este peste ea - afișat VDOC-logo-h.jpg.

Descriere HTML Structura

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

Numele, în cazul unei etichete pereche, este compus din numele propriu (tagName) și parantezele unghiulare ("<"+ TagName +"> "), dacă este începutul unei etichete și" ", dacă este scris sfârșitul acesteia.

Un exemplu de pagină HTML care descrie atributele este localizată mai jos în text.

Eticheta poate avea atribute, după care sunt plasate după un spațiu după numele etichetei înainte de colțul de închidere ">". Atributele, dacă au o etichetă, sunt scrise doar la începutul etichetei. Conținutul etichetei este cel care se află între începutul etichetei și sfârșitul acesteia.

Conținutul general al descrierilor HTML

HTML vă permite să descrieți elemente de bloc și șir. Primul ocupă o anumită zonă în fereastra browserului, poate fi poziționat absolut, adică în locul potrivit în zona de afișare a paginii HTML și are o dimensiune specifică.

Elementele de șir sunt afișate, în general, într-un fir, adică așa cum este indicat în fișierul de pagină și sunt afișate. Afișarea fluxului total poate fi afectată atunci când se încarcă pagina. Plasarea, vizibilitatea și alte proprietăți ale elementelor bloc pot fi afectate în orice moment prin intermediul codului jаvascript.

În plus față de elementele simple, HTML oferă descrierea tabelelor și formularelor. Aceste elemente sunt foarte solicitate în "construirea zonelor zilnice".

Descrierea tabelului: etichete TABLE, TR, TD

Cu ajutorul etichetei TABLE, puteți crea o tabelă, puteți specifica un anumit număr de rânduri TR și în fiecare rând un număr de celule TD. Spre deosebire de masa obișnuită de organizare, datorită naturii HTML markup organizației tabular limitat la această declarație, pentru că în cazul în care dezvoltatorul vrea să aibă o masă dreptunghiulară, în care numărul de coloane din toate rândurile de la fel, atunci trebuie să urmeze asta pentru tine.

Poziția de bază a HTML: de a face tot ceea ce este indicat, dar nimic care nu este înțeles. În unele cazuri, numărul de coloane din fiecare rând din tabel nu este atât de important, dar dacă trebuie să combinați celule verticale sau orizontale, va trebui să numărați totul foarte atent.

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

Aici este un tabel cu o mărime de trei rânduri pe trei coloane, cu tagul TH utilizat în primul rând în locul etichetei TD. Nu există diferențe deosebite între aceste două etichete, însă puteți folosi primul pentru a distinge primul rând al tabelului, iar în CSS la TH puteți atașa propriul stil, ceea ce îl diferențiază de alte TD-uri.

Descrierea formularului: FORM, etichete INPUT

Formularele reprezintă partea cea mai solicitată a etichetelor HTML. Folosind formulare, puteți transfera informații. De fapt, pagina însăși este rezultatul informațiilor, însă forma este intrarea lor.

Exemplu de pagină HTML cu o descriere simplă a formularului:

Variantele de utilizare a formularelor sunt mult mai mari, dar principalele posibilități sunt următoarele. Puteți specifica câmpurile de intrare, le atribuiți design-ului și manipulatorilor pentru a analiza intrarea utilizatorului. Puteți specifica câmpuri ascunse și puteți trimite informații de fundal din pagină. Puteți desemna butoanele pentru transferul de informații, făcând clic pe care inițiază transferul de informații.

Utilizarea codului HTML

Pentru a cunoaște limba hipertext - o condiție indispensabilă pentru orice specializare de muncă în domeniul programării pe Internet, dar dacă doriți să scrie un program în PHP sau jаvascript, atunci stii HTML + CSS au nevoie de perfect.

Limba PHP a fost notată în exemplul anterior. PHP rulează pe server, deoarece 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 (handler de evenimente onblur), a primit toți parametrii sub formă de câmpuri de text.

Browserul rulează jаvascript, și pentru a lucrat în mod corespunzător datele butonul trimite înapoi la server, care este, de proiectare :. onclick = jQuery ( „# la“) val ( „coș“), este necesar să se cunoască nu numai despre ceea ce jQuery, dar, de asemenea, ceea ce este # to, val, coș. Mai precis, este necesar să se cunoască etichetele HTML de bază și regulile generale aplicabile acestora, stilurile CSS.

Acest lucru este suficient pentru a-și ridica rapid calificările pentru orice specializare în domeniul programării pe internet.