Week 1 Learn & Practice - Intro
Textbook
- Chapter 1: Getting Started in Web Design
- Chapter 2: How the Web Works
The Beginning
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 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
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.
Duckett, J. (2011). Chapter 1: Structure. In HTML & CSS design: Design and build websites (pp. 23-24). Indianapolis: John Wiley & sons.
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
- If not already done, create a folder: Web Development on your hard drive or OneDrive for this class.
- Open the VS Code text editor on your computer
- 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.
-
Next to Web Development, select add Folder (folder icon w/ plus on it)
-
Name the folder demos to store all your practice work
-
Select the demos folder, then select the add file option next to Web Development (file icon w/ plus)
-
This time, we will create a folder and a file at the same time by typing week01Demo/demo.html
You should now see a folder structure in your explorer menu and an empty html page on the main screen to the left.
Write HTML Markup
- 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
- Open Chrome
-
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:
Edit the HTML
- Change some of the content in the HTML Document. For example, change the text between the
<h1>
and</h1>
tags to say Hello World! - View your change by saving your HTML document and refreshing your browser (shortcut F5). Do you see your change?
Analyze the Web Address
- 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
- 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.
- After the first paragraph, type this element
<hr>
. -
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.
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.
-
With the week01Demo folder still open in VS Code, select the Live Preview button on the far-right side
-
This is a preview of our webpage, we can also preview this in a browser by selecting the menu item, and Open In Browser
-
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.
- 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.