Ghidul începătorului pentru a construi pagini web HTML5 / CSS3

Acest articol este parte a noastră "Seria Tutoriale HTML5 / CSS3" - dedicat pentru a vă ajuta să vă faceți un designer mai bun și / sau un dezvoltator. Click aici pentru a vedea mai multe articole din aceeași serie.

HTML5 și CSS3 au înlăturat webul de furtună în numai 2 ani. Înainte de acestea, au existat numeroase semantici modificate în modul în care web designerii se așteaptă să creeze pagini web, iar odată cu sosirea lor, au venit o mulțime de suporturi minunate, cum ar fi suporturi alternative, etichete în stil XML și atribute progresive de intrare pentru web designeri, caracteristici precum animație.

Deși majoritatea dezvoltatorilor par să prezinte demo-uri potențiale și totuși complicate, HTML5 / CSS3 nu sunt cu adevărat știința rachetelor și vă voi umbla prin procesul de relaxare pentru a construi o pagină web HTML5 / CSS3 standard, cu o explicație detaliată și în detaliu! Bonusurile precum resursele de învățare și șabloanele HTML5 gratuite sunt disponibile pentru dvs., deci luați această șansă pentru a vă da startul călătoriei dvs. HTML5!

Modificări între HTML4 și HTML5

S-ar putea să vă întrebați de ce este chiar important să treceți în HTML5. Există o mulțime de motive, dar mai ales pentru că vei fi care lucrează cu standardele globale de Internet ca orice alt designer. În acest fel veți găsi mai multă asistență online și dvs. site-urile Web se vor afișa corect în browserele moderne care sunt în mod constant îmbunătățite.

(Imagine Sursa: W3C)

Comparația dintre HTML4 și HTML5 este dificil de observat la nivel de suprafață. Din vizualizarea noului proiect HTML5, puteți vedea elementele prezentate și procedurile corectate de tratare a erorilor. Dezvoltatorii de browsere s-au bucurat în mod special de noile specificații pentru redarea paginilor web implicite.

Ce este mai mult de la HTML5 este conversia browserului nostru web modern. Cu aceste specificații noi, web-ul ca întreg este acum privit ca un platformă de aplicații pentru HTML (în special HTML5), CSS și JavaScript pentru a fi construite. De asemenea, acest sistem elegant creează armonie între designerii web și dezvoltatori prin stabilirea unor standarde comune pe care toate browserele ar trebui să le urmeze.

În plus, au fost create multe elemente reprezintă mijloace media digitale noi. Acestea includ și care sunt uriașe pentru suportul multimedia. În unele browsere puteți completa validarea formularului direct în HTML. Acordat este încă o nevoie mare de jQuery, deoarece există mulți dezvoltatori de software care încă nu au recunoscut caracteristicile. Dacă doriți o listă de etichete, verificați această tabelă W3Schools pentru a afla mai multe despre ele.

Bare HTML5 schelet

Mi se pare cel mai simplu mod de a înțelege orice subiect scufundați chiar în ea. Așadar, voi construi un șablon de schelet HTML5 foarte simplu pentru o pagină web. Am inclus câteva dintre cele mai noi elemente, pe care sper să le categorisem un pic mai târziu.

        
 
 
Bine ai venit, unul și toate!
  
 
 
 
unele conținut aici.
 
 
 
dar și unele aici!
 
 
  
   

În prezent, acest lucru nu este foarte diferit de o pagină web standard HTML4. Ceea ce puteți observa este că noi nu trebuie să includeți mai multe etichete cu auto-închidere. Aceasta este o știre cu adevărat minunată, deoarece va economisi o mulțime de timp de pe proiectele dvs. de dezvoltare.

Pentru cei care nu știu, în XHTML drafts au existat multe elemente etichetate auto-închidere. Acestea s-ar termina cu un slash înainte de operatorul "mai mare decât" pentru a indica că nu va trebui să includeți altă etichetă de închidere în altă parte. De exemplu, pentru a crea o etichetă cu cuvinte cheie meta pe care ați folosi-o fără a fi nevoie de o închidere în altă parte.

Această regulă se aplică și în HTML5. Dar acum tu nici măcar nu aveți nevoie de slash-ul suplimentar! este complet valabil, deși vi se permite să continuați să utilizați standardul XHTML / XML. Pentru toate browserele compatibile cu standardele, ambele elemente vor face același mod.

Definirea domeniilor noastre de pagină

Majoritatea noului nostru cod nu ar trebui să fie prea șocant. Al nostru doctype este hilar mai simplu ca niciodată, nu este nevoie de atribute corporale excesive, iar informațiile de la poziția noastră sunt etichetate în mod clar. Mă duc să vă concentrez atenția asupra conținutului din interiorul nostru etichetă. Aceasta include toată structura paginii principale. Am folosit în mod intenționat câteva etichete HTML5 frumoase pentru a indica modul în care le puteți include în propria dvs. activitate.

Mai întâi veți vedea întreaga pagină este încapsulate într-un div etichetă. Am numit-o cu un ID de învelitoare, ceea ce înseamnă că înconjoară întregul conținut al site-ului. Aceasta este util pentru a seta un conținut maxim de lățime sau poziție în jurul ecranului. În continuare am fracturat pagina în 3 elemente de bază - una

, un nucleu

, și un scurt

Ghidul începătorului pentru Flock, browserul Social Media

Ghidul începătorului pentru dezvoltarea iOS Interfața - partea I

Ghid pentru începători pentru configurarea Windows 7 Media Center