0% found this document useful (0 votes)

35 views95 pages

Training Report Shreya-3

Uploaded by

deshmukhrutuja461

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

0% found this document useful (0 votes)

35 views95 pages

Training Report Shreya-3

Uploaded by

deshmukhrutuja461

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

You are on page 1/ 95

INDEX Internship Report

WEB PROGRAMMING
Including HTML CSS PHP WORDPRESS

By KALAVATI TECHNOLOGIES
CHHATRAPATI SAMBHAJINAGAR

STUDENT NAME:- Kodgire Shreya Shivkumar

COLLEGE NAME:- GOVERNMENT POLYTECHNIC NANDED
GOVERNMENT POLYTECHNIC NANDED
INFORMATION TECHNOLOGY

Date: [05/06/2024 ]

Internship Daily Report

Student Name: Kodgire Shreya Shivkumar

Roll no: 924

HOD: S.N.Dhole

Guide Name: Mr.Nitin Nikam

Documentation:
Status of activities planned in [Current Session]

➢ Date • Description ✓ Status

05/06/2024 Intro of HTML. ✓ Complete
Understanding Internet
What is Website
HTML structure
06/06/2024 IDE(Integrated ✓ Complete
Development Kit)
Assignment 1
07/06/2024 Holiday ✓

08/06/2024 Holiday ✓

09/06/2024 Holiday ✓

10/06/2024 Learn HTML table tag ✓ Complete

understanding table
code structure learn font
family ,font name font
color ,size
11/06/2024 Practice Question ✓ Complete

✓
✓

✓
Documentation:

Date: 05/06/2024

Introduction to HTML

• HTML stands for HyperText Markup Language , HTML is standard markup

language for documents designed to be displayed in a web browser.
• HTML is used for creating web pages.
• HTML is combination of hypertext and markup language . Hypertext defines
the link between web pages and Markup language defines the text document
within the tag which defines the structure of web pages.
• It uses simple tags to markup and format the content . These tags are
enclosed in angular brackets like <html>.
• HTML is a case insensitive language. Case insensitive means there is no
difference between upper and lower case ( capital and small letters ) both
treated as the same , for example ‘D’ and ‘d’ both are same .

Features of HTML
1. HTML is user friendly language.
2. It is platform independent.
3. It is very easy to make an effective presentation with HTML because it has a
lot of formatting tags.
4. HTML is simple to learn and modify.
History of HTML
The first version of HTML was written by Tim Berners-Lee in 1993. Since then , there
have been many different versions of HTML. The most widely used version
throughout the 2000’s was HTML 4.01 , which became an official standard in
December 1999. Another version , XHTML , was a rewrite of HTML as an XML
language . XML is a standard markup language that is used to create other markup
languages .

Advantages of HTML

1.Ease to learn and use: HTML is very easy to learn and understand .It has simple
tags and there is no hectic of case sensitivity in HTML.
2.HTML is free: there is no need to purchase specific software for HTML.
3.HTML is supported by all Browsers : HTML supports all browsers so there is no
need to worry about the website written in HTML.
4.HTML is simple to edit: HTML is very easy to edit as there is no need to have a
special platform to edit it . It is written in Notepad.
5.HTML can integrate easily with other languages: HTML can be integrated with
multiple languages and does not create any issue in it.
Disadvantages of HTML

1. Complexity in Structure : Creating and maintaining the structure of HTML

document is complex , mainly for large scale projects . As webpages grow in
complexity , managing nested HTML elements is challenging. This complexity
may lead to errors.
2. Limited Security : HTML alone does not provide strong security features . It
can not protect against various web weaknesses.
3. Code length : Creating a simple webpage using pure HTML can result in many
lines of code . Especially if you are coding for complex structures. This can lead
to code repetition, maintainance challenges , and increased load times for web
pages.
4. Static language makes designing time consuming : HTML is a static language.
This means that the HTML web pages will remain the same until someone
changes them manually.
HTML Structure
An HTML Document is mainly divided into two parts:
1.HEAD
2.BODY
HEAD: This contains the information about the HTML document. For Example, the
Title of the page, version of HTML, Meta Data, etc.
BODY: This contains everything you want to display on the Web Page.

1.The <html> element is the root element of an HTML page

2.The <head> element contains meta information about the HTML page
3.The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
4. The <body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
5.The <h1> element defines a large heading
6. The <p> element defines a paragraph
Date: 06/06/2024
IDE
• IDE stands for Integrated Development Environment . An IDE is software that
combines commonly used developer tools into a compact GUI (Graphical
user interface) application.
• It is a combination of tools like a code editor, code compiler and code
debugger with an integrated terminal.
• IDE is commonly used by programmers and software developers to develop
software code efficiently.

Types of IDEs
1. Desktop IDEs
2. Cloud IDEs
3. Mobile App Development IDEs
4. Database specific IDEs

Features of IDE

1. User Friendly Interface

2. Code Debugging Tools
3. Code Editor
4. Code Compiler
5. Language support
6. Extensibility
7. Code Autocompletion
Assignment
1)Are the HTML tags and elements the same thing ?
Ans :-
No, HTML tags and elements are not same things.
In HTML ,Tags represents the structural component of a document , such as <h1>
for headings . Elements are formed by tags and encompass both the opening and
closing tags along with the content.
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.HTML tags are used to hold the HTML element. HTML tags are almost like
keywords where every single tag has unique meaning. Tags define the type of HTML
element.
Ex:
<b> ….. </b>
In this example, <b> is the starting tag and </b> is the ending tag.
HTML Element
The HTML element consists of both the opening and closing tags as well as what’s
inside those tags.
The HTML element is everything from the start tag to the end tag.
Syntax:
<tagname>content</tagname>
EX:
<h1> My First heading </h1>
2)What are the tags and Attributes in HTML ?
Ans :-
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.HTML tags are used to hold the HTML element. HTML tags are almost like
keywords where every single tag has unique meaning. Tags define the type of HTML
element.
Ex:
<b> ….. </b>
In this example, <b> is the starting tag and </b> is the ending tag.
HTML Attributes
HTML Attributes is used to describe the characteristics of an HTML element. It
always placed in the opening tag of an element. It generally provides additional
styling (attribute) to the element. All HTML elements can have attributes .
Attributes provide additional information about elements Attributes are always
specified in the start tag Attributes usually come in name/value pairs like:
name="value"
Ex:
<p align="center">This is paragraph.</p>
In this example <p> is the starting tag and </p> is the ending tag with extra
attributes.
3)What are HTML Entities ?
Ans :-
HTML entities are used to display reserved characters in HTML, such as the less-
than sign ('<') and greater-than sign ('>'), which would otherwise be interpreted as
part of the HTML code. They also enable the inclusion of characters that are not
readily available on a keyboard, like special symbols and accented characters. Entity
names are case sensitive.
Syntax:
An HTML entity starts with an ampersand (&) and ends with a semicolon (;).
Ex: 1. © for the copyright symbol (©).
Types of Entities:
1.Named Entities
2.Numeric Entities
1) Named Entities:
These are predefined names that correspond to specific characters.
Ex: 1. & for &
2. " for "
3. ' for '
2) Numeric Entities
These use a number to specify the character.
There are two types:
Decimal: Uses the format &#number; .
Ex: © represents the copyright symbol (©).
Hexadecimal: Uses the format &#xnumber;.
Ex: © represents the copyright symbol (©).
Commonly Used HTML Entities:
4)Describe HTML layout structure .
Ans :-
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 web page.
• <article> : This is a primary element that contains information about the web
page.
• <aside> : The <aside> content is often placed as a sidebar in a document .
• <footer> : 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.
Ans :-
Ordered HTML List(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.
Ex:
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Output:
Unordered HTML List(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.
Ex:
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Output:

HTML Description Lists(DL)

HTML also supports description lists.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), and the <dd> tag describes each term.
Ex:
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>

Output:
6)create any self task.
Ans :-
<HTML>
<HEAD><TITLE>My first Program</TITLE></HEAD>
<BODY>
Name: Shreya Kodgire<BR>
Roll No: 924
</BODY>
</HTML>
Output:
7)Explain steps of installation of Notepad++
Ans :-
Notepad++ is free and open-source computer software that is mainly used as a
code editor or text editor. It was developed by Don Ho. It is available in nearly 90
languages. It provides the ability to work with multiple files in a single window. It is
available for Windows operating system only. It was first released on 24 November
2003 and its latest version is 8.1.9.3. It is written in the C++ programming language.
It has an easy interface.
Following steps are used to install Nodepad++.
Step 1: Visit the official Notepad++ website on any web browser. Click on
Download Notepad++ v8.1.9.3.

Step 2: On the next webpage, different installer files are listed, click on the
Download button. Downloading of the executable file will start shortly. It is a small
4.19 MB file that will hardly take a minute.
Step 3: Now check for the executable file in downloads in your system and run it.
Step 4: It will prompt confirmation to make changes to your system. Click on Yes.

Step 5: Next screen is of selecting language, click OK.

Step 6: Setup screen will appear, click on Next.

Step 7: The next screen will be of License Agreement, click on I Agree.

Step 8: The next screen will be of installing location so choose the drive which will
have sufficient memory space for installation. It needed a memory space of 11.3
MB.

Step 9: Next screen is of choosing components, all components are already marked
so don’t change anything just click on the Next button.
Step 10: Next screen is to create a desktop icon so check the box and click install.
The installation will be completed in a few seconds
Step 11: Click on Finish to finish the installation process.

Notepad++ is successfully installed on the system and an icon is created on the

desktop
Date: 10/06/2024
Table Tag
What is HTML Tables?
An HTML Table is an arrangement of data in rows and columns in tabular format.
Tables are useful for various tasks, such as presenting text information and
numerical data. A table is a useful tool for quickly and easily finding connections
between different types of data. Tables are also used to create databases.
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. The <tbody> tag is used to group the body content
in an HTML table.

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>

Table Rows
Shreya Kodgire: 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>

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>

Understanding Table code structure

• Structure
<table>
<tr>
<th> </th>
</tr>
<tr>
<td> </td>
</tr>
</table>

EX
<HTML>
<HEAD>
<TITLE>TABLE </TITLE>
</HEAD>
<BODY >
<TABLE BORDER=2
BORDERCOLOR=RED
BGCOLOR=YELLOW
CELLPADDING = 0
CELLSPACING = 0
WIDTH=50%>
<TR><TH>NAME </TH>
<TH>MARKS </TH>
</TR>
<TR ALIGN=CENTER><TD>SAVI </TD>
<TD>96 </TD>
</TR>
<TR ALIGN=CENTER><TD>NAIRA </TD>
<TD>98 </TD>
</TR>
<TR ALIGN=CENTER><TD>AKSHARA </TD>
<TD>94 </TD>
</TR>
<TR ALIGN=CENTER><TD>ABHIRA </TD>
<TD>90 </TD>
</TR>
</TABLE>
</BODY>
Output:
LEARN FONT FAMILY , FONT COLOR , FONT SIZE

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, with the CSS property font-family .
Font family
Example:-
<p style="font-family: verdana"> Hii...</p>
<p style="font-family :CourierNew">This example of Font family.</p>
Font color
Example:-
<p style="color : red">Hii....</p>
<p style="color: blue">This is example of font color. </p>
Font size
Example:-
<p style="font-size:30px"> Hi...</p>
<p style="font-size:11px">This is example of font size.</p>
TASK: ADD INDEX TO TABLE
<HTML>

<HEAD>

<TITLE>TABLE </TITLE>

</HEAD>

<BODY >

<TABLE BORDER=2

BORDERCOLOR=RED

BGCOLOR=YELLOW

<TR >

<TD><P STYLE="FONT-FAMILY : VERDANA; FONT-SIZE : 16PX; COLOR:BLUE">5</TD>

<TR >

• 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.
<HTML>
<HEAD>
<TITLE>My First HTML Page</TITLE>
</HEAD>
<BODY>
<B><U>HEADING TAG</U></B>
<H1>This is H1 heading</H1>
<H2>This is H2 heading</H2>
<H3>This is H3 heading</H3>
<H4>This is H4 heading</H4>
<H5>This is H5 heading</H5>
<H6>This is H6 heading</H6>

<B><U>PARAGRAPHS </U></B>
<P> HTML stands for Hypertext Markup Language ,HTML is standard
markup language for documents designed to be displayed in a web
browser.</P>
<p>HTML is used for creating web pages.</p>

<B><U> LINE BREAK TAG</U></B>

<P>HTML is combination of hypertext and markup language . <br>
Hypertext defines the link between web pages and Markup language
defines the text document within the tag which defines the structure of
web pages. </P>

<B><U>IMAGE </U></B><BR><BR>
<img src=" C:\Users\shrey\Pictures\Saved Pictures/NATURE.JPG">

</BODY>
<HTML>
Output:
2. Creating Structure with Headings and Lists

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

• 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.
<HTML>
<HEAD>
<TITLE>Structured Content with Headings and Lists</TITLE>
</HEAD>
<BODY>
<H1>HTML </H1>
<P> HTML stands for Hypertext Markup Language,HTML is standard markup
language for documents designed to be displayed in a web browser.</P>
<H2>FEATURES OF HTML</H2>
<p> 1.HTML is user friendly language.<br>
2.It is platform independent.<br>
3.It is very easy to make an effective presentation with HTML because it has a lot
of formatting tags.<br>
4.HTML is simple to learn and modify.<br></p>

<H3>ADVANTAGES OF HTML</H3>
<P>1.Ease to learn and use: HTML is very easy to learn and understand .It has
simple tags and there is no hectic of case sensitivity in HTML.<BR>
2.HTML is free: there is no need to purchase specific software for HTML.<BR>
3.HTML is supported by all Browsers : HTML supports all browsers so there is
no need to worry about the website written in HTML. <BR>
4.HTML is simple to edit: HTML is very easy to edit as there is no need to have
a special platform to edit it . It is written in Notepad.<BR>
5.HTML can integrate easily with other languages: HTML can be integrated
with multiple languages and does not create any issue in it<BR>
</P>
<H3>DISADVANTAGES OF HTML</H3>
<P>1. Complexity in Structure : Creating and maintaining the structure of HTML
document is complex , mainly for large scale projects . As webpages grow in
complexity , managing nested HTML elements is challenging. This complexity may
lead to errors.<BR>
2. Limited Security : HTML alone does not provide strong security features . It
can not protect against various web weaknesses.<BR>
3. Code length : Creating a simple webpage using pure HTML can result in many
lines of code . Especially if you are coding for complex structures. This can lead
to code repetition, maintainance challenges , and increased load times for web
pages.<BR>
4. Static language makes designing time consuming : HTML is a static language.
This means that the HTML web pages will remain the same until someone changes
them manually.<BR>
</P>
<H1>ORDER LIST</H1>
<OL>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Fruits
<OL>
<li>Mango</li>
<li>Apple</li>
<li>Banana</li>
</OL>
</li>
</OL>
<H1>UNORDER LIST</H1>
<UL>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Fruits
<UL>
<li>Mango</li>
<li>Apple</li>
<li>Banana</li>
</UL>
</li>
</UL>
</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>
<HEAD>
<TITLE>NAVIGATION WITH HYPERLINKS</TITLE>
</HEAD>
<BODY>
<H1>External Links</H1>
<p>This is an example of linking to external websites.</p>
<UL>
<LI><a href="www.openai.com"> OpenAI</a></LI>
<LI><a href="www.msbte.com"> MSBTE</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

<html>
<head>
<title>My Resume</title>
</head>
<body>
<h1>Shreya Kodgire</h1>
<p>Email: [email protected]</p>
<p>Phone: 7698238801</p>

<h2>Education</h2>
<p>GPND Polytechnic Nanded</p>
<p>Diploma in Information Technology</p>
<p>Graduation: June 2025</p>

<h2>Skills</h2>
<ul>
<li>Programming Languages: C , CPP, Java , HTML, CSS, Python </li>
<li>Database Management: MySQL</li>
</ul>
<h2>Projects</h2>
<ul>
<li>
<strong>Personal Portfolio Website</strong>
<p>Developed a personal portfolio website to showcase projects and
skills.</p>
<a href="https://github.com/shreya/portfolio" target="_blank">View on
GitHub</a>
</li>
<li>
<strong>Task Management App</strong>
<p>Created a task management application using React and Node.js.</p>
<a href="https://github.com/shreya/task-app" target="_blank">View on
GitHub</a>
</li>
</ul>
<h2>Profile Picture</h2>
<img src="profile.jpg" alt="Shreya " class="profile-pic">
</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.

<html>
<head>
<title>About Me – Shreya Kodgire</title>
</head>
<body>
<h1>About Me</h1>
<img src="profile.jpg" alt="Shreya ">
<h2>Introduction</h2>
<p>Hi, I'm Shreya Kodgire, a third-year Information Technology student at
Government Polytechnic Nanded Institute. I have a passion for coding, web
development, and exploring new technologies.</p>
<h2>Hobbies</h2>
<ul>
<li>Coding and building web applications</li>
<li>Playing video games</li>
<li>Reading tech blogs</li>
</ul>
<h2>Aspirations</h2>
<p>I aspire to become a full-stack web developer and work on innovative
projects that make a positive impact on the world. I am also interested in AI and
machine learning, and I hope to delve deeper into these fields in the future.</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.

<HTML>
<HEAD>
<TITLE>TABLE TAG </TITLE>
</HEAD>
<BODY >
<TABLE BORDER=2
BORDERCOLOR=RED
BGCOLOR=YELLOW
CELLPADDING = 0
CELLSPACING = 0
WIDTH=50%>
<TR BGCOLOR=PINK><TH> NAME </TH>
<TH> MARKS </TH>
</TR>
<TR><TD> RIYA </TD>
<TD> 100 </TD>
</TR>
<TR><TD> MRUNAL </TD>
<TD> 99 </TD>
</TR>
<TR><TD> SHREYA </TD>
<TD> 98 </TD>
</TR>
<TR><TD> PRIYA </TD>
<TD> 97 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
Output:
Date: 12/06/2024
Marquee Tag
The <marquee> tag in HTML creates a scrolling text or image effect within a
webpage. It allows content to move horizontally or vertically across the screen,
providing a simple way to add dynamic movement to elements. It includes
attributes like direction to specify whether the content moves left, right, up, or
down.
Syntax:
<marquee> <--- contents ---></marquee>

• Attributes of Marquee Tag

1.bgcolor
2.direction
3.loop
4.height
5.width
6.hspace
7.vspace
8.HR/BR
9.Behavior
1.bgcolor Define the background color of the marquee.
2. direction Define the direction (Top, Down, Left, Right)of scrolling the content.
3 Loop Specifies how many times content moves. The default value is
infinite.
4.height Define the height( px or %)of marquee
For example
height="20" or height="30%"
5.width Define the width (px or %)of marquee
For example
width="10" or width="20%"
6.hspace Specify horizontal space. (px )around the marquee .its value can be
like hspace="20" or hspace="30%"
7.vspace Specify vertical space (px) around marquee .its value can be like
vspace="20" or vspace="30%"
8.Scrollamount Marquee speed can be changed using the "scrollamount"
attribute. For example, if you are using scrollamount="1", then it sets the marque
to scroll very slowly, and as you increase the "scrollamount," the scrolling speed
will also increase
For example
1.<marquee behavior="scroll" direction="up" scrollamount="1">Slow
Scrolling</marquee> 2.<marquee behavior="scroll" direction="right"
scrollamount="12">Little Fast Scrolling</marquee>
3.<marquee behavior="scroll" direction="left" scrollamount="20">Fast
Scrolling</marquee>
4.<marquee behavior="scroll" direction="right" scrollamount="50">Very Fast
Scrolling</marquee>
9.HR
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, no shade, 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 no shade 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.

10.BR
The BR tag is an HTML tag used to insert a line break, which creates a new line
within a block of text.
It is a self-closing tag, which means it does not require a closing tag.
It is generally used in poem or address where the division of line is necessary
Example:-
<p>If you want to break a line <br> in a paragraph, <br> use the BR element in <br>
your HTML document.</p>
This code will display four lines of text separated by a line break.
The BR tag is often used to create line breaks within lists, addresses, and other
blocks of text.
10. Behavior
The behavior attribute specifies the behavior of the scrolling content. It
determines whether the content scrolls continuously, only once, or in a loop.
Possible values include:
1. Scroll : Content scrolls continuously.
2. Slide : Content slides in and stops.
3. Alternate : Content scrolls back and forth.
Ex:

<HTML>

<HEAD>

<TITLE>Marquee TAG</TITLE>

</HEAD>

<BODY >

<MARQUEE BGCOLOR=RED DIRECTION=LEFT >

<FONT COLOR=YELLOW SIZE=2>

HTML

</FONT>

</MARQUEE><br><br>

<MARQUEE BGCOLOR=PINK DIRECTION=RIGHT >

<FONT COLOR = YELLOW SIZE=3>

HTML

</FONT>

</MARQUEE><br><br>

<MARQUEE BGCOLOR=GREEN DIRECTION=UP >

<FONT COLOR=BLUE SIZE = 4 >

HTML
</FONT>

</MARQUEE><br><br>

<MARQUEE BGCOLOR=BLACK DIRECTION=DOWN >

<FONT COLOR=WHITE SIZE = 5 >

HTML

</FONT>

</MARQUEE><br><br>

</BODY>

</HTML>

Output:
1.Adding Image:
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:

1.src - Specifies the path to the image

2.alt - Specifies an alternate text for the image

Syntax:

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

<HTML>

<HEAD>

<TITLE>Add Image </TITLE>

</HEAD>

<BODY>

<marquee behavior="alternate" direction= "left">

<img src="C:\Users\shrey\Pictures\Saved Pictures\NATURE.JPG" width="100px"

height="100px">

</img>

</marquee>

</BODY>

</HTML>
Output:
2.Adding Audio:
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.
Ex
<audio controls>
<source src="audio.mp3" type="audio/mpeg">Your browser does not support the audio
element.</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.
The text "Your browser does not support the audio element." will be displayed if the browser
does not support the AUDIO tag.
We can also add other attributes to the AUDIO tag to control the appearance and behavior of the
audio player.
Ex
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 website.
EX

<HTML>

<HEAD>

<TITLE>Add Audio </TITLE>

</HEAD>

<h1>Audio</h1>

<source src="C:\Users\shrey\Downloads\ringtone.mp3" type="audio/mp3">

</audio>

</BODY>

</HTML>

Output:
2.Adding Video:
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.

<HTML>

<HEAD>

<TITLE>Add Video </TITLE>

</HEAD>

<iframe width="200" height="200"

src="https://www.youtube.com/embed/es4x5R-rV9s"

title="Amazon 4k - The World’s Largest Tropical Rainforest Part 2 | Jungle Sounds | Scenic
Relaxation Film"

frameborder="0"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-

picture; web-share"

referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>

</iframe>
</BODY>

</HTML>

Output:
Date: 13/06/2024
Form Tag
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.
Input tag
The input tag in HTML is 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.
Here are some of the most commonly used input types and their
attributes
• type="text": creates a single-line text input control. The name
attribute is used to specify the name of the input control.
• type="password": creates a single-line password input control.
• type="email": creates a single-line email input control.
• type="number": creates a single-line number input control.
• type="checkbox": creates a checkbox input control.
• The “value” attribute is used to specify the value of the checkbox
when it is checked.
• type="radio": creates a radio button input control. The “name”
attribute is used to specify the name of the input control, and the
value attribute is used to specify the value of the radio button when
it is selected.
• type="submit": creates a submit button input control. The value
attribute is used to specify the text that appears on the button.
• type="reset": creates a reset button input control. The value
attribute is used to specify the text that appears on the button.
• type="button": creates a generic button input control. The value
attribute is used to specify the text that appears on the button.
Task 1 : Contact us form

<HTML>
<HEAD>
<TITLE>CONTACT US FORM</TITLE>
</HEAD>
<BODY>
<STYLE>
INPUT[TYPE="TEXT"]{
WIDTH:100%;
</STYLE>
<FORM>
<TABLE BORDER=2 BORDERCOLOR=BLACK BGCOLOR=CREAM
CELLSPACING=10>
<TR ALIGN=CENTER BGCOLOR=maroon><TD><FONT COLOR=white>
Contact Us
</FONT></TD></TR>
<TR><TD>
<INPUT TYPE="TEXT" PLACEHOLDER="Name...">
</TD></TR>
<TR><TD>
<INPUT TYPE="TEXT" PLACEHOLDER="Email...">
</TD></TR>
<TR><TD>
<INPUT TYPE="TEXT" PLACEHOLDER="Subject...">
</TD></TR>
<TR><TD>
<TEXTAREA PLACEHOLDER="MESSAGE....." ROWS=3 COLS=30>
</TEXTAREA><BR>
</TD></TR>
<TR ALIGN=CENTER BGCOLOR=LIGHTYELLOW><TD>
<INPUT TYPE="TEXT" value="SEND MESSAGE">
</TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Output:
Task 2 : SIGNUP form
<HTML>

<HEAD>

</HEAD>

<BODY>

<TABLE BGCOLOR=BLACK CELLSPACING=0 WIDTH=400PX HEIGHT=400PX>

<FORM>

</SELECT>

<OPTION>MONTH</OPTION>

</SELECT>

</SELECT>

</TD></TR><BR>

<TR ALIGN=CENTER><TD><FONT SIZE=2 COLOR=YELLOW>

Gender</FONT>

</TD>

<TD>

<INPUT TYPE=RADIO NAME="MALE"><FONT SIZE=2 COLOR=YELLOW>Male</FONT>

<INPUT TYPE=RADIO NAME="Female"><FONT SIZE=2 COLOR=YELLOW>Female </FONT>

</TD></TR><BR><BR>

<TR ALIGN=CENTER><TD><FONT SIZE=2 COLOR=YELLOW>

Country</FONT>

</TD>
<TD>

<OPTION>Country</OPTION>

<OPTION>Afganistan</OPTION>

<OPTION>Algeria</OPTION>

<OPTION>Bangladesh</OPTION>

<OPTION>India</OPTION>

<OPTION>Brazil</OPTION>

<OPTION>Canada<OPTION>

<OPTION>China</OPTION>

<OPTION>Egypt</OPTION>

</SELECT>

</TD></TR><BR><BR>

<TR ALIGN=CENTER><TD><FONT SIZE=2 COLOR=YELLOW>

Email</FONT>

</TD>

<TD>

<INPUT TYPE="TEXT" PLACEHOLDER="Enter E-mail">

</TD></TR><BR><BR>

<TR ALIGN=CENTER><TD><FONT SIZE=2 COLOR=YELLOW>

Phone</FONT>

<INPUT TYPE="CHECKBOX">I Agree to the Terms of use

</FONT></TD></TR>

<TR BGCOLOR=DARKORANGE >

<INPUT TYPE="SUBMIT" VALUE="SUBMIT" >

<INPUT TYPE="RESET" VALUE="CANCLE">

</TR></TD>

</CENTER>

</FORM>

</TABLE>

</BODY>

</HTML>
Output:
Task 3 : Registration form
<HTML>

<HEAD>

<TITLE>REGISTRATION FORM</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=1 BORDERCOLOR=GRAY BGCOLOR=WHITE CELLSPACING=5 WIDTH=400PX

HEIGHT=400PX>

<FORM>

<TR BGCOLOR=LIGHTYELLOW >

<TD ALIGN=center COLSPAN=2><FONT SIZE=5 COLOR=red>

<B>Registration Form</B>

</font>

</td></TR>

<TR BGCOLOR=SKYBLUE><TD ALIGN=center>Enter Name </td>

<TD>

</TD></TR><br><br>

<TR BGCOLOR=SKYBLUE><TD ALIGN=center>Enter Password </td>

<TD>

</TD></TR><br><br>

<TR BGCOLOR=SKYBLUE><TD ALIGN=center>Enter address </td>

<TD>

<TEXTAREA ROWS=3 COLS=30>

</TEXTAREA>
</TD></TR><br><br>

<TR BGCOLOR=SKYBLUE><TD ALIGN=center>Select Game </td>

<TD>

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

</TD></TR><br><br>

<TR ALIGN=CENTER BGCOLOR=SKYBLUE><TD>

Gender</TD><TD>

<INPUT TYPE="RADIO" NAME="MALE">Male

<INPUT TYPE="RADIO" NAME="Female">Female

</TD></TR><BR><BR>

<TR BGCOLOR=SKYBLUE><TD>Select ur age</TD>

<td>

<option>select</option>

</Select>

</TD></TR>

<TR BGCOLOR=SKYBLUE><TD>Select Photo</TD>

<td>

<INPUT TYPE="button" VALUE="Choose File">No file chosen

</TD></TR><BR><BR>

<TR bgcolor=SKYBLUE ALIGN=CENTER><TD COLSPAN=2>

<INPUT TYPE="BUTTON" VALUE="Click me">

<INPUT TYPE="RESET" VALUE="RESET">

<INPUT TYPE="SUBMIT" VALUE="SUBMIT FORM"></TD>

</TR>

</FORM>

</CENTER>

</TABLE>

</BODY>

</HTML>

Output:

Unit 1_web Designing
No ratings yet
Unit 1_web Designing
31 pages
HTML Reviewer PDF
No ratings yet
HTML Reviewer PDF
19 pages
HTML1
No ratings yet
HTML1
23 pages
Training Report Anu.doxx (2)
No ratings yet
Training Report Anu.doxx (2)
253 pages
sumit 000000
No ratings yet
sumit 000000
46 pages
Unit-1_HTML_and_CSS
No ratings yet
Unit-1_HTML_and_CSS
189 pages
WT 1st Unit
100% (1)
WT 1st Unit
69 pages
web school resources [Autosaved]
No ratings yet
web school resources [Autosaved]
161 pages
Unit - 2 HTML Part -1 (Notes)
No ratings yet
Unit - 2 HTML Part -1 (Notes)
20 pages
WT (1)
No ratings yet
WT (1)
93 pages
Introduction to HTML
No ratings yet
Introduction to HTML
99 pages
varun kumar
No ratings yet
varun kumar
50 pages
CHSE_12TH_HTMLNote
No ratings yet
CHSE_12TH_HTMLNote
34 pages
Training Report Anu-1
No ratings yet
Training Report Anu-1
84 pages
HTML Notes
No ratings yet
HTML Notes
171 pages
Chapter 10 - HTML
No ratings yet
Chapter 10 - HTML
98 pages
BCA - (WEB PROGRAMMING) (Total 5 Units PDF
100% (2)
BCA - (WEB PROGRAMMING) (Total 5 Units PDF
153 pages
Ankita 4
No ratings yet
Ankita 4
70 pages
lecture01_wt_introduction_to_html
No ratings yet
lecture01_wt_introduction_to_html
44 pages
HTML is widely used
No ratings yet
HTML is widely used
26 pages
Lecture 1 Introduction To HTML
No ratings yet
Lecture 1 Introduction To HTML
68 pages
Web Designing
No ratings yet
Web Designing
80 pages
Fswd@unit 1@aiml
No ratings yet
Fswd@unit 1@aiml
56 pages
Mrunal D Report4
No ratings yet
Mrunal D Report4
88 pages
CS1 CHAPTER 4_New
No ratings yet
CS1 CHAPTER 4_New
41 pages
css1 css5-1 Merged
No ratings yet
css1 css5-1 Merged
27 pages
unit 4 ICSE imp topics
No ratings yet
unit 4 ICSE imp topics
43 pages
Copy of Module 2. Introduction to HTML.docx
No ratings yet
Copy of Module 2. Introduction to HTML.docx
26 pages
6th Sem Mini Project
No ratings yet
6th Sem Mini Project
19 pages
HTML Notes
No ratings yet
HTML Notes
42 pages
Chap 02 - Intro To HTML
No ratings yet
Chap 02 - Intro To HTML
32 pages
BWD Unit-1
No ratings yet
BWD Unit-1
18 pages
Informatics Practices-Sahodaya QP New
No ratings yet
Informatics Practices-Sahodaya QP New
15 pages
Project on HTML Savita Yadav
No ratings yet
Project on HTML Savita Yadav
40 pages
Chapter 2.part1
No ratings yet
Chapter 2.part1
62 pages
Graffiti A Pvii Css Page Pack
No ratings yet
Graffiti A Pvii Css Page Pack
39 pages
Task 8 HTML
No ratings yet
Task 8 HTML
18 pages
MM 1st Unit Notes Sum
No ratings yet
MM 1st Unit Notes Sum
30 pages
Saurav Gandu@mahagandu
No ratings yet
Saurav Gandu@mahagandu
15 pages
WEDE5020POE
No ratings yet
WEDE5020POE
14 pages
Structure of HTML Document
No ratings yet
Structure of HTML Document
9 pages
Ilovepdf Merged
No ratings yet
Ilovepdf Merged
304 pages
HTML and Css
No ratings yet
HTML and Css
27 pages
HTML
No ratings yet
HTML
14 pages
HTML
No ratings yet
HTML
8 pages
HTML Tut
No ratings yet
HTML Tut
82 pages
Abbrivation
No ratings yet
Abbrivation
35 pages
Comprog
No ratings yet
Comprog
11 pages
HTML
No ratings yet
HTML
8 pages
HTML Presentation
No ratings yet
HTML Presentation
5 pages
Translating (Joomla) Websites
No ratings yet
Translating (Joomla) Websites
32 pages
WebTechnology Unit II Notes
No ratings yet
WebTechnology Unit II Notes
16 pages
WebMap Using Leaflet-For Beginners
No ratings yet
WebMap Using Leaflet-For Beginners
21 pages
Website HTML
No ratings yet
Website HTML
7 pages
Library - Management - Project Report by Vaishali & Sukhwinder Kaur BCA (3rd Yr.)
No ratings yet
Library - Management - Project Report by Vaishali & Sukhwinder Kaur BCA (3rd Yr.)
64 pages
How To Deploy A Webpage On Vercel
No ratings yet
How To Deploy A Webpage On Vercel
10 pages
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
No ratings yet
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
98 pages
Web Tech and Application
No ratings yet
Web Tech and Application
68 pages
HTML
No ratings yet
HTML
14 pages
Fix 10+ Most Common Website Mistakes
No ratings yet
Fix 10+ Most Common Website Mistakes
25 pages
Project for Nielit
No ratings yet
Project for Nielit
12 pages
HTML
No ratings yet
HTML
11 pages
Macromedia Flash Syllabus
No ratings yet
Macromedia Flash Syllabus
27 pages
Practical File - Vikas
No ratings yet
Practical File - Vikas
13 pages
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
No ratings yet
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
36 pages
Wit Unit2
No ratings yet
Wit Unit2
9 pages
GEE002
No ratings yet
GEE002
8 pages
BWD Unit-1
No ratings yet
BWD Unit-1
18 pages
IT 2353 Unit II 2marks
No ratings yet
IT 2353 Unit II 2marks
30 pages
Cbse Notes For Class 10 Foundation of Information Technology - HTML (Hypertext Markup Language)
0% (1)
Cbse Notes For Class 10 Foundation of Information Technology - HTML (Hypertext Markup Language)
2 pages
HTML Notes
No ratings yet
HTML Notes
29 pages
Introduction To HTML
No ratings yet
Introduction To HTML
17 pages
Nimbus User Guide
No ratings yet
Nimbus User Guide
156 pages
Unit 5
No ratings yet
Unit 5
5 pages
Bibliography Writing
No ratings yet
Bibliography Writing
27 pages
Coumuter Project For Class 10
No ratings yet
Coumuter Project For Class 10
16 pages
MX M350N Manual
No ratings yet
MX M350N Manual
93 pages
Manual Solution Kendall Sad 9 Im 11
No ratings yet
Manual Solution Kendall Sad 9 Im 11
44 pages
It Report
0% (1)
It Report
24 pages
Short Cut Keys
No ratings yet
Short Cut Keys
3 pages
Synopsis On Online Blood Bank
No ratings yet
Synopsis On Online Blood Bank
7 pages
Digital Image Processing: Lab Assignements: Instructions
No ratings yet
Digital Image Processing: Lab Assignements: Instructions
4 pages
Web Application TOR
No ratings yet
Web Application TOR
3 pages
Rico Ajax Engine
No ratings yet
Rico Ajax Engine
10 pages
ESP32 Based Webserver For Text To Speech (TTS) Conversion
100% (1)
ESP32 Based Webserver For Text To Speech (TTS) Conversion
10 pages
Introduction To Web Technology: Unit 3 HTML
No ratings yet
Introduction To Web Technology: Unit 3 HTML
49 pages
LBYBUS1 Syllabus
No ratings yet
LBYBUS1 Syllabus
6 pages
5.1 Computer Networks: (Common With Information Technology) Rationale
No ratings yet
5.1 Computer Networks: (Common With Information Technology) Rationale
14 pages
It Spring Edutech: Chapter 1: Getting Started With HTML
No ratings yet
It Spring Edutech: Chapter 1: Getting Started With HTML
12 pages
Comprehensive Hypertext Markup Language (HTML).: A Tutorial Guide to Editing and Developing a Responsive and Dynamic Website for Beginners.
From Everand
Comprehensive Hypertext Markup Language (HTML).: A Tutorial Guide to Editing and Developing a Responsive and Dynamic Website for Beginners.
Ibrahim Nugwa Abdulrazak
No ratings yet