HTML : Mastering The Markup

Overview

This HTML course provides a solid overview to we developers, from novice to expert-level HTML. If you're completely new to HTML, you will learn how to build structurally sound content. If you've been building websites for years, this course may fill in gaps in knowledge that you didn't even know you had.

Let's start this chapter with a question. What was before HTML? Stop reading, and think about this question for a moment with your eyes closed. Don’t know? No worries, @dsabyte is here to help you.

Before HTML, there were various attempts to create a standard for document structure and presentation on the early Internet. One such example is "SGML" (Standard Generalized Markup Language), which served as a foundational markup language for defining the structure of documents. HTML itself is a simplified derivative of SGML.

Enough, let me explain to you in plan language.

The invention of HTML was done along with the invention of the World Wide Web which is known more commonly as WWW(W3). So, it's important to understand how W3 came into the picture before we start learning HTML. 

This chapter will give you an overview of the history of HTML and how it was invented, it won’t go into too much detail.

Imagine A world without the World Wide Web

Before the invention of HTML (Hypertext Markup Language), which was first introduced in 1991 by Tim Berners-Lee, the World Wide Web as we know it today did not exist. The web was a very different place, and accessing and sharing information were not as seamless and user-friendly as they are now.

Let's assume that there is no HTML and World Wide Web (www), how would you access the information stored on someone else computer?

There were two friends, Rahul and Bob. Rahul lives in India, while Bob lives in the USA. As friends, they frequently exchange information. Whenever Bob travels to India, he carries his documents, images, etc. Upon his return, he asks Rahul to share Rahul's information.

Imagine how difficult would it be for us to live in such a world where you needed to travel 13.5 km just to share a few pieces of information and now we do it with a few clicks within a minute. Back then it wasn’t an issue to travel 13.5 km to share some information as the goal was still being achieved. It would be horrible to assume, that Bob forgot one important document while travelling to India and he needed to travel once again. Wouldn’t it be frustrating? 

Place yourself next to Bob, and think about the situation with your eyes closed for the moment

Photo by Victoriano Izquierdo on Unsplash

There were several problems with the existing information exchange system

• Information exchange was time consuming
• No Hyper Links support
• Inefficiency in Collaboration
• And a lot..............

Similarly, Tim Berners-Lee became frustrated with the inefficiencies and difficulties posed by finding information stored on different computers while working at CERN. 

The development of world wide web(W3)

Tim Berners-Lee On 12 March 1989, he submitted a memorandum, titled "Information Management: A Proposal", to the management at CERN. The proposal used the term web and was based on a large hypertext database with typed links. 

He considered several names, including Information Mesh, The Information Mine or Mine of Information, but settled on the World Wide Web.

Berners-Lee aimed to marry hypertext to the internet. In the process, he developed three essential technologies:

• A system of globally unique identifiers for resources on the Web and elsewhere, the universal document identifier (UDI), later known as uniform resource locator (URL)
• The publishing language, Hypertext Markup Language (HTML)
• The Hypertext Transfer Protocol (HTTP)

He published a more formal proposal on 12th November 1990 to build a hypertext project called the World Wide Web (W3) to be viewed by browsers using a client-server architecture.

By December 1990, Tim Berners-Lee and his work team had built all the tools necessary for a working Web. 

• Hypertext Transfer Protocol (HTTP)
• Hypertext Markup Language (HTML)
• First web browser (WorldWideWeb)
• First web server (CERN httpd)
• First website (https://info.cern.ch)

Here is a nice blog about the world’s first website (The World's First Website)

Enough, what is HTML?

HTML is a standard markup language for creating web pages. It enables you to define and organise elements for any web page using tags to denote various elements such as headings, paragraphs, images, links, forms, and more.

If you have ever read a book or newspaper, you might have noticed how they organise their content on paper with various formatting. Newspapers usually have a big headline on the very top, they used to have multiple columns. Less important news is kept at the bottom with smaller size headline than the main headline. 

HTML also follows a pretty much similar concept, it allows you to define the structure of the webpage. An HTML page consists of a series of elements and elements tell the browser how to display the content. HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

Here is a basic HTML snippet that just prints "Hello, @dsabyte!" heading.

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello, @dsabyte!</title>
</head>
<body>
    <h1>Hello, @dsabyte!</h1>
</body>
</html>
    

You can see the output in below code pen example

You'll learn more about HTML in the next sections of the HTML chapter

How does HTML works?

HTML elements are written in a text file with extension .html or .html. These files are kept on a server accessible via the Internet. End users use the browser to access html files located on the server. The browser downloads those HTML files and it displays the content of the file on the screen for the user. 

There are a lot of other things happening in the background for rendering HTML and surely we'll learn them later in this chapter.