Scribd
Upload
1 views4 pages

HTML Code4

The document provides an overview of basic HTML code, including elements such as headings, paragraphs, and the use of class and id attributes. It also introduces multimedia elements like video and audio, as well as styling for buttons and scrollbars. Additionally, it includes JavaScript for interactive content display.

Uploaded by

Janjan Abejar
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1 views4 pages

HTML Code4

The document provides an overview of basic HTML code, including elements such as headings, paragraphs, and the use of class and id attributes. It also introduces multimedia elements like video and audio, as well as styling for buttons and scrollbars. Additionally, it includes JavaScript for interactive content display.

Uploaded by

Janjan Abejar
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

HTML CODE

BASICS
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
1. The class Attribute
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>

<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
2. The id Attribute
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>


3. The HTML <video> Element
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
Autoplay video
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
4. The HTML <audio> Element
<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Autoplay audio
<audio controls autoplay>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

5. Vertical line
<style>
.vl {
border-left: 6px solid green;
height: 500px;
position: absolute;
left: 50%;
margin-left: -3px;
top: 0;
}
</style>

<div class="vl"></div>
6. Buttons
<style>
.hide {
cursor: pointer;
text-align: left;
font-size: 15px;
background-color: white;
width: 100%;
}
</style>

<body>
<button type="button" class="hide">College Life</button>
<div class="content">
<ul style="list-style-type:none;">
<li> <a href="#london"> OJT </a></li>
<li>My BSA Journey</li>
<li>MY BSAIS Journey</li>
</li>
</ul>
</div>

<script>
var coll = [Link]("hide");
var i;

for (i = 0; i < [Link]; i++) {


coll[i].addEventListener("click", function() {
[Link]("active");
var content = [Link];
if ([Link] === "block") {
[Link] = "none";
} else {
[Link] = "block";
}
});
}
</script>
7. Scrollbar
/* width */
::-webkit-scrollbar {
width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}

You might also like