1. Teil des Frontend Workshop 2008 für das 1&1 Website-Management

1. Frontend-Workshop Informationen, Workshop, Know-How

28. CSS Sprites

31. Semantik PERFEKT! Web Developer Toolbar: Information > View Document Outline

32. Semantik <h3> </h3> <ul> </ul> <li> </li> </li> <li> <li> </li> </li> <li>

33. Semantik Ungeordnete Liste <ul><li></li></ul> Geordnete Liste <ol><li></li></ol>

34. Semantik Hier ist wohl das Element th gemeint! <strong> <small> „ Einachsiger Dreiseitenkipper“ = Schubkarre

35. Semantik Warum nicht h2 ? Warum keine Liste? <div id=„ cartChecklist “> <h2> Ihre Auswahl </h2> <h3> Basis-Ausstattung </h3> <ul class=„ items “> <li>…</li> <li>…</li> </ul> <h3> Optional: </h3> <ul class=„ items “> <li>…</li> </ul> </div> Besser:

36. Semantik

37. Semantik <div class=„handyHardwareBox“> <h3>... mit dem Business-Handy HTC S710 nutzen</h3> <div class=„info clearfix“> <pfx:image src=„…“ class=„visual“ alt=„HTC S710“/> <h4>HTC S710</h4> <ul> <li>Quad-Band</li> <li>aufschiebbare Tastatur</li> ... </ul> <a href=„#“>Produktdetails</a> </div> <div class=„order“> <pfx:image src=„…“ class=„price“ alt=„199,99 €“/> <input name=„htcs710“ id=„htcs710“ type=„radio“/> <label for=„htc710“> Handy <strong>HTC S710</strong> mitbestellen <small>(bitte ankreuzen)</small> </label> </div> </div>

39. Firebug Styles „live“ ausblenden. Styles „live“ verändern. Zusatzinfos.

43. Validierung

47. HTML Validator Auflistung der Fehler, Infos und Warnungen der aktuellen Seite Hilfe bei der Behebung des gewählten Fehlers Prüft nicht auf Semantik!