The HTML and CSS Workshop: Learn to build your own websites and kickstart your career as a web designer or developer

By Lewis Coulson, Brett Jephson, Rob Larsen and 2 more

Master HTML and CSS to create modern, stylish, and responsive websites with the help of real-world examples and hands-on activities

Key Features

• Learn HTML and CSS to produce highly functional and appealing websites
• Overcome common challenges in web design and development
• Ensure that your websites are accessible and engaging on all devices

Book Description

With knowledge of CSS and HTML, you can build visually appealing, interactive websites without relying on website-building tools that come with lots of pre-packaged restrictions. The HTML and CSS Workshop takes you on a journey to learning how to create beautiful websites using your own content, understanding how they work, and how to manage them long-term.

The book begins by introducing you to HTML5 and CSS3, and takes you through the process of website development with easy-to-follow steps. Exploring how the browser renders websites from code to display, you'll advance to adding a cinematic experience to your website by incorporating video and audio elements into your code. You'll also use JavaScript to add interactivity to your site, integrate HTML forms for capturing user data, incorporate animations to create slick transitions, and build stunning themes using advanced CSS. You'll also get to grips with mobile-first development using responsive design and media queries, to ensure your sites perform well on any device.

Throughout the book, you'll work on engaging projects, including a video store home page that you will iteratively add functionality to as you learn new skills.

By the end of this Workshop, you'll have gained the confidence to creatively tackle your own ambitious web development projects.

What you will learn

• Understand how websites are built, structured, and styled
• Master the syntax and structure of HTML and CSS
• Know how to build websites from scratch using HTML5 and CSS3
• Create intuitive forms that allow users to input data
• Style your website by integrating videos, animations, and themes
• Design robust websites that work on all modern devices seamlessly
• Discover how to maintain and improve the performance of a website

Who this book is for

Ideal for beginners, this Workshop is designed for anyone who is new to HTML and CSS who wants to learn to design and maintain their own websites.

• Language: English
• Publisher: Packt Publishing
• Release date: Nov 28, 2019
• ISBN: 9781838828134

Book preview

9781838824532cov_Low_Res.png

The HTML and CSS Workshop

Copyright © 2020 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Authors: Lewis Coulson, Brett Jephson, Rob Larsen, Matt Park, and Marian Zburlea

Reviewers: Tarunkumar Bagmar, Tiffany Ford, Terry O'Brien, Kurri Sudarshan Reddy, and Adam Rosson

Managing Editors: Anush Kumar Mehalavarunan and Anushree Arun Tendulkar

Acquisitions Editors: Sarah Lawton and Sneha Shinde

Production Editor: Shantanu Zagade

Editorial Board: Shubhopriya Banerjee, Bharat Botle, Ewan Buckingham, Megan Carlisle, Mahesh Dhyani, Manasa Kumar, Alex Mazonowicz, Bridget Neale, Dominic Pereira, Shiny Poojary, Abhishek Rane, Erol Staveley, Ankita Thakur, Nitesh Thakur, and Jonathan Wray

First Published: November 2019

Production Reference: 5291220

ISBN: 978-1-83882-453-2

Published by Packt Publishing Ltd.

Livery Place, 35 Livery Street

Birmingham B3 2PB, UK

Table of Contents

Preface

1. Introduction to HTML and CSS

Introduction

HTML

Syntax

Content Types

The HTML Document

The HTML DOM

The Doctype Declaration

Structuring an HTML Document

HTML

Head

Body

Our First Web Page

Exercise 1.01: Creating a Web Page

Metadata

Exercise 1.02: Adding Metadata

Mistakes in HTML

Validating HTML

Exercise 1.03: Validation

Exercise 1.04: Validation Errors

Activity 1.01: Video Store Page Template

CSS

Syntax

Adding Styles to a Web Page

Exercise 1.05: Adding Styles

Exercise 1.06: Styles in an External File

CSSOM

CSS Selectors

Element, ID, and Class

The Universal Selector (*)

Attribute Selectors

Pseudo-classes

Pseudo-elements

Combining Selectors

Exercise 1.07: Selecting Elements

CSS Specificity

The Special Case of !important

Activity 1.02: Styling the Video Store Template Page

Dev Tools

The Top Bar

The Elements Tab

How a Web Page Renders

Summary

2. Structure and Layout

Introduction

Structural Elements

The header Tag

The footer Tag

The section Tag

The article Tag

The nav Tag

The aside Tag

The div Tag

A News Article Web Page

Exercise 2.01: Marking up the Page

Wireframes

Activity 2.01: Video Store Home Page

CSS Page Layouts

Video Store Product Page

Float-Based Layouts

The float Property

The width Property

Clearing Floated Elements

Flex-Based Layouts

The flex Container

The flex Items

Grid-Based Layouts

The grid Container

The grid Items

Exercise 2.02: A grid-Based Layout

The Box Model

Content Box

The padding Property

The border Property

The margin Property

Exercise 2.03: Experimenting with the Box Model

Putting It All Together

Exercise 2.04: Home Page Revisited

Exercise 2.05: Video Store Product Page Revisited

Activity 2.02: Online Clothes Store Home Page

Summary

3. Text and Typography

Introduction

Text-Based Elements

Headings

Paragraphs

Inline Text Elements

Lists

Exercise 3.01: Combining Text-Based Elements

Semantic Markup

Styling Text-Based Elements

CSS Resets

CSS Text Properties

CSS Font Properties

The display Property

Video Store Product Page (Revisited)

Exercise 3.02: Navigation

Breadcrumbs

Exercise 3.03: Breadcrumb

Exercise 3.04: Page Heading and Introduction

Exercise 3.05: Product Cards

Exercise 3.06: Putting It All Together

Activity 3.01: Converting a Newspaper Article to a Web Page

Summary

4. Forms

Introduction

Form Elements

The form Element

The input Element

The label Element

The textarea Element

The fieldset Element

The select Element

The button Element

Exercise 4.01: Creating a Simple Form

Styling Form Elements

Label, Textbox, and Textarea

Buttons

Select Boxes

Validation Styling

Exercise 4.02: Creating a Form with Validation Styling

Video Store Forms

Exercise 4.03: New Account Signup Form

Exercise 4.04: Checkout Form

Activity 4.01: Building an Online Property Portal Website Form

Summary

5. Themes, Colors, and Polish

Introduction

The Markup

Inverting Colors

New HTML Elements in the Theme

New CSS Background Properties

Exercise 5.01: Creating a Dark Theme

Creating a Dark Theme with the HSL Function

Exercise 5.02: Creating a Dark Theme Using hsl()

CSS Invert Filter

Exercise 5.03: Creating a Dark Theme with the CSS Invert Filter

CSS Hooks

Exercise 5.04: Customizing a Theme with CSS Hooks

Activity 5.01: Creating Your Own Theme Using a New Color Palette

Summary

6. Responsive Web Design and Media Queries

Introduction

Mobile-First

Responsive Web Design

Responsive Viewport

Understanding Basic Media Queries

Exercise 6.01: Using Media Queries to Change the Page Layout

Device Orientation Media Queries

Exercise 6.02: Using Media Queries to Detect Device Orientation

Combining Multiple Media Queries

Print Stylesheets

Exercise 6.03: Generating a Printable Version of a Web Page Using CSS Media Queries

Activity 6.01: Refactoring the Video Store Product Cards into a Responsive Web Page

Summary

7. Media – Audio, Video, and Canvas

Introduction

Audio

Exercise 7.01: Adding Audio to a Web Page

Attributes

The autoplay Attribute

The preload Attribute

The loop Attribute

The controls Attribute

Styling Audio Controls

Exercise 7.02: Styling Controls

Multiple Sources

The video Element

Attributes

The width and height Attributes

The poster Attribute

Exercise 7.03: Adding Video to a Web Page

Limitations

The track Element

Adding Subtitles

Exercise 7.04: Adding Subtitles

Images

The img Element

The picture Element

Programmable Graphics

The svg Element

The canvas Element

Checking for canvas Support

Drawing in canvas

The canvas Grid

Drawing a Rectangle

Drawing a Circle

Clearing the canvas

Exercise 7.05: Drawing Shapes

Drawing Other Shapes

Gradients

Exercise 7.06: Gradients

Animating a Canvas

Exercise 7.07: Animated canvas

Activity 7.01: Media Page

Summary

8. Animations

Introduction

CSS Transitions

Exercise 8.01: Implementing Our First Simple Animation

Exercise 8.02: Enhanced Control in CSS Transitions

Exercise 8.03: CSS Transition Performance

Exercise 8.04: CSS Transition with Multiple Values

Advanced CSS for Animations

CSS Positioning

Overflow

Opacity

Blur

Inserting Content with attr()

Exercise 8.05: Animating a Website Menu

Transition Duration Sweet Spot

Slowing Animations Down

Animation Acceleration and Deceleration

Keyframe Animations in CSS

Using the CSS Animation Property

Exercise 8.06: CSS Preloader Using Keyframes

More CSS Tips and Tricks

Activity 8.01: Animating Our Video Store Home Page

Summary

9. Accessibility

Introduction

What Is Accessibility?

Accessible Images

Exercise 9.01: Accessible Ratings

Semantic HTML

Accessible Forms

Exercise 9.02: Accessible Signup Form

Keyboard Accessibility

Accessible Motion

Accessibility Tools

Axe Tool

Exercise 9.03: Using Axe

Activity 9.01: Making a Page Accessible

Summary

10. Preprocessors and Tooling

Introduction to CSS Preprocessors

Getting Started with Node.js, npm, and SASS

SCSS Introduction

Exercise 10.01: Using SCSS Variables

Nesting in SCSS

Exercise 10.02: Rewriting Existing CSS with Nested SCSS

Import, Control Directives, and Mixins in SCSS

Exercise 10.03: Using SCSS Mixins and Control Directives

Loops in SCSS

Exercise 10.04: Loops in SCSS

Activity 10.01: Converting the Video Store Home Page into SCSS

Summary

11. Maintainable CSS

Introduction to Maintainable CSS

Block, Element, and Modifier

Block

Element

Modifier

Exercise 11.01: Using BEM Markup

Using BEM Markup with SCSS

Exercise 11.02: Applying SCSS to BEM

Structuring Your SCSS into Maintainable Files

Exercise 11.03: Using Structured SCSS Files

Good Practices for Maintainable CSS

Activity 11.01: Making Our Video Store Web Page Maintainable

Summary

12. Web Components

Introduction

Custom Elements

The define Method

Naming Conventions

Unique Names

Extends HTMLElement

Exercise 12.01: Creating a Custom Element

Behavior of a Custom Element

Exercise 12.02: Adding and Using Custom Elements with Attributes

Custom Element Life Cycle

Exercise 12.03: Custom Element Life Cycle

Extending a Built-in Element

Exercise 12.04: Custom Element Extending HTMLAnchorElement

Shadow DOM

Attaching a Shadow DOM

Inspecting the Shadow DOM

Exercise 12.05: Shadow DOM with a Custom Element

HTML Templates

Exercise 12.06: Templates

Creating a Web Component

Activity 12.01: Creating a Profile

Sharing a Web Component

Summary

13. The Future of HTML and CSS

Introduction

Keeping up with the Web

Chrome Canary

Experimental Flags

Browser Vendor Status

Caniuse

Exercise 13.01: Verifying Browser Support for Web Pages Created Using CSS Grid

CSS Houdini

CSS Paint API

Exercise 13.02: Creating a Red Fill Paint Worklet

Custom Properties

Exercise 13.03: The Fill Color Paint Worklet

Input Properties

Exercise 13.04: Paint Worklet with Mouse Input

CSS Properties and Values API

Animating Custom Properties

Exercise 13.05: Animating a Paint Worklet

Current Browser Support

Progressive Enhancement

Exercise 13.06: Progressive Enhancement

Activity 13.01: Button Library

Summary

Appendix

Preface

About

This section briefly introduces the coverage of this book, the technical skills you'll need to get started, and the software requirements required to complete all of the included activities and exercises.

About the Book

With knowledge of CSS and HTML, you can build visually appealing, interactive websites without relying on website-building tools that come with lots of pre-packaged restrictions. The HTML and CSS Workshop takes you on a journey to learning how to create beautiful websites using your own content, understanding how they work, and how to manage them long-term.

The book begins by introducing you to HTML5 and CSS3, and takes you through the process of website development with easy-to-follow steps. Exploring how the browser renders websites from code to display, you'll advance to adding a cinematic experience to your website by incorporating video and audio elements into your code. You’ll also use JavaScript to add interactivity to your site, integrate HTML forms for capturing user data, incorporate animations to create slick transitions, and build stunning themes using advanced CSS. You’ll also get to grips with mobile-first development using responsive design and media queries, to ensure your sites perform well on any device.

Throughout the book, you’ll work on engaging projects, including a video store home page that you will iteratively add functionality to as you learn new skills.

By the end of this Workshop, you’ll have gained the confidence to creatively tackle your own ambitious web development projects.

About the Chapters

Chapter 1, Introduction to HTML and CSS, introduces you to the two foundation technologies of the web – HTML and CSS. We'll go over the syntax of both and look at how they are combined to make a web page.

Chapter 2, Structure and Layout, introduces you to the structural elements in HTML, including header, footer, and section tags. You will also learn the three main CSS layout techniques – float, flex, and grid.

Chapter 3, Text and Typography, introduces you to text-based elements, such as paragraphs, headings, and lists. We will go over how to style text-based elements in web pages and let your creativity run wild.

Chapter 4, Forms, introduces you to the creation of web forms, starting with the key HTML elements used in forms and then learning how to style them with CSS. Along the way, you will also learn how to style your forms with validation styling.

Chapter 5, Themes, Colors, and Polish, introduces you to the practical world of CSS. Applying what you've learned so far, you will craft multiple themes to apply to a website in order to change the look and feel.

Chapter 6, Responsive Web Design and Media Queries, introduces you to the world of mobile-first web design, building web pages that can adapt to different screen sizes in order to give the user a better browsing experience, regardless of their browser size. This chapter will teach you how to use modern responsive web design techniques using a CSS feature called Media Queries.

Chapter 7, Media – Audio, Video, and Canvas, introduces you to HTML's audio, video, and canvas elements, all of which can be used to make our web pages a richer, more interactive experience.

Chapter 8, Animations, introduces you to CSS animation, which can be used to animate elements on a page or application to add moving elements that can add richness to your page and tell a complex story.

Chapter 9, Accessibility, introduces you to the important topic of accessibility. The web is meant for everyone, and we can use a variety of simple techniques to make it accessible.

Chapter 10, Preprocessors and Tooling, introduces you to the world of CSS preprocessing and explains how to write a CSS preprocessing language called SCSS (Sassy Cascading Style Sheets). With these new skills, you will be able to compile SCSS into CSS, creating more maintainable code by writing less in order to achieve more.

Chapter 11, Maintainable CSS, introduces you to a variety of different techniques that we can use to create CSS that is easy to maintain, including writing semantic markup using Block Element Modifier (BEM), making reusable components in CSS, grouping CSS rules, and structuring SCSS files correctly.

Chapter 12, Web Components, introduces you to several technologies – custom elements, HTML templates, and the shadow DOM – that can be combined into composable, reusable, and shareable web components.

Chapter 13, The Future of HTML and CSS, introduces you to the cutting edge of web technologies through the CSS Paint API and looks at how we can make use of progressive enhancements to open up future technologies to us now.

Conventions

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, onscreen text, and Twitter handles are shown as follows: The head element is home to most machine-read information in an HTML  document.

A block of code is set as follows:

en>

New terms and important words are shown like this: We can also represent the HTML document as a Document Object Model (DOM).

Long code snippets are truncated and the corresponding names of the code files on GitHub are placed at the top of the truncated code. The permalinks to the entire code are placed below the code snippet. It should look as follows:

Example 6.01.html

13 @media (orientation: landscape) {

14 p.warning {

15 display: block;

16 }

17 }

The complete code for this example is available at: https://packt.live/2JXLsyM

Before You Begin

Each great journey begins with a humble step. Our upcoming adventure in the land of HTML and CSS is no exception. Before we can do awesome things with data, we need to be prepared with a productive environment. In this section, we shall see how to do that.

Installing Chrome

In this book, we have used Chrome version 76, which was the latest version at the time of publication. Make sure you have downloaded and installed the latest version of Chrome to ensure an optimal experience.

To install Chrome on Windows, follow the instructions given here: https://www.google.com/chrome/

For other platforms such as macOS and Linux, scroll down to the bottom left-hand corner of this website: https://www.google.com/chrome/ and click on Other Platforms, and choose accordingly.

Installing Visual Studio Code

Here are the steps to install Visual Studio Code (VSCode):

Download the latest VSCode from https://packt.live/2BIlniA:

Figure 0.1: Downloading VSCode

Figure 0.1: Downloading VSCode

Open the downloaded file, follow the installation steps, and complete the installation process.

Installing the Open in Default Browser Extension

Open your VSCode, click on the Extensions icon, and type in Open In Default Browser in the search bar, as shown in the following screenshot:

Figure 0.2: Open in Default Browser extension search

Figure 0.2: Open in Default Browser extension search

Click on Install to complete the installation process, as shown in the following screenshot:

Figure 0.3: Installing the extension

Figure 0.3: Installing the extension

Installing the web sever

Some exercises in the book will require the use of a personal web server to run the scripts and view the pages you'll be creating. If you do not have a personal web server already set up, you can use the following steps to get one installed.

To begin, you will need to go to https://www.apachefriends.org/index.html and download the XAMPP package for your operating system. XAMPP is available for Windows, Mac, and Linux.

Instructions for Windows

Once the web server package has been downloaded and installed on your system, open the XAMPP Control Panel and check the status of your web server. If Apache is highlighted in green, then the web server is running:

Figure 0.4: The XAMPP Control Panel

Figure 0.4: The XAMPP Control Panel

If it is not highlighted in green, then you will need to start the Apache web server:

Figure 0.5: Starting the Apache Web Server for Windows

Figure 0.5: Starting the Apache Web Server for Windows

Click the first Start button in the control panel that corresponds to Apache. The web server will then initialize and start so you can use it.

To check if your web server is running correctly, open your browser, type localhost into the browser's URL bar and then hit Enter:

Figure 0.6: Navigating to localhost in the browser

Figure 0.6: Navigating to localhost in the browser

If your installation was successful and Apache is running, you will get the XAMPP welcome page:

Figure 0.7: Viewing the XAMPP Welcome Page

Figure 0.7: Viewing the XAMPP Welcome Page

Next, open your XAMPP directory so you understand where to place your files when you want to use the web server to view your pages. From the XAMPP Control Panel, click the Explorer tab:

Figure 0.8: Navigating to the File Explorer

Figure 0.8: Navigating to the File Explorer

This will open the Windows Explorer and show the files used by XAMPP for running your web server. Locate the folder named htdocs. This is the folder that holds any files that you want to view in the browser:

Figure 0.9: Viewing the Web Server Folders and Files

Figure 0.9: Viewing the Web Server Folders and Files

Any files you place into this folder can be accessed through your localhost. For example, we see the file applications.html. If we want to access this file in the browser, we would type localhost/applications.html:

Figure 0.10: Navigating to the applications.html Page

Figure 0.10: Navigating to the applications.html Page

Press Enter and your browser will open the file. You can now place any folders or files you wish to open using the web server, by placing them into this directory.

Instructions for Mac

Download MAC file from this link: https://www.apachefriends.org/index.html.

Double click the downloaded .dmg file (for example: xampp-osx-7.4.5-0-vm.dmg)

Drag the DMG image into application as seen below:

Figure 0.11: XAMPP Installation screen

Figure 0.11: XAMPP Installation screen

To start XAMPP, go to Finder -> Applications -> XAMPP OR press CMD + Space (Spotlight search) and type XAMPP. You will see the following result:

Figure 0.12: MAC Finder screen with Applications folder view

Figure 0.12: MAC Finder screen with Applications folder view

Click on the installer. You will get the following dialog box:

Figure 0.13: First time installation screen

Figure 0.13: First time installation screen

Click OK on this screen and then it will ask your password in the next screen. Once you enter your password, the next screen will appear which looks like this:

Figure 0.14: XAMPP Control panel

Figure 0.14: XAMPP Control panel

Click on the Start button to start the service (observe the red dot and IP address is empty)

After you click on the Start button, you will see green-dot and IP address as shown in the following figure:

Figure 0.15: XAMPP control panel with active "General" Tab

Figure 0.15: XAMPP control panel with active General Tab

To see status of all the services, click on the Services tab and check status:

Figure 0.16: XAMPP control panel with active "Services" Tab

Figure 0.16: XAMPP control panel with active Services Tab

Now, click back on General tab and click on Go To Application button OR copy the IP address and go to your browser and hit enter. It will open default (welcome) page of XAMPP in your default web-browser. Go through this page, it will give you basic information:

Figure 0.17: XAMPP Welcome screen

Figure 0.17: XAMPP Welcome screen

If you wish to use localhost instead of IP, then click on Network tab and enable the below port:

Figure 0.18: XAMPP control panel with active "Network" Tab

Figure 0.18: XAMPP control panel with active Network Tab

Now go to your web-browser and type-in localhost:8080 (as visible in the above figure) and you will see the same Welcome screen.

To place your files into XAMPP, click on the Volumes tab and click on the Mount button. Once clicked, the other two options Unmount & Explore will be activated for you. Now click on Explore button to go to the LAMPP folder:

Figure 0.19: XAMPP control panel with active "Volumes" Tab

Figure 0.19: XAMPP control panel with active Volumes Tab

When you click on Explore button, you see Finder window will open and search for htdocs folder as shown below:

Figure 0.20: Finder with htdocs view

Figure 0.20: Finder with htdocs view

There you can see applications.html file.

Navigate that file from the web-browser and save all your files in this folder to access them on your server:

Figure 0.21: XAPP welcome screen

Figure 0.21: XAPP welcome screen

To stop the server, go to the XAMPP server and in General tab, click Stop button.

Instructions for Linux

Download the Linux installer and find that in your Downloads folder.

Open terminal into Downloads and type the following codes:

chmod 755 xampp-linux-x64-7.4.5-0-installer.run

sudo ./xampp-linux-x64-7.4.5-0-installer.run

Enter your password and you will see the following screen:

Figure 0.22: Linux setup (installation) screen

Figure 0.22: Linux setup (installation) screen

Click on the Next button and follow other instructions, until you see the installation process starting as shown in the following figure:

Figure 0.23: Linux setup (installation) screen

Figure 0.23: Linux setup (installation) screen

Wait for this process to complete. Once done, the following screen will appear which states that the setup has finished:

Figure 0.24: Linux setup (installation) screen

Figure 0.24: Linux setup (installation) screen

Click on the Finish button to launch the XAMPP. XAMPP Control panel will look like this:

Figure 0.25: XAMPP Control Panel with active "Welcome" tab

Figure 0.25: XAMPP Control Panel with active Welcome tab

Start the server first by selecting Manage Servers tab and clicking on Start All button:

Figure 0.26: XAMPP Control Panel with active "Manage Servers" tab

Figure 0.26: XAMPP Control Panel with active Manage Servers tab

Once they are started, you will see green light in front of each of them.

From the Welcome tab, click on the Open Application Folder, which will open /opt/lampp folder. Search for htdocs folder and click on it. You will see applications.html file.

Run localhost from your favorite web-browser and type-in http://localhost/applications.html. You will see Apache Welcome screen. From the control panel you can start/stop any services.

Installing the Code Bundle

Download the code files from GitHub at https://packt.live/2N7M3yC and place them in a new folder called C:\Code. Refer to these code files for the complete code bundle.

If you face any trouble with installation or with getting the code up and running, please reach out to the team at [e-mail].

1. Introduction to HTML and CSS

Overview

By the end of this chapter, you will be able to describe the roles of HTML and CSS in a web page; explain the HTML DOM and CSSOM; explain how a web page renders; create a web page from scratch; and use CSS selectors and calculate CSS specificity. This chapter introduces two core technologies of the web – HTML and CSS. We will look at how they work, how we can write them, and how we can use them to build web pages.

Introduction

Whether you want to create a simple web page to advertise a business, blog about your hobbies and interests, maintain an online community, or even create your own social media network, HTML and CSS are the foundational technologies upon which you can build for the web and are a way for you to get your ideas out there to as wide an audience as possible.

When a web browser navigates to a web page, it will receive and parse an HTML document, which may include text, pictures, links, and other media (for instance, sound and video).

HTML structures this content. It gives it context, describes the content and tells the browser what to do with it. CSS tells the browser how to present the content. A set of styling rules lets the browser know how to render elements within the HTML document. HTML and CSS together give the browser the information it needs to render the web page for the user.

Navigate to a website and what you see is the rendered output of content marked up with HTML and styled with CSS. As a browser user, you have access to the source code of a web page. In Chrome, for example, you can view a page's source code with the keyboard shortcut Ctrl + U on a PC or Cmd + U on a Mac, or right-click and choose View Page Source. Try it yourself. As an example, the following two figures show what the Packt website's Web Development portal looks like when rendered in the browser and as source code respectively.

Ultimately, by learning how to write the HTML and CSS found in that source code, we can create a modern website:

Figure 1.1: The Packt Publishing site's Web Development portal

Figure 1.1: The Packt Publishing site's Web Development portal

The following figure shows the source code of the Packt website:

Figure 1.2: The HTML source code of the Packt site

Figure 1.2: The HTML source code of the Packt site

In this chapter, we will look at how a web page renders by following the process from initial request to completed composition. We will create our first web page and look at how a web browser will parse HTML and CSS to render that page. We will look at how browser developer tools, such as those included with the Chrome browser, can help us to identify and edit nodes within an HTML document and the CSS applied to those nodes.

HTML

HyperText Markup Language (HTML) is a markup language used to describe the structure of a web page.

Consider a snippet of text with no markup:

HTML HyperText Markup Language (HTML) is a markup language used to describe the structure of a web page. We can use it to differentiate such content as headings lists links images Want to https://www.packtpub.com/web-development Learn more about web development.

The above snippet of text may make some sense to you, but it may also raise some questions. Why does the snippet begin with the word HTML? Why is there a URL in the middle of a sentence? Is this one paragraph?

Using HTML, we can differentiate several bits of content to give them greater meaning. We could mark the word HTML as a heading,

HTML

; we could mark a link to another web page using the URL https://www.packtpub.com/web-development>Learn more about web development.

Throughout this chapter, we will be looking at the HTML5 version of the HTML language. We will look at the syntax of HTML in the next section.

Syntax

The syntax of HTML is made up of tags (with angle brackets, <>) and attributes. HTML provides a set of tags that can be used to mark the beginning and end of a bit of content. The opening tag, closing tag, and all content within those bounds represent an HTML element. The following figure shows the HTML element representation without attributes:

Figure 1.3: HTML element representation without tag attributes

Figure 1.3: HTML element representation without tag attributes

The following figure shows the HTML element representation with tag attributes:

Figure 1.4: HTML element representation with tag attributes

Figure 1.4: HTML element representation with tag attributes

A tag has a name (for instance, p, img, h1, h2, h3, br, or hr) and that name combined with attributes will describe how the browser should handle the content. Many tags have a start and an end tag with some content in between, but there are also tags that don't expect any content, and these can be self-closing.

An opening tag can have any number of attributes associated with it. These are modifiers of the element. An attribute is a name-value pair. For example, href=https://www.packtpub.com/web-development is an attribute with the name href and the value https://www.packtpub.com/web-development. An href attribute represents a hypertext reference or a URL, and when this attribute is added to an anchor element, , it creates a hyperlink that the user can click in the browser to navigate to that URL.

To provide information within an HTML document to be ignored by the parser and not shown to the end user, you can add comments. These are useful for notes and documentation to aid anyone who might read or amend the source of the HTML document. A comment begins with . Comments, in HTML, can be single or multiline. The following are some examples:

    This comment is over multiple lines.

    Comments can be used to inform and for detailed documentation.

-->

You can use comments to provide helpful hints to other developers working on the web page but they will be ignored by the browser when parsing the page.

Let's see what the previous snippet of text content looks like when it is given some meaning with HTML:

HTML

HyperText Markup Language (HTML) is a markup language used to describe the structure of a web page.

We can use it to differentiate such content as:

    

headings

    

lists

    

links

    

images

Want to https://www.packtpub.com/web-development>learn more about web development?

If we were to look at this HTML code rendered in a browser, it would look like the following figure:

Figure 1.5: HTML rendered in the Google Chrome web browser

Figure 1.5: HTML rendered in the Google Chrome web browser

The first line shows the text content HTML with a start tag,

, and an end tag,

. This tells the browser to treat the text content as an h1 heading element.

The next line of our code snippet has a

start tag, which means the content until the corresponding end tag,

(on the last line), will be treated as a paragraph element. We then have another paragraph and then an unordered list element that starts with the

start tag and ends with the

end tag. The unordered list has four child elements, which are all list item elements (from the

start tag to the

end tag).

The last element in the example is another paragraph element, which combines text content and an anchor element. The anchor element, starting from the start tag and ending at the end tag, has the text content learn more about web development? and an href attribute. The href attribute turns the anchor element into a hyperlink, which a user can click to navigate to the URL given as the value of the href attribute.

As with our example, the contents of a paragraph element might be text but can also be other HTML elements, such as an anchor tag, . The relationship between the anchor and paragraph elements is a parent-child relationship.

Content Types

HTML5 provides many elements for describing the metadata, content, and structure of an HTML document, and you will learn more about the meaning of specific elements throughout the following chapters.

When starting out with HTML, it can be easy to find the number and variety of elements overwhelming. That is why it may be helpful to think about HTML in terms of content types. We can categorize HTML elements as one of the following content types:

Metadata

Flow

Sectioning

Phrasing

Heading

Embedded

Interactive

The following table has the description and example of different content types:

Figure 1.6: Table describing the different content types

Figure 1.6: Table describing the different content types

To see how we can use these categories, we will introduce an HTML5 element and see how it will fit into these category types. We will look at the element.

If we want to embed an image in our web page, the simplest way is to use the img element (for more on images, see Chapter 7, Media – Audio, Video, and Canvas). If we want to create an img element, an example of the code looks like this: media/kitten.png alt=A cute kitten>.

We set the src attribute on the img element to an image URL; this is the source of the image that will be embedded in the web page.

Unless your image has no value other than as a decoration, it is a very good idea to include an alt attribute. The alt attribute provides an alternative description of the image as text, which can then be used by screen readers if an image does not load, or in a non-graphical browser.

An img element is a form of embedded content because it embeds an image in an HTML document. It can appear in the body of an HTML document as the child element of the body element, so it would be categorized as flow content.

An image can be included as content in a paragraph, so it is a type of phrasing content. For example, we could have inline images appear in the flow of a paragraph:

Kittens are everywhere on the internet. The best thing about kittens is that they are cute. Look here's a kitten now: media/kitten.jpg alt=A cute kitten>. See, cute isn't it?

This code would render the following figure, with the image embedded in the paragraph and the rest of the text flowing around it:

Figure 1.7: Image with text flowing around it

Figure 1.7: Image with text flowing around it

In certain circumstances, an img element is a type of interactive content. For this to be the case, the image must have a usemap attribute. The usemap attribute allows you to specify an image map, which defines areas of an image that are treated as hyperlinks. This makes the image interactive.

An img element does not act as metadata and it does not provide a sectioning structure to an HTML document. Nor is it a heading.

There are lots more elements in the HTML5 standard. Elements can appear in more than one category and there is some overlap between the relationships of the categories. Some of these elements are very common and are used often, but some of these elements have very specific purposes and you may never come across a use case for them.

The content types can be useful for grouping elements into more manageable chunks, for getting an overview of the choices HTML gives you and the restrictions it puts on the content of an element, and for understanding the content types generally before we drill down into the uses of specific elements in later chapters.

For further reference, we can see where each available element is categorized in the W3C's documentation on HTML5: https://packt.live/2OvPGRi.

The HTML Document

An HTML document represents a hierarchical tree structure, rather like a family tree. Starting from a root element, the relationship between an element and its contents can be seen as that of a parent element and a child element. An element that is at the same level of the hierarchy as another element can be considered a sibling to that element, and we can describe elements within a branch of the tree as ancestors and descendants. This structure can be represented as a tree diagram to get a better idea of the relationship between elements.

Take, for example, this simple HTML document:

  

    

  

  

    

      

Heading

      

First paragraph of text.

      

Second paragraph

Reviews for The HTML and CSS Workshop

[Arie Verburgh · Rating: 5 out of 5 stars]

I am a retired freelance academic language editor. To make myself known and get more clients, I decided to build a website. I used Joomla 4 and then wanted to fine-tune my webpages by editing certain CSS and HTML files. I had little idea of what I was doing and then found this book. It really opened up the world of web development for me. I have gained the necessary insight to chart the rest of my web development journey! Highly recommended!