Introduction to Websites

This training will cover the basics of how websites work and a website’s various components.

What is a Website?

A website is a way of displaying information on the internet. They are made up of assets like text, images, videos, etc.

But how do they work exactly?

Clients and Servers

All computers connected to the web are called Clients and Servers. 

Clients are your typical web users’ devices, like your phone or laptop when connected to Wi-Fi. 

Servers are computers that store all the information that makes up webpages.

Clients send requests through the internet to Servers, and Servers send back responses to Clients.

Web Hosting

Let’s say you’re making a website and want to put it out on the internet. Ideally, you’d want your website accessible to the public 24/7. Unfortunately, it’s not sustainable for the average person to have their own server machine running all day and night. 

However, there are companies that own powerful web servers and are responsible for maintaining and running them. 

This is what we are talking about when we say web hosting. 

Web hosting companies offer server space for websites that you can purchase. Some examples include GoDaddy, Dreamhost, and WP Engine.

There are many types of web hosting and it is up to the developer and website owner to determine which one fits their site the best.

What is DNS?

Since there are so many computers connected to the internet, there needs to be a way to locate individual clients and servers so they can communicate with one another. The system in place for this express purpose is called the Domain Name System (DNS).

DNS is the address book for the internet. 

Every device connected to the internet has a unique string of numbers that represents their specific location on the web called an IP Address (ex: 192.0.2.1).

However, these IP Addresses aren’t very user friendly. So instead, we use web addresses or domain names like Youtube.com or Google.com. 

Domain names need to be purchased from a domain name registrar. Domain name registrars are companies that manage reserving domain names. Some examples include Google Domains or GoDaddy.

The DNS translates domain names into IP addresses so that browsers can find the correct server to send a request to.

Okay, so now the clients and servers know where to find each other. Let’s talk about how they communicate.

TCP/IP and HTTP

Data that travels over the internet follows sets of rules called Transmission Control Protocol and Internet Protocol (TCP/IP).

TCP/IP defines things like how data should be broken up, transmitted, and received at the destination. Think of these protocols as the method of transportation for information across the web. 

Another protocol used is Hypertext Transfer Protocol (HTTP). This protocol was designed for communication between web browsers and servers and transmitting documents such as HTML. Think of HTTP as the language clients and servers use when speaking to each other.

Note: You will commonly see HTTPS instead of just HTTP when visiting sites in your browser. HTTPS stands for Hypertext Transfer Protocol Secure. It is HTTP with encryption and is far more secure than HTTP.

Component Files

Component Files are the combination of code files (HTML/CSS/JS) and assets (images, documents, videos, etc.) that websites are made of. 

Websites are mostly made with three basic languages: HTML, CSS, and JavaScript. 

Hypertext Markup Language (HTML) is used to structure a site and its web content. For example, elements like headers, paragraphs, and buttons can all be defined with HTML.

Cascading Stylesheets (CSS) is code that is used to style a site. It can determine things like element background color, font, size, etc.

JavaScript is the programming language that adds functionality to a site. It is used to take care of anything interactive on a site like button and form behavior, animations, and more. 

There are many additional frameworks and libraries available that add functionality to these languages. However, if all you want is a simple working site, you can do it with just these three languages!

Databases

Sometimes websites need to store a lot of data. Think about all of the customer and inventory data that a site like Amazon would need to store. In cases like these, websites will connect to a database. 

Databases live on web servers, and websites will use special server scripting languages (like PHP or Python) to grab data they need from the databases in the form of queries. 

There are many services available that provide database solutions. Some examples include Amazon Web Services (AWS), MySQL, and Oracle. 

Note: Nowadays, there exists so much data that needs to get stored that normal databases can’t hold it all. New solutions like data warehouses and data lakes were created to deal with this. Data storage is a vast topic and rapidly developing field. If it interests you, I suggest doing some more research! There’s some pretty neat stuff out there.

The Process

Now that you know all the aspects of how a website works, let’s put it together and see what happens when you type a web address into a browser:

  1. The browser uses the DNS to convert the web address into an IP address to find the website’s server. 
  2. The browser sends a HTTP request to the server across your internet connection using TCP/IP.
  3. The server receives the request and approves it. It then sends back a copy of the website’s component files to the browser.
  4. The browser assembles the component files and displays it to the user.

Content Management Systems (CMS)

Most of the projects we do here at LAITS don’t involve building websites from scratch. We use Content Management Systems (CMS)

CMS are applications that provide a user-friendly interface for building sites. Many CMS out there (like Wix or Squarespace) don’t even require a deep understanding of programming languages.

CMS can range from very customizable and complex to very rigid. At LAITS, we use many CMS for various purposes.

Two of the more customizable CMS we commonly use at LAITS are WordPress and Grav. Each CMS has its own way of organizing its component files and data storage. For example, WordPress stores all of its post and user information in databases while Grav does not. You’ll learn more about this as you get more experience with each CMS.

More rigid CMS we use as LAITS includes Cascade and Pages. These CMS are used to provide a structured way for faculty to create pre-styled sites without the need for additional CSS/HTML.

You can think of it this way: developers who work on custom sites will most likely be using Grav or WordPress, and content editors use Cascade and Pages to create sites without the need for programming knowledge.

Congratulations!

You have completed this basic introduction on websites. There’s certainly much more to web development than what was described in this training, but it’s a start!

You now have a better understanding of what you will be building here at LAITS. 


Activity

Alright, let’s review all the cool new information you just learned!

Create a powerpoint that summarizes the following concepts in your own words. Try to keep each topic to 1-2 slides.

  1. What is a Website?
  2. Clients & Servers
  3. Web Hosting
  4. DNS
  5. TCP/IP & HTTP
  6. Component Files (HTML/CSS/JavaScript)
  7. Databases
  8. What happens when you go to a website?
  9. CMS

Feel free to use icons, images, or diagrams to better convey your points. Make sure your powerpoint is visually appealing and concise (as if you were going to present it to a class or a client).

Once you’re done, share your work on Basecamp.

This entry was posted in Misc. Bookmark the permalink.

Comments are closed.