Download to read offline
Html 3 ht14
- 1. Positionering HTML 3- Rätt sak på rätt plats
- 2. Agenda • Gårdagenslösningar! • Dagens tillämpningar! • Vilka attribut använder vi! • Float, clear, display! • Praktisk genomgång
- 3. 1994 - 1997 • Frames introducerades av Netscape! • Bra för dåtidens uppkoppling! • Tolkas oregelbundet av webbläsare! • Scrolls i innehållet http://www.angelfire.com/super/badwebs/
- 4. 1997 - 2002 • Tabeller för positionering! • Relativt enkelt att programmera! • Tolkas oregelbundet av webbläsarna! • Scrolls i innehållet! • Lidande användbarhet! • Väldigt tunga sidor, tog lång tid att ladda! • Svårt att förändra och uppdatera http://www.hotdesign.com/seybold/index.html
- 6. 2002 - 2010 • CSS för positionering! • Använd <div> Kaspslar in innehållet </div>! • Tolkas mer konsekvent av webbläsarna! • Anpassningsbar i höjdled! • Snabbare rendering och lättare webbplatser! • Lättare att förändra och strukturera om! • Öppnar upp för mobilanpassning
- 7. 2010 - ??? • HTML 5, i princip samma sak! • <div> kapslar in innehållet </div>! • Nya positionerings-taggar: <header><footer><section> o.sv.! • Märker upp innehåll med en tillhörighet! • Google har / kommer implementera detta i deras sökalgoritm! • Bra för användbarheten; speciellt över olika enheter
- 8. HTML 4 vsHTML 5
- 9. Förhållanden • Visarrelationen mellan olika objekt! • Parent, child och siblings (first, second, o.s.v.)! • Förälder, barn och syskon!
- 10. Förarbete • Skissaupp en layout, blueprint! • Diskutera avstånd och marginaler! • Hur fungerar uppdateringar?! • Sparar massa tid och programmeringskrångel! • Viktiga saker över vecket!
- 12. HTML / CSS • HTML:! • id eller class som selektorer! • Flera klasser / id:s per element! • CSS:! • # för id och . för class! • Glöm inte! • Indrag! • <!-- kommentar HTML --> och /* kommentar CSS */! http://wikicode.wikidot.com/system:default-css
- 13. CSS-Attribut • Widthoch height skrivs med px eller em! • Min-height och max-width! • Margin: 0 10px 15px 20px;! • Margin-top, margin-right, margin-bottom, margin-left! • Padding: 20px 15px 10px 0;! • Top, right, bottom, left !
- 14. Block VS Inline Span eller Div?!
- 15. Width: 100px, border1px, padding: 10px, margin 10px?
- 16. Position • Position:static, relative, absolute och fixed! • Z-index: sorterar i z-led! • Float: right eller left! • Clear: right, left eller both! • Visa exempel! • Overflow: hidden, scroll, visible (både i x- och y-led)! • Är bara nödvändig vid fixerad höjd och sidled! • Visa exempel !
- 17. Wrapper • Centrerainnehållet i webbläsaren! • Bra för användbarheten! • Spelar ingen roll hur bred skärm webbplatsen visas på! • <div id=”wrapper”> Allt innehåll </div>! • Sätt en bredd på #wrapper! • Margin: 0 auto;!
- 18.
- 19. Läshänvisningar • Föreläsning:Formulär och Tabeller! • Tabeller: 203 - 228 i HTML och CSS-boken! • Formulär: 243 - 313 i HTML och CSS-boken! !