Introduktion till Webbutveckling - F12

Transcript

1. Extra
2. Innehåll • Klasser / Id • Tillgänglighet • DOM • Drop-down-meny (i CSS / JavaScript)
3. Tillgänglighet • HTML finns till för att beskriva ett dokuments innehåll. • I normalfallet är ”vanlig” HTML-kod tydlig nog för standard-användaren, då allt visas som det ska. o Vad händer om bilder inte visas? o Vad händer om JavaScript inte kan köras? • Hur kan man underlätta för användaren att veta vad som hänger ihop med vad? o Använda tabell-huvud, tabell-fot, titel för tabeller o Koppla ihop rätt etikett med rätt input-fält o Koppla ihop bild med bildtext o Ge bra klass-namn & id till era användare o Använd rätt HTML-taggar • Underlätta för användaren o Ge står i form av ”title”-attribut för att ge vidare förklaringar
4. Klasser / Id • Används för att identifiera element i ett HTML- dokument • Id används för att identifiera ett (och endast ett) element • Klasser används för att identifiera ett eller flera element som delar samma egenskaper
5. Användning av Id • Vanliga användningsområden är t.ex. o Id vid layout av en webbplats • Huvudmeny • Undermeny • Sidhuvud • Sidfot o Sidelement som bara finns en gång • Ett bildspel • En specifik rubrik • Ett specifikt element
6. Användning av klasser • Vanliga användningsområden är t.ex. o Vid element som upprepar sig på en webbplats • Sektioner som upprepar sig • Bilder som ska ha en viss stil • Rubriker som ska ha en viss stil • Element som representerar samma saker
7. Exempel Klasser / Id Bra Dåligt <div id=”content”> <h1>Innehåll</h1> <img src=”#” class=”shadow”> <p class=”red”>Lite text</p> <img src=”#” class=”shadow”> <p class=”red”>Lite text</p> </div> <div id=”content”> <h1>Innehåll</h1> <img src=”#” id=”shadow1”> <p id=”red1”>Lite text</p> <img src=”#” id=”shadow2”> <p id=”red2”>Lite text</p> </div>
8. När behövs klasser/id? • Sett till CSS: o Beroende på hur ”bra” man är på att skriva CSS-kod, ju färre id/klasser behöver man generellt i HTML-koden o Ofta används id/klasser till att ge element vissa egenskaper som de har gemensamt • Sett till JavaScript o Beroende på ”bra” man är på DOM så behöver man färre id/klasser i HTML-koden o Id/Klasser används för att hitta rätt i ett HTML-dokument • OBS, tänk på att det viktigaste är att ni hittar rätt.
9. Exempel på Klasser ”Bra” CSS Mindre bra CSS <article class=”movie”> <h1>American Beauty</h1> <p>En mycket bra film!</p> </article> <article class=”movie”> <h1>Fight Cluby</h1> <p>Också en mycket bra film!</p> </article> .movie > h1{ color: #222; } .movie > p{ font-style: italic; } <article class=”movie”> <h1 class=”movieTitle”>American Beauty</h1> <p class=”moviteDescription”>En mycket bra film!</p> </article> <article class=”movie”> <h1 class=”movieTitle”>Fight Cluby</h1> <p class=”movieDescription”>Också en mycket bra film!</p> </article> .movieTitle{ color: #222; } .movieDescription{ font-style: italic; }
10. DOM – Att hitta rätt • Bra att ha koll för CSS & JavaScript • Kan ritas upp som en trädstruktur • Kan utgå från ett element (t.ex. genom klass eller id) och utifrån det elementet navigera runt