First dive into HTML¶

Introduction¶

In these short exercises, we will learn the very basics of HTML. It might sound a bit scary if you have no or very little programming experience but writing HTML is not actually programming but rather writing markup!

We’re going to provide links to all the necessary resources and information about the exercises. You’ll just need to first read information behind the link and then answer to a short quiz.

Exercises¶

Formatting text¶

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

Text editor¶

The course staff recommends using Visual Studio Code. It 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"
    }
  ]
}

First dive into HTML¶

Introduction¶

Exercises¶

Headings¶

Paragraphs¶

Formatting text¶

Text editor¶