Introduction to HTML, CSS & progressive web apps

Hello, all greetings from Kodigi! in the last post we have seen how web applications are made. In case you have missed it, click here to get an idea of how nowadays web applications are made. Now, let’s enter straight into the topic of what is HTML and CSS and how it has been used. In Today’s world whatever you are seeing in the digital platform, nearly ninety percent is made with HTML and CSS. We studied cells are the building blocks of life likewise HTML & CSS are like building blocks of Web applications. What’s so special about web applications? The main advantage of web applications is they are platform free! It means web applications don’t care what operating system you are running, you may be on windows, mac os, or any other Linux distribution like ubuntu, fedora it works flawlessly. This feature even attracted Steve Jobs, when he introduced the iPhone in 2007 he stated that web apps built with HTML5 and Ajax (out of the scope of this article) will be the standard iPhone apps. But later due to some of security issues they switched to their own SDK (Software Development Kit).

So what are Progressive web apps? These are exactly today’s web applications that provide a native app-like feel. These PWAs are growing enormously as it does not need to be developed separately, a single developer team can take care of every platform. So these powerful applications are made with HTML and CSS.

What are HTML and CSS? HTML stands for HyperTextMarkupLanguage. I hope you have all may hear of this HTML at least once. To be precise HTML are like the skeleton of a web application, it holds the content of the application. At first, HTML is more than enough for transferring data as websites are initially used just like an announcement board, so its communication is totally one-sided. Nobody cared how it looked like, as every website looked more or less similar with large paragraphs stacked with very few changes like color and logos. But later when the internet usage increased lots of websites are being created so in order to stand out they required more customization in the website looks. This gave birth to a new tool CSS(Cascading Style Sheet). Cascading Style Sheets add beauty to an HTML page. It gives nice font color, pleasant background color, and also much necessary beauty add-ons like border styling and the way how things are arranged on the website. Beforehand in HTML pages, data are only stacked from top to down but with CSS developers can arrange the information side by side and they even highlighted the content that the user really has to pay attention to. This really improved the standard of web applications.

What how this HTML looks like? Before getting into CSS we shall take a look at HTML.HTML is a really simple language with a straightforward structure. It’s really not a programming language, more precisely its computer understandable structure or a format of data that is developed with tags. These tags are like naming terms for each section, like heading is <h1> where h is the short form of heading and 1 represents the size and importance of the heading, Let us get deep into it in near future. Conventionally, Html tags are formatted with angular brackets. So every Html document starts with <html> tag which gives the browser idea of what document it is handling. Every <html> has its own ending tag with a forward slash at the beginning of the tag </html>. So within this Html tag, every other content of the document or application is written.

The very next tags within the Html tag are <head> </head> and <body> </body> tags. The head tag is like a meta section that carries the browser and search engines required data. The <body> tag is the content section that the user views and the major part is the body section where all the important stuff is contained. So the overall simple HTML document looks like this

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

<h1>My Website</h1>

</body>

</html>

The above code starts with <html> tag for now just ignore the DOCTYPE as it is an HTML5 convention for browsers.
The head and the body tags which are at the same level of indentation are directly within the HTML container.
The head and body tags act as containers
Inside the head tag, there is a title tag that holds the title “Document”. This title is displayed as the tab heading at the very top of the browser.
Here the body tags hold the <h1> tag which represents the heading with corresponding properties like bold and big font size and also as mentioned ‘1’, it will be given the first preference by the web crawlers of Google and other search engines.
And also do not forget to notice every tag is closed eventually

So if you copy the above code and paste into any text document editor and save it as say “web.html” and open it in a web browser the output will be something like this

Hope you got some idea of what is HTML and how it is being used in today’s world. Let’s get deeper into it in an upcoming post, stay connected with no digital. The Tamil video of the above article is attached below, if you need just support us by subscribing to our channel. Thank you so much, meet you real soon!

Reference links:

w3 schools for Html: https://www.w3schools.com/html/

Mozilla Tutorials for Html: https://developer.mozilla.org/en-US/docs/Web/HTML