# 1.2: Web Browsers

## Learning Objectives

By the end of this lessons, 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 a HTML file and see those changes reflected in your browser.

## Introduction

{% embed url="<https://youtu.be/K7zGrnQ2XOk>" %}

## Web Browser History

The World Wide Web and web browsers were born in 1990 when Tim Berners-Lee invented a way to view HTML documents through the Internet.

![https://webfoundation.org/about/vision/history-of-the-web/](/files/-METEYvIdy8XMUhZCwAN)

## 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 Fundamentals we will use browsers as a learning tool to visualize 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 later on.

HTML stands for HyperText *Markup* Language. 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 Fundamentals will rely on HTML to accept inputs and visualize outputs. The programs we will build will be written in JavaScript.

![](https://internetingishard.netlify.app/html-markup-0761f7.562e8e23.png)

## Exercises

### Run Starter Code in Browser

1. Download a compressed ZIP file from [this link](https://github.com/rocketacademy/swe101-starter-code/archive/main.zip).
2. If you haven't already, create a `fundamentals`folder in a local folder, e.g. `Documents`.
3. Move the downloaded .zip file to the `fundamentals` folder.
4. Unzip the file - it should create a new `fundamentals-starter-code` folder. The starter code files are in this folder.
5. Open the `index.html` file in Chrome. Double click it if Chrome is your default browser. Or, you can right click to open in Chrome.

### Change HTML Text on Page

1. Change the text of the button on line `72`. Again save and refresh the page in Chrome, and notice how the button text changes.
2. Change the word `Fundamentals!` on line `62` to something else. Save the file and refresh the opened `index.html` file in Chrome. Notice how the text changes.
3. Open the `fundamentals` folder in VS Code. We can open the whole folder instead of a specific file, which will allow us to open multiple files within that folder easily. In the left sidebar of VS Code, select the file `fundamentals-starter-code/index.html` to open it. See video above for an example.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://fundamentals.rocketacademy.co/1-introduction/1.2-web-browsers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.