HTML (HyperText Markup Language) Siddharth Srivastava

Introduction to HTML HTML stands for Hypertext Markup Language It is used to develop web pages and web applications. HTML is composed of HTML Tags. These Tags are interpreted by web-browser, in such a way that elements (like text, image, etc.) associated with tags are rendered on browser in desired way. Now Lets start with practical of HTML

Understanding Structure and Tags To Tag Subject Tag Body Tag Sender Tag

Understanding Structure and Tags To Tag Subject Tag Body Tag Sender Tag

HTML Structure & HTML Tags Understanding Basic HTML Structure & HTML Tags 1)How to write HTML file. 3) <Title> </Title> tag in HTML. 2) How to store HTML File. DEMO of 4) How to use <BR> using first.html Use first.html file to demonstrate use of <br> tag

Task 1 Go to URL https://www.cse.iitk.ac.in/users/sidsri/SummerSchool/ Download Task 1. Your aim is to use <br> tag as told just now. You can verify your result by opening answer1.html file. Your result must match output of this file. Now Lets start with practical of <br> tag.

Understanding Paragraph Tag <p> </p> denotes paragraph tag. Any thing written between <p> </p> is considered as paragraph and browser automatically adds some space before <p> and after </p> tag. Check It out using “Second.html” and “The Jungle Book Summary.doc” file. Align attribute can only be placed with <p> tag not with </p> tag. If we don’t use align attribute then by default paragraph is left align. <p> tag can have align attribute which can change alignment of text. As shown in class <p align=“Left”>I am Left Align</p> I am Left Align <p align=“Right”>I am Right Align</p> I am Right Align <p align=“Center”>I am Center Align</p> I am Center Align <p align=“Justify”>I am Justify</p> I am Justify

Task 2 Go to URL https://www.cse.iitk.ac.in/users/sidsri/SummerSchool/ Download Task 2. Your aim is to use <br>, <p> </p> tag and align attribute as told just now. You can verify your result by opening answer2.html file. Your result must match output of this file. Now Lets start with practical of <br>, <p> </p> tag and align attribute.  

Understanding Heading Tag There are six type of heading tags present in HTML as shown below <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>

Understanding Horizontal Rules Tag <hr> denotes horizontal rule tag. Like <br> tag it is also ending tag i.e. it don’t have any closing tag associated with it. When we use <hr> then a line is displayed on webpage. This line is horizontal and often known as horizontal rule or horizontal line. It is used to break the content of webpage using horizontal rule or horizontal line.

Task 3 Go to URL https://www.cse.iitk.ac.in/users/sidsri/SummerSchool/ Download Task 3. Your aim is to use heading tags to give proper size to headings. You can verify your result by opening answer3.html file. Your result must match output of this file. Now Lets start with practical of heading tags.  

[Syntax <img src=“filename.jpg”>] Handling Images in HTML Images are handled in html using <img> tag. <img> tag is also ending tag as <br> (i.e. it do not have an ending tag associated with it). Since images are stored in files so they are accessed using “src” attribute. [Syntax <img src=“filename.jpg”>] Image size is set using “width” and “height” attributes. [Syntax <img src=“filename.png” width=“200px” height=“150px”> where px=pixel]

Handling Images in HTML (Alt attribute) Syntax: <img src=“url” alt=“Image not found”>

Task 4 Go to URL https://www.cse.iitk.ac.in/users/sidsri/SummerSchool/ Download Task 4. Your aim is to use image tag and its attributes. You can verify your result by opening a.html,b.html,c.html and d.html files. Now Lets start with practical of this tag.  

Concept of Table in HTML

Table Tag in HTML Syntax: <table> <tr> <th>Name</th> <th>Age</th> <th>Roll No.</th> </tr> <td>Ajay</td> <td>21</td> <td>1</td> <td>Vijay</td> <td>19</td> <td>3</td> <td>Ram</td> <td>22</td> <td>2</td> </table>

Table Tag in HTML (border attribute) Syntax: <table border=‘2’ cellspacing=‘5’ cellpadding=‘10’> <tr> <th>Name</th> <th>Age</th> <th>Roll No.</th> </tr> <td>Ajay</td> <td>21</td> <td>1</td> <td>Vijay</td> <td>19</td> <td>3</td> <td>Ram</td> <td>22</td> <td>2</td> </table>

Task 5 Go to URL https://www.cse.iitk.ac.in/users/sidsri/SummerSchool/ Download Task 5. Your aim is to use table tag and its attributes. You can verify your result by opening a.html. Now Lets start with practical of this tag.  

Task 6 Homework or Classwork

Understanding <a> tag DEMO of Hyperlinking Using 7.html

Task 7 Go to URL https://www.cse.iitk.ac.in/users/sidsri/SummerSchool/ Download Task 7. Your aim is to use hyperlink tag and its attributes. You can verify your result by opening a.html. Now Lets start with practical of this tag.  

Some Easy and Quick tags While processing text using word processor software like ms-word, libera office, etc. you frequently use following options. Underline the text. Make some portion of text BOLD Make some portion of text Italics. Create Lists (having numbers like this one, or having bullets) which may be ordered or unordered. In HTML using following tags you can do all these things.

Some Easy and Quick tags Feature Tag Output Underline <u> I am Underlined</u> I am Underlined Bold <b> HI I am Bold </b> HI I am Bold Italics <i> Am I italics </i> Am I Italics Unordered List [where ul=unordered list li=list item ] <ul> <li>I am List Item 1</li> <li>I am List Item 2</li> </ul> I am List Item 1 I am List Item 2 Ordered List ol=ordered list <ol> <li> List Item 1</li> <li>List Item 2</li> </ol> 1. List Item 1 2. List Item 2 Note* Red colour statements in “feature” column are used to represent meaning of tag elements.

Some Easy and Quick tags Feature Tag Output Ordered List [starting at Index 5] {“start” attribute alter the starting index of ordered list} <ol start=“5”> <li> List Item 1 at index 5</li> <li>List Item 2 at index 6</li> </ol> 5. List Item 1 at index 5 6. List Item 2 at index 6 Description List [where dl=description list dt=description term dd=description data ] <dl> <dt>Eyes</dt> <dd>Part of Body use to see.</dd> <dt>Cycle</dt> <dd>A vehicle use for locomotion</dd> </dl> Eyes Part of Body use to see. Cycle A vehicle use for locomotion

Some Easy and Quick tags

Task 8 Go to URL https://www.cse.iitk.ac.in/users/sidsri/SummerSchool/ Download Task 8. Your aim is to use bold, italic, underline, list tags and their attributes. You can verify your result by opening answer8.html. Now Lets start with practical of these tag.  

Now Starts Fun

Introducing Form Elements Blackboard Work Starts Now….

Understanding Basic Form elements Task 9 Understanding Basic Form elements Form Text Fields (both for Text and Password) Buttons Concept of Client Server Architecture <form> <input type=“text> <input type=“password”> <input type=“button”> </form>

Login Form Task 10 <form name="f1" id="fid1"> User Name:<br> <input type="text" name="tf1" id="tf1" required><br> Password:<br> <input type=“password" name="tf2" id="tf2" required><br><br> <input type="button" name="b1" id="b1" value="Reset"> <input type="submit" name="b2" id="b2"> </form>

Understanding Basic Form elements Task 11 & 12 Understanding Basic Form elements Check boxes Radio Buttons <form> <input type="checkbox" name=“food" value=“DOSA">DOSA<br> <input type="checkbox" name=“fo" value=“PIZZA">PIZZA </form> <form> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form>

Understanding Basic Form elements Task 13 Understanding Basic Form elements option <form> <select> <option>one</option> </select> </form>

Understanding Basic Form elements Task 14 Understanding Basic Form elements Range <form> <input type=“range” min=‘0’ max=‘100’ value=‘50’> </form>