Teach Yourself VISUALLY HTML and CSS (eBook)

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...