<!
DOCTYPE html>
<html>
<head>
<title>Android-Based Computer Network Topology Course</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>Android-Based Computer Network Topology Course</h1>
</header>
<nav>
<ul>
<li><a href="#topology">Topology</a></li>
<li><a href="#slide">Slide</a></li>
<li><a href="#video">Video</a></li>
<li><a href="#audio">Audio</a></li>
</ul>
</nav>
<section id="topology">
<h2>Topology</h2>
<p>Computer network topology is the arrangement of the various elements (links,
nodes, etc.) of a computer network.</p>
</section>
<section id="slide">
<h2>Slide</h2>
<img src="slide1.png" alt="Slide 1">
<img src="slide2.png" alt="Slide 2">
</section>
<section id="video">
<h2>Video</h2>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</section>
<section id="audio">
<h2>Audio</h2>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</section>
</body>
</html>
Css:
body {
background-color: #e0f0ff;
font-family: Arial, sans-serif;
header {
background-color: #3366cc;
color: white;
padding: 10px;
text-align: center;
nav ul {
list-style-type: none;
padding: 0;
nav ul li {
display: inline;
margin-right: 10px;
nav ul li a {
background-color: #3366cc;
color: white;
padding: 5px;
text-decoration: none;
nav ul li a:hover {
background-color: #6699ff;
section {
margin: 20px 0;
section h2 {
background-color: #3366cc;
color: white;
padding: 5px;
section img {
width: 100%;
height: auto;
margin-bottom: 10px;
video {
width: 100%;
height: auto;
audio {
width: 100%;
