Scribd
Upload
31 views13 pages

(Pooja Ashok Dange) March - Full - Stack24 (HTML) Assignments

Uploaded by

A14Dange Pooja
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
31 views13 pages

(Pooja Ashok Dange) March - Full - Stack24 (HTML) Assignments

Uploaded by

A14Dange Pooja
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/ 13

HTML ASSIGNMENT

1. Write a program to design semantic and non - semantic tags with web page form
layout to get this desired output?
Ans.
Program code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>WELCOME TO MY WEBSITE!</h3>
<small>This is the home page of my website.</small>
<h3>About Me</h3>
<small>My name is John Doe and I'm a web developer.</small>
<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ol>
<small>Row 1, Column 1 Row 1, Column 2</small><br>
<small>Row 2, Column 1 Row2, Column2</small>
<h3>Contact Me</h3>
<form>
<label for="name">Name:</label>
<input type="text" name="uname"> <br><br>
<label for="mail">Email:</label>
<input type="email" name="mail"> <br><br>
<label for="message">Message:</label>
<textarea></textarea> <br><br>
<input type="submit" value="Send">
</form> <br>
<small>Write some content here</small><br>
<small>write Some more content here</small>
</body>
</html>

Output:

2. Write a program to display the text formatting tags and meta tags in HTML as
given below?
Ans.
Program Code:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<h1>Text Formatting Example</h1>
<small>This is <b>important</b> text.</small> <br><br>
<small>This is <em>emphasized</em> text.</small> <br><br>
<small>This is <u>underlined</u> text.</small> <br><br>
<small>This is <s>strikethrough</s> text.</small> <br><br>
<small>This is <sup>superscript</sup> and this is <sub>subscript</sub> text.</small>
<br><br>
<small>This is <code>code</code> text.</small> <br><br>
<small>These tags will be used to make a <b>bold,</b> <i>italic,</i> and
<u>underline</u> styles.</small>
<pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is
preformatted
text.<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This preserves
white space and line breaks.</pre><br>
<blockquote>This is a block quote.<br><br>It can be used ti ondicate long quotation
that is set off from the main text.</blockquote><br>
<small>Superscript text appears half a character above the normal line and is
sometimes rendered in a smaller font.</small><br><br>
<small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Superscript text can be used for footnotes
like www.</small>
</body>
</html>
Output:
3. Write a program to show all form input controls in HTML5 as given below?
Ans.

Program Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<label > Name:</label>
<input type="text" value="Enter your name" id="">
<label for=""> Password:</label>
<input type="text" value="Enter your Password" id="">
<label for="">Email:</label><br>
<input type="text" value="Enter your email" id="">
<label for="Age">Age:</label>
<input type="number" id="">
<label for="Rating">Rating:</label>
<input type="range" name="" id="">
<label for="DOB"> Date of Bith:</label><br>
<input type="date" name="dom" id="">

<label for="timer">Timer:</label>
<input type="time" value="12:00" id="">

<label for="image">Image:</label>
<input type="image" width="150" height="50" id="">
<br><br>
<label for="week">Week:</label>
<input type="week" name="" id="">
<br>
<br>

<label for="month">Month:</label>
<input type="month" name="" id="">
<br><br>

<label for="date_local">Datetime-Local:</label>
<input type="datetime-local" name="" id="">
<br><br>

<label for="url">URL:</label>
<input type="url" name="" id="">
<br><br>

<label for="search">Search:</label>
<input type="search" name="" id="">

<br><br>

<label for="Gender">Gender:</label>
<br><br>
<label for="Male">Male</LAbel>
<input type="radio" value="" checked>
<label for="Female">Female</label>
<input type="radio" name="" id="">
<br><br>
<label for="Intrest">Intrest:</label>
<br><br>
<input type="checkbox" id="">
<label for="">Reading</label>
<input type="checkbox" name="" id="">
<label for="">Sports</label>
<label for="Country">Country:</label>
<select name="Country" id="">
<option value="United States">United States</option>
<option value="United States">India</option>
<option value="United States">Dubai</option>
<option value="United States">Turkey</option>
</select>

<label for="Msg">Message:</label><br>
<TExtarea rows="4" cols="50" >Enter your message</TExtarea>

<button>Submit</button>

</form>

</body>
</html>
Output:

4. Write a program to load multimedia content into a webpage like given below?
Ans.
Program Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Video</h2>
<video src="" height="250px" width="450px" controls></video>
<h2>IFrame</h2>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/d21POI9bMps?si=yFkRm_CebVIlNybp"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<br><br><br><br>
<h1>My Multimedia Website</h1>
<h2>Image</h2>
<img src="./excelr.jpg" alt="" height="200px">
<h2>Audio</h2>
<audio src="" controls></audio>
</body>
</html>

Output:
5. Write a program to create ‘SVG’ inline and external like given below?
Ans.
Program Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>SVG Inline Graphic Example</h1>
<svg height="200" width="600">
<rect width="100" height="100" fill="red" x="30" y="30" opacity="0.75"></rect>
<circle r="40" cx="80" cy="80" fill="white" ></circle>
<h1>External SVG Example</h1>
<img src="./excelr.jpg" height="120px">
<img src="./error.jpg" alt="">
</svg>
</body>
</html>
Output:

You might also like