Să începem cu un exemplu evident.
Codul semantic slab
Bună semantică a codului
Dar nu totul este atât de clar reprezentat de tagurile HTML5. Să ne uităm la un set de nume de clase și să vedem dacă îndeplinesc cerințele semanticii.
Nu este un cod semantic. Acesta este un exemplu clasic. Fiecare mediu de lucru CSS pentru o rețea modulară utilizează acest tip de nume de clase pentru a defini elementele grilei. Va fi "yui-b", "grid-4" sau "spanHalf" - astfel de nume sunt mai aproape de sarcina de marcare decât de descrierea conținutului. Cu toate acestea, utilizarea lor în majoritatea cazurilor este inevitabilă atunci când se lucrează cu șabloane de grile modulare.
Dacă ați trecut la utilizarea HTML5, atunci este mai bine să utilizați elementul
Codul semantic. În acest caz, este vorba despre determinarea nivelului de importanță al unui element în interfața aplicației (de exemplu, un paragraf sau un buton). Un element cu un nivel mai înalt poate avea culori strălucitoare și o dimensiune mai mare, iar elementele cu un nivel inferior pot conține mai mult conținut. Dar nu există o definiție precisă a stilurilor în acest caz, prin urmare codul este semantic. Această situație este foarte asemănătoare cu utilizarea etichetelor
. . . și așa mai departe, ci la alte elemente ale interfeței.
. și așa mai departe, ci la alte elemente ale interfeței.
Nu este un cod semantic. În acest caz, este vorba despre stabilirea stilului pentru primul paragraf de pe pagină. Această tehnică este folosită pentru a atrage atenția cititorilor asupra materialului. Este mai bine să folosiți numele "intro", în care nu se menționează elementul. Dar este mai bine să utilizați un selector pentru astfel de paragrafe, de exemplu articolul p: primul de tip sau h1 + p.
Codul semantic. Clasa descrie foarte bine starea conținutului. De exemplu, un mesaj de succes poate avea un stil complet diferit de mesajul de eroare.
Nu este un cod semantic. În acest exemplu, există o încercare de a specifica o definiție a formatului de conținut, mai degrabă decât scopul acestuia. "plain-jane" este foarte asemănător cu "normal" sau "obișnuit". Codul CSS ideal trebuie scris astfel încât să nu fie nevoie de nume de clasă, cum ar fi "regulat", care să descrie formatul conținutului.
Nu este un cod semantic. Clasele de acest tip sunt de obicei utilizate pentru a defini elementele site-ului care nu ar trebui să fie incluse în lanțul de link-uri. În acest caz, este mai bine să utilizați ceva de genul rel = nofollow pentru link-uri, dar nu o clasă pentru tot conținutul.
Nu este un cod semantic. Aici este o încercare de a descrie formatul conținutului, și nu scopul acestuia.
Nu este un cod semantic. Eticheta de referință însăși o definește. Dacă în acest caz sa încercat să selectați o legătură între altele, este mai bine să utilizați o descriere a tipului "de ce", de exemplu, "book-link" sau "button".
Să presupunem că aveți două articole pe site. Și vrei să le ceri diferite stiluri. "Review-urile filmului" vor avea un fundal albastru, iar "Hot news" - un fundal roșu și un font mai mare.
O modalitate de a rezolva problema este următoarea:
Un alt mod este acesta:
Desigur, dacă intervievați câțiva dezvoltatori despre ce cod corespunde mai mult cerințelor semanticii, majoritatea vor indica prima opțiune. Aceasta corespunde perfect materialului din această lecție: descrierea scopului fără referințe la formatare. Și a doua opțiune indică formatul ("blueBg" - numele clasei, care este format din două cuvinte în limba engleză care înseamnă "fundal albastru"). Dacă vă decideți brusc să schimbați designul recenziilor de film - de exemplu, pentru a crea un fundal verde, atunci numele de clasă "blueBg" se va transforma într-un coșmar al dezvoltatorului. Și numele "film-revizuire" vă va permite să schimbe absolut calm stilurile de design menținând în același timp un nivel excelent de sprijin de cod.
Dar nimeni nu susține că primul exemplu este mai bun în toate cazurile. Să presupunem că o anumită nuanță de albastru este folosită în multe locuri de pe site. De exemplu, este fundalul pentru o parte din subsolul și zonele din bara laterală. Puteți utiliza următorul selector:
O soluție eficientă, deoarece culoarea este determinată doar într-un singur loc. Dar un astfel de cod devine dificil de susținut, deoarece are un selector lung, complex pentru percepția vizuală. Alți selectori vor fi de asemenea obligați să definească stiluri unice, ceea ce va duce la o repetare a codului. Sau puteți utiliza o abordare diferită și lăsați-le împărțită:
Acest stil ajută la menținerea mai organizată a fișierului CSS (diferite zone sunt definite în secțiuni diferite). Dar plata este repetarea definițiilor. Pentru site-uri mari, definiția aceleiași culori poate ajunge la câteva mii de ori. Este teribil! Soluția ar putea fi folosirea unei clase ca "blueBg" pentru a determina culoarea o dată și ao introduce în cod HTML atunci când doriți să utilizați acest design. Desigur, este mai bine să o numiți "mainBrandColor" sau "secondaryFont" pentru a scăpa de descrierea de formatare. Puteți să sacrificați semantica codului în favoarea salvării resurselor.
Ultimele 5 lecții din titlul "HTML și DHTML"
Când scriem sau depanem script-uri PHP, folosim adesea funcțiile var_dump () și print_r () pentru a scoate datele și obiectele preliminare de matrice. În acest post, aș vrea să vă spun despre funcția var_export (), care poate converti un matrice într-un format adecvat pentru cod PHP.
Câteva șabloane gratuite pentru panouri de administrare.
Crearea unui șablon pentru scriere nu este o chestiune atât de simplă. Vă oferim o selecție de 30 de site-uri unde puteți descărca modele gratuite pentru toate gusturile.
De exemplu, aveți un câmp de căutare care este procesat de fiecare dată când apăsați tasta de tastatură. Dacă cineva dorește să scrie cuvântul Windows, cererea AJAX va fi trimisă pe următoarele fragmente: W, Wi, Win, Wind, Windo, Window, Windows. Problema?
O selecție de 15 site-uri noi unde puteți descărca fotografii gratuite pentru a le completa site-urile.
Ramazan Umarov
Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!
Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!
Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!
Articole similare
Trimiteți-le prietenilor: