Introduction to responsive web-page development (part 2)

Welcome back, guys! This is the second part of the “Introduction to responsive web-page development ” series. If you have not seen the first part, go check it out – Introduction to responsive web-page development (part 1)

Moving forward, let us just jump right into HTML and its basics.

Introduction to responsive web-page development (part 2) – HTML

HTML provides a structure and rigidity to the system. Therefore, it can be compared to the human skeletal system. Similarly, HTML gives us the base on which a web page can be built. But, how does HTML work? How do you build a solid HTML structure? What are the various building blocks of HTML? Let us find out.

HTML – BASIC SYNTAX AND STRUCTURE

HTML is a scripting/markup language (NOT a programming language) that helps us give a definitive structure to a web page that we are building. But how do we write HTML code then? Just like how programming languages have a syntax and a particular way to write a code snippet, HTML includes its own set of elements called TAGS. HTML tags help define the structure of the HTML page. There is an umpteen number of HTML tags and we shall study only the important ones. Let us look back at the sample code I had left behind in the previous post:

 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>First page</title> <!-- gives a title to your web page --> 
</head> 
<body> 
    <h1>Hello world!</h1> <!-- Display hello world as a heading --> 
</body> 
</html>

INFERENCE:

As seen from the previous code, we notice the following tags:

  • The <!DOCTYPE> tag is sort of like an identity card for your HTML file. It tells your browser that the file that is being opened right now is an HTML file. The syntax for the <!DOCTYPE> tag is as follows: <!DOCTYPE html> where the “HTML” will have a bunch of references based on the version number of the HTML being coded in. Therefore, we write this tag first.
  • The <head> tag denotes the start of the head of the HTML. It is here you can find all the metadata of the web page, i.e. information that is not visible to the user, such as the favicon and the meta description, etc. We shall discuss that soon.
  • The <title> tag, just as the name suggests gives you the title of the webpage. Therefore, the information enclosed within the title tag is displayed on the top of your browser in the tabs. Therefore, in our case, the tab would show the “First page”.
  • The <body> tag is where all the visible stuff lies. We use most of our HTML tags here. We shall discuss a few of the tags in the next post.

This is pretty much the skeleton of a basic HTML page. Now, we know the structure and where to put what. Henceforth, let us delve deeper into what has to be added in the coming posts! Stay tuned and stay awesome!

Next part:

Introduction to responsive web-page development (part 3)

Leave a Reply

Your email address will not be published. Required fields are marked *