Scribd
Upload
98 views88 pages

HTML Web Programming Internship Report

Uploaded by

deshmukhrutuja461
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
98 views88 pages

HTML Web Programming Internship Report

Uploaded by

deshmukhrutuja461
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

INDEX Internship Report

WEB PROGRAMMING
Including HTML CSS PHP WORDPRESS

By KALAVATI TECHNOLOGIES
CHHATRAPATI SAMBHAJINAGAR

MRUNAL NISHIKANT DESHPANDE


GOVERNMENT POLYTECHNIC NANDED
GOVERNMENT POLYTECHNIC NANDED
INFORMATION TECHNOLOGY

Date: 05/06/2024

Internship Daily Report

Student Name: Mrunal Nishikant Deshpande

Roll no: 914

HOD : S.N.Dhole

Guide Name: Mr .Nitin Nikam sir

Documentation:
Status of activities planned in [Current Session]

➢ Date • Description ✓ Status


05/06/2024 Intro of HTML. ✓ Complete
Understanding Internet
What is Website
06/06/2024 Learn HTML Structure ✓ Complete
Assignment
07/06/2024 Installation of ✓ Complete
Notepad++ IDE
10/06/2024 Learn HTML Table tag ✓ Complete
Understanding table
code structure
Learn Font
family.Fontcolor , Font
size
Task 1.create any table
Task 2.Adding index to
table
Task 3.marksheet
11/06/2024 Practice Questions ✓ Complete

12/06/2024 Marquee tag and its ✓ Complete


attribute like Direction,
Scrollamount,Behaviour.
What is hr and br tag ?
How to add images in
HTML page ?
How to add Audio clip in
HTML page ?
How to add youtube
video in HTML page ?

13/06/2024 Learn <form> tag in ✓ Complete


HTML .
Learn Input Type tag
and their types like
Date, Time, Password,
Checkbox, Text,
Number, Color, email
etc.
Task: Create a
Registration Form.
✓

✓
✓

✓
Documentation :
Date: 05/06/2024

• What is HTML ?
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc

• Introduction to HTML

HTML stands for Hyper Text Markup Language. It is used to design web pages
using a markup language. HTML is a combination of Hypertext and Markup
language. Hypertext defines the link between web pages. A markup language is
used to define the text document within the tag which defines the structure of
web pages

HTML is a markup language which is used for creating attractive web pages with
the help of styling, and which looks in a nice format on a web browser.

An HTML document is made of many HTML tags and each HTML tag contains
different content

• What is Website ?

• A collection of web pages and media over the internet is called a website
• The website can be published on at least one web server and can be
identified by a common domain name, for example - facebook.com,
google.com, youtube.com.
• All the websites that are accessible publicly come under the World Wide
Web.

Date: 06/06/2024

• Learn HTML Structure

An HTML document is divided into two parts: Head part- The title and metadata
of a web document are contained in the head element. Body part- The body
element includes the information that you wish to display on a web page

Understanding code structure of HTML

Html is a case insensitive language. Case insensitive means there is no difference


in upper case and lower case (capital and small letters) both treated as the same,
for r example 'D' and 'd' both are the same here.

There are generally two types of tags in HTML:

1. Paired Tags : These tags come in pairs. That is they have both opening(< >) and
closing(</>) tags.

2.Empty Tags : These tags do not require to be closed.

The basic structure of an HTML document consists of 5 elements:

1. <!DOCTYPE>
The tag in HTML is used to inform the browser about the HTML version used in
the web page. It is referred as the document type declaration (DTD).

2. <html>

<html> is a root element of html. It's a biggest and main element in complete
html language, all the tags, elements and attributes enclosed in it or we can say
wrap in it, which is used to structure a web page.

3. <head>

This tag represents the document's header which can keep other HTML tags like
<title>, <link> etc.

4. <title>

This <title> tag in HTML displays the title of a web page and can help in higher
rankings in search results if appropriate keywords are included. It gives a relevant
title to the full HTML content. It appears at the top of the browser window.

5. <body>

The <body> tag in HTML specifies the main content of an HTML document that
appears on the browser. It can contain headings, text, paragraphs, photos, tables,
links, videos etc .

The <body>tag must come after the <head> tag or it must be inserted between
the </head> and </html> tags.

This tags are necessary for HTML document

➢ HTML structure

<!DOCTYPE html>
<html>

<head>

<title> Webpage Structure </title>

<body>

Body of Web…||

</body>

</head>

</html>

Date: 06/06/2024

Assignment : 1
1. Are the HTML tags and elements the same thing?

HTML Tags and Elements are sometimes perceived as the same. However, they are
not. There is a subtle difference between HTML elements and tags that many
people aren't aware of.
HTML Tags : are building blocks of HTML Page. They tell the browser how it should
display content to the user. A tag starts with a < bracket and ends with a > bracket.
Most tags exist in pairs in HTML. Tags have an opening and closing part. They are
similar, except the closing part has a / sign after the opening bracket.

Syntax

Opening tag: <TagName>

Closing tag: </TagName>

HTML Element : includes a start tag, content, and an end tag. HTML Elements are
components of the web page. Let's say we created a div block and filled it with
some text. Then the text-filled div becomes the component of the HTML Page. The
<div></div> tags along with the content inside it becomes a component and HTML
Element. This will be rendered and shown to the user.

Syntax

<p>This is an element<p>

An HTML element consists of a start tag, some content, and an end tag.

2. What are tags and attributes in HTML?


HTML Tags:

HTML Tags are the starting and ending parts of an HTML element. They begin with
< symbol and end with > symbol. Whatever is written inside < and > are called tags.

Example: In this example <b> is the starting tag and </b> is the ending tag.

<b> </b>

Tags in HTML are not case sensitive .Tags can be nested. Tags are always enclosed
in angle brackets: < >

Some tags are:-


• <b> to make bold text
• <body> main HTML part
• <br> for break
• <div> it is a division or part of an HTML document
• <i> to make an italic text

HTML Attributes:

HTML Attributes is used to define the character of an HTML element. It always


placed in the opening tag of an element. It generally provides additional styling
(attribute) to the element.

Example: In this example <p> is the starting tag and </p> is the ending tag with
extra css attributes.

<p align="center">This is paragraph.</p>

Here are some commonly used attributes in HTML:

• style - Used to apply inline CSS styles to an element.


• src - Used to specify the URL of an image or other media file to be displayed
on a page.
• alt - Used to provide a text description of an image for accessibility purposes.
• title - Used to provide additional information about an element, typically
displayed as a tooltip when the user hovers over the element.

➢ Differernt HTML Tags


3.What are HTML Entities?
HTML entities are used to represent special characters and symbols in HTML
documents.

They are represented by an ampersand (&), followed by a mnemonic or numeric


code, and terminated by a semicolon (;).

There are two types of HTML entities:

1.Named entities:
These are represented by mnemonic codes, such as &lt; for < (less than), &gt; for >
(greater than), and &amp; for & (ampersand )

Syntax :
&entity_name;

2.Numeric entities:

These are represented by numeric codes, either decimal or hexadecimal.

Decimal codes are preceded by &# and followed by a semicolon (;), while
hexadecimal codes are preceded by &#x and followed by a semicolon (;).

Syntax :

&#decimal_code;

&#xhexadecimal_code;

➢ Some Important HTML Entities


4.Describe HTML layout structure.
An HTML layout is a blueprint used to arrange web pages in a well-defined manner
It is a way in which you can design web pages using simple HTML tags .The simplest
and most popular way of creating layouts is using HTML <table> tag.HTML contains
different elements that define the structure of a web page:

• <header>:This defines a header for a web page


• <nav>: This defines a container for navigation links
• <section>: This defines a section in a web page
• <article>: This is the primary element that contains information about the
web page
• <aside>: The <aside> content is often placed as a sidebar in a document
• <footer>: This defines a footer for a document or a section
• <details>: This is used to define additional details
• <summary>: This defines a heading for the <details> element

5.Explain list elements in HTML. OL,UL,DL .


• <ul> − An unordered list. This will list items using plain bullets.
• <ol> − An ordered list. This will use different schemes of numbers to list
your items.
• <dl> − A description list. This arranges your items in the same way as they
are arranged in a dictionary.

1.Unordered List :

Unordered lists are defined with the <ul> element and each list item inside is
defined with the <li> element . An unordered list is a collection of related items that
have no special order or sequence .The list items will be marked with bullets (small
black circles) by default.

Example

Output

2.Ordered List :
Ordered lists are defined with the <ol> element and each list item inside is defined
with the <li> element .The list items will be marked with numbers by default .The
numbering starts at one and is incremented by one for each successive ordered list
element.

Example

Output

3.Description List :
A description list is a list of terms, with a description of each term.The <dl> tag
defines the description list .

The <dt> tag defines the term (name).The <dd> tag describes each term.

Example

Output

6.Explain steps of installation of Notepad++


➢ What is Notepad++

o Notepad++ is a free and open-source text and source code editor for use
with Microsoft Windows
o Notepad++ is useful anytime you need to make significant changes to a text
file.
o It keeps the layout and structure of the code when you open or edit it,
making it easy to save

➢ Installation of Notepad++ IDE


Step1 :

Visit https://notepad-plus-plus.org/downloads/ to download Notepad++


latest version.
Step 2 : Choose latest version, which is version 8.5.4 in this case.

Simply download the 64-bit x64 installer or choose other installer suitable for you
operating system.

Step 3 : Open Downloads folder where the downloaded files are normally saved.
Step 4 : Click the installer to begin installing Notepad++.

Choose language to use and click Ok.

Step 5 :

Close applications that might interrupt installation process and click Next.
Step 6 :

Accept the License Agreement by clicking I Agree button.

Step 7 : Choose location to install Notepad++ or click Next to use default folder.
Step 8 : Choose location to install Notepad++ or click Next to use default folder.
Tick Create Shortcut on Desktop or leave it, and click Install.
Wait for installation process.

Step 9: Click Finish to end the installation process.


Step 10 : Open
Click icon of Notepad++ to open it.

In this way we can easily installed Notepad++


7 . self Task
<html>

<head>

<title> GP Nanded </title>

<body>

Welcome to Government polytechnic Nanded...||<br>

Name : Mrunal Deshpande<br>

Rollno. 914

</body>

</head>

</html>

Output
Text color
<html>

<head>

<title> Background color</title>

<body>

<h2 style ="color :red"><b> Color is Red<b></h2>

<h2 style ="color :blue"><b> Color is Blue<b></h2>

</body>

</head>

</html>

Output
Date: 10/06/2024

• HTML Table Tag


Defining Tables in HTML :

• An HTML table is defined with the <table> tag. Each table row is defined with
the <tr> tag.
• A table header is defined with the <th> tag.
• By default, table headings are bold and centered. A table data/cell is defined
with the < td>tag.

1.Table Cells

Table Cell are the building blocks for defining the Table. It is denoted with <td> as
a start tag & </td> as a end tag.

Syntax

<td> Content...</td>

2 . Table Rows

The rows can be formed with the help of combination of Table Cells. It is denoted
by <tr> and </tr> tag as a start & end tags.

Syntax

<tr> Content...</tr>

3 .Table Headers

The Headers are generally use to provide the Heading. The Table Headers can also
be used to add the heading to the Table. This contains the <th> & </th> tags.

Syntax

<th> Content...</th>
➢ Table tags

➢ Table Structure
Structure

<Table>

<tr>

< th> </th>

<th></th>

</tr>

<tr>

<td></td>

<td></td>

</tr>

<Table>

Example : Task 1

<!DOCTYPE html>

<html>

<head>

<title> First Table</title>

<body>

<h3 style ="color : red" ><b>Student Table</b></h3>

<table border ="1">


<tr>

<th> Rollno </th>

<th> Name </th>

<th> Marks </th>

</tr>

<tr>

<td> 101</td>

<td> Mrunal</td>

<td> 97</td>

</tr>

<tr>

<td> 102</td>

<td> Priya</td>

<td> 95</td>

</tr>

</table>

</body>

</head>

</html>
Output :
➢ Font Family , Font Size , Font Color

Change the text font family in HTML, use the style attribute. The style attribute
specifies an inline style for an element. The attribute is used with the HTML <p>
tag.

• Font family

Example : - <p style="font-family: verdana "> Hello world</p>

<p style="font-family: Courier New'">Government polytechnic Nanded.</p>

• Font color

Example : - <p style="color: Blue ">Hello world</p>

<p style="color: blue">Government polytechnic Nanded. </p>

• Font size

Example : - <p style="font-size:30px"> Hello world </p>

<p style="font-size:22px">Government Polytechnic Nanded</p>

➢ We can understand the basic concept of Font Family , Font Size , Font Color
By using simple HTML program.
Example : Task 2

<!DOCTYPE html>

<html>

<head>

<title> Government Polytechnic </title>

<body>

<center>

<h2 align ="center"><b> Student Table</b></h2>

<table border ="3" bgcolor ="cyan">

<tr>

<th><p style ="font-family : tahoma;font-size :15px;color : red">


Sr.No</p> </th>

<th><p style ="font-family : tahoma;font-size :15px;color : red"> Friend's


Name</p> </th>

<th><p style ="font-family : tahoma;font-size :15px;color : red"> Contact


Number's</p></th>

</tr>

<tr>

<td> 101 </td>

<td> Mrunal </td>

<td> 960775202</td>

</tr>
<tr>

<td> 102 </td>

<td> Vedika </td>

<td> 9537772201</td>

</tr>

<tr>

<td> 103 </td>

<td> Shriya </td>

<td> 9870752201</td>

</tr>

<tr>

<td> 104</td>

<td> Radha </td>

<td> 8797752201</td>

</tr>

<tr>

<td> 105 </td>

<td> Shreya </td>

<td> 8885752201</td>

</tr>

<tr>
<td> 106</td>

<td> Mayuri </td>

<td> 9898952201</td>

</tr>

<tr>

<td> 107 </td>

<td> Sanika </td>

<td> 9604567890</td>

</tr>

<tr>

<td> 108 </td>

<td> Ovi </td>

<td> 7897751201</td>

</tr>

<tr>

<td> 109 </td>

<td> Nidhi </td>

<td> 9802452212</td>

</tr>

<tr>

<td> 110 </td>


<td> Riya </td>

<td> 9601213145</td>

</tr>

</table>

</body>

</head>

</html>

Output
TASK 3: CREATE A MARKSHEET

<!DOCTYPE html>

<html>

<head>

<title> Marksheet</title></head>

<body>

<center>

<table border = 3 bordercolor ="red" bgcolor ="lightgreen" cellspacing =0


cellpadding=0 width =30% >

<tr align ="center" >

<th colspan =5><font face =Algerian ;font size =3>Maharashtra State Board
of<br> Secondary and Higher Secondary Education ,Pune</font><br>

<font face =Arial ; font size =1 > SECONDARY SCHOOL CERTIFICATE


EXAMINATION -CERTIFICATE</FONT><BR>

<font size =1>This is certify that</font><br>

<h4 align="center"><B>DESHPANDE MRUNAL


NISHIKANT<B></H4>

<H6> CANDIDATE MOTHER NAME : SNEHAL</h6>

<tr BGCOLOR ="SILVER">

<th>Divisional Board</th>

<th> Seat No</th>

<th> centre NO</th>

<th> School No</th>


<th> Sr.No of certificate</th>

</tr>

<tr>

<td>LATUR</td>

<td> L044008</td>

<td> 5012</td>

<td> 58.01.003</td>

<td> 000525</td>

</tr>

<tr align="center">

<td colspan=5>

<H6> has passed the SECONDARY SCHOOL CERTIFICATE EXAMINATION <BR>


in Grade DISTINCTION with subjects shown below</h6></td>

<tr bgcolor ="silver">

<th>Main subjects</th>

<th>Max.Marks</th>

<th> Min.marks</th>

<th> Marks obtained</th>

<th>Grade</th>

</tr>

<tr>
<tr>

<td> ENGLISH(1ST LANG)</td>

<td>100</td>

<td> 35</td>

<td>100</td>

<td> A</td>

</tr>

<tr>

<td> MARATHI(2ND LANG)</td>

<td>100</td>

<td> 35</td>

<td>95</td>

<td> A</td>

</tr>

<tr>

<td> MATHEMATICS</td>

<td>100</td>

<td> 35</td>

<td>97</td>

<td> A</td>

</tr>

<tr>
<td> SCIENCE & TECHNOLOGY</td>

<td>100</td>

<td> 35</td>

<td>96</td>

<td> A</td>

</tr>

<tr>

<td> SOCAIL SCIENCE</td>

<td>100</td>

<td> 35</td>

<td>98</td>

<td> A</td>

</tr>

<tr>

<td> TOTAL MARKS</td>

<td>500</td>

<td> 175</td>

<td>486</td>

<td> PERCENTAGE : 97.2%</td>

</tr>

<tr align =left>

<th colspan=5> Result : PASS</th> </body><html>


output
Date: 11/06/2024

➢ Practice Questions
1. Building the Basics: The Bare-Bones Website

- Start with a simple HTML document structure: the <!DOCTYPE html>, <html>,
<head>, <title>, <body>, and closing tags.

- Experiment with text formatting using heading (<h1> to <h6>), paragraph (<p>),
and line break (<br>) tags.

- Add an image (<img>) with a source (src) attribute and explore alternative text
(alt) for accessibility.

Answer

<!DOCTYPE html>

<html>

<head>

<title> Flowers Information</title>

</head>

<body style ="background-color : lightcyan">

<center>

<h1 style ="color : red"><b> FLOWERS INFORMATION<b></h1>

<h3 style ="color:blue">"Flowers are the Friends ,they Bring color to your
World"</h3>

<h2 style = "color: brown"><b> 1 . ROSE </b></h2>


<p>A rose is either a woody perennial flowering plant of the genus Rosa in the
family Rosaceae

or the flower it bears.<br>

There are over three hundred species and tens of thousands of cultivars.<br>

They form a group of plants that can be erect shrubs, climbing, or trailing,

with stems that are often armed with sharp prickles.<br>

Their flowers vary in size and shape and are usually large and showy, in colours
ranging from white through yellows and reds.<br>

Most species are native to Asia, with smaller numbers native to Europe, North
America, and Northwest Africa.<br>

<h2> Image</h2>

<img src ="C:\Users\mruna\Desktop\flowers img1.jpg" width ="300" height


="300" border="5">

</body>

</html>
Output :

Example 2

<!DOCTYPE html>

<html>

<head>

<title > Nature</title>

</head>

<body style ="background-color :lightyellow">


<center>

<h2 style ="color : blue"><b>A Beautiful Nature</b></h2>

<h3>"Nature is always wears a colors of the spirit"</h3>

<img src ="C:\Users\mruna\Pictures\Screenshots\Screenshot (12).png" width


="350" height ="350" border="4">

</body>

</html>

Output
2. Creating Structure with Headings and Lists

- Organize content with heading tags (<h1> to <h6>) to create a hierarchy.

Answer

<!DOCTYPE HTML>

<html>

<head>

<title> Headings</title>

<body>

<h1> This is Heading 1<h1>

<h2> This is Heading 1<h2>

<h3> This is Heading 1<h3>

<h4> This is Heading 1<h4>

<h5> This is Heading 1<h5>

<h6> This is Heading 1<h6>

</body>

</html>
Output

- Use ordered (<ol>) and unordered (<ul>) lists to present items sequentially or
non-sequentially, respectively.

- Practice nesting lists (<li> within <ul> or <ol>) for more complex structures.

Answer

<!DOCTYPE HTML>

<html>

<head>

<title> Polytectnic subject</title>


</head>

<body style="background-color:lightyellow">

<h2 style ="color: red"> Polytechnic Information Technology subject</h2>

<li><b>Semester 1<b></li>

<ol>

<li> Mathematics 1</li>

<li> Physics</li>

<li> chemistry</li>

<li>English</li>

<li>EGM</li>

</ol>

<li><b>Semester 2</b></li>

<ol>

<li> Mathematics 2</li>

<li> BEC</li>

<li> EEC</li>

<li>PIC</li>

</ol>

<li><b>Semester 3</b></li>

<ol>
<li> DSU</li>

<li> OOP</li>

<li> DTM</li>

<li>DCO</li>

<li>POD</li>

</ol>

<li><b>Semester 4</b></li>

<ol>

<li>java</li>

<li> SEN</li>

<li> CNE</li>

<li>DBMS</li>

</ol>

</body>

</html>
Output
3. Linking Up: Navigation with Hyperlinks

- Create links (<a>) to connect web pages within your site or to external websites.

- Set the href attribute to specify the destination URL.

- Optionally, use the title attribute to provide additional information for screen
readers or tooltips.

➢ HTML Anchor
The HTML anchor tag defines a hyperlink that links one page to another page. It
can create hyperlink to other web page as well as files, location, or any URL.

The "href" attribute is the most important attribute of the HTML a tag. and which
links to destination page or URL.

• href attribute of HTML anchor tag

The href attribute is used to define the address of the file to be linked. In other
words, it points out the destination page.

The syntax of HTML anchor tag is given below.

<a href = "..........."> Link Text </a>

Example

<a href="second.html">Click for Second Page</a>

<HTML>
<HEAD>

<TITLE> HYPERLINKS EXAMPLE</TITLE>

</HEAD>
<BODY style ="background-color: lightpink">
<H1>LINKS ARE BELOW</H1>
<p><H2>This is an example of linking to external websites.</H2></p>

<UL>
<LI><a href="www.google.com"> GOOGLE</a></LI>
<LI><a href="www.dte.com"> Director of technical Education</a></LI>
</UL>
</BODY>
</HTML>

OUTPUT
4. Building a Simple Resume

- Showcase your skills and experience by creating a basic resume or portfolio


website.

- Use heading tags for sections like "Education," "Skills," and "Projects."

- Include unordered lists to display skills or project details.

- Optionally, add images and links to further enhance your portfolio.

Answer

<!DOCTYPE html>

<html>

<head>

<title>My Resume</title>

</head>

<body bgcolor="lightcyan">

<h1 style ="color:brown">Mrunal Deshpande </h1>

<h2 Education</h2>

<ul>

<li> Government Polytechnic Nanded</li>

<li> Information Technology Graduation : june 2025</li>

</ul>

<h2>Skills</h2>
<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

<li>C++</li>

<li>Java</li>

</ul>

<h2>Work Experience</h2>

<ul>

<li>Intern at Web Developer, 2023-2024</li>

</ul>

<h2>Contact</h2>

<p>Email= mrunal@123</p>

<p>contact nunber : 9865746575</p>

<h2>Profile Picture</h2>

<img src="profileimag.jpg" alt=" mrunalimg">

</body>

</html>
Output :
5. Designing a Fun "About Me" Page

- Tell your story! Create a creative "About Me" page to introduce yourself.

- Use heading tags, paragraphs, and lists to share your hobbies, interests, and
aspirations.

- Include an image or GIF to personalize your page.

Answer

<!DOCTYPE html>

<html>

<head>

<title>About Me</title>

</head>

<body bgcolor ="lavender">

<h1>About Me</h1>

<p>Hi, I'm Mrunal Deshpande I'm Information Technology Student. <br>

I enjoy learning new technologies and improving my skills.</p>

<h2>Hobbies</h2>

<ul>

<li>Reading</li>

<li>Traveling</li>

<li>Drawing</li>

</ul>
<h2>Interests</h2>

<ul>

<li> Learning new Technology</li>

<li> Listening Music</li>

<li>Waching Cricket</li>

</ul

<h2>Contact</h2>

<ul>

<li> Email= mrunal@123</li>

<li> phone number =7587453747</li>

</ul>

<h2>Aspirations</h2>

<p>I aspire to become a lead developer at a top technology company<br> and


contribute to innovative projects that make a difference in people's lives.</p>

</body>

</html>
Output
6. Experimenting with Tables

- Create tables (<table>, <tr>, <th>, <td>) for presenting data in a structured
format.

- Use table headers (<th>) for column labels and table data (<td>) for content.

- Explore table formatting options like border style, background color, and cell
padding/spacing.

Answer

<!DOCTYPE html>

<html>

<head>

<title> Employee Table</title>

<body>

<center>

<h2 align ="center"><b> EMPLOYEE TABLE</b></h2>

<table border ="6" bgcolor ="LIGHTYELLOW">

<tr>

<th><p style ="font-family : tahoma;font-size :15px;color : BLUE">


EMPID</p> </th>

<th><p style ="font-family : tahoma;font-size :15px;color : BLUE">


EMPNAME</p> </th>

<th><p style ="font-family : tahoma;font-size :15px;color : BLUE">


DEPTNAME</p></th>

</tr>
<tr>

<td> 11 </td>

<td> RADHA </td>

<td> IT</td>

</tr>

<tr>

<td> 12 </td>

<td> RIYA </td>

<td> CIVIL</td>

</tr>

<tr>

<td> 13</td>

<td> NIDHI </td>

<td> CS</td>

</tr>

<tr>

<td> 14</td>

<td> SANIKA </td>

<td> AI</td>

</tr>

<tr>
<td> 15 </td>

<td> OVI </td>

<td> IT</td>

</tr>

<tr>

<td> 16</td>

<td> MAYURI </td>

<td> CS</td>

</tr>

<tr>

<td> 17</td>

<td> NEHA</td>

<td> CIVIL</td>

</tr>

<tr>

<td> 18 </td>

<td> PRIYA </td>

<td> AI</td>

</tr>

</table>

</body>
</head>

</html>

Output
Date: 12/06/2024

• Marquee Tag
Marquee is one of the important tags introduced in HTML to support such
scrollable texts and images within a web page.

The <marquee> tag is a container tag of HTML that is implemented for creating
scrollable text or images within a web page from either left to right or vice versa,
or top to bottom or vice versa. But this tag has been deprecated in the new version
of HTML, i.e., HTML 5.

Syntax

<marquee> content </marquee>

The different attributes of <marquee> tag are:

▪ Behavior :- provides the scrolling type in a marquee. That scrolling can be


like sliding, scrolling or alternate.
▪ Direction :- It defines direction for scrolling content. It may be left, right, up
and down.
▪ Width :- It defines width of marquee in pixels or %.For example width="10"
or width="20%"
▪ Height :- It defines height of marquee in pixels or %.For example height="20"
or height="30%"
▪ Hspace :- It defines horizontal space in pixels around the marquee
▪ Vspace :- It defines vertical space in pixels around the marquee
▪ Scrolldelay :- It defines scroll delay in seconds.▪ scrollamount:- It provides
value for speeding the marquee feature
▪ Loop :- It defines how many times the marquee will loop
▪ Bgcolor :- It defines background color.
Example

<!DOCTYPE HTML>

<html>

<head>

<title> MARQUEE TAG IN HTML</title>

</head>

<body bgcolor ="lightyellow">

<center>

<marquee direction ="left" height ="500px" behaviour "alternate"> <img


src=" C:\Users\mruna\Desktop\girlcycle.jpg" width="300" height ="300"
border="5"></marquee>

</center>

</body>

</html>

Output
• HR tag

The HR tag is an HTML element that creates a horizontal line on a webpage.

- It's a selfclosing tag, meaning that it doesn't require a closing tag.

- The HR tag is often used to visually separate content on a webpage, such as


between different sections or topics.

- It can also be used to indicate a change in topic or to create a visual break in the
content.

- The HR tag has several attributes that can be used to customize the appearance
of the horizontal line

- The most common attributes include size, width, align, color, noshade, and class.-
The size attribute sets the height of the horizontal line.

- The width attribute sets the width. - The align attribute specifies the horizontal
alignment of the line

- The color attribute sets the color of the line. - The noshade attribute removes the
shading effect from the line

Example:- < hr size="2" width="50%" align="center" color="red">

Above example will display a horizontal line that is 2 pixels in height, 50% in width,
centered on the page, and colored red.

• BR tag

HTML <BR> tag is a powerful tool for controlling the layout of your text. Unlike
word processors, web browsers don’t automatically recognize new lines or
paragraph formatting. This is where the <BR> tag comes into play.

The <BR> tag is a self-closing element, meaning it doesn’t require a closing tag.
It’s commonly used in addresses, poetry, or any situation where a line break is
needed for better readability.
• Add Image into HTML page

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing
tag.

The <img> tag has two required attributes:

• src - Specifies the path to the image


• alt - Specifies an alternate text for the image

Syntax

<img src="url" alt="alternatetext">

Example

<!DOCTYPE HTML>

<html>

<head>

<title> Adding image</title>

</head>

<body bgcolor="lavender">

<h2> GOVERNMENT POLYTECHNIC NANDED</h2>

<img src="C:\Users\mruna\Desktop\gpnd.jpg "width ="300" height


="300"border="5">

</body>

</html>
Output :
• Add Audio into HTML page

HTML audio tag is used to define sounds such as music and other audio clips.

- The AUDIO tag in HTML is used to embed audio content in a web page.

- It allows to play audio files in website without the need for an external plugin or
application.

- Example:

<audio controls><source src="audio.mp3" type="audio/mpeg">

</audio>

- The controls attribute adds the default audio controls to the player, such as play,
pause, and volume.

- The source tag specifies the location of the audio file and its file type.

- We can also add other attributes to the AUDIO tag to control the appearance
and behavior of the audio player

Example - The autoplay attribute will automatically start playing the audio file
when the page loads.- The loop attribute will continuously loop the audio
file.Overall, the AUDIO tag provides a simple and easy way to add audio content
in web

Example

<!DOCTYPE HTML>

<html>

<head>

<title> Adding audio</title>

</head>

<body bgcolor="lavender">
<center>

<h2> Ganpati Songs</h2>

<audio controls autoplay>

<source src =" C:\Users\mruna\Downloads\_Ganpati Bappa


Morya(PagalWorld.com.sb).mp3" type =" audio/mp3" >

</audio>

</body>

</html>

Output :
• Add Youtube video into HTML page
We can embed a YouTube video in an HTML page using the iframe element.

- The <iframe> tag is an HTML element that is used to embed another HTML
document within the current HTML document.

- The <iframe> tag is commonly used to embed videos from video-sharing


websites, such as YouTube.

- The content of the <iframe> element is typically an external web page, video,
audio, or other types of media.

- Steps to add YouTube video to an HTML page :-

1. Go to the YouTube video you want to embed.

2. Right click on the video, from the menu select 'copy embed code'.

3. Open your HTML file in a text editor.

4. Paste the embed code in html code by using iframe tag.

5. Save the html file.

6. Open the HTML file in a web browser to see the embedded YouTube video.

Example

<!DOCTYPE HTML>

<html>

<head>

<title> adding video to html page</title>

</head>

<body bgcolor ="lightpink">

<h2> Adding video into HTML page</h2>


<iframe <iframe width="656" height="369"
src="https://www.youtube.com/embed/0S0L-iqUM-4" title="Tom &amp; Jerry
em Português | Brasil | Um Pouco de Ar Fresco! | WB Kids" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen></iframe>

</center>

</body>

<html>

Output
Date: 13/06/2024

• Form tag in HTML

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

- The form tag has several attributes that can be used to control the behavior of
the form.

- The action attribute specifies the URL to which the form data is submitted.

- The method attribute specifies the HTTP method (GET or POST) to be used when
submitting the form.

- The name attribute specifies a name for the form.

- The enctype attribute specifies the encoding type to be used when submitting
the form.

- Within the form tag, you can include various form elements such as input, select,
textarea, and button.

- It include various form elements that allow users to enter data.

- Here are some of the most commonly used form elements:

• <input> used to create various types of form controls such as text boxes,
radio buttons, checkboxes, buttons, and more.
• The type attribute is used to specify the type of input control to create.
• <select> used to create a drop-down list of options. The option tag is used
to define each option in the list
• <textarea> used to create a multi-line text input control.
• <button> used to create a clickable button that can be used to submit the
form or trigger some other action.
• HTML Input types

Here are the different input types you can use in HTML:

<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="range">

<input type="reset">

<input type="search">

<input type="submit">

<input type="tel">

<input type="text">

<input type="time">
Example

<! DOCTYPE>

<html>

<head>

<title> Create a Form</title>

</head>

<body bgcolor ="lightcyan">

<form>

<h1 Style ="color : Red"> Student details</h1>

<h3> Enter your Name - <input type="text"> <br><br>

<h3> Enter your Rollno - <input type="number"> <br><br>

<h3> Enter your Branch - <input type="text"> <br> <br>

<h3> Enter your Semester - <input type="number"> <br> <br>

<h3> Enter your Email - <input type="Email"> <br> <br>

<h3> Enter your Address - <input type="text"> <br> <br>

<h3> Enter your DOB - <input type="date"> <br> <br>

<h3> Enter your fav.color- <input type="color"> <br> <br>

<h3> Select your nearcity -<input type="checkbox">Nanded <input


type="checkbox">Aurangabad <input type="checkbox">Pune <input
type="checkbox">Mumbai <br><br>

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

</form>
</body>

</html>

Output
Task 1: Try to Create Registration Form

<!doctype html>

<html>

<head>

<title> Create a login page</title>

<body>

<table border="5" width ="350" height ="500">

<tr>

<th colspan="2" bgcolor="lightyellow"><font color="red"><b> Registration


Form</b></font></th>

</tr>

<tr bgcolor="cyan">

<th> Enter Name</th>

<th> <input type="text"></th>

</tr>

<tr bgcolor="cyan" >

<th> Enter Password</th>

<th><input type="password"></th>

</tr>
<tr bgcolor="cyan">

<th> Enter Address</th>

<th> <textarea rows="4" > </textarea>

</tr>

<tr bgcolor="cyan">

<th> Select Games</th>

<th> <input type="checkbox"> Hockey<br>

<input type="checkbox"> Football<br>

<input type="checkbox"> Badminton<br>

<input type="checkbox"> Cricket<br>

<input type="checkbox"> volleyball<br>

</th>

</tr>

<tr bgcolor="cyan">

<th> Gender</th>

<th> <input type="radio">Male <br>

<input type="radio">Female<br>

</th>

</tr>
<tr bgcolor="cyan">

<th> Select ur DOB</th>

<th><input type="date"></th>

</tr>

<tr bgcolor="cyan">

<th> Select a Photo</th>

<th><input type="File" name ="reference"></th>

</tr>

<tr bgcolor="cyan">

<th colspan ="2"><input type="button "value=" click me " onclick ="msg(hello)">

<input type="Reset" >

<input type ="submit"></th>

</tr>

</table>

</body>

</html>
Output
Task 2 : Try to Create Signup Form

<!DOCTYPE HTML>

<html>

<head>

<title> crate a login Form</title>

</head>

<body>

<table border="5" border-color="red" height ="500px" width="50%">

<tr bgcolor="orange">

<th colspan ="2"><h2><b>Sign up</b></h2></th>

<tr>

<tr bgcolor ="navy">

<th> <font color ="yellow" size ="4"> First Name </font></th>

<th> <input type=" text"></th>

</tr>

<tr bgcolor ="navy">

<th> <font color ="yellow" size ="3"> Last Name</font></th>

<th> <input type=" text"></th>

</tr>

<tr bgcolor ="navy">


<th><font color ="yellow" size ="4"> Date of Birth</font></th>

<th> <input type=" Date"></th>

</tr>

<tr bgcolor ="navy">

<th><font color ="yellow" size ="4"> Gender </font></th>

<th><input type="radio"><font color ="yellow" size ="3">Male</font> <br>

<input type="radio"><font color ="yellow" size


="3">Female<br></font></th>

</tr>

<tr bgcolor ="navy">

<th><font color ="yellow" size ="4"> Country</font></th>

<th> <input type=" country"></th>

</tr>

<tr bgcolor ="navy">

<th><font color ="yellow" size ="4"> E-mail</font></th>

<th> <input type=" email"></th>

</tr>

<tr bgcolor ="navy">

<th><font color ="yellow" size ="4"> Password<font></th>


<th><input type="password"></th>

</tr>

<tr bgcolor ="navy">

<th> <font color ="yellow" size ="4">Confirm password</font></th>

<th><input type="password"></th>

</tr>

<tr bgcolor ="navy">

<th colspan ="2"><input type ="checkbox"> <font color ="yellow" size ="4">I
Agree to the Terms of use</font></th>

</tr>

<tr bgcolor="orange">

<th colspan="2"><input type ="submit" >

<input type="reset">

</th>

</tr>

</table>

</body>

</html>
Output
Task 3 : Contact us Form

<!doctype html>

<html>

<head>

<title> create a login form</title>

</head>

<body>

<center>

<style>

Input[type="text"]{

width:100%;

</style>

<form>

<table bgcolor="lightyellow" border="5" width="500" height ="550"


cellpadding="10">

<tr align =center bgcolor ="red" >

<td><font color="white"><b> Contact us !</b></font></td>

</tr>

<tr align ="center">

<td><input type ="text" placeholder ="Name...."></td>


</tr>

<tr align ="center">

<td><input type ="text" placeholder ="Email...."></td>

</tr>

<tr align ="center">

<td><input type ="text" placeholder ="Subject..."></td>

</tr>

<tr align="center">

<td> <input type="text" placeholder="message...."></td>

<tr align =center bgcolor ="yellow" >

<td> SEND MESSAGE </td>

</tr>

</table>

</form>

</center>

</body>

</html>
Output

You might also like