HTML document for multiple text inputs

 MULTIPLE TEXT INPUTS

Code :

<!doctype html>

<html>

    <head>

       <title>Multiple Text inputs</title>

    </head>

    <body>

       <h1>Pull Down Menus :</h1>

          <label for="car" >Select your favourite car :

          </label>

       <select>

          <option select>select_car

          <option>Endorouver</option>

          <option>Fortuner</option>

          <option>Ferari</option>

          <option>Lamborgini</option>

          <option>Ducatti</option>

          <option>Jaguar</option>

       </select><br><br>

       <h1>Check Boxes</h1>

       <form>

       <label for="vehicle">You own the vehicles :</label><br><br>

       <input type="checkbox" id="vehicle1" name="vehicle">

       <label for="vehicle1">Car</label>

       <input style="margin-left: 10%;" type="checkbox" id="vehicle2" name="vehicle">

       <label for="vehicle2">Bike</label>

       <input type="checkbox" id="vehicle3" name="vehicle"

        style="margin-left: 27%;">

        <label for="vehicle3">Cycle</label><br><br>

        <input type="checkbox" id="vehicle4" name="vehicle">

        <label for="vehicle4">Jett</label>

        <input type="checkbox" style="margin-left: 10%;"

         id="vehicle5">

         <label for="vehicle5">Luxurius Car</label>

         <input type="checkbox" id="vehicle6" name="vehicle"

          style="margin-left: 10%;">

          <label for="vehicle6">Formula-1</label><br><br>

          <input type="submit" value="Submit">

         </form>

    </body>

</html>

Web View :

HTML document for password field (Form Tag)

 PASSWORD FIELD

Code :

<!doctype html>

<html>

    <head>

       <title>Pasword Field in Form</title>

       <style>

         .id

         {

             margin-left: 10%;

         }

         #login

         {

             margin-left: 70%;

             background: skyblue;

             color: black;

         }

       </style>

    </head>

    <body>

       <h1>Password field and Text control :</h1>

       <fieldset><legend>Log in</legend>

       <form>

          <label for="name">Username : </label>

          <input class="id" required type="text" name="loginc" maxlength="60"

           id="name"

           placeholder="Enter Username"><br><br>

          <label for="pwd">Password :<br>(min 8 char)</label>

          <input class = "id" name="loginc" type="password" required

           id="pwd"

           minlength="8"

           maxlength="12" placeholder="password"><br><br>

           <input name="loginc" type="submit" value="Log in"

            id="login" onclick="alert('Its Clone!')">

       </form>

       </fieldset>

    </body>

</html>

Web View :

HTML document for Form Tag

 FORM TAG

Code :

<!doctype html>

<html>

    <head>

       <title>Form Tag</title>

       <style>

          .input

          {

              //margin-top: o%;

              margin-left: 30%;

          }

          

       </style>

    </head>

    <body>

       <h1>Form Tag In HTML :</h1>

       <p>

         A form is made up of fields or controls, as well as the markup neccessary to structure the form and control its presentation. The controls are the items in or manipulated by the user to indicate the state of the form. Form controls include text fields, password fields, multiple-line text fields, pop-up menus, scrolled lists, radio buttons, check boxes, and buttons. The most common element used to specify a form control is the &#60input&#62 element.

       </p>

       <fieldset><legend>Employee Detail</legend>

           <form action="action.php">

           <label for="id">Your ID : </label>

           <input required class="input" id="id" type="number"

            placeholder="_Enter your id_"><br><br>

            

              <label for="name">Name  :  </label>

              <input class="input" required placeholder="Enter Name"

               id="name" type="text" class="input"

                maxlength="60"><br><br>

              <label for="pass">Password : <label>

              <input type="password" required class="input" id="pass"

               maxlength="10"

               placeholder="__password__" ><br><br>

               <label>Choose your company</label><br>

              <input id="sci-fi" name="comp" required 

              type="radio"><label for="sci-fi"> 

              Marvel</label> 

              <input type="radio" required name="comp" id="act"

              > <label 

              for="act">Classmate</label>

              <input required type="radio" name="comp" id="com">

               <label for="com">Fonida

              </label><br><br>

              <label for="dep">Choose Your department :</label>

              <select required id="dep" size="5">

                  <option selected>select</option>

                  <option>Food dept</option>

                  <option>Element dept</option>

                  <option>Engineer dept</option>

                  <option>Logic dept</option>

              </select><br><br>

              <label>Your Working : </label><br><br>

              <input required type="radio" name="work" id="home">

              <label for="home">Home</label>

              <input required type="radio" name="work" id="office">

              <label for="office">Office</label><br><br>

              <input type="submit" style="margin-left: 10%;

               border:

               2px solid grey; color: green; border-radius: 4px;"

               value="Submit" onclick="alert('Submitted.')">

              <input style="margin-left: 10%; border: 2px solid grey;

               border-radius: 4px; color: red;" type="reset"

               value="Reset Form">

           </form>

       </fieldset>

    </body>

</html>

Web View :

HTML document for Frame Tag

FRAME TAG

Code :

<!doctype html>

<html>

    <head>

       <title>iframe tag</title>

    </head>

    <body>

       <h1>iframe in HTML :</h1>

       <p>An HTML Frame is a window like content, we can add an Frame to our website using the &#60iframe&#62 tag instead of &#60body&#62 tag.

       </p>

       <p><b>Syntax :</b></p>

       <p>&#60iframe src = &#34Website URL&#34 ...attributes... /&#62

       <p><b>Example :</b></p>

       <iframe style="border: 4px inset grey; border-radius: 10px 0px 10px 0px;" src="https://icodebuzz.blogspot.com" width="80%" height="200px" />

    </body>

</html>

Web View :

HTML document for Table Tag

 TABLE TAG

Code :

<!doctype html>

<html>

    <head>

       <title>Table Tag</title>

    </head>

    <body>

     <h1>Tables in HTML</h1>

     <p>

     A table represents information in a tabular way, like a spreadsheet: distributed across a grid of rows and colums. Web-based tables have also become a common way to create document layout and design. But unlike printed tables, HTML tables can contain information that is dynamic, or interactive, such as the results of a database query. A table is dynamically generated using the template and the results of a particular database query. Taken together, these capabilities make tables one of HTML's most useful and sophisticated resources.

     </p>

     <p><b>Example :</b></p>

     <table border="1" cellpadding="10px">

        <thead>

           <caption>Employee data</caption>

           <tr>

              <th>Employee ID</th>

              <th>Name of Emplyee</th>

              <th>Salary</th>

           </tr>

        </thead>

        <tbody>

           <tr>

              <td>101</td>

              <td>Anas</td>

              <td>100000</td>

           </tr>

           <tr>

              <td>102</td>

              <td>Tim Bernee Lee</td>

              <td>50000</td>

           </tr>

           <tr>

               <td>103</td>

               <td>Charles Babbage</td>

               <td>40000</td>

           </tr>

        </tbody>

     </table>

    </body>

</html>

Web View :

HTML document for image hyperlink

 IMAGE HYPERLINK

Code :

<!doctype html>

<html>

    <head>

       <title>Using Image as a link</title>

    </head>

    <body>

     <h1>Image as a link</h1>

     <p>We can creat an link with image tag and the image will be work like a link.</p>

     <p>click on below image to go to my blog,</p>

     <a href="https://icodebuzz.blogspot.com"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS5x1pLAgAwyY5GE2Eq9w-tRHdikdL2bd8z98-XMGOUt6eYHVyxlnbUeR6K&s=10" width="30%" style="border-radius: 100px; border: 3px dotted green;"></a>

    </body>

</html>

Web View :

HTML document for Image Tag

 IMAGE TAG

Code :

<!doctype html>

<html>

    <head>

       <title>Image Tag</title>

    </head>

    <body>

       <h1>Insert Image</h1>

       <p>

         You can insert any image in your web page by using &#60img&#62 tag. Following is the simple syntax to use this tag.<br><br>

         &#60img src = &#34Image URL&#34 ...attributes... /&#62

         

       </p>

       <p>

       The &#60img&#62 tag is an empty tag, which means that, it can contain only list of attributes and it has no closing tag.

       </p>

       <p><b>Example :</b></p>

       <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBTA89Ul3UGxrlqRC5YTYhZFca_8374SCdXz8kHQyc5l7T7Uf686rc27A&s=10" style="border: 2px solid green; border-radius: 4px" width="100%" alt="bg_img" />

    </body>

</html>

Web View :

HTML document for Email Hyperlink using anchor tag

 EMAIL HYPERLINK 

Code :

<!doctype html>

<html>

    <head>

       <title>Creating Email hyperlink</title>

    </head>

    <body>

       <h1>HTML Email Tag (mailto: ) :</h1>

       <p>

       HTML &#60a&#62 tag provides you option to specify an email address to send an email. While using &#60a&#62 tag as an email tag, you will use <b>malto: email addresss</b> along with <i>href</i> attribute. Following is the syntax of using <b>mailto</b> instead of using http.

       </p>

       <p><b>Syntax :</b><br><br>

         &#60a href = &#34mailto: abc@example.com&#34 &#62Send Email&#60/a&#62 

       </p>

       <p>

        Now, if a user clicks this link, it launches one Email Client (like Lotus Notes, Outlook Express etc.) installed on your user's computer then it would not be possible to send email.

       </p>

       

       <p><b>Example :</b></p>

       <p>click below link to send mail,<br>

       <a href="mailto: kraftontony@gmail.com"><tt>" Write Mail To Me!</tt></a> 

    </body>

</html>

Web View :

HTML document for anchor (Hyperlink) tag

 ANCHOR TAG

Code :

<!doctype html>

<html>

    <head>

       <title>Anchor Tag</title>

    </head>

    <body>

       <h1>Anchor tag &#60a&#62:</h1>

       <p>A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks.<br><br>

       Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases and images. Thus you can create hyperlinks 

using text or images available on a webpage.

       </p>

       <p><b>Example :</b></p>

       <p>Click below link to go to my blog,</p>

       <a href="https://icodebuzz.blogspot.com"><b>iCodeBuzz</b></a>

    </body>

</html>

Web View :

HTML document for Marquee tag

 MARQUEE TAG

Code :

<!doctype html>

<html>

    <head>

       <title>The marquee tag</title>

    </head>

    <body>

        <h1>The marquee tag</h1>

        <p>The HTML &#60marquee&#62 tag is used for scrolling piece of text or image displayed either horizontally across or vertically down your web site page depending on the settings.

        </p>

        <p><b>Example :</b></p>

        <marquee scrolldelay="100" direction="left" bgcolor="cyan" >This is basic example of marquee</marquee>

        <marquee scrolldelay="200" direction="up" bgcolor="deeppink" height="300px">

        The marquee text with the up direction..

        </marquee>

    </body>

</html>

Web View :

HTML document for address tag

 ADDRESS TAG

Code :

<!doctype html>

<html>

    <head>

       <title>Address Tag</title>

    </head>

    <body>

       <h1>Address Tag in HTML</h1>

       <p>The HTML &#60address&#62 tag is used for indicating an address. The address usually renders in italic.

       </p>

       <p><b>Example :</b></p>

       <address>

          512 Yousuf Apartments<br>

          Maqdum city,<br>

          Parbhani - 431401<br>

       </address>

    </body>

</html>

Web View :

HTML document for Font Tag

 FONT TAG

Code :

<!doctype html>

<html>

    <head>

       <title>Font Tag</title>

    </head>

    <body>

        <h1>&#60font&#62 Tag</h1>

        <p>Fonts play a very important role in making a website more user friendly and increasing content readibility. Font face and color depends on the computer and browser that is being used to view your page but you can use HTML tag to add style, size, and color to the text on your website. You can use a tag to set all of your text to the same size, face, and color. The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage simply use the tag. The text that follows will remain changed until you close with the tag. You can change one or all of the font attributes within one tag.

        </p>

        <h2>Set Font Size</h2>

        <p>You can set content font size using<b>size</b> attribute. The range of accepted values is from 1 (smallest) to 7 (largest). The default size of a font is 3.

        </p>

        <p><b>Example : </b></p>

        <font size="1">Font size = "1"</font><br>

        <font size="2">Font size = "2"</font><br>

        <font size="3">Font size = "3"</font><br>

        <font size="4">Font size = "4"</font><br>

        <font size="5">Font size = "5"</font><br>

        <font size="6">Font size = "6"</font><br>

        <font size="7">Font size = "7"</font><br>

        <h3><u>Relative Font Size</u></h3>

        <p><b>Example :</b></p>

        <font size="-2">Font size = "-2"</font><br>

        <font size="-1">Font size = "-1"</font><br>

        <font size="+1">Font size = "+1"</font><br>

        <font size="+2">Font size = "+2"</font><br>

        <font size="+3">Font size = "+3"</font><br>

        <font size="+4">Font size = "+4"</font><br>

        

        <h3><u>Setting Font Face</u></h3>

        <p><b>Example :</b></p>

        <font face="Times New Roman" size="5">Times New Roman</

        font><br>

        <font face="Verdana" size="5">Verdana</font><br>

        <font face="Comic sans MS" size="5">Comic sans MS</font><br>

        <font face="WildWest" size="5">WildWest</font><br>

        <font face="Bedrock" size="5">Bedrock</font><br>

        

        <h3><u>Setting Font Color</u></h3>

        <p><b>Example :</b></p>

        <font color="deeppink">This is deep pink color text.

        </font><br>

        <font color="green">This is green color text.</font><br>

    </body>

</html>

Web View :

HTML document for span tag

 SPAN TAG

Code :

<!doctype html>

<html>

    <head>

       <title>pre Tag</title>

    </head>

    <body>

    <h1>div Tag in HTML</h1>

    <p>

      The HTML &#60span&#62 tag is used for grouping and applying styles to inline elements.<br><br>

      There is a difference between the span tag and the div tag. The span tag is used with inline elements while div tag is used with block-level content.

    </p>

    <p>This is a paragraph <span style="color:green;">of span tag.</span>

    </body>

</html>

WEB VIEW :

HTML document for DIV Tag

 DIV TAG

Code :

<!doctype html>

<html>

    <head>

       <title>pre Tag</title>

    </head>

    <body>

    <h1>div Tag in HTML</h1>

    <p>

      The HTML &#60div&#62 tag is used for defining a section of your document. With the div tag, you can group large sections of HTML elements together and format them with CSS.<br><br>

      The difference between the div tag and the span tag is that the div tag is used with block-level elements while the span tag is used wth inline elements.

    </p>

    <div>

    <p><b>Example : </b></p>

     <p>Welcome to our blog. We provide tutorials on various subjects.</p>

    </div>

    </body>

</html>

WEB VIEW :

HTML document for pre tag

 PRE TAG

Code :

<!doctype html>

<html>

    <head>

       <title>pre Tag</title>

    </head>

    <body>

    <h1>pre Tag in HTML</h1>

    <p>

       The HTML &#60pre&#62 tag is used for indicating preformatted text. The code tag surrounds the code being marked up.<br>

       Browsers normally render pre text in a fixed-pitched font, with whitespace in tact, and without word wrap.

       </p>

       <pre>

   This text is 

     in a fixed-pitch

  font, and it preserves

     both     spaces and line breaks

       </pre>

    </body>

</html>

WEB VIEW :

HTML document for HR Tag

 HR TAG

Code :

<!doctype html>

<html>

    <head>

       <title>HR Tag</title>

    </head>

    <body>

        <h1>HR Tag in HTML</h1>

        <p>Horizontal lines are used to visually break-up sections of a document. The &#60hr&#62 tag creats a line from the current position in the document to the right margin and breaks the line accordingly.

        </p>

        <p>TEXT BEFORE USE OF HR</p>

        <hr>

        <p>TEXT AFTER USE OF HR</p>       

    </body>

</html>

WEB VIEW :

HTML document for list tag

 LIST TAG 

Code :

<!doctype html>

<html>

    <head>

       <title>List tag</title>

    </head>

    <body>

        <h1 align="center"><u>List tag in HTML</u></h1>

        <h2>Ordered List: </h2>

        <h3>Vegetables</h3>

        <ol>

           <li>Tomato</li>

           <li>Potato</li>

           <li>Pumpkin</li>

           <li>Onion</li>

        </ol>

        <h2>Unordered List:</h2>

        <h3>Fruits</h3>

        <ul>

           <li>Apple</li>

           <li>Orange</li>

           <li>Banana</li>

           <li>Pineapple</li>

        </ul>

        <h2>Definition list:</h2>

        <dl>

           <dt>Vegetables</dt>

           <dd>Vegetable are very healthy and tasty to eat. Each vegetable has its own benefits of eating. vegetable are also used to make medicines and juice.

           </dd>

           <dt>Fruits</dt>

           <dd>Fruits are natural and very tasty and healthy to eat. Fruits are also used to make juice and its commonly people drinks it by making juice of them.

           </dd>

        </dl>

                

    </body>

</html>

OUTPUT :