Learning all about HTML ( 0 to hero)
What is HTML?
HTML is a language or a group of elements which help you provide structure to your page. Consider the following text and save it as index.html in your local laptop.
“India’s foreign exchange reserves rose by $835 million to touch a record high of $612.73 billion in the week ended July 16, 2021, the Reserve Bank of India (RBI) data showed on Friday. According to weekly data from the RBI, forex reserves rose to a record $612.73 billion in the reporting week, helped by a rise in Foreign Currency Assets (FCA), a major component of the overall reserves.India’s forex reserves cover Foreign Currency Assets (FCAs), Special Drawing Rights (SDRs), Gold Reserves and the country’s reserve position with the International Monetary Fund (IMF)”
The page looks like this and you can see it if not formatted, what if you want to add different paragraphs, what if you want to make the figures bold or India as bold? well you need HTML , lets do that .
To make a text bold , we surround that with <b>and </b>, The former tag is the opening of b and the latter means that the tag b ends here, anything between these should be marked as bold.
How to add paragraphs? well HTML has everything , go head and move a line b/w <p> and </p> as in the below example
Please see below that the line is shows as a different paragraph in the browser
Structure of the HTML page
The page generaly has 3 things , the starting tag <html> , <head> and < body> , body is where the visible components of the web page go, head contains metadata information about which we will talk later.
lets convert the page we created above into a complete HTML page using 3 tags mentioned above.
The following is the code for the new page,if you see i have added a title to the page and the content goes inside the body of the HTML
<html>
<head>
<title>India’s Foreign Reserves</title>
</head>
<body>
<b>India’s</b> foreign exchange reserves rose by $835 million to touch a record high of $612.73 billion in the week ended July 16, 2021, the Reserve Bank of India (RBI) data showed on Friday. According to weekly data from the RBI, forex reserves rose to a record $612.73 billion in the reporting week, helped by a rise in Foreign Currency Assets (FCA), a major component of the overall reserves.
<p>
India’s forex reserves cover Foreign Currency Assets (FCAs), Special Drawing Rights (SDRs), Gold Reserves and the country’s reserve position with the International Monetary Fund (IMF)
</p>
</body>
</html>
The page looks like below :-
No lets add some headings to each paragraphs , please use <h1> ….<hN> tags. Please change the Body to , please note we have used <b> for making text bold and <i> for making the text html italic
<body>
<h1> <b><i>News</i></b> </h1>
<b>India’s</b> foreign exchange reserves rose by $835 million to touch a record high of $612.73 billion in the week ended July 16, 2021, the Reserve Bank of India (RBI) data showed on Friday. According to weekly data from the RBI, forex reserves rose to a record $612.73 billion in the reporting week, helped by a rise in Foreign Currency Assets (FCA), a major component of the overall reserves.
<h2> <b>what does India Foreign exchange covers ?</b></h2>
<p>
India’s forex reserves cover Foreign Currency Assets (FCAs), Special Drawing Rights (SDRs), Gold Reserves and the country’s reserve position with the International Monetary Fund (IMF)
</p>
</body>
The page looks like below
Now lets add a line between two paragraphs, it is simple just add a <hr> tag between two paragaphs, the page will look like below
Now lets talk about the tag which is seen on most of the web pages , the div tag, as the name suggests , it helps us do a page division to specify that the the content inside the div tag is divided, as good as paragraphs we used above, why dont you just replace all the <p> tags with <div> tags and see if there is a difference ? Well, you wont see a difference but then div can be used to divide the pages among other types of contents ,not just paragraphs
Now since div tag as some interesting attributes ,lets talk about its attribute — style. Try adding div tag and gives its attribute as style=”color:blue” and see the paragraph’s color changes to blue as in the picture below-
