# Hello World! (in HTML)

## The Task

Create a file called `index.html` that has the very basic [structure of an HTML](#the-structure-of-html) file. The title should be "My First Web Page!" (without quotes) and the body should contain "Hello World!" (without quotes). Do it using only a plain text editor (leafpad, notepad, etc...). Remember to save the file in your editor before you refresh the browser.

![](https://1200419583-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LKbpNQDFNJap9OTDSt6%2F-L_IPDlMr5J85ZzuS5ou%2F-L_IiFPFz_Jiv05JG92z%2Fimage.png?alt=media\&token=95cc5008-b25a-47f7-a2c9-60fa432405dd)

**Confused?** Read on. **Ahead of the game?** There is [a second task](#a-second-simple-task) below, so ***keep reading***.

It is important to know that Word and Google Docs are not *plain text* editors. They have formatting. Notepad in Windows is a great example of a plain text editor - you cannot format the text, create headings, etc. You can only type.

### What you need to know

HTML is [**not** a programming language](https://ischool.syr.edu/infospace/2012/04/05/why-html-is-not-a-programming-language/). It is a ***markup*** language. That means it describes how information will **look** or be presented through an application that can interpret it (a web browser).

**H**yper**t**ext **M**arkup **L**anguage uses "tags" to decide how information or media will be presented. For example, this **bolded text** would be surrounded by `<strong>` and `</strong>` tags (or something similar - it has changed many times over the years).

Here is my *interactive* video on [HTML - The Very Basics](https://scrimba.com/c/crNVq6cM).\
[<img src="https://1200419583-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LKbpNQDFNJap9OTDSt6%2F-L_rgHhX9j-_XOjKYu-m%2F-L_rgjm_CS3su9UA8GBd%2FHTML-VeryBasics-Scrimba.png?alt=media&#x26;token=bb398791-abf6-4d5e-b633-ac0106237732" alt="" data-size="original"> ](https://scrimba.com/c/crNVq6cM)<-  18 minute intro to HTML (shorter version coming soon)

### What does that have to do with Hello World?

[Normal Hello World](https://en.wikipedia.org/wiki/%22Hello,_World!%22_program#History) actively "prints" Hello World to the **screen** based on a *command* in a programming language. Typically this would be to [the console](https://www.google.com/search?q=terminal+or+console\&source=lnms\&tbm=isch) or [standard output](https://www.google.com/search?tbm=isch\&q=standard+output\&oq=standard+output) (like a terminal window) but these days we want pretty output to our phone, monitor, television, or projector - anything that can display a pretty picture.

We are going to make our first attempt at displaying text in a webpage by learning the very basics of HTML. Keep in mind, this is not programming in the traditional sense - we cannot do math or react to clicks or interact (yet).

## The Structure of HTML

HTML documents have two main parts - `HEAD` and `BODY`. Similar to you as a human, your thoughts are kept private in your head but we can see you body and even put makeup and clothing on it.

A **document** is made of chunked text that might have beginning and ending `tags` to describe or provide a style to the text (like **bold** or *italics*). Here is the basic structure of an empty HTML file:

```markup
<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>
```

It is an HTML file because of the first tag, `<html>`, and lets us know when the HTML code is finished because of the ending (or closing) tag `</html>` at the very bottom. You can see it has a `<head>` which ends at `</head>` and similarly, it has a `<body>` where the actual visible content goes.

![](https://docs.google.com/drawings/d/e/2PACX-1vTblna_M3Tmbp1o2U776S0jDckRXtkEWCBvWIzXeYuXq6mF_4x0iMvhVNpdkljuEVD-YVYFj9c_CDBf/pub?w=640)

## A Second (simple) Task

Your `index.html` file is pretty boring. Let's spice it up.

There are heading tags with predefined formats for quickly creating a larger, **bold** heading. Try wrapping your `Hello World!` text with `<h1>` and `</h1>` save the file and refresh your browser. It should look bigger and bolder. There are 6 of these heading tags `<h1>` through `<h6>`. Play around with them a bit to see the differences between them.


---

# 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://cs.brash.ca/unit-2/html/hello-world-sort-of.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.
