Scribd
Upload
25 views15 pages

HTML Basics: Images, Links, and Lists

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.

Uploaded by

guy977867
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views15 pages

HTML Basics: Images, Links, and Lists

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.

Uploaded by

guy977867
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

DEPARTMENT OF INFORMATION

TECHNOLOGY

Institutional Practical Training (IPT)


Practical File

Subject: Summer Institutional Training

CHANDIGARH ENGINEERING COLLEGE


(LANDARN)

Pankaj sharma 2237422


PRACTICAL – 1

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>this is paragraph </p>

<P>this is another paragraph </p>.

Pankaj sharma 2237422


Source Code :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Narayan Murty</title>
</head>
<body>
<img src="[Link]

<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.

Source Code:
<html>
<head>
<title>Workgroup</title>
</head>
<body bgcolor="sky blue" alink="blue" vlink="red">
<font face="times new roman" size="12">

<h3>THIS IS MY FIRST WEBSITE </H3>


<h4>Here we use img tag and hyperlink tag </h4>
<A HREF="C:\Users\Public\Pictures\Sample Pictures/[Link]">
<img
src="[Link]
.jpg" height=200 width=200 vspace=50 hspace=50 border=2>

Pankaj sharma 2237422


</a>
<A HREF="C:\Users\Public\Pictures\Sample Pictures/[Link]">
<img src="[Link]
height=200 width=200 vspace=50 hspace=50 border=2>
</a>
<A HREF="C:\Users\Public\Pictures\Sample Pictures/[Link]">
<img src="[Link] height=200
width=200 vspace=50 hspace=50 border=2>
</A>
</font>
</body>
</html>

Output:

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:

Source code:
<!DOCTYPE html>
<html>
<head>
<style>table,th,td {
border: 1px solid black;
border-collapse:collapse ;
}
th {
text-align: left;
}

</style>
</head>
<body>
<table style="width: 70%">
<tr>
<th>name</th>
<th>Age</th>

Pankaj sharma 2237422


<th>salary</th>
</tr>
<tr>
<td>Kartik</td>
<td>19</td>
<td>20,000</td>
</tr>
<tr>
<td>shivam</td>
<td>20</td>
<td>35,000</td>
</tr>
<tr>
<td>pankaj</td>
<td>21</td>
<td>40,000</td>
</tr>
</table>

</body>
</html>

Output:

Pankaj sharma 2237422


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.

Pankaj sharma 2237422

Common questions

Powered by AI

The <form> tag in HTML is pivotal for collecting user input on websites. It acts as a container for various input elements such as text fields, checkboxes, radio buttons, and submit buttons. These elements allow users to provide information or make selections which are then sent to a form-handler for processing. The use of elements like <input>, <label>, and different input types contribute to creating comprehensive forms for user interaction .

The <a> tag, with its href attribute, creates hyperlinks in HTML, allowing users to navigate instantly between different pages and resources. The href attribute indicates the destination of the link. This functionality is crucial in web development as it enhances user experience by enabling easy access to various parts of websites and other external resources, thus forming a core component of web navigation .

HTML syntax and browser variability can lead to inconsistent rendering due to differences in browser interpretations of HTML. To ensure consistent display, developers can employ strategies like using standardized, semantic HTML, leveraging CSS resets to normalize defaults, and testing across multiple browsers. Using modern web standards and validating code can also minimize discrepancies. Responsive design and polyfills ensure better compatibility across devices and browsers .

The <table> tag in HTML is essential for structuring and displaying data in a tabular format. It uses rows (<tr>) and cells (<td> and <th>) to organize data logically. Attributes such as 'border', 'cellspacing', and 'cellpadding' enhance table presentation by defining the visual separation of cells. Styling attributes can improve readability and aesthetics, making tables a robust tool for presenting structured information .

Using inline styles for table formatting in HTML allows for quick, localized styling but can make maintenance cumbersome and clutter the HTML with code. In contrast, using a separate CSS stylesheet promotes cleaner code separation, reusability, and easier maintenance. However, it may introduce additional overhead for smaller projects without existing stylesheets. Inline styles are beneficial for quick fixes, while CSS stylesheets are ideal for scalable, maintainable web design .

HTML tags <b>, <i>, and <u> are used to emphasize text, improving readability and conveying meaning. The <b> tag bolds text, signifying importance or key concepts. The <i> tag italicizes text, often used for citations or imagined speech. The <u> tag underlines text, commonly highlighting hyperlinks or special emphasis. Together, these tags help differentiate content and guide the reader's focus .

The HTML <img> tag uses two key attributes: 'src' and 'alt'. The 'src' attribute specifies the path to the image, determining which image will be displayed on the webpage. The 'alt' attribute provides alternate text for the image, which is used if the image cannot be displayed and is also useful for accessibility purposes, allowing screen readers to describe the image to users who are visually impaired. These attributes collectively ensure the image is referenced properly on the web page and described when necessary .

The <style> tag allows for inline CSS styling within an HTML document, enabling developers to customize the appearance of specific elements directly. While it simplifies quick styling changes, it can complicate code maintenance and scalability for larger projects. External CSS files promote cleaner code separation and reusability across multiple pages, though they can increase dependency and initial setup complexity. For large-scale or multi-page sites, external stylesheets are generally preferable .

Ordered lists (<ol>) in HTML are useful when the sequence of items is important, providing a numerical or alphabetical order. Unordered lists (<ul>) display items with bullet points, suitable for non-sequential information. The choice depends on the context and the importance of item order. For example, steps in a process should use an ordered list, while a shopping list might use an unordered list .

When designing a registration form using HTML, considerations include using semantic tags to improve readability, providing labels for inputs to aid screen reader users, and ensuring form elements are logically grouped with fieldsets. Accessibility can be enhanced by using proper placeholder text, input validation, and visually distinct buttons and controls. Ensuring mobile responsiveness by using flexible layouts and scalable input fields is also crucial for a positive user experience .

You might also like