HTML Notes

mobiprep (6).png

HTML

mobiprep (6).png

HTML Tags and Elements

mobiprep (6).png

Attributes and Hyperlinks

mobiprep (6).png

Headings and Lists

mobiprep (6).png

Class and id attributes

mobiprep (6).png

Semantic Elements

mobiprep (6).png

Inline and Block-Level Elements

mobiprep (6).png

Div and Span

mobiprep (6).png

img

mobiprep (6).png

Tables

mobiprep (6).png

Forms

Heading

Q

1

Define Class Attributes in HTML.

LRM_EXPORT_207556595493866_20190724_1939

Ans

The class is an attribute which specifies one or more class names for an HTML element.The class attribute can be used on any HTML element. The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class.

LRM_EXPORT_207556595493866_20190724_1939

Q

2

Where are the Class Attributes used?

LRM_EXPORT_207556595493866_20190724_1939

Ans

Use of class attribute with an example-
<html>
<head>
<style>
.country {
background-color: black;
color: white;
padding: 8px; }
</style>
</head>
<body>
<h2 class="country">CHINA</h2> <p>China has the largest population in the world.</p>
<h2 class="country"> INDIA</h2> <p>India has the second largest population in the world.</p>
<h2 class="country">UNITED STATES</h2>
<p>United States has the third largest population in the world. </p>
</body>
</html>

In the above example CSS styles all elements with the class name “country”. The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

For example-
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px; padding: 20px; }
</style>
</head>
<body>
<div class="city"> <h2>London</h2> <p>London is the capital of England.</p> </div>
<div class="city"> <h2>Paris</h2> <p> Paris is the capital of France.</p> </div>
<div class="city"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </div>
</body>
</html>

LRM_EXPORT_207556595493866_20190724_1939

Q

3

Explain the basic syntax of a class.

LRM_EXPORT_207556595493866_20190724_1939

Ans

To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}:
<html>
<head>
<style>
.city {
background color: tomato;
color: white; padding: 10px;
}
</style>
</head>
<body> ….. ….. </body>
</html>

Basic syntax-
.class {
css declarations;
}

LRM_EXPORT_207556595493866_20190724_1939

Q

4

Explain the use of id attribute in HTML.

LRM_EXPORT_207556595493866_20190724_1939

Ans

The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.

Use of id attribute with example
<html>
<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script> function displayResult() { document.getElementById("myHeader").innerHTML = "Have a nice day!"; }
</script>
</body>
</html>

LRM_EXPORT_207556595493866_20190724_1939

Q

5

Differentiate between class and id.

LRM_EXPORT_207556595493866_20190724_1939

Ans

Each element can have only one ID.Each page can have only one element with that ID BUT You can use the same class on multiple elements.You can use multiple classes on the same element.
In simple words, the only difference between them is that “id” is unique in a page and can only apply to at most one element, while “class” selector can apply to multiple elements.

LRM_EXPORT_207556595493866_20190724_1939