Q- How to run HTML programme?

1.     Open Notepad.

2.     2. Type the HTML program as given below.

3.     3. Click file->Save as

4. Select Desktop, type the file name as myfile.html and select All files in Save as type box and Click on save. Your HTML file will be save to desktop .

5. Double click on the file(as shown below) and your webpage is ready for display.

WORKSHEET

Fill in the blanks with correct option

( <br>, <html>,  header, .html, container, tag, title, body, empty , web programming  )

1. Extension of a HTML file is……………………

2. Predefined command in HTML is knows as…………………

3. HTML is a ………………………language.

4. All HTML programs must have………………tag the begging of program.

5. The ………………contains information about the document that will not appear on the actual page.

6. The ………… tag must appear between the head tags.

7. The ……………tags contain all the information and other visible content on the page.

8. A ……….……………tag has an opening and a closing end.

 9. A…………………tag doesn't have a closing end.

10....................is an example empty tag

IMPORTANT TAG 

  • <b> or <strong>  - Bold text
  • <i> <em> - Italic text , Emphasized text
  • <sub> - Subscript text
  • <sup> - Superscript text

  • <STYLE>

    The <style> tag in HTML helps us to modify our text, viewed in the page. This modification includes changing font size, font family, font color etc. Not only the texts but also we can change the style of a body ar part of a page.

    Syntax:

    <tagname style="property:value;">
  • <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title> kv bsr</title>
  </head>
  <body style="background-color:cyan;">
    <h1>THIS IS HEADING TAG</H1>
    <sorng><p style="color:red; background-color:blue;">KENDRIYA VIDYALAYA </P>


  </body>
</html>

  • <html>
<head>
<title>KV WEBSITE</title>
<body>
<h1 style="color:blue;text-align:center"> KENDRIYA VIDYALAYA BULANDSHAHR </h1>
<hr>
<p> This school is CBSE Bord </p>
</head>
<html>
HTML program 

<html>
<body>
<img src="https://bulandshahar.kvs.ac.in/independence-day-154#" alt="kv BSR">
<u>
<strong>
<h1 style="background-color:green; text-align:Center">KV BULANDSHAHR </strong> </u></h1> <Hr>
<H2> ABOUT KV</h2>

<p style="background-color:aliceblue;">
Kendriya Vidyalaya Bulandshahr opened in 1985 is one of the institutes run by KendriyaVidyalaya Sangathan under the Ministry Of Human Resource Development and affiliated with Central Board of Secondary Education 
</p>
<ul>
<li> This is cbse board school</li>
<li> This is bilingual school</li>
<H3>Other information </h3>
<ol>
<li>Admission form fil up in online mode</li>
<li>School provid differnt type of facility</li>
<H3>
<a href="https://bulandshahar.kvs.ac.in/school-contact-us">Click for contact detail</a></h3>

</body>
</html>

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

HTML Ordered List <ol>

The HTML ol tag is used for ordered list. We can use ordered list to represent items either in numerical order format or alphabetical order format.

<html>

<body>

<h2>An unordered HTML list</h2>

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul> 

<ol>

<li>CLASS 8</li>

<li>CLASS 9</li>

<li>CLASS 10</li>

</body>

</html>

Table Tag

The <table> tag defines an HTML table.

An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements.

The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

An HTML table may also include <caption>, <colgroup>, <thead>, <tfoot>, and <tbody> elements. 

<table border=1>

  <tr>

  <th>Employee Name</th>

    <th>Employee Contact no.</th>

  </tr>

  <tr>

    <td>Girish</td>

    <td>Mohan</td>

  </tr>

</table>

<table cellspacing="20">

                                                   Span tag 

A <span> element which is used to color a part of a text:                                     <p>My mother has <span style="color:blue">blue</span> eyes.</p>

HTML <form> Tag

The <form> tag is used to create an HTML form for user input.

The <form> element can contain one or more of the following form elements:

<input> tag

The <input> tag specifies an input field where the user can enter data.

.

The <input> element can be displayed in several ways, depending on the type attribute.

The different input types are as follows:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text"> (default value)
  • <input type="time">
  • <input type="url">
  • <input type="week">
<textarea> tag

The <textarea> tag defines a multi-line text input control.

The <textarea> element is often used in a form, to collect user inputs like comments or reviews.

The size of a text area is specified by the <cols> and <rows> attributes (or with CSS).

<textarea id="w3review" name="w3review" rows="4" cols="50">

<button> tag

The <button> tag defines a clickable button.

Inside a <button> element you can put text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.). That is not possible with a button created with the <input> element!

<button type="button">Click Me!</button>

<select> tag

The <select> element is used to create a drop-down list.

The <select> element is most often used in a form, to collect user input.

<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<option> tag

The <option> tag defines an option in a select list.

<option> elements go inside a <select>, <optgroup>, or <datalist> element.

Note: The <option> tag can be used without any attributes, but you usually need the value attribute, which indicates what is sent to the server on form submission.

<label for="cars">Choose a car:</label>

<select id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<label> tag

It defines a label for an input element.

<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</form>

HTML PROGRAME USING ALL TAG

<html>
<head>
<meta charset="utf-8">
<title>Form Example</title>
</head>
 
<body bgcolor="#CCFF66">
<form align="center">
 
<h3 style="color:#F00">Personal Details</h3>
Name:
<input type="text" name="name" id="name"><br><br>
Password:
<input type="password" name="password" id="password"><br><br>
 
E-mail id: <input type="text" name="name" id="name"><br><br>
Gender: <input type="radio" name="radiogroup1" value="radio" id="radiogroup1"> Male
<input type="radio" name="radiogroup1" value="radio" id="radiogroup2"> Female<br><br>
Contact#: <input type="text" name="mobile" id="mobile">
 
<h3 style="color:#F00">Educational Qualification</h3>
 
Degree: <select name="degree" id="degree">
        <option selected>-- Select Group --</option>
        <option>B.Com</option>
        <option>B.sc</option>
        <option>B.com Computers</option>
        <option>B.A</option>
      </select><br>
      <br>
Engineering: <select name="eng" id="eng">
        <option selected>-- Select Group --</option>
        <option>CSE</option>
        <option>ECE</option>
        <option>CIVIL</option>
        <option>EEE</option>
      </select><br><br>
Hobbies: <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1">Playing chess
<input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup2">Reading Books<br><br>
<h3 style="color:#F00">Address</h3>
<textarea name="textarea" cols="35" rows="5" id="textarea"></textarea><br>
<br>
Attch Resume: <input type="file" name="fileField" id="fileField"><br><br>
 
<input type="image" src="/images/submit_btn.png">
</form>
</body>
</html>