HTML Structure

We explored different components that make up a webpage in the last section. The rest of the worksheet will walk you through creating your own index.html page from the ground up. The index.html file is the main HTML for a web page. HTML is one of the building blocks of a web page. It defines the structure of the page and lays the foundation to then add styles and dynamic content.

In the HTML section of the worksheet, we will create a webpage together that looks like the picture below.

If you are using CodeSandbox, please skip to CoddSandbox instructions below.

This section will help guide you through the following steps:

Create your first HTML file
Add the structural content of a web page
Explore the head section and change the title of the web page
Learn how to view your progress tonight

Create the HTML file

Using the file explorer, in the "CodingAndCocktails/session1" folder you created during the tools setup, create a new folder named "html".
In VS Code, select File Open Folder... for Windows and File Open... for Mac. Navigate to and select the "CodingAndCocktails/session1/html" folder.
Create a file called index.html. In VS Code's EXPLORER pane, hover over HTML to display action buttons. Click the New File button.
In the text box that appears, name the file index.html and press Enter to save it in your "CodingAndCocktails/session1/html" folder.

Create HTML structure

VS Code should open the index.html file for you in the editor.
Copy the following code snippet and paste it into your index.html file.

index.html
```
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <title>Document</title>
   </head>
   <body>

   </body>
</html>
```
Take a look at the spacing in the file. Some tags, such as head and body indent from their parent tag, html. This means they are children of the html tag. Can you match up the start and end of the head, body, and html tags?

The meta and title tags are also children. What tag is meta and title's parent? Feel free to grab a mentor to talk out the answers to these questions. They LOVE to help and act as a soundboard!
Save the file.
Cheers! You set up the structural foundation of a web page!

HEAD section

In VS Code, change the text between the <title></title> tags. The title displays on the browser tab. Tonight we'll make a Cocktail Lounge site so change the text from "Document" to "YourName's Cocktail Lounge".
The title is in the head section. The head section contains data telling your browser more information about your page. This is also where you link to your styles and script files.
Save the file.

View your web page

Now we want to preview the index.html file in Chrome. Instead of saving and reloading the page like we did earlier, we'll use the VS Code plugin Live Server. This extension opens up the web page in your default web browser and reloads the page whenever you save files. In VS Code, start the live server by right clicking on index.html in the EXPLORER pane and selecting Open with Live Server. A browser tab will open.
If you don't have the Live Server option, take a moment to set up your workspace.

If the tab opens in another browser, copy the URL and paste it into a new tab in Chrome. The reload will automatically happen in Chrome.

If you get an access warning, click "Allow" to let Live Server serve the application.

If you are borrowing a laptop and get an access warning, please contact a member of the Coding & Cockails leadership team for access.
You won't see anything exciting on the page yet, but you should see your title displayed in the page tab.

Most of our work tonight will be inside the <body></body> tags. This is where visible page content goes.

References and helpful links

Mozilla Developer Network Head element documentation

Cloud IDE instructions

CodeSandbox instructions

We will create a new sandbox for the HTML section of the worksheet.

Navigate to your Dashboard in CodeSandbox by clicking on the Dashboard icon at the top left of the toolbar (left of File).
On the Dashboard view, click the green Create Static Sandbox button. This creates a new project with your index.html already created.
Delete all the code from the index.html so that you can follow the worksheet instructions and save your file by navigating to File Save.
You created your project and are ready to go! Follow along with Create HTML structure using CodeSandbox in place of Visual Studio Code.

HTML Page Structure