Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
55 views

HTML Assignment Answers

HTML Assignment with answer

Uploaded by

saaiemsalaar525
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
55 views

HTML Assignment Answers

HTML Assignment with answer

Uploaded by

saaiemsalaar525
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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