Introduction to HTML - Hypertext markup language
Web development is the most important innovation that grew up in the last few decades. Just after the internet captured the whole world, it gained the attention of various developers, entrepreneurs and business professionals to reach out to a large number of people. People saw a larger opportunity in investing in developing their websites for better growth of their companies. Basically, web development is a task refers to the development of the structure, elements and content of a website over the internet or intranet. It involves various steps and procedures and for different category of people it's definition may be different. Every type of website is based on the same idea of development whether it may be e-commerce, blog, educational or some other genre of the website. The whole website is a structure of code. When the client or user surf a webpage, he or she sends a request to the server where the back-end of the website lies, the client is only able to see the content of the website, when the server approves the request. In this article, we are going to learn the basics of front-end web development. HTML is a markup language that has a worldwide user base for the webpage development. Most of the websites on the internet are scripted with HTML. HTML is basic for front-end web development and the fundamental to learn web development. Now let's get into the article and know more about HTML.
History and development of HTML
HTML stands for Hyper-text markup language. It is used for the development and scripting of webpages. The first-ever version of HTML was developed in 1993 by Tim Berners-Lee. Throughout the last decade, HTML version 4.01 was most widely used which had become the official standard for HTML in 1999. In 2000, the XHTML became the official standard for the first time. It was the combination of HTML and XML. Well, XML stands for extensible markup language which is used for the development of other markup languages and has a huge usage. Later in 2011, the most advance version of HTML came out that is HTML5 most of the websites are now buildup using HTML5 and a wide range of web browsers also support this version. However, this is not the official standard yet.
Various releases of HTML so far:
- HTML 1.0 - This was the first release of HTML back in 1993. At that time not many people were involved in web development. This version was very limited with features and a developer would only able to create the basic text on the web.
- HTML 2.0 - This was the first upgrade to the language and had all the features included in HTML 1.0 and some new featured with which a developer can design his website. It became the official standard till 1997.
- HTML 3.0 - This was a major development for HTML. It contained various abilities for web development and was supporting the newly introduced attributes and tags by Netscape. Sadly the browsers at that time were not able to handle this and this version was abandoned.
- HTML 3.2 - At the time of the release of this version, browsers were developing their own tags. So a standard needed to be founded. In 1994, the world wide web Consortium formed to ensure language development in the right direction. In 1997, HTML 3.2 became the official standard.
- HTML 4.01 - This version was the last one of classic HTML. It came with the new and improved features of web designing that supported fully responsive web pages. It also came with the new presentational language CSS(cascading stylesheets). It became the official standard in April 1997.
- XHTML 1.0 - This version came with the official support of integrated XML. In 2000, it shared the official standard with the HTML 4.01 version. But this version was not so popular because of the new set of coding rules.
- HTML 5.0 - This is the latest and ongoing version of HTML. Whereas it is still in development, it already captured a large number of web developers. It came with the various new functionalities of new tags and attributes.
Markup language
HTML basically is a markup language. A markup language is a type of computer language that is used to design something. In the case of HTML, webpages are designed. It is a computer language that has keywords and attributes that are used to phrase the view of the page and the data it contains. The data that we want to show on a website is easily understood by us but the same thing is never understood by the computer. For that markup language is used so that the machine can understand the content and the website can be made responsive.
But markup language is not a programming language, it has no use in decision making. Programming languages are compiled to make some output out of the given set of instruction. But markup languages just to describe the document. HTML is a markup language. In HTML hypertext refers to the link between the webpages. We use HTML to mark-up the data with tags so that the browser can understand the relations between webpages and the way to display it.
Front-end web development
To better understand the function of HTML, we have to know where and how it is used. Front-end web development refers to the actual designing of the look and feel of the webpage. It is also called the client-side development because the developer has to design the web page exactly how it would look to the user. For a good website, a better front end development is very much necessary. Developing a web page is based on the idea of editing the text, style and interaction of that page. Basically, three languages are used for front-end web development i.e HTML, CSS and JavaScript. It is also a challenging task as the tools and technique associated with the front-end development changes constantly so the developer needs to be up-to-date with it.
HTML is a part of front-end web development. Every letter, word, paragraph etc that is visible to us on a web page is written with HTML. A web developer needs to have knowledge of HTML for web development. Almost all the browser today supports HTML by default. The HTML coding of a web page can be seen on computer browser by right-clicking and then navigating to the inspect element option.
Writing and editing text in HTML
As mentioned above, most of the browser supports HTML, that means HTML files can be easily run through them. An HTML file basically means a web page. Here the browser works as the compiler for the HTML code. Unlike programming languages, HTML is a markup language that means, it is not for logical or decision-making use. We just write code in HTML format so that the web browser could read the written code well and phrase it to be able to read easily by a user.
Any HTML code can be written in any type of text editor and after saving it, it is officially a web page when opened through a browser. Here is an example of HTML code snippet written in notepad:
The above HTML code is written in notepad. It can be written with any code or text editor. Notice that even after the code has been written but it is difficult to understand the data as the tags, attributes and others are not highlighted. It is even more difficult as the developer is unable to figure out mistakes or bugs in the code. Although it is possible to write the HTML code anywhere for a professional developer, it will be easier if the elements of the HTML are highlighted and errors are figured out. To overcome this problem, a code editor or IDE(Integrated development environment) can be used. And IDE makes it possible to understand the written HTML code with ease and code can be written more efficiently. In this tutorial, we'll be using the Atom code editor. Atom is a very powerful and featured pack free and open-source IDE for any language. Atom can be downloaded from their official website - atom.io. Atom is available for Windows, macOS and for Linux. Here is an example of HTML code written with the atom code editor.
Look at the different HTML elements, of course, we'll discuss all of them later. But here the colour of the different elements changes in an IDE for the ease of the developer. Even if something goes wrong it informs you about the bug. This is the advantage of writing HTML code in a code editor or IDE.
Although we are going with Atom editor, any type of code or text editor is allowed to write HTML code. Just save the file with .html format and it is now ready to read by a browser. Next, we are going to know how to use the Atom editor to write the HTML code.
Getting started with Atom
The atom code editor is a good kind of IDE for any kind of programming or web development. It is multi-platform based support almost all languages. It has integrated support for GitHub. In this series of HTML tutorial, we'll be using Atom. So let's get started step-by-step of using Atom IDE.
STEP-I
The first step is to download and install the Atom IDE on your machines. It is available for Windows, Linux and macOS as mentioned above. Get it installed from atom.io. After downloading the package we'll move further towards the installation process.
The size of the Atom IDE is about 175 megabytes. As the download completes go to the folder where it is downloaded and install the application. It may take some time to install the application. After the application installs, open Atom by clicking run as administrator so that Atom will be able to make changes to the files and folders. When Atom opens, the following window should be visible.
STEP-II
As we have installed Atom successfully, now move forward to run codes in it. As mentioned above somewhere, Atom supports a large number of programming languages, scripting and markup languages and databases. It has integrated support for GitHub. But to write HTML codes we don't need any package to install. Simply click the file button on the top left and select New File option.
After clicking the New File option, a new page should open where we can write our HTML code. By default, the file doesn't have any name or extension. We can set it at the time of saving the file.
STEP-III
So now after installing and opening the writing page of Atom IDE, we are now able to write the actual HTML code in it. But before writing the code, we've to save the file with .html extension so that the IDE will be able to understand that the file is an HTML file and we'll be able to take all advantages of having a code editor.
Note that the file is being saved with the name index.html. But why? Well, we can save the HTML file with any name but by saving the file with the name index.html, the web browsers will be able to treat it as the homepage of a website. We are not necessarily making a website right now but, if we would be making, the index.html would be the homepage of that website.
STEP-IV
Now as the file has been saved with .html extension, the IDE is now able to recognise the file as an HTML file so that now we can write our code. The IDE colourize the elements of HTML differently so that the programmer or developer can recognise the code with ease. After writing the code go to the File option in the top left corner click save or simply hit CTRL-S on windows or Command-S on mac to save the file.
As the file is saved we can open it in a browser to see what exactly it looks like ina browser. To do this, go to the folder where the file is saved and double click on it to open it in the default browser or you can select any other browser also.
So now the file is going to be opened in the selected browser and we can see the exact content in it.
Now see how the browser showed the content to the user. This is what we had written in the HTML code. The browser phrase the code and extracted the relevant information what is needed to be shown to the viewer.
So this is how Atom editor can be used for writing code in HTML. Of course, we have not learnt how HTML codes are written and what all things, elements and set of rules does HTML have. This is going to be the content of the next article. In the next article, we'll bring you how to write code in HTML, rules, elements and attributes and basically everything regarding HTML.
HTML has wide usage in the web today, tons of web pages are developed every day using HTML. It is an important scripting language to learn for beginners as well as professional web developers. This article was a quick review and introduction part of HTML.
If you like this article then please share it and subscribe to our newsletter to get the latest updates. Follow us on Facebook.
Comments