1.4 A Web browser

You’re currently using a Web browser to read this Webpage written in HTML.

HTML documents

Webpages are HTML documents, like other files on your computer. They are just text files with a .html extension.

On your computer, you probably have different types of files:

• .jpg for images
• .mp3 for music
• .avi for videos
• .doc for Word documents
• .xls for Excel spreadsheets

Each of these types of files can be opened by a specific program. Some of these programs can only open these files, while others can both open and create files.

By default, file extensions are hidden. In this tutorial, we’ll need to be able to edit these extensions. So follow these instructions to display file extensions:
Windows: Show or hide file name extensions
Mac: Show and hide filename extensions

For example:

• iTunes can open .mp3 files but can not create them.
• Microsoft Word can however both open and create .doc files.

The program used to open HTML documents is a browser, like Firefox or Google Chrome. The program used to create HTML documents is a text editor, like Notepad++ or Sublime Text.

HTML source code

HTML code looks like this:

<p>Hello World</p>

This code is written with a text editor. You can see the tags <p> and </p> that stand for paragraph.

When opened by a browser, these tags are not displayed but rather interpreted by the browser:

The browser sees the <p> and </p> tags and understands that Hello World is a paragraph.

Remember that an HTML document can be opened in 2 ways:

• by a text editor who sees the source code
• by a browser who interprets the source code

List of Web browsers

As the Web has become the primary use of the internet, every computer and smartphone comes with a default browser installed.

The most popular ones are:

• Chrome
• Firefox
• Internet Explorer
• Opera
• Safari

List of text editors

The most popular ones are:

• Notepad++
• Sublime Text

You will need to install one to write HTML and CSS.

While the rest of this tutorial doesn’t require to write any code, it’s recommended to try out the examples yourself.