HTML Quiz¶

Introduction¶

You have (hopefully) already completed the introductory quizzes in the previous section. Here are a few more questions to test your knowledge on HTML before actually creating your first HTML document.

You can search answers to the questions from W3Schools or MDN.

Formatting text¶

See: https://www.w3schools.com/html/html_formatting.asp

Text editor¶

The course staff recommends using Visual Studio Code. It is a widely used free and open-source text editor. You can extend the basic functionalities by installing extensions.

You should now install VS Code from this link. See docs for help with getting started.

There are two possible ways of viewing HTML files. First one is to open the file from file browser using a browser. The other (and recommended) one is to install extensions for VS Code.

Open up the Extensions tab from the left side of the VS Code. Familiarize yourself with the Debugger of VS Code tool, Run tab.

Once you’ve installed VS Code and extensions create a new file index.html and paste the following content to it:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Hello World page</title>

</head>

<body>

<h1>Hello World!</h1>

</body>
</html>

With file still open in your editor press F5 to start debugging and select Chrome. The continuation seem to depend on what file happens to be open. If JavaScript file is open VSCode will open a launch.json file to your editor. Copy and paste following to the launch.json:

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch index.html",
      "type": "chrome",
      "request": "launch",
      "file": "${workspaceFolder}/index.html"
    }
  ]
}

Selecting Launch index.html should open up Chrome and load your index.html.

Attention

Following instruction should work on Windows. If you have Chromium on Linux you’ll have to define the path to your installation to launch.json.

Find installation path by typing which chromium. Add following line to each configuration "runtimeExecutable": "INSTALLATION PATH". Remember to write valid JSON. For example:

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch index.html",
      "type": "chrome",
      "request": "launch",
      "file": "${workspaceFolder}/index.html",
      "runtimeExecutable": "/snap/bin/chromium"
    }
  ]
}

Launching index.html¶

Once you have saved the launch.json file (if needed) and selected “Launch Chrome”, the Chrome browser should open and load the index.html file.

Opening with Live Server¶

In the editor window, right-click to open the context menu. Select “Open with Live Server”. The editable page will open in your browser.

Operating System-Specific Instructions¶

Windows Users: The instructions should work as-is.

Linux Users: If you are using the Chromium browser, you may need to specify its installation path in the launch.json file.

Finding the Chromium installation path:
1. Open a terminal.
2. Run the following command:
which chromium
Adding the installation path to launch.json:
1. Add the runtimeExecutable setting inside the configuration section of launch.json.
2. Ensure you use valid JSON syntax.

Example:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch index.html",
      "type": "chrome",
      "request": "launch",
      "file": "${workspaceFolder}/index.html",
      "runtimeExecutable": "/snap/bin/chromium"
    }
  ]
}

TESTING AREA for teachers - real service at plus.tuni.fi