Оглавление
Hassen Ben Rebah. Website Design and Development with HTML5 and CSS3
Table of Contents
List of Illustrations
List of Tables
Guide
Pages
Website Design and Development with HTML5 and CSS3
Foreword
Preface. Book objectives and structure
Target readership
1. The Web and its Future
1.1. Background
1.1.1. The 1960s: context of the Cold War
1.1.2. The 1970s and 1980s: birth of the TCP/IP protocol
1.1.3. The 1980s, 1990s and 2000s: evolution of the Internet to the WWW
1.2. Phases of evolution of the Web
1.2.1. 1991–1999: Web 1.0, static or passive?
1.2.2. 2000–2010: Web 2.0, collaborative or social?
1.2.3. 2010–2020: Web 3.0, semantic or smart?
1.2.4. Since 2020: Web 4.0, intelligent
1.3. Web application architecture. 1.3.1. The three levels of abstraction of an application
1.3.2. One-tier architecture
1.3.3. Two-tier architecture
1.3.4. Three-tier architecture
1.3.5. n-tier architecture
2. The Language of the Web: HTML5
2.1. Overview. 2.1.1. Origins of HTML5
2.1.2. Syntax and lexicon of the HTML5 language
2.1.2.1. Elements
2.1.2.2. Tags
2.1.2.3. Attributes
2.1.3. Basic rules of HTML5. 2.1.3.1. A well-formed document
2.1.3.2. A compliant document
2.1.4. Working environment
2.2. Structure of an HTML5 document
2.3. Structuring the content of a web page. 2.3.1. The <div> element
2.3.2. The <span> element
2.3.3. The new elements of HTML5
2.3.3.1. The <header> tag
2.3.3.2. The <footer> tag
2.3.3.3. The <nav> tag: main navigation links
2.3.3.4. The <section> tag: a section of the page
2.3.3.5. The <aside> tag: additional information
2.3.3.6. The <article> tag: an independent article
2.4. Text organization. 2.4.1. Paragraphs and texts. 2.4.1.1. The <p> tag
2.4.1.2. The <blockquote> tag
2.4.1.3. The <q> tag
2.4.1.4. The <strong> tag
2.4.1.5. The <em> tag
2.4.1.6. The <b> tag
2.4.1.7. The <i> tag
2.4.1.8. The <small> tag
2.4.1.9. The <dfn> tag
2.4.1.10. The <abbr> tag
2.4.1.11. The <code> tag
2.4.1.12. The <var> tag
2.4.1.13. The <kbd> tag
2.4.1.14. The <samp> tag
2.4.1.15. The <sub> tag
2.4.1.16. The <sup> tag
2.4.1.17. The <time> tag
2.4.1.18. The <hr /> tag
2.4.1.19. The <br /> tag
2.4.1.20. The <wbr> tag
2.4.1.21. The <ins> tag
2.4.1.22. The <del> tag
2.4.1.23. The <s> tag
2.4.1.24. The <pre> tag
2.4.1.25. The <mark> tag
2.4.1.26. The <ruby> tag
2.4.1.27. The <rt> tag
2.4.1.28. The <rp> tag
2.4.1.29. The <bdo> tag
2.4.1.30. The <bdi> tag
2.4.1.31. The <address> tag
2.4.2. Bulleted lists
2.4.2.1. The <ol> tag
2.4.2.2. The <ul> tag
2.4.2.3. The <li> tag
2.4.2.4. The <dl> tag
2.4.2.5. The <dd> tag
2.4.2.6. The <dt> tag
2.4.3. Titles. 2.4.3.1. The <hx> tag
2.4.3.2. The <hgroup> tag
2.5. Creating hyperlinks
2.5.1. Inserting a hyperlink: the <a> tag
2.5.2. Types of hyperlinks. 2.5.2.1. Absolute link
2.5.2.2. Relative link
2.5.2.3. Link within the same web page
2.5.2.4. Link to an email address
2.5.2.5. Download link
2.5.2.6. Block-type link
2.5.3. Adding a tooltip to a link
2.6. Inserting images and multimedia objects. 2.6.1. The image. 2.6.1.1. The <img /> tag
2.6.1.2. The image formats supported by the web
2.6.1.3. Inserting a link on an image
2.6.1.4. Responsive images
2.6.2. Audio and video media. 2.6.2.1. The <audio> tag
2.6.2.2. Audio formats
2.6.2.3. The <video> tag
2.6.2.4. Video formats
2.6.2.5. Attributes of <audio> and <video> tags
2.7. Tables. 2.7.1. The <table> tag
2.7.2. The <caption> tag
2.7.3. The <thead> tag
2.7.4. The <tfoot> tag
2.7.5. The <tbody> tag
2.7.6. The <tr> tag
2.7.7. The <td> tag
2.7.8. The <th> tag
2.8. Forms. 2.8.1. Benefit of a form
2.8.2. Form construction. 2.8.2.1. The <form> tag
2.8.2.2. The <fieldset> tag
2.8.2.3. The <legend> tag
2.8.2.4. The <label> tag
2.8.3. The form <input /> tag and its variants
2.8.3.1. Text type
2.8.3.2. Password type
2.8.3.3. Tel type
2.8.3.4. URL type
2.8.3.5. Email type
2.8.3.6. Search type
2.8.3.7. Hidden type
2.8.3.8. Radio type
2.8.3.9. Checkbox type
2.8.3.10. Button type
2.8.3.11. Reset type
2.8.3.12. Submit type
2.8.3.13. Image type
2.8.3.14. File type
2.8.3.15. Date type
2.8.3.16. Time type
2.8.3.17. Datetime type
2.8.3.18. Datetime-local type
2.8.3.19. Month type
2.8.3.20. The week type
2.8.3.21. Number type
2.8.3.22. Range type
2.8.3.23. Color type
2.8.3.24. The <datalist> tag
2.8.4. Other form tags. 2.8.4.1. The <textarea> tag
2.8.4.2. the <select> tag
2.8.4.3. The <option> tag
2.8.4.4. The <optgroup> tag
2.8.4.5. The <button> tag
2.8.4.6. The <output> tag
2.8.4.7. The <progress> tag
2.8.4.8. The <meter> tag
2.8.5. Common attributes for form elements
2.8.6. Several new attributes added with HTML5. 2.8.6.1. The placeholder attribute
2.8.6.2. The autofocus attribute
2.8.6.3. The autocomplete attribute
2.8.6.4. The required attribute
2.8.6.5. The multiple attribute
2.8.6.6. The dirname attribute
2.8.6.7. The pattern attribute
3. Style Sheets: CSS3
3.1. Overview. 3.1.1. Origins of CSS3. 3.1.1.1. CSS1: arduous adaptations in the battle of the browsers
3.1.1.2. CSS2: hasty ambitions
3.1.1.3. CSS2.1: a return to implementations
3.1.1.4. CSS3
3.1.1.5. CSS4
3.1.2. Syntax and structure of the CSS3 language. 3.1.2.1. Basic syntax rules. 3.1.2.1.1. Case
3.1.2.1.2. Source code formatting
3.1.2.1.3. Identifiers
3.1.2.1.4. Character strings
3.1.2.1.5. Comments
3.1.2.2. General structure. 3.1.2.2.1. Style rules
3.1.2.2.2. Modular styles
3.1.2.3. Embedding CSS styles into a web page. 3.1.2.3.1. Style declaration
3.1.2.3.2. Adapting styles to the display device
3.1.2.4. Cascade and interpretation order of styles. 3.1.2.4.1. A cascade of styles
3.1.2.4.2. Rule priority
3.1.2.4.3. Order of rule specificities
3.1.2.4.4. Calculating specificity
3.1.3. Selectors
3.1.3.1. General selectors. 3.1.3.1.1. Universal selector
3.1.3.1.2. Type selectors
3.1.3.2. Attribute selectors
3.1.3.2.1. Class selectors (the class attribute)
3.1.3.2.2. Identifier selectors (the id attribute)
3.1.3.2.3. Attribute selectors
3.1.3.3. Hierarchical selectors
3.1.3.3.1. Descendant selector
3.1.3.3.2. Child selector
3.1.3.3.3. Adjacent sibling selector
3.1.3.4. Pseudo-classes and pseudo-elements
3.1.3.4.1. Pseudo-classes of links
3.1.3.4.2. Interactive pseudo-classes
3.1.3.4.3. Pseudo-elements
3.1.4. Values and units used. 3.1.4.1. Distances and dimensions
3.1.4.2. Colors
3.2. Text formatting. 3.2.1. Character size
3.2.2. Font type
3.2.3. Italic text
3.2.4. Bold text
3.2.5. Text decoration and underlining
3.2.6. Small capitals
3.2.7. Text coloring
3.2.8. Transforming text to lowercase or uppercase
3.2.9. Indenting the first line of a paragraph
3.2.10. Letter spacing
3.2.11. Word spacing
3.2.12. Paragraph spacing
3.2.13. Horizontal text alignment
3.2.14. Vertical text alignment
3.2.15. Text direction
3.2.16. Text length and height
3.2.17. Floating
3.3. List formatting
3.3.1. Different bullet numbering styles
3.3.2. Graphic style of bullets
3.3.3. Removing lines from a bullet list
3.4. Backgrounds, borders and shadows. 3.4.1. Backgrounds. 3.4.1.1. Background color
3.4.1.2. Inserting a background image
3.4.1.3. Opacity or transparency
3.4.2. Borders and shadows
3.4.2.1. Border color
3.4.2.2. Border thickness
3.4.2.3. Border style
3.4.2.4. Rounded border
3.4.2.5. Image border
3.4.2.6. Shadows
3.4.2.6.1. Shadows on text
3.4.2.6.2. Shadows on box elements
3.5. Table formatting. 3.5.1. Space between cells
3.5.2. Borders
3.5.3. Empty cells
3.5.4. Caption position
3.6. Layout of the site. 3.6.1. Concept of the box model
3.6.2. Block or inline element
3.6.3. Width and height of a box element
3.6.4. Outer margins
3.6.5. Inner margins
3.6.6. Element positioning
3.6.6.1. Static positioning
3.6.6.2. Relative positioning
3.6.6.3. Absolute positioning
3.6.6.4. Fixed positioning
3.6.7. Element floating
3.6.8. Element stacking
4. Design and Creation of a Website
4.1. Process of creating a website
4.1.1. Development
4.1.1.1. Preliminary study
4.1.1.2. Specifications
4.1.1.3. Design of the structure of the site and content of web pages (preparation of a storyboard)
4.1.1.3.1. Linear architecture or sequential architecture
4.1.1.3.2. Hierarchical architecture
4.1.1.3.3. Composite architecture (non-hierarchical)
4.1.1.4. Technical development
4.1.2. Hosting. 4.1.2.1. Definition
4.1.2.2. Hosting types
4.1.3. Referencing
4.1.4. Updating
4.1.5. Evaluation
4.2. Ergonomics of the website. 4.2.1. Concept of ergonomics
4.2.2. Ergonomics criterion
4.2.3. Graphic charter
4.2.4. Mockup
4.2.5. Dimensions of web pages
4.3. Different website types. 4.3.1. Search engine/metasearch engine
4.3.2. Web directory
4.3.3. Merchant site (e-commerce)
4.3.4. Educational site (e-learning)
4.3.5. Advertising site
5. Practical Exercises
5.1. PE1: structure of an HTML5 web page. 5.1.1. Purpose
5.1.2. Presentation
5.1.3. Solution
5.2. PE2: simple forms. 5.2.1. Purpose
5.2.2. Presentation
5.2.3. Solution
5.3. PE3: table formatting. 5.3.1. Purpose
5.3.2. Presentation
5.3.3. Solution
5.4. TP 4: media (image, video and audio) 5.4.1. Purpose
5.4.2. Presentation
5.4.3. Solution
5.5. PE: element positioning. 5.5.1. Purpose
5.5.2. Presentation
5.5.3. Solution
5.6. PE6: creating a template model. 5.6.1. Purpose
5.6.2. Presentation
5.6.3. Solution
5.7. PE7: creating a website from A to Z
5.7.1. Step 0: purpose of the site
5.7.2. Step 1: functional scope
5.7.3. Step 2: site mockup. 5.7.3.1. Site tree
5.7.3.2. Creating wireframes
5.7.4. Step 3: choosing/defining the graphic charter
5.7.5. Step 4: creating HTML/CSS mockups of the main pages
5.7.6. Step 5: developing the site from mockups
References
Index
WILEY END USER LICENSE AGREEMENT
