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

1 Cover

2 Title Page Series Editor Jean-Charles Pomerol

3 Copyright First published 2021 in Great Britain and the United States by ISTE Ltd and John Wiley & Sons, Inc. Apart from any fair dealing for the purposes of research or private study, or criticism or review, as permitted under the Copyright, Designs and Patents Act 1988, this publication may only be reproduced, stored or transmitted, in any form or by any means, with the prior permission in writing of the publishers, or in the case of reprographic reproduction in accordance with the terms and licenses issued by the CLA. Enquiries concerning reproduction outside these terms should be sent to the publishers at the undermentioned address: ISTE Ltd 27-37 St George’s Road London SW19 4EU UK www.iste.co.uk John Wiley & Sons, Inc 111 River Street Hoboken, NJ 07030 USA www.wiley.com © ISTE Ltd 2021 The rights of Hassen Ben Rebah, Hafedh Boukthir and Antoine Chédebois to be identified as the authors of this work have been asserted by them in accordance with the Copyright, Designs and Patents Act 1988. Library of Congress Control Number: 2021940275 British Library Cataloguing-in-Publication Data A CIP record for this book is available from the British Library ISBN 978-1-78630-696-8

4 Foreword

5 Preface

6 1 The Web and its Future 1.1. Background 1.1. Background The Internet was first designed by the Department of Defense, as a means of protecting US government communications systems in the event of a military attack. The original network, baptized ARPANET (after the Advanced Research Projects Agency that developed it), evolved into a communication channel between the entrepreneurs, military personnel and academic researchers who contribute to ARPA projects. 1.2. Phases of evolution of the Web 1.2. Phases of evolution of the Web The World Wide Web, commonly known as the Web, and sometimes as the Net, presents a hypertext system running on the Internet. The Web is used to consult accessible pages on websites using a browser. The image of the spiderweb originates from the hyperlinks that interconnect web pages. 1.3. Web application architecture 1.3. Web application architecture 1.3.1. The three levels of abstraction of an application In general, we can divide a computer application into three different levels of abstraction: – Presentation, also known as HMI, promotes interaction between the user and the application. This layer governs keyboard and mouse input, and presents information on the screen. It is strongly recommended that this aspect be ergonomic and pleasant. – Processing represents the tasks to be performed by the application. They are divided into two categories:- local processing, assembling the checks performed on the conversation with the HMI (e.g. checking and input assistance);- global processing, essentially forming the application. This is what is known as the business logic layer. – Data, more precisely access to data, which involves assembling the tools for managing data stored by the software. Table 1.1. The three levels of abstraction of an application6 Presentation Presentation management Presentation logic Core of the application Processing Local Processing logic Global Processing management Data Data logic Data management NOTE.– These three levels can be nested or distributed in several possible ways between multiple computers.

7 2 The Language of the Web: HTML5 2.1. Overview 2.2. Structure of an HTML5 document 2.3. Structuring the content of a web page 2.4. Text organization 2.5. Creating hyperlinks 2.6. Inserting images and multimedia objects 2.7. Tables 2.8. Forms

8 3 Style Sheets: CSS3 3.1. Overview 3.2. Text formatting 3.3. List formatting 3.4. Backgrounds, borders and shadows 3.5. Table formatting 3.6. Layout of the site

9 4 Design and Creation of a Website 4.1. Process of creating a website 4.2. Ergonomics of the website 4.3. Different website types

10 5 Practical Exercises 5.1. PE1: structure of an HTML5 web page 5.2. PE2: simple forms 5.3. PE3: table formatting 5.4. TP 4: media (image, video and audio) 5.5. PE: element positioning 5.6. PE6: creating a template model 5.7. PE7: creating a website from A to Z

11 References

12 Index

13 End User License Agreement

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 refrigerator 5Figure 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 2 Figure 2.1. The result of using the