Create webpage using HTML5 Layout [semantic] tags - Practical [ SWPD 4311603 ]

PRG July 19, 2022

Practical Aim:
Create webpage using HTML5 Layout [semantic] tags
- Sample Output:

<header>, <nav>, <footer>, <section>, <article>, <details>, <summary>, <aside>, <figure>, <figcaption>, Internal CSS

- Solution -  <header> ,<footer>, <section>, <article>, <details>, <summary>, <aside> tags :

First, try at own
Video Tutorial: HTML Image tag and Table tag

Code

Untitled Document

<!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 &copy; 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

Tags:
PRG

Posted by: PRG

Post a Comment

0 Comments