- COMP.CS.200
- 1. HTML: basics
- 1.1 First dive into HTML
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¶
Headings¶
Paragraphs¶
Formatting text¶
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:
Open a terminal.
Run the following command:
`sh which chromium `
- Adding the installation path to `launch.json`:
Add the `runtimeExecutable` setting inside the configuration section of `launch.json`.
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"
}
]
}