What Is a Web Page?

A web page is a digital document that is accessed through the Web using a web browser app. Web pages are components of websites, discussed next, which are hosted on web servers, discussed later.

Web pages can contain text, images, audio or video files, and other digital resources, such as documents that visitors can download. Web pages are arranged and formatted using Hypertext Markup Language, HTML or short, and Cascading Style Sheets, CSS. Web pages contain contents that can be static or dynamic; they may also contain interactive features, such as forms, that enable visitors to input data or interact with the content.

What Is a Website?

A website is a collection of web pages hosted on a web server and made accessible to web browsers via the Web. A website typically contains multiple pages that are connected to each other by hyperlinks, forming a coherent structure that lets visitors navigate quickly between the various areas of the website.

A website typically aims to serve a specific purpose. For example, a personal website might showcase the owner’s interests and talents; an organization’s website might explain that organization’s purpose and aims and encourage visitors to join; or a company’s website might present the company in the best possible light and provide ways to buy its products.

What Is a Web Server?

A web server is software that responds to requests from web clients, such as web browsers, and returns content if it is available and permitted. A web server stores web pages, images, videos, and other content so that it can serve them to clients.

A web server can run on almost any computer hardware, from diminutive computers such as the Raspberry Pi series up to dedicated server machines deployed in full-scale facilities called server farms. As of this writing, many web servers are deployed on cloud-based infrastructure, such as Amazon Web Services, AWS, or Microsoft Azure.

A web server can run on just about any computer operating system, including Windows, macOS, Linux, and the mobile operating systems iOS, iPadOS, and Android.

Web servers are a critical part of Internet infrastructure and deliver web content to users throughout the world.

What Is a Web Browser?

A web browser is an app used to access and display web pages and other content on the Web. Using a web browser, you can go to a web page either by typing or pasting its address or by clicking a link. Web browsers use Hypertext Transport Protocol, HTTP, or its secure variant, Hypertext Transport Protocol Secure, HTTPS, to request web pages from web servers and then display the content in the browser window.

Popular web browsers include Google Chrome, Mozilla Firefox, Microsoft Edge, and Apple’s Safari. These browsers have many features to make browsing easier and faster, such as bookmarks and tabbed browsing.

How Does a Web Browser Find the Web Server Hosting a Website?

When you enter a website’s URL into the browser’s address box, the browser uses the Domain Name System, DNS, to discover the Internet Protocol address, or IP address, for the web server hosting the website. DNS uses a hierarchical system of servers to organize, store, and return the IP address associated with each domain name.

A domain name is a text-based identifier that represents a unique location on the Internet. For example, www.wiley.com is the domain name of the website for John Wiley & Sons, Inc., publisher of this book and many others. A domain name consists of multiple parts. The rightmost part is the top-level domain, or TLD — in this case, .com. Moving toward the left, the next part — in this case, wiley — is the second-level domain. The next part, www, is the subdomain.

What Is HTML?

HTML is the abbreviation for Hypertext Markup Language, a language used to create web pages. Hypertext means text that includes hyperlinks to other locations on the same page or to other pages, so when you click the linked text, the browser displays the linked location or page.

HTML enables you to “mark up” text and other elements with codes that specify how the elements appear. For example, you can mark up a paragraph as a first-level heading by enclosing it in the appropriate HTML codes, which are <h1> at the beginning and </h1> at the end:

<h1>This Is a Heading 1 Paragraph</h1>

Similarly, you can mark up a paragraph as being regular “paragraph” text by enclosing it in <p> and </p> codes:

<p>This is a paragraph of regular text.</p>

The nearby illustration shows how this heading and paragraph look using the Google Chrome browser’s default styles for the h1 element (A) and the p element (B). You can control the formatting by defining and applying styles of your own.

HTML is currently at version 5, which is generally referred to as HTML5. But rather than being a fixed version, HTML5 is what is called a living standard, with development continuing and new features being released. So although HTML5 was first released in January 2008 and went through a major update in October 2014, it is still the current version as of this writing in April 2023 — and it looks likely to remain the current version for at least several years to come.

What Is CSS?

CSS is the abbreviation for Cascading Style Sheets, a language used to format web pages written in HTML. CSS enables you to control the visual layout and appearance of web pages, including the fonts, colors, spacing, and positioning used for text and other elements.

CSS consists of text-based instructions that specify the formatting to apply to particular elements. For example, you could create an h1 style to format the h1 element mentioned in the previous section.

You can implement CSS in three ways: as an external file, as styles embedded in the HTML document, or as styles applied inline within a particular HTML tag. Using an external file is usually best, because it enables you to format multiple HTML documents using a single style sheet. When you need to make changes, you can change the external CSS rather than having to change the individual documents.

How Do You Create HTML and CSS?

Both HTML and CSS consist of text-only files, so you can create them using even the most basic text editor, such as the Notepad text editor included with Windows. However, to create HTML and CSS quickly and accurately, you will usually do better to use a text editor or integrated development environment that provides features for entering and checking code. Such text editors are often referred to as code editors.

This book recommends Microsoft’s Visual Studio Code, a free code editor that runs on Windows, macOS, and Linux and that includes some integrated development environment features. See the section “Install Visual Studio Code,” later in this chapter, for instructions on getting Visual Studio Code.

What Is Responsive Web Design?

In the early days of the Web, most people browsing it would use a desktop computer or laptop computer with a screen capable of displaying at least a moderate amount of information — say, 1024 × 768 resolution or higher. Most web pages were designed and coded to be easily readable on such screens. If you accessed such a web page using a much smaller or lower-resolution screen, you would likely see only part of the page’s width at a readable size and would need to scroll horizontally to see the rest.

Nowadays, visitors use many different types of devices, from desktop computers with huge screens all the way down to tablets and smartphones with comparatively tiny screens. This variety of browsing devices means that one-size-fits-all web design is no longer satisfactory for most websites.

To cater to different devices, website builders use an approach called responsive web design. Responsive web design creates pages that can adapt to different device types, different screen sizes, and changes in orientation between portrait and landscape.

In responsive web design, a web page’s layout and content automatically adjust to suit the screen size of the browsing device. Responsive web design uses flexible grid systems, images, and typography to change a web page’s layout. It uses media queries to apply different styles suited to the device’s screen size.

Responsive web design has several clear advantages over static web design. First, a responsive web page delivers a consistent user experience across different types of devices rather than favoring some devices over others. Second, a responsive web page is easier for visitors to read, navigate, and use. Third, a responsive web page improves accessibility, enabling people with disabilities to access it satisfactorily. Fourth, a responsive web page can improve search engine optimization, or SEO for short.

Comparing Static Web Pages with Dynamic Web Pages

Static web pages are straightforward to create using HTML and CSS, the technologies on which this book focuses. Some static web pages may also benefit from functionality using the JavaScript scripting language.

Static web pages are suitable for websites that do not need frequent updates or content changes, such as company websites, landing pages, and personal blogs. Static web pages are also more secure than dynamic web pages, because they do not have a database connection that hackers might be able to exploit. Static pages may have a fixed format, but they can also be responsive, using media queries — discussed in Chapter 10 — to adapt to the screen of the device requesting them.

Given a fast Internet connection, static web pages should load quickly for visitors, because the server needs only to provide the existing file. By contrast, dynamic web pages typically require the server to perform some processing before it can send the web page to the browser.

Dynamic web pages are more complex than static web pages and take more work to create. Dynamic web pages require the use of server-side scripting languages such as PHP, ASP.NET, and Java.

Dynamic web pages enable you to create more interactive and feature-rich websites that can be updated frequently. Dynamic web pages are great for websites that benefit from frequent updating, such as news sites, social media sites, or e-commerce sites. Dynamic web pages give you greater flexibility than static web pages, because you can customize them to meet the needs of your company or organization.

As an example of the difference between static web pages and dynamic web pages, consider a web page that displays the menu for a restaurant. If you create a static page, the menu remains the same unless you edit the file. That is doable, but you might need to change the menu every day, updating the dishes and the prices. Instead, you could create a dynamic web page that pulls in the details of the day’s special dishes from a database, together with the current price for each menu item. This way, the menu remains current without you needing to edit it.

Comparing Responsive Websites and Nonresponsive Websites

A responsive website is a website that checks what type of device is accessing the site and displays its contents in a suitable way for that device. For example, if you visit a responsive website using your desktop computer, which has a large screen, the website serves your computer versions of the pages formatted for the large screen.

By contrast, if you go back to the same responsive website using your mobile phone, the web server serves up versions of the pages formatted to suit the smaller screen.

A nonresponsive website simply gives each visitor the same type of page, regardless of whether it fits the visiting device or not. The nonresponsive website does not check to see what type of device is visiting.

Normally, you would want to create a responsive website rather than a nonresponsive website. Building a responsive website has several key advantages:

• The website’s content is consistently usable across different devices using a single codebase. You do not need to create separate websites for different types of devices.
• Having a single codebase simplifies developing and updating the website and reduces maintenance costs.
• Having the website viewable and usable on different devices can increase brand recognition and increases the likelihood of visitors sharing your website on social media, which may drive extra traffic to the website. Such success naturally also depends on the quality of your website’s content; responsiveness helps, but it is no panacea.

See Chapter 10 for information on making your website responsive.

Text Editors

A text editor is an app for creating and editing text. Both HTML files and CSS files consist only of text, so you can use even the most rudimentary text editor to create and edit them. For example, Windows includes the venerable but still serviceable text editor Notepad, shown editing an HTML file in the nearby illustration.

Notepad and other text editors offer no specific features for creating HTML and CSS. Some purists prefer this type of minimalist approach, but most people benefit from having help in completing and checking code.

Word Processors

A word processor is an app for creating documents consisting of text, graphics, and other objects, laid out and formatted as needed. While you can use a word processor to create HTML files and CSS files, it is not usually a good choice, as it brings a plethora of features that you must avoid using, such as formatting, layout, graphical objects, and revision marking.

Where a word processor may be helpful is for creating web pages from your existing word processing documents. For example, Microsoft Word enables you to save documents to three web formats: the Single File Web Page format; the Web Page format; or the Web Page, Filtered format. Normally, you would choose the Web Page, Filtered format, because it gives the most compact result, retaining only the information needed to display the web page and discarding information relevant only to the document in Word format. The Web Page format saves all the Word formatting information as well, effectively saving the entire Word document in HTML format. The Single File Web Page format creates a large file containing all the objects required to make up the Word document.

Code Editors

A code editor is a text editor enhanced with extra features for creating code — anything from HTML code to programming code. Normally, a code editor is your best choice for creating HTML files and CSS files from scratch and editing them thereafter.

The nearby illustration shows automatic code completion (A) in Microsoft’s Visual Studio Code, the free code editor that this book recommends for working with HTML and CSS. See the section “Install Visual Studio Code,” later in this chapter, for instructions on putting Visual Studio Code on your computer.

Other widely used code editors include Sublime Text, www.sublimetext.com, which costs $99 after a free evaluation without a time limit but with reminders to buy; UltraEdit, www.ultraedit.com, which offers a free 30-day trial and then costs $79.95 per year for a subscription or $149.95 for a “perpetual” license; and Notepad +  + , www.notepad-plus-plus.org, which is free but runs only on Windows.

Website Builders

Website builders are simplified tools that enable you to build a website by dragging and dropping predesigned elements onto a customizable template. Website builders are good for people or small businesses that want to create a straightforward website quickly and without coding.

Widely used website builders include Weebly, www.weebly.com; Wix, www.wix.com; and Squarespace, www.squarespace.com. Most website builders offer web hosting, so you need not find a separate web host.

Many web hosts provide access to one or more website builders. So if you already have a web host, see whether it offers a website builder.

Content-Management Systems

A content-management system, abbreviated CMS, is a web-based app for creating, managing, and publishing web pages, blog posts, and images. CMSs provide a wide range of templates for websites, giving you many choices of design and functionality. They also provide tools for managing and publishing content, including scheduling posts, integrating social media, and SEO optimization.

Widely used CMS platforms include WordPress, www.wordpress.com; Joomla, www.joomla.org; and Drupal, www.drupal.org.

Graphics Tools

To create image files suitable for your website, you will need a graphics-manipulation tool. This book recommends GIMP, the GNU Image Manipulation Program, which is free and runs on Windows, macOS, and Linux. It is available from www.gimp.org; see the section “Install GIMP,” later in this chapter.

If you work with graphics professionally, you may already have a suitable graphics-manipulation tool, such as Adobe Photoshop or Adobe Illustrator. Such tools are more than adequate for creating image files for your website. Adobe, www.adobe.com, offers Photoshop and Illustrator as either single-app subscriptions or as part of a subscription to its Creative Cloud suite of more than 20 apps. Special pricing is available for students, teachers, schools, and universities.

If you have Windows, you might also want to try the built-in Paint app; if it proves inadequate, try the free version of Paint.net from www.getpaint.net. If you have macOS, you might also experiment with the capabilities of the built-in Preview app and the Photos app. For Linux, go straight to GIMP.

Choose a Web Host

If you or your company do not have a web host, start by identifying a suitable one and signing up for a hosting plan appropriate to your needs.

Many web hosts are available, as you can find in seconds by searching on the Web. When evaluating web hosts, you will normally want to consider the following features:

• Price. Use price to select a range of web hosts and plans that you can afford, and then apply the other factors in this list to grade the hosts and plans. Do not judge on price alone in isolation.
• Uptime and reliability. Your website needs to be up, running, and available 24/7 to serve visitors. Choose a web host that offers a high percentage of uptime — 99.9 percent uptime is considered the minimum uptime percentage for dedicated hosts — and high reliability.
• Customer support. Make sure the web host offers strong customer support via all the channels you will want to use — email support, phone support, and live chat support.
• Performance and speed. Web users easily become frustrated with sites that are slow to load, so make sure your web host delivers fast loading speeds. Look for a web host that uses a content delivery network, CDN for short. A CDN is a geographically distributed server system that delivers web content to visitors based on their geographical location rather than delivering all content from a central point that may be geographically distant from some visitors.
• Scalability. Make sure the web host enables you to upgrade your hosting plan as your website and its traffic grow. Such scalability helps you avoid outgrowing your web host and having to move to another host, which is a major and expensive upheaval.
• Security, backup, and recovery. The web host should provide SSL certificates, malware detection, and firewalls to keep websites secure. The host should also offer set-and-forget backup features to keep your website’s data protected in case of corruption or hardware failure, plus easy-to-use tools for recovering your website from the latest viable backup.

Register a Domain Name

If you do not have a domain name for your website, now is the time to get one. Open a browser window to a domain registrar, search to identify an available domain name that suits you, and register it. The nearby illustration shows the registration interface at Pair Domains.

As of this writing, these are five of the leading domain registrars:

• GoDaddy, www.godaddy.com
• Domain.com, www.domain.com
• Namecheap, www.namecheap.com
• Google Domains, https://domains.google
• Porkbun, www.porkbun.com

All these domain registrars offer a wide range of top-level domains, or TLDs. These TLDs range from .com, .org, and .net — three of the original six TLDs created in the 1980s — to newer TLDs such as .art, .biz, and .shop. Prices vary wildly, with the most popular TLDs being far more expensive.

Various TLDs are restricted to bodies that meet qualification criteria. For example, the .gov TLD is reserved for U.S. government agencies and entities, the .mil TLD is reserved for the U.S. military, and the .edu TLD is reserved for accredited post-secondary education institutions in the United States. Disappointingly, the .cat TLD is restricted to the Catalan linguistic and cultural community, but the .dog TLD, the .pet TLD, and the .animal TLD are open to all.

Choose a Type of SSL Certificate

SSL is the abbreviation for Secure Sockets Layer, a networking security protocol used to establish an encrypted link between a web browser and a web server, ensuring that all data passed between them remains private and secure even if it is intercepted in transit. To make sure that browsers can access your website safely, you will need to get an SSL certificate and apply it to the website’s domain.

You have two main options for getting an SSL certificate. First, you can get an SSL certificate from your domain registrar when you register the website’s name. Second, many web hosts offer SSL certificates for the domains you host on their servers. A third option is to get an SSL certificate from a different domain registrar, but this circuitous approach is seldom beneficial.

Usually, you would want to find out what SSL certificates your web host offers before paying for an SSL certificate from your domain registrar.

Various types of SSL certificates are available, such as the following:

• A trial certificate is a time-limited certificate that enables you to test whether the certificate meets your needs; if it does, you can buy another certificate to replace it.
• A positive certificate enables encryption for your website’s data and has a relatively small relying party warranty, $10,000.
• A basic certificate also enables encryption but has a much higher relying party warranty, $250,000.
• A positive wildcard certificate enables encryption for multiple subdomains within your domain, so you do not need to buy a separate certificate for each subdomain.

Launch Visual Studio Code and Meet the Welcome Screen

Start by launching Visual Studio Code in the usual way for your computer’s operating system. For example, on Windows, click Start () to display the Start menu, and then click Visual Studio Code ().

The first time you launch Visual Studio Code, the app automatically displays the Welcome screen, which encourages you to choose several key configuration settings. For example, you can click Get Started with VS Code to display the Get Started with VS Code screen, shown here, which provides links to several key settings. You can also configure these settings later, as explained in the following subsections.

Choose the Theme for Visual Studio Code

By default, Visual Studio Code uses its Dark +  theme, which is easy on the eyes in low-light conditions but tends to get over-inked in books. To change the theme, click Manage (A, ) in the lower-left corner to display the Manage pop-up menu, click Themes (B) to display the Themes continuation menu, and then click Color Theme (C), as shown here.

In the Color Theme picker, press and to move the selection highlight up and down the list of themes. Visual Studio Code displays a preview of the selected theme. When you settle on the theme you want, press to apply it. From here on, this book uses the Light +  V2 (Experimental) theme for readability.

Identify the Key Elements of the Visual Studio Code Window

The Visual Studio Code window includes the following key elements:

• Activity Bar (D). This vertical bar on the left side of the window provides quick access to several different panels that you can display one at a time in the Primary Side Bar.
• Menu icon (E). When the menu bar is not displayed, click Menu () to show the menu list, and then click the menu you want to open.
• Primary Side Bar (F). This area, which appears on the left side of the window by default, displays any of several panels, such as the Explorer panel shown in the nearby illustration. You switch from one panel to another by clicking the buttons in the Activity Bar. You can display or hide the Primary Side Bar as needed.
• Secondary Side Bar (not shown). This area on the right side of the window can display additional information about the code you are editing. For example, you can display an outline of the code structure. You can display or hide the Secondary Side Bar, as needed.
• Editor (G). This main area is where you edit your files.
• Tab bar (H). The Tab Bar displays a tab for each open document. You can click the tab for the document you want to display.
• Panel (I). This area to the bottom of the window has tabs that enable you to display different items: Problems, Output, Terminal, and Debug Console. You can display or hide the Panel, as needed.
• Status Bar (J). This narrow horizontal bar across the bottom of the window shows information about the current state of the Editor, including the language mode, the line and column numbers, and the number of problems detected.

Change the Layout of the Visual Studio Code Window

The four buttons in the upper-right corner of the Visual Studio Code window enable you to adjust the app’s layout:

• Toggle Primary Side Bar (A,). Click this button to toggle the display of the Primary Side Bar. Alternatively, press  +  on Windows or Linux or  +  on the Mac.
• Toggle Panel (B,). Click this button to toggle the display of the Panel. Alternatively, press  +  on Windows or Linux or  +  on the Mac.
• Toggle Secondary Side Bar (C,). Click this button to toggle the display of the Secondary Side Bar. Alternatively, press  +  +  on Windows or Linux or  +  +  on the Mac.
• Customize Layout (D,). Click this button to display the Customize Layout pane, shown nearby.

The Customize Layout pane contains four sections: the Visibility section, the Primary Side Bar Position section, the Panel Alignment section, and the Modes section.

In the Visibility section (E), you can choose which elements to display and which to hide. Move the pointer over the element you want to display or hide. The Displayed icon (F, ) or the Hidden icon (G, ) appears to the right of the element. Click this icon to toggle the element between displayed and hidden.

In the Primary Side Bar Position section (H), click Left () or Right () to control which side the Primary Side Bar appears. The default is Left.

In the Panel Alignment section (I), click Left (), Right (), Center (), or Justify (), as needed.

In the Modes section (J), click Full Screen () to switch to Full Screen Mode; click Zen () to switch to Zen Mode, which strips down the Visual Studio Code interface to a minimum; or click Centered Layout () to switch to Centered Layout Mode. You can apply any or all of these three modes.

When you finish choosing options in the Customize Layout pane, click Close () to close the pane.

Configure Auto Save and Font Size

In Visual Studio Code, click Menu (K, ) to display the menu list, and then click File to open the File menu. Click Preferences to open the Preferences submenu, and then click Settings. The Settings screen appears.

The Commonly Used settings category normally appears at first. If another category appears, click Commonly Used (L).

Click Files: Auto Save (M, ), and then click afterDelay. This setting makes Visual Studio Code save you changes automatically after a short delay. This book’s instructions assume that you are using the afterDelay setting. The other available settings are off; onFocusChange, which saves changes when you move the focus to a different part of Visual Studio Code; and onWindowChange, which saves changes when you move the focus to a different window.

Click Editor: Font Size (N) and type the font size you want to use in the editor.

Optionally, click Editor: Font Family (O) and type the font family you want to use in the editor. Visual Studio Code uses the first font — in the example, Consolas — if it is available, falling back to subsequent named fonts if necessary; if none of the named fonts is available, it falls back to the generic font family — in this case, monospace. If the font name includes a space, enter the font in quotes, as in 'Courier New' in the example.

As you can see, Visual Studio Code has a huge number of features. You can browse through them by clicking the categories in the left pane or search for specific settings by clicking Search settings (P) and typing your search term.

When you finish configuring settings, click Close () to close the Settings screen.

Install GIMP on Windows 10 or Windows 11

To install GIMP on Windows 10 or Windows 11, click Start () to display the Start menu, and then click Microsoft Store () to open the Microsoft Store app. Click Search apps, games, movies, and more at the top of the app window, type gimp (A), and then press . In the search results, click GIMP, and then click Install (B).

Once GIMP is installed, you can launch it by clicking Start () and then clicking GIMP ().

Install GIMP on macOS

As of this writing, GIMP is not available on Apple’s Mac App Store.

To install GIMP on macOS, open a browser window or tab to the GIMP website, www.gimp.org (C). Click the Download tab (D) at the top of the window to display the Downloads page, locate the current stable version for macOS, and then click either Download GIMP via BitTorrent (E) to download GIMP via the BitTorrent file-sharing service or Download GIMP Directly (F) to download GIMP from the GIMP website. The buttons offer you the choice of downloading for Apple Silicon, Apple’s home-grown M-series processors, or for Intel, the processors used by older Macs; choose appropriately.

If the Do You Want to Allow Downloads on www.gimp.org? dialog box opens, click Allow.

When the download finishes, click Show Downloads (), and then click the GIMP disk image file in the Downloads list. A Finder window opens showing the contents of the GIMP Install package. Drag the GIMP icon (G) to the Applications folder shortcut.

After installation finishes, click View to open the View menu, and then click Show Toolbar to display the toolbar and the sidebar. Go to the Locations section of the sidebar and click Eject () to eject the GIMP disk image file. You can then delete the file from the Downloads folder if you do not want to keep it.

With the app installed, you can run GIMP by clicking Launchpad () to display the Launchpad screen and then clicking GIMP ().

Install GIMP on Linux

You have several options for installing GIMP on Linux, including installing it via your distribution’s software-management app.

If your computer is running Ubuntu, the easiest approach is to open a terminal window and update the package list by issuing the following command:

sudo apt-get update

Once the package list is up to date, install GIMP and all necessary dependencies by issuing the following command:

sudo apt-get install gimp

When installation finishes, you can launch GIMP either by opening the application menu and clicking GIMP () or by issuing the gimp command in a terminal window:

gimp

Which Browsers Are Most Widely Used?

A wide range of web browsers are available, but as of this writing in spring 2023, Google’s Chrome dominates the market. Breakdowns of web browser usage (see the nearby pie chart) tend to be illustrative rather than exact, but most figures agree that Chrome has between two-thirds and three-quarters of traffic. Next comes Apple’s Safari with approximately one-fifth of traffic, mostly thanks to its inclusion on every iPhone, every iPad, and every Mac.

After Safari is Microsoft Edge, included with Windows 10 and Windows 11, with a little less than 5 percent of traffic. Mozilla Firefox has around 3 percent; Samsung Internet has around 2.5 percent, as does Opera. Other browsers, such as Vivaldi and the now-terminated Internet Explorer, make up the remaining 3 percent of traffic.

How Do Chrome, Safari, Mozilla Firefox, and Microsoft Edge Compare to Each Other?

All four browsers support a wide range of features that let users browse the web efficiently and enjoy web content. Each browser supports HTML5, CSS3, and JavaScript. Each offers the following seven key features:

• Tabbed browsing. You can open multiple web pages on separate tabs within a single window.
• Bookmarks. You can mark web pages so that you can quickly visit them again.
• History. The browser automatically keeps a list of pages you visit, enabling you to return to them easily.
• Private or “Incognito” browsing. This mode lets you turn off history when you do not want the browser to track it.
• Autofill. The browser stores data you enter in form fields — for example, address data — so that it can fill in those fields automatically in future forms.
• Password storage. The browser enables you to store passwords securely so that you can enter them in web pages without typing.
• Extensions. You can extend the browser’s functionality by installing extensions, third-party add-ons.

Beyond these features, which are arguably essential for browsing the web nowadays, each browser offers features of its own. For example:

• Chrome is tightly integrated with Google services such as Gmail and Google Drive, and it offers Chrome apps, web apps that run by using the Chrome browser.
• Microsoft Edge offers tight integration with Office 365 and other Microsoft services.
• Mozilla Firefox offers a highly customizable interface and strong privacy features.
• Safari integrates tightly with Apple device features such as Continuity, which lets you start browsing on one device and continue on another, and Apple’s Keychain password manager. Safari also offers a Reader Mode to reduce ads and interruptions on web pages.

Which Browsers Should You Install?

Unless you have strong reasons to do otherwise, you should probably install all four of the leading browsers — Chrome, Safari, Mozilla Firefox, and Microsoft Edge — on your development computer. Having all four browsers available will enable you to make sure that your web pages display correctly on the vast majority of computers.

Install the Browsers and Choosing Configuration Options

You can download the browsers from the following sites:

• Chrome: www.google.com/chrome
• Safari: https://support.apple.com/downloads/safari
• Firefox: www.mozilla.org/en-US
• Edge: www.microsoft.com/edge/download

Installing the browsers is straightforward enough, but you will typically need to make the following three choices:

• Whether to make the new browser the default browser for your computer. For example, in the Make Firefox Your Go-To Browser dialog box, you would click Skip this step to turn down the offer to make Firefox the default browser.
• Whether to import bookmarks from your current browser. Importing bookmarks is handy when you are switching permanently or semipermanently from one browser to another, but when installing multiple browsers for use in parallel, you may want to keep separate bookmarks.
• Whether to sync your browser data across your devices. Syncing bookmarks, passwords, and settings data across all the devices on which you use a particular browser can be a great boon for consumers. But when you are installing the browsers on your computer for testing, you may prefer to keep the data unsynced.

List the File Types Your Website Will Use

Start by making a list of the different types of files your website will use. The following types are widely used, but your website may well have others:

• HTML documents and CSS files
• Images
• Fonts
• Audio files and video files
• JavaScript script files
• Documentation files about the website
• Reusable code and templates

Identify the Directories Your Website Will Need

Next, decide where you will store these items. Table 1-1 and the nearby illustration show a fairly typical list of directories, but you will likely want to create your own custom version.

Folder	Explanation
/	The root directory, the top level of the website. You will put the main index.html file, your web pages, and other essential files, such as a robots.txt file, in this directory. The other directories are children of the root directory.
/css	The directory for storing the CSS files you use to style your web pages. If you have many CSS files, consider creating subdirectories to organize them more tightly.
/docs	The directory for storing documentation files.
/download	The directory for storing files your website makes available for download.
/fonts	The directory for storing font files the website uses.
/images	The directory for storing image files.
/includes	The directory for storing templates or reusable code.
/js	The directory for storing JavaScript script files.
/vendor	The directory for storing third-party frameworks or libraries your website uses. See Chapter 12.

Adapt the List to Suit Your Needs

Looking at this list, you might ask where the audio files and video files go in the directory structure. As the directory structure makes no provision for these file types, you will need to decide on a suitable place.

You could simply create an /audio directory for audio files and a /videos directory for video files. But to keep the directory structure compact, you might prefer to create a directory such as /media or /assets to contain subdirectories for audio, video, and perhaps images. For example:

/media
     /audio
     /images
     /videos

Or:

/assets
      /audio
      /images
      /videos

When deciding on a location for your video files, keep in mind that video’s hefty file sizes will increase the load on your web server. If your website serves many videos to visitors, consider offloading the burden by storing the video files on a CDN.

Create the Directory Structure

Once you have made the design decisions, you can create the directory structure using standard commands for your computer’s operating system. For example:

• Windows. Open a File Explorer window showing the folder in which you will place the root directory. Right-click open space in the folder, click or highlight New on the contextual menu, and then click Folder on the continuation menu. Type the directory name and press to apply the name. Press again to open the directory. You can then create subdirectories inside it.
• macOS. Open a Finder window to the folder in which you will place the root directory. Press  + click or right-click to display the contextual menu, and then click New Folder. Type the directory name and press to apply it. Double-click the directory to open it so that you can create subdirectories inside it.
• Linux. Open a Terminal window, use the cd command to navigate to the appropriate directory, and then use the mkdir command to create the root directory. Use the chdir command to change directory to the root directory, and then create subdirectories inside it.

Identify the Four Key Elements of a Web Page

Each valid HTML page must contain four key elements, as illustrated in the nearby code:

• DOCTYPE declaration. This declaration tells the browser the document type of the HTML page. The browser needs this information to interpret the document’s codes correctly.
• <html> tags. The whole of the web page appears between the opening <html> tag and the closing </html> tag. These tags show you the standard format for two-part tags: The closing tag consists of a forward slash, /, and the same text as the opening tag. For example, you use the <p> opening tag to tell HTML to start a paragraph and the </p> closing tag to end the paragraph.
• head element. This element contains the metadata for the document, including the character set used for encoding and the title, which most web browsers display in the title bar.
• body element. This element contains the content of the web page, such as the text of headings, paragraphs, and lists, and links to external content, such as images.

Understanding the DOCTYPE Declaration

Each HTML page begins with a declaration of the document type using the DOCTYPE keyword. The DOCTYPE declaration for an HTML5 document is straightforward and short:

<!DOCTYPE html>

Given that HTML5 has been in use for 15 years now, this is the DOCTYPE declaration you are likely to see most often. But if you work with legacy web pages, you are likely to see other DOCTYPE declarations, so it is helpful to be able to recognize them.

HTML version 4 and Extensible Hypertext Markup Language, XHTML, use more complex DOCTYPE declarations that include the details of the document type definition, DTD, the page uses. For example, the HTML 4 Strict standard uses the following DOCTYPE declaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Similarly, the XHTML 1.1 standard uses the following DOCTYPE declaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

The opening <html> tag for an XHTML doctype includes the xmlns attribute, which provides details of the XHTML namespace the document uses:

<html xmlns="http://www.w3.org/1999/xhtml">

A namespace is a particular class of elements in which each element has a unique name. For example, XHTML uses a different namespace than HTML 4, but some names in the separate namespaces are the same.

Understanding HTML Validity and Validation

An HTML document must be valid in order to display properly and consistently in all browsers. Valid means the document contains all the essential elements in an acceptable order and that all the formatting tags are correct, complete, and in the right places.

You can perform an informal validity check by opening an HTML document in several browsers and seeing if it displays correctly. But because browsers encounter many pages that contain errors, the browsers are built to tolerate errors and display pages as well as they can, so opening an HTML document in a browser is not a strict test of the HTML's validity. For a strict check, you can use validity checkers built into many web development tools or online checkers such as the W3C Markup Validation Service checker at https://validator.w3.org.

Grasp How Nesting Works

To nest one element within another element, first enter the opening tag and closing tag for the containing element. For example, the body element of a web page uses the opening <body> tag and the closing </body> tag:

<body></body>

You can then nest an element between the opening and closing tags. For example, you might nest a paragraph, as shown here.

<body><p>Here is a paragraph.</p>
</body>

If you are going to nest many elements, you will probably want to place the outer element’s tags on separate lines so that you can easily see where the element starts and ends. Indenting the nested elements helps distinguish them visually without changing the semantic meaning of the HTML, because browsers ignore the indentation. For example:

<body>
  <h1>Here Is a First-Level Heading</h1>
  <p>Here is a paragraph.</p>
</body>

The key to nesting elements is that you must close a nested element before you close the element that contains it. If you close the containing element before the nested element, errors occur, and the HTML is not valid. The following example closes the body element before closing the paragraph:

<body>
  <h1>Here Is a First-Level Heading</h1>
  <p>Here is a paragraph.
</body>
</p>

This example causes an error such as Saw an end tag afterbodyhad been closed.

Display a Page’s Source Code in a Browser

In Google Chrome, Mozilla Firefox, and Microsoft Edge, you can display a page’s source code by right-clicking the page and then clicking View page source on the contextual menu.

On macOS, Safari makes life more difficult. First, you must add the Develop menu to the menu bar. To do so, click Safari and Preferences to open the Safari Preferences window; click Advanced to display the Advanced tab; and then select Show Develop menu in menu bar (). You can then click Develop on the menu bar and click Show Page Source; alternatively, Control-click or right-click the page and click Show Page Source on the contextual menu.

The source code for a complex page may seem overwhelming, but if you look at the beginning, you can recognize standard elements such as the DOCTYPE declaration (A), the opening <html> tag (B), the opening <head> tag (C), assorted <meta> tags (D), the opening <title> tag (E), and the closing </title> tag (F).

Identify the Components of a Hyperlink

In HTML, a hyperlink uses an <a> tag, where the letter a stands for anchor. The <a> tag for a hyperlink uses the following format:

<a href="address">link text</a>

Here, the href — hyperlink reference — attribute specifies that the anchor tag contains a hyperlink. The link’s address, entered in double quotation marks, specifies the destination for the hyperlink. The link text, which appears between the opening <a> tag and the closing </a> tag, provides the text to display on the web page to indicate the link.

For example, the following hyperlink displays the text keyboard types and links to the page named keyboard_types.html at the site www.kybz.info.

<a href="https://www.kybz.info/keyboard_types.html">keyboard types</a>

The nearby illustration shows the linked word in context. When you hold the pointer over a link (A), most browsers display the link destination. In this example, Google Chrome displays the link destination in the lower-left corner (B) of the window.

HTTP Status Codes and Their Meanings

Table 2-1 shows the HTTP status code responses you are most likely to encounter in your web browsing and development.

HTTP Code	Code Status	Explanation
Information Responses
100	Continue	The client should continue the request if it has not been completed; if the request has been completed, the client should ignore this code.
101	Switching Protocols	The server is switching to the specified protocol following an Upgrade request from the client.
102	Processing	The server is processing a WebDAV request but has no response yet.
Successful Responses
200	OK	The file request completed successfully.
201	Created	A POST request or PUT request succeeded, creating a new resource, such as a web page.
202	Accepted	The server has received the request but not yet acted on it.
204	No Content	The server has no content to send for the request but is returning the headers in case they are useful.
205	Reset Content	The server instructs the user agent to reset the document that sent the request.
206	Partial Content	The server is returning a response to a Range header that requests only part of a resource.
Redirection Messages
300	Multiple Choices	The server has multiple resources for the request, and the client needs to pick one.
301	Moved Permanently	The requested URL has been permanently changed to the new URL the server is returning.
302	Found	The server has found the requested resource at a different URL, but the client should continue to use the original URL because the change is supposedly temporary.
303	See Other	The server is directing the client to send a GET request to a different URL.
307	Temporary Redirect	Same as for 302, but the client must use the same HTTP method, such as POST, for the new request.
308	Permanent Redirect	Same as for 301, but the client must use the same HTTP method, such as POST, for the new request.
Client Error Responses
400	Bad request	The client request is incorrectly formatted or contains deceptive routing.
401	Unauthorized	The client must authenticate itself to access the page.
403	Forbidden	The client does not have permission to access the page.
404	Not Found	The server cannot find the page the client requested. Some servers send a 404 error instead of a 403 error to obscure the fact that the page exists but the client is forbidden to access it.
426	Upgrade Required	The server refuses the request with the protocol the client used but may fulfil the request if the client upgrades to the specified protocol.
429	Too Many Requests	The server is limiting the client because the client has sent too many requests in a given time period.
451	Unavailable for Legal Reasons	The server refuses the request because it cannot legally provide the content; for example, because the content is geofenced — restricted — to a specific area that the client is outside.
Server Error Responses
500	Internal Server Error	The server has suffered an error it cannot resolve.
501	Not Implemented	The server does not accept the request method used. Servers must accept GET requests and READ requests.
502	Bad Gateway	The server attempted to relay the request to another server but received an invalid response.
503	Service Unavailable	The server cannot fulfil the request because it is overloaded or the server from which it would get the information is down.
504	Gateway Timeout	The server is acting as a gateway, relaying the client’s request to another server, but has not received a response from that server in the specified period.

Understanding Why Image File Size Is Important

If you are creating web pages you will post on the Web, you will likely want to keep file sizes down to a sensible minimum so that your web pages load quickly even when the web server hosting the site is busy and when visitors are using slower Internet connections. If you are developing pages for an internal website that all visitors will access across fast connections, file size may be less of a concern; but even so, most companies and organizations prefer to conserve bandwidth than to squander it.

HTML files and CSS files contain only text, so they have small file sizes and transfer quickly. Image files, audio files, and video files tend to be much larger and can greatly increase the amount of data a browser needs to transfer to load a web page. So you will normally want to choose compact file formats for such media files. You will also want to create files that have suitable quality for the website rather than posting the highest-quality files possible, which will have larger file sizes.

Identify the Factors Affecting Image File Size

The following factors affect image file size:

• Resolution. The larger an image’s dimensions, the more pixels the image contains, and the larger the file size. For example, an image 512 pixels wide by 384 pixels high contains 196,608 pixels; an image 1024 pixels wide by 768 pixels high contains 786,432 pixels — four times as many — because it is twice as wide and twice as high. Each pixel contains data that contributes to the file size.
• File format. Different file formats use different compression algorithms, which affect the file size. The key difference is between lossy compression, which reduces file size but also reduces image quality, and lossless compression, which preserves image quality and typically reduces file size less than lossy compression. The JPEG file format uses lossy compression, whereas the PNG file format uses lossless compression. The result is that JPEG files are typically smaller than PNG files but have lower image quality.
• Color depth. Each color requires data to represent it in the file, so the more colors an image has, the larger its file size will be.
• Compression level. Some file formats, such as JPEG, allow you to adjust the level of compression used. Greater compression delivers smaller file sizes but also usually reduces image quality.
• Image content. The more complex the image’s content, the more data is needed to represent it in the file. For example, a colorful photo of a landscape contains many colors and requires a lot of data, whereas a simple line drawing — say, a red arrow on a black background — requires relatively little data.
• Image metadata. Metadata is data describing the image, such as its GPS location, the camera’s shutter speed and aperture, and the number of colors. Metadata typically takes up only a modest amount of space.

Understanding the Most Widely Used Web Image Formats

Most images on the Web use one of the following four formats:

• JPEG. JPEG, Joint Photographic Experts Group, uses lossy compression and can deliver a massive reduction in file size. You can control the level of compression. JPEG is a good choice for photos in web pages.
• PNG. PNG, Portable Network Graphics, uses lossless compression to deliver full-quality images with a modest reduction in file size. PNG files are a reasonable choice for photos in web pages but are typically substantially larger than JPEG files of the same content.
• GIF. GIF, Graphics Interchange Format, is an older file format that has a maximum of 256 different colors. This limitation keeps down the file size, and GIF uses lossless compression to reduce it further. The color restriction makes GIF unsuitable for photos, but it is good for logos and other graphics that need only a restricted color set. GIF also enables you to create simple moving images.
• SVG. SVG, Scalable Vector Graphics, uses text in the Extensible Markup Language, XML, to describe two-dimensional images. SVG is suitable for creating images that use shapes and lines.

Most photo and graphics editors can create JPEG, PNG, and GIF files, along with various other formats. Most illustration apps can export drawings as SVG files.

Understanding the Syntax for the img Element

The img element uses a self-closing tag, which looks like this in HTML 5: <img>. In earlier versions of HTML, self-closing tags included a space and a forward slash before the closing > — for example, <img />. These older tags still work, but you no longer need to include the space and forward slash.

The img element has two required attributes:

• src. This attribute specifies the address at which the image file is located. For example, the src attribute for the following <img> tag specifies that the image file is called keyboard1.jpg and is located in the images folder:

  <img src="images/keyboard1.jpg">

• alt. This attribute specifies alternate text to display if the image file cannot be shown. For example, the src attribute for the following <img> tag specifies that the image file is called keyboard1.jpg and is located in the images folder. The alt attribute specifies the text A keyboard.

  <img src="images/keyboard1.jpg" alt="A keyboard">

As well as from the two required attributes, the <img> tag has 10 optional attributes:

• height. This attribute specifies the display height of the image in pixels. Setting the image’s height by including the height attribute in the tag does work, but it is better to use CSS to control image size.
• width. This attribute specifies the display width of the image, either in pixels or as a percentage of the available width in the browser window. As with the height attribute, including this attribute in the tag does work, but using CSS is preferable. The following example makes the image occupy 90 percent of the available width in the browser window:

  <img src="images/keyboard1.jpg" alt="A keyboard" width="90%">

• sizes. This attribute specifies different image sizes to use for different web page layouts.
• srcset. This attribute specifies a set of image files to use for different clients — for example, a smaller image for smaller screens.
• ismap. This attribute, when included, specifies that the image is an image map. See the section “Create Multiple Links from an Image” in Chapter 5 for information about image maps.
• usemap. This attribute provides the name of an image to use as an image map. See the section “Create Multiple Links from an Image” in Chapter 5 for an example of how you use this attribute.
• loading. This attribute controls how the browser loads the image. You can set loading to eager to make the browser load the image immediately, to lazy to make the browser load the image only when the part of the page containing the image comes into view on the screen, or to auto to have the browser determine whether to act eager or act lazy. Omitting the loading attribute from the <img> tag also lets the browser use its default behavior; for most browsers, the default behavior is lazy loading.

  <img src="images/keyboard1.jpg" alt="A keyboard" loading="lazy">

• longdesc. This attribute specifies a URL that provides a detailed description of the image.
• referrerpolicy. This attribute tells the browser which referrer information to use when retrieving an image. You can set this attribute to no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, or unsafe-URL.
• crossorigin. This attribute enables the browser to use images from third-party sites that permit cross-origin access.

Understanding the Different Types of Links

HTML supports various kinds of links, enabling you to use links in different ways in your web pages.

The most straightforward type of link is a text-based link. By default, text-based links appear in blue font with an underline (A), but you can format them differently if you so choose. After you click a text hyperlink, its default formatting changes to scarlet font with an underline, enabling you to see which links you have followed before.

Image hyperlinks use an image as the display component for the link. Other object hyperlinks use other objects — for example, a shape — as the display component.

When you move the pointer over a link, it changes from the standard arrow pointer to the link pointer (B), an upward-pointing right hand with the forefinger extended, facing away from you. This change of pointers enables you to recognize links easily no matter what form they take.

Identify the Components of a Link

A text link has the following components, as shown in the nearby illustration.

• The anchor element creates the link. The anchor element uses an opening <a> tag and a closing </a> tag.

  

• The <a> tag marks the start of the anchor. The href attribute, discussed next, appears within the <a> tag.
• The href attribute contains the hyperlink reference information, the destination to which the link points. After href=, the link’s destination appears inside double quotation marks.
• The link text appears between the <a> tag and the </a> tag.
• The </a> tag ends the anchor.

Distinguish Absolute Links and Relative Links and Choose Between Them

HTML enables you to use either absolute links or relative links.

An absolute link includes the full address of the link’s destination, including the prefix that tells the browser what protocol to use. For example, the following link is absolute:

href="https://www.kybz.info/index.html"

The URL specifies the protocol to use, HTTPS, and it gives the full path to the file containing the web page — in this case, the file index.html.

A relative link includes only the part of the address needed to get to the destination from the page that contains the link. If the destination is a web page in the same folder as the page that contains the link, the relative link can contain only the destination page’s filename — for example:

href="page2.html"

If the destination file is in a different folder, the relative link must provide enough information to reach that folder. For example, the following link goes to a file called logo14.png located in the images folder on the same website:

href="images/logo14.png"

You will typically want to use relative links between pages on your own website, because the links will continue to work when you move your website from one location to another. For example, you might develop your website on your local computer and then move it to your web host, uploading the folders so that the relative positions of the pages remain the same.

Use absolute links when linking from your web pages to external websites. Because the addresses are complete, they are unaffected by your moving the website from your local computer to your web host.

Numbered Lists

In HTML, a numbered list is called an ordered list, because the items appear in a specific order, such as a list of numbered steps to accomplish a task.

To start a numbered list, you enter the opening <ol> tag; to end the list, you enter the closing </ol> tag:

<ol>
</ol>

Between these tags, you enter each list item, beginning with the opening <li> tag and ending with the closing </li> tag, with the item’s text between them. For example, the following code produces the three-step numbered list shown in the nearby illustration.

<ol>
<li>Unplug your computer from power.</li>
<li>Connect the keyboard to the USB port.</li>
<li>Connect the computer to power again.</li>
</ol>

The browser automatically displays the numbers for the items, starting with 1, unless you specify a different number by including the start attribute in the <ol> tag — for example, <ol start="5">. You can specify a different numbering type, such as a-b-c or i-ii-iii, by including the type attribute in the <ol> tag — for example, <ol type="a"> for lowercase a-b-c numbering.

Bulleted Lists

In HTML, a bulleted list is called an unordered list, since the items have no numerical order.

To start a bulleted list, you enter the opening <ul> tag; to end the list, you enter the closing </ul> tag:

<ul>
</ul>

Between these tags, you enter each list item, again beginning with the opening <li> tag and ending with the closing </li> tag, with the item’s text between them. For example, the following code creates the four-bullet list shown in the nearby illustration:

<ul>
<li>Clicky</li>
<li>Tactile</li>
<li>Linear</li>
<li>Optical</li>
</ul>

The browser automatically displays the bullet point for each item, using a default bullet, a solid circle. You can specify a different bullet by including the type attribute in the <ul> tag — for example, type="square" for filled-in squares.

Definition Lists

A definition list is a list that consists of pairs of items, such as a term and its definition in a glossary or lexicon.

To start a definition list, you enter the opening <dl> tag; to end the list, you enter the closing </dl> tag:

<dl>
</dl>

Between these tags, you enter each pair of terms — first the “definition term” — the term to be defined — between an opening <dt> tag and a closing </dt> tag and second the “definition description” between an opening <dd> tag and a closing </dd> tag. For example, the following code creates the two-term list shown in the nearby illustration:

<dl>
<dt>tenkey</dt>
<dd>The section of a computer keyboard that contains the number keys and arrow keys</dd>
<dt>tenkeyless</dt>
<dd>Of a keyboard, not having a tenkey section</dd>
</dl>

Nested Lists

When you need a complex list, you can nest any of the three kinds of list within any other list. For example, the following code creates the numbered list with bulleted subitems shown in the nearby illustration.

<ol>
<li>Unplug your computer from power.</li>
<li>Connect the keyboard to the USB port.
<ul type="square">
<li>Use a USB adapter if necessary.</li>
<li>Use a USB port on the computer if possible.</li>
</ul>
</li>
<li>Connect the computer to power again.</li>
</ol>

Identify the Components of a Table

A table consists of four main elements, identified in the nearby illustration and explained in the following list:

• Row. A row is a horizontal line of cells. The top row of the table is often a header row.
• Cell. A cell is one of the rectangles that makes up a table. A cell is formed by the intersection of a row and a column.
• Column. A column is a vertical stack of cells.
• Border. The border is the rectangle around the outside of each cell and around the outside of the table. The border is invisible unless you format it to be visible.

Understanding the HTML Elements for a Table

To create a table, you place a table element on the page. The table element consists of an opening <table> tag and a closing </table> tag, like this:

<table>
</table>

The table element acts as a container for the table’s rows. To create a row, you place a tr element inside the table element, like this:

<table>
<tr>
</tr>
</table>

A tr element contains the cells that appear in that row. These cells can be either table headers, cells you would typically use for displaying information such as titles, or table data, regular cells for nontitle text or other content.

Table headers use the th element, which has an opening <th> tag and a closing </th> tag. The following example contains just a two-cell row of table headers:

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>

Table data cells use the td element, which has an opening <td> tag and a closing </td> tag. Continuing the example, the following code produces a two-row, two-column table with one row of table headers and one row of table data:

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

Displayed in a browser, this table appears without a border by default, which makes it hard to determine the cell boundaries and the extent of the table, as you can see in the nearby illustration.

Adding a border to the <table> tag, as in the following example, places a border around the outside of the table, as shown nearby. Normally, you would use internal or external CSS to apply suitable borders to the table, as discussed in Chapter 9; but this example uses an inline style for convenience:

<table style="border: 1px solid black;">

Adding a border to each of the table header cells and table data cells, as in the following example, enables you to see where the cells end:

<table style="border: 1px solid black;">
<tr>
<th style="border: 1px solid blue;">Header 1</th>
<th style="border: 1px solid blue;">Header 2</th>
</tr>
<tr>
<td style="border: 1px solid blue;">Data 1</td>
<td style="border: 1px solid blue;">Data 2</td>
</tr>
</table>

Create Spanner Cells

In your HTML file, create the table as usual by entering an opening <table> tag and a closing </table> tag. The example table shown here has a 3-pixel solid purple border, 10 pixels of cell padding, and 4 pixels of cell spacing.

<table style="border:3px solid purple; cellpadding="10" cellspacing="4">
</table>

Between the <table> tag and the </table> tags, create the rows and cells using the techniques explained earlier in this chapter. When you reach the cell where you want to create a spanner cell, include the rowspan attribute or the colspan attribute, as appropriate, and assign the number of columns to it. For example, the second statement creates a three-row spanner cell (A), whereas the third statement and fourth statement each create a two-column spanner cell (B, C).

<tr>
<th rowspan="3" style="border:1px solid blue">Span Three Rows</th>
<th colspan="2" style="border:1px solid blue">Span Two Columns</th>
<th colspan="2" style="border:1px solid blue">Span More Columns</th>
</tr>

This row is five cells wide — one cell for the row spanner plus two cells for each of the two column spanners. Each other row in the table must contain a total of five cells, but the row spanner cell occupies the first cell in the second row and third row, so each of these rows needs only four cells defined:

<tr>
<td style="border:1px solid blue"></td>
<td style="border:1px solid blue"></td>
<td style="border:1px solid blue"></td>
<td style="border:1px solid blue"></td>
</tr>

The final row of the table needs five cells defined.

Set a Background Color for a Table

In the HTML file, create the table as usual by entering an opening <table> tag and a closing </table> tag. In the <table> tag, include the style attribute, and specify background-color and the color (A). You can use either the color name, such as blanched-almond, or the hexadecimal code, such as #33333 for the Gray20 light gray.

<table style="background-color:blanchedalmond;border:3px solid purple;" cellpadding="10" cellspacing="4">

Set a Background Image for a Table

To set a background image, include the style attribute in the opening <table> tag and specify background-image followed by URL and the path to the image file, delimited by single quotes, inside parentheses. For example, the following <table> tag includes the image named realforce.jpeg stored in the images folder:

<table style="background-image:url('images/realforce.jpeg'); background-repeat:no-repeat; background-size:cover;border: 3px solid black">

As you can see in the example, you can set various parameters to control how the image file appears. Setting background-repeat to no-repeat tells the browser to display the image without tiling it, and setting background-size to cover makes the image the right size to occupy all the space in the table.

The CSS Cascade

You can use CSS in three ways in your web pages: as inline CSS, as internal CSS, and as external CSS. The following subsections explain each type.

The nearby diagram illustrates how CSS “cascades” down the three levels of CSS — inline CSS at the top, internal CSS next, and external CSS third — to the base, where the browser settings implemented by the user are. Style information set by inline CSS flows down from the top level to the middle level, overriding any style information set by internal CSS. In turn, style information set by internal CSS flows down from the middle level to the bottom level, overriding any style information set by external CSS. Again in turn, the external CSS overrides the user’s browser settings.

Inline CSS

Inline CSS is style formatting that you define directly in an HTML element by including the style attribute in the element’s opening tag and specifying the formatting you want. You have used inline CSS in some of the examples earlier in the book. For example, the following statement includes the style attribute in the opening <table> tag and assigns border formatting to it, producing a border that is 1 pixel wide, a solid line, and blue:

<table style="border:1px solid blue">

As you can see, the style definition goes within double quotation marks. If you need to specify more than one type of formatting in the same style definition, you use semicolons to separate the style type. For example, the following statement adds the border-collapse property, setting it to collapse, which collapses the table and cell borders to a single line instead of having them appear as separate lines:

<table style="border:1px solid blue;border-collapse:collapse">

Internal CSS

Internal CSS is style formatting that you define within the HTML file but not within a particular element. Internal CSS applies to the HTML file as a whole rather than to a particular element.

To create an internal style sheet, you place a style element in the head section of the web page and define the styles within the style element. The following example shows an internal style sheet containing a definition for the h1 style and the p style:

<head>
<title>Internal Mechanisms</title>
<style>
h1 {
font-size: 28px;
color:blueviolet;
text-align: center;
}

p {
color:black;
font-size: 14px;
line-height: 1.5;
}
</style>
</head>

External CSS

External CSS is a style sheet that you create in a separate file and then link to the HTML documents to which you want to apply it. An external CSS file has the .css file extension.

How Should You Use Inline, Internal, and External CSS?

To format your HTML files efficiently, use external CSS to apply as much formatting as possible. The advantage of external CSS is that, when you need to update the formatting of your HTML documents, you need change only the CSS file rather than having to change the individual document files. The documents automatically pick up the changes you make to the CSS file.

Using external CSS also enables you to separate the task of creating the CSS from the task of creating the HTML. For example, your company might have a designer create the external CSS to implement the company’s design standards while you and your developer colleagues create the HTML pages.

Use internal CSS when you need to override your external CSS formatting throughout a document. Use inline CSS when you need to override either your internal CSS formatting or your external CSS formatting for a single element in the document.

Element Selectors

An element selector enables you to select all instances of a particular HTML element in a web page. For example, if you want to apply a style to all the paragraph elements on a page, you can use the p selector. To specify an element selector, you simply use the name of the HTML element. For example, the following selector selects the h1 element and applies the aliceblue color:

h1 {
color: aliceblue;
}

Class Selectors

A class selector allows you to target elements that have a particular class attribute. For example, if your HTML file contains elements with the class button, you can use that class to target those elements. To specify a class selector, you use the name of the class, preceded by a period, such as .button. The following example selects the .button class and applies the bisque color:

.button{
color: bisque;
}

To work with class selectors, you may need to create a suitable class. See the subsection “Create a Class of Items in the HTML File,” later in this chapter, for instructions on creating a class.

ID Selectors

An ID selector lets you target an element that has a unique ID attribute. To specify an ID selector, you use the ID name, preceded by #. For example, if you have assigned the ID keynote to a particular element, you can target that element by using the ID selector #keynote. The following example selects the keynote ID and applies the chartreuse color:

#keynote{
color: chartreuse;
}