Web Development

A
Industrial/Field Project Report
submitted
in partial fulfilment
for the award of the degree of
Bachelor of Technology
in department of Computer Science
with specialization in Computer Science

Submitted To : Submitted By :
Dr. Pratap Singh Patwal, NISHA YADAV
HOD, CSE Roll no: 23ELDCS038
LIET-Alwar

Department of Computer Science & Engineering

Laxmi Devi Institute of Engineering & Technology, Alwar
Bikaner Technical University [2021-22]
 Acknowledgement

We would like to first of all express our thanks to Dr. Rajesh Bhardwaj , Group Director of
LIET , for providing us such a great infrastructure and environment for our overall
development.
We express sincere thanks to Principal Dr. Manvijay Singh for his kind cooperation and
extensible support toward the completion of our seminar .
Words are inadequate in offering our thanks to Dr. Pratap Singh Patwal , HOD of CSE
Department , for consistent encouragement and support for shaping our seminar in the
presentable form. Also, for his support in providing technical requirement and fulfilling our
various other requirement for making our seminar success.
We would like to thanks our project co-ordinator Mr. Atul Gaur (Web Development) , Asst.
Prof. CSE Department for there support and guiding us to make seminar successful. Without
there support and measurement we would not able to accomplished our goal.
We also like to express our thanks to all supporting CSE faculty members who have been a
constant source of encouragement for successful competition of the project.
Also our warm thanks to Laxmi Devi Institute Of Engineering And Technology , who provide
us this opportunity to carry out this prestigious seminar and enhance our learning in various
technical fields.

Nisha kumari
(23ELDCS038)

1
 Candidate’s Declaration

I hereby declare that the Industrial/Field Project, which is being intern in the field, entitled
“Web development” in partial fulfilment for the award of Degree of “Bachelor of
Technology” in Department of Computer Science & Engineering with Specialization in
Computer Science Engineering , and submitted to the Department of Computer Science &
Engineering, Laxmi Devi Institute of Engineering & Technology, Alwar, Bikaner Technical
University is a record of my own Learning and internship carried under the Guidance of Dr.
Pratap Singh Patwal , HOD(CSE) : Laxmi Devi institute of Engineering & Technology, Alwar.
I have not submitted the matter presented in this field work report anywhere for the award
of any other Degree.

Student Name: Nisha kumari

Branch: Computer Science
Roll no: 23ELDCS038
Laxmi Devi Institute of Engineering & Technology, Alwar

Counter Signed by
Guide Name: DR. Pratap Singh Patwal
Designation: HOD
Department: Computer Science & Engineering Department
Laxmi Devi Institute of Engineering & Technology, Alwar

2
 INDEX

Web Development

HTML
1.1 What is HTML? ………………………………………………………………………………….………………29
1.2 Features of HTML Editor……………………………………………………………..……….………………29
1.3 HTML Skeleton…………………………………………………………………………….……..….………30-31
1.4 HTML Comments………………………………………………………………………….….…………………31
1.5 HTML Elements …………………………………………………………………………….…………..……31-32
1.5.1 Block level………………………………………………………………………………………………………….31-32
1.5.2 Inline Level………………………………………………………………………………………………………………32
1.6 Basic Tags……………………………………………………………………………………………………….33-37
1.6.1 Empty Tags…………………………………………………………………………………………………………33-36
1.6.2 Attributes……………………………………………………………………………………………………………….37

Cascading Style Sheets

2.1 CSS Pseudo Selectors……………………………………………………………………………………………..…..….39
2.2 CSS Box Model………………………………………………………………………………………………………….39-41
2.2.1 Content Area…………………………………………………………………………………………………………………….40
2.2.3 Padding Area……………………………………………………………………………………………………………………..40
2.2.4 Border Area…………………………………………………………………………………………………………........…….40
2.2.5 Margin Area. ………………………………………………………………………………………………………………..40-41
2.3 Position Properties……………………………………………………………………………..…………….………41-43
2.3.1 Static…………………………………………………………………………………………………….………………….….…….41

3
2.3.1 Relative……………………………………………………………………………………………………………………..….41-42
2.3.3 Absolute…………………………………………………………………………………………..………………………………..42
2.3.4 Fixed……………………………………………………………………………………………………..……………………………42
2.3.5 Sticky …………………………………………………………………………………………………….…………………………..42
2.4 Flexbox……………………………………………………………………………………………………….…………….43-45
2.4.1 Why Flexbox ? …………………………………………………………………………………………………………………..43
2.4.1 The Flex Model……………………………………………………………………………………………………………43-44
2.4.3 Direction…………………………………………………………………………………………………………….………….....44
2.4.4 Wrapping……………………………………………………………………………………………………………….………….44
2.4.5 Flex-Flow shorthand …………………………………………………………………………………………..……………..45
2.4.6 Ordering flex items…………………………………………………………………………………………………………….45
2.5 Grid Layout……………………………………………………………………………………………………………….46-47
2.5.1 What Is Grid Layout? …………………………………………………………………………………………………………46
2.5.2 Defining A Grid…………………………………………………………………………………………………………………..46
2.5.3 Gaps Between tracks………………………………………………………………………………………………………….46
2.5.4 Repeating Track Listings…………………………………………………………………………………………….….46-47
2.5.5 Line Base Placement…………………………………………………………………………………………………………..47

4
 Web
Development

5
 HTML

1.1 What is HTML?

 HTML stands for Hyper Text Markup Language.

 Hyper Text: Link between web pages.
 Markup Language: Text between tags which defines structure.
 It is a language to create web pages
 HTML defines how the web page looks and how to display content with the help of
elements
 It forms or defines the structure of our Web Page.
 Need to save your file with .html extension.

1.2 Features of HTML Editor

 The learning curve is very easy (easy to modify)
 Create effective presentations
 Add links wherein we can add references
 Can display documents on platforms like Mac , Windows, Linux etc
 Add videos, graphics and audios making it more attractive.
 Case insensitive language

6
1.3 HTML Skeleton

1. <!DOCTYPE html>
Instruction to the browser about the HTML version.

2. <html>
Root element which acts as a container to hold all the code Browser should know that this a
HTML document Permitted content: One head tag followed by one body tag.

7
 3. <head>

Everything written here will never be displayed in the browser It contains general information
about the document Title, definitions of css and script sheets Metadata(information about the
document).

4. <body>
● Everything written here will be displayed in the browser
● Contains text, images, links which can be achieved through tags.
● Examples:
○ <p> This is our first paragraph. </p>
○ <ahref="http://www.google.com">GoTo Google</a>
○ <img src="photo.jpg">

1.4 HTML Comments

● Comments don’t render on the browser
● Helps to understand our code better and makes it readable.
● Helps to debug our code
● Three ways to comment: ○ Single line ○ Multiple line ○ Comment tag //Supported by IE

1.5 HTML Elements

● Elements are created using tags
● Elements are used to define semantics
● Can be nested and empty
Basic Structure
<p colour=”red”> This is our first Paragraph </p>

● Contains following things:

○ Start tag: <p>
○ Attributes: colour =”red”

8
 ○ End tag: </p> // optional
○ Content: This is our first Paragraph

1.5.1 Block Level :

○ Takes up full block or width and adds structure in the web page
○ Always starts from new line ○ Always end before the new line

○ Example :
■ <p >
■ <div>
■ <h1>
...
<h6>
■ <ol>
■ <ul>

1.5.2 Inline Level:

○ Takes up what is requires and adds meaning to the web page

○ Always starts from where the previous element ended

○ Example :
■ <span>
■ <strong>
■ <em>
■ <img>
■ <a>

1.6 Basic Tags

9
 ● Enclosed within <>
● Different tags render different meaning .
● <title> tag
○ Whatever is written this tag comes up in the web page’s tab ○ Defines the title of the page
○ Syntax: <title>Home </title>
● <p> tag
○ Defines the paragraph
○ Syntax:
<p> This is our first Paragraph </p>

1.6.1 Empty Tags

● <hr> tag
○ Stands for horizontal rule
○ Dividing the web page

● <br> tag
○ Stands for break line
○ Moving to next line

● <img> tag
○ To add images in the web page

● <h1> tag …… <h6>tag

○ Stands for heading tag
○ Defines heading of a page
○ h1 represents most important page in the page
○ h6 represents least important page in the page

● <strong> tag

10
○ Defines the text to be bold
○ Replaced <b>tag //HTML5

● <em> tag
○ Defines the text to be bold
○ Replaced <i>tag //HTML5

● <ol> tag
○ Stands for ordered list
○ To define series of events that take place in some order
○ Example making a tea (like a flow chart)
○ <ol>.........</ol>

● <ul> tag
○ Stands for unordered list
○ To define series of events that take place where order is not important.
○ Example your hobbies
○ <ul>.........</ul>

● <li> tag
○ Defines the list item
○ Used inside the ‘ol’ and ‘ul’ tag to define the events
○ <li>……….</li>

● <img> tag
○ Used to add images in a web page
○ Syntax: <img src=”url”> ○ Self closing tag.

● <div> and <span> tags

11
○ Both of these are used to group different tags ○ Acts like a container.
○ Effective while styling.
○ <div>.........</div>
○ <span>....</span>
○ Difference <div> is block level and <span> is inline level.

● <a> tags
○ Used to add links in a web page
○ <a href=”url”> Name of the link </a>

● <table> tag
○ Used to create a table on a web page
○ Need other tags for completing the creation of a table
■ <tr> : for marking the table row
■ <th> : for table header
■ <td> : for table column data
○ Everything is always enclosed within <tr>
■ <thead> : to keep all header data
■ <tbody> : to keep all body data

● <form> tag

○ Action attribute: It specifies the URL to send form data to :

○ Method attribute: specifies the type of HTTP request(GET or POST)
○ Example: <form action="/my-form-submitting-page" method="POST">

○ <input>: used to accept data from the user ○ Some types of inputs are:

● Text:

12
used to store text data. Syntax: type="text"
● Password:
used to enter a secure password. Syntax: type="password"
● Placeholder:
temporary text in input fields. It is generally accompanied by "text" and "password" attributes.
Syntax: placeholder="insert- text-here"
● Button:
used to include buttons in the form. Syntax: type="button" value="insert-text-here"
● Submit button:
For creating a submit button. All the data will get submitted when it is clicked. Syntax:
type="submit"
● Checkbox:
to provide the ability to check multiple options. Syntax: type="checkbox". To check options by
default, set it with the checked attribute.
● Radio Button:
allows one to choose a single option. Syntax: type="radio". Keep the name attribute of all the
options the same.
● <select>:
For every possible option to select, use an <option> tag<option>
● Text Areas:
multi-line plain-text editing control. Syntax: <textarea>. You can specify how large the text area is
by using the "rows" and "cols" attributes
● Labels:
add captions for individual items in a form. Syntax: <label>. A label can be used by placing the
control element inside the <label> element, or by using the "for" and "id" attributes.
● Validations ensure that users fill out forms in the correct format
e.g.:
a. required: The Boolean attribute which makes a field mandatory:
b. email: the browser will ensure that the field contains

13
1.6.2 Attributes

● Properties associated with each tag.

● <tag name=”value”></tag> is the structure.
● Global Attribute:
○ Title : Add extra information (hover)
○ Style: Add style information(font,background,colour,size)
● <img src=”url” width=”100”>
○ src is the attribute used in image tag to define path
○ Width is attribute used to define width in pixels
○ Alt i.e alternate text if image is not loaded
● <a href=”url”> Name of the link </a>
● href used to define path of the link.

Cascading Style Sheets (CSS)

 Driving problem behind CSS !!!

What font type and size does <h1>Introduction</h1> generate? Answer: Some default
from the browser (HTML tells what browser how) Early HTML - Override defaults with
attributes .
<table border="2" bordercolour="black">

 Style sheets were added to address this: Specify style to use rather than
browser default Not have to code styling on every element…………………….

14
 DRY principle: Don't Repeat Yourself

2.1 CSS Pseudo Selectors

15
  Hover
- Apply rule when mouse is over element
(e.g. tooltip)
p:hover, a:hover {
background-colour: yellow;
}

 a:link, a:visited
-Apply rule when link has been visited or not visited (link)

a:visited { a:link {
colour: blue; colour: green;
} }

2.2 CSS Box Model

When laying out a document, the browser's rendering engine represents each element as a
rectangular box according to the standard CSS basic box model. CSS determines the size,
position, and properties (colour, background, border size, etc.) of these boxes.

16
  Every box is composed of four parts (or areas), defined by their respective edges: the
content edge, padding edge, border edge, and margin edge.

2.2.1 Content area

The content area, bounded by the content edge, contains the "real" content of the
element, such as text, an image, or a video player. Its dimensions are the content
width (or content-box width) and the content height (or content-box height). It often
has a background colour or background image.

If the box-sizing property is set to content-box (default) and if the element is a block
element, the content area's size can be explicitly defined with the width, min-width,
max-width, height, min-height, and max-height properties.

2.2.2 Padding Area

The padding area, bounded by the padding edge, extends the content area to
include the element's padding. Its dimensions are the padding-box width and the
padding-box height.

The thickness of the padding is determined by the padding-top, padding-right, padding-

bottom, padding-left, and shorthand padding properties.

2.2.3 Border Area

The border area, bounded by the border edge, extends the padding area to include
the element's borders. Its dimensions are the border-box width and the border-box
height.

The thickness of the borders are determined by the border-width and shorthand border
properties. If the box-sizing property is set to border-box, the border area's size can be
explicitly defined with the width, min-width, max-width, height, min-height, and max-height
properties. When there is a background (background-colour or background-image) set on a
box, it extends to the outer edge of the border (i.e. extends underneath the border
in z-ordering). This default behavior can be altered with the background-clip CSS
property.

2.2.4 Margin Area

The margin area, bounded by the margin edge, extends the border area to include
an empty area used to separate the element from its neighbors. Its dimensions are
the margin-box width and the margin-box height.

17
 The size of the margin area is determined by the margin-top, margin-right, margin-bottom,
margin-left, and shorthand margin properties. When margin collapsing occurs, the
margin area is not clearly defined since margins are shared between boxes.

Finally, note that for non-replaced inline elements, the amount of space taken up
(the contribution to the height of the line) is determined by the line-height property,
even though the borders and padding are still displayed around the content.

2.3 Position Property

The position CSS property sets how an element is positioned in a document. The top, right,
bottom, and left properties determine the final location of positioned elements.

Syntax:
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* Global values */
position: inherit;
position: initial;
position: revert;
position: revert-layer;
position: unset;

Values:

2.3.1 Static

The element is positioned according to the normal flow of the document. The top,
right, bottom, left, and z-index properties have no effect. This is the default value.

2.3.2 Relative

The element is positioned according to the normal flow of the document, and then
offset relative to itself based on the values of top, right, bottom, and left. The offset
does not affect the position of any other elements; thus, the space given for the
element in the page layout is the same as if position were static.

This value creates a new stacking context when the value of z-index is not auto. Its
effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is
undefined.

18
2.3.3 Absolute

The element is removed from the normal document flow, and no space is created for
the element in the page layout. It is positioned relative to its closest positioned
ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final
position is determined by the values of top, right, bottom, and left.

This value creates a new stacking context when the value of z-index is not auto. The
margins of absolutely positioned boxes do not collapse with other margins.

2.3.4 Fixed

The element is removed from the normal document flow, and no space is created for
the element in the page layout. It is positioned relative to the initial containing block
established by the viewport, except when one of its ancestors has a transform,
perspective, or filter property set to something other than none (see the CSS Transforms
Spec), or the will-change property is set to transform, in which case that ancestor
behaves as the containing block. (Note that there are browser inconsistencies with
perspective and filter contributing to containing block formation.) Its final position is
determined by the values of top, right, bottom, and left.

This value always creates a new stacking context. In printed documents, the element
is placed in the same position on every page.

2.3.5 Sticky

The element is positioned according to the normal flow of the document, and then
offset relative to its nearest scrolling ancestor and containing block (nearest block-
level ancestor), including table-related elements, based on the values of top, right,
bottom, and left. The offset does not affect the position of any other elements.

This value always creates a new stacking context. Note that a sticky element "sticks"
to its nearest ancestor that has a "scrolling mechanism" (created when overflow is
hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling
ancestor.

Description
Types of positioning

 A positioned element is an element whose computed position value is either relative,

absolute, fixed, or sticky. (In other words, it's anything except static.)
 A relatively positioned element is an element whose computed position value is relative. The
top and bottom properties specify the vertical offset from its normal position; the left and
right properties specify the horizontal offset.
 An absolutely positioned element is an element whose computed position value is absolute
or fixed. The top, right, bottom, and left properties specify offsets from the edges of the

19
 element's containing block. (The containing block is the ancestor relative to which the
element is positioned.) If the element has margins, they are added to the offset. The
element establishes a new block formatting context (BFC) for its contents.
 A stickily positioned element is an element whose computed position value is sticky. It's
treated as relatively positioned until its containing block crosses a specified threshold (such
as setting top to value other than auto) within its flow root (or the container it scrolls within),
at which point it is treated as "stuck" until meeting the opposite edge of its containing block.

Most of the time, absolutely positioned elements that have height and width set to auto
are sized so as to fit their contents. However, non-replaced, absolutely positioned
elements can be made to fill the available vertical space by specifying both top and
bottom and leaving height unspecified (that is, auto). They can likewise be made to fill the
available horizontal space by specifying both left and right and leaving width as auto.

2.3 Flexbox
Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex
(expand) to fill additional space or shrink to fit into smaller spaces. This article explains all the
fundamentals.

2.4.1 Why Flexbox?

For a long time, the only reliable cross-browser compatible tools available for
creating CSS layouts were features like floats and positioning. These work, but in
some ways they're also limiting and frustrating.

The following simple layout designs are either difficult or impossible to achieve with
such tools in any kind of convenient, flexible way:

 Vertically centring a block of content inside its parent.

 Making all the children of a container take up an equal amount of the available
width/height, regardless of how much width/height is available.
 Making all columns in a multiple-column layout adopt the same height even if they
contain a different amount of content.

As you'll see in subsequent sections, flexbox makes a lot of layout tasks much easier.
Let's dig in!

2.4.2 The flex model

When elements are laid out as flex items, they are laid out along two axes:

20
  The main axis is the axis running in the direction the flex items are laid out in (for
example, as rows across the page, or columns down the page.) The start and end of
this axis are called the main start and main end.
 The cross axis is the axis running perpendicular to the direction the flex items are laid
out in. The start and end of this axis are called the cross start and cross end.
 The parent element that has display: flex set on it (the <section> in our example) is
called the flex container.
 The items laid out as flexible boxes inside the flex container are called flex items (the
<article> elements in our example).

2.4.3 Direction

Flexbox provides a property called flex-direction that specifies which direction the
main axis runs (which direction the flexbox children are laid out in). By default this is
set to row, which causes them to be laid out in a row in the direction your browser's
default language works in (left to right, in the case of an English browser).

flex-direction: column;

2.4.4 Wrapping

One issue that arises when you have a fixed width or height in your layout is that
eventually your flexbox children will overflow their container, breaking the layout.

flex-wrap: wrap;

21
2.4.5 flex-flow shorthand

At this point it's worth noting that a shorthand exists for flex-direction and flex-wrap:
flex-flow. So, for example, you can replace

flex-direction: row;
flex-wrap: wrap;

with

flex-flow: row wrap;

2.4.6 Ordering flex items

Flexbox also has a feature for changing the layout order of flex items without
affecting the source order. This is another thing that is impossible to do with
traditional layout methods.

The code for this is simple. Try adding the following CSS to your button bar example
code:

button:first-child {
order: 1;
}

Refresh and you'll see that the "Smile" button has moved to the end of the main axis.
Let's talk about how this works in a bit more detail:

 By default, all flex items have an order value of 0.

 Flex items with higher specified order values will appear later in the display order
than items with lower order values.
 Flex items with the same order value will appear in their source order. So if you have
four items whose order values have been set as 2, 1, 1, and 0 respectively, their
display order would be 4th, 2nd, 3rd, then 1st.
 The 3rd item appears after the 2nd because it has the same order value and is after
it in the source order.

You can set negative order values to make items appear earlier than items whose
value is 0. For example, you could make the "Blush" button appear at the start of the
main axis using the following rule:

button:last-child {
order: -1;
}

2.5 Grid

22
 CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in
rows and columns. It has many features that make building complex layouts straightforward.
This article will explain all you need to know to get started with page layout.

2.5.1 What is grid layout?

A grid is a collection of horizontal and vertical lines creating a pattern against which
we can line up our design elements. They help us to create layouts in which our
elements won't jump around or change width as we move from page to page,
providing greater consistency on our websites.

A grid will typically have columns, rows, and then gaps between each row and
column. The gaps are commonly referred to as gutters.

2.5.2 Defining a grid

As a starting point, download and open the starting point file in your text editor and
browser (you can also see it live here). You will see an example with a container,
which has some child items. These display in normal flow by default, so the boxes
display one below the other. We'll be working with this file for the first part of this
lesson, making changes to see how its grid behaves.

To define a grid we use the grid value of the display property. As with Flexbox, this
enables Grid Layout; all of the direct children of the container become grid items.
Add this to the CSS inside your file:

.container {
display: grid;
}

2.5.3 Gaps between tracks

To create gaps between tracks we use the properties column-gap for gaps between
columns, row-gap for gaps between rows, and gap as a shorthand for both.

.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 20px;
}

2.5.4 Repeating track listings

You can repeat all or merely a section of your track listing using the CSS repeat()
function. Change your track listing to the following:

.container {
display: grid;

23
 grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

is 1fr which, as we already know, distributes space evenly between tracks.

2.5.5 Line-based placement

We now move on from creating a grid to placing things on the grid. Our grid always
has lines — these are numbered beginning with 1 and relate to the writing mode of
the document. For example, column line 1 in English (written left-to-right) would be
on the left-hand side of the grid and row line 1 at the top, while in Arabic (written
right-to-left), column line 1 would be on the right-hand side.

We can arrange things in accordance with these lines by specifying the start and end
line. We do this using the following properties:

 grid-column-start
 grid-column-end
 grid-row-start
 grid-row-end

These properties can all have a line number as their value. You can also use the
shorthand properties:

 grid-column
 grid-row

These let you specify the start and end lines at once, separated by a forward slash /.

24
 CONCLUSION
Web Development :
In today's Web development, a good page design is essential. A bad design will lead to the
loss of visitors and that can lead to a loss of business. In general, a good page layout has to
satisfy the basic elements of a good page design. This includes colour contrast, text
organization, font selection, style of a page, page size, graphics used, and consistency. In
order to create a well-designed page for a specific audience. The developer needs to
organized and analyse the users' statistics and the background of the users. Although it
can be hard to come up with a design that is well suited to all of the users, there will be a
design that is appropriate for most of the audience. The better the page design, the more
hits a page will get. That implies an increase in accessibility and a possible increase in
business.

25