HTML Responsive Web Design
To obtain the responsive website we make pages of suitable size. This can be done by using cascading stylesheets that is CSS including STYLE element and the class element.
The CLASS element is used to give different presentation styles to the elements. We have discussed the example of a poem that has a verse using the CLASS attribute, let us modify that example and see acquired the results:
<html>
<head>
<style>
.poem {
width = 500px
height = 600 px
margin.left = 0.5 cm
margin.right = 0.5 cm
* : font. family = times
* : margin. left = 1 cm
h1, h2, h3: font. family = Helvetica
h2, h3: margin.left = 0cm
h1: text.align = centre
}
</style>
</head>
<body>
<h1> A responsive website Example </h1>
<h2> I wandered lonely as a cloud </h2>
<div class = “poem”>
<h2> Verse 1 </h2>
<p> I WANDERED lonely as a cloud </p>
<p> That floats on high o’er vales and hills, </p>
<p> When all at once I saw a crowd, </p>
<p> A host, of golden daffodils; </p>
<p> Beside the lake, beneath the trees, </p>
<p> Fluttering and dancing in the breeze. </p>
</div>
<div class = “poem”>
<h2> Verse 2 </h2>
<p> Continuous as the stars that shine </p>
<p> And twinkle on the milky way, </p>
<p> They stretched in never-ending line </p>
<p> Along the margin of a bay: </p>
<p> Ten thousand saw I at a glance, </p>
<p> Tossing their heads in sprightly dance. </p>
</div>
<div class = “poem”>
<h2> Verse 3 </h2>
<p> The waves beside them danced; but they </p>
<p> Out-did the sparkling waves in glee: </p>
<p> A poet could not but be gay, </p>
<p> In such a jocund company: </p>
<p> I gazed–and gazed–but little thought </p>
<p> What wealth the show to me had brought: </p>
</div>
<div class = “poem”>
<h2> Verse 4 </h2>
<p> For oft, when on my couch I lie </p>
<p> In vacant or in pensive mood, </p>
<p> They flash upon that inward eye </p>
<p> Which is the bliss of solitude; </p>
<p> And then my heart with pleasure fills, </p>
<p> And dances with the daffodils. </p>
</div>
</body>
</html>
In the above example, “.poem” is a class that is declared within the STYLE element to give a style to the headings and paragraphs so that our website could look attractive and responsive. The first two lines in the class specify the size of the browser display window in pixels, px indicates pixels.
The third and fourth line defines the margins for the document within the display window. In this way the left and right margins are considered to be 0.5 cm. In the fifth and sixth lines * is a wildcard that is used to represent all the possible elements names that are related.
These two lines define generic properties of all the elements in the document. The font.family = times shows that the default font is Times Roman and margin.left = 1 cm indicates that the left margin for all the elements is 1 centimeter from the document edge.
The lines 7, 8, and 9 provide formatting information. The line 7 sets the font of H1, H2 and H3 to Helvetica. Line 8 sets the margin of the text of H2 and H3 to 0 centimeters. The line 9 says that the heading h1 should be aligned to the centre of the HTML document using the attribute ALIGN.
In this way all the headings that are used aligned accordingly. <div class = “poem” > is the definition of the class which contains a heading 2 indicating which verse of the poem it is, and paragraphs. The class is defined inside the body tag.
The result of the above HTML document is as follows:
And,
Responsive Website using CSS
The responsive websites can be made using cascading stylesheets. This can be done using the meta element and the class attribute. There is a minor change in the above example, therefore, it is written as follows:
<html>
<meta name = “veiwport” content = “width = device-width, initial-scaled=1”
<body>
<div class = “poem”
<h1> A responsive website Example </h1>
<h2> I wandered lonely as a cloud </h2>
</div>
<div class = “poem”>
<h2> Verse 1 </h2>
<p> I WANDERED lonely as a cloud </p>
<p> That floats on high o’er vales and hills, </p>
<p> When all at once I saw a crowd, </p>
<p> A host, of golden daffodils; </p>
<p> Beside the lake, beneath the trees, </p>
<p> Fluttering and dancing in the breeze. </p>
</div>
<div class = “poem”>
<h2> Verse 2 </h2>
<p> Continuous as the stars that shine </p>
<p> And twinkle on the milky way, </p>
<p> They stretched in never-ending line </p>
<p> Along the margin of a bay: </p>
<p> Ten thousand saw I at a glance, </p>
<p> Tossing their heads in sprightly dance. </p>
</div>
<div class = “poem”>
<h2> Verse 3 </h2>
<p> The waves beside them danced; but they </p>
<p> Out-did the sparkling waves in glee: </p>
<p> A poet could not but be gay, </p>
<p> In such a jocund company: </p>
<p> I gazed–and gazed–but little thought </p>
<p> What wealth the show to me had brought: </p>
</div>
<div class = “poem”>
<h2> Verse 4 </h2>
<p> For oft, when on my couch I lie </p>
<p> In vacant or in pensive mood, </p>
<p> They flash upon that inward eye </p>
<p> Which is the bliss of solitude; </p>
<p> And then my heart with pleasure fills, </p>
<p> And dances with the daffodils. </p>
</div>
</body>
</html>
We can see that the declaration of the class poem is omitted instead meta element is used that will align the text according to the width of the device on which user is opening the website (Desktop computer, tablet, Mobile phone etc.). The results are as follows:
And,
