Website Design and Development with HTML5 and CSS3. Hassen Ben Rebah

tag. For a color version of this figure, see ww...Figure 2.29. Effect of the <s> tagFigure 2.30. Preformatted text with <pre> (left) and without the <pre> tag (righ...Figure 2.31. Effect of the <mark> tagFigure 2.32. Effect of the <bdi> tagFigure 2.33. Ordered list <ol>Figure 2.34. Ordered list with attributeFigure 2.35. Unordered list <ul>Figure 2.36. Definition listFigure 2.37. The six levels of the <hx> tagFigure 2.38. Example of use of the <img /> tag³. For a color version of this fig...Figure 2.39. Example of the use of the <map> tag. For a color version of this fi...Figure 2.40. Example of a responsive image. For a color version of this figure, ...Figure 2.41. General structure of a table. For a color version of this figure, s...Figure 2.42. Example of a table. For a color version of this figure, see www.ist...Figure 2.43. Example of a table consisting of a row and three columnsFigure 2.44. Example of merging of cellsFigure 2.45. Example of a form with <fieldset>, <legend> and <label>Figure 2.46. Example of using the <datalist> tagFigure 2.47. Example of using the <textarea> tagFigure 2.48. Example of using the <select> tagFigure 2.49. Example of use of the <option> multipleFigure 2.50. Example of use of the <optgroup> tagFigure 2.51. Example of use of the <progress> tagFigure 2.52. Example of use of the <meter> tag. For a color version of this figu...Figure 2.53. Example of use of the placeholder attributeFigure 2.54. Example of use of the autofocus attributeFigure 2.55. Example of use of the required attributeFigure 2.56. Example of use of the dirname attributeFigure 2.57. Example of use of the pattern attribute

      3 Chapter 3Figure 3.1. Effect of float styleFigure 3.2. Effect of the list-style-position propertyFigure 3.3. The different border types. For a color version of this figure, see ...Figure 3.4. Example of using border-radius: round radiusFigure 3.5. Complete example using border-radiusFigure 3.6. Image decomposition process using the border-image property. For a c...Figure 3.7. Example of using box-shadow on a div blockFigure 3.8. Effect of the border-spacing styleFigure 3.9. Effect of the border-collapse styleFigure 3.10. Effect of the empty-cells styleFigure 3.11. Effect of the caption-side styleFigure 3.12. Box model. For a color version of this figure, see www.iste.co.uk/b...Figure 3.13. Example of how to use the display property. For a color version of ...Figure 3.14. Example of using the CSS margin propertyFigure 3.15. Effect of the CSS padding-left propertyFigure 3.16. Example of relative positioning. For a color version of this figure...Figure 3.17. Absolute positioning. For a color version of this figure, see www.i...Figure 3.18. Fixed positioningFigure 3.19. Example of floating. For a color version of this figure, see www.is...Figure 3.20. The z-index property

      4 Chapter 4Figure 4.1. Example of a storyboard. “Accueil" is French for “home page"Figure 4.2. Linear architectureFigure 4.3. Hierarchical architectureFigure 4.4. Composite architectureFigure 4.5. Example of implementing a storyboardFigure 4.6. Website hosting processFigure 4.7. Form from a free referencing site¹Figure 4.8. Example of a mockup of a web page²Figure 4.9. Google search engineFigure 4.10. French general directory³Figure 4.11. E-commerce site⁴Figure 4.12. Educational site for children⁵

      5 Chapter 5Figure 5.1. Screenshot of Mysite.htmlFigure 5.2. Screenshot of login formFigure 5.3. Screenshot of registration formFigure 5.4. Screenshot of contact formFigure 5.5A. Screenshot of Table.htmlFigure 5.5B. Screenshot of Table.htmlFigure 5.5C. Screenshot of Table.htmlFigure 5.6A. Screenshot of Multimediaobjects.htmlFigure 5.6B. Screenshot of Multimediaobjects.htmlFigure 5.6C. Screenshot of Multimediaobjects.htmlFigure 5.6D. Screenshot of Multimediaobjects.htmlFigure 5.6E. Screenshot of Multimediaobjects.htmlFigure 5.6F. Screenshot of Multimediaobjects.htmlFigure 5.6G. Screenshot of Multimediaobjects.htmlFigure 5.6H. Screenshot of Multimediaobjects.htmlFigure 5.7A. Screenshot of page Positioning.htmlFigure 5.7B. Screenshot of page Positioning.htmlFigure 5.7C. Screenshot of page Positioning.htmlFigure 5.7D. Screenshot of page Positioning.htmlFigure 5.7E. Screenshot of page Positioning.htmlFigure 5.7F. Screenshot of page Positioning.htmlFigure 5.7G. Screenshot of page Positioning.htmlFigure 5.7H. Screenshot of page Positioning.htmlFigure 5.8. Screenshot of page webadmin.htmlFigure 5.9. Mockup of the home page (computer version) of the envie2courir.fr si...Figure 5.10. Mockup of the home page (computer version) of the envie2courir.fr s...Figure 5.11. Final result of the home page of the envie2courir.fr site

      List of Tables

      1 Chapter 1Table 1.1. The three levels of abstraction of an application⁶Table 1.2. Benefits and disadvantages of one-tier architectureTable 1.3. Benefits and disadvantages of two-tier architectureTable 1.4. Benefits and disadvantages of three-tier architecture

      2 Chapter 2Table 2.1. Examples of web development editors. For a color version of this tabl...Table 2.2. Structure of an HTML5 pageTable 2.3. The attributes of the <div> elementTable 2.4. Attribute of the <blockquote> tagTable 2.5. Attributes of the <time> tagTable 2.6. Attributes of the <ins> tagTable 2.7. Attributes of the <del> tagTable 2.8. Attributes of the <bdo> tagTable 2.9. Attributes of the <ol> tagTable 2.10. Attributes of the <a> tagTable 2.11. Attributes of the <img /> tagTable 2.12. The image formats supported by the webTable 2.13. Attributes of <map> and <area> tagsTable 2.14. Audio formatsTable 2.15. Browser compatibility with audio formats. For a color version of thi...Table 2.16. Video formatsTable 2.17. Attributes of <audio> and <video> tagsTable 2.18. Child elements of <table> tagTable 2.19. Attributes of the <td> tagTable 2.20. Attributes of the <th> tagTable 2.21. Attributes of the <form> tagTable 2.22. Attributes of the <input type="text" /> tagTable 2.23. Attributes of the <input type="password" /> tagTable 2.24. Attributes of the <input type="tel" /> tagTable 2.25. Attributes of the <input type="url" /> tagTable 2.26. Attributes of the <input type="email" /> tagTable 2.27. Attributes of the <input type="search" /> tagTable 2.28. Attributes of the <input type="hidden" /> tagTable 2.29. Attributes of the <input type="radio" /> tagTable 2.30. Attributes of the <input type="checkbox" /> tagTable 2.31. Attributes of the <input type="button" /> tagTable 2.32. Attributes of the <input type="reset" /> tagTable 2.33. Attributes of the <input type="submit" /> tagTable 2.34. Attributes of the <input type="image" /> tagTable 2.35. Attributes of the <input type="file" /> tagTable 2.36. Attributes of the <input type="date" /> tagTable 2.37. Attributes of the <input type="time" /> tagTable 2.38. Attributes of the <input type="datetime" /> tagTable 2.39. Attributes of the <input type="datetime-local" /> tagTable 2.40. Attributes of the <input type="month" /> tagTable 2.41. Attributes of the <input type="week" /> tagTable 2.42. Attributes of the <input type="number" /> tagTable 2.43. Attributes of the <input type="range" /> tagTable 2.44. Attributes of the <input type="color" /> tagTable 2.45. Attributes of the <textarea> tagTable 2.46. Attributes of the <select> tagTable 2.47. Attributes of the <option> tagTable 2.48. Attribute of the <optgroup> tagTable 2.49. Attributes of the <button> tagTable 2.50. Attributes of the <output> tagTable 2.51. Attributes of the <progress> tagTable 2.52. Attributes of the <meter> tagTable 2.53. Common attributes for form elements

      3 Chapter 3Table 3.1. List of pseudo-classes and pseudo-elements²Table 3.2. The absolute values of the dimensions³Table 3.3. The relative values of the dimensionsTable 3.4. The 17 colors of the web⁴. For a color version of this table, see www...

      4 Chapter