Scribd
Upload
2 views3 pages

HTML_Assignment_Solutions

The document provides various HTML examples including headings, paragraphs, links, lists, tables, styles, images, forms, audio/video elements, and semantic elements. It demonstrates the structure and syntax for creating web content using HTML. Additionally, it includes a drag-and-drop API example and a hyperlink to a YouTube video.

Uploaded by

saaiem.221846.ci
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
2 views3 pages

HTML_Assignment_Solutions

The document provides various HTML examples including headings, paragraphs, links, lists, tables, styles, images, forms, audio/video elements, and semantic elements. It demonstrates the structure and syntax for creating web content using HTML. Additionally, it includes a drag-and-drop API example and a hyperlink to a YouTube video.

Uploaded by

saaiem.221846.ci
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/ 3

HTML Assignment Solutions

HTML Heading
<h1>This is a Heading</h1>

HTML Paragraph
<p>This is a paragraph.</p>

HTML Link
<a href="https://www.example.com">This is a link</a>

Ordered List
<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>

Unordered List
<ul><li>Item A</li><li>Item B</li><li>Item C</li></ul>

HTML Table

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

HTML Style
<p style="color:blue;">This is a styled paragraph.</p>
HTML Image (Floating)
<img src="image.jpg" alt="Image" style="float:right;width:100px;height:100px;">

HTML Form

<form action="/submit">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br>
<input type="submit" value="Submit">
</form>

HTML Audio/Video

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<br>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>

YouTube Hyperlink
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Watch this YouTube
video</a>

HTML API (Drag and Drop)

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">


<img id="drag1" src="image.jpg" draggable="true" ondragstart="drag(event)"
width="88" height="31">
</div>
<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>

HTML Semantic Elements

<header>
<h1>Welcome to My Website</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>
<article>
<h2>Main Content</h2>
<p>This is the main content of the page.</p>
</article>
<footer>
<p>Footer content here.</p>
</footer>

You might also like