CHAPTER 1
Getting Ready to Create Websites
In this chapter, you get ready to create your website or websites. You learn the essentials of how the Web works and the technologies that power it, plan your website, and install the apps you will need to create the website. You also get a domain name and web hosting if you do not already have them.
Grasp How the Web Works
Understanding HTML, CSS, and Responsive Web Design
Understanding Static and Dynamic Web Pages
What Is a Responsive Website?
Understanding Tools for Creating Web Pages
Prepare to Create Your Website
Install Visual Studio Code
Meet and Configure Visual Studio Code
Install GIMP
Install the Major Browsers
Create a Folder Structure for Your Website
Grasp How the Web Works
The World Wide Web, nowadays usually just called the Web, consists of a vast number of websites accessible through the Internet using a web browser. Each website contains one or more web pages - usually, many more. Each web page is identified by a unique address called a Uniform Resource Locator, or URL. To request a web page, the user enters its URL in a web browser app, either by typing the URL or by clicking a link. The web server hosting the website transmits the requested page to the browser, which displays the contents for the user to view.
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.
Understanding HTML, CSS, and Responsive Web Design
Before you start creating pages for your website, you will likely find it helpful to understand the essentials of HTML and CSS, the two languages with which you will be working throughout this book. This section introduces you to HTML and CSS. It also gives you an executive overview of responsive web design, an approach intended to make websites equally accessible by different types of devices with different screen sizes and resolutions.
HTML standards and CSS standards are developed and maintained by the World Wide Web Consortium, W3C, with contributions from many companies and organizations, including the makers of the major browsers.
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
codes:
This is a paragraph of regular text.
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...
