Describe what is going on in the code below, and how, if applicable, the code ca
ID: 3886822 • Letter: D
Question
Describe what is going on in the code below, and how, if applicable, the code can be improved and/or modified.
<!DOCTYPE html>
<html>
<body>
<div>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
</body>
</html>
Explanation / Answer
<!DOCTYPE html> declaration must be the first thing in the html document.
It is not a html tag, it is a instruction to web browser about the
version of HTML that the page is written.
Then comes the <html> tag. <html>...</html> is the container of all
other html tags. Everything should comes between these tags.
<body> tag is used to define the html document's body. <body> tag
contains text, links, lists, tables, images, videos... etc.
<div> tag is used to define the section of a html document. It is used
to group other block-elements and format those block-elements with CSS.
Here, the <div> tag is used with style attribute. Style attribute is used
to provides the css styles to the section or division defined by the <div>
tag.
In the style attribute, background-color: black gives black as the background to
the division or section defined by <div> tag.
In the style attribute, color: white gives white as the foreground to
the division or section defined by <div> tag.
In the style attribute, padding: 20px specifies space between the border of the division to
to the text inside the division.
<h2> is used to define the heading of HTML document.
Here <h2> London </h2> will be the heading of the <div> section in
white color in black background.
After the heading, comes the <p>. <p> tag is used to define
the paragraph. text between the <p> and </p> will be displayed
as paragraph in the html document.
Therefore, inside the division , there will be two paragraphs,
with text in white color in black background.
then comes, </div></body></html>, defines the closing of section or division, body , html
respectively.
IMPROVEMENTS:
Rather, than providing the styles to the html elements by specifying the style attribute in html element,
we can use external style sheet to provide styles to the html elements.
Then we can refer to the style sheet in <head> tag in the html document.
we can specify the styles in a separate file called as "style.css".
the style specifed for the div section for our html document, can be specied as
div
{
background-color:black;
color:red;
padding:20px;
}
style.css contains the above lines.
then, include the <link> tag specifies the above style sheet inside your html document in the <head> section
as shown below.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
</body>
</html>
advantages:
suppose we are not using external style sheet, then we are using a same style in hundreds of web pages, after sometimes
we need to change the styles requires changes in hundreds of pages.
But when we are using external style sheet, changes in one style sheet page, reflected in the hundreds of web pages using
that style sheet.