LIST - TABLES - FORMS
LIST :-
- Lists are used to display content which represent a list.
Unordered List: -
- Used to unordered items.
- Well a rquest : Please create a file for html : index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b>Example-1 :- create a unordered list:- </b><br>
<ul type ="square">
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Support</li>
<li>Contact </li>
</ul>
</body>
</html>
Ordered list: -
- Used to list ordered items.
<b>Example-2 :- create a ordered list:- </b><br>
<ol type="X">
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Support</li>
<li>Contect </li>
</ol>
Tables: -
- The <tables> tag is used to define tables in HTML.
- It Is used to format & display tabular data.
- Tr tag:- Used to display table row.
- Td tag:- Used to display table data.
- Th tag :- Used to place of table data for displaying table headers.
To add a caption to tables, we use <caption> tag inside tables.
- Thread tag:- Used to wrap table head ( Caption & tr with th)
- Tbody tag :- Used to wrap the table body.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b>Example-3 :- create a Table :- </b><br>
<div>
<table border="4" width="100" hight="5000">
<caption><b>
<font face color="Blue">Max Score in Free-Fire</font>
</b></caption> <br>
<thead>
<tr>
<th>S.No</th>
<th>Palyer Name</th>
<th>Max Score</th>
<th>Game</th>
</tr>
<tr>
<td>1.</td>
<td>Shalu</td>
<td>324</td>
<td>Free-Fire</td>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Raj</td>
<td>423</td>
<td>Free-Fire</td>
</tr>
<tr>
<td>3</td>
<td>Rohit</td>
<td>520</td>
<td>Free-Fire</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Claspin attributes :-
- This is used to create cells spanning multiple columns.
Html Forms :-
- An Html forms is used to collect input from the user forms tag is used for the same.
</form>
Element of the forms –
</Forms>
- There are different forms elements for different kinds of user input.
- Input Elements:- Can be of type text, checkbox, ratio, button, and submit
- Tesoro Elements :- Defines a multi-line test input cols and attributes can be used to size the textbox
- Select element :- Defines a drop down list.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b>Example-4:- Create a Form For Travel :- </b><br>
· <div>
· <h1> Travel Form For Trip</h1>
· <form action="form.php">
· <input type="text" placeholder="Enter Your Name"><br>
· <label for="Sectionida">
· <input type="radio" value="Section a" name="Section" id="Sectionida"> Section A
· </label>
· <label for="Sectionidb">
· <input type="radio" value="Section b" name="Section" id="Sectionidb"> Section B
· </label>
· <label for="Sectionidc">
· <input type="radio" value="Section c" name="Section" id="Sectionidc" class="red blue"> Section C
· </label> <br>
· <input type="checkbox" id="foodcanteen" class="red" name="canteen">
· <label for="foodcanteen">Want Food canteen Card</label><br>
· <textarea name="explain" id="explain" cols="30" rows="10"
placeholder="Explain why you wnat to jion "></textarea>
· <select name="car" id="car">
· <option value="Name of Car">Select Your Car</option>
· <option value="Tesla">Tesla</option>
· <option value="Maruti">Maruti</option>
· <option value="Naino">Naino</option>
· <option value="Dzire">Dzire</option>
· <option value="Omni">Omni</option>
·
· </select>
·
· </form>
· </div>
</body>
</html>
- Note :- You don’t have to remember all the tags, you will automatically memories them with practice.
Embedding Video:-
Video tags is used to play video in HTML.
<Video src= ”harry.mp4” > ERROR </video>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b>Example-5:- Create a Video embedding:- </b><br>
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/DwolJT1dV7c" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe> <br>
<hr>
<iframe src="https://www.bing.com/"frameborder="0" width="890px"></iframe> <br>
<hr>
</body>
</html>
Attributes for Video:-
We can use:-
· Width :- To adjust width of a video of a video(Height automatically adjusts)
· We can use autoplay/ loop to autoplay or loop the video.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b>Example-6:- Create a Video Attributes:- </b><br>
<video src="8945502_10903346_HD.mp4" controls autoplay width="523" height="150"></video> <br>
<hr>
</body>
</html>
Practice Set- 5:
Q1. Create an Html Page with Video Embedded inside it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Ans:- <p> <b>Q1. Ans:- </b> </p>
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/mClF6mJV5xM" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</body>
</html>
Q2. Replace this video With a YouTube Video
Q3. Create a Html Page form for a travel website to book a vacation.
Q4. Create a table displaying score of cricket players in match using Html.
.png)
.png)
.png)
0 Comments