Scribd
Upload
194 views23 pages

Internship Training

The document provides information about an internship training project on web development. It covers topics like front-end web development using HTML, CSS, and JavaScript. It defines each technology and provides examples of basic HTML documents, CSS styling, and JavaScript functions. The document aims to educate the reader on the core components of web development.

Uploaded by

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

Internship Training

The document provides information about an internship training project on web development. It covers topics like front-end web development using HTML, CSS, and JavaScript. It defines each technology and provides examples of basic HTML documents, CSS styling, and JavaScript functions. The document aims to educate the reader on the core components of web development.

Uploaded by

Princess Anushka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 23

INTERNSHIP TRAINING

WEB DEVELOPMENT
PROJECT

Presented by: Supervised by:


Name  Akhand Pratap Singh Kanchan Gautam
Roll no  E20339435500009 Assistant Professor
FRONT-END WEB DEVELOPER:

Everything you see on a website, like buttons, links, animations,


and more, were created by a front end web developer. It is the
front end developer's job to take the vision and design concept from
the client and implement it through code.
HTML(Hypertext markup language)
HTML stands for Hypertext Markup Language, and it the most
is widely used language to write Web Pages.
 Hypertext refers to the way in which Web pages (HTML
documents) are linked together. Thus, the link available on a
webpage is called Hypertext.
 As its name suggests, HTML is a Markup Language which
means
you use HTML to simply "mark-up" a text document tags that
with tell a Web browser how to structure it to display.
Originally, HTML was developed with the intent of defining the
structure of documents like headings, paragraphs, lists, and so forth
to facilitate the sharing of scientific information between
researchers.
Now, HTML is being widely used to format web pages with the
help of different tags available in HTML language.
Basic HTML Document:
In its simplest form, following is an example of an HTML
document:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Why html is used to create website?

HTML code ensures the proper formatting of text and


images for your Internet browser. Without HTML, a browser
would not know how to display text as elements or load images
or other elements. HTML also provides a basic structure of the
page, upon which Cascading Style Sheets are overlaid to
change its appearance.
Figure 1 output::

Either you can use it option available at the top corner of


Try right
the code box to check the result of this HTML code, or let's
save it in an HTML file test.htm using your favourite text editor.
Finally open it using a web browser like Internet Explorer or
Google Chrome, or Firefox etc. It must show the following
output:

HTML Tags:
As told earlier, HTML is a markup language and makes use of various
tags to format the content. These tags are enclosed within angle
braces<Tag Name>. Except few tags, most of the tags have their
corresponding closing tags. For example,<html> has its
closingtag</html> and <body> tag has its closing tag </body> tag etc.
To learn HTML, you will need to study various tags and understand how they
behave, while formatting a textual document. Learning HTML is simple as
users have to learn the usage of different tags in order to format the text or
images to make a beautiful webpage.

HTML Document Structure:


A typical HTML document will have the following structure:
CSS (CASCADING STYLE SHEETS):
Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simplify the process of making web pages
presentable.

CSS handles the look and feel part of a web page. Using CSS, you
can control the color of the text, the style of fonts, the spacing
between paragraphs, how columns are sized and laid out, what
background images or colors are used, as well as a variety of other
effects.

CSS is easy to learn and understand but it provides a powerful control


over the presentation of an HTML document. Most commonly, CSS
is combined withthe markup languages HTML or XHTML.
Advantages of CSS:

CSS saves time - You can write CSS once and then reuse the same
sheet in multiple HTML pages. You can define a style for each
HTML element and apply it to as many web pages as you want.

Pages load faster - If you are using CSS, you do not need to
write HTML tag attributes every time. Just write one CSS rule
of a tag and apply it to all the occurrences of that tag. So, less
code means faster download times.

Easy maintenance - To make a global change, simply change the


style, and all the elements in all the web pages will be updated
automatically.

Superior styles to HTML - CSS has a much wider array of attributes


than HTML, so you can give a far better look to your HTML page in
comparison to HTML attributes.

Multiple Device Compatibility - Style sheets allow content to be


optimized for more than one type of device. By using the same
HTML document, different versions of a website can be presented for
handheld devices such as PDAs and cellphones or for printing.

Global web standards – Now HTML attributes are being deprecated


and it is being recommended to use CSS. So it’s a good idea to start
using CSS in all the HTML pages to make them compatible with
future browsers.

Who Creates and Maintains CSS?

CSS is created and maintained through a group of people within


the W3C called the CSS Working Group. The CSS Working Group
creates documents called specifications. When a specification has
been discussed and officially ratified by the W3C members, it
becomes a recommendation.
These ratified specifications are called recommendations because the
W3C has no control over the actual implementation of the language.
Independent companies and organizations create that software.

NOTE: The World Wide Web Consortium or W3C is a group


that makes recommendations about how the Internet works and how
it should evolve.

CSS Versions:

Cascading Style Sheets level 1 (CSS1) came out of W3C as a


recommendation in December 1996. This version describes the CSS
language as well as a simple visual formatting model
for all the HTML tags.

CSS2 became a W3C recommendation in May 1998 and builds


onCSS1. This version adds support for media-specific style sheets e.g.
printers and aural devices, downloadable fonts, element positioning
and tables.

EXAMPLE:

<style>
. with-pixels
{ font-size:
14px;
}

. with-Ems {
font-size: 0.875em;
}

. with-absolute
{ font-size:
large;
}
. with-percentage {
font-size: 80%;
}
</style>

CSS Rules Overriding:

We have discussed four ways to include style sheet rules in an


HTML document. Here is the rule to override any Style Sheet Rule.

Any inline style sheet takes the highest priority. So, it will override
any rule defined in <style>...</style> tags or the rules defined in any
external style sheet file.

Any rule defined in <style>...</style> tags will override the


rules defined in any external style sheet file.
Any rule defined in the external style sheet file takes the lowest
priority, and the rules defined in this file will be applied only when
the above two rules are not applicable.

CSS Comments:

Many times, you may need to put additional comments in your style
sheet blocks. So, it is very easy to comment any part in the style sheet.
You can simply put your comments inside /*.....this is a comment in
style sheet */.

You can use /* ....*/ to comment multi-line blocks in similar


way you do in C and C++ programming languages.

EXAMPLE:
/* This is an external style sheet file */
h1, h2, h 3

color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: Mem;
text-transform: lowercase;

/* end of Style rules. */


JAVASCRIPT:

Javascript is a dynamic computer programming language. It is


lightweight and most commonly used as a part of web pages,
whose implementations allow client-side script to interact with
the user and make dynamic pages. It is an
interpretedprogramming language with object-oriented capabilities.

JavaScript was first known as LiveScript, but Netscape changed


its name to JavaScript, possibly because of the excitement being
generated by Java. JavaScript made its first appearance in Netscape
2.0 in 1995 with the name LiveScript.The general-purpose core of
the language has been embedded in Netscape, Internet Explorer,
and other web browsers.

The ECMA-262 Specification defined a standard version of the


core JavaScript language.

JavaScript is a lightweight, interpreted programming language.


Designed for creating network-centric applications.
Complementary to and integrated with Java.
Complementary to and integrated with HTML.
Open and cross-platform.
Client-Side JavaScript:
Client-side JavaScript is the most common form of the language. The
script should be included in or referenced by an HTML document for
the code to be interpreted by the browser.
It means that a web page need not be a static HTML, but can
includeprograms that interact with the user, control the browser, and
dynamically create HTML content.

The JavaScript client-side mechanism provides many advantages over


traditional CGI server-side scripts. For example, you might use
JavaScript to check if the user has entered a valid e-mail address in a
form field.

The JavaScript code is executed when the user submits the form, and
only if all the entries are valid, they would be submitted to the Web
Server.

JavaScript can be used to trap user-initiated events such as


button clicks, link navigation, and other actions that the user initiates
explicitly or implicitly.

Advantages of JavaScript:

The merits of using JavaScript are:

Less server interaction: You can validate user input before sending
the page off to the server. This saves server traffic, which means
less load on your server.

Immediate feedback to the visitors: They don't have to wait for page
reload to see if they have forgotten to enter something.

Increased interactivity: You can create interfaces that react when the
user hovers over them with a mouse or activates them via
thekeyboard.
Richer interfaces: You can use JavaScript to include such items as
drag-and-drop components and sliders to give a Rich Interface to your
site visitors.

Limitations of JavaScript:

We cannot treat JavaScript as a full-fledged programming


language. It lacks the following important features:
Client-side JavaScript does not allow the reading or writing of files.
This has been kept for security reason.
JavaScript cannot be used for networking applications because there
is no such support available.

Once again, JavaScript is a lightweight, interpreted


programming language that allows you to build interactivity into
otherwise static HTML pages.

Comments in JavaScript:

JavaScript supports both C-style and C++-style comments. Thus:


Any text between a // and the end of a line is treated as a comment
and is ignored by JavaScript.

Any text between the characters /* and */ is treated as a comment.


This may span multiple lines.

JavaScript also recognizes the HTML comment opening


sequence <!--. JavaScript treats this as a single-line comment, just as
it does the // comment.

The HTML comment closing sequence --> is not recognized by


JavaScript so it
should be written as //-->.
Example:

JavaScript in Chrome:

Here are the steps to turn on or turn off JavaScript in Chrome:


Click the Chrome menu at the top right hand corner of your browser.

Select Settings.

Under the Privacy section, click the Content settings button.

In the "Javascript" section, select "Do not allow any site to run
JavaScript" or "Allow all sites to run JavaScript (recommended)".

JavaScript in Firefox:

Here are the steps to turn on or turn off JavaScript in Firefox:

Open a new tab -> type about: config in the address bar.

Then you will find the warning dialog. Select I’ll be careful, I
promise!
you will find the list of configure options in the browser.
In the search bar, type javascript.enabled.

There you will find the option to enable or disable javascript by


right-clicking on the value of that option -> select toggle.

If javascript.enabled is true;it converts to false upon clicking toogle. If


javascript is disabled; it gets enabled upon clicking toggle.
BOOTSTRAP:

What is Twitter Bootstrap?


Bootstrap is a sleek, intuitive, and powerful, mobile first front-end
framework for faster and easier web development. It uses HTML,
CSS, and Javascript.

Bootstrap was developed by Mark Otto and Jacob Thornton at


Twitter. It was released as an open source product in August 2011 on
GitHub.

Why Use Bootstrap?


Mobile first approach: Bootstrap 3 framework consists of
Mobile first styles throughout the entire library instead of them in
separate files.

Browser Support: It is supported by all popular browsers.

Easy to get started: With just the knowledge of HTML and CSS
anyone can get started with Bootstrap. Also the Bootstrap official site
has a good documentation.
Responsive design: Bootstrap's responsive CSS adjusts to
Desktops, Tablets and Mobiles. More about the responsive design
is in the chapter Bootstrap Responsive Design.

Provides a clean and uniform solution for building an interface for


developers.

It contains beautiful and functional built-in components which


are easy to customize.

It also provides web-based customization.

And best of all it is an open source.

What Bootstrap Package Includes?


Scaffolding: Bootstrap provides a basic structure with Grid System,
link styles, and background. This is covered in detail in the
section Bootstrap Basic Structure.

CSS: Bootstrap comes with the feature of global CSS settings,


fundamental HTML elements styled and enhanced with extensible
classes, and an advanced grid system. This is covered in detail in the
section Bootstrap with CSS.

Components: Bootstrap contains over a dozen reusable


components built to provide iconography, dropdowns, navigation,
alerts, pop-overs, and much more. This is covered in detail in the
section Layout Components.

JavaScript Plugins: Bootstrap contains over a dozen custom jQuery


plugins. You can easily include them all, or one by one. This is
covered in details in the section Bootstrap Plugins.

Customize: You can customize Bootstrap's components, LESS


variables, and jQuery plugins to get your very own version.
PROJECT:

WEBSITE ON - TOP RANKED SECTORAL


BASED INSTITUTIONS IN INDIA
(WEBSITE LINK: lifelines.netlify.app)

1. HEALTH SECTOR
1.1 MEDICAL EMERGENCY NUMBERS
1.2 TOP HOSPITALS

2. EDUCATION SECTOR
2.1 TOP HIGHER EDUCATION INSTITUTIONS

3. LAW AND ORDER


3.1 POLICE HELPLINE NUMBERS OF EACH STATE

4. TOP E-COMMERCE WEBSITES.


LIFELINES:

A website intended to give public fast and easy access to user. A


website intended to provide one stop destination for all major
helplines that a common man need in day to day life ranging from
medical emergency numbers , police helpline numbers , top shopping
websites.

I have brought top relaible and best services of the country related to
health security education etcof daily life needs from deiffernt places
to one place making this website a one STOP DESTINATION.

Hence this website surve the pourpose of making last mile standing
person aware about what is best effective reliable and most
importantly TRUSTWORTHY as per HIS / HER NEED .
THE IDEA BEHIND THIS PROJECT:
The idea behind developing such website is that no one will face the
problem which I face on searching medical emergency number and
the best hospital in urgency so the I came with an idea that what if I
make a platform which provide best emergency number related to
health and police security, top colleges of india – in ONE place.

RESOURCES REQUIRED FOR THIS


WEBSITE :
FOR TOP COLLEGES :
The National Institutional Ranking Framework (NIRF) was approved
by the MHRD and launched by Honourable Minister of Human
Resource Development on 29th September 2015.

This framework outlines a methodology to rank institutions across the


country. The methodology draws from the overall recommendations
broad understanding arrived at by a Core Committee set up by
MHRD, to identify the broad parameters for ranking various
universities and institutions. The parameters broadly cover “Teaching,
Learning and Resources,” “Research and Professional Practices,”
“Graduation Outcomes,” “Outreach and Inclusivity,” and
“Perception”.

India Rankings – 2016 based on this framework were released on 4th


April 2016.

For India Rankings – 2017, the main ranking parameters remain the
same. However, there are a few significant changes in a few sub-
parameters. Also, this year every large institution will be given a
common overall rank as well as a discipline specific rank as
applicable.
FOR TOP HOSPITALS:
I collected the information regarding this from the several WebPages
available in the internet and the Ministry of Health and Family
Welfare Government of India (https://www.mohfw.gov.in/#)
FOR POLICE HELPLINES OF EACH STATE :
I took the help of each state government respective websites and
police divisions of Ministry of Home Affairs:
 https://www.mha.gov.in/division_of_mha/police-division-i
 https://www.mha.gov.in/division_of_mha/police-ii-division-0

You might also like