Noțiuni introductive cu HTML. documente HTML. Bazele HTML5

Salutare tuturor! Au început mult așteptatele olimpiade. Le doresc tuturor participanților mare succesși mult noroc și, bineînțeles, chiar susțin Rusia, pentru că... Eu sunt rus. Și acum la subiectul postării. În acest articol vom vorbi despre markup HTML5 modern, avantajele și importanța acestuia în general. Încă nu am putut trece la html5, am crezut că este complet nou, nu toate browserele îl acceptă, în special IE 7-8. Dar totul s-a dovedit a nu fi chiar așa.

Astăzi, html5 este folosit la viteză maximă pentru marcarea paginilor web și aproape toată lumea browsere moderne sprijin acest marcaj, deși se crede că specificația html5 este încă în curs de dezvoltare. În ceea ce privește versiunile Internet Explorer 7-8, există o cârjă specială pentru ele, constând dintr-un mic javaScript. După părerea mea, aspectul în html5 este foarte convenabil, deoarece... În primul rând, html5 este semantică. Aici sunt folosite câteva elemente structurale, cu ajutorul cărora structura documentului devine ușor de citit și de înțeles nu numai pentru oameni, ci și pentru roboții de căutare.

Deci, să luăm markupul html5 pas cu pas și să începem chiar de la începutul documentului - Doctype. Doctype în html5 este scris mult mai simplu, astfel încât să vă puteți aminti cu ușurință.

Codificarea este scrisă după cum urmează

Simți diferența? Codul a devenit mult mai simplu și, de asemenea, este foarte ușor de reținut. De asemenea, atunci când conectați scripturi și stiluri, nu mai este necesar să specificați tipul.

Următorul lucru pe care îl vom face este să conectăm un mic javascript, astfel încât IE să înțeleagă noul marcaj.

document.createElement("header");

document.createElement("nav");

document.createElement(„secțiune”);
document.createElement(„articol”);
document.createElement("deoparte"); document.createElement("subsol"); Acest script poate fi descărcat și de pe serverul Google.
— grupează orice blocuri tematice (se creează secțiuni), este acceptată și imbricarea acestui element — definește zona de titlu a secțiunii sau a paginii. Foarte des, în aspect, această etichetă este folosită pentru a încadra antetul site-ului.— determină
— definește conținutul principal al site-ului, de exemplu, un articol separat.
— conținut secundar pe site. De obicei, aceste elemente sunt folosite pentru a marca barele laterale.

Trebuie remarcat faptul că noile elemente html5 sunt de natură inline, adică. Pentru a le afișa corect, acestea trebuie transformate în blocuri.

Antet, navigare, secțiune, articol, deoparte, subsol (afișare: bloc)

Pe baza celor de mai sus, puteți schița un aspect mic de pagină în HTML5

Markup aproximativ în html5 Antet site Meniu site Subsol site

După cum puteți vedea, html5 are un avantaj clar față de html4, atât în ceea ce privește markupul, cât și SEO. Despre SEO vom vorbi mai jos.

Pe lângă etichetele principale, următoarele etichete sunt adesea folosite:
substituent (substituent = „Text”) - afișează textul în câmpul de introducere, iar la introducerea textului acesta dispare automat. Acest atribut a apărut tocmai în html5, acum nu mai este nevoie să folosiți scripturi suplimentare pentru a afișa text într-un câmp, de exemplu într-un câmp de căutare.

- evidențierea oricărui cuvânt sau expresie importantă. Observați culoarea de fundal galbenă.

— aceste etichete sunt folosite pentru a afișa o adresă, de exemplu, adresa unei organizații.

— afișează videoclipuri pe un site web cu un browser standard.

— afișează o înregistrare audio pe site folosind un browser standard

HTML5 și SEO

Unul dintre caracteristici cheie HTML5 și, după părerea mea, cel mai important lucru este împărțirea tuturor blocurilor de către robotul de căutare în funcție de semnificația lor, adică. segmentarea paginilor web. Era imposibil să faci asta în html4, pentru că... standard etichetă div nu adaugă semnificație semantică elementului care se află în interiorul acestei etichete. Odată cu utilizarea noilor elemente de antet, articol, deoparte, subsol, totul se schimbă. Aceste. În linii mari, ei „spun” roboților de căutare elementelor cărora să le acorde importanță și cărora să le ignore. De exemplu, un robot de căutare va înțelege cu ușurință că informațiile conținute între etichete sunt drepturi de autor și informații similare pentru vizitator.

Elemente care afectează indexarea în motoarele de căutare

Eticheta articolului este una dintre cele mai importante atunci când segmentați paginile site-ului web. Această etichetă le spune în mod clar motoarelor de căutare unde se află conținutul principal al site-ului. Și știm cu toții că conținutul este în primul rând pentru care vin vizitatorii pe site. Aici se presupune că PS-ul va acorda o atenție maximă conținutului cuprins între etichete, eliminând sau relegând alte elemente în fundal.

Elementul secțiune împarte toate markupurile în secțiuni diferite. Ce dă asta? Roboții de căutare sunt buni la navigarea pe o pagină web care este bine structurată. Dacă utilizați corect eticheta, puteți construi cu ușurință o ierarhie de informații a documentului, iar acest lucru, la rândul său, îmbunătățește indexarea site-ului în ansamblu.

Folosind eticheta de antet, roboții de căutare pot găsi cu ușurință un logo, numele site-ului, sloganul, navigație principală(meniul principal).

Această etichetă definește structura de navigare pe site.

Legături

Iată principalele atribute ale linkurilor în HTML5:

Puteți vedea restul atributelor.

Ca acesta scurtă recenzie Markup HTML5. În ceea ce mă privește, am trecut la aspectul utilizând marcajul HTML5 cu mult timp în urmă și am transferat deja majoritatea șabloanelor de pe site-urile mele în HTML5, dar pur și simplu nu pot ajunge la acest blog.

Asta e tot. La revedere tuturor. Ne vedem în postările următoare.

Ai trecut deja la HTML5?

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 ca într-un document obișnuit editor de text(Notepad), și într-unul specializat, cu evidențierea codului (Notepad++, Visual Studio Cod 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 individuale nu pot stoca direct conținutul; 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-ul trebuie să fie compuse numai din litere, cifre, cratime și caractere 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 HTML

HTML 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 pentru ce etichete, atribute și valorile acestora sunt valabile tip specific HTML. Pentru fiecare versiuni 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 documente, așa-numitul model de obiect document, DOM (document model de obiect). Î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: ,

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 .

Element părinte - un element care este legat de alte elemente prin mai multe nivel scăzut, și situat pe copacul deasupra lor. În figura 1 și . Etichetă

Este părinte numai pentru .

Element copil- un element subordonat direct altui element de nivel superior. În figura 1 există doar elemente , ,

Și sunt copii ai .

Element soră - un element care are un comun element părinte cu cel luat în considerare, 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. Element

Secțiunea... conține informatii 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. Element

Eticheta 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ă cât mai mult posibil descriere completă continutul paginii web.

1.2.2. Element

O 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 ale metadatelor. 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ă după 30 de secunde. Pentru a redirecționa vizitatorul către o altă pagină, trebuie să specificați adresa URL în parametrul URL:

Tabelul 2. Atributele etichetei Atribut

set de caractere	Specifică codificarea caracterelor pentru documentul HTML curent:
conţinut	Conține text arbitrar care specifică valoarea asociată cu atributul http-equiv sau name, în funcție de valoarea acestora.
http-echiv	Controlează acțiunile browserului pe o anumită pagină web (echivalent cu anteturile HTTP). La randarea paginii, browserul va urma instrucțiunile specificate în atribut: default-style specifică stilul preferat de utilizat pe pagină. Atributul de conținut trebuie să conțină ID-ul elementului care face referire la tabel Stiluri CSS, sau identificatorul elementului care conține foaia de stil. reîmprospătare indică timpul în secunde înainte ca pagina să fie reîncărcată sau timpul înainte de redirecționarea către o altă pagină, dacă atributul conținut conține linia „url=page_address” după timp. Repornire automată pagini după o anumită perioadă de timp, în în acest exemplu, după 30 de secunde: Dacă trebuie să redirecționați imediat vizitatorul către o altă pagină, puteți specifica adresa URL în parametrul url:
nume	Asociat cu valoarea conținută în atributul conținut. Nu ar trebui utilizat dacă elementul are deja setate atributele http-equiv , charset sau itemprop. nume-aplicație specifică numele aplicației web utilizate pe pagină. autor specifică numele autorului documentului în format liber. descrierea defineste scurtă descriere la conținutul paginii, de exemplu: generator specifică unul dintre pachete software, folosit pentru a crea un document, de exemplu: . cuvintele cheie conține o listă de cuvinte cheie, separate prin virgulă, care se potrivesc cu conținutul paginii, de exemplu: . De asemenea, atributul nume poate lua următoarele valori din specificația extinsă, cum ar fi creator, googlebot, editor, roboți, slurp, viewport, deși niciuna dintre acestea nu a fost încă adoptată oficial.

1.2.3. Element

În interiorul acestui element sunt setate stilurile care sunt utilizate pe pagină. CSS este folosit pentru a seta stiluri într-un document HTML. Pot exista mai multe astfel de elemente pe o pagină.

În interiorul acestui element puteți scrie cod de formatare atât pentru elementele paginii web în sine, cât și pentru întreaga pagină web.

.hârtie ( lățime: 200px; înălțime: 300px; culoare de fundal: #ef4444; culoare: #666666; )

Pentru a conecta un anumit stil la un element, trebuie să atribuiți un nume adecvat elementului folosind atributul class (sau id):

...

Codul CSS poate fi încorporat direct într-un element de marcare ca valoare atribut de stil, De exemplu:

1.2.4. Element

De asemenea, puteți seta stiluri pentru un document folosind o altă metodă - scrieți-le dosar separat cu o extensie .css, de exemplu style.css .

Există două moduri de a conecta un fișier cu stiluri la o pagină web:
prin directiva @import URL

@import url(style.css);

folosind elementul. Elementul nu necesită o etichetă de închidere. Acest articol definește relația dintre pagina curentă și alte documente. Pot exista mai multe astfel de elemente pe o pagină. Intrarea va avea următoarea vedere:

Tabelul 4. Atributele etichetei Descrierea atributului, valoare acceptată

origine încrucișată	Indică dacă CORS (o tehnologie de browser care permite unei pagini web să acceseze resurse dintr-un alt domeniu) ar trebui utilizată atunci când se preia o imagine de pe un site. anonim — browserul adaugă automat un antet Origin la o solicitare între domenii, care conține numele domeniului de la care a fost făcută cererea. Dacă serverul nu răspunde cu antetul CORS Access-Control-Allow-Origin: * (sau numele domeniului în loc de asterisc), atunci încărcarea imaginii va fi blocată. use-credentials - Dacă serverul nu furnizează acreditări utilizând Access-Control-Allow-Credentials: true , atunci încărcarea imaginii va fi blocată.
href	Atributul principal al etichetei, valoarea este calea către fișierul cu stiluri.
hreflang	Determină limba textului din documentul de referință.
mass-media	Specifică tipul de dispozitiv la care ar trebui să fie aplicată resursa de legătură.
nonce	Generat la întâmplare o variabilă șir pe server care stabilește reguli pentru utilizarea stilurilor inline pentru a proteja conținutul. Valoarea atributului este un șir de text.
rel	Atributul definește relația dintre documentul curent și documentul la care se face referire. alternativ - un link către același document, dar într-un format diferit (de exemplu, pagini pentru tipărire, traducere, oglindă, feed în format RSS sau Atom), . arhive - indică faptul că documentul legat este de interes istoric. Link-ul poate indica o colecție de înregistrări, documente sau alte materiale. linkul autorului către o pagină despre autorul documentului sau către o pagină cu informațiile de contact ale autorului. link de marcaj către cel mai apropiat strămoș al articolului, adică legătură, sau la secțiunea de articole cel mai strâns legată de element dacă nu există un strămoș. extern este folosit pentru a indica faptul că pagina către care face legătura nu face parte din acest site. mai întâi specifică o legătură care indică primul document dintr-o secvență de documente. link de ajutor către un document de ajutor. pictograma specifică calea către pictograma care va fi utilizată pentru documentul curent. ultimul indică un link care duce la ultimul documentîn succesiunea documentelor. licență Un link către informațiile privind drepturile de autor pentru un document. în continuare indică faptul că acest document face parte dintr-o serie și că linkul duce la următorul document din acea serie. nofollow indică faptul că linkul nu este aprobat de autorul paginii sau că linkul este de natură comercială. noreferrer indică faptul că antetul cererii client care conține url-ul sursei cererii nu ar trebui să fie transmis atunci când urmărește linkul. pingback specifică adresa serverului de pingback, ceea ce permite blogului să notifice automat site-urile care leagă la acesta. prefetch specifică faptul că fișierul la care se face referire trebuie să fie stocat în cache în prealabil. prev indică faptul că acest document face parte dintr-o serie și că linkul este către un document anterior din acea serie. căutare indică faptul că documentul la care se face referire conține o interfață pentru căutare și resurse aferente. bara laterală indică faptul că documentul legat va fi afișat în context suplimentar de browser, dacă este posibil, iar unele browsere, când faceți clic pe un hyperlink, deschid o fereastră pentru a adăuga linkul la bara de marcaje. link către foaia de stil fișier extern, care va fi folosită ca foaie de stil pentru acest document. eticheta indică faptul că eticheta cu hyperlink se aplică acestui document. sus indică faptul că pagina face parte dintr-o structură ierarhică și că hyperlinkul merge la mai multe nivel înalt resursă în structură.
dimensiuni	Specifică dimensiunea pictogramei pentru afișare vizuală. Atributul sizes este utilizat numai împreună cu rel="icon" și poate lua următoarele valori: lățimi-înălțime - definește o listă de dimensiuni separate prin spații, fiecare dimensiune trebuie să fie în format - lățimi-înălțime (dimensiunile pictogramei sunt specificate în pixeli), de exemplu: ; orice - pictograma poate fi scalată la orice dimensiune.
titlu	Definește titlul unui link sau numele unui set de foi de stil alternative. Valoarea atributului este text.
tip	Specifică tipul MIME al documentului la care se face referire. În acest caz, ia valoarea „text/css” .

1.2.5. Element Tabelul 5. Atributele etichetei Descrierea atributului, valoare acceptată

asincron	Atributul indică faptul că scriptul va rula asincron cu restul paginii (scriptul va începe să se execute în același timp în care se încarcă pagina).
set de caractere	Definește codificarea caracterelor
origine încrucișată	Stabilește dacă CORS va fi utilizat la încărcare scripturi externe(folosind atributul src). anonim — înainte de a încărca scriptul într-o solicitare între domenii, browserul adaugă automat antetul Origin, fără a trece parametri de acces (cookie, certificat X.509, autentificare/parolă pentru autentificare de bază prin HTTP). Dacă răspunsul serverului nu conține antetul Access-Control-Allow-Origin: nume de domeniu, scriptul nu va fi încărcat. use-credentials — înainte de a încărca scriptul într-o solicitare între domenii, browserul adaugă automat un antet Origin care indică parametrii de acces (cookie, certificat SSL sau perechi de autentificare/parolă). Dacă răspunsul serverului nu conține antetul Access-Control-Allow-Credentials: true, scriptul nu va fi încărcat.
amâna	Interpretarea scripturilor este amânată până când documentul este redat pe dispozitivul utilizatorului.
nonce	Oferă securitate prin protejarea împotriva atacurilor cross-site scripting (XSS). Setează reguli pentru utilizarea scripturilor încorporate folosind valori nonce și hash-uri. În timpul redării paginii, browserul calculează hashuri pentru fiecare script inline și le compară cu cele enumerate în CSP. Descărcarea din alte resurse decât „ lista albă", este blocat.
src	Indică locația fișierului script, valoarea atributului este URL a fișierului care conțin un program JavaScript.
tip	Folosit pentru a declara limbajul de script folosit pentru a compune conținutul etichetei.

1.3. Element

Această secțiune conține tot conținutul documentului. Disponibil pentru element.

Tabelul 5. Atributele etichetei Descrierea atributului, valoare acceptată

pe amprentă	Un eveniment care se declanșează după ce o pagină este trimisă pentru imprimare sau după ce fereastra de imprimare este închisă.
onbeforeprint	Un eveniment care se declanșează înainte ca o pagină să fie trimisă pentru imprimare.
onbeforeunload	Evenimentul este declanșat atunci când vizitatorul inițiază o tranziție către o altă pagină sau dă clic pe „închide fereastra”. Vă permite să afișați un mesaj în dialogul de confirmare pentru a anunța utilizatorul dacă dorește să rămână sau să părăsească pagina curentă.
onhashchange	Evenimentul este declanșat atunci când partea hash a adresei URL se modifică, de exemplu când utilizatorul trece de la example.domain/test.aspx#page1 la example.domain/test.aspx#page2 .
onmessage	Un eveniment are loc atunci când un mesaj este primit printr-o sursă de eveniment.
onoffline	Evenimentul este declanșat de browser atunci când browser-ul stabilește că conexiunea la Internet a fost pierdută.
online	Evenimentul este declanșat de browser atunci când conexiunea la Internet a fost restabilită.
onpagehide	Evenimentul are loc atunci când utilizatorul părăsește pagina prin navigare, cum ar fi făcând clic pe un link, reîmprospătând pagina, completarea unui formular etc.
onpageshow	Evenimentul are loc atunci când utilizatorul navighează la pagina web, după evenimentul onload.
la descărcare	Evenimentul este declanșat dacă pagina nu se încarcă dintr-un motiv oarecare sau când fereastra browserului este închisă.

Buna ziua! NU veți găsi nimic util în această lecție dacă sunteți DEJA familiarizat cu formarea structurii unui document HTML. Pentru cei care NU sunt familiarizați, voi arăta structura corectă (validă) a unui document web HTML, inclusiv pentru un site WordPress.

General corect Structura HTML document

În primul rând, fără prea mult preambul - structura generala orice document HTML ar trebui să fie astfel:

/*Indicează tipul de document DTD curent*/ /*Afișează începutul documentului*/ /*Afișează începutul titlului (antetul)*/ Test/*Afișează titlul*/ /*Afișează începutul titlului* / /*Afișează începutul părții principale a documentului (corp) */ /*Partea de conținut a documentului*/ /*Afișează sfârșitul părții principale a documentului*/ /*Afișează sfârșitul documentului* /

Dacă eliminăm explicațiile pe care le-am arătat după fiecare etichetă, atunci structură simplă HTML-ul documentului arată astfel

Test

Tipul de document DTD curent

Tipul de document curent ( Definirea tipului de document, DTD) este necesar pentru ca browserul să înțeleagă cum să interpreteze pagina web curentă, la urma urmelor limbaj HTML există în mai multe versiuni.

În plus, există și alte limbaje de marcare, altele decât HTML, cum ar fi XHTML.

Notă: XHTML este EXtensible HyperText Markup Language, care se traduce ca limbaj de marcare hipertext extins.

XHTML este similar cu HTML, dar sintaxa este diferită. Pentru a preveni confundarea browserului între limbi, trebuie să îl afișați în prima linie de cod, tipul documentului curent este DOCTYPE.

Conceptul de etichetă în HTML

Ați observat că întreaga structură a unui document HTML este specificată de anumite etichete - anumite cuvinte cuprinse între paranteze unghiulare.

Cuvântul cuprins între paranteze unghiulare într-un document HTML se numește etichetă. Fiecare etichetă are propriul său sens, determinat de regulile de marcare.

Tag înseamnă titlul documentului html. Etichetele head stochează informații pentru browsere și motoarele de căutare. Inclusiv sub formă de meta-etichete;
Eticheta înseamnă conținutul principal al documentului html. Este text, imagini, Scripturi Java Scenariul etc.;
Eticheta [p] este un element de bloc și începe întotdeauna cu linie nouă. Înseamnă paragraful de conținut principal al unui document html.

Important! Toate etichetele de markup HTML trebuie să fie asociate. Adică, eticheta de deschidere trebuie să fie închisă de o etichetă de închidere, urmată de o bară oblică.

Etichete de titlu și subtitlu h1-h6

Pentru a îmbunătăți structura textului documentului, precum și pentru a îmbunătăți SEO a paginilor web, există etichete suplimentare de conținut body. Se numesc etichete de titlu și subtitlu de la h1 la h6, 6 în total.

Sunt la fel ca etichetele [p]-paragraf, care vă permit să evidențiați secțiuni semantice ale textului și vă permit să împărțiți textul în părți semantice, dând fiecărei secțiuni propriul titlu.

Etichetele h1 - h6 au o dependență subordonată, nivel inferior acest paragraf de subordonare.

Este important de reținut că ruperea dependenței subordonate a etichetelor h1 - h6 - p nu va distruge afișarea și validitatea documentului, ci doar va înrăutăți optimizarea acestuia pentru motoarele de căutare.

Un exemplu de structură de document HTML dezvoltată

Permiteți-mi să vă dau un exemplu academic al unei structuri de document HTML mai dezvoltate:

Test Poziție principală Poziție principală Prima subpoziție Poziție principală A doua subpoziție Prima subpoziție minoră

Structura HTML 5

În HTML 5, structura documentului ar trebui să fie astfel:

Aceasta este o declarație care arată că acest document este în HTML5;

acesta este elementul rădăcină Pagini HTML;

Un element cu meta-etichete despre document;

Acest element definește titlul documentului;

Acest element conține conținutul vizibil al paginii;

Elementul definește un titlu mare

Elementul definește un paragraf.

Etichetele H2 - h6 funcționează în HTML5

Toate etichetele sunt duble. Eticheta de început se numește eticheta de deschidere, iar eticheta de sfârșit se numește eticheta de închidere.

Marcaj HTML pe un site WordPress

În ciuda faptului că scriptul WordPress este scris în PHP, toate fișierele site-ului, sau mai degrabă toate fișierele șablonului de lucru al site-ului, au marcaj html. Să ne uităm la exemplul din fișierul header.php al șablonului Twenty Seventeen:

Puteți vedea că dacă toate funcțiile WordPress sunt plasate în marcaj HTML clasic. Există un tip de document:

Etichete pereche,

Eticheta de deschidere.

Eticheta de închidere poate fi găsită în fișierul footer.php.

Cum să vizualizați codul HTML al unei pagini de site WordPress

Ceea ce scrii în editorul site-ului, creând articole sau pagini, este doar o parte a paginii HTML a site-ului. Acesta nu este nici măcar întregul corp al paginii.

Pentru a vizualiza codul HTML al unei pagini de site WordPress, iar acesta este necesar foarte des, aveți nevoie de:

Deschideți pagina în browser;

Comutați la fontul tastaturii engleze;

Apăsați următoarele butoane:

Chrome: Ctrl+U
Opera: Ctrl+U
Mozilla: Ctrl+U

Poate încă nu știi de ce este nevoie de asta. Crede-mă, vei avea nevoie de asta de mai multe ori pentru a-ți analiza site-ul și, eventual, site-urile concurenților.

Concluzie

În concluzie, am vrut să trag o concluzie, dar singurul lucru care îmi vine în minte este că articolul s-a dovedit a fi complet pentru începători. Între exemplu de cod al articolului și exemple de pe site-uri reale, la prima vedere mare diferenta. Cu toate acestea, toate fișierele au aceeași structură de document HTML și este extrem de important să nu încălcați această structură atunci când lucrați cu site-ul.

Data creării: 2012-03-03 21:08:27
Ultima modificare: 2012-03-03 21:10:19

Astăzi vom vorbi despre documentele HTML, adică. despre fișierele care conțin cod HTML.

Crearea documentelor HTML

Orice document HTML este simplu fișier text, ceea ce înseamnă că poate fi citit într-un editor de text (de exemplu, Notepad).

Creați un fișier text în orice folder de pe sistem și schimbați-i extensia în html sau htm. Acum, dacă încercați să citiți un astfel de fișier, acesta va fi deschis în browserul web (pe care îl utilizați implicit).

Folosesc Opera și așa va arăta în browser dosar gol pe care l-am sunat document HTML:

Comentariu:
Apropo, este mai bine să scrieți numele fișierelor (mai ales dacă sunt stocate pe Internet) în latină.

Pentru a modifica conținutul unui fișier, trebuie să îl deschideți printr-un editor de text. Clic clic dreapta mouse-ul pe pictograma fișierului din Explorer și selectați Deschide cu -> Notepad. Desigur, este mai bine să folosiți un editor de text mai robust. De exemplu, în toate exemplele voi folosi Notepad++ gratuit. Iată cum va arăta un fișier .html gol în editorul de text Notepad++:

Ei bine, avem un document HTML gol care se deschide deja în browser. Tot ce rămâne este să-l completezi.

Document HTML5 bine format

Orice document HTML5 trebuie să înceapă cu linia:

Această linie este pentru program special(html-validator), care verifică conținutul documentului pentru conformitatea cu standardul HTML5. Plasați această linie în fiecare dintre fișierele dvs. html.

Comentarii HTML

HTML oferă comentarii pentru a marca textul pe care nu doriți să îl afișați. utilizatorul final. Aceste. Textul plasat în comentariu nu este vizibil în browser. Comentariile sunt formatate astfel:

Comentariile sunt situate între construcții.

Comentariile sunt folosite pentru a explica codul.

html, cap

După DOCTYPE vine eticheta html rădăcină:

Tot conținutul paginii trebuie să fie în interior etichetă html. Această etichetă are un atribut lang (de la limbă - limbă), care afectează limba în care motoarele de căutare văd pagina dvs.

Un document HTML este împărțit în două părți principale: cap și corp:

ÎN etichetă de cap informații despre serviciul locației: codificare, titlul paginii, descriere, cuvinte cheie și multe altele, cu care ne vom familiariza în lecțiile ulterioare. Să vedem cum va arăta pagina cu informații despre serviciu:

document HTML

Eticheta de titlu stochează titlul paginii. Acesta este textul care va fi afișat în rezultatele motorului de căutare.

Metaeticheta nu are nevoie de o etichetă de închidere. Este format din două atribute. Primul atribut poate fi: charset, name, http-equiv.

Cred că totul este clar cu descrierea și cuvintele cheie, singurul lucru este că cuvintele cheie pot fi introduse fie separate prin virgulă, fie separate prin spațiu. Dar ne vom opri asupra codificării mai detaliat.

Codificarea documentelor HTML

Specificarea codificării este necesară pentru ca browserul să poată determina corect ce caractere a folosit creatorul la scrierea paginii.

Acum Unicode este folosit peste tot, iar pe Internet Unicode este reprezentat de utf-8 (există și alte reprezentări). Unicode vă permite să utilizați caractere din diferite limbi.

Codificările anterioare permit numai utilizarea caracterelor latine și a unui alt script. De exemplu, pentru a folosi alfabetul chirilic, puteți folosi următorul cod:

Dar atunci nu veți putea folosi simboluri ale altor scripturi pe paginile dvs., cu excepția latină și chirilică. Așa că folosiți întotdeauna utf-8. Acest lucru va permite browserelor să afișeze cu ușurință, de exemplu, text ca acesta:

Buna ziua! Buna ziua! नमस्कार।

Codificările sunt discutate mai detaliat (exhaustiv, aș spune) în alte lecții de pe site.

Pentru ca Unicode să fie afișat corect, paginile trebuie salvate în utf-8.

corp

În eticheta body este afișat tot conținutul vizibil al paginii.

Deci, documentul HTML final arată astfel:

document HTML

În lecția următoare vom începe să completăm pagina.

Vizualizați codul html al paginii

Apropo, puteți vizualiza codul sursă al oricărei pagini. De exemplu, în Opera puteți face clic dreapta pe orice spațiu gol (nu pe imagine/link) și selectați „ Cod sursă„. Așa arată codul HTML sursă al uneia dintre paginile site-ului shatalov.su:

Acum suntem gata să ne murdărim mâinile cu cerneală. Simțiți-vă ca un designer de layout într-o tipografie de la mijlocul secolului XX. Zgomotul ritmic al tipografiei, mirosul tiparului proaspăt, clinchetele literelor din alamă împinse la locul lor. Role mari de hârtie de ziar curată, așteaptă să primească o parte din informațiile de circulație. Iar tu, stând la mașina de tipografie, plasezi blocul de informații la locul potrivit...

E bine că computerele au venit cu asta. Puteți crea atmosfera potrivită pentru dvs., astfel încât să puteți începe să creați într-un mediu calm. De fapt, asta vom face acum.

Pentru a finaliza sarcinile de care veți avea nevoie (va exista un motiv pentru a face upgrade):

Dacă sunteți interesat, puteți verifica cât de mult acceptă browserul dvs. web standardul HTML5. Urmați linkul http://html5test.com, acolo veți vedea puncte, a căror sumă este formată din numărul de puncte suportate din standard. La momentul scrierii, pe mașina mea (Ubuntu10.10), Opera11.10 a obținut 258 de puncte, iar FireFox4 doar 240. Mă întreb ce ai?

În acest tutorial, noi:

Vom crea o pagină cu dvs. conform standardului HTML5
să folosim elemente semantice noi,
hai sa desenam putin,
Să verificăm cum este afișat videoclipul pe pagina noastră,
Să verificăm funcționarea noilor elemente de formular.

Pentru a funcționa, va trebui să creăm un singur fișier HTML index.htmlși un fișier CSS stiluri.css. Scripturile vor apărea pe pagină pe măsură ce finalizați sarcinile, așa că fiți pregătit ca browserul dvs. să vă avertizeze despre acest lucru. Va trebui să permiteți rularea scripturilor pe pagină.

Pregătirea cadrului paginii

Browserul trebuie să cunoască pagina din vedere! Dacă nu îi spuneți cine este și de unde este, el va activa modul de compatibilitate și va trebui să ghiciți „cum va răspunde cuvântul dumneavoastră” în browserul clientului. Pentru a preveni acest lucru, trebuie să notați tipul corect de document corespunzător codului paginii chiar la începutul paginii.

Aparent, după ce au auzit rugămințile designerilor de layout, băieții de la W3C le-a făcut milă și au făcut o scurtă etichetă pentru standardul HTML5. Orice pagină web care acceptă cel mai recent standard trebuie să înceapă cu acesta. Îți amintești cum era înainte... public … tranzitorie sau strict... și adresa fișierului de descriere a tipului de document, care este atât de lung.

Să începem. Creați un folder pe desktop, acesta va conține cuplul nostru dulce de HTML și fișiere CSS. Creați un fișier text simplu index.html, în codificare utf-8. Această codificare a caracterelor a fost mult timp standardul pentru toate textele care nu sunt în limba engleză.

Prima linie este unde scriem tipul de document.
În al doilea rând - deschideți eticheta principală a întregului document html și specificați parametrul lang, scriind acolo limbaj de bază pagini - rusă.
Să trecem la titlu.
Primul lucru pe care îl vom indica este codificarea caracterelor documentului.
Apoi titlul pentru fereastra browserului.
Apoi, fără ezitare, vom conecta fișierul de stil.
În cele din urmă, să adăugăm un container gol pentru corpul documentului.

Tot ce am descris aici este în Lista nr. 1:

Listarea 1. Structura de bază document HTML5

Investitorii văd viitorul

Vă rugăm să rețineți că majoritatea etichetelor nu sunt la fel de lungi ca înainte. Eticheta nu are nevoie de nimic mai mult decât lang. Pentru o metaetichetă, scrieți set de caractere. În plus, pentru etichetă legătură nu este nevoie de precizat tip.

Cadrul este gata, dar este prea devreme pentru a afișa pagina în browser. Să trecem la elementele semantice ale paginii.

Să marcăm conținutul Să plasăm blocuri semantice pe cadru

Acum să fim mai precisi despre ce vom avea pe pagină. Vom proceda de la următoarele: trebuie să folosim la maximum noile elemente semantice ale HTML5.

Pagina noastră va servi pentru afișarea textului integral al știrilor despre compania căreia îi este dedicat site-ul. Va fi o tranziție la el fie de la pagina de start unde sunt situate cele mai recente știri, sau din arhiva de știri.

Să punem blocurile într-un recipient. Ne vom ține de următoarea secvență aceste elemente:

– antet
– – hgrup
– nav
– articol
– – antet
– – „conținut”
- - secțiune
– – – antet
– – – „conținut”
– subsol

La început, vom avea un bloc - titlul paginii. cu un grup de titluri care vorbesc despre site. Apoi un bloc semantic pentru meniu. Să facem linkurile din meniu fictive. După aceasta, începe articolul, indicat de blocul semantic corespunzător. Conține un bloc de antet pentru a înregistra titlul articolului și data publicării. Urmează conținutul articolului, la care se adaugă concluziile proprii ale autorului care a scris știrea. Acest supliment este conceput ca o secțiune și este, de asemenea, însoțit de un bloc de titlu și de conținut. La sfârșitul paginii există un bloc subsolul, în care vom posta informații suplimentare despre conținutul paginilor noastre.

Tot ceea ce am descris aici este prezentat în Lista nr. 2. Noi nu oferim cod complet pagini, ci doar ce ar trebui să fie între etichete... .

Lista 2. Plasarea blocurilor semantice HTML5

LLC Coarne și copite Text completştiri

Acasă
Despre noi
Contacte
Arhivele de știri

Apr 26 Investitorii văd perspective

Nimic nu-i împiedică pe oameni să folosească coarnele iepurii. Cu toate acestea, nu are copite.

Ce crede publicul

În realitate, există doar Ubuntu cu asta nume ciudat„Harelope”.

2011 LLC Coarne și copite. Ne păstrăm drepturile într-un loc sigur.

Acum pagina poate fi vizualizată în browser. Cu toate acestea, încă arată neatractiv. Dar nu degeaba ne-am ocupat deja și am inclus fișierul cu stiluri.

Să pictăm fațada

Pagina noastră încă arată plictisitoare și neatractivă. Hai să-i facem machiajul. Să-l implementăm în fișierul nostru de stil stiluri.css Primul lucru pe care îl vom face este să decidem asupra fontului pentru întregul document. Dacă cineva nu știe, să spunem că s-au efectuat cercetări asupra fontului care este mai bine perceput de pe un ecran de monitor și s-a dovedit că este cel care nu are serif. Astfel de fonturi se numesc sans-serif - fără serif. Acestea includ, de exemplu: Arial, Helvetica, Verdana. Să mergem mai departe, vom stabili în ordine regulile de proiectare a tuturor elementelor paginii noastre. Pentru a nu ajunge prea mult înaintea noastră, să folosim câteva caracteristici deocamdată - umbre și margini rotunjite pe blocuri.

Majoritatea a ceea ce vom codifica aici a fost disponibil în standardele CSS timpurii. Vom enumera noile caracteristici.

cutie-umbră
Acest parametru este specificat pentru element bloc pagină și creează o umbră în jurul acesteia. Primele patru numere sunt parametrii liniari ai umbrei, respectiv sunt indicați fie în pixeli; px, sau alte unități liniare ( ei, pct), sau fără ele, în cazul mărimii zero. Primul număr înseamnă aruncarea orizontală a umbrei la dreapta, dacă doriți să o aruncați la stânga, puneți număr negativ. Următorul este vertical în jos pentru a-l face, pune un număr negativ. Urmează cantitatea de estompare a umbrei, apoi umbra răspândită. Dupa dimensiunile liniare este indicata culoarea umbrei, si daca doriti umbra interioara Că cuvânt cheie medalion. Dacă o umbră nu este suficientă pentru tine, atunci realizează-ți fanteziile de umbră separate prin virgule.

text-umbră
Acest parametru este similar în setările sale cu cel precedent, singura diferență fiind absența împrăștierii umbrelor și a umbrei interne. Și nimeni nu te împiedică să fantezi cu privire la numărul de umbre, separate prin virgule.

raza-chenar (-moz-raza-chenar, -webkit-raza-chenar)
Raza de rotunjire a blocurilor. Un bloc poate avea patru colțuri, astfel încât acest parametru poate avea același număr de elemente. Listat în sensul acelor de ceasornic începând din colțul din stânga sus. Numele parametrilor indicați între paranteze sunt folosite în browserele familiei Mozilla și pe motorul Webkit (Chrome, Safari). Deci, duplicați în regulă setările specificate pentru hotar-raza tot în acest cuplu de parametri.

Designul cu care am venit și codificat va arăta ca cel prezentat în Lista nr. 3. Acest cod trebuie să îl puneți într-un fișier stiluri.css.

Lista 3. CSS pentru noile elemente semantice HTML5

* ( font-family: Lucida Sans, Arial, Helvetica, sans-serif; ) body ( width: 480px; margin: 0px auto; ) header.mainH ( -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px-box-shadow: 0 3px 0 #AA4400 -moz-box-shadow: 0 3px 5px 0 #AA4400; : 36px; margine: 0px; ) antet h2 ( dimensiunea fontului: 18px; marginea: 0px; culoare: #888; stilul fontului: cursiv; ) nav ul (stil listă: niciunul; afișare: bloc; culoarea fundalului: #666; înălțime: 24px;: 12px; bord-rază: 12px; ( culoare: #EFD3D3; text -decor: niciuna; dimensiunea fontului: 13px; greutatea fontului: bold; ) nav ul li a:hover (color: #fff; ) articol > timp antet (font-size: 14px; afișare : lățime: 26px: text-align; culoare de fundal: #993333;

culoare: #fff; greutatea fontului: bold; -moz-border-radius: 6px;

-webkit-border-radius: 6px; chenar-rază: 6px; plutire: stânga;

margine-jos: 10px; ) articol > interval de timp antet ( dimensiunea fontului: 10px; greutatea fontului: normal; transformarea textului: majuscule; ) articol > antetul h1 ( dimensiunea fontului: 20px; float: stânga; margin-left: 14px; text-shadow : 2px 2px 1px #FFFFFF, 2px 2px 5px #888 ) articol > antet h1 a ( culoare: #993333; text-decoration: niciunul; ) articol > antet secțiune h1 ( font-size: 16px; ) articol p ( clar: ambele; ) subsol p ( text-align: center; font-size: 12px; culoare: #888; margin-top: 24px; ) articol > secțiune ( -moz-border-radius: 6px 0 0 0; -webkit-border -radius:6px 0 0 0; border-radius: 6px 0 0 0 box-shadow: 3px 3px 0 #FFAA88 padding: #665588;

Dacă deschideți pagina de index acum, nu va arăta atât de plictisitor, uitați-vă la Figura 1. În comparație cu vizualizarea anterioară, va fi pur și simplu SUPER