Scribd
Upload
51 views

HTML Assignment Answers

HTML Assignment with answer

Uploaded by

saaiemsalaar525
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
51 views

HTML Assignment Answers

HTML Assignment with answer

Uploaded by

saaiemsalaar525
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

NAME : SHAIKH SAAIEM SALAAR MOHAMMED SALEEM

ROLL NO : 221850 CLASS : TE – IOTCSBCT

HTML Heading

<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

HTML Paragraph

<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>Created By Saaiem Salaar.</p>
<p>Here's Another One.</p>
</body>
</html>

HTML Link

<!DOCTYPE html>
<html>
<body>
<h1>HTML Links</h1>
<p><a href="https://in.linkedin.com/in/salaarsaaiem525">Visit SAAIEM SALAAR's LinkedIn</a></p>
</body>
</html>

SAAIEM SALAAR 221850


Ordered List
<!DOCTYPE html>
<html>
<body>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</body>
</html>

Unordered List

<!DOCTYPE html>
<html>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>

HTML Table

<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table> </body> </html>

SAAIEM SALAAR 221850


HTML Style

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="text-align:center;">I am centered</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>

HTML Image (Image Floating)

<!DOCTYPE html>
<html>
<body>
<img src="img_sam.jpg" alt="Image" style="float:right;"/>
</body>
</html>

HTML Form

<!DOCTYPE html>
<html>
<body>

<form action="/submit_form" method="post">


<b><label for="fname">First name:</label><b><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

SAAIEM SALAAR 221850


HTML Audio/Video

<!DOCTYPE html>
<html>
<body>

<audio controls>
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<br><br>

<video width="320" height="240" controls>


<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

</body>
</html>

YouTube Hyperlink

<!DOCTYPE html>
<html>
<body>
<p>
<a href="https://www.youtube.com" target="_blank"> Visit YouTube </a>
</p>
</body>
</html>

HTML API (Drag and Drop)

<!DOCTYPE HTML>
<html>
<head>
<title>Drag and Drop Example</title>
<style>

SAAIEM SALAAR 221850


#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
img {
cursor: move;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div
id="div1"
ondrop="drop(event)"
ondragover="allowDrop(event)">
</div>
<br>
<img
id="drag1"
src="img_logo.gif"
draggable="true"

SAAIEM SALAAR 221850


ondragstart="drag(event)"
width="336"
height="69">

</body>
</html>

HTML Semantic Elements

<!DOCTYPE html>
<html>
<head>
<title>Semantic HTML Example</title>
<style>
header, nav, section, footer {
padding: 10px;
margin: 10px;
border: 1px solid #cccccc;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
text-decoration: none;
color: #0066cc;
}
nav ul li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>

<header>

SAAIEM SALAAR 221850


<h1>This is the header</h1>
</header>

<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<section>
<h2>This is a section</h2>
<p>This is some content within the section.</p>
</section>

<footer>
<p>This is the footer</p>
</footer>

</body>
</html>

SAAIEM SALAAR 221850

You might also like