Focus on HTML: A decent understanding of HTML for all
HTML standing for Hypertext Markup Language is the first web language which was introduced just after the invention of WWW. [ See How WWW was invented.]
There is no meaning of arrival of a web language until the web transmission system itself was invented.
In the process of historical development of Internet [Check out How Internet evolved], Tim Berners-Lee invented World Wide Web (WWW) in 1989 which paved the way to data transmission through Internet in form of web page.
As there was the question of building up web page/ website, so there came the question of a language to write the webpage with.
Now question, why did necessity of introducing a technical language called Web Language arise?
How web language HTML came into the scenerio
Documents created in a device can’t be transmitted to another keeping exactly the same appearance, formatting and structure. In other words, huge variety of devices don’t understand the same language.
Lee saw that devices (PC, Laptop, Mobile, Supercomputer ….) are not compatible with one another but they all could store and process information using ASCII (American Standard Code for Information Interchange).
On the basis of ASCII, Lee gave the world two basic formula- HTTP and HTML. He also explained other fundamental technological terms- URL, BROWSER and WEB SERVER which is the foundation of today’s Server-Client model of webpage transmission.
You can check out the Related info links below–
Thus HTML evolved. As a matter of fact HTML is the markup language. In easy words, HTML marks up or fixes up or decribes a multimedia content. When this marked up language (HTML) file is transmitted to other devices, Browsers in those devices play the mediatory role to translate and display this markup file into multimedia content or user readable form.
All the process follows Server-Client Model where server is Web Server and client is Web Browser. Web Browser is programmed the way or Web Browser knows how HTML file should be translated to make it a desired user-readable document.
In a word, all the webpage transmission system is the two-way communication channel between Web Server and Web Browser.
Also see–
A simple example of HTML
We always use heading (title) at the beginning of any article. Suppose we have the following heading for a elaborated article on Morning Walk.
Health benefits of Morning Walk
Suppose we save this file heading.docs by name. Can we send this file from Web Server to Browser through http channel keeping everything exact enough to show on users’ screen? Definitely not. The reason is what we discussed so far.
Now let’s see how we formatted the heading when we created it With MS Word–
- we used font size 30
- set background color green
- we aligned the heading texts to center
- colored the fonts with gold color
Now if we describe or markup the whole process with html, it will look like-
<h2 style="font-size:30px;
background-color:green;
text-align:center;
color:gold;">
Health benefits of Morning Walk</h2>
Now let’s put this code in the relevant place (within body tag) of the basic html structure as shown below-
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2 style="font-size:22px;
background-color:green;
text-align:center;
color:gold;">Health benefits of Morning Walk</h2>
</body>
</html>
And save this file as heading.html.
Now this file is recognizable and understandable by Browser. We can undoubtedly send this file by http channel from Web Server to Browser. But to recognize this file a URL (address) is needed. [see, How URL works]
In this case, when anybody from any end around globe inputs the URL in the Browser, Browser will respond to this heading.html file and transform it and then display it as exactly as the formatted heading we showed previously-
Health benefits of Morning Walk
This is the reality of Hypertext Markup Language. Server will hand it to the Browser. Browser will do the rest- produce it in user-readable form in device screen.
Basic HTML structure
Now question, how this html code is written. Every web language has primary structure or Block inside which codes are written. Contextually noted that this is not an HTML learning tutorial. Here we’re just making an introduction of html to the beginner-level readers.
The language html is tag-based. Each layer of this language is defined with TAG. Here are the Tag outline-
- Tag name is surrounded by angle bracket. For example- paragraph is written as <p>.
- HTML tag is set in pair such as <p> and </p>.
- The first tag in the pair is the start tag or opening tag, the last tag is the end tag or closing tag.
- A forwarded slash (/) is used in the end tag before tagname.
- Content goes within start tag and end tag such as: <p> This content is a paragraph </p>.
Now let’s see the whole html structure at a glance as we demonstrated in the first image of this tutorial-
- Text between <html> and </html> is the Web Page.
- Text between <body> and </body> describes the Visible Page Content.
- All html elements like <div>, <h>, <img>, <span>, <section> etc. go within<body> and </body> tag.
- Text between <head> and </head> describes the Meta information about the document. these texts are not visible but they affect the whole document.
- Text between <title> and </title> is the Page Title and it goes within <head> and </head> tag..
- To style the document, CSS code is written within <style> and </style> tag which goes between <head> and </head> tag.
- <!DOCTYPE> declaration represents Document type which helps Browser to display webpages correctly. <!DOCTYPE> is used only once at the top of the document. The <!DOCTYPE> declaration for version HTML5 is <!DOCTYPE html>.
- With <html> start tag, Language or ‘lang’ attribute is used. Here ‘lang’ attribute value is ‘en’ or English
Hope you could gain a transparent understanding of ‘What html is‘. We’re going to add different important analytical tricky tutorial on html. If you’re interested to build up basic of html, you can follow different basic html tutorial around internet. One of such influential html learning as well as web language learning website is w3schools.com. You can try this.
Expect your frank comment!
