HTML Tutorial
Ref: [Link] 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() {
[Link]("geeks").[Link] = "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
