HTML code examples

Here you will find an example about how to design an empty page with embed code for YouTube. You are free to use the code anywhere you may see fit. Have fun learning about coding your website.

Preview the following code by clicking here

<!DOCTYPE html>
<html> <!-- start html tag -->
<head> <!-- start head tag -->
<title>Example</title> <!-- page title -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <!-- preconnect to google api -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <!-- preconnect to gstatic -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Style+Script&display=swap" rel="stylesheet"> <!-- load font family -->

<style> <!-- start style tag -->
body {
color: #000000;
background-color: #ffffff;
font-family: "Roboto";
font-size: 1em;
}

h1, h2, h3, h4 {
color: #ffffff;
font-family: "Style Script";
font-size: 18px;
}

h5, h6 {
color: #000000;
font-family: "Roboto";
font-size: 14px;
}

.header {
width: 100%;
height: 120px;
margin: 20px 20px 0 0;
background-color: #000000;
border-bottom: 1px solid #ffffff;
font-family: "Roboto";
font-size: 1em;
}

.front-pageimage {
Width: 100%;
height: 120px;
margin: 20px 20px 0 0;
background: url("/assets/img/frontpageimage.png");
}

.content {
width: 100%;
height: auto;
margin: 20px 20px 0 0;
color: #000000;
border-bottom: 1px solid #000000;
font-family: "Roboto";
font-size: 1em;
}

.footer {
width: 100%;
height: 120px;
margin: 20px 20px 0 0;
text-align:center;
color: #ffffff;
background-color: #000000;
font-family: "Roboto";
font-size: 1em;
}
</style> <!-- end style tag -->

</head> <!-- end head tag -->
<body> <!-- start body/content tag -->

<div class="header"> <!-- start header div -->
<h1>SATHACK</h1> <!-- start page title in header -->
<h2>subtitle, slogan...</h2> <!-- start subtitle, slogan in header -->
</div> <!-- end header div -->
<div class="front-pageimage"> <!-- start front-pageimage div -->
</div> <!-- end front-pageimage div -->

<div class="content"> <!--
<h5>Content Header, Title</h5>
<h6>Subtitle<br>Content</h6>
<iframe width="100%" height="490" src="https://www.youtube.com/embed/2X4l0ID5HiI?si=pusseCfOZgw6M5gG" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

<div class="footer">
<h2><span style="margin:0px auto;text-align:center;">Copyright &copy;2024</span></h2>
</div>

</body> <!-- end body tag -->
</html> <!-- end html tag -->

Categoryblog posts

One thought on “HTML code examples”

Leave a Reply Cancel reply