GOVERNMENT POLYTECHNIC COLLEGE

HIMATNAGAR
DEPARTMENT OF INFORMATION TECHNOLOGY
Diploma Engineering (SEMESTER: 3rd) year 2022-23

Summer Internship-I Report on

WEB DEVLOPMENT

Submitted by: Mentoring by:

SHRIVASTAV ANUBHAV.M(EN.no.216240316132) MR.H.N.RATHOD (Lect.IT)
 GOVERNMENT POLYTECHNIC COLLEGE
HIMATNAGAR

CERTIFICATE
This is to certify that this Summer
Internship-I report entitled “WEB DEVPLOPMENT” by Shrivastav Anubhav.M
(EN.no.216240316132) submitted in partial fulfillment of the requirements for the Diploma
Engineering in INFORMATION TECHNOLOGY of the Gujarat Technological University,
Ahmedabad, during 3rd Semester and the academic year 2022-23, his/her Internship-I
work is a bonafide record of carried out in a satisfactory way.

Submitted By: College Mentor Name:

Shrivastav Anubhav.M(ER.no.216240316132) Mr.H.N. Rathod(Lect.IT)

Ku.P.N.Parikh
HOD, information Technology

Gujarat Technological University Government Polytechnic Himatnagar

Gujarat Technological University Government Polytechnic Himatnagar
 ACKNOWLEDGEMENT
Web development is the work involved in developing a website for the Internet (World Wide Web) or
an intranet (a private network).[1] Web development can range from developing a simple single static
page of plain text to complex web applications, electronic businesses, and social network services. A
more comprehensive list of tasks to which Web development commonly refers, may include Web
engineering, Web design, Web content development, client liaison, client-side/server-side
scripting, Web server and network security configuration, and e-commerce development.
Among Web professionals, "Web development" usually refers to the main non-design aspects of
building Web sites: writing markup and coding.[2] Web development may use content management
systems (CMS) to make content changes easier and available with basic technical skills.
For larger organizations and businesses, Web development teams can consist of hundreds of people
(Web developers) and follow standard methods like Agile methodologies while developing Web sites.
Smaller organizations may only require a single permanent or contracting developer, or secondary
assignment to related job positions such as a graphic designer or information systems technician. Web
development may be a collaborative effort between departments rather than the domain of a
designated department. There are three kinds of Web developer specialization: front-end developer,
back-end developer, and full-stack developer.[3] Front-end developers are responsible for behavior
and visuals that run in the user browser, while back-end developers deal with the servers. Since the
commercialization of the Web with Tim Berners-Lee[4] developing the World Wide Web at CERN,
the industry has boomed and has become one of the most used technologies ever.
Writing web applications is often simplified with the use of web application frameworks. These
frameworks facilitate rapid application development by allowing a development team to focus on the
parts of their application which are unique to their goals without having to resolve common
development issues such as user management.[7] Many of the frameworks in use are open-source
software.
The use of web application frameworks can often reduce the number of errors in a program, both by
making the code simpler, and by allowing one team to concentrate on the framework while another
focuses on a specified use case. In applications which are exposed to constant hacking attempts on the
Internet, security-related problems can be caused by errors in the program. Frameworks can also
promote the use of best practices[8] such as GET after POST.
In addition, there is potential for the development of applications on Internet operating systems,
although currently there are not many viable platforms that fit this model.

Gujarat Technological University Government Polytechnic Himatnagar

 ABSTRACT

Web development tools (often called devtools or inspect element) allow web developers to test
and debug their code. They are different from website builders and integrated development
environments (IDEs) in that they do not assist in the direct creation of a webpage, rather they are tools
used for testing the user interface of a website or web application.
Web development tools come as browser add-ons or built-in features in web browsers. Most popular
web browsers, such as Google Chrome, Firefox, Internet Explorer, Safari, Microsoft
Edge and Opera,have built-in tools to help web developers, and many additional add-ons can be found
in their respective plugin download centers.
Web development tools allow developers to work with a variety of web technologies,
including HTML, CSS, the DOM, JavaScript, and other components that are handled by the web
browser. Due to increasing demand from web browsers to do more, popular web browsers have
included more features geared for developers.
Web development is the work involved in developing a website for the Internet (World Wide Web) or
an intranet (a private network). Web development can range from developing a simple single static
page of plain text to complex web applications, electronic businesses, and social network services.
This thesis considers several instances of abstraction that arose in the design and implementation of
the web programming language Links. The first concerns user interfaces, specified using HTML forms.
We wish to construct forms from existing form fragments without introducing dependencies on the
implementation details of those fragments. Surprisingly, many existing web systems do not support
this simple scenario. We present a library which captures the essence of form abstraction, and extend it
with more practical facilities, such as validation of the HTML a program produces and of the input a
user submits. An important part of our library is a simple semantics, given as the composition of three
primitive “idioms”, an interface to computation introduced by McBride and Paterson. In order to
justify this approach we present a comparison of idioms with the related notions of monads and arrows,
refining the informal claims in the literature. Our library forms part of the Links framework for
stateless web interactions. We describe a related aspect of this system, a preprocessor that derives
generic instances of functions, which we use to serialise server state between client requests. The
abstraction in this case involves the shape of datatypes: the serialisation operation is specified
independently of the particular types involved. Our final instance of abstraction involves abstract types.
Functional programming languages typically offer one of two styles of abstract type: the abstraction
boundary may be drawn using a private data constructor, or using a type signature. We show that there
is a pair of semantics-preserving translations between these two styles. In the light of this, we revisit
the decision of the Haskell designers to offer the constructor style, and define a library that supports
signature-style definitions in Haskell by translation into the constructor style.
Profiling allows developers to capture information about the performance of a web page or web
application. With this information developers can improve the performance of their scripts. Auditing
features may provide developers suggestions, after analyzing a page, for optimizations to
decrease.Web pages typically load and require additional content in the form of images, scripts, font
and other external files. Web development tools also allow developers to inspect resources that are
loaded and available on the web page in a tree-structure listing, and the appearance of style sheets can
be tested in real time.Web development tools also allow developers to view information about the
network usage, such as viewing what the loading time and bandwidth usage are and which HTTP
headers are being sent and received.

Gujarat Technological University Government Polytechnic Himatnagar

 WEEKLY OVERVIEW OF INTERNSHIP ACTIVITIES

1ST WEEK

DATE DAY NAME OF THE TOPIC COMPLETED

17/9/22 SATURADY INTRODUCTION OF WEB DEVELOPMENT

18/9/22 SUNDAY HISTORY OF WEB

19/9/22 MONDAY THE INTERNET BACKBONE

20/9/22 TUESDAY HOW TO INSTALL SUBLIME TEXT AND

HOW THE INTERNET WORK ?

21/9/22 WEDNESDAY INTRODUCTION OF HTML 5

22/9/22 THRUSDAY BUILD FIRST WEBSITE

23/9/22 FRIDAY SOME HTML TAGS

Gujarat Technological University Government Polytechnic Himatnagar

 2ND WEEK

DATE DAY NAME OF THE TOPIC COMPLETED

24/9/22 SATURDAY ADVANCED HTML5 AND HTMLVS HTML5

25/9/22 SUNDAY INTRODUCTION OF CSS AND CSS

PROPERTIES

26/9/22 MONDAY TEXT AND FONT

27/9/22 TUESDAY BOX MODEL AND FLEX BOX

28/9/22 WEDNESDAY INTRODUCTION OF JAVA SCRIPT AND

DATATYPES

29/9/22 THRUSDAY OPERATORS AND LOOPING IN JAVA SCRIPT

30/9/22 FRIDAY PROJECT:STARTUP LANDING PAGE

1/10/22 SATURDAY PROJECT:STARTUP LANDING PAGE

Gujarat Technological University Government Polytechnic Himatnagar

 INDEX

SNO. CONTENTS PAGE

NO.
1. Introduction of web development 1

2. History of web 2

3. The internet backbone 3

4. Some Application and web are used 4

4.1 How to install sublime text 4

5. How the internet work ? 7

6. Introduction of html 5 9

6.1 Build your first website 10

6.2 HTML tags 11

7. Advanced html 5 12

7.1 HTML forms 12

7.2 HTML VS HTML 5 13

8. CSS 15

8.1 CSS Properties 15

8.2 Text and fonts 16

8.3 Box model 18

8.4 Flex box 19

Gujarat Technological University Government Polytechnic Himatnagar

9. Introduction of java script 20

9.1 java script data-types 20

9.2 Operators in java script 21

9.3 Lopping in java script 21

10. Project:Startup landing page 22

Gujarat Technological University Government Polytechnic Himatnagar

 1.INTRODUCTION OF WEB DEVELOPMENT

Web development is the work involved in developing a website for the Internet (World Wide Web) or
an intranet (a private network).Web development can range from developing a simple single static
page of plain text to complex web applications, electronic businesses, and social network services. A
more comprehensive list of tasks to which Web development commonly refers, may include Web
engineering, Web design, Web content development, client liaison, client-side/server-side
scripting, Web server and network security configuration, and e-commerce development.
Among Web professionals, "Web development" usually refers to the main non-design aspects of
building Web sites: writing markup and coding.Web development may use content management
systems (CMS) to make content changes easier and available with basic technical skills.
For larger organizations and businesses, Web development teams can consist of hundreds of people
(Web developers) and follow standard methods like Agile methodologies while developing Web sites.
Smaller organizations may only require a single permanent or contracting developer, or secondary
assignment to related job positions such as a graphic designer or information systems technician. Web
development may be a collaborative effort between departments rather than the domain of a
designated department. There are three kinds of Web developer specialization: front-end developer,
back-end developer, and full-stack developer.Front-end developers are responsible for behavior and
visuals that run in the user browser, while back-end developers deal with the servers. Since the
commercialization of the Web with developing the World Wide Web at CERN, the industry has
boomed and has become one of the most used technologies ever.
The front end is the stuff you see on the website in your browser, including the presentation of
content and user interface elements like the navigation bar. Front-end developers use HTML, CSS,
JavaScript, and their relevant frameworks to ensure that content is presented effectively and that users
have an excellent experience.

The back end refers to the guts of the application, which live on the server. The back end stores and
serves program data to ensure that the front end has what it needs. This process can become very
complicated when a website has millions of users. Back-end developers use programming languages
like Java, Python, and Ruby to work with data.

Full-stack developers are comfortable working with both the front and back ends. At The Odin
Project, we focus on teaching you full-stack development, covering all aspects of web development.

A well-designed website is essential for reaching a larger audience and generating more leads or
customers. Using a website, you can collect and read testimonials about your products and services
much more quickly and easily. Web development and design help to promote a company's brand name.

Web development is the building and maintenance of websites; it's the work that happens behind the
scenes to make a website look great, work fast and perform well with a seamless user experience. Web
developers, or 'devs', do this by using a variety of coding languages.

Gujarat technological University 1 Government Polytechnic Himatnagar

 2. HISTORY OF WEB

TIM-BERNERS-LEE invented the World Wide Web while working at CERN in 1989, applying the
concept of hyperlinking that had by then existed for some decades. He developed the first web server,
the first web browser, and a document formatting protocol, called Hypertext Markup
Language (HTML). After publishing the markup language in 1991, and releasing the browser source
code for public use in 1993, many other web browsers were soon developed, with Marc
Andreessen's Mosaic (later Netscape Navigator), being particularly easy to use and install, and often
credited with sparking the Internet boom of the 1990s. It was a graphical browser which ran on several
popular office and home computers, bringing multimedia content to non-technical users by including
images and text on the same page.

The World Wide Web ("WWW", "W3" or, simply, "the Web"global information medium which users
can access via computers connected to the Internet. The term is often mistakenly used as a synonym
for the Internet, but the Web is a service that operates over the Internet, just as email and Usenet do.
The history of the Internet and the history of hypertext date back significantly farther than that of the
World Wide Web.Websites for use by the general public began to emerge in 1994. This spurred
competition in server and browser software, highlighted in the Browser wars which was initially
dominated by Netscape Navigator and Internet Explorer. Following the complete removal of
commercial restrictions on Internet use by 1995, commercialization of the Web amidst
macroeconomic factors led to the dot-com boom and bust in the late 1990s and early 2000s.
The features of HTML evolved over time, leading to HTML version 2 in 1995, HTML3 and HTML4
in 1997, and HTML5 in 2014. The language was extended with advanced formatting in Cascading
Style Sheets (CSS) and with programming capability by JavaScript. AJAX programming delivered
dynamic content to users, which sparked a new era in Web design, styled Web 2.0. The use of social
media, becoming common-place in the 2010s, allowed users to compose multimedia content without
programming skills, making the Web ubiquitous in every-day life.

Gujarat technological University 2 Government Polytechnic Himatnagar

 3.THE INETRNET BACKBONE

The Internet backbone may be defined by the principal data routes between large, strategically
interconnected computer networks and core routers of the Internet. These data routes are hosted by
commercial, government, academic and other high-capacity network centers, as well as the Internet
exchange points and network access points, that exchange Internet traffic between the countries,
continents, and across the oceans. Internet service providers, often Tier 1 networks, participate in
Internet backbone traffic by privately negotiated interconnection agreements, primarily governed by
the principle of settlement-free peering.
The Internet, and consequently its backbone networks, do not rely on central control or coordinating
facilities, nor do they implement any global network policies. The resilience of the Internet results
from its principal architectural features, most notably the idea of placing as few network state and
control functions as possible in the network elements and instead relying on the endpoints of
communication to handle most of the processing to ensure data integrity, reliability, and authentication.
The Internet backbone consists of many networks owned by numerous companies. Optical fiber trunk
lines consists of many fiber cables bundled to increase capacity, or bandwidth. Fiber-optic
communication remains the medium of choice for Internet backbone providers for several reasons.
Fiber-optics allow for fast data speeds and large bandwidth, they suffer relatively little attenuation,
allowing them to cover long distances with few repeaters, and they are also immune to crosstalk and
other forms of electromagnetic interference which plague electrical transmission. The real-time
routing protocols and redundancy built into the backbone is also able to reroute traffic in case of a
failure. The data rates of backbone lines have increased over time. In 1998, all of the United States'
backbone networks had utilized the slowest data rate of 45 Mbit/s. However, technological
improvements allowed for 41 percent of backbones to have data rates of 2,488 Mbit/s or faster by the
mid 2000s.

Gujarat technological University 3 Government Polytechnic Himatnagar

 4. SOME APPLICATION AND WEBSITES ARE USED:

-SUBLIM TEXT

-ANY TYPE OF BROWSER

-W3Schools.com

-BOOTSTARP

-Paletton.com

HOW to download “SUBLIME TEXT”?

STEP-1
To download “SUBLIME TEXT”,visit the official https://www.sublimetext.com/3 website in
your web browser.click on download button to insatll.

Gujarat technological University 4 Government Polytechnic Himatnagar

STEP2:-
After download “SUBLIME TEXT” File shown in folder.

STEP3:-
Click on ”SUBLIME TEXT” To install,and click the next button.

Gujarat technological University 5 Government Polytechnic Himatnagar

STEP4:-
Click on install button to install.

STEP5:-
Now its ready to use.

Gujarat technological University 6 Government Polytechnic Himatnagar

 5. HOW THE INTERNET WORKS

BROWSING THE WEB

When we enter google.com we press enter on our keyboard. We ask a question who’s is google.com
fellow?

And That question gets asked all the way down to your ISP. ISP is the internet service provider.
So,they get that request and they send that off to something called DNS server so domain name
server.but essentially it’s is a phone book - a phone book that as the list of all these url. So they send
off that request back through the ISP and the websites and web browser,google chrome in this case
gets “172.217.7.23”alright cool,but nothing is showing up yet.we can call IP address.so think of this
as something that every single computer has one, anything that’s connected to the internet has its own
address. So this IP address allow the internet to work essentially,its knows our location our address.

A web browser is a computer software application that allows people to browse websites on the
Internet. Google Chrome, Internet Explorer, Safari, Opera and Firefox are examples of widely used
browsers. Most browsers are free and they often come pre-installed on computers.

Gujarat technological University 7 Government Polytechnic Himatnagar

so what we do now with google.com we know this IP address-the browser send off another request to
the google servers and its know where google servers are because,well because we have this
address.so we go seek it out and you can think of servers as computer essentially.your computer could
be server.

Server are essentially computers that are sometimes in basements or in a huge server farms.its knows
how to send you files.when you request for them.let me gave you my html,css and javascript.but think
of them as

Just text files.they are text files that google is going to send to the browser so we can have google
working.if we know address of google can we just you know,go into this directly and just instead.

Browsing is a kind of orienting strategy. It is supposed to identify something of relevance for the
browsing organism. When used about human beings it is a metaphor taken from the animal kingdom.
It is used, for example, about people browsing open shelves in libraries, window shopping, or
browsing databases or the Internet. In library and information science it is an important subject, both
purely theoretically and as applied science aiming at designing interfaces which support browsing
activities for the user.

Browsing in the context of the internet typically means using a web browser. This can be with a
specific purpose, such as using email or updating one's status on a social media site, or just using the
web with no purpose in particular, as in, "Oh, I'm just browsing”

Gujarat technological University 8 Government Polytechnic Himatnagar

 6.INTODUCTION OF HTML 5
HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It
is the fifth and final[3] major HTML version that is a World Wide Web Consortium (W3C)
recommendation. The current specification is known as the HTML Living Standard. It is maintained
by the Web Hypertext Application Technology Working Group (WHATWG), a consortium of the
major browser vendors (Apple, Google, Mozilla, and Microsoft).
HTML5 was first released in a public-facing form on 22 January 2008,[2] with a major update and
"W3C Recommendation" status in October 2014.[4][5] Its goals were to improve the language with
support for the latest multimedia and other new features; to keep the language both easily readable by
humans and consistently understood by computers and devices such as web browsers, parsers, etc.,
without XHTML's rigidity; and to remain backward-compatible with older software. HTML5 is
intended to subsume not only HTML 4 but also XHTML 1 and DOM Level 2 HTML.[6]
HTML5 includes detailed processing models to encourage more interoperable implementations; it
extends, improves, and rationalizes the markup available for documents and introduces markup
and application programming interfaces (APIs) for complex web applications.[7] For the same reasons,
HTML5 is also a candidate for cross-platform mobile applications because it includes features
designed with low-powered devices in mind.
HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup
language. HTML is an abbreviation of Hypertext and Markup language. Hypertext defines the link
between the web pages. The markup language is used to define the text document within the tag
which defines the structure of web pages. HTML 5 is the fifth and current version of HTML. It has
improved the markup available for documents and has introduced application programming
interfaces(API) and Document Object Model.
Features:
 It has introduced new multimedia features which support audio and video controls by using
<audio> and <video> tags.
 There are new graphics elements including vector graphics and tags.
 Enrich semantic content by including <header> <footer>, <article>, <section> and <figure>
are added.
 Drag and Drop- The user can grab an object and drag it further dropping it to a new location.
 Geo-location services- It helps to locate the geographical location of a client.
 Web storage facility which provides web application methods to store data on the web
browser.
 Allows drawing various shapes like triangle, rectangle, circle, etc.
 Capable of handling incorrect syntax.
 Easy DOCTYPE declaration i.e. <!doctype html>
 Uses SQL database to store data offline.
 Easy character encoding i.e. <meta charset=”UTF-8”>

Gujarat technological University 9 Government Polytechnic Himatnagar

 6.1 BUILD YOUR FIRST WEBSITE

1. Write code in “SUBLIME TEXT”and open in any browser.

Input:

Output:

Gujarat technological University 10 Government Polytechnic Himatnagar

 6.2HTML TAGS

<body> Defines the document's body

<br> Defines a single line break

<button> Defines a clickable button

<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)

<caption> Defines a table caption

<center> Not supported in HTML5. Use CSS instead.

Defines centered text

<cite> Defines the title of a work

<code> Defines a piece of computer code

<col> Specifies column properties for each column within a <colgroup> element

<colgroup> Specifies a group of one or more columns in a table for formatting

<data> Adds a machine-readable translation of a given content

<dd> Defines a description/value of a term in a description list

<del> Defines text that has been deleted from a document

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

<dfn> Specifies a term that is going to be defined within the content

<dir> Not supported in HTML5. Use <ul> instead.

Defines a directory list

<div> Defines a section in a document

Gujarat technological University 11 Government Polytechnic Himatnagar

 7. ADVANCED HTML 5

7.1 HTML FORMS

Gujarat technological University 12 Government Polytechnic Himatnagar

 7.2 HTML VS HTML5

What is HTML?

HTML stands for the Hypertext Markup Language. Thus HTML uses a text-based format to provide
structure and style to the web page. As it is a markup language, it uses tags to define a structure and
style. And Hypertext means that HTML can contain text that, when clicked, can redirect you to a new
page. For example, whenever you click on any link on the web page, that link redirects you to the new
web page. That functionality is known as Hypertext.

Thus HTML is used to make web pages and web applications by providing the structure and styling
with the help of tags.

Advantages:

 Easy and simple to use.

 Widely supported by almost all the web browsers.
 Standard language for making the structure of the web pages.
 Code is very lightweight, thus providing better speed online.

Disadvantages:

 Only capable of making static web pages that do not contain any functionality or dynamic
content.
 Due to complex and long syntaxes, there are multiple lines of code required even to make any
web component.
 There is no feature of syntax error detection. Thus if any error is made while coding, it can
only be detected after seeing the output. This could be very harmful if the code is long and
complicated.
 The security features of HTML are almost none or very limited

What is HTML5?

HTML5 is an advanced version of HTML. It contains all the features of HTML along with new tags
like <video> , <audio> and <canvas>. There are also tags for including semantics, and these tags
are <article>, <header>, <footer> etc. HTML5 improves the HTML to support the latest multimedia
and new features, including graphics, music, etc.

Structure of HTML5

Like HTML, the structure of HTML5 is the same. It is also divided into two types:

Gujarat technological University 13 Government Polytechnic Himatnagar

  Head
 Body

1. HEAD

Head contains title, metadata, encoding style, external link, etc.

2. BODY

The body contains all the elements that are displayed on the website. Along with normal HTML tags
there are also new tags like <header>, <footer>, <article>, <video>, <audio> etc.

Advantages:

 There are many attributes present in HTML5 that were not present in HTML. E.g., data-
, offline, onabort, onblur etc.
 It provides support for audio, video, and other multimedia content by using tags
like <audio>,<video>,<canvas> etc.
 There are many page layout options available in HTML5. In HTML, you can only find page
layout tags like div, span, etc. But in HTML5, there are many more tag options available
like header, footer, article, section, etc.
 HTML5 supports Search Engine Optimisation(SEO). Search engine optimization helps the
websites to know about the popularity of their content and also provides insights on how to
improve the content to increase the traffic to the websites.

Disadvantages:

 Can only be run on modern browsers. Not compatible with older versions of various browsers,
e.g., Google Chrome version less than 60, Mozilla version 2 and 3.6, etc.
 There is no standard video format available. For example, H.264 video format is supported by
all the web browsers but not by Firefox; similarly, Ogg Theory video format is supported by all
the web browsers but not by Explorer.
 The multi-platform support provided by HTML5 sometimes leads to more complex code. Also,
it becomes necessary to run all web applications in all formats to check the credibility of the
code.
 HTML5 is still in the development phase; therefore, it might appear that a few features that
worked before are not working now. Thus developers need to stay updated while using
HTML5.

Gujarat technological University 14 Government Polytechnic Himatnagar

 8.CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a
document written in a markup language such as HTML or XML (including XML dialects such
as SVG, MathML or XHTML).CSS is a cornerstone technology of the World Wide Web, alongside
HTML and JavaScript.
CSS is designed to enable the separation of presentation and content, including layout, colors,
and fonts. This separation can improve content accessibility; provide more flexibility and control in
the specification of presentation characteristics; enable multiple web pages to share formatting by
specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the
structural content; and enable the .css file to be cached to improve the page load speed between the
pages that share the file and its formatting.
Separation of formatting and content also makes it feasible to present the same markup page in
different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based
browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate
formatting if the content is accessed on a mobile device.
The name cascading comes from the specified priority scheme to determine which style rule applies if
more than one rule matches a particular element. This cascading priority scheme is predictable.The
CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type
(MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a
free CSS validation service for CSS documents.

8.1 SOME CSS PROPERITES

background A shorthand property for all the background-* properties

background-blend-mode Specifies the blending mode of each background layer (color/image)

background-clip Defines how far the background (color or image) should extend within an
element

background-color Specifies the background color of an element

background-image Specifies one or more background images for an element

background-origin Specifies the origin position of a background image

background-position Specifies the position of a background image

Gujarat technological University 15 Government Polytechnic Himatnagar

background-repeat Sets if/how a background image will be repeated

background-size Specifies the size of the background images

border A shorthand property for border-width, border-style and border-color

border-bottom A shorthand property for border-bottom-width, border-bottom-style and border-

bottom-color

border-bottom-color Sets the color of the bottom border

border-bottom-left-radius Defines the radius of the border of the bottom-left corner

8.2 TEXT AND FONT

1. Write code in first file and save it.

Gujarat technological University 16 Government Polytechnic Himatnagar

2.Create second file for css style and save it.

2. open these file in any comfortabble browser.

Gujarat technological University 17 Government Polytechnic Himatnagar

 8.3 BOX MODEL
The CSS box model is a container that contains multiple properties including borders, margin,
padding, and the content itself. It is used to create the design and layout of web pages. According to
the CSS box model, the web browser supplies each element as a square prism.

. It is used to create the design and layout of web pages. It can be used as a toolkit for customizing
the layout of different elements. The web browser renders every element as a rectangular box
according to the CSS box model. Box-Model has multiple properties in CSS. Some of them are
given below:
 Content Area: This area consists of content like text, images, or other media content. It is
bounded by the content edge and its dimensions are given by content-box width and height.
 Padding Area: It includes the element’s padding. This area is actually the space around the
content area and within the border-box. Its dimensions are given by the width of the padding-box
and the height of the padding-box.
 Border Area: It is the area between the box’s padding and margin. Its dimensions are given
by the width and height of the border.
 Margin Area: This area consists of space between border and margin. The dimensions of the
Margin area are the margin-box width and the margin-box height. It is useful to separate the
element from its neighbors.

Gujarat technological University 18 Government Polytechnic Himatnagar

 8.4 FLEX BOX

The flexbox or flexible box model in CSS is a one-dimensional layout model that has flexible and
efficient layouts with distributed spaces among items to control their alignment structure ie., it is a
layout model that provides an easy and clean way to arrange items within a container. Flexbox can
be useful for creating small-scales layouts & is responsive and mobile-friendly.

Features of flexbox:
 A lot of flexibility is given.
 Arrangement & alignment of items.
 Proper spacing
 Order & Sequencing of items.
 Bootstrap 4 is built on top of the flex layout.

Before the flexbox model, we had 4 layout modes:

 Block: It is used to make sections in web pages.
 Inline: It is used for text.
 Table: It is used for two-dimensional table data.
 Positioned: It is used for the explicit position of an element
.

Gujarat technological University 19 Government Polytechnic Himatnagar

 9. INTRODUCTION OF JAVA SCRIPT

JavaScript often abbreviated to JS, is a programming language that is one of the core technologies of
the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on
the client side for webpage behavior, often incorporating third-party libraries. All major web
browsers have a dedicated JavaScript engine to execute the code on users' devices.
JavaScript is a high-level, often just-in-time compiled language that conforms to
the ECMAScript standard. It has dynamic typing, prototype-based object-orientation, and first-class
functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming
styles. It has application programming interfaces (APIs) for working with text, dates, regular
expressions, standard data structures, and the Document Object Model (DOM).
The ECMAScript standard does not include any input/output (I/O), such as networking, storage,
or graphics facilities. In practice, the web browser or other runtime system provides JavaScript APIs
for I/O.JavaScript engines were originally used only in web browsers, but are now core components of
some servers and a variety of applications. The most popular runtime system for this usage is Node.js
Although Java and JavaScript are similar in name, syntax, and respective standard libraries, the two
languages are distinct and differ greatly in design.

9.1 JAVA SCRIPT DATATYPES

There are five types of primitive data types in JavaScript. They are as follows:

Data Type Description

String represents sequence of characters e.g. "hello"

Number represents numeric values e.g. 100

Boolean represents boolean value either false or true

Undefined represents undefined value

Null represents null i.e. no value at all

Gujarat technological University 20 Government Polytechnic Himatnagar

 9.2 OPERATORS IN JAVA SCRIPT

There are following types of operators in JavaScript.

1. Arithmetic Operators
2. Comparison (Relational) Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators

9.3 LOOPING IN JAVA SCRIPT

The statements for loops provided in JavaScript are:

 for statement
 do...while statement
 while statement
 labeled statement
 break statement
 continue statement
 for...in statement
 for...of statement

Gujarat technological University 21 Government Polytechnic Himatnagar

 10.PROJECT:STARTUP LANDING PAGE

1. Create a file in “SUBLIME TEXT”and write html code.

2. Create second for css style.

Gujarat technological University 22 Government Polytechnic Himatnagar

3. Open third file and save image.

4. open these file in any comfortable browser.

Gujarat technological University 23 Government Polytechnic Himatnagar