Skip to content

Latest commit

 

History

History
64 lines (42 loc) · 3.33 KB

0.2-web-browsers.md

File metadata and controls

64 lines (42 loc) · 3.33 KB
layout
title description tableOfContents outline pagination
visible
visible
visible
visible
visible

0.2: Web Browsers

Learning Objectives

By the end of this lesson, you should be able to:

  • Explain what a web browser is in your own words.
  • Explain what role browsers play in this course, and why we use them.
  • Make simple edits to an HTML file and see those changes reflected in your browser.

What is a Web browser?

A web browser is a program used to view and interact with web pages. A web browser is a purpose-built application; just like Windows Media Player or iTunes are built to handle audio or video files, web browsers are built to handle HTML and related files.

A web browser is used to browse for files on the web. If we abstract "the web" as just computers connected together, a browser fundamentally browses files on computers. You can browse files on your own computer by typing C:// or file:// in the browser navigation bar for Windows and MacOS, respectively.

When you visit YouTube to watch a video, you are browsing to a connected computer which has the video you want saved into memory.

Why learn about web browsers?

In Coding Basics we will use browsers as a learning tool to visualise inputs and outputs of our code through web pages. In general, web browsers are not necessary for writing and executing code.

HTML

We will very briefly touch on HTML and what how web browsers process them, and dive deeper into HTML in Module 5.

HTML stands for HyperText Markup Langauge. An HTML file is simply a text file, you can open HTML files with notepad or other simple text-processing applications. Markup means that the text is presented to the user as more than just plain text: it involves structure and formatting. Almost all websites are rendered using HTML. Browsers were invented to download and render HTML on computers. HTML is not a programming language, but it can easily work with JavaScript, which is a programming language.

The programs we will build in Coding Basics will rely on HTML to accept inputs and visualise outputs. The programs we will build will be written in JavaScript.

Exercises

Run Starter Code in CodeSandbox

  1. Refer toinitial-setup.md if you have not set up your CodeSandbox environment.
  2. You should see a list of folders, index.html , script.js, and styles.css .
  3. Click on index.html and scroll down to line 63 . Edit (Basics!) to something else. Saving the file with trigger Hot-Reload, and will refresh the page in the browser automatically.
  4. Change the text of the button on line 82.

Open a HTML File

  1. Right-click on this webpage and save it as a HTML file somewhere on your computer.
  2. Open up the saved HTML file using a web browser. What do you see?
    1. You can also use your web browser to browse to the file by typing C:// for Windows or file:// for MacOS in your browser's address bar, and then navigating to the saved file. ``

Questions

  1. When you click "Next" to navigate to the following page, what is the input? What instructions are you giving the Web Browser? What is the output?