
Website Design and Development with HTML5 and CSS3
Description
Alles über E-Books | Antworten auf Fragen rund um E-Books, Kopierschutz und Dateiformate finden Sie in unserem Info- & Hilfebereich.
This book addresses the theoretical aspects of HTML5 and CSS3, including: HTML elements, semantic containers, semantic text formatting, multimedia elements, forms, tables, definition and integration of CSS styles, text formatting, and container and box styles. It also encompasses a practical section which presents the process of creating a website, as well as the key rules to apply in order to not only achieve project success, but also to meet user needs. Illustrated by numerous examples, this book includes corrected practical work, structured according to an evolutionary logic ranging from the design of a simple HTML5 page to the creation of a professional website.
More details
Other editions
Additional editions


Persons
Hafedh Boukthir is Professor at the Higher Institute of Technological Studies of Mahdia, Tunisia, and a webmaster and web developer. He specializes in SEO and natural referencing.
Antoine Chedebois, an engineer by training, has been developing websites for nearly twenty years. He is a specialist in HTML, CSS, JavaScript, PHP and Python, and is currently the lead developer of an international team of developers at GAFA.
Content
Teddy PAYET
Preface xiii
Chapter 1 The Web and its Future 1
1.1 Background 1
1.2 Phases of evolution of the Web 3
1.3 Web application architecture 7
Chapter 2 The Language of the Web: HTML5 13
2.1 Overview 13
2.2 Structure of an HTML5 document 18
2.3 Structuring the content of a web page 21
2.4 Text organization 28
2.5 Creating hyperlinks 52
2.6 Inserting images and multimedia objects 58
2.7 Tables 65
2.8 Forms 70
Chapter 3 Style Sheets: CSS3 101
3.1 Overview 101
3.2 Text formatting 121
3.3 List formatting 131
3.4 Backgrounds, borders and shadows 133
3.5 Table formatting 144
3.6 Layout of the site 148
Chapter 4 Design and Creation of a Website 167
4.1 Process of creating a website 167
4.2 Ergonomics of the website 175
4.3 Different website types 181
Chapter 5 Practical Exercises 185
5.1 PE1: structure of an HTML5 web page 185
5.2 PE2: simple forms 195
5.3 PE3: table formatting 211
5.4 TP 4: media (image, video and audio) 240
5.5 PE: element positioning 270
5.6 PE6: creating a template model 296
5.7 PE7: creating a website from A to Z 313
References 323
Index 325
1
The Web and its Future
At the turn of the 21st century, information, including access to the Internet, became the basis for personal, economic and political progress. A popular name for the Internet is the "information highway", and it became the place where one goes to find the latest financial news, to browse library catalogs, to exchange information with colleagues or to participate in a lively political debate. The Internet is the tool that will lead you, beyond telephones, faxes and isolated computers, to a rapidly growing network of information without borders.
The Internet complements the traditional tools you use to collect information, graphical data, view the news and connect with others. The Internet is shrinking the world; bringing information, skills and knowledge on almost all subjects imaginable directly to your computer.
The Internet is what we call a meta network, that is a network of networks that covers the entire world. It is impossible to give an exact number of the amount of networks or users that make up the Internet, but it easily exceeds several billion (4.57 billion Internet users in the first quarter of 2020 according to the site blogdumoderateur1).
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.1.1. The 1960s: context of the Cold War
In 1957, the Advanced Research Project Agency (ARPA) was created in the United States to lead a small number of projects aimed at ensuring scientific and technical predominance over the Russians. Making up this organization was some of the United States' most valued scientists.
In 1967, Lawrence G. Roberts, who had recently chaired the ARPA computer network project, presented these scenarios for the ARPANET (Advanced Research Projects Agency NETwork). Meanwhile, that same year, Donald Davies and Robert Scantlebury of the National Physical Laboratory (NPL) in the United Kingdom announced the design of a packet-switching network.
1.1.2. The 1970s and 1980s: birth of the TCP/IP protocol
In 1969, the ARPANET began to operate, initially linking up four universities. Using this connection, four facilities were able to transfer data and perform lengthy calculations, remotely, on multiple computers.
During the 1970s, research laboratories gradually linked up to the ARPANET.
In 1970, the Network Control Protocol (NCP) was used on ARPANET with the aim of linking heterogeneous devices (IBM, Unix, etc.).
In 1983, the NCP was definitively cast aside in favor of the Transmission Control Protocol/Internet Protocol (TCP/IP), which is still in use now and represents the main protocol of the Internet. The TCP is responsible for segmenting a message into packets and rearranging the packets after they are received, while the role of IP is to ensure that packets pass from one computer to another until they reach their destination.
1.1.3. The 1980s, 1990s and 2000s: evolution of the Internet to the WWW
In 1977, the TCP/IP was effectively used to link several networks to the ARPANET. More than a hundred computers were connected, and from this point, the number would continue to increase year after year.
In March 1989, Tim Berners-Lee, a computer scientist at the CERN (European Council for Nuclear Research), advised putting documents on the CERN website that were linked by hyperlinks, with the aim of helping physicists searching for information. The origin of the Web dates back to this point in time.
In the early 1990s, the birth of the Internet as we know it today was announced: the Web was defined by a collection of HTML (HyperText Markup Language) pages combining text, images and links that can be reached via a URL (Uniform Resource Locator), based on HTTP (HyperText Transfer Protocol).
In 1991, in Geneva, Tim Berners-Lee developed the Internet interface known as the World Wide Web (WWW), allowing the network to be opened up to the general public by facilitating website consultation instructions.
In 1991, 300,000 computers were connected, with this figure reaching 1,000,000 by 1992.
In 1992, the first link (known as a hyperlink), enabling access to the CERN's Internet site, was built on the Fermilab server in the United States: this was the beginning of the weaving of the WWW. The Net continued to expand at an exponential rate during the 1990s under the impetus of the Web.
The year 1993 saw the birth of the first web browser, designed by Netscape, which supported text and images. That same year, the National Science Foundation (NSF) founded a company to enable the registration of domain names.
In 1993, there were 600 sites, with this figure exceeding 15,000 by 1995. Today, the WWW has come to be the most valued service on the Internet.
As of 2008, there were 1.5 billion Internet users worldwide, 1.3 billion email users, 210 billion emails sent daily, 186.7 million websites and 133 million blogs.
E-commerce revenues exceeded $2,300 billion in 2017 and are expected to reach $4,500 billion in 2021.
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.2.1. 1991-1999: Web 1.0, static or passive?
Web 1.0 functioned in a strictly linear manner: a producer would offer content that was displayed on a website, and Internet users would consult this site. This generation of the Web favored product-oriented sites, which had little influence on user influx. This period was marked by the birth of the first e-commerce sites. Proprietary programs and software were extremely costly.
Figure 1.1. Web 1.0: diffusion
1.2.2. 2000-2010: Web 2.0, collaborative or social?
Web 2.0 offered a completely new outlook. It promoted the sharing and exchange of information and data (text, videos, images and more), and witnessed the upsurge of social media, blogs, wikis and smartphones. The Web was becoming more popular and stimulating. The customer's opinion was constantly coveted and users developed a taste for this virtual collectivization. However, the reproduction of content of disproportionate quality led to an overabundance of information that was difficult to verify.
Figure 1.2. Web 2.0: collaboration
1.2.3. 2010-2020: Web 3.0, semantic or smart?
Web 3.0 aimed to classify the vast mass of usable information according to the conditions and requirements of each user, according to their positioning, preferences, etc. Websites evolved (and continue to evolve) into online applications that can automatically analyze written and pictorial data, that are able to understand, interpret and classify them, and rediffuse them to new Internet users.
Figure 1.3. Web 3.0: semantic
1.2.4. Since 2020: Web 4.0, intelligent
It is very difficult to predict what the Web will become. Some believe that the future of Web 3.0 is Web 4.0, or the artificial intelligence-based Web. The purpose of this Web is to introduce people into a steadfastly remarkable environment (strong and robust). Nova Spivack2, founder of Radar Networks, gives the definition of Web 4.0 as "the ability to work with tools online only". Similarly, Joël de Rosnay3, consultant to the president of the Cité des sciences et de l'industrie (a science museum whose name means "City of Science and Industry") at La Villette, Paris, indicates that this version of the Web is synonymous with cloud computing.
NOTE.- Wikipedia4 defines cloud computing as a concept referring to the use of memory and computing skills of devices and servers shared all over the world, and interconnected by an international network: the Internet.
EXAMPLE.-
There are now clothes that are available that include electronic chips using biosensors to detect information on the body. This information can then be sent to calculators connected to the Internet via wireless networks such as WiFi. This information can be used to identify the wearer of the clothes in the event of an accident, for example. The individual can be recovered by utilizing the information transmitted between the different technologies in use (biosensor, WiFi network, Internet and satellites).
Figure 1.4. Connected textiles
EXAMPLE.-
Certain refrigerators can automatically detect missing ingredients, and with a single click and without the need to open it, the refrigerator gives you a description of the missing ingredients as well as the nearest supermarkets that sell this product.
Figure 1.5. LCD screen of a Samsung smart...
System requirements
File format: ePUB
Copy protection: Adobe-DRM (Digital Rights Management)
System requirements:
- Computer (Windows; MacOS X; Linux): Install the free reader Adobe Digital Editions prior to download (see eBook Help).
- Tablet/smartphone (Android; iOS): Install the free app Adobe Digital Editions or the app PocketBook before downloading (see eBook Help).
- E-reader: Bookeen, Kobo, Pocketbook, Sony, Tolino and many more (not Kindle).
The file format ePub works well for novels and non-fiction books – i.e., „flowing” text without complex layout. On an e-reader or smartphone, line and page breaks automatically adjust to fit the small displays.
This eBook uses Adobe-DRM, a „hard” copy protection. If the necessary requirements are not met, unfortunately you will not be able to open the eBook. You will therefore need to prepare your reading hardware before downloading.
Please note: We strongly recommend that you authorise using your personal Adobe ID after installation of any reading software.
For more information, see our ebook Help page.