Skip to content

Week 1 Learn & Practice - Intro

Textbook

  • Chapter 1: Getting Started in Web Design
  • Chapter 2: How the Web Works

The Beginning

Tim Berners

Tim Berners-Lee, a British scientist at CERN, invented the World Wide Web (WWW) in 1989. The web was initially conceived and developed to meet the demand for automatic information-sharing between scientists in universities and institutes worldwide.

How the Internet Works

The client requests information from a server using a browser (Edge, Chrome, Firefox, and Safari). The browser pushes the request to the server. The server then sends a response back to the client's browser.

The basic process of how the Internet works, focusing on the client-server model. On the left side, there is a client setup featuring a desktop computer with a monitor displaying Google's search page, accompanied by a CPU tower, keyboard, and mouse. An arrow labeled "Request IP Address" points from the client to the server on the right side, indicating the direction of the initial request. The server side is depicted with multiple server racks, suggesting a data center. Arrows labeled "Response Source Code" point back to the client, splitting into three lines that connect to boxes labeled "HTML," "CSS," and "JavaScript," representing the types of files sent back as a response from the server to the client.

The response source code mainly includes HTML, CSS, and JavaScript. There are other languages and formats, but these are the predominant ones. You will hear us talk about Client Side versus Server Side. The Client-Side uses Front End Development. The Server Side uses Back End Development. A front-end developer deals with the website from the client's point of view (the interface for the end-user), where the back-end developer deals with the code that runs on the server.

The Trinity of Web Development

trinity of web development

In this course, we will focus on the front-end, which means using HTML, CSS, and JavaScript. These three components make up the trinity of front-end web development.

  • HyperText Markup Language
  • Builds the structure of a website
  • Like a frame of a house
  • Cascading Style Sheet
  • Builds the presentation of a website
  • Like the decoration of a house
  • Builds the behavior and interactivity of a website
  • Like the appliances or working parts of a house
  • Not covered in this course

HTML Basics

As mentioned above, elements describe the type of content displayed on a webpage. For example, if I wanted to display a paragraph, I would need to use a paragraph element (written as <p> </p>). 

<p>I drink copious amounts of coffee.</p>

The <p> and </p> are tags surrounding the content. When this is rendered to a webpage, it will display as a paragraph. The opening tag and the closing tag are describing the content between them. A webpage consists of many HTML elements which make up the entire HTML document. This document must adhere to a specific format and structure to work correctly.

element anatomy

tag anatomy

Duckett, J. (2011). Chapter 1: Structure. In HTML & CSS design: Design and build websites (pp. 23-24). Indianapolis: John Wiley & sons.

HTML Structure

html structure

The <DOCTYPE>, <html>, <head>, <title>, and <body> elements will appear in every HTML document. The content inside the <body> will change depending on what you want to display in the browser. In the above example, the browser will display a level one heading <h1>, a paragraph <p>, a level two heading <h2>, and a second paragraph <p>.

Write Your First HTML

Our Text Editor: Visual Studio Code

We will begin by writing some HTML. Don't worry about understanding what it all means; we will get to that soon! To write HTML, we need to use a text editor. We will be using Visual Studio Code (VS Code) for this class, which is already installed on the Madison College computers. You can install this at home on PC, Mac, or Linux by going to (https://code.visualstudio.com/download and following the download instructions.

Build the Directory Structure

  1. If not already done, create a folder: Web Development on your hard drive or OneDrive for this class.
  2. Open the VS Code text editor on your computer
  3. If you do not see “Open Folder” in the left side panel of VS Code, select File > Open Workspace from Folder and Select the Web Development folder you just created. If you are asked to save your workspace configuration as a file, select “Save” if you plan to use the same settings and folder again.

  4. Next to Web Development, select add Folder (folder icon w/ plus on it)

    new folder

  5. Name the folder demos to store all your practice work

  6. Select the demos folder, then select the add file option next to Web Development (file icon w/ plus)

    create file

  7. This time, we will create a folder and a file at the same time by typing week01Demo/demo.html

    demo html folder

    You should now see a folder structure in your explorer menu and an empty html page on the main screen to the left.

    folder structure

Write HTML Markup

  1. Type or copy/paste the HTML markup below into your demo.html file and save your work.
<!DOCTYPE html>

<html>

  <head>
   <title>Webpage Title</title>
  </head>

  <body>
   <h1>This is a Main Heading</h1>
   <p>This text might be an introduction to the homepage</p>

   <h2>This is the sub-heading</h2>
   <p>Another paragraph of text related to the sub-heading</p>
  </body>

</html>

View the HTML in the Browser

  1. Open Chrome

  2. Open your HTML file:

    • Either drag and drop the demo.html file into the browser window or
    • press CTRL + O (on Windows) and select the demo.html file.
    • You should see something like the following in your browser:

    open html file in browser

Edit the HTML

  1. Change some of the content in the HTML Document. For example, change the text between the <h1> and </h1> tags to say Hello World!
  2. View your change by saving your HTML document and refreshing your browser (shortcut F5). Do you see your change?

Analyze the Web Address

  1. Review the website address in the browser. It's not really a web address; it's the file path to the folder for demos!

Analyze the Whitespace

  1. Look at all the whitespace in the HTML Document (in VS Code). Do the spaces and newlines have any effect on how the page is displayed in the browser?

Self-Closing Elements

Each element we have typed has an opening and closing tag. However, there are also "self-closing" or "empty" elements. These elements have no closing tag; instead, they close themselves.

  1. After the first paragraph, type this element <hr>.

  2. View the change in the browser by saving the document and refreshing (F5) your browser.

    • This is a horizontal rule; it places a line in the browser.
    • This element has no content as it just writes a line to the webpage. We will see more examples of these kinds of elements later.

    NOTE: you may see these elements with a forward slash <hr/>. This is also acceptable in this class.

Congrats! You just made your first HTML page! 🥳

The World Wide Web

We already learned that one of the components we need is a server. For websites, we need a Web Server or HTTP Server. This just simply means that the server contains special software that handles an HTTP or HTTPS protocol. Servers are just computers whose job is to "serve up" documents. In our case, a web document.

IP Addresses

Everything connected to the Internet is assigned an IP (Internet Protocol) address. These are long numbers that give the address to a server to find the documents it needs to deliver or "serve up."

Domain Name

Since an IP address is a long number that we don't want to memorize, each IP Address is assigned a domain name. For example, instead of remembering the IP address of 199.27.145.65, we just type in the web address of www.oreilly.com. The oreilly.com is the domain name that is linked to the IP address.

URL

A URL or Uniform Resource Locator is an address to every resource on the web. It contains many parts that have a specific purpose.

url anatomy

Protocol

http:// indicates to the server that we are using the HTTP protocol to access a web address. This could also be HTTPS, which is a secure protocol. HTTPS should be used when sending personal information over the web, like in a form.

Domain Name

The name of the website. It is linked to an IP Address once it reaches the server.

Absolute Path

The path through the directory structure on the server to the requested resource.

Try VS Code - Live Preview

Remember in the demo above when you looked at the web address, or rather, the lack of one? This was because we are not using a server. However, VS Code has a plugin that we can use to simulate using a server for our web pages.

  1. With the week01Demo folder still open in VS Code, select the Live Preview button on the far-right side

    live preview in VS code

  2. This is a preview of our webpage, we can also preview this in a browser by selecting the menu item, and Open In Browser

    open browser in VS code

  3. Make a text change to the demo.html file and notice that the page automatically updates for you even if you haven’t saved your changes yet!

Default Files

There is a particular file name that servers recognize as the default document to open. This is an index.html file. This is known as the index page and is typically the name of the homepage.

  1. Rename the demo.html file to index.html. To do this, right-click on the file in VS Code and select Rename

❗ All website homepage files are named index.html so all websites have a default landing page if a URL doesn’t specify.