Scribd
Upload
16 views47 pages

VARUN

Uploaded by

Kavita Rani
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
16 views47 pages

VARUN

Uploaded by

Kavita Rani
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/ 47

SUMMER

INSTITUTIONAL TRAINING
REPORT

Duration
(from 12/6/24 to 10/7/24)

Submitted By

Name : VARUN KUMAR


Branch: CSE b
Roll No. : 857
Uni. Roll No.: 2301705

Department of Computer Science & Engineering


DAV Institute of Engineering & Technology
Jalandhar, India
VARUN KUMAR\CSE-B
TABLE OF CONTENT
SR. NO. CONTENT PAGE NO.

1.1 HTML-OVERVIEW 3

1.2 HTML TAGS 3-6

1.3 HTML ELEMENTS 6


1. 1.4 HTML ATTRIBUTES 7-8

1..5 HTML LISTS 9

1.6 HTML LINK 10

1.7 HTML IMAGE 10-11

1.8 HTML TABLE 11-13

1.9 HTML FORMS 14-15

1.10LOGIN FORM 16

2.1 CSS-OVERVIEW 17

2.2 CSS -INCLUSION 17-18

2.3 CSS-SYNTAX 19

2.4 CSS-MEASUREMENT UNITS 20


2.
2.5 CSS-PROPERTIES 21-22

2.6 CSS-BOXMODEL 23

2.7 CSS-POSITIONING 24

2.8 CSS-TRANSITION 25

2.9 CSS-ANIMATION 26-27

2.10 WEBPAGE 28

3.1 JAVASCRIPT-OVERVIEW 30

3.2. JS-SYNTAX 30

3.3 JS-CONTROL STATEMENT 31


3. 3.4. JS-LOOPS 32

1
VARUN KUMAR\CSE-B
3.5. JS-FUNCTIONS 33

4.1 POWER POINT 37

4.2 NEW PRESENTATION 37

4.3 THEMES 37
5 4.4 ADDING IMAGES 38

4.5 ADDING VIDEO 38

4.6 TABLES AND CHARTS 38

4.7 Presentation 39

5.1 SPREADSHEET 40
6. 5.2 FUNCTIONS AND FORMULAS 40-42

6.1 MS-WORD 43

6.2 CREATE,OPEN ,SAVE ,PRINT NEW DOCUMENT 43


7. 6.3 INSERTING ART 43

6.4 CREATE NEW DATASOURCE AND MAIN DOCUMENT 44

2
VARUN KUMAR\CSE-B
HTML OVERVIEW

 HTML stands for Hypertext Markup Language, and it is the most widely used
language to Write Web Pages. HTML is the building block for web pages. 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.

HTML BASIC DOCUMENT STRUCTURE :

o The first tag in your html


document is <html>. This tag
tells your browser that this is the
start of an html document. The
last tag in your document is
</html>. This tag tells your
browser that this is the end of the
html document.

o The text between the <head>


tag and the </head> tag is
header information. Header
information is not displayed in the
browser window.

o The text between the <title> tag


is the title of your document. The
<title> tag is used to uniquely
Identify each document and is
also displayed in the title bar of
the browser window.

o The text between the <body>


tags is the text that will be
displayed in your browser.

HTML TAGS:

3
VARUN KUMAR\CSE-B
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
closing tag</html> and <body> tag has its closing tag </body> tag etc.

1. HEADINGS:
Any document starts with a heading. You can use different
sizes for your headings. HTML also Has six levels of
headings, which use the elements <h1>, <h2>, <h3>,
<h4>, <h5>, and <h6>.

2.
PARAGRAPHS:
Paragraphs are defined with the tag. Think of a paragraph as a block of text. You can use
the align attribute with a paragraph tag as well.
<p align="left">This is a paragraph</p>

<p align="center">this is another paragraph</p >

3. LINE BREAKS:
The <br> tag is used when you want to start a new line, but don't want to start a new
paragraph. The<br> tag forces a line break wherever you place it. It is similar to single
spacing in a document. The <br> tag has no closing tag.

This Code Would display


<p>This <br> is a para <br> graph This
with is a para
line breaks</p> graph with line breaks

4. HORIZONTAL RULE:
The <hr> element is used for horizontal rules that act as dividers between sections, like
this:
4
VARUN KUMAR\CSE-B

The horizontal rule does not have a closing tag. It takes attributes such as align and
width. For instance:

This code Would display


<hr width="50%"
align="center">

5. COMMENTS IN HTML:

The comment tag is used to insert a comment in the HTML source code. A comment can
be placed anywhere in the document and the browser will ignore everything inside the
brackets. You can use comments to write notes to yourself, or write a helpful message to
someone looking at your source code.

This code Would display


<p> This html comment would This HTML comment would be
<!—This is a comment --> displayed like
be displayed like this.</p> this.

Note: You need an exclamation point after the opening bracket <!-- but not
before the closing bracket -->.

HTML automatically adds an extra blank line before and after some elements, like before
and after a paragraph, and before and after a heading. If you want to insert blank lines
into your document, use the tag.
OTHER HTML TAGS:

TAG Description
<abbr> Defines the TAG Description
abbreviations <b> Defines Bold
<acrony Defines an acroym text
m> <big> Defines Big text
<address Defines the address <i> Defines Italic
> element text
<cite> Defines a citation <small Defines Small
<code> Defines computer > text
code text <sup> Defines Superscripted
<blockqu Defines a long text
ote> quotation <sub> Defines subscripted
<del> Defines a text text

5
VARUN KUMAR\CSE-B

<dfn> Defines a definition <tt> Defines


term teletype text
<em> Defines emphasized <u> Deprecated .us
text e styles instead
<ins> Defines inserted text
<kbd> Defines keyboard text
<pre> Defines performatted
text
<strong> Defines strong text
<div> Used as container
<a> Used for links
<img> Used for images
<font> Used for writing a text

NON-BREAKING SPACES
The most common character entity in HTML is the non-breaking space &nbsp; .
Normally HTML will truncate spaces in your text. If you add 10 spaces in your text, HTML
will remove 9 of them. To add spaces to your text, use the character entity.

This code Would display


<p>This code would appear This code would appear as this.
as this.</p>

Other important tags will be discussed below.


HTML ELEMENTS:
An HTML element is defined by a starting tag. If the element contains other content,
it ends with a closing tag, where the element name is preceded by a forward slash as
shown below with few tags.

Start Tag Content End Tag

<p> This is paragraph </p> These are


content called
HTML
<h1> This is a heading </h1>

6
VARUN KUMAR\CSE-B

content ELEMENTs

<div> This is a division </div>


content

</br>

So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element.


There are some HTML elements which don't need to be closed, such as </img>, </hr>
and </br > elements. These are known as void elements.

HTML documents consists of a tree of these elements and they specify how HTML
documents should be built, and what kind of content should be placed in what part of an
HTML document.

HTML TAGS VS HTML ELEMENTS:


An HTML element is defined by a starting tag. If the element contains other content, it
ends with a closing tag.

For example, <p> is starting tag of a paragraph and </p> is closing tag of the same
paragraph but <p>This is paragraph</p> is a paragraph element.

HTML ATTRIBUTES:
An attribute is used to define the characteristics of an HTML element and is placed
inside the element's opening tag. All attributes are made up of two parts: a name
and a value:
 The name is the property you want to set. For example, the paragraph <p>
element in the example carries an attribute whose name is align, which you
can use to indicate the alignment of paragraph on the page.
 The value is what you want the value of the property to be set and always put
within quotations. The below example shows three possible values of align
attribute: left, center and right.
Attribute names and attribute values are case-insensitive. However, the World Wide
Web Consortium (W3C) recommends lowercase attributes/attribute values in their
HTML 4 recommendation.
Example:

This code Would display

7
VARUN KUMAR\CSE-B
<p align=”left”>This is left This is left aligned
aligned</p>
<p align=”right”>This is right This is right aligned
aligned</p>
<p align=”center”>This is center This is center aligned
aligned</p>
Core Attributes:
The four core attributes that can be used on the majority of HTML elements (although
not all) are:

 Id <p id="html">This para explains what


is HTML</p>

 Title <h3 title="Hello HTML!">Titled Heading


Tag </h3>

 Class <div class=”navbar”>used as


container</div>

 Style <p style=" color:#FF0000;">Some </p>

There are many attributes which are used in html for multiple purposes will be discussed
below:

HTML – BACKGROUNDS:

The <body> tag has two attributes where you can specify backgrounds. The background
can be a color an image.for background color bgcolor is used and for background image
background is used as below:

This code Would Display


1. <body bgcolor=”red”>
</body>

8
VARUN KUMAR\CSE-B
2. <body background=”/img1”>
</body>

HTML – COLORS:
Colors are defined using a hexadecimal notation for the combination of red, green, and
blue color values (RGB). The lowest value that can be given to one light source is 0 (hex
#00). The highest value is 255 (hex #FF). This table shows the result of combining red,
green, and blue:

Color Color HEX Color RGB


#000000 rgb(0,0,255)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)

9
VARUN KUMAR\CSE-B
HTML ATTRIBUTES:
HTML provides a simple way to show unordered lists (bullet lists) or ordered lists
(numbered lists).
Unordered lists:

An unordered list is a list of items marked with bullets (typically small black circles). An
unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

This code Would display


<ul>  Coffee
<li>coffee</li>  Water
<li>water</li>
</ul>
ordered lists:

An ordered list is a list of items marked with bullets (typically small black circles). An
ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

This code Would display


<ol> 1. Coffee
<li>coffee</li> 2. Water
<li>water</li>
</ol>
Definition lists:

Definition lists consist of two parts: a term and a description. To mark up a definition
list, you need three HTML elements; a containner <dl>, a definition term <dt> , and a
definition description <dd> .

This code Would display


<dl>
<dt>Cascading Style Sheets</dt> Cascading Style Sheets
<dd>Style sheets are used to Style sheets are used to
provide provide
presentational suggestions for presentational suggestions for
documents marked up in HTML. documents marked up in HTML.
</dd>
</dl>

10
VARUN KUMAR\CSE-B

HTML LINKS:
HTML uses the <a> anchor tag to create a link to another document or web page.
The Anchor tag and the Href attribute:
An anchor can point to any resource on the Web: an HTML page, an image, a sound
file, a movie, etc.The syntax of creating an anchor:
<a href="url">Text to be displayed</a>
The <a> tag is used to create an anchor to link from, the href attribute is used to tell
the address of the document or page we are linking to, and the words between the
open and close of the anchor tag will be displayed as a hyperlink.

This code Would display


<a href="http://www.google.com">MY lINK!</a> MY lINK !

The Target Attribute

With the target attribute, you can define where the linked document will be opened. By
default, the link will open in the current window. The code below will open the document
in a new browser window:

<a href="http://www.google.com" target=”_blank”>MY lINK!</a>

HTML IMAGES:
The Image Tag and the Src Attribute:

The <img> tag is empty, which means that it contains attributes only and it has no
closing tag. To display an image on a page, you need to use the src attribute. Src stands
for "source". The value of the src attribute is the URL of the image you want to display
on your page. The syntax of defining an image:

This code Would display

<img src="graphics/chef.gif">

The Alt Attribute:


The alt attribute is used to define an alternate text for an image. The value of the alt
attribute is author-defined text:
11
VARUN KUMAR\CSE-B
<img src="graphics/chef.gif" alt="Sun with trees ">

The alt attribute tells the reader what he or she is missing on a page if the browser can't
load images. The browser will then display the alternate text instead of the image. It is a
good practice to include the alt attribute for each image on a page, to improve the
display and usefulness of your document for people who have text-only browsers or use
screen readers.

The Image Dimensions:

When you have an image, the browser usually figures out how big the image is all by
itself. If you put in the image dimensions in pixels however, the browser simply reserves
a space for the image, then loads the rest of the page. Once the entire page is loads it
can go back and fill in the images. Without dimensions, when it runs into an image, the
browser has to pause loading the page, load the image, then continue loading the page.
The chef image would then be:

<img src="graphics/chef.gif" width="130px" height="101px" alt="Sun with trees">

HTML TABLE:
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag),
and each row is divided into data cells (with the <td> tag). The letters td stands for table
data, which is the content of a data cell. A data cell can contain text, images, lists,
paragraphs, forms, horizontal rules, tables, etc.

Table Tags:

Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table colums
<col> Defines the attribute values for one or more columns
in a table

Example:

This code Would display


<table> row 1, cell 1 row 1, cell 2
<tr> row 2, cell 1 row 2, cell 2
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>

12
VARUN KUMAR\CSE-B
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

TABLE ATTRIBUTES :

This code Would display


1. Border attribute Border=”0”
row 1, cell 1 row 1, cell 2
<table border=”0”> row 2, cell 1 row 2, cell 2
<tr>
<td>row 1, cell 1</td> Border=”1”
<td>row 1, cell 2</td> row 1, cell 1 row 1, cell 2
</tr> row 2, cell 1 row 2, cell 2
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
2. Cell spacing Attribute

<table border="1" cellspacing="5">


<tr>
<td>some text</td>
<td>some text</td>
</tr><tr>
<td>some text</td>
<td>some text</td>
</tr>
</table>

3. Cellpadding Attribute

<table border="1"
cellpadding="10">
<tr>
<td>some text</td>
<td>some text</td>
</tr><tr>
13
VARUN KUMAR\CSE-B
<td>some text</td>
<td>some text</td>
</tr>
</table>

4. Colspan attribute

<table border="1">
<tr>
<th>Category</th>
<th colspan="3">Examples</th>
</tr> Category Examples
<tr> Fruits Apples Oranges Grapes
<td>Fruits</td>
<td>Apples</td>
<td>Oranges</td>
<td>Grapes</td>
</tr>
</table>
5. Rowspan attribute

<table border="1">
<tr>
<th>Department:</th>
<td>Accounting</td>
</tr>
Department: Accounting
<tr>
Freya Olsen
<th>rowspan="2">ContactPerso Contact Person:
Maita Cot
n:</th>
<td>Freya Olsen</td>
</tr>
<tr>
<td>Maita Cot</td>
</tr>
</table>

Cellspacing is the width between the individual data cells in the table.
Cellpadding is the space between the cell contents and the cell border.

14
VARUN KUMAR\CSE-B

HTML FORMS:
HTML forms provide a great way to capture data from your web site. A form in an HTML
page can be used to submit data to a server for further processing. Each HTML form is
introduced by the <form> tag, and is made up of different input elements. The <form>
tag has several attributes that would tell the browser what to do with the information
that is entered in the different fields. These attributes are:

● action
● method
The action attribute tells your browser the location of the cgi script that you are going to
use to process the form. On the other hand, the method attribute has two possible
values, method=get or method=post, both of which specify a method of submitting data
to the script you have specified in the action attribute.
FORM FIELDS :
Any HTML form can contain the following fields. First you have the input elements:

 Text
 Password
 Checkbox
 Radio
 Submit
 Reset
 File
 Hidden
 Image
 Button

There are also other input methods that may be used in an HTML form, including drop-
down lists, radio buttons, check boxes, text areas and others. Let us see how each of
these text elements is used in an HTML form.

EXAMPLES :

This code Would display

Text input: Click here to enter text

15
VARUN KUMAR\CSE-B

<form>
<input type="text" id="name"
name="name" placeholder="Click here to
enter text">
</form>

Checkbox input:
<form> INTERESTS:
<input type="checkbox" id="music" INTERESTS:
name="interest" value="music">Music Music

✘
<input type="checkbox" id="sports" Sports

✘
name="interest" value="sports"> Sports Reading

✘
<input type="checkbox" id="reading"
name="interest" value="reading">
Reading</form>

Radio Buttons:
<form>
<label>Choose Your Preferred Payment
Method:</label>
<input type="radio" id="creditCard" Choose Your Preferred
name="paymentMethod" Payment Method:
value="creditCard"> CreditCard <br> CreditCard
<input type="radio" id="paypal" Music paypal
name="paymentMethod"
bitcoin
value="paypal"> Paypal <br>
<input type="radio" id="bitcoin"
name="paymentMethod"
value="bitcoin"> bitcoin <br></form>

Submit Buttons:
<form>
<button type="submit">Submit</button> Submit Reset
<button type="Reset ">Reset
</button></form>
Example of Forms with Html Table : Program 1

16
VARUN KUMAR\CSE-B
CSS-OVERVIEW
 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 size 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 with the markup
languages HTML or XHTML

Advantages of CSS:

 CSS saves time


 Pages load faster
 Easy maintenance
 Superior styles to HTML
 Global web standards

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 style sheet. You can simple 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.

CSS INCLUSION:
How to include your style to your HTML document ? Three Methods :

1.The Inline CSS: <style> Attribute:

You can use style attribute of any HTML element to define style rules. These rules will be
applied to that element only.

<element style = "...style rules....">

This code Would display


<body> This is inline CSS
<h1 style = "color:blue;"> This is
inline CSS </h1>
This is inline CSS
<h1 style = "color:blue;
align:center;"> This is inline CSS
</h1>
</body>

17
VARUN KUMAR\CSE-B

2.The <style> Tag inside <head>:


You can put your CSS rules into an HTML document using the <style> element. This tag
is placed inside <head>...</head> tags.

This code Would display


<head> This is inline CSS
<style>
h1{
This is inline CSS
color:blue;
align:center;
}
</style>
</head>
<body>
<h1 > This is inline CSS </h1>
<h1 > This is inline CSS </h1>
</body>

3.External CSS –The <link> Element:


The <link> element can be used to include an external stylesheet file in your HTML
document. An external style sheet is a separate text file with .css extension. You define
all the Style rules within this text file and then you can include this file in any HTML
document using <link> element.

<head>
<link rel=”stylesheet” href=”link”>
</head>
Example:

Html file Mystyle.css File Output screen


<html> h1{ im in center
<head> align:center;
<link color:red;
im in right
rel=”stylesheet” }
href=”Mystyle.css” h2{
> align:right;
</head> color:blue;
<body> }
<h1>im in center
</h1>
18
VARUN KUMAR\CSE-B

<h2>im in right </h2>


</body>

CSS SYNTAX:
A CSS comprises of style rules that are interpreted by the browser and then applied to
the corresponding elements in your document. A style rule is made of three parts:

 Selector: A selector is an HTML tag at which a style will be applied. This could be
any tag like <h1> or <table> etc.
 Property: A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color, border, etc.
 Value: Values are assigned to properties. For example, color property can have
the value either red or #FF0000etc.

Selectors:
CSS SELECTOR HTML File CSS file Output
1. Tag name <h1> h1 { Tag selector
Tag selector color: red;
}
</h1>
2. Class <h1 .hello{ Tag selector
attribute class=”hello”> color: red;
Tag selector }
</h1>
3. ID Attribute <h1 id=”hello”> #hello{ Tag selector
Tag selector color: red;
</h1> }
4. The Universal <h1> *{ Universal selector
Selector (*) Universal selector color :red; Universal selector
:That applies on </h1> align :center;
19
VARUN KUMAR\CSE-B
every tag <h2> }
Universal
selector</h2>

CSS MEASUREMENTUNITS:
CSS supports a number of measurements including absolute units such as inches,
centimeters, points, and so on, as well as relative measures such as percentages
and em,px units. You need these values while specifying various measurements in your
Style rules e.g. border="1px solid red".

20
VARUN KUMAR\CSE-B

CSS PROPERTIES:
COLOR-Property:
CSS uses color values to specify a color. Typically, these are used to set a color either for
the foreground of an element (i.e., its text) or for the background of the element. They
can also be used to affect the color of borders and other decorative effects. You
can specify your color values in various formats.

Following table lists all the possible formats:

Format Syntax Example


1. Hex code(RGB) #FFFFFF p
{color:#FFFFFF;
}
2. keyword Red,blue,green p{
color: red;
}
3. rgb (0-255) rgb(255,255,255) p{
color:rgb(255,255,255);
}

 BACKGROUND-Properties:

Property This code Would display


1. background-color: <p style="background- This text has a yellow background
property used to set the color:yellow;"> color.
backround color. This text has a yellow
background color.
</p>
2. background-image: <body background-
property used to set image:url(“graphics/chef.gif”
background image. )>
</body>

3. background-repeat: <body background-


Used to repeat a image image:url(“graphics/chef.gif”
along any axis. By default ) background-repeat:no-
it sets to no-repeat. repeat; >
</body>

21
VARUN KUMAR\CSE-B

 FONT-properties:

Property This code Would display


1. font-family: <p style="font-family:arial;"> This text has font family
property is used to change This text has font family arial. arial.
the face of a font. </p>
2. Font-size: <p style="font-size:20px;"> This text has font size
property is used to This text has font size 20px. </p> 20px.
increase or decrease the
size of a font.
3. Font-style: <p style=”font-style:italic;”>This This text has italic
property is used to make a text has italic style.</p>. style.
font italic or
oblique.possible values
normal,italic,oblique.
4. Font-weight: <p style=”font-weight:bold;”>This This text is bolder.
property is used to text is bolder.</p>
increase or decrease how
bold or light a font
appears.
Its value can be
100,200,300,400,500,600,
700,800,900,normal,bold,l
arger,
lighter.
5. Font: <p style=”font: italic bold 15px we apply all properties
We can use the font arial; ”>we apply all properties at at once.
property to set all the font once.</p>
properties at once.

NOTE: In above and below Examples we use style attribute to Add CSS in our html
document .
 TEXT-properties:

Property This code Would display


1. text-align: <p style="text-align:center;"> This text aligned to center.
property is used to align the This text is aligned to center.
text of a document. </p>
2. text-decoration: <p style=”text- This text is underlined.
property is used to decoration:underline;”>
underline, overline, and This text is underlined</p>
strikethrough text.
3. text-transform: <p style=”text- THIS TEXT IS
property is used to capitalize transform:uppercase”> UPPERCASE.
text or convert text to This text is uppercase</p>
uppercase or lowercase
22
VARUN KUMAR\CSE-B
letters

4. Text-shadow: <p style=”text-shadow:2px 4px 8px b l u e s h a d o w


Property used for shadow . blue;”>blue shadow</p>

NOTE: before doing margin, padding ,width and border properties lets
understand the box model of CSS.

CSS BOX-MODEL:

NOTE: Total element width = width + left padding + right padding + left border
+ right border + left margin + right margin.

 SIZE-properties:

SIZE
Width: Height:

23
VARUN KUMAR\CSE-B

CSS POSITIONING:
CSS helps you to position your HTML element. You can put any HTML element at
whatever location you like. You can specify whether you want the element positioned
relative to its natural position in the page or absolute based on its parent element.
For using this property we have to assign first position:value; value can be
relative,absolue,fixed;
1. Relative positioning:
Relative positioning changes the position of the HTML element relative to where it

normally appears. So "left:20" adds 20 pixels to the element's LEFT position. Ex:
It will produce the following result:

2.Absolute positioning:

An element with position: absolute is positioned at the specified coordinates relative to


your screen top-left corner.

3.Fixed positioning:

24
VARUN KUMAR\CSE-B
Fixed positioning allows you to fix the position of an element to a particular spot on the
page, regardless of scrolling. Specified coordinates will be relative to the browser
window.

CSS Transition:
transitions allows you to change property values smoothly (from one value to another),
over a given duration.

Note: If the duration part is not specified, the transition will have no effect, because
the default value is 0.
Example: The following example shows a 100px * 100px red <div> element. The
<div> element has also specified a transition effect for the width property, with a
duration of 2 seconds. new value for the width property when a user mouse over the
Element by using hover:

25
VARUN KUMAR\CSE-B
CSS ANIMATIONS:
Animation is process of making shape changes and creating motions with elements. An
animation lets an element gradually change from one style to another. You can change
as many CSS properties you want, as many times you want. To use CSS3 animation, you
must first specify some keyframes for the animation. Keyframes hold what styles the
element will have at certain times.

The @keyframes Rule:


When you specify CSS styles inside the @keyframes rule, the animation will gradually
change from the current style to the new style at certain times. To get an animation to
work, you must bind the animation to an element.The following example binds the
"example" animation to the element. The animation will last for 4 seconds, and it will
gradually change the background-color of the element from "red" to "yellow":

Some Properties:
1. animation-name : name;(write the
name of your animation)
2. animation-duration: 5s;(Duration of
your animation)
3. animation-iteration-count: infinite;
( property specifies the number of
times an animation should run.)
4. animation-delay: 2s; ( property
specifies a delay for the start of an
animation)
5. animation-timing-function: linear;
( property specifies the speed curve of
the animation.)
6. animation-direction: alternate;
( property is used to let an animation
run in reverse direction or alternate cycles.)
Example:
The following example will change the background-color of the element when the
animation is 25% complete, 50% complete, and again when the animation is 100%
complete:

Animation-timing-function:

26
VARUN KUMAR\CSE-B

Animation-direction:

Animation Shorthand property:

27
VARUN KUMAR\CSE-B
WEBPAGE:

28
VARUN KUMAR\CSE-B
PORTFOLIO CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>portfolio</title>
<link rel="stylesheet" href=".css\style.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.5.2/css/all.min.css"></link>
</head>
<body>
<div class="portfolio-container">

<div class="navbar">
<ul class="nav-list">
<a id="A" href="#">Home</a>
<a id="A" href="#">Work</a>
<a id="A" href="#">About</a>
<a id="A" href="#">Project</a>
<a id="A" href="#">Service</a>
</ul>
</div>

<div class="content">
<h1 id="A">MY</h1><br>
<h1 id="B">PORTFOLIO</h1><br><br><br><br>
<h5 id="C">HI,</h1><br><br>
<p id="D">Im varun,Web Developer by<br>
passion im,very happy to share my<br>
website with you.enjoy! </p><br><br><br>
</div>
<div class="right-imgcontainer">
<img src="Varun.jpg">
</div>
<div class="Last-container"></div>
<div class="icons">
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-whatsapp"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-linkedin-in"></i>
</div>
</div>
</body>
</html>

29
VARUN KUMAR\CSE-B

JAVASCRIPT-OVERVIEW

30
VARUN KUMAR\CSE-B
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 interpreted programming
language with object-oriented capabilities.
Advantages of JAVA-SCRIPT:

 Less server interaction


 Immediate feedback to the visitors
 Increased interactivity
 Richer interfaces
For implement java-script in your HTML document we can use script tag alerts the
browser program to start interpreting all the text between these tags as a script. A
simple syntax of your JavaScript will appear as follows.
SYNTAX:

EX:
<html>
<body>

<script type="text/javascript">
<!--
var age = 20; if( age > 18
){
document.write("<b>Qualifies for driving</b>");
}
//-->
</script>

31
VARUN KUMAR\CSE-B
Case Sensitivity:

JavaScript is a case-sensitive language. This means that the language keywords,


variables, function names, and any other identifiers must always be typed with a
consistent capitalization of letters. So the identifiers Time and TIME will convey different
meanings in JavaScript.
Comments In JS:
 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 //-->.

CONDITIONAL STATEMENTS:
1.If Statement:
The ‘if’ statement is the fundamental control statement that allows JavaScript to make
decisions and execute statements conditionally
Syntax:

if (expression){
Statement(s) to be executed if expression is true
}

2. If Else Statement

The ‘if...else’ statement is the next form of control statement that allows JavaScript to
execute statements in a more controlled way.
Syntax:

if (expression){
Statement(s) to be executed if expression is true
}else{
Statement(s) to be executed if expression is false
}

32
VARUN KUMAR\CSE-B

1. If …..Elseif Statement

The ‘if...else if...’ statement is an advanced form of if…else that allows JavaScript to
make a correct decision out of several conditions.
Syntax:
if (expression 1){
Statement(s) to be executed if expression 1 is true
}else if (expression 2){
Statement(s) to be executed if expression 2 is true
}else if (expression 3){
Statement(s) to be executed if expression 3 is true
}else{
Statement(s) to be executed if no expression is true
}

LOOPS:
1.For Loop:
The ‘for’ loop is the most compact form of looping. It includes the following three
important parts:
 The loop initialization where we initialize our counter to a starting value. The
initialization statement is executed before the loop begins.
 The test statement which will test if a given condition is true or not. If the condition
is true, then the code given inside the loop will be executed, otherwise the control will
come out of the loop.
 The iteration statement where you can increase or decrease your counter.
Syntax:

for (initialization; test condition; iteration statement){


Statement(s) to be executed if test condition is true}
2.While loop:

The most basic loop in JavaScript is the while loop which would be discussed in this
chapter. The purpose of a while loop is to execute a statement or code block
repeatedly as long as an expression is true. Once the expression becomes false, the
loop terminates.
Syntax:

while (expression){
Statement(s) to be executed if expression is true
} While loop:
3.Do
33
VARUN KUMAR\CSE-B
The do...while loop is similar to the while loop except that the condition check happens
at the end of the loop. This means that the loop will always be executed at least once,
even if the condition is false.
Syntax:

do{
Statement(s) to be executed;
} while (expression);

FUNCTIONS:
A function is a group of reusable code which can be called anywhere in your program.
This eliminates the need of writing the same code again and again. JavaScript allows us
to write our own functions as well.
FUNCTION DEFINATION FUNCTION CALLING
Before we use a function, we need to define To invoke a function somewhere later in
it. The most common way to define a the script, you would simply need to
function in JavaScript is by using the write the name of that function.
function keyword, followed by a unique So sayhello function is called by name ();
function name, a list of parameters (that
might be empty), and a statement block
surrounded by curly braces.
Try the following example. It defines a
function called sayHello that takes no
parameters: <body>
<p>Click the following
<script
button to call the
type="text/javascript">
function</p>
<!--
<form>
function sayHello()
<input type="button"
{
onclick="sayHello('Zara'
alert("Hello there"); , 7)" value="Say Hello">
} </form>
//-->
</body>
</script>

34
VARUN KUMAR\CSE-B

PROGRAMMING LANGUAGE:
A programming language is a system of notation for writing computer programs. Programming languages are
described in terms of their syntax and semantics, usually defined by a formal language. lets do some examples of c
programming language.

LOGIC DEVELOPMENT USING ALGORITHMS AND FLOWCHARTS


What is an Algorithm?
An algorithm is a step by step process to solve a problem using finite number of steps.

What is a flowchart?
A flowchart is a graphical representation of an algorithm, they are drawn using specific symbols.

START/STOP

INPUT/OUTPUT

PROCESSING

DECISION MAKING

FLOW

Write a program to find greatest of three numbers.


ALGORITHM:
Step 1: Start
Step 2: Declare a, b and c
Step 3: Read values a, b and c
Step 4: If a>b continue Step 5
Step 5: If b>c then print “ b is the largest” and continue step 7
Step 6: Continue step 8
Step 7: If a>c then print “a is the largest” and continue step 7
Step 8: Print “c is the largest”
Step 9: Stop

35
VARUN KUMAR\CSE-B
PROGRAMs OF C LANGUAGE:
1. GREATER NUMBER 2.FACTORIAL

3.SWAP TWO NUMBER 4.STAR PATTERN

1. PRINT FIVE NATURAL NUMBERS

36
VARUN KUMAR\CSE-B

PROGRAMs OF C++ LANGUAGE:


1.FACTORIAL OF NUMBER 2. PRINT NATURAL NUMBERS

3.GIVEN NUMBER IS PRIME OR NOT 4.GRADES OF STUDENTS USING ARRAY

5.FIND ELECTRICITY BILL 6.TO PRINT TABLE

37
VARUN KUMAR\CSE-B

OFFICE AUTOMATION:

POWER POINT:
PowerPoint is part of the Microsoft Office suite and has become synonymous
with presentations. By using Microsoft PowerPoint presentation software, you
can add polish and pizzazz to professional speeches and pitches or just create a
fun slideshow to share with family and friends

 Creating a New Presentation:


1. Click Blank Presentation.
2. The PowerPoint screen will open.

 Presentation Themes:
PowerPoint 2013 offers a variety of
professional-looking designs. Themes
automatically format slides with color or
graphic backgrounds and present fonts.
You can access the presentation themes
when you first open PowerPoint, or later
or in the Design tab.
Changing the Presentation Theme:
To see all available themes:
1. Go to Design tab Themes group.
2. Click the More arrow to see all available
themes.
3. Click on the desired theme.

 Adding a New Slide:


There are several ways to add a new slide to a presentation.
1. Go to the Home tab Slides group New Slide command.
2. Right-click on a slide thumbnail and choose New Slide from
3. the shortcut menu that appears.Click on the thumbnail the slide
should follow and press Enter on the keyboard.

38
VARUN KUMAR\CSE-B
 Working with Images:
Adding Online Pictures
1. Go to Insert tab Illustrations group Online Pictures command.
2. Type a keyword, such as cat, in the Bing
Image Search box.
3. Press Enter to conduct the search.
4. Various cat images are displayed. Click on
an image to select it.
5. Click Insert to add the picture to the slide.

 Adding Video:
1. Click on the slide for the video.
2. Go to "Insert" > "Video" > "Video on My PC" or "Online Video."
3. Select and insert the desired video file.
4. Click the video frame, go to "Playback," and adjust start options (On
Click, Automatically, When Clicked), volume, and more.
5. Adjust the size and position of the video frame.
6. Click the "Play" button to preview.
Tables and Charts
Tables:
1. Insert Table:
o Go to "Insert" > "Table" > Select rows and columns.
2. Enter Data: Click inside cells to type data.
3. Modify Table:
o Add/Remove Rows/Columns: Right-click > "Insert" or "Delete."
o Resize Cells: Drag cell borders.
o Format Table: Use "Table Design" and "Layout" tabs.
o Merge/Split Cells: Select cells > "Layout" tab > "Merge" or "Split."

Charts:
2. Insert Chart:
o Go to "Insert" > "Chart" > Select chart type.
3. Enter Data: Enter data in the Excel sheet that opens.
4. Modify Chart:
o Change Chart Type: "Chart Design" > "Change Chart Type."
o Edit Data: "Chart Design" > "Edit Data."
o Format Elements: Right-click elements > format options.
5. Resize/Move Chart: Drag chart to resize or reposition.

39
VARUN KUMAR\CSE-B

Presentation on Global Warming:

Page 1: page 4:

Page 2: Page 5:

Page 3: Page 6:

Thank You
40
VARUN KUMAR\CSE-B

SPREAD-SHEET:
A Spreadsheet is a computer application that is designed to add, display, analyse,
organise, and manipulate data arranged in rows and columns. It is the most
popular application for accounting, analytics, data presentation, etc. There are
many types of spreadsheet softwares available. For example Microsoft Excel,
Google Sheets, Smartsheet, Airtable, etc. The most popular and widely used
spreadsheet software is Microsoft Excel.
Entering and editing the data:
Entering Data:
 Open Excel.
 Select a Cell.
 Type the Data.
 Complete the Entry.
Editing Data:
 Select the Cell to Edit.
 Click on the cell that contains the data you want to edit.
 Edit Directly in the Cell.
o Double-click the cell to enter edit mode. You will see a blinking cursor
inside the cell.
o Alternatively, you can click the cell once and then press F2 to enter
edit mode.
 Edit in the Formula Bar:
o Click on the cell to select it.
o Click in the formula bar at the top of the Excel window and make your
changes there.
 Complete the Edit:
o Press Enter to confirm the changes.
o Press Esc to cancel the edit and revert to the original data.
7.2 Functions and Formulas:
Functions and formulas are fundamental tools in Excel that allow you to perform
calculations, analyse data, and automate tasks. Here's a comprehensive guide to
understanding and using functions and formulas in Excel:
Formulas: A formula in Excel is an expression that calculates the value of a cell.
Formulas can perform operations such as addition, subtraction, multiplication, and
division, as well as more complex mathematical operations.
 Creating a Simple Formula:
o Start with an equals sign =.
o Use operators (+, -, *, /) to define the calculation.
o Example: =A1 + B1 adds the values in cells A1 and B1.
 Combining Operations:
o Formulas can combine multiple operations.

41
VARUN KUMAR\CSE-B
o Example: =(A1 + B1) * C1 first adds the values in A1 and B1, then
multiplies the result by the value in C1.
 Using Parentheses:
o Parentheses control the order of operations.
o Example: =A1 + (B1 * C1) first multiplies B1 and C1, then adds the
result to A1.

Functions: Functions in Excel are predefined formulas that perform specific


calculations using the values provided as arguments. They help streamline complex
calculations, making data analysis and manipulation more efficient. Here’s a quick
summary:

 Predefined Formulas: Functions are built into Excel, saving you from writing
complex formulas from scratch.
 Categories of Functions: Mathematical and Trigonometric: Perform basic to
complex mathematical operations.
Example: =SUM(A1:A10) adds all numbers in the specified range.
 Statistical: Analyze statistical data.
Example: =AVERAGE(B1:B10) calculates the average of the numbers.
 Text: Manipulate text strings.
Example: =CONCAT(A1, " ", B1) joins two text strings with a space in
between.
 Logical: Perform logical operations.
Example: =IF(C1 > 10, "High", "Low") returns "High" if the condition is true
and "Low" if false.
 Error Checking: Functions include error checking to handle incorrect
arguments or invalid operations.
Common errors include #DIV/0!, #VALUE!, and #N/A.
Functions Library:
Excel’s Formulas tab provides a library of functions organised by category. The Insert
Function feature helps you search for and insert functions.

42
VARUN KUMAR\CSE-B

Graphs and Charts:

Creating Charts and Graphs in Excel


● Select Your Data:
0 Highlight the data range you want to include in your chart (both labels
and values).
● Insert a Chart:
0 Go to the Insert tab.
○ Choose a chart type from the Charts group (e.g., Column, Line, Pie,
Bar).
○ Click on the chart type to insert it into your worksheet.
● Recommended Charts:
0 Click Insert > Recommended Charts.
○ Select a suggested chart and click OK.

43
VARUN KUMAR\CSE-B

44
VARUN KUMAR\CSE-B
MS-WORD:
1.Creating, Opening, Saving and Printing a document.

 Creating a new document:

 Click on file menu


 Select and click New button.
 Otherwise click button on the standard toolbar.

 Opening a document
 Click File Menu.
 Select and click Open option.
 Otherwise click button on the standard toolbar.
 Double click on the file from the open window.

 Saving a document
 Click File Menu
 Select and click Save button

 Otherwise click button on the standard toolbar.

 Printing a document
 Click File menu
 Select and click Page Setup option. You will get the following screen.
 Here you can set margins (top, bottom, right and left), paper size, paper source
and layout.
 Click Ok Button.

2.Inserting Clip arts:


 Click Insert menu, click picture and then click Clip Art. You will get screen as show in
side::
 Select the picture and then click Insert button. The selected picture will be inserted at the cursor position.

3.Inserting WordArt:
 Click Insert menu, click picture and then click WordArt.

4.Creating a Mail Merge document:


Following are steps involved in creating a Mail Merge document.
 Create a new data source and enter information.
 Create the main document.
 Insert fields into the main document.
 Merge data source and main document.
5.Creating a new data source: This file is created basically to store the
information like
addresses which is to be used to merge with the main document.
 Open a New word document.
 Create a table with following information :
45
VARUN KUMAR\CSE-B

First Name Last Name Add1 Add2 Add3


Bhaskar Rambha Banjara Hills Road No.3 Hyderabad
Ashok Reddy Kukatpally Main Road Hyderabad
Ravi Kumar Gandhi RTC X Roads Hyderabad
Nagar

 Save the files as address.doc and close.

6.Creating a Main Document:


 From the Tools menu Letters and Mailing Mail Merge.
 In the Main Document area of Mail Merge Helper window click the Create button.
Clicking on the down arrow opens the pull down menu.
 Select Letters. and under Step 1 of 6, Click on Next : Starting document as shown
in the above window (step 1).
 You will get 3 options to select from the following window:-
 Use the Current Document.
 Start from a template.
 Start from Existing Document

 Select the first option : Use the current document


 Now click on Write Your letter link (step 3)
Then you will get following window.
 Now Select an Existing Data Source i.e. the file address.doc and Click on Open
Button.
Then you will get the following window
Click Ok.
Then you will see the following screen.
 To add recipient information to your letter Click on More items and insert the fields
wherever required.
After inserting fields your document may look like this :
 Now see Step 4 of 6 and click on Next : Preview your letters
 You can preview all the letters by clicking on Recipient 1..2.. so on
 After Preview come to Step 5 of 6 and click on Next : Complete merge
 After completing the merge you may print letters or edit them using the following
options :

 There are several options while printing letters. You may print all letters or
selectively. It is advisable to check the formatting and other details of merged
documents before sending them to printer.

46

You might also like