Government Polytechnic Paonta Sahib (H.P.

industrial training report file

at
Royallogics Services Pvt. Ltd.
Solan HP
 Web Development
Practical Training Report

Department of Computer Science &Engineering

Submitted to: Submitted By:

MR Mukesh Anshul thakur
Professor Roll.No.230814204009
Department of Computer Science SRNo.:230814204009
Semester/Year:3Sem/IIYear

Department of Computer Science &Engineering

Government Polytechnic Paonta Sahib (H.P.)

Jan 2025

1
 ABOUT the company

RoyalLogics Services Private Limited

RoyalLogics Services Pvt. Ltd. is an ISO-certified global software

company in Mohali Chandigarh. We are experienced in WordPress,
JAVA, Computer Basics, Custom CMS development, PHP Frameworks,
Java-based applications, Desktop applications, Search Engine
Optimization (SEO), and Mobile development. Have professionally
skilled, creative, and multi-talented web developers, software developers
web designers, and graphic designers. We follow the principle of “Good
quality product and full client satisfaction”. Our young, dynamic, and
talented team is ready to serve our client’s needs for the best/niche end
product at their disposal. The company derives its essence from the ethics
on which our strong foundation was laid. Also, provide
internship/industrial training to freshers and help them to become IT
professionals. Also, I Have completed 400+ projects successfully
that are running smoothly in the end-user environment. Providing a good
working environment for our team members, so they enjoy work.
CERTIFICATE
 ACKNOWLEDGEMENT

I’ve got this golden opportunity to express my kind gratitude and sincere thanks to my Head
ofDepartmentof“CSE”fortheirkindsupportandnecessarycounsellinginthepreparationof this
report. I ’m also indebted to each person responsible for the making up of this project directly
or indirectly.

I must also acknowledge or deep debt of gratitude each one of my colleagues who led this
project come out in the way it is. It’s my hard work and untiring sincere efforts and mutual
cooperation to bring out the project work. Last but not the least, I would like to thank my
parents for their sound good and cheerful support. They have always inspired us and kept our
spirit up .

Anshul thakur

3
 PREFACE

The main objective of any computer science student is to get as much of practical knowledge
as possible. Being an able to have a practical knowledge by developing a project is a lifetime
experience. As practical knowledge is as important as theoretical knowledge we are thankful
of having a project.

Through the development of the project we had a great experience of various strategies that
can be applied in development of project. This project is the stepping stone for our carrier.

Wearepleasedtopresentthisproject.Propercarehasbeentakenwhileorganizingtheproject so thatit
is to comprehend.
CONTENTS

CHAPTER1:INTRODUCTIONABOUTTHECOURSE..............................................................8

Objectives.............................................................................................................................7

Goals.....................................................................................................................................7

CHAPTER2:BasicsofFront-EndWeb Design........................................................................9

HTML.................................................................................................................................10-15
Introduction.........................................................................................................................10
HTML styles........................................................................................................................11
Features of HTML...............................................................................................................11
CHAPTER4:CSS...............................................................................................................16-18
Introduction.........................................................................................................................16
Attaching a css file..............................................................................................................16
CHAPTER5:JAVASCRIPT...............................................................................................19-22
Introduction.........................................................................................................................19
Variables and control statements........................................................................................19
Conditional statements........................................................................................................21
Functions in javascript.........................................................................................................21
CHAPTER6:PROJECT.....................................................................................................23-24
CHAPTER7:CONCLUSION...................................................................................................25
REFERENCES.......................................................................................................................26
 CHAPTER1:INTRODUCTION ABOUT THECOURSE

Objectives

Learning Objectives/Internship Objectives

Internships are generally thought off obereserved for college students looking to gain
experience in a particular field. However, a wide array of people can benefit from
TrainingInternshipsinordertoreceiverealworldexperienceanddeveloptheirskills.
An objective for this position should emphasize the skills you already possess in the area
and your interest in learning more
Internships are utilized in a number of different career fields, including architecture,
engineering, healthcare, economics, advertising and many more.
Someinternshipisusedtoallowindividualstoperformscientificresearchwhileothers are
specifically designed to allow people to gain first-hand experience working.
Utilizinginternshipsisagreatwaytobuildyourresumeanddevelopskillsthatcanbe emphasized
in your resume for future jobs. When you are applying for a Training Internship ,makes
are to highlight any specials kills ortalents that can make you stand apart from the rest of
the applicants so that you have an improved chance of landing the position.

overview

Everything you see on a website, like buttons, links, animations, and more, were created by a
frontendwebdeveloper.Itisthefrontenddeveloper'sjobtotakethevisionanddesignconcept from the
client and implement it through code.
Requirements for Frontend Development:

HTML : HTML stands for Hyper Text Markup Language. It is used to design the frontend
portionofwebpagesusingmarkuplanguage.Itactsasaskeletonforawebsitesinceitisused to make the
structure of a website.
CSS: Cascading StyleSheetsfondlyreferredtoasCSSisasimplydesignedlanguageintended to
simplify the process of making web pages presentable. It is used to style our website.
Javascript : JavaScript is a scripting language used to provide a dynamic behavior to our
website.
HTML

HTML:

Introduction

HTML stands for Hyper Text Markup Language

HTML is the standard markup language for creating webpage
HTML describes the structure of a Webpage
HTML consists of a series of elements
HTML elements tell the browser how to display the content
Example:

<!DOCTYPEhtml>
<html>
<head>
<title>PageTitle</title>
</head>
<body>

<h1>MyFirstHeading</h1>
<p>Myfirstparagraph.</p>

</body>
</html>
The<!DOCTYPEhtml>declarationdefinesthatthisdocumentisanHTML5 document
The<html>element istherootelementofanHTML page
The<head>element containsmeta informationabout theHTML page
The<title>elementspecifiesatitlefortheHTMLpage(whichisshowninthe browser's title bar
or in the page's tab)
The<body>elementdefinesthedocument'sbody,andisacontainerforallthevisible contents,
such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The<h1> elementdefinesalargeheading.
10
The<p> element defines a paragraph

HTML Styles

The HTML style attribute is used to add styles to an element, such as color,font,
size, and more.
Background Color
The CSS background-color property defines the background color form HTML element.
Text Color
The CSS color property defines text color form HTML element.
Text Size
The CSS font-size property defines the text size form HTML element
Text Alignment
The CSS text-align property defines the horizontal text alignment
Form HTML element.

Features of HTML:

It is easy to learn and easy to use.

It is platform-independent.
Images, videos ,and audio to a webpage.
Hyper text can be added to the text.
It is a markup language.

HTML5TagsandStructuralElements-
<!--...--> Defines a comment
<!DOCTYPE> Defines the document type
<a> Defines a hyperlink
<article> Defines an article
<aside> Defines content aside from the page content
<audio> Defines embedded sound content
<b> Defines bold text
<body> Defines the document' s body
<br> Defines a single line break
<button> Defines a clickable button
<dir> NotsupportedinHTML5.Use<ul>instead.
<div> Defines asection in a document
<dl> Defines a descriptionlist
<dt> Defines a term/name in a descriptionlist
<em> Defines emphasizedtext
<footer> Defines a footer for a documentor section
<form> Defines an HTML form foruserinput
<frame> Notsupported in HTML5.
<h1>to <h6> DefinesHTML headings
<head>Containsmetadata/information forthe document
<header> Definesaheaderforadocumentor section
<hr> Definesathematicchangeinthecontent
<html>Definesthe rootofanHTMLdocument
<i> Definesapart oftext inanalternate voiceor mood
<img> Definesanimage
<input> Definesaninput control
<label> Definesalabelfor an<input>element
<li> Definesalistitem
<nav> Definesnavigation links
<p> Definesaparagraph
<param> Definesaparameterforan object
<samp> Definessampleoutputfromacomputer program
<script> Definesaclient-sidescript
<section> Definesasectioninadocument
<select> Definesadrop-downlist
<small> Definessmallertext
<span>Definesasectioninadocument
<strong> Definesimportanttext
<style>Definesstyleinformationfora document
<sub> Definessubscripted text
<table> Definesatable
<tbody> Groupsthebodycontentina table
<td> Definesa cellina table
<textarea> Definesamultiline inputcontrol(textarea)
<th> Definesaheadercellinatable
<thead> Groupstheheadercontentina table
<time> Definesaspecifictime(ordatetime)
<title> Definesatitleforthe document
<tr> Definesarowinatable
<ul> Definesanunorderedlist

HTMLLayoutElements
HTMLhasseveralsemanticelementsthatdefinethedifferentpartsof awebpage
<header>-Definesaheaderforadocumentor a section
<nav>-Definesasetofnavigationlinks
<section>- Definesasectioninadocument
<article>-Definesanindependent,self-containedcontent
<aside>- Definescontentasidefromthe content(likea sidebar)
<footer>- Definesafooter foradocument or asection
<details>- Defines additionaldetailsthattheusercanopenandcloseondemand
<summary>-Defines a headingforthe<details>element

HTML5InputElement:AttributesfortheInput Tag

button Apushbuttonwithnodefaultbehaviordisplayingthevalueofthevalue attribute,

empty by default.
checkbox Acheckboxallowingsinglevaluestobe selected/deselected.
color Acontrolforspecifyingacolor;openingacolorpickerwhenactivein supporting
browsers.
date A control for entering a date (year, month, and day, with no time). Opens a
datepickerornumericwheelsforyear,month,daywhenactiveinsupporting browsers.

datetime- Acontrolforenteringadateandtime,withnotimezone.Opensadatepicker or numeric

local wheels for date- and time-components when active in supporting browsers.

email Afieldforeditinganemailaddress.Lookslikeatextinput,buthasvalidation
parameters and relevant keyboard in supporting browsers and devices with
dynamic keyboards.
 file Acontrolthatletstheuserselectafile.Usetheacceptattributetodefinethe types of
files that the control can select.
hidden Acontrolthatisnotdisplayedbutwhosevalueissubmittedtotheserver. There is an
example in the next column, but it's hidden!
image Agraphicalsubmitbutton.Displaysanimagedefinedbythesrcattribute.The alt
attribute displays if the image src is missing.
month Acontrolforenteringa monthandyear,withnotimezone.
number A control for entering a number. Displays a spinner and adds default
validationwhensupported.Displaysanumerickeypadinsomedeviceswith dynamic
keypads.
password Asingle-linetextfieldwhosevalueisobscured.Willalertuserifsiteisnot secure.

radio Aradiobutton,allowingasinglevaluetobeselectedoutofmultiplechoices with the

same name value.
range A control for entering a number whose exact value is not important. Displays
asarangewidgetdefaultingtothemiddlevalue.Usedinconjunctionminand max to
define the range of acceptable values.
reset Abuttonthatresetsthecontentsoftheformtodefaultvalues.Not recommended.

search A single-line text field for entering search strings. Line-breaks are
automaticallyremovedfromtheinputvalue.Mayincludeadeleteiconin supporting
browsers that can be used to clear the field.
submit Abuttonthatsubmits the form.
text Thedefaultvalue.Asingle-linetextfield.Line-breaksareautomatically removed
from the input value.
time Acontrolforenteringatimevalue withnotimezone.
url A field for entering a URL. Looks like a text input, but has validation
parametersandrelevantkeyboardinsupportingbrowsersanddeviceswith dynamic
keyboards.

Fig3.1HTMLinputelements
AdditionalHTMLElements-

<address> The<address>HTML element indicates that the enclosed HTML provides

contact information for a person or people, or for an organization.

<article> The<article>HTML element represents aself-contained composition in a

document, page, application, or site, which is intended to be independently
distributable or reusable (e.g., in syndication).Examples include: a forum
post, a magazine or newspaper article, or a blog entry,

<aside> The <aside> HTML element represents a portion of a document whose

contentisonly indirectly related to the document's main content .Asides
are frequently presented as sidebars or call-out boxes.
<footer> The<footer>HTML element represents a footer for its neare stsectioning
content or sectioning root element. A <footer> typically contains
information about the author of the section, copyright data or links to
related documents.
<header> The<header>HTML element represent introductory content, typically a
group of introductory or navigational aids. It may contain some heading
elements but also a logo, a search form, an author name, and other
elements.
<h1>,<h2>, The <h1> to <h6> HTML elements represent six levels of section
<h3>,<h4>, headings.<h1>is the highest section level and <h6>ist he lowest.
<h5>,<h6>
<main> The<main>HTML element represents the dominant content of the body
of a document. The main content area consists of content that is directly
related to or expands upon the central topic of a document, or the central
functionality of an application.
<nav> The<nav>HTML element represents a section of a page whose purpose
is to provide navigation links, either within the current document or to
other documents. Common examples of navigation sections are menus,
tables of contents, and indexes.
<section> The<section>HTML element represents a a document, which doesn't
have a more specific semantic element to represent it. Sections should
always have a heading, with very few exceptions.

Fig3.2AdditionalHTMLelements.

HTML Lists

Unordered HTML List

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:

<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>

An unordered HTML list

 Coffee
 Tea
 Milk

Ordered HTML List

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:

Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

An ordered HTML list

1. Coffee
2. Tea
3. Milk

HTML 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:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

A Description List
Coffee
- black hot drink
Milk
- white cold drink

HTML Block and Inline Elements

Every HTML element has a default display value, depending on what type of element it is.

The two most common display values are block and inline.

Block-level Elements
A block-level element always starts on a new line, and the browsers automatically add some space (a
margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left and right as far as it
can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

The <p> element is a block-level element.

The <div> element is a block-level element.

Here are the block-level elements in HTML:

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>

Inline Elements
An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This is a <span> element inside a paragraph.

Here are the inline elements in HTML:

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>
Note: An inline element cannot contain a block-level element!

The <span> Element

The <span> element is an inline container used to mark up a part of a text, or a part of a document.

The <span> element has no required attributes, but style, class and id are common.

When used together with CSS, the <span> element can be used to style parts of the text:

Example
<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my father
has <span style="color:darkolivegreen;font-weight:bold;">dark

The <div> Element

The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but style, class and id are common.
When used together with CSS, the <div> element can be used to style blocks of content:

Example
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.</p>
</div>

HTML Semantic Elements

Semantic elements = elements with a meaning.

What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

Semantic Elements in HTML

Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate
navigation, header, and footer.

In HTML there are some semantic elements that can be used to define different parts of a web page:

 <article>
 <aside>
 <details>
 <fig caption>
 <figure>
 <footer>
 <header>
 <main>
 <mark>
  <nav>
 <section>
 <summary>
 <time>

HTML <section> Element

The <section> element defines a section in a document.

According to W3C's HTML documentation: "A section is a thematic grouping of

content, typically with a heading."

Examples of where a <section> element can be used:

 Chapters
 Introduction
 News items
 Contact information

A web page could normally be split into sections for introduction, content, and
contact information.
 HTML <article> Element
The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to distribute it
independently from the rest of the web site.

Examples of where the <article> element can be used:

 Forum posts
 Blog posts
 User comments
 Product cards
 Newspaper articles

HTML <header> Element

The <header> element represents a container for introductory content or a set of
navigational links.

A <header> element typically contains:

 one or more heading elements (<h1> - <h6>)

 logo or icon
 authorship information

Note: You can have several <header> elements in one HTML document.
However, <header> cannot be placed within a <footer>, <address> or
another <header> element.

HTML <footer> Element

The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

 authorship information
 copyright information
 contact information
 sitemap
 back to top links
 related documents

You can have several <footer> elements in one document.

 HTML <nav> Element
The <nav> element defines a set of navigation links.

<nav> <a href="/html/">HTML</a> |

<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

HTML <aside> Element

The <aside> element defines some content aside from the content it is placed in
(like a sidebar).

The <aside> content should be indirectly related to the surrounding content.

Display some content aside from the content it is placed in:

<p>My family and I visited The Epcot center this summer. The weather was nice,
and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting
attractions, international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>

Semantic Elements in HTML

Below is a list of some of the semantic elements in HTML.
Tag Description

<article> Defines independent, self-contained content

<aside> Defines content aside from the page content

<details> Defines additional details that the user can view or hide

<figcaption> Defines a caption for a <figure> element

<figure> Specifies self-contained content, like illustrations, diagrams, photo

<footer> Defines a footer for a document or section

<header> Specifies a header for a document or section

<main> Specifies the main content of a document

<mark> Defines marked/highlighted text

<nav> Defines navigation links

<section> Defines a section in a document

 <summary> Defines a visible heading for a <details> element

<time> Defines a date/time

HTML Forms
An HTML form is used to collect user input. The user input is most often sent
to a server for processing.

The <form> Element

The HTML <form> element is used to create an HTML form for user input:

<form>
.
form elements
.
</form>

The <form> element is a container for different types of input elements, such as:
text fields, checkboxes, radio buttons, submit buttons, etc.

All the different form elements are covered in this chapter: HTML Form Elements.

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on

the type attribute.
Here are some examples:

Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many cho

<input type="checkbox"> Displays a checkbox (for selecting zero or more of ma

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

All the different input types are covered in this chapter: HTML Input Types.
 The <label> Element
Notice the use of the <label> element in the example above.

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.

The <label> element also helps users who have difficulty clicking on very small
regions (such as radio buttons or checkboxes) - because when the user clicks the
text within the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.

Radio Buttons
The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Example
A form with radio buttons:

<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>

This is how the HTML code above will be displayed in a browser:

Choose your favorite Web language:

HTML
CSS
JavaScript
 Checkboxes
The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of

choices.

Example
A form with checkboxes:

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

This is how the HTML code above will be displayed in a browser:

I have a bike
I have a car
I have a boat

The Submit Button

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.

The form-handler is specified in the form's action attribute.

Example
A form with a submit button:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
 <input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

This is how the HTML code above will be displayed in a browser:

First name:
John

Last name:
Doe

Submit

The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

Example
This example will not submit the value of the "First name" input field:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
 CSS

CSS:

Introduction

CSSisthelanguagefordescribingthepresentationofWebpages,includingcolours,layout
, and fonts. It allows one to adapt the presentation to different types of devices,
such as large screens, small screens, or printers. CSS is independent of HTML and
can be used with any XML-based mark up language. The separation of HTML from
CSS makes it easier to maintain sites, share style sheets across pages, and tailor
pages to different environments.
Thisisreferredtoasthe separationofstructure(or:content)frompresentation.

Therearethree typesofCSSwhicharegiven below:

• Inline CSS
• InternalorEmbedded CSS
• ExternalCSS

AttachingaCSSfile

AftercreatingandsavingtheCSSfile,wejustneedtolinktheCSSandHTMLfiles together so
the browser knows where to look for the CSS file.
IntheheadoftheHTMLdocument,addlinktag
Format:
<head>
⋮
<linkhref=”css/main.css” rel=”stylesheet”
</head>
ThelinkelementisusedtoassociatedifferenttypesofdocumentstoyourHTML,primarily
CSS, but also blog feeds, help documents, licenses, etc.
• href-thisattributeisusedto pointtothelocationof theCSSfile.
• rel-thisattributeisusedtodefinethisitemasastylesheet
Some Basic CSS properties -

• CSSColors
• CSSBackgrounds

• CSSBorders

• CSSMargins

• CSSPadding

• CSSHeight/Width

• CSSBoxModel

• CSSOutline

• CSSText

• CSSFonts

• CSSIcons

• CSSLinks

• CSSLists

• CSSTables

• CSSDisplay

• CSSMax-width

• CSSPosition

• CSSZ-index

• CSSOverflow

• CSSFloat

• CSSInline-block

• CSSAlign

• CSSCombinators

• CSSDropdowns

• CSSForms
 • CSSWebsiteLayout

• CSSUnits

• CSSBackgrounds

• CSSBoxSizing

• CSSMedia Queries

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text color of
the <p> element to red:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

</body>
</html>

2. Internal or Embedded CSS

Internal or Embedded CSS is defined within the HTML
document’s <style> element. It applies styles to specified HTML
elements. The CSS rule set should be within the HTML file in the
head section i.e. the CSS is embedded within the <style> tag
inside the head section of the HTML file.
font-size: 50px;
font-weight: bold<!DOCTYPE html>
<html>

<head>
<style>
.main {
 text-align: center;
}

.GFG {
color: #009900;
;
}

.geeks {
font-style: bold;
font-size: 20px;
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">Internal CSS</div>

<div class="geeks">
Implementation of Internal CSS
</div>
</div>
</body>

</html>

3. External CSS
External CSS contains separate CSS files that contain only style
properties with the help of tag attributes (For example class, id,
heading, … etc). CSS property is written in a separate file with
a .css extension and should be linked to the HTML document
using a link tag. It means that, for each element, style can be set
only once and will be applied across web pages.

<!DOCTYPE html>
 <html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="GFG">External CSS </div>
<div id="geeks">
This shows implementation of External CSS
</div>
</div>
</body>
</html>

CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

 Simple selectors (select elements based on name, id, class)

 Combinator selectors (select elements based on a specific relationship between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute value)

The CSS element Selector

The element selector selects HTML elements based on the element name.

<!DOCTYPE html>

<html>

<head>

<style>

p{

text-align: center;

color: red;

}
</style>

</head>

<body>

<p>Every paragraph will be affected by the style.</p>

<p id="para1">Me too!</p>

<p>And me!</p>

</body>

</html>

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>

</body>
</html>

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

<!DOCTYPE html>
 <html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>

</body>
</html>

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>

<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
 <!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>

The CSS Box Model

In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: content,
padding, borders and margins. The image below illustrates the box model:

Explanation of the different parts:

 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
  Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements.

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists
of: borders, padding, margins, and the actual content.</p>

</body>
</html>

CSS Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

 dotted - Defines a dotted border

 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the border-color value
 ridge - Defines a 3D ridged border. The effect depends on the border-color value
 inset - Defines a 3D inset border. The effect depends on the border-color value
 outset - Defines a 3D outset border. The effect depends on the border-color value
 none - Defines no border
 hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom
border, and the left border).

CSS Text
 CSS has a lot of properties for formatting text.

TEXT FORMATTING
This text is styled with some of the text formatting properties. The
heading uses the text-align, text-transform, and color properties. The
paragraph is indented, aligned, and the space between characters is
specified. The underline is removed from this colored "Try it
Yourself" link.

Text Color
The color property is used to set the color of the text. The color is specified by:

 a color name - like "red"

 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"

Look at CSS Color Values for a complete list of possible color values.

The default text color for a page is defined in the body selector.

Css Font Families

In CSS there are five generic font families:

1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and
elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and
minimalistic look.
3. Mono space fonts - here all the letters have the same fixed width. They create a mechanical look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.

All the different font names belong to one of the generic font families.

Generic Font Family Examples of Font Names

Serif Times New Roman
Georgia
Garamond

Sans-serif Arial
Verdana
Helvetica

Monospace Courier New

Lucida Console
Monaco

Cursive Brush Script MT

Lucida Handwriting

Fantasy Copperplate
Papyrus

CSS Comments
Comments are used to explain the code, and may help when you edit the source
code at a later date.

Comments are ignored by browsers.

A CSS comment is placed inside the <style> element, and starts with /* and ends
with */:
 CSS Backgrounds
The CSS background properties are used to add background effects for
elements.

In these chapters, you will learn about the following CSS background properties:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background (shorthand property)

CSS background-color
The background-color property specifies the background color of an element.

Example
The background color of a page is set like this:

body {
background-color: lightblue;
}

With CSS, a color is most often specified by:

 a valid color name - like "red"

 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"Look at CSS Color Values for a complete
list of possible color values.
 :JAVASCRIPT

Introduction:

Java Script is the world's most popular programming language. Java Script is the
programming language of the Web .Java Script is alight-weight object-oriented
programming language which is used by several websites for scripting the webpage
It is an interpreted, full-fledged programming language that enables dynamic
interactivity on websites when applied to an HTML document. JavaScript is easy to
learn .It is also known as scripting language for web pages
How to add javascript to your HTML file:
 Internal JS: We can add JavaScript directly to our HTML file by writing the
code inside the <script> tag. The <script> tag can either be placed inside the
<head> or the
<body>tag according to the requirement.
 External JS: We can write JavaScript code in other file having an
extension .js and
thenlinkthisfileinsidethe<head>tagoftheHTMLfileinwhichwewanttoaddthis
code.
Syntax to link javascript file to html:<script src="main.js"></script>
Syntax-
<script>
//JavaScriptCode
</script>

Variables and Control Statements-

AJavaScriptvariableissimplyanameofstoragelocation.Therearetwotypesofvariablesin
JavaScript : local variable and global variable.
There are some rules while declaring a Java Script variable(also known as identifiers).
1. Namemuststartwithaletter(atozorAtoZ),underscore(_),ordollar($)sign.
2. After first letter we can use digits(0to9),for example value1.
3. JavaScriptvariablesarecasesensitive,forexamplexandXaredifferentvariable
s. Correct js variables :
1. varx=10;
2. var _value="sonoo"; Incorrect Java Script variable
 1. var123=30;
2. var*aa=320;

 declaring single variable

var name;
 declaring multiple variables

var name ,title,num;

 initializing variables

var name="Harshita";

name = "Rakesh";

If-elseStatementinJavaScript-TheJavaScriptif-elsestatementisusedtoexecutethecode
whether condition is true or false. There are three forms of if statement in JavaScript.

Fig5.1Ifelsestatementin javascript
 Conditional statements:

1. If Statement
2. Ifelse statement
3. ifelseif statement
Syntax:
if(condition)
statemen
t;
elseif(condition)
statement;
.
.
else
statement;

Functions in JavaScript:

FunctionsareoneofthefundamentalbuildingblocksinJavaScript.AfunctioninJavaScriptis
similar to a procedure—a set of statements that performs at as or calculates a value,
but for a procedure to qualify as a function, it should take some input and return an
output where there is some obvious relationship between the input and the output.
To use a function, you must define it somewhere in the scope from which you wish to
call it.
Function Definition:
Before,usingauser-
definedfunctioninJavaScriptwehavetocreateone.Wecanusetheabove syntax to create
a function in JavaScript. A function definition is sometimes also termed as function
declaration or function statement.
Rules for creating a function in JavaScript:
Function names can contain letters, digits, underscores, and dollar signs (same rules
as variables).
Theparenthesesmayincludeparameternamesseparatedbycommas:
(parameter1,parameter2,
...).
JavaScript Function Syntax:
Function name(parameter1,parameter2,parameter3){
//code to be executed
Calling Functions : After defining a function, the next step is to call them to make
use of the function. The JavaScript Function call() method calls a function with a
given this value and arguments provided individually. The call() method calls a
function by passing this and specified values as arguments.
Syntax:
Function Name(Value1,Value2, ..);
Return Statement : The return statement ends function execution and specifies a
value to be
returnedtothefunctioncaller.Whenareturnstatementisusedinafunctionbody,theexecuti
on of the function is stopped. If specified, a given value is returned to the function
caller. For example, the following function returns the square of its argument, x,
where x is a number.
Onclick event :The on click even generally occurs when the user clicks on an
element .It allows the programmer to execute a JavaScript's function when an
element gets clicked. This event can be used for validating a form, warning
messages and many more. Document .query Selector: When a return statement is
used in a function body, the execution
ofthefunctionisstopped.Ifspecified,agivenvalueisreturnedtothefunctioncaller.For
example,thefollowingfunctionreturnsthesquareofitsargument,x,wherexisanumber.The
query Selector() method returns the first element that matches a CSS selector . l
matches(notonlythefirst),usethequerySelectorAll()instead.BothquerySelector()and
query Selector All() throw a SYNTAX_ERR exception if the selector(s) is invalid.
Syntax:
document. Query Selector (CSSselector)
 PROJECT

- HTML
- CSS
- Javascript
Bootstrap

Bootstrap
Bootstrap is the most popular HTML, CSS, and JavaScript framework for
developing responsive, mobile-first websites.

Bootstrap is completely free to download and use!

 What is Bootstrap?
 Bootstrap is a free front-end framework for faster and easier web
development
 Bootstrap includes HTML and CSS based design templates for typography,
forms, buttons, tables, navigation, modals, image carousels and many
other, as well as optional JavaScript plugins
 Bootstrap also gives you the ability to easily create responsive designs

Why Use Bootstrap?

Advantages of Bootstrap:

 Easy to use: Anybody with just basic knowledge of HTML and CSS can
start using Bootstrap
 Responsive features: Bootstrap's responsive CSS adjusts to phones,
tablets, and desktops
 Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the
core framework
 Browser compatibility: Bootstrap is compatible with all modern browsers
(Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera)

Where to Get Bootstrap?

There are two ways to start using Bootstrap on your own web site.

You can:

 Download Bootstrap from getbootstrap.com

 Include Bootstrap from a CDN

Our project
Bootstrap
 Bootstrap is a free front-end framework for faster and easier web
development
 Bootstrap includes HTML and CSS based design templates for typography,
forms, buttons, tables, navigation, modals, image carousels and many
other, as well as optional JavaScript plugins
 Bootstrap also gives you the ability to easily create responsive design

Code of project
Output we get
 CONCLUSION

Onthewhole, this internship was ausefulexperience. I havegained new knowledge,

skills . I achieved several of my learning goals,. I got insight into professional
practice. I learned the different facets of working experienced that financing, as in
many organisations, is an
importantfactorfortheprogressofprojects.Thereisstillalottodiscoverandtoimprove.The
internshipwasalsogoodtofindoutwhatmystrengthsandweaknessesare.Thishelpedmeto
definewhatskillsandknowledgeIhavetoimproveinthecomingtime.Itwouldbebetterthatth
e knowledge level of the language is sufficient to contribute fully to projects.
 References

1. GeeksforGeeks,2017.HTMLelements-GeeksforGeeks.
[online]GeeksforGeeks. Available at: <https://www.geeksforgeeks.org/most-
commonly-used-tags-in-html/>

2. Javatpoint,2019.CSSproperties–Javatpoint.[online]Javatpoint.availableat:
<https://www.javatpoint.com/css-tutorial/>

3. Mdnwebdocs,<https://developer.mozilla.org/en-US/docs/Web/JavaScript/>

4. Tutorialspoint, <https://www.tutorialspoint.com/index.htm/>

5 Bootstrap <https://getbootstrap.com/>