Chapter 1

Getting to Know HTML and CSS

IN THIS CHAPTER

Finding out a bit about what you're getting yourself into

Befriending HTML

Introducing yourself to CSS

This book is a sort of manual for using HTML and CSS. However, and this is particularly true if you're just getting started with coding web pages, if there's any part of the book that fits the old RTFM (read the freakin' manual) credo, it's this chapter. Everything you learn in this chapter acts as a kind of home base for the explorations that come later.

In this chapter, you learn the basic concepts behind HTML and CSS, get a better understanding of how they work, and get started exploring these powerful technologies.

Getting a Bird's-Eye View of the Process

You can add special codes inside a text file to specify how you want your web page to look. For example, maybe you want a particular collection of words or phrases to appear as a bulleted list. When the web browser comes to that part of the file, it dutifully renders those items as a list, bullets and all. The person browsing your page doesn't get the "render these items as a bulleted list" code; they just get the bulleted list. The web browser performs these and many other transformations behind the scenes. As long as you have the right HTML and CSS markings in the right places, the browser will render your page the way you want.

Launching a new text file

Your first step whenever you want to create a web page is to start a new text file. To do that, not surprisingly, you need to fire up your favorite text editor:

• Notepad (Windows): In Windows 11, choose Start?????All Apps?????Notepad. Notepad displays a brand-new text file automatically when you start the program. You can also fire up a new document by choosing File?????New.
• TextEdit (Mac): Click Search (the magnifying glass) in the menu bar, start typing textedit, and then click TextEdit as soon as it shows up in the search results. In the dialog box that appears, click New Document. You can launch a new text file any time you need one by choosing File?????New.
• Something else: If you have another text editor, launch it the way you normally do and create a new file.

Saving HTML files

When it's time to save your work, here are a few notes to consider:

• Use the right file extension. For garden-variety web pages, your file names must end with either the .htm or the .html file extension (for example, mypage.html).
• Use lowercase filenames without spaces. For best results, always enter your filenames using only lowercase letters and don't use spaces in your filenames. If you want to separate words in file and directory names, use an underscore (_) or a hyphen (-).
• Use the right file type. While in the Save As dialog box, you need to select the correct file type for your HTML file. How you do this depends on what program you're using. In most programs (including TextEdit), you use the File Format (or Save As Type) list to select Web Page (.html) or something similar. If you're using Notepad, use the Save As Type list to select All Files (*.*). This ensures that Notepad uses your .htm or .html extension (and not its normal .txt extension).

Edit. Save. Reload. Repeat.

Assuming that you've previously saved your HTML file as I describe in the previous section, your first task is to open the HTML file in your text editor and in your web browser:

• Text editor: Run the Open command (almost always by choosing File?????Open or by pressing Ctrl+O or ???+O) to open the HTML file you want to work with (if it's not open already, that is).
• Web browser: Run the Open command to load the same HTML file that you have open in your text editor. Finding the Open command is either trivial or tricky, depending on your operating system:
  • Windows: Whether you're using Edge, Chrome, or Firefox, press Ctrl+O to display the Open dialog box; then select the HTML file and click Open.
  • macOS: Whether you're using Safari, Chrome, or Firefox, choose File?????Open File (or press ???+O) to display the Open dialog; then select the HTML file and click Open.

With your HTML file open in both your text editor and your web browser, here's the basic cycle you use to build your pages:

1. Add some text and HTML stuff (I define what this "stuff" is in the rest of this chapter) to your file.
2. Run the editor's Save command (almost always by choosing File?????Save or by pressing Ctrl+S or ???+S) to save your work.

3. Run the web browser's Reload command. Again, how you invoke Reload depends on the operating system:

   • Windows: Whether you're using Edge, Chrome, or Firefox, press Ctrl+R to reload the page.
   • macOS: If you're using Safari or Chrome, choose View?????Reload Page (or press ???+R) to reload the page. In Firefox, press ???+R.

   The web browser reloads the page and displays whatever changes you made to the HTML file in Step 1.

4. Repeat Steps 1 through 3 as often as you like.

Getting to Know HTML

Building a web page from scratch using your bare hands may seem like a daunting task. It doesn't help that the codes you use to set up, configure, and format a web page are called the HyperText Markup Language (HTML for short), a name that could only warm the cockles of a geek's heart. Here's a mercifully brief look at each term:

• HyperText: An oblique reference to the links that are the defining characteristic of web pages
• Markup: The instructions that specify how the content of a web page should be displayed in the web browser
• Language: The set of codes that comprise all the markup possibilities for a page

But even though the name HTML is intimidating, the codes used by HTML aren't even close to being hard to learn. There are only a few of them, and in many cases they even make sense!

Working with HTML elements and tags

At its most basic, HTML is nothing more than a collection of markup codes - called elements - that specify the structure of your web page. For most of your HTML chores, you create a kind of container. What types of things can reside in this container? Mostly text, although often they will be entire chunks of the web page and even other elements.

Most HTML containers use the following generic format:

<element>content</element>

What you have here are a couple of codes that define the container for a particular HTML element. Many elements are one- or two-letter abbreviations, but sometimes they're entire words. You always surround these elements with angle brackets <>; the brackets tell the web browser that it's dealing with a chunk of HTML and not just some random text. An element surrounded by angle brackets is called a tag.

An HTML code by itself is called an element; the element surrounded by angle brackets is known as a tag.

The first of these codes - <element> - is called the start tag and it marks the opening of the container; the second of the codes - </element> - is called the end tag and it marks the closing of the container. (Note the extra slash (/) that appears in the end tag.)

In between the start and end tags, you have the content, which refers to whatever is contained in the tag. For example, suppose you want to include in your page the sentence This is a web page with something important to say, and you want to punch this up a bit by emphasizing important. In HTML, the element for emphasis is em, so you'd type your sentence like so:

This is a web page with something <em>important</em> to say.

Notice how I've surrounded the word important with <em> and </em>? All web browsers display emphasized text in italics, so that's how the word appears, as shown in Figure 1-1.

FIGURE 1-1: The sentence revised to italicize the word important.

There are tags for lots of other structures, including important text, paragraphs, headings, page titles, links, and lists. HTML is just the sum total of all these...