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.
Program | Type | Can open these files | Can also create these files? |
---|---|---|---|
Microsoft Word | Word editor |
.doc
.docx
|
Yes |
Paint | Graphics |
.jpg
.gif
.bmp
|
Yes |
VLC | Video player |
.avi
.mpg
|
No |
iTunes | Music player |
.mp3
.wav
.aiff
|
No |
Firefox | Web browser |
.html
|
No |
Notepad++ | Text editor |
.text
.html
|
Yes |
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:
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:
Hello World
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:
List of text editors
The most popular ones are:
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.