Post Details

Introduction to HTML, CSS & progressive web apps

Programming

Introduction to HTML, CSS & progressive web apps

Hello, all greetings from KoDigital! in the last post we have seen how web applications are made. In case if 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 per cent are 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 the web application is they are platform free! It means web applications don't care what operating system you are running, you may on windows, mac os or any other Linux distributions like ubuntu, fedora it works flawlessly. This feature even attracted SteveJobs, 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 the security issues they switched to their own SDK (Software Development Kit).

 

So what are Progressive web apps? These are exactly the today's web applications which provide a native app-like feel. These PWA's 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 all may heard 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 little changes like colour and their 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 gives 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 which the user really has to pay attention. This really improved the standard of web applications.

 

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. Its really not a programming language, more precisely its computer understandable structure or a format of data which 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 applications are written.

 

Very next tags within the Html tag is <head> </head> and <body> </body>  tags. The head tag is like a meta section which carries the browser and search engines required data. The <body> tag is the content section which the user views, the major part is the body section where all the important stuff are 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 is directly within the HTML container.
  • The head and body tags act as containers
  • Inside head tag, there is a title tag which 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 it is 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 on what is HTML and how it is being used in today's world. Let's get deeper into it on an upcoming post, stay connected with kodigital. Tamil video of the above article is being attached below, if you nee just support us by subscribing 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

Kodigital Web application Article: https://kodigital.in/blog/how-web-applications-are-made/