Semantic HTML - Cursuri Automatica si...
23
Transcript of Semantic HTML - Cursuri Automatica si...
Structura
• Context• Teoria• Si practica• Concluzii• Pointeri
Context
• CSS, html, “semantica”– practica minimala– citit despre– vreau!
• Stadiile invatarii– afli– aplici– recunosti
Pretext
• Anunt in bestjobs– default: text simplu + logo
Pretext
– nu e prietenos cu userul
Pretext
– calea catre titlul jobului:
Scop
• Layout nou– web-like++– sa se inteleaga repede job-ul
Pro-bono
• Implementare cu HTML semantic– pro: pagina este simpla
Teoria
• Focus pe continut, nu pe prezentare– structura are sens in prezentarea default (fara CSS)
• HTML– doar taguri semantice (nu <b>, <i>, …)
• folosite cu semantica corecta
<h1>, <h2> …<ul>, <ol>, <p> …<em>, <strong> …
Practica – take 1 (invatare)
• Structura de baza– headinguri– “totul e o lista”
Practica – take 1
• Containere– doar daca trebuie– cu nume semantice
Practica – take 1
• Meniul din partea de jos este o lista!<ul class=“piped”>
<li class="first">..</li> <li>…</li> <li>…</li>
</ul>
[display inline border-left (no border for first)]
Practica – take 1
• Fara tag-uri prezentationale– gresit: <b>– pus: <span class=“highlighted”>…</span>
Practica – take 1
• Layout rapid: <table> :(– implica o ordine a elementelor in HTML
• care tine de prezentare, nu de semantica• CSS3: pozitionare gen tabel (templates)
Practica – take 2 (recunoasterea greselilor)
• class vs. id• <div class=“content”> => <div id=“content”>
• class=“piped”• prezentational!
– don’t trust sample code out there
• inlocuit cu id=“adobe_links”
Practica – take 2
• Imbunatatiri– tabelul inlocuit cu formatare CSS
• destul de simplu
– CSS ordonat & indentat
Concluzii
• Beneficii– structura documentului e simpla si clara– numele din CSS nu au legatura cu prezentarea
• vor fi valide si cand prezentarea se va schimba– continutul e aratat “corect” si fara CSS
• Frumusetea interioara conteaza :)– dar nu e extrem de facil de obtinut
Pointeri
• http://www.w3.org/TR/html4/• http://en.wikipedia.org/wiki/Plain_Old_Semantic_HTML• http://brainstormsandraves.com/articles/semantics/structure/• http://www.transcendingcss.com/• search: semantic HTML
• Incercati sa aplicati &• folositi de gandirea critica!
