HTML Tutorial: and Other Internet Based Tutorials

HTML Tutorial
Ref: https://www.w3schools.com/ and

other internet based tutorials
HTML The class Attribute
◼ The HTML class attribute is used to define equal styles for

elements with the same class name.
◼ All HTML elements with the same class attribute will get the
same style.
◼ HTML elements can have more than one class name, each
class name must be separated by a space.
eg: <h2 class="city main">London</h2>
◼ JavaScript can access elements with a specified class name by
using the getElementsByClassName() method:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h1>London</h1>
<p>London is the capital of England.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
</body>
The id Attribute
◼ The id attribute specifies a unique id for an HTML element (the
value must be unique within the HTML document).
◼ The id value can be used by CSS and JavaScript to perform certain
tasks for the element with the specific id value.
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
◼ Use of ID attributes in JavaScript
◼ In JavaScript, the id attribute is used to manipulate the text, if
you want to make changes on a precise element in your script,
then you can use id attribute.
<script>
function geeksResult() {
document.getElementById("geeks").style.color = "black";
}
</script>
HTML Layouts
◼ Websites often display content in multiple columns (like a magazine
or newspaper).
◼ HTML offers several semantic elements that define the different
parts of a web page:
◼ There are five different ways to create multicolumn layouts. Each
way has its pros and cons:
❑ HTML tables (not recommended)
❑ CSS framework
❑ CSS grid
❑ CSS float property
❑ CSS flexbox

HTML Tutorial: and Other Internet Based Tutorials

Uploaded by

HTML Tutorial: and Other Internet Based Tutorials

Uploaded by

HTML Tutorial

Ref: https://www.w3schools.com/ and

◼ The HTML class attribute is used to define equal styles for

You might also like