You're seeing this because you're a teacher πŸ€“

🎯 Your main goal for this lesson

There are a lot of terms that we use interchangeably when referencing web technologies. Having a clear understanding of the differences between a website and webpage is the basic requirement for this lesson.

🧠 Things to keep in mind when teaching

The main activity focuses on looking at large-scope views of websites vs. webpages. Students will need time with the material to gain a deeper understanding of what a web__page__ is. Of course we'll go into more detail later, but getting a grasp of the basic structure of a webpage is critical.

πŸš€ Lesson Plan

Activity One: 15 minutes

Start class by asking students to outline the different components commonly found in an essay. Ask them why this structure is so often repeated and why it’s helpful to have for both the author and the reader. To make the conversation more abstract and to encourage them to start thinking about the web, ask them what common components are typically a part of a website or webpage?

Activity Two: 40 minutes

Briefly run through the material from this chapter. Your abbreviated introduction should just serve to set the stage and to help connect the dots between our opening activity and this main portion of class. In groups, or pairs, students will work together to create a sitemap for a site of their (or your) choice. Each group should create a visual that helps others understand how the site is organized.

Each sitemap will go up on the wall somewhere in the classroom. After the students have had enough time to audit their sites and create their maps (about 20 minutes), they'll circulate around the room and look at each other's work. While they're examining the maps, they should be looking for similarities and common patterns between the sites.

After they've seen all of the other maps, groups will sit down together and address this prompt: many sites have similar structures and pages. Why is this? Based on the pattern(s) you noticed, explain why these items are so common across the web.

After creating their written response, have groups share as you guide the discussion.

Activity Three: 10 minutes

Take the formative assessment and work towards mastery.

Website and Webpage Basics

By the end of this lesson, you'll be able to...

  • Discriminate between a website and a webpage.
  • Identify the common components found in the visible portion of a webpage.
  • Analyze the "hidden" components of a webpage to gather more information.

Websites vs. Webpages (vs. Web apps)

There's a lot of terminology in this industry that seemingly has overlap. Often times you'll hear certain phrases or words used as synonyms for each other and it can be confusing. Typically, there's only a few hard-and-fast rules about differentiating between these terms. To start this lesson we'll take a top-down approach and look at websites and webpages.

Websites

Websites are the largest scope we can expect to encounter in this course. It helps to think of a site as a book composed of a number of pages. Typically, we define a website as a group of webpages with related content, located under the same domain. The website domain is the URL you navigate to in your address bar. Websites have a broad definition in that they cover both informational sites and web apps.

Structure and Organization

Regardless of what type of website is being developed, the same basic structure and organization can typically be found. The web server for a particular website is loaded with a directory - or file structure - that contains all the needed HTML documents for the different webpages on that site.

|--index.html
|--about.html
|--contact.html

Navigation of sites works by making requests to servers for certain files. In an earlier lesson you learned about URL's. These addresses represent different files - or resources - housed on a server. When you enter a URL into the address bar, you're telling the server, "Go find the information I'm asking for and send it back to me."

If a client makes a request to the URL www.example.com the server will load the default page, called index.html. If the client requests www.example.com/about then the server will find the file called about.html and return it to the user. Specifically, this is how static sites - or collections of fixed pages of hardcoded HTML - are served.

Request example to index.html This illustration shows how a client makes a request to a static server and then renders the processed data.

While static sites are still prevalent - and what we'll build first in this course - the above method isn't the only mechanism for serving up information from websites. Later, when we talk about web apps, we'll discuss a term called routing that helps us to understand how modern servers and frameworks handle requests from clients. This enables for much more dynamic and flexible code to do some really unique things for our users.

Location

When you go to a website, like google.com, you're not actually going to google.com. We need physical addresses we can navigate to; the names - commonly referred to as domains are just representations of these longer, more complicated addresses. Google's internet protocol (IP) address is 172.217.14.206. You can paste this address into your browser's address bar and it will navigate to google.com!

Earlier you learned about MAC addresses. IP addresses are similar but are typically limited to the network of which you're a part. For example,

Webpages

Webpages are typically single documents of HTML. HTML stands for hyper-text markup language. While you are writing code, people tend to think HTML is more complicated than it really is. When people hear terms like 'web development', or 'coding', or 'programming', their minds go in lots of different directions as they try to group these things together. HTML isn't a programming language: it's a language used to display and visualize information.

Structure and Organization

At the start of class today, you were asked to think about the different elements that make up an essay. Presumably, your class's opinion was something along the lines of the structure of a five-paragraph essay:

  • Introduction/thesis
  • Body #1
  • Body #2
  • Body #3
  • Conclusion

Having a consistent format like this makes it easy for you as an author and easy for readers. The same is true in web development: having a common structure and set of components makes it quick and easy to work on different projects; it also makes it easy for clients to render your work as you intended it.

Below we have our first snippet of HTML that could comprise a webpage. There's two important things to see immediately: we have these elements called tags. The first you'll see is the <html> tag. Our document opens with this tag and closes with it in this format </html>. The opening and closing of tags is important; it tells the browser, "Everything inside of this block is a part of the <html> element."

1<html> 2 <head> 3 <title>Our First Page</title> 4 </head> 5 <body> 6 <p>Hello, World!</p> 7 </body> 8</html>

The next element you'll notice is the <head> element. Within this we'll find what's referred to as metadata. Metadata is typically descriptive information that supports or provides context to the 'real' data of the page. We can consider the page's data all the text and media that's being rendered to the client. The snippet above is just the very basic information that would provide a title in the tab at the top of your browser; there is much more metadata that needs to be loaded in for a fully functional site to assist with languages, search engines, and other features.

The last large element you'll notice is called the <body> element. Everything inside of this element is what's rendered by the client. This is the visible part of a webpage. As an example, within this page's body, the only element is a <p> paragraph tag that has some text.

As this course progresses, we'll take a deeper dive into the many elements used in writing HTML. We'll also talk about other file types that add styling and functionality to our HTML documents.

If you're curious about how to see more of a page than what your browser renders, take a look at the video below!

Web Apps

The term web app has made its way into our lexicon in the last decade. Increasingly, the web is becoming a platform for developers to create software that can run on many different types of machines. Thanks to the web's architecture, and to cloud computing power, a single codebase can be developed that will run on Windows, macOS, mobile, etc.


Previous and Next Lessons:

Clients, Servers, and Status Codes

The Modern Web