Currently the use of the Internet and web pages is completely extended, in such a way that we would hardly understand its lack. When visiting our favorite web pages, we see that they are full of elements such as text, images, etc. To know its creation, it is necessary to go back to the appearance of HTML, since it is not in vain that they are the basis of everything we see on our computer screen.
That is why today we are going to talk about the HTML file. We will know what exactly it is and what it is used for, as well as its origin. We will also see how it works, how to create one easily or what are the best programs to open and edit them.
What are HTML files
When we talk about HTML ( Hypertext Markup Language) files, we do so on a hypertext market language file format, which is used as the basis of a web page. It is stored in standard text format and contains different tags that are responsible for defining both the design and the content of the web page, including the text, tables, images and hyperlinks that are displayed on it. Their use is mainly online and they are displayed in web browsers. This language is easy to learn and can be translated into others such as JavaScript, XML or CSS.
where it arises
It was in 1991 that Tim Berners-Lee along with other engineers at CERN took it upon themselves to introduce HTML files as a way for web browsers to interpret, read and display web pages. Since then and until today, it has become a standard in web development. Along the way there have been different revisions such as HTML 2 (1995), HTML 3 (January 1997), HTML 4 (December 1997) and, finally, HTML 5 (2014).
In 2004, a group made up of the main browser developers, including Google, Apple, Mozilla and Firefox, created the WHATWG (The Web Hypertext Application Technology Working Group) which in Spanish would be the Technology Working Group of Web Hypertext Applications. This group is responsible for developing and advancing the HTML format.
How does it work
Through the markup language, the HTML elements that make up the structures of web pages are presented. Typically, each element includes an opening tag enclosed in angle brackets (<tag>) and a closing tag also enclosed in square brackets, but with a forward slash between the tags (</tag>).
Subsequently, over time, other web technologies such as CSS (.css) and JavaScript (.js) code have been introduced in current HTML web pages. In general, the developers create and edit the HTML files and then upload them to the web servers of the browsers, which are responsible for analyzing and interpreting them in seconds, showing us the final result when we visit the page. This is why we never see the HTML source code in the browser.
To explain the basic structure of an HTML document, we must know that there are three tags that describe it and through which simple information about it is offered. These tags do not affect the appearance of the document at all, but simply frame and structure the HTML file:
- <html> and </html> : surround the document and indicate the language in which it is written.
- <head> : Specifies the preface for the rest of the file. Inside there are few tags, highlighting the title <title> which is responsible for identifying the content of the page. There can only be one title in each document, and if possible, keep it short and meaningful. Also, in the header there should be no text from the document.
- <body> : here we find the main content or cause of the document. This is the part of the HTML document that is displayed on the computer.
View HTML preview from browser
As we have mentioned, web browsers are responsible for interpreting the HTML code to show us all the content graphically, whether as text, images or videos, just as it has been designed. However, it is possible to see a preview of an HTML web page of any web from the browser, following certain steps depending on the one we use
- Google Chrome: from its options menu, clicking on “More tools” and “Tools for developers”.
- Mozilla Firefox : In its options menu selected “More tools” and “Page source”.
- Microsoft Edge – By clicking “More Tools” and “Developer Tools” within its options menu.
- Apple Safari : in its options menu by clicking on “View source code”.
These are just some examples within the most popular browsers, but practically any web browser on the market has the possibility of being able to view the HTML code.
How to easily create an HTML file
If we want to quickly and easily create an HTML file, we can make use of these free text editors, which will allow us to create and save it in a matter of seconds.
memo pad
It is a simple editor integrated into Windows, through which it can be used to write small text documents such as notes. At the same time it can also be used to easily create an HTML file. To do this, it will only be necessary to open it from the search engine of the Start menu.
Once opened we only have to write the code we need. Once finished, we click on the “File” tab, a drop-down menu will open where we select “Save as” .
Now within the Type tab at the bottom of the window, we must change the option “Text documents (*.txt)” to “All files (*.*)” . In this way, our file will be saved as an HTML document. All that remains is to select the location of the file and add a name to it along with the “html” extension. All that remains is to click on Save to convert our text document into an HTML file.
NotePad++
This is possibly the best alternative text editor to Windows Notepad. It is a free and open source program compatible with different programming languages, it has native support for Windows and with which we can create an HTML file very easily. To get started, just download it from the developer’s website .
Once downloaded and installed, we only have to run it so that its interface appears. We write the desired code and once finished click on the “File” tab. This will open a dropdown menu where we will choose the “Save As” option.
In the new window that appears, we go to the Type tab, where we display all the options and select “Hypertext Markup Language (*.hmtl, *.htm, *.shmtl, *.shtm, *.xhtml, *. xht, *.hta)” . Now we only have to enter the desired name for the HTML file and the location where we want it to be stored. Finally, click on “Save”.
EditPad Lite
Another very popular text editor program is EditPad Lite, which has a free version for personal use. It has full Unicode support and allows direct editing of text files using Windows text encodings and line breaks. Despite the fact that its interface is in English and easy and intuitive, allowing us to create our HTML file in a matter of seconds. To do this, the first thing is to download it from its official website .
We install it and run it so that its interface appears. Here we write the code we need and once finished click on the File tab. This will open a dropdown menu where we select the “Save As” option.
In the new pop-up window that appears, we go to the Type section, located at the bottom. Here we display the list and choose “HMTL documents (*.html, *.htm, *.shtml, *.hta)” . Now we only have to give it a name and a path to save the file. Finally, click on Save and we have already created our HTML file.
Best programs to open and edit an HTML file
To be able to see a preview of the HTML files, our own web browser may suffice. However, if we want to open and edit HTML files, it is best to use different types of web development programs such as the ones we are going to see below.
Visual Studio Code
Microsoft is the company in charge of developing this source code editor that works with multiple programming languages, including HTML . It features support for Git built-in control debugging, syntax highlighting, smart code completion, snippets, and code refactoring. It also supports the use of snippets, which helps us drastically reduce the time spent writing code. Of course, the software is customizable, which will allow us to configure everything from the workspace to the HTTP or CCS configuration.
Visual Studio Code is a multi-system application that we can download for free from its website.
SublimeText
This text editing application for professionals has become one of the best options to open and edit HTML and CSS files , along with other programming languages. With it we will be able to jump to strings or symbols, define several syntaxes, highlight code, select several lines and do a divided edition. It is also compatible with keyboard shortcuts, which will allow us to dominate and reduce programming and debugging time. It is especially aimed at advanced users, so it is not indicated for novice users who are starting to do their first programming jobs.
Sublime Text is cross-platform and has a free version that we can download from the developer’s website .
Adobe Dreamweaver CC
This application has been created and developed by Adobe to become one of the industry standards when it comes to designing a web page in HTML , since it has certain functions to create pages with the latest design innovations along with a modern look and allowing some flexibility to facilitate our work. Its evolution over time has led this software to become one of the preferred options for web designers. Also, if we don’t know how to code, it includes a series of predefined modules to help us create websites.
We can download a trial version of Dreamweaver from the Adobe website. If we want to use it permanently, we must pay a subscription of 24.19 euros per month.
