Skip to main content

Chapter-5 LIST / TABLES /FORMS -Technology369kk

 

 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.

  1. Thread tag:-  Used to wrap table head ( Caption & tr with th)
  2. 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.

 




Comments

Popular posts from this blog

Assignment of ITA/ Information Technology and Application BCA- Technology369kk

Q1. What is  computer Explain basic computer architecture and Difference components.  2. Discuss the use of memory in computer system, Explain memory hierarchy  in details. 3. What is software? Explain difference types of software with explain. 4. Write short notes on the given:- (I) Internet. (II) LAN (Local area network ) (III) Search engine (IV) Web browser  Q 1.What is computer Explain basic computer architecture, Difference components of computer.   Computer :- Computer is defined as an electronic device that takes input data and instructions from the user and after processing them, it generates useful and desired output quickly.   A computer is designed to execute applications and provides a variety of solutions through integrated hardware and software components.                            It is fast and automatic device. It works with the help of programs and represents the d...

C++ and Java Practical All Questions Answers - BCA -Technology369kk

C++ and Java  In this post see most important questions for practical questions given by college all questions with answers . Guys I want to say that this is only for suggested post for your practical please request to you change same alphabets, words or anything  methods name and variables name because if you write all words same then this is copy paste for another peoples.  Used Topics:  Keywords, Variables, Condition Statements, Function , Array, Structure, Pointer.                           In OOPs, Class and Objects, Constructor, Poly morph, Encapsulation, Access Specifiers,                               Inheritance etc.  So, Without Time Lose Come to the Points, let's go start Now:        *************************************************************************  C++ 12 ...

Assignment of PMO (Principal of Management and Organization) - Technology369kk

 ** Assignment Of PMO ** Agenda: -  4 Questions discuss in this post. Question 1. Write a d etails note on selection why it Called. negative process.  Question 2. Write a details note on 'span of control. Question 3. Planning is an essential process, do you agree ? Discuss  Question 4. Write a note on management function. Q 1. Write a d etails note on selection why it called negative process.  Ans :-  Selection is the process of choosing the most suitable candidates out of the several candidates available.          Selection is a negative process because there may be more rejected then those selected in most of the candidates that is called selection is a negative process. → Selection process has the following steps:-  [ A .] Screening of applicants - Based on the screening of applicants only those candidates. It Called further process of selection. Who are found eligible for the job Standards of the the organization. [ B .] S...