your headline. When you find it, double-click the headline text.
This allows you to edit the headline. (See Figure 2-3.)
5. Insert your name in the headline and press Enter.
Your name now appears on the actual web page. (See Figure 2-4.) Enjoy your newfound fame!
FIGURE 2-1: Right-click a headline and select Inspect Element from the menu that appears.
FIGURE 2-2: The blue highlighted code is used to create the web page headline.
FIGURE 2-3: Double-click the headline text to edit it with your own headline.
FIGURE 2-4: You successfully changed the headline of a major news website.
If you successfully completed the preceding steps and changed the original headline, it’s time for your 15 minutes of fame to come to an end. Reload the web page, and the original headline reappears. What just happened? Did your changes appear to everyone visiting the web page? And why did your edited headline disappear?
To answer these questions, you first need to understand how the Internet delivers web pages to your computer.
Understanding how the World Wide Web works
After you type a URL, such as huffingtonpost.com, into your browser, the following steps happen behind the scenes in the seconds before your page loads (see Figure 2-5):
1. Your computer sends your request for the web page to a router. The router distributes Internet access throughout your home or workplace.
2. The router passes your request on to your Internet service provider (ISP).
In the United States, your ISP is a company like Comcast, Time Warner, AT&T, or Verizon.
3. Your ISP then converts the words and characters in your URL – “huffingtonpost.com,” in my example – into a numerical address called the Internet Protocol address (or, more commonly, IP address).
An IP address is a set of four numbers separated by periods (such as 192.168.1.1). Just like your physical address, this number is unique, and every computer has one. Your ISP has a digital phone book, similar to a physical phonebook, called a domain name server that’s used to convert text URLs into IP addresses.
4. With the IP address located, your ISP knows which server on the Internet to forward your request to, and your personal IP address is included in this request.
5. The website server receives your request and sends a copy of the web page code to your computer for your browser to display.
6. Your web browser renders the code onto the screen.
FIGURE 2-5: Steps followed to deliver a website to your browser.
When you edited the website code using the Developer Tools, you modified only the copy of the website code that exists on your computer, so only you could see the change. When you reloaded the page, you started Steps 1 through 6 again, and retrieved a fresh copy of the code from the server, overwriting any changes you made on your computer.
Watching out for your front end and back end
Now that you know how your browser accesses websites, let us dive deeper into the way the actual website is constructed. As shown in Figure 2-6, the code for websites, and for programs in general, can be divided into four categories, according to the code’s function:
❯❯ Appearance: Appearance is the visible part of the website, including content layout and any applied styling, such as font size, font typeface, and image size. This category is called the front end and is created using languages like HTML, CSS, and JavaScript.
❯❯ Logic: Logic determines what content to show and when. For example, a New Yorker accessing a news website should see New York weather, whereas Chicagoans accessing the same site should see Chicago weather. This category is part of the group called the back end and is created using languages like Ruby, Python, and PHP. These back end languages can modify the HTML, CSS, and JavaScript that is displayed to the user.
❯❯ Storage: Storage saves any data generated by the site and its users. User-generated content, preferences, and profile data must be stored for retrieval later. This category is part of the back end and is stored in databases like MongoDB and MySQL.
❯❯ Infrastructure: Infrastructure delivers the website from the server to you, the client machine. When the infrastructure is properly configured, no one notices it, but it can become noticeable when a website becomes unavailable because of high traffic from events like presidential elections, the Super Bowl, and natural disasters.
FIGURE 2-6: Every website is made up of four different parts.
Usually, website developers specialize in one or at most two of these categories. For example, an engineer might really understand the front end and logic languages or specialize only in databases. Website developers have strengths and specializations, and outside these areas their expertise is limited, much in the same way that Jerry Seinfeld, a terrific comedy writer, would likely make a terrible romance novelist.
