Amenajarea site-ului pe html5 și css3

Iată imaginea site-ului, pe care o vom scrie în HTML5 și CSS3:

Curs practic pe aterizare adaptivă de la zero!

Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile

De asemenea, descărcați sursa pe computer!

Deasupra imaginii vedeți conținutul dosarului care conține demonstrația finală a paginii - așa cum a promis, nu o singură imagine. Avem o pagină HTML cu marcaj "avansat", un fișier CSS care conține stiluri care sunt gestionate de CSS3 și un dosar care conține mai multe fonturi pe care le vom insera utilizând regula @ font-face.

Ca de obicei, vă sfătuiesc să puneți tot conținutul site-ului în fișierul index.html înainte de a merge chiar la CSS, așa că hai să mergem direct la el și să începem.

Layout pe HTML5 - dezvoltarea este mai rapidă, iar codul este mai flexibil

În plus față de introducerea de noi elemente semantice, HTML5 scurtează foarte mult codul.

Iată cum a fost înainte:

Modalitatea spre HTML5 este mult mai bună, nu? Apoi deschideți eticheta html și setați limba pentru document. (Subtagul limbii sale poate fi găsit în registrul de subtaguri IANA). O altă schimbare vizibilă aici este lipsa citatelor din jurul valorii de en. A trebuit să includeți citatele în XHTML pentru a valida, dar pe baza faptului că acesta este HTML5, acestea nu mai sunt necesare.

Deplasându-vă la eticheta corporală, marcați zona de antet a paginii dvs., care este plină de elemente HTML5:

Elementul de titlu

Imediat după deschiderea etichetei de caroserie, vom folosi unul dintre noile elemente HTML5 - antet. Iată definiția dată elementului header de către Consorțiul Word Wide Web (W3C):

Elementul antet reprezintă un grup introductiv sau auxiliari de navigație.

În urma recomandării, elementul antet va conține logo-ul, subtitrarea și navigația principală. Când intrăm în elementul antet al antetului, avem un detaliu al marcajului care conține toate acele părți ale paginii pe care le considerăm intuitiv ca titlu. (Sau toate detaliile paginii care va fi imbricata in elementul div cu id-ul antetului.) Pe pagina, elementul header poate fi folosit mai mult de o data si il vom folosi din nou in interiorul elementelor de articol, care vor contine intrari in posturi.

Elementul Hgroup

Primul element din elementul antet este o altă etichetă nouă - hgroup. Îl vom folosi pentru a afișa sigla site-ului nostru și subcapitolul în etichetele h1 și h2, respectiv.

Elementul hgroup este utilizat pentru a grupa un set de elemente h1-h6 atunci când antetul are mai multe niveluri, cum ar fi sub-nume, nume alternative sau sub-rubrici.

Elementul hgroup poate părea inutil până când înfășurați anteturile în elementul div ca de obicei, astfel încât numele sau subimul (ele) să aibă un fundal normal sau un stil. Cu toate acestea, în schema de documente, hgroup joacă un rol important. Algoritmul schemelor verifică pagina dvs. și trece structura antetului. Consultați conturul muncii dvs. cu instrumentul Outliner. Când algoritmul de schemă întâlnește un hgroup, ignoră totul, cu excepția antetului cel mai înalt (de obicei, h1).

Acum avem o problemă: algoritmul schemei nu este perfect și nu este completat. De exemplu, următorul element pe care îl vom discuta este elementul nav și marcajul îl marchează ca o secțiune "Untitled". Dezvoltatorii marcajului au fost rugați să schimbe algoritmul schemei pentru ca navigația să reprezinte elementul de navigație (navigație). În orice caz, elementul hgroup vă oferă o modalitate de a vă grupa titlurile și, astfel, le aranjează atât structural, cât și semantic.

Elementul Nav

Mergem la următorul element HTML5, nav. În nav vom include navigarea principală a site-ului, înfășurată într-o listă neordonată.

Utilizarea nav pentru a crea navigarea principală a site-ului este un pic de fapt, dar circumstanțele sunt astfel încât site-ul dvs. va avea mai multe zone care conțin legături; Întrebarea este care dintre ele ar trebui să înfășurați cu tag-ul nav. Iată câteva exemple de utilizare pe care cred că pot fi abordate:

Cuprins (TOC) într-un document lung;

Curs practic pe aterizare adaptivă de la zero!

Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile

Linkuri numerotate de tip "anterior / următor" și

Conform specificației, aceasta poate fi potrivită sau inadecvată pentru utilizarea elementului nav. Specificația nu este foarte clară, iar exemplele date nu ajută prea mult. Deci, în timp ce specificația nu este finală și mai specifică, puteți să vă bazați numai pe comunitatea dezvoltatorilor pentru a alege metoda corectă pentru utilizarea elementului nav.

Elementul articolului

Următorul element pe care vreau să-l prezint este articolul. Zona principală a paginii noastre demo conține trei citate din postări și fiecare dintre ele se înfășoară în eticheta articolului.

Iată definiția W3C pentru elementul articol:

De data aceasta specificația este mai ușor de înțeles, iar postarea pe blog (sau extrasul ei) este mult mai bună (acordați atenție mențiunii de sindicalizare) venind la articol. Desigur, putem plasa multe elemente de articol pe pagină.

Subpunctul Element

După cum am spus, footerul de subsol poate fi folosit pe o singură pagină de câte ori este necesar și este un segment al subsolului paginii sau al unei părți a documentului.

Secțiunea Element

Elementul secțiunii reprezintă aria generală a unui document sau a unei aplicații. O secțiune în acest caz este o grupare tematică a conținutului, de obicei cu ajutorul unui antet.

Elementul secțiunii este destul de complicat, deoarece în definiția specificației pare foarte asemănător elementului div. Am intrat în această capcană când am început să scriu cod pentru o pagină demo; Am plasat trei elemente de articol în interiorul elementului secțiunii. Curând mi-am dat seama de eroarea metodelor mele. Singura modalitate de a decide dacă să utilizați secțiunea este să vedeți dacă zona pe care doriți să o înfășurați cu elementul secțiunii are un titlu (titlu). Definiția arată că elementul secțiunii are de obicei un antet.

Elementul deoparte

Elementul HTML5 utilizat pentru pagina demo este în afară; l-am folosit ca un container cu coloană laterală.

Elementul aflat în afară reprezintă o secțiune a paginii care constă din conținutul său superficial legat de conținutul situat în plan circumscris și care poate fi perceput separat de acest conținut. Astfel de secțiuni sunt adesea reprezentate în tipografie ca coloane laterale.

Așa cum se poate observa din specificație, un exemplu de utilizare ideală a articolului din afară este coloana laterală. Mai jos, pe diagramă, puteți vedea locul ierarhiei elementului în afara paginii noastre demo.

Am publicat două secțiuni și o navă. Primul element al secțiunii conține legături către Twitter și RSS, iar al doilea reprezintă ultimul tweet (intrarea Twitter a utilizatorului). Al doilea element este secțiunea, pe lângă - unul dintre cazurile rare în care nu are un antet. S-ar putea să aibă un nume, ceva de genul: "Ultimul Tweet", dar cred că nu este necesar, deoarece cititorii sunt obișnuiți să vadă blocuri de genul acesta, iar eticheta Twitter sub citat este foarte recunoscută. Elementul nav din bara noastră laterală este folosit pentru a reflecta lista de bloguri și, spre deosebire de navigația principală, are un antet.

Ultimul cuvânt

Deci, aici vine sfarsitul primei parti a articolului dedicat layout-ului site-ului pe HTML5 si CSS3. Am incercat sa fac acest lucru cat mai scurt posibil si sa nu cheltui prea mult timp incertitudinea din caietul de sarcini HTML5, pentru ca nu a terminat inca. Între timp, va trebui să ne bazăm pe comunitatea și activitatea "vindecătorilor" HTML5, care vor deveni ghidul nostru pentru introducerea de noi elemente în site-uri.

Vă mulțumim pentru citire și nu ignorați a doua parte a articolului, unde vom discuta despre proprietățile CSS3 utilizate pentru decorarea marcajului.