Читать книгу Website Design and Development with HTML5 and CSS3 - Hassen Ben Rebah - Страница 3
List of Illustrations
Оглавление1 Chapter 1Figure 1.1. Web 1.0: diffusionFigure 1.2. Web 2.0: collaborationFigure 1.3. Web 3.0: semanticFigure 1.4. Connected textilesFigure 1.5. LCD screen of a Samsung smart refrigerator5Figure 1.6. Architecture of an application on a central serverFigure 1.7. Two-tier architecture (client-data server)Figure 1.8. Three-tier architectureFigure 1.9. n-tier architecture
2 Chapter 2Figure 2.1. The result of using the <div> tag. For a color version of this figur...Figure 2.2. The <header> of the mes.tn1 site. For a color version of this figure...Figure 2.3. The <footer> of the mes.tn site. For a color version of this figure,...Figure 2.4. The <nav> navigation links of the mes.tn site. For a color version o...Figure 2.5. <section> page section of the mes.tn site. For a color version of th...Figure 2.6. <Aside> additional information block on wikipedia.org. For a color v...Figure 2.7. An example of an <article> article from the MES.tn site. For a color...Figure 2.8. Effect of the <p> tagFigure 2.9. Effect of the <blockquote> tagFigure 2.10. Effect of the <q> tagFigure 2.11. Effect of the <strong> tagFigure 2.12. Effect of the <em> tagFigure 2.13. Effect of the <b> tagFigure 2.14. Effect of the <i> tagFigure 2.15. Effect of the <small> tagFigure 2.16. Effect of the <code> tagFigure 2.17. Effect of the <var> tagFigure 2.18. Effect of the <kbd> tagFigure 2.19. Effect of the <samp> tagFigure 2.20. Effect of the <sub> tagFigure 2.21. Effect of the <sup> tagFigure 2.22. Effect of the <time> tagFigure 2.23. Result of using the datetime attributeFigure 2.24. Result of using the pubdate attributeFigure 2.25. Effect of the <hr /> tagFigure 2.26. Effect of the <br/> tagFigure 2.27. Effect of the <ins> tagFigure 2.28. Effect of the <del> 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 /> tag3. 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 site1Figure 4.8. Example of a mockup of a web page2Figure 4.9. Google search engineFigure 4.10. French general directory3Figure 4.11. E-commerce site4Figure 4.12. Educational site for children5
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