1. Introduction to HTML and CSS exercises

Text editor

To create the files that are going to be seen in this tutorial, all you need is a simple text editor.

In Windows, the simplest is Notepad, which has the advantage of being found in all versions of Windows.

When saving the HTML code or the CSS code for the first time, you have to select two options to avoid having problems with the file.

1. The file type must be "All Files (*.*)"

   With this option, the file extension can be chosen as .html or .css instead of saving the default .txt extension, which would not work.

2. Encoding must be UTF-8

   In this way, special characters such as accents or the sign will be saved and displayed correctly.

3. To save subsequent modifications to the .html file, it is not necessary to repeat this entire process.

   Simply select from the menu File... Save or press Ctrl-G and it will save correctly.

If you want to use a more professional text editor and with more options, the Notepad++ text editor is free, free and a great option.

The advantage of using Notepad++ or another advanced text editor is that these editors do syntax highlighting and that helps a lot in checking for errors and avoiding them while writing code.

Browser display and modifications

Once the HTML file is saved, clicking on it will open it in the browser and we can see the result.

To make changes, we will have to edit the file again with the text editor. It is not possible to modify an HTML file through the browser.

To achieve this we must press the right mouse button on the file and choose the Open with... option to choose Notepad.

Another solution is to drag the HTML file onto Notepad and its content will open for editing.

Code errors

Normally the browser does not show the errors that have been made while writing the code. Sometimes it doesn't show anything if the code is wrong.

To view code errors, in the Firefox browser, select from the Tools menu... Web Developer... Inspector

A very useful set of tools will appear at the bottom of the browser to check which part of the code corresponds to the screen and vice versa.

Common mistakes

This is a small list with the most common errors. It should be reviewed before looking for other less common errors.

• A tag has not been closed properly. For example, <h1>Title<h1> is missing the slash in the second tag: </h1>
• A comment has not been closed properly.

Text editor for Linux

There are many text editors that are compatible with the Linux operating system. The default editors such as Pluma Text Editor or Gedit are used to carry out any practice in this tutorial.

It is recommended to use Gedit with syntax hightlighting to find errors more easily. To activate this option, select the View... Highlight mode... menu and the language used.