The document discusses a student's institutional practical training. It provides code examples for creating HTML elements like images, paragraphs, hyperlinks, lists, tables and forms. The student aims to learn how to use these HTML tags and display different outputs.
The document discusses a student's institutional practical training. It provides code examples for creating HTML elements like images, paragraphs, hyperlinks, lists, tables and forms. The student aims to learn how to use these HTML tags and display different outputs.
The document discusses a student's institutional practical training. It provides code examples for creating HTML elements like images, paragraphs, hyperlinks, lists, tables and forms. The student aims to learn how to use these HTML tags and display different outputs.
The document discusses a student's institutional practical training. It provides code examples for creating HTML elements like images, paragraphs, hyperlinks, lists, tables and forms. The student aims to learn how to use these HTML tags and display different outputs.
AIM :- Write a program to Add Image and Display Paragraph of NR NARAYAN
MURTY.
THEORY :-
The html <img> tag is used to embed an image in a web page . image are no technically inserted into a web page ; image are linked to web page . the <img> tag creates a holding spaces for the referenced image .
The image tag is empty, it contain attributes only , and does not have a closing tag .
The <img> tag has two required attributes :
• Src -specific the path to the image
• Alt - specific an alternate text for the image.
Syntax: <img src =”url” alt =”alternate text “>
The html <p> element defines a paragraph .
A paragraph always starts on a new lines , and browser automatically add some white space (a margin ) before and after a paragraph.
Html display we cannot be sure how html will be displayed. Large or small screens and resized window will create different results.
<p>Nagavara Ramarao Narayan murty,commonly refered to as narayan murty , is an Indian
IT industrial and the co-founder of Infosy. He is known for his contributon to the outsourcing business model and for his philanthropic work . Murthy has been honored with numerous awards for his achievements, including the padma shri amd padma Vibhushan .He is also a member of the advisory boards of several educational and philanthropic institutions .</p>
</body> </html>
OUTPUT :-
Pankaj sharma 2237422
Software Requirements
• Visual Studio Code
• Web Browser
Hardware Requirements
• Intel I5 11th gen and above processor
• Basic computer components
Pankaj sharma 2237422
PRACTICAL -2
Aim: Write a program to create a Hyperlink tags.
Software Requirements • Visual studio code • Web Browser
Hardware Requirements • Intel I5 11TH gen and above processor • Basic computer components
THEORY: <font>
The <font> tag in HTML plays an important role in the web page to create an attractive and readable web page. The font tag is used to change the color, size, and style of a text.
<img>
The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed
<a> anchor tag
The <a> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
<h4>Here we use img tag and hyperlink tag </h4> <A HREF="C:\Users\Public\Pictures\Sample Pictures/Penguins.jpg"> <img src="https://t3.ftcdn.net/jpg/05/48/56/38/240_F_548563894_s5tGFJjPhc7lp5uG4iJkR77QbgvrKr9e .jpg" height=200 width=200 vspace=50 hspace=50 border=2>
Outcomes: • Student will learn how to insert image in webpage using img tag. • Student will learn how to insert hyper link using anchor tag.
Pankaj sharma 2237422
PRACTICAL -3
Aim: Write a program to make a Ordered and Unordered list .
Theory:
To create an ordered list in html , we can use the ‘<OL>’ tag .within the ‘<OL>’tag , we can use the ‘<li>’
Tag to create a each list item , Here’s an example :
Html
<OL>
<li>First item</li>
<li>second item</li>
<li>third item </li>
</OL>
This will create a bulleted list with three items.
To create an unordered list in html , we can use the ‘<UL>’tag. Within the ‘<UL>’tag ,we can use the ‘<li>’
Tag to create each list items ,Here’s an example :
Html
<UL>
<li>First item</li>
<li>second item</li>
<li>third item </li>
</UL>
This will create a bulleted list with three items.
Pankaj sharma 2237422
Source code: <!DOCTYPE html> <html lang="en"> <head> <title>HTML Ordered list and Unordered list</title> </head> <body> <h1>Ordered list</h1> <h2>List of Furit</h2> <ol> <li>Apple</li> <li>Mango</li> <li>Orange</li> <li>Grapes</li> </ol> <h1>Unordered list</h1> <h2>List of Furit</h2> <ul> <li>Apple</li> <li>Mango</li> <li>Orange</li> <li>Grapes</li> </ul>
</body> </html>
Output:
Pankaj sharma 2237422
Outcomes:
• Student will learn how to insert basic structure tag i.e <B>,<I>,<U>,<HR>,<BR> in webpage. • Student will learn how to insert heading tags in webpage i.e <H1> to <H6>. • Student will learn how make paragraph in webpage using <p> tag.
Pankaj sharma 2237422
PRACTICAL - 4
Aim: Write a program to create a Table.
Theory: <table>
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.
<UL>
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:
<OL>
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Outcomes: • Student will learn how to insert table using <TD>,<TR>,<TH>in webpage. • Student will learn how to merge colums,rows in table. • Student will learn how ordered and unordered list.
Pankaj sharma 2237422
PRACTICAL - 5
Aim: Write a program to create a registration form.
Theory: <form>
The HTML <form> element is used to create an HTML form for user input.
The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
<input>
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
<label>
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.
<checkbox> he <input type="checkbox"> defines a checkbox. <submit>
The <input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a file on the server with a script for processing input data.
<radio>
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Source code: <html> <head><title>Pankaj sharma(2237422)</title></head> <body bgcolor=white> <h3> <center> In this Webpage we create simple form </center> Pankaj sharma 2237422 <form><fieldset> <legend> Personal Detail</legend> <p> <label> Salutation</label> <select name ="Salutation"> <option>Name <option>Mr <option>Mrs </select></p> <p><label > Full name <input name = " First name "></label ></p> <p><label > Last name <input name = " Last name " ></label ></p> <p>Gender<br><label> <input type = "radio" name="Gender" value = "Male" /> Male</label> <input type = "radio" name="Gender" value = "Female" /> Female</label> </p> <p><label> Email :<input type ="email" name = "email" /> </label></p> <p><label>DOB : <input type ="Date" name = "date of Birth" /> </label></p> <p><label> Address : <textarea name="address" cols="30" rows="3" ></textarea> </label></p> <p><label > Choose : Language</label> <ul style="name"> <li>English<input type="checkbox" name ="language" value="English" /> <li>Hindi<input type="checkbox" name ="language" value="Hindi" /> <li>punjabi<input type="checkbox" name ="language" value="Urdu" /> </ul> <button type="submit">Submit</button> <holdset> </holdset> </form> </body> </html>
Output:
Pankaj sharma 2237422
Outcomes: • Student will learn how to create form in webpage. • Student will learn how use button , label, radio etc in form.
