Website and Webpage Basics

---

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.

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: