View
26
Download
0
Category
Preview:
Citation preview
Context
• CSS, html, “semantica”– practica minimala– citit despre– vreau!
• Stadiile invatarii– afli– aplici– recunosti
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
• 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
Recommended