1. Introduction to HTML and CSS exercises¶
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.
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.
Encoding must be UTF-8
In this way, special characters such as accents or the sign will be saved and displayed correctly.
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.
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.
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.