Practical Aim:
Create webpage using HTML5 Layout [semantic] tags
- Sample Output:
- Solution - <header> ,<footer>, <section>, <article>, <details>, <summary>, <aside> tags :
Video Tutorial: HTML Image tag and Table tag
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 5 Layout Example</title>
<style>
ul{
list-style-type:none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: Grey;
}
li{
float: left;
}
li a{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: black;
}
header{
color:rgb(23, 3, 84);
}
aside{
background-color: rgb(54, 53, 53);
width: 24%;
float: right;
margin-top: 10px;
height: 365px;
overflow: hidden;
color: wheat;
}
aside a{
color: wheat;
padding: 10px;
}
article{
background-color: bisque;
width: 60%;
height: auto;
overflow: hidden;
margin: 10px;
float: left;
padding: 10px;
}
article li {
float: none;
}
section{
background-color: bisque;
width: 60%;
height: auto;
overflow: hidden;
margin: 10px;
float: left;
padding: 10px;
}
section li{
float: none;
}
details{overflow: hidden;
float: left;
width: 97%;
color: black;
border: black 1px solid;
padding: 10px;}
footer{
overflow: hidden;
float: left;
}
</style>
</head>
<body>
<header>
<h1>Computer Bits Daily</h1>
<h3>Learn Computer Courses for free</h3>
</header>
<nav>
<ul>
<li><a href=" ">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</nav>
<aside>
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsYSVzkUsTCbTp-GNORM28IhCM-UURa_FAe2GkNEE7D0dGB02hHyn__TwFvEkwWYPzkS34pqnZftK-hBCJHKDixaaE65dFkC1IYDJ7kNn4dnKGx81jWr_W66MzB1fL51XMps-_WWA2Cy8/s1600/Logo.png" height="100px " width="100px" />
<figcaption>computer bits logo</figcaption>
</figure>
<a href="https://play.google.com/store/apps/details?id=com.computerdictionary.mcqtutorial.computerbitspradip" target="_blank">Click to Install app Now</a>
</aside>
<article>
<h2> All features of android app</h2>
<ol>
<li>Computer Courses</li>
<li>Computer Dictionary</li>
<li>Subject Wise - Topic Wise Notes</li>
<li>Video Tutorial</li>
</ol>
</article>
<section>
<h2>Subjects Available In app</h2>
<ol>
<li> C programming</li>
<li> Operating System</li>
<li>Java</li>
<li>HTML CSS Javascript</li>
</ol>
</section>
<details>
<summary>Summary about app</summary>
<p> Best app for Learning</p>
</details>
<footer>
<p>Copyright © 2022. All right reserved</p>
</footer>
</body>
</html>
Try here
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<h1> Try your code here</h1>
</body>
</html>
Output
0 Comments