0% found this document useful (0 votes)

53 views110 pages

Week No: 01 Date 1. Aim of The Program

Uploaded by

adhikya03

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

53 views110 pages

Week No: 01 Date 1. Aim of The Program

Uploaded by

adhikya03

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 110

Week no: 01 Date

Aim of the program:

Designing class time table using table tags.

Description:

A Simple HTML Document:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title
bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph

HTML TABLES

A table in HTML consists of table cells inside rows and columns.

Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of the table cell.

Table Rows
Each table row starts with a <tr> and end with a </tr> tag.
tr stands for table row.

Table Headers
When you want your cells to be headers, in those cases use the <th> tag instead of the <td>
tag.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Rowspan
To make a cell span over multiple rows, use the rowspan attribute
Colspan
To make a cell span over multiple columns, use the colspan attribute

Program Code:

<center><b><font size="4">CHAITHANYA BARATHI INSTITUTE OF

TECHNOLOGY(A)</font></h3></b></center>
<center>DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING</center>
<center><b>Sem-IV Time-Table</b></center>
<br>
<table border="3" bgcolor="white" align="center" cellspacing="0" cellpadding="2">
<tr bgcolor="beige">
<th>Period</th>
<th>I</th>
<th>II</th>
<th>III</th>
<th>Lunch</th>
<th>IV</th>
<th>V</th>
<th>VI</th>
</tr>
<tr bgcolor="beige">
<th>Day</th>
<th>9-10</th>
<th>10-11</th>
<th>11-12</th>
<th>12-1</th>
<th>1-2</th>
<th>2-3</th>
<th>3-4</th>
</tr>
<tr>
<th rowspan="3" bgcolor="beige">MON</th>
<td colspan="2" align="center">MFDS LAB B1</td>
<td align="center">DAA LAB B1</td>
<td align="center" rowspan="8" bgcolor="beige"></td>
<td align="center">DAA LAB B1</td>
<td align="center" colspan="2">MFDS LAB B2</td>
</tr>
<tr>
<td align="center" rowspan="2" colspan="2">IWT LAB B2</td>
<td align="center">DBMS LAB B2</td>
<td align="center">DBMS LAB B1</td>
<td align="center" rowspan="2" colspan="2">IWT LAB B1</td>
</tr>
<tr>
<td align="center">IWT LAB B2</td>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

<td align="center">IWT LAB B1</td>
</tr>
<tr>
<th bgcolor="beige">TUE</th>
<td align="center" colspan="2">DAA LAB</td>
<td align="center">DBMS LAB</td>
<td align="center">IWT LAB</td>
<td align="center">CAMP</td>
<td align="center">FIT INDIA</td>
</tr>
<tr>
<th bgcolor="beige">WED</th>
<td align="center">DAA</td>
<td align="center">DBMS</td>
<td align="center">IWT</td>
<td align="center">CAMP</td>
<td align="center">EEA</td>
<td align="center">DBMS</td>
</tr>
<tr>
<th bgcolor="beige">THU</th>
<td align="center">IWT</td>
<td align="center">CAMP</td>
<td align="center">Library</td>
<td align="center">DAA</td>
<td align="center">DBMS</td>
<td align="center">EEA</td>
</tr>
<tr>
<th bgcolor="beige">FRI</th>
<td align="center">EEA</td>
<td align="center">EEA</td>
<td align="center">IWT</td>
<td align="center">CAMP</td>
<td align="center">DAA</td>
<td align="center">Mentoring</td>
</tr>
<tr>
<th bgcolor="beige">SAT</th>
<td align="center" colspan="3">MOOCS/Training/Internship</td>
<td></td>
<td></td>
<td></td>
</table>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output:

Result analysis

A time table is designed using table tags.

Table borders are adjusted according to the requirement. Each table row is filled with table
header or table data. Column span and row span are used to merge multiple columns and
rows respectively. Cells are filled with background colour.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Aim of the program:

Designing a web page which consists of image and display biodata.

Description/algorithm:

HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The
<img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the
path to the image to be displayed.

There are two ways to specify the URL in the src attribute:

1. Absolute URL - Links to an external image that is hosted on another website. Example:
src="https://www.w3schools.com/images/img_girl.jpg".

2. Relative URL - Links to an image that is hosted within the website. Here, the URL does
not include the domain name. If the URL begins without a slash, it will be relative to the
current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative
to the domain. Example: src="/images/img_girl.jpg".

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specifies the width
and height of the image (in pixels)

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image, if the
image for some reason cannot be displayed. This can be due to slow connection, or an error
in the src attribute, or if the user uses a screen reader.

Program Code:

<!DOCTYPE html>
<html>
<body>

<center><h2>Biodata</h2></center>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

<center><img src="C:\Users\jayan\Documents\160120733061\iwt\image.jpg" width="200"
height="200"></center>
<p align="center" >Name: Bjhjghg<p>
<p align="center" >Father Name: Efghjhjh<p>
<p align="center" >Date of birth: 01-06-2010<p>
<p align="center" >Gender: Female<p>
<p align="center" >Age: 22<p>
<p align="center" >Email: [email protected]<p>
<p align="center" >Address: hvhbhk, gvhgvh,gfhgfhgvh.<p>
<p align="center" >Education: vkhgjhbngiuyg, hftfjhhhghjgjh, gghfhgvnbvnbbn<p>
<p align="center" >Experiences: wregfhguhgh, sstrdtfghtdd, ddrssfsdfs, fddfsfsfdfgcgvb<p>
</body>
</html>

Output:

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Result analysis

A web page is designed which consists of an image and bio data.

An image tag is used is display the image using source as file path. Bio data is described
using paragraph tags. Text is aligned to the centre.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Aim of the program:

Creating Restaurant menu card.

Description/algorithm:

Background Image on a HTML element

To add a background image on an HTML element, use the HTML style attribute and the CSS
background-image property

HTML Lists

HTML lists allow web developers to group a set of related items in lists.

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default.
It can have one of the following values:
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default.

<ul> Defines an unordered list

<ol> Defines an ordered list
<li> Defines a list item

The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

Program Code:

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

<h1>MENU CARD</h1>
<p>Restaurant EatWell</p>
<p>Milky Way Street 88-8888 Galaxy</p>
<h3>BURGERS</h3>
<ul><b>
<li>Cabernet Franc</li>
<li>Cabernet Sauvernon</li>
<li>Chianti</li>
<li>Dornfelder</li>
<li>Merlot</li>
<li>Pionet Noir</li>
</b></ul>
<h3>HOT DOGS</h3>
<ul><b>
<li>Cabernet Franc</li>
<li>Cabernet Sauvernon</li>
<li>Chianti</li>
<li>Dornfelder</li>
<li>Merlot</li>
</b></ul>
<h3>DRINKS</h3>
<ul><b>
<li>Coca cola</li>
<li>Mojitoes</li>
<li>Lemonade</li>
<li>Sprite</li>
<li>Jajhtyg</li>
<li>Galiupp</li>
</b></ul>
</body>
</html>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output

Result analysis

A Restaurant menu card is created.

Unordered and Ordered lists are used to list the items. Heading tags are used to highlight the
contents. Background image is added in the body tag.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Aim of the program:

Design a web page to images and in one column and their description in another column
using table.

Description/algorithm:

HTML Links

Links are found in nearly all web pages. Links allow users to click their way from page to
page.

HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

HTML Links – Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>

The most important attribute of the <a> element is the href attribute, which indicates the
link's destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue

A visited link is underlined and purple
An active link is underlined and red

HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To change this,
you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window

Program Code:

<center><h3>Profile Table<he></center>
<table border="3" align="center">
<tr>
<th>S.No</th>
<th>Name</th>
<th>Photo</th>
<th>Profile</th>
</tr>
<tr>
<th>1.</th>
<th>Dwayne Johnson</th>
<th><img src="C:\Users\jayan\Documents\160120733061\iwt\1..jpg" height="100"
width="100"></th>
<td>
<a href="https://en.wikipedia.org/wiki/Dwayne_Johnson">profile link</a>
</td>
</tr>
<tr>
<th>2.</th>
<th>Joe Biden</th>
<th><img src="C:\Users\jayan\Documents\160120733061\iwt\2..jpg" height="100"
width="100"></th>
<td>
<a href="https://en.wikipedia.org/wiki/Joe_Biden">profile link</a>
</td>
</tr>
</table>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output

Result analysis

A web page is created which contains a table of contents – name, image and profile links.
Html tables are used to create the table with required number of cells and data is filled.
Images are inserted using image tags and source. Profiles links are created using reference
inside the tags.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Week no: 03 Date: 28-03-2022

Aim of the program:

To create a registration form.

Description/algorithm:

HTML FORMS

HTML elements gives styles and meaning to a web site. To add interactivity to a web page forms to
be used.

<Form> element:
<form> block level element that defines an interactive part of a web page. All form control
elements like textbox, buttons appear within a <form> element.
Form attributes
1. action: specifies address where form information to be sent.
2. Method: could be GET or POST how form information will be sent.

<input> tag:
• form elements use the <input> tag, with a type="..." attributes to tell which kind of element
it is.
• Input tag attributes
1. Type - specifies type of the input control
2. Name – name of the control input tag has

An <input> element can be displayed in many ways, depending on the type attribute.

Here are some examples:

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

<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button

<textarea>:
The <textarea> tag defines a multi-line text input control.
The name attribute is needed to reference the form data after the form is submitted (if you omit the
name attribute, no data from the text area will be submitted).
The id attribute is needed to associate the text area with a label.

<select>:
The <select> element is used to create a drop-down list.
The name attribute is needed to reference the form data after the form is submitted (if you omit the
name attribute, no data from the drop-down list will be submitted).
The id attribute is needed to associate the drop-down list with a label.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Program Code:

<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<center><h1>Registration Form</h1></center>
<form>
<center>
<table bgcolor="beige" cellspacing="15">
<tr>
<td> Username <font color="red" >* </font>:</td>
<td> <input type="text" placeholder="Enter Username" name="Username" size="30"
required/></td>
</tr>
<tr>
<td> Password <font color="red" >* </font>:</td>
<td> <input type="text" name="Password" placeholder="Enter Password"size="30"
required/></td>
</tr>
<tr>
<td> Confirm Password <font color="red" >* </font>:</td>
<td> <input type="text" name="Confirm Password"placeholder="Reenter Password"
size="30" required/></td>
</tr>
<tr>
<td> Mother's Name : </td>
<td> <input type="text" name="Mother's Name" size="30"/></td>
</tr>
<tr>
<td> Father's Name :</td>
<td> <input type="text" name="Father's Name" size="30"/></td>
</tr>
<tr>
<td> Email <font color="red" >* </font>:</td>
<td> <input type="text" name="Email" placeholder="[email protected]"
size="30" required/></td>
</tr>
<tr>
<td> Phone Number <font color="red" >* </font>:</td>
<td> <input type="text" name="Phone Number" placeholder="XXXXXXXXXX"
size="30" required/></td>
</tr>
<tr>
<td> Gender :</td>
<td>
<input type="radio" name="Gender" value=1/>Male
<input type="radio" name="Gender" value=1/>Female
<input type="radio" name="Gender" value=1/>Other
</td>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

</tr>
<tr>
<td> Date of Birth :</td>
<td> <input type="text" name="dd" placeholder="dd" size="1"/>/
<input type="text" name="mm" placeholder="mm" size="1"/>/
<input type="text" name="yyyy" placeholder="yyyy" size="2"/></td>
</tr>
<tr>
<td> Address :</td>
<td> <textarea name="Address" id="Address" rows="2" cols="28"/></textarea></td>
</tr>
<tr>
<td> Department :</td>

<td>
<input type="radio" name="dep" value=1/>CSE
<input type="radio" name="dep" value=1/>EEE
<input type="radio" name="dep" value=1/>BBA
</td>
</tr>
<tr>
<td>
Blood Group :
</td>
<td>
<select name="bloodgroup" id="bloodgroup" >
<option value="A+">A+</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B-">B-</option>
<option value="AB+">AB+</option>
<option value="AB-">AB-</option>
<option value="O+">O+</option>
<option value="O-">O-</option>
</select>
</td>
</tr>
<tr>
<td> Course :</td>

<td>
<input type="checkbox" name="C" value=c/>C
<input type="checkbox" name="C++" value=c++/>C++
<input type="checkbox" name="Java" value=java/>Java
<input type="checkbox" name="AI" value=ai/>AI
<input type="checkbox" name="ML" value=ml/>ML
</td>
</tr>
<tr>
<td> Photo : </td>
<td><input type="file" name="image"/></td>
</tr> <tr></tr>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output:

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Result analysis:

A registration form is created with various type of elements. Table tags are used to create two
columns, one of which has details and the other has inputs that are accepted by user. A simple text
type inputs are used for entering details and required attribute is used to make the credentials
mandatory. Radio buttons and checkboxes are used for choosing details. Address is taken in textarea
for multiple line entry. Select, Photo, Submit and Reset are the types of input are used.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Week no: 04 Date: 04-04-2022

Aim of the program:

To Design Chess board using HTML and CSS.

Description:

CSS can be added to HTML documents in 3 ways:

Inline - by using the style attribute inside HTML elements

Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file

CSS Colours, Fonts and Sizes

The CSS color property defines the text color to be used.+-66.

The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.

CSS Padding
The CSS padding property defines a padding (space) between the text and the border.

CSS Border
The CSS border property defines a border around an HTML element.

CSS Margin
The CSS margin property defines a margin (space) outside the border.

CSS display Property

The display property specifies the display behavior (the type of rendering box) of an element.

HTML | Div Tag

The div tag is known as Division tag. The div tag is used in HTML to make divisions of content in
the web page like (text, images, header, footer, navigation bar, etc). Div tag has both open(<div>)
and closing (</div>) tag and it is mandatory to close the tag. The Div is the most usable tag in web
development because it helps us to separate out data in the web page and we can create a particular
section for particular data or function in the web pages.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Program Code:

<html>
<head>
<title>Chess Board</title>
<style type="text/css">

.chessboard{
width:640px;
height:640px;
margin:20px;
border:7px solid black;
}

.black{
float: left;
width: 80px;
height: 80px;
background-color:grey;
font-size:50px;
text-align:center;
display: table-cell;
vertical-align:middle;
}

.white {
float: left;
width: 80px;
height: 80px;
background-color: white;
font-size:50px;
text-align:center;
display: table-cell;
vertical-align:middle;
}
</style>
</head>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

</body></center>
</html>

Output:

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Result analysis:

A chess board is created. Chess board and each black and white squares are designed using inline
css style tag. Display attribute is used to make each square a table cell. Division tags are used to
create checks.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Aim of the program:

Creating a html page using frames.

Description/algorithm:

FRAMES:
Frames are used to divide a browser window into multiple sections where each section loads a
separate html document.

<FRAMESET>
The <frameset> tag replaces the <body> element in frameset documents.
The <frameset> tag defines how to divide the window into frames.

FRAMESET ATTRIBUTES

<frameset rows="value, value">

Defines the rows within a frameset, using number in pixels, or percentage of width

<frameset borders=“5”>
the width of the border of each frame in pixels

<frameset frameborder =“1”>

specifies whether a three-dimensional border should be displayed between frames.

<frameset framespacing=“10”> the amount of space between frames in a frameset

<frame>- define a frame within the frameset.

<frame src="URL">
Specifies which HTML document should be displayed

Frame attributes:

<frame name="name">
Names the frame, or region, so it may be targeted by other frames

<frame scrolling=VALUE>
Sets whether the frame has a scrollbar; value may equal "yes," "no," or "auto." The default, as in
ordinary documents, is auto.

<frame marginwidth=#>
Defines the space between left and right margins for the frame and frame content; must be equal to
or greater than 1

<frame marginheight=#>
Defines the space between the top and bottom margins for the frame and frame content; must be
equal to or greater than 1

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Program Code:

banner.html
<html>
<body >
<img src="iwwt.jpg" alt="image" width="1600" height="300">
</body>
</html>

navigation.html
<html>
<body style="background-color:powderblue;">
<center><h1>CONTENTS</h1></center>
<a href="file:///C:/Users/jayan/Documents/160120733061/iwt/tble.htm"
target="3"><h3>TIME TABLE</h3></a><br/>
<a href="file:///C:/Users/jayan/Documents/160120733061/iwt/menu.htm"
target="3"><h3>HOTEL MENU</h3></a><br/>
<a href="file:///C:/Users/jayan/Documents/160120733061/iwt/bio.htm" target="3"><h3>BIO
DATA</h3></a><br/>
<a href="file:///C:/Users/jayan/Documents/160120733061/iwt/profiles.htm"
target="3"><h3>PROFILES</h3></a><br/>
<a href="file:///C:/Users/jayan/Documents/160120733061/iwt/registration%20form.html"
target="3"><h3>REGISTRATION FORM</h3></a><br/>
<a href="file:///C:/Users/jayan/Documents/160120733061/iwt/chess.html"
target="3"><h3>CHESS BOARD</h3></a><br/>
</body>
</html>

content.html
<html>
<body>
<h1>Content Page</h1>
</body>
</html>

Frames.html
<html>
<head>
<title>Frames</title>

</head>

<frameset rows="25,75" >

</html>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output:

Result analysis:

A html page is created with a banner, navigation and content page. The navigation page contains
references to pages that are displayed in the content page.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Aim of the program:

Designing a student educational portal using HTML and CSS.

Description:

Css colours:

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

Hex Code #RRGGBB p{color:#FF0000;}

Short Hex Code #RGB p{color:#6A7;}
RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}
RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}
keyword aqua, black, etc. p{color:teal;}

CSS Comments:

Many times, you may need to put additional comments in your style sheet blocks. So, it is
very easy to comment any part in the style sheet. You can simply put your comments inside
/*.....this is a comment in style sheet .... */.
You can use /* .... */ to comment multi-line blocks in similar way you do in C and C++
programming languages.

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.

Css Measurement units:

Absolute Units: Absolute units as the name suggest are fixed in nature.

px: Pixel is a small unit but still visible and is relative to the viewing device.
cm: Centimeters, 1cm=37.8px
mm: millimeters, is a smaller unit as compared to cm, 1 mm=1/10th of 1cm.
in: inches, is a large unit compared to pixels, 1in=96px
pc: pica is a typographic unit, 1pc=1/6th of 1in
pt: Points is the smallest unit of measure, 1pt=1/72 of 1in

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Relative Units: As suggested by its name, these are relative to something else. It could be either
relative to the size of the root element’s font or parent element or the size of the viewport.

rem: This unit is relative to the font-size of the root element.

em: This unit is relative to the font-size of the element itself. For example, 3em signifies that the new
size will be 3 times the size of the current font.
%: This denotes a percentage value, defines the size of an element relative to its parent’s element.
ex: This unit is relative to the x-height of the font in use.
vh: The viewport height, denotes the element’s height is 1% of the viewport’s height. vw:
The viewport width, denotes the element’s width is 1% of the viewport’s width. vmin:
This denotes the size relative to 1% of the viewport’s smaller dimension.
vmax: This denotes the size relative to 1% of the viewport’s larger dimension.

Program Code:

Html:

<!doctype html>
<html>
<head>
<title>Chaithanya Barathi Institute of Technology</title>
<link rel="stylesheet" href="css/style.css"/>

<style>

body, html {
height: 100%;
margin: 0;
}

.bg {
/* The image used */
background-image: url("images/bcg.jpg");

/* Full height */
height: 100%;

/* Center and scale the image nicely */

background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

</style>
</head>

<nav>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

<ul class="menu" style="border-radius: 5px;">

<li><a href="#">About</a></li>
<li><a href="#">Notification</a></li>
<li><a href="#">Results</a></li>
<li><a href="#">Apply Now</a></li>
<li><a class="active" onclick="document.getElementById('id01').style.display='block'"
style="width:auto; border-radius: 5px; cursor: pointer;">Login</a></li>
</ul>
</nav>

</section>

<div class="home-content">

<div class="home-text" >

<h3 style="color: black; letter-spacing: 3px;">Welcome to CBIT</h3>

<h1 style="color: Indigo;"> Student Portal</h1>

<p style="color: dimgrey;">The purpose of institute is to prepare students with promise

to enhance their intellectual, physical, social, emotional, spiritual,
and artistic growth so that they may realize their power for good
as citizens</p>

<a href="#" class="main-login" style="border-radius: 5px;">Apply Now</a>

</div>

<div class="home-img" style="width: 500px;">

<img src="images/img.jpg" width="500px" style="text-shadow: 20px 22px;"/>

</div>

</div>
</div>
</body>

</html>

Style.css:

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

body{
margin:0px;
padding: 0px;
font-family: calibri;
}
*{
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}

.logo img{
height: 80px;
}
nav{
display: flex;
align-items: center;
justify-content: space-around;
padding: 0px 30px;
background-color:#fff;
box-shadow: 2px 2px 20px rgba(255, 151, 103, 0.164);
z-index: 1;
width:100%;
position: fixed;
left: 0px;
top: 0px;
}
nav ul{
display: flex;
margin:0px;
padding: 0px;
}
nav ul li a{
height:40px;
line-height: 43px;
margin: 8px;
padding: 0px 10px;
display: flex;
font-size: 0.9rem;
text-transform: uppercase;
font-weight: 400;
color:#111;
letter-spacing: 1px;
transition: 0.4s ease-in-out;
}
.active{
background-color: #7c3b41;

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

color: #fff;
}
.main-login{
width:120px;
height:40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #80454b;
color:#fff;
box-shadow: 5px 10px 30px rgba(219, 74, 6, 0.5);
text-transform: uppercase;
transition: 0.3s ease-in-out;
}

.home-content{
display: flex;
justify-content: space-around;
align-items: center;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
width:90%;

}
.home-img{
width:500px;
height:400px;
margin:20px;
}
.home-img img{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.home-text{
width:500px;
margin: 20px;
}

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output:

Result analysis:

A student portal is designed using html and css. Various fields are given in the page which can be
directed to other html pages. Different style attributes are used to improve the appearance of html
page. A different file is used to define style selectors and is finally linked to the html page.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Week no: 05 Date: 11-04-2022

Aim of the program: To write a DTD for the given xml .

Description:

DTD: Document Type Definition

DTD is used to define structure of the xml document
dtd can be added to xml document in 2 ways:

Internal / inline DTD

• If the DTD is declared inside the XML file, it should be wrapped in a
DOCTYPE definition with the following syntax:
<!DOCTYPE root_elementname[Element declaration]>

External DTD Declaration

• If the DTD is declared in an external file, it should be wrapped in a DOCTYPE
definition with the following syntax:
<!DOCTYPE root-element SYSTEM/PUBLIC “url of file dtd">
SYSTEM – DTDs defined by individuals and organizations.
PUBLIC – DTDs defined by International Organizations like W3C (standards)
some DTDs are available as international standards, such as those.

XML Elements
• Following are the types of XML elements
1. Text only elements: if element has only text data can be defined with data type #PCDATA inside
parenthesis.
<!ELEMENT element-name (#PCDATA)>

2. Child only elements:Elements with one or more children are declared with the name of the
children elements inside parentheses:
<!ELEMENT element-name (child1,child2,...)>

3. Mixed elements : element allows child element and text data

Example:
<student> student name is <sname>Astonmartin</sname>rollno
is<rollno>99</rollno></student>

4. Empty element:Empty elements are declared with the category keyword EMPTY:
<!ELEMENT element-name EMPTY>
Empty element may contain attributes.

5. Any element:Elements declared with the category keyword ANY, can contain any
combination of parsable data:

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Program Code:

DTD:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE stock [

<!ELEMENT stock (new-car,used-car*)>

<!ELEMENT new-car (model,price)>
<!ELEMENT used-car (model,price,mileage,condition*)>
<!ELEMENT model (#PCDATA)>
<!ELEMENT price (#PCDATA)>
<!ELEMENT mileage (#PCDATA)>
<!ELEMENT condition (#PCDATA)>

XML:

<stock>

<new-car>

<model>Fiat Panda</model>
<price>12000</price>

</new-car>

<used-car>

<model>Fiat Bravo</model>
<price>4000</price>
<mileage>1000</mileage>
<condition>Good</condition>

</used-car>

<used-car>

<model>Ferrari</model>
<price>400000</price>
<mileage>100</mileage>

</used-car>

</stock>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output:

Result analysis:

A dtd is designed for given xml. Document type is defined. Each selector is given in the form of
Element. The elements with only text is given as PCDATA. Child elements are mentioned inside
parenthesis.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Aim of the program: Designing DTD and XML for the bibliography of a book.

Description:

Occurrences of elements:

a. Declaring Only One Occurrence of an Element (1 time)

<!ELEMENT element-name (child-name)>

b. Declaring Minimum One Occurrence of an Element(1 to N)

<!ELEMENT element-name (child-name+)>
Example:<!ELEMENT note (message+)>
The + sign in the example above declares that the child element "message"
must occur one or more times inside the "note" element.

c. Declaring Zero or More Occurrences of an Element

<!ELEMENT element-name (child-name*)>
Example:<!ELEMENT note (message*)>
The * sign in the example above declares that the child element "message" can
occur zero or more times inside the "note" element.

d. Declaring Zero or One Occurrences of an Element

<!ELEMENT element-name (child-name?)>
Example:<!ELEMENT note (message?)>
The ? sign in the example above declares that the child element "message" can
occur zero or one time inside the "note" element.

Declaring either/or Content:

Example:<!ELEMENT student (sname,rollno,marks,(section|branch))>

The example above declares that the “student" element must contain a
“sname" element, a “rollno" element, a “marks" element, and either a
“section" or a “branch" element.

In a DTD, attributes are declared with an ATTLIST declaration.

Declaring Attributes
An attribute declaration has the following syntax:
<!ATTLIST element-name attribute-name attribute-datatype default-value>DTD
example:<!ATTLIST payment type CDATA "check">

Attributes:

The attribute-datatype can be one of the following:

Type Description:

CDATA - The value is character data

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

(en1|en2|..) - The value must be one from an enumerated list
xml - The value is a predefined xml value
ENTITY - The value is an entity

The default-value can be one of the following:

Value Explanation
value of default value of the attribute:

#REQUIRED The attribute is required

#IMPLIED The attribute is not required
#FIXED value The attribute value is fixed

Program Code:

DTD:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE bibliography [
<!ELEMENT bibliography (book+)>
<!ELEMENT book (title, author*, publisher?, year?, section*)>
<!ATTLIST book ISBN ID #REQUIRED>
<!ATTLIST book price CDATA #IMPLIED>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT i (#PCDATA)>
<!ELEMENT content (#PCDATA|i)*>
<!ELEMENT section (title, content?, section*)>
]>

XML:

<bibliography>
<book ISBN="ABC123" price="1200">
<title>IWT</title>
<author>iwt reader</author>
<publisher>XYZ</publisher>
<year>2003</year>
<section>
<title>IWT</title>
<content>
name
<i>user</i>
</content>
</section>
</book>
</bibliography>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output:

Result analysis:

A DTD and an XML is designed for the bibliography of a book. Attributes are defined and their
type is mentioned. Occurrences of an attribute is determined using various syntaxes. Attribute list is
used.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Aim of the program: Designing xml and dtd of a recipe.

Description:

#REQUIRED:

Syntax:
<!ATTLIST element-name attribute-name attribute-type #REQUIRED>Example
DTD: <!ATTLIST person number CDATA #REQUIRED>Valid XML: <person number="5677" />
Invalid XML: <person />
Use the #REQUIRED keyword if you don't have an option for a default
value, but still want to force the attribute to be present.

#IMPLIED;

Syntax:
<!ATTLIST element-name attribute-name attribute-type #IMPLIED>Example
DTD: <!ATTLIST contact fax CDATA #IMPLIED>
Valid XML: <contact fax="555-667788" />
Valid XML: <contact />
Use the #IMPLIED keyword if you don't want to force the author to
include an attribute, and you don't have an option for a default value.

#FIXED:

Syntax:
<!ATTLIST element-name attribute-name attribute-type #FIXED "value">Example
DTD: <!ATTLIST sender company CDATA #FIXED “CBIT">Valid XML: <sender company=
“CBIT" />
Invalid XML:<sender company=“CSE" />
Use the #FIXED keyword when you want an attribute to have a fixed
value without allowing the author to change it. If an author includes
another value, the XML parser will return an error.

Enumerated Attribute Values:

Syntax:
<!ATTLIST element-name attribute-name (en1|en2|..) default-value>Example
DTD: <!ATTLIST payment type (check|cash) "cash">
XML example:
<payment type="check" /> or
<payment type="cash" />
Use enumerated attribute values when you want the attribute value to be one of a fixed set of legal
values.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Program Code:

DTD:

<?xml version="1.0"?>
<!DOCTYPE collection[
<!ELEMENT collection (description,recipe*)>
<!ELEMENT description ANY>
<!ELEMENT recipe (title,ingredient*,preparation,comment?,nutrition)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT ingredient (ingredient*,preparation)?>
<!ATTLIST ingredient name CDATA #REQUIRED
amount CDATA #IMPLIED
unit CDATA #IMPLIED>
<!ELEMENT preparation (step*)>
<!ELEMENT step (#PCDATA)>
<!ELEMENT comment (#PCDATA)>
<!ELEMENT nutrition EMPTY>
<!ATTLIST nutrition protein CDATA #REQUIRED
carbohydrates CDATA #REQUIRED
fat CDATA #REQUIRED
calories CDATA #REQUIRED
alcohol CDATA #IMPLIED>
]>

XML:

<collection>
<description>
Some recipes used for the xml tutorial.
</description>
<recipe>
<title>Fried Rice</title>
<ingredient name="rice" amount="2" unit="4"/>
<ingredient name="salt" amount="0.5" unit="3"/>
<preparation>
<step>Preheat a large skillet or wok to medium heat. Pour sesame oil in the bottom. </step>
<step>Slide the onion, peas and carrots to the side, and pour the beaten eggs onto the other side.
Using a spatula, scramble the eggs.</step>
<step>Add the rice to the veggie and egg mixture. Pour the soy sauce on top.</step>
</preparation>
<comment>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae ipsum perferendis ducimus
corrupti est eius. Repudiandae nihil nisi perspiciatis consequatur culpa suscipit laborum velit
corporis, perferendis dolorum modi ipsam! Rerum velit reiciendis fugiat beatae. Maxime mollitia
eaque ea nam voluptatem libero, nobis accusantium pariatur sed aliquid odit minima quae officiis.
</comment>
<nutrition protein="4.7g" carbohydrates="31g" calories="163" alcohol="0" fat="2.3g"/>
</recipe>
</collection>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output:

Result analysis:

A DTD and XML is designed for preparation of a recipe. Title, ingredients, steps are defined.
Multiple steps are used to describe the process. Comment and nutrition are also added.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Week no: 06 Date: 18-04-2022

Aim of the program: To write a xsd for the given xml .

Description:

XML Schema is commonly known as XML Schema Definition (XSD). It is used to describe and
validate the structure and the content of XML data. XML schema defines the elements, attributes
and data types. Schema element supports Namespaces. It is similar to a database schema that
describes the data in a database
An XML XSD is kept in a separate document and then the document can be linked to an XML
document to use it.

<Schema> Element

Schema is the root element of XSD and it is always required.

<xs:schema xmlns:xs = "http://www.w3.org/2001/XMLSchema">
The above fragment specifies that elements and datatypes used in the schema are defined in
http://www.w3.org/2001/XMLSchema namespace and these elements/data types should be prefixed
with xs. It is always required.

XSD Element:
Simple Element is an XML element which can only have text. It can not contain any attribute.
Syntax: <xs:element name = "element-name" type = "element-type"/>

Default Value:
A Simple Element can have a default value assigned. Default values are used in case an element
does not have any text.
<xs:element name = "grade" type = "xs:string" default = "NA" />

Fixed Value:
Simple Element can have fix value assigend. In case, fixed value is assigned element can not have
any text.
<xs:element name = "class" type = "xs:string" fixed = "1" />

Attributes:
Attribute represents the attribute of an XML element. XSD defines it as a simple type.
Syntax: <xs:attribute name = "attribute-name" type = "attribute-type"/>

Default Value:
Attribute can have a default value assigned to it. Default value is used in case the attribute has no
value.
<xs:attribute name = "grade" type = "xs:string" default = "NA" />

Fixed Value
Attribute can have a fix value assigned. In case a fixed value is assigned, then the element can not
have any value.
<xs:attribute name = "class" type = "xs:string" fixed = "1" />

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Program Code:

XSD:

<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" >
<xs:element name="stock">
<xs:complexType>
<xs:choice>
<xs:element name="new-car">
<xs:complexType>
<xs:sequence>
<xs:element name="model"></xs:element>
<xs:element name="price"></xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name="used-car" maxOccurs="unbounded">
<xs:complexType>
<xs:choice>
<xs:element name="model"></xs:element>
<xs:element name="price"></xs:element>
<xs:element name="mileage"></xs:element>
<xs:element name="condition"></xs:element>
</xs:choice>
</xs:complexType>
</xs:element>
</xs:choice>
</xs:complexType>
</xs:element>
</xs:schema>

XML:

<?xml version="1.0" >

<stock xmlns:xs="http://www.w3.org/2001/XMLSchema-instance" xs:SchemaLocation="1i.xsd">
<new-car>
<model>Fiat Panda</model>
<price>12000</price>
</new-car>
<used-car>
<model>Fiat Bravo</model>
<price>4000</price>
<mileage>1000</mileage>
<condition>Good</condition>
</used-car>
<used-car>
<model>Ferrari</model>
<price>400000</price>
<mileage>100</mileage>
</used-car>
</stock>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output:

Result analysis:

A xsd is designed for given xml. Document type is defined. Elements are defined as complextype
and sequence.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Aim of the program: Designing XSD and XML for the bibliography of a book.

Description:

Complex Element is an XML element which can contain other elements and/or attributes. We can
create a complex element in two ways −

Define a complex type and then create an element using the type attribute

Define a complex type directly by naming

XSD – Complex Empty Element

Complex Empty Element can only have attribute, but no content.

We can declare Complex Empty elements using the following methods –

Use type attribute

Define a complex type element “StudentType” and then create element student of type
“StudentType”.
Use ComplexContent
Define an element of complexType with complexContent. ComplexContent specifies that the
content of the element is to be restricted.
Use ComplexType alone
Define an element of complexType with required attribute element only.

XSD – Complex Element Only

Complex Elements Only can only have other elements.

We can declare Complex element-only element using the following methods −

Use type attribute

Define a complex type element "StudentType" and then create an element called student of type
StudentType.
It is used to maintain the order in which the elements are to be present in the XML. If order is not
maintained, then XML will not be validated.

Use ComplexType alone

Define an element of complexType with the required attribute element only.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Program Code:

XSD:

<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="bibliography">
<xs:complexType>
<xs:sequence>
<xs:element name="book" maxOccurs="unbounded">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string"></xs:element>
<xs:element name="autrhor" type="xs:string"></xs:element>
<xs:element name="publisher" type="xs:string"></xs:element>
<xs:element name="year" type="xs:integer"></xs:element>
<xs:element name="content"></xs:element>
</xs:sequence>
<xs:attribute name="ISBN" type="xs:string"></xs:attribute>
<xs:attribute name="price" type="xs:integer"></xs:attribute>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

XML:

<?xml version="1.0"?>
<bibliography
xmlns:xs="http://www.w3.org/2001/XMLSchema-instance"
xs:SchemaLocation="2i.xsd">
<book ISBN="ABC123" price="1200">
<title>INTERNET</title>
<author>Kash Cont</author>
<publisher>Xander</publisher>
<year>2003</year>
<section>
<title>INTERNET</title>
<content>
name
<i>user</i>
</content>
</section>
</book>
</bibliography>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output:

Result analysis:

A XSD and an XML is designed for the bibliography of a book. Attributes are defined and their type
is mentioned. Occurrences of an attribute is determined using various syntaxes.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Aim of the program: Designing xml and xsd of a recipe.

Description:

XSD - Complex Text Only Element

Complex Text-only Element can only have text and attribute, but no content. See the following
example − <marks grade = "A" >90</student>
We can declare Complex Text-only elements using the following methods −

Use SimpleContent

Define complexType with simpleContent. SimpleContent can use extension/restriction element to

increase/reduce scope of base type of the element. Create an element of defined complexType using
type attribute.

Use ComplexType alone

Define an element of complexType with the required attribute element only.

<xs:string> data type

The <xs:string> data type can take characters, line feeds, carriage returns, and tab characters. The
XML processor does not replace line feeds, carriage returns, and tab characters in the content with
space and keep them intact. For example, multiple spaces or tabs are preserved during display.

<xs:integer> data type

The <xs:integer> data type is used to represent integer values.

XSD - Complex Mix Element

Complex Mix Element can have text and attribute and elements. See the following example −

Use mixed=true
Define complexType with attribute "mixed" set to true. "mixed" attribute allow to have character
data between elements.

Use ComplexType alone

Define an element of complexType with the required attribute element only.

XSD - Complex Indicators

Indicators control the way how elements are to be organized in an XML document. There are seven
types of indicators, falling into three broad categories.

Order Indicators

All − Child elements can occur in any order.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Choice − Only one of the child element can occur.
Sequence − Child element can occur only in specified order.

Occurence Indicators

maxOccurs − Child element can occur only maxOccurs number of times.

minOccurs − Child element must occur minOccurs number of times.

Group Indicators

Group − Defines related set of elements.

attributeGroup − Defines related set of attributes.

Program Code:

XSD:

<?xml version="1.0"?>

<description>
Some recipes used for the xml tutorial.
</description>

<title>Fried Rice</title>
<ingredient name="rice" amount="2" unit="4"/>
<ingredient name="salt" amount="0.5" unit="3"/>

<preparation>
<step>Preheat a large skillet or wok to medium heat. Pour sesame oil in the bottom. </step>
<step>Slide the onion, peas and carrots to the side, and pour the beaten eggs onto the other side.
Using a spatula, scramble the eggs.</step>
<step>Add the rice to the veggie and egg mixture. Pour the soy sauce on top.</step>
</preparation>

<comment>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae ipsum perferendis ducimus
corrupti est eius. Repudiandae nihil nisi perspiciatis consequatur culpa suscipit laborum velit
corporis, perferendis dolorum modi ipsam! Rerum velit reiciendis fugiat beatae. Maxime mollitia
eaque ea nam voluptatem libero, nobis accusantium pariatur sed aliquid odit minima quae officiis.
</comment>

<nutrition protein="4.7g" carbohydrates="31g" calories="163" alcohol="0" fat="2.3g"/>

</recipe>
</collection>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

XML:

<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" >
<xs:element name="collection">
<xs:complexType>
<xs:sequence>
<xs:element name="description" type="xs:string"></xs:element>
<xs:element name="recipe">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string"></xs:element>
<xs:element name="ingredients">
<xs:complexType>
<xs:attribute name="name" type="xs:string"></xs:attribute>
<xs:attribute name="amount" type="xs:integer"></xs:attribute>
<xs:attribute name="unit" type="xs:integer"></xs:attribute>
</xs:complexType>
</xs:element>
<xs:element name="preparation">
<xs:complexType>
<xs:sequence>
<xs:sequence>
<xs:element name="step" type="xs:string" maxOccurs="3"></xs:element>
</xs:sequence>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name="comment" type="xs:string"></xs:element>
<xs:element name="nutrition">
<xs:complexType>
<xs:attribute name="protein" type="xs:string"></xs:attribute>
<xs:attribute name="carbohydrates" type="xs:string"></xs:attribute>
<xs:attribute name="calories" type="xs:string"></xs:attribute>
<xs:attribute name="alcohol" type="xs:string"></xs:attribute>
<xs:attribute name="fat" type="xs:string"></xs:attribute>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output:

Result analysis:

A XSD and XML is designed for preparation of a recipe. Title, ingredients, steps are defined.
Multiple steps are used to describe the process. Comment and nutrition are also added.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Week no: 04 Date: 04-04-2022

Aim of the program:

To display a multiplication table.

Description:

The <script> Tag

In HTML, JavaScript code is inserted between <script> and </script> tags.

JavaScript Functions and Events

A JavaScript function is a block of JavaScript code, that can be executed when "called" for.
For example, a function can be called when an event occurs, like when the user clicks a button.

JavaScript in <head> or <body>

You can place any number of scripts in an HTML document.

Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of an HTML page.

The function is invoked (called) when a button is clicked.

JavaScript Identifiers

All JavaScript variables must be identified with unique names.

These unique names are called identifiers.

Identifiers can be short names (like x and y) or more descriptive names (age, sum, totalVolume).

The general rules for constructing names for variables (unique identifiers) are:

Names can contain letters, digits, underscores, and dollar signs.

Names must begin with a letter.
Names can also begin with $ and _ (but we will not use it in this tutorial).
Names are case sensitive (y and Y are different variables).
Reserved words (like JavaScript keywords) cannot be used as names.

JavaScript Variables

In a programming language, variables are used to store data values.

JavaScript uses the keywords var, let and const to declare variables.

An equal sign is used to assign values to variables.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Program Code:

<title>Multiplication Table</title>

var rows = prompt("Enter number of rows");

var cols = prompt("Enter number of coloumns");

if(rows == "" || rows == null)

rows = 5;

if(cols== "" || cols== null)

cols = 5;

createT(rows, cols);

function createT(rows, cols)

{
var j=1;
var output = "<table bgcolor='grey' border='1' width='500' cellspacing='1' cellpadding='6'>";

for(i=1;i<=rows;i++)
{
output = output + "<tr>";
for(j=1;j<=cols;j++)
output = output + "<td>" + i*j + "</td>";
output = output + "</tr>";
j = 1;
}

output = output + "</table>";

document.write(output);
}

</script>

</head>

</html>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output:

Result analysis:

Multiplication table is created which contains provided number of rows and columns where each
cell of table contains the product of row and column elements.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Aim of the program:

To create a simple calculator using javascript.

Description:

JavaScript Operators:

1. Arithmetic Operators: +,-, *,/,%, **.

2. Comparison Operators: <=, >, >=, ==, !=, ===, !==

3. Logical Operators: && AND , || OR , ! Not

4. Conditional operator: variable_name=(condition)?value1:value2.

5. String operator: + is used for concatenating a string

if statement
The if statement is the fundamental control statement that allows JavaScript to make decisions and
execute statements conditionally.

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.

if...else if... 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.

The 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.

The do...while Loop

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.

The 'for' loop

It 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.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Program Code:

<html>
<head>
<style>.container {

border: 1px solid #cccccc;

box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75);

border-radius: 20px;

position: absolute;

top: 55%;

left: 50%;

transform: translate(-50%, -50%);

width: 450px;

height: 400px;

.keys {

display: grid;

grid-template-columns: repeat(4, 1fr);

grid-gap: 10px;

padding: 10px;

margin:auto;

.button {

height: 60px;

padding: 5px;

background-color: #fff;

border-radius: 3px;

border: 1px solid #c4c4c4;

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

background-color: transparent;

font-size: 2rem;

color: #333;

background-image: linear-gradient(to bottom, transparent, transparent 50%, rgba(0,0,0,.04));

box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 0 rgba(255,255,255,.45),

inset 0 -1px 0 0 rgba(255,255,255,.15), 0 1px 0 0 rgba(255,255,255,.15);

text-shadow: 0 1px rgba(255,255,255,.4);

.operator {

color: #fff;

background-color: #a19a82;

.clear {

background-color: #a88283;

border-color: #857c7c;
text-align: center;
color: #fff;
font-size: 20px;
width: 220px;

height: 62px;
padding: 20px;

margin: auto;

margin-bottom: 10px;

.equal-sign {

background-color: #466471;

border-color: #383b3c;

color: #fff;

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

}

.screen{

background-color:rgb(190, 227, 236);

justify-content: left;

color: black;

font-size: medium;

width: 100%;

height: 50%;

cursor: default;

padding: 20px;

padding-left: 40%;

margin: auto;
margin-bottom: 10px;
}</style>
<script>
function display(val){
document.getElementById('result').value += val
return val
}
function solve(){
let x = document.getElementById('result').value
let y = eval(x);
document.getElementById('result').value = y
return y
}
function clearScreen(){
document.getElementById('result').value = '
}
</script>
</head>
<body>
<h1 style="text-align:center">Calculator</h1>
<div class="container">
<br>
<table>
<tr>
<td colspan="3"><input type='text' id='result' class ='screen' style="text-align: right;"></td>
<td><input type='button' value = 'Clear' onclick="clearScreen()" class="clear"/></td>
</tr>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

</table>
<div class="keys">
<input type="button" value="7" class="button" onClick="display('7')"></input>
<input type="button" value="8" class="button " onClick="display('8')"></input>
<input type="button" value="9" class="button" onClick="display('9')"></input>
<input type="button" value="/" class="operator" onClick="display('/')"></input>
<input type="button" value="4" class="button" onClick="display('4')"></input>
<input type="button" value="5" class="button" onClick="display('5')"></input>
<input type="button" value="6" class="button" onClick="display('6')"></input>
<input type="button" value="*" class="operator" onClick="display('*')"></input>
<input type="button" value="1" class="button" onClick="display('1')"></input>
<input type="button" value="2" class="button" onClick="display('2')"></input>
<input type="button" value="3" class="button" onClick="display('3')"></input>
<input type="button" value="-" class="operator" onClick="display('-')"></input>
<input type="button" value="0" class="button" onClick="display('0')"></input>
<input type="button" value="." class="button" onClick="display('.')"></input>
<input type="button" value= "=" class="button equal-sign" onClick="solve()"></input>
<input type="button" value="+" class="operator" onClick="display('+')"></input>
</div>
</div>
</body>

Output:

Result analysis:

A simple calculator is created with simple operators, clear bar and an equating button along with a
screen.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Aim of the program:

To generate a pizza order form.

Description/algorithm:

Arrays
• An array is a special variable, which can hold more
than one value, at a time.
• Defined in two ways
1. var color = ["red", "yellow", "green", "blue"];
2. var color =new Array("red", "yellow", "green", "blue");

JavaScript Display Possibilities

JavaScript can "display" data in different ways:

Writing into an HTML element, using innerHTML.

Writing into the HTML output using document.write().
Writing into an alert box, using window.alert().

Using innerHTML

To access an HTML element, JavaScript can use the document.getElementById(id) method.

Using document.write()

The id attribute defines the HTML element. The innerHTML property defines the HTML content.
Using document.write() after an HTML document is loaded, will delete all existing HTML.
The document.write() method should only be used for testing.

Using window.alert()

You can use an alert box to display data

You can skip the window keyword.

In JavaScript, the window object is the global scope object, that means that variables, properties,
and methods by default belong to the window object. This also means that specifying the window
keyword is optional.

External JavaScript

Scripts can also be placed in external files:

External scripts are practical when the same code is used in many different web pages.

JavaScript files have the file extension .js.

To use an external script, put the name of the script file in the src (source) attribute of a <script> tag

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Program Code:

<html>
<head>
<title>Pizza form</title>
</head>
<body>

<h3>Pizza Order Form</h3>

<br/>
<table border='4'>
<tr>
<td><h5>Item name</h5></td>
<td><h5>Price</h5></td>
<td><h5>Quantity</h5></td>
</tr>
<tr>
<td>Chicken Pizza</td><td>100</td><td><input type="text" value="0" id="cp"></td></tr>
<tr>
<td>Paneer Pizza</td><td>80</td><td><input type="text" value="0" id="pp"></td></tr>
<tr><td>Veg Pizza</td><td>70</td><td><input type="text" value="0" id="vp"></td></tr>
</table>
<p>Click the button to submit</p>
<button onclick="total();">Submit</button>
<p>Total cost:</p>
<p id="tot"></p>
<script>
function total()
{

let a = document.getElementById("cp").value;
let b = document.getElementById("pp").value;
let c = document.getElementById("vp").value;
let t = a*100 + b*80 + c*70;
document.getElementById("tot").innerHTML=t;

}
function conf() {
alert("Order confirmed!");
}
function canc() {
alert("Order canceled!");
}
</script>

<button onclick="conf()">Confirm</button>
<button onclick="canc()">Cancel</button>
</body>
</html>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output:

Result analysis:

A pizza order form is created which takes input the quantities of items and total cost is displayed.
The order can be confirmed or cancled.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Week no: 08 Date: 09-05-2022

Aim of the program:

To validate an email.

Description:

JavaScript Regex

In JavaScript, a Regular Expression (RegEx) is an object that describes a sequence of characters used for
defining a search pattern.

MetaCharacters

Metacharacters are characters that are interpreted in a special way by a RegEx engine. Here's a list of
metacharacters:

[] . ^ $ * + ? {} () \ |

[] - Square brackets: Square brackets specify a set of characters you wish to match.

You can complement (invert) the character set by using caret ^ symbol at the start of a square-
bracket.

[^abc] means any character except a or b or c.

[^0-9] means any non-digit character.

. - Period: A period matches any single character (except newline '\n').

+ - Plus: The plus symbol + matches one or more occurrences of the pattern left to it.

? - Question Mark: The question mark symbol ? matches zero or one occurrence of the pattern left to it.

{} - Braces: Consider this code: {n,m}. This means at least n, and at most m repetitions of the pattern left
to it.

| - Alternation: Vertical bar | is used for alternation (or operator).

()- Group: Parentheses () is used to group sub-patterns. For example, (a|b|c)xz match any string that
matches either a or b or c followed by xz

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Program Code:

<h2>Enter email :<input type="text" id="email"></input></h2>

<button onclick="ValidateEmail()">SUBMIT</button>

</body>
</html>

Output:

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Result analysis:

Email is validated using regular expression in javascript. Input data is validated by storing it in a
variable.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Aim of the program:

To validate a registration form.

Description:

\ - Backslash

Backslash \ is used to escape various characters including all metacharacters. For example,

\$a match if a string contains $ followed by a. Here, $ is not interpreted by a RegEx engine in a special
way.

Special Sequences

Special sequences make commonly used patterns easier to write. Here's a list of special
sequences:

\A - Matches if the specified characters are at the start of a string.

\b - Matches if the specified characters are at the beginning or end of a word.

\B - Opposite of \b. Matches if the specified characters are not at the beginning or end of a
word.

\d - Matches any decimal digit. Equivalent to [0-9]

\D - Matches any non-decimal digit. Equivalent to [^0-9]

\s - Matches where a string contains any whitespace character. Equivalent to [ \t\n\r\f\v].

\S - Matches where a string contains any non-whitespace character. Equivalent to [^

\t\n\r\f\v].

\w - Matches any alphanumeric character (digits and alphabets). Equivalent to [a-zA-Z0-9_]. By

the way, underscore _ is also considered an alphanumeric character.

\W - Matches any non-alphanumeric character. Equivalent to [^a-zA-Z0-9_]

\Z - Matches if the specified characters are at the end of a string.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Program Code:

<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<script>
function fun(){
var nam=document.getElementById("Username").value;

if(nam==null||nam.length<8)
{alert("Enter username with minimum 8 characters") }
var p1=document.getElementById("Password").value;
var p2=document.getElementById("ConfirmPassword").value;
var v=/^[A-Za-z]\w{7,14}$/;
var t=/\W+/;
var d=/\d+/;
if(!(p1.match(v)||p1.match(t)||p1.match(d)))
alert("Invalid password!");
if(p1!=p2)
alert("Password is'nt same");
var e =document.getElementById("email").value;
var y =/^[a-z]{1,20}\d{2}\@[a-z]{2,10}\.[a-z]{3}$/;
if(!e.match(y))
alert("Invalid email!");
var n=document.getElementById("PhoneNumber").value;
if(n.length<8)
alert("Invalid phone number");

var d1=document.getElementById("dd").value;
var x=/^\d{2}\/\d{2}\/\d{4}/;
if(!d1.match(x))
alert("Invalid date!");

}
</script>
</head>
<body>
<center><h1>Registration Form</h1></center>
<form onsubmit="fun()">
<center>
<table bgcolor="beige" cellspacing="15">
<tr>
<td> Username :</td>
<td> <input type="text" placeholder="Enter Username" id="Username" size="30" /></td>
</tr>
<tr>
<td> Password :</td>
<td> <input type="text" id="Password" placeholder="Enter Password"size="30" /></td>
</tr>
<tr>
<td> Confirm Password :</td>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

<td> <input type="text" id="ConfirmPassword" placeholder="Reenter Password" size="30"
/></td>
</tr>
<tr>
<td> Mother's Name : </td>
<td> <input type="text" name="Mother's Name" size="30"/></td>
</tr>
<tr>
<td> Father's Name :</td>
<td> <input type="text" name="Father's Name" size="30"/></td>
</tr>
<tr>
<td> Email :</td>
<td> <input type="text" id="email" placeholder="[email protected]"
size="30" /></td>
</tr>
<tr>
<td> Phone Number :</td>
<td> <input type="text" id="PhoneNumber" placeholder="XXXXXXXXXX" size="30" /></td>
</tr>
<tr>
<td> Gender :</td>
<td>
<input type="radio" name="Gender" value=1/>Male
<input type="radio" name="Gender" value=1/>Female
<input type="radio" name="Gender" value=1/>Other
</td>
</tr>
<tr>
<td> Date of Birth :</td>
<td> <input type="text" id="dd" placeholder="dd/mm/yyyy" size="8"/></td>
</tr>
<td> Address :</td>
<td> <textarea name="Address" id="Address" rows="2" cols="28"/></textarea></td>
</tr>
<tr>
<td> Department :</td>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

<option value="B+">B+</option>
<option value="B-">B-</option>
<option value="AB+">AB+</option>
<option value="AB-">AB-</option>
<option value="O+">O+</option>
<option value="O-">O-</option>
</select>
</td>
</tr>
<tr>
<td> Course :</td>

<td align="right"><input type="submit" value="Submit" ></td>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output:

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Result analysis:

Inputs from a registration form are validated using regular expression in javascript. Input data is
validated by storing it in a variable.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Week no: 09 Date: 30-05-2022

Aim of the program:

Create dynamic content using javascript.

Description:

Javascript is also used to make XHTML document dynamic after the document being displayed by
browser.

• Dynamic document is also called dynamic XHTML

• Dynamic XHTML= XHTML+CSS+java script

• By using javascript we can change tag attributes, tag content or css properties of an xhtml
elements

• Content of elements are changed dynamically i.e changes can be made after the document has
been being displayed.

Dynamic Content with JavaScript

• By using java script we can change the content of the different elements document like content
of text box and content of the table dynamically.

• In this example we adding rows to a table dynamically.

• Each table element contains a rows array and methods for inserting and deleting rows:
insertRow() and deleteRow().

• Each tr element contains a cells array and methods forinserting and deleting cells: insertCell()
and deleteCell().

With this document object model javascripts can change static to dynamic and change style of the
html page.

• Java script uses document object to access and manipulate any html element.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Program Code:

function addRow(tableId, cells){

var tabEle = document.getElementById(tableId);

var newRow = tabEle.insertRow(tabEle.rows.length);
var newCell;var newCell;

for (var i = 0; i < cells.length; i++) {

newCell = newRow.insertCell(newRow.cells.length);
newCell.innerHTML = cells[i];
}
return newRow;
}

</script>
<body>

First Name: <input type="text" name="FirstName">

Middle Name: <input type="text" name="MiddleName">
Last Name: <input type="text" name="LastName">

<input type="button" value="Add Name"

onclick= "addRow('tblPeople',[this.form.FirstName.value,this.form.MiddleName.value,
this.form.LastName.value]);">

</center>
<hr>
<table id="tblPeople" border="1">
<tr>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
</tr>
</table>
</form>
</body>
</html>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output:

Result analysis:

A dynamic table is created which takes the values provided through the text inputs using onclick
event.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Aim of the program:

Moving an image to a specified position using javascript.

Description:

Positioning elements

• By default, elements flow one after another in the same order as they appear in the HTML source,
with each element having a size and position that depends on the type of element, the contents of the
element, and the display context for the element as it will render on the page.

• Position any element anywhere in the display of a document.

• It usually involves using JavaScript to change a positioning style properties of an HTML elements.
position, top, left are the three properties that dictate the position of the elements.

• position specifies the reference point for the placement of the elements.

• top and left specify the distance from top and left of reference point where element is to appear.

• absolute, relative and static are the three possible values for the position
property.

Absolute positioning
• A element can be placed at specific position in the document using absolute value for the position
styling property

• With absolute positioning elements are placed without regard to the positions of other elements.
For example, if you want place an image 100 pixels from the top and 100 pixels from the left of the
documentdisplay window, it can be placed as following statements:
<img src="earth.jpg" style="position:absolute; left:100px; top:100px" />

• Can be used superimpose text over the ordinary text to create effect similar that watermark on
page.

Relative positioning
• The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's
LEFT position. • Make the text superscript and subscript • Default positioning is static

Moving elements
• Xhtml element whose position property is set to either absolute or relative can be moved.
• Change the left and top values also move the element to a specified position.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Program Code:

<script type="text/javascript" >

function moveIt(mov,newTop,newLeft)
{
var x=document.getElementById(mov).style;

x.top=newTop+"px";
x.left=newLeft+"px";
}

</script>
<body>
<form action="">
<p>

<label>
x coordinate:

<input type="text" id="top" size="3"/>

</label>

<label>
y coordinate:

<input type="text" id="left" size="3"/>

</label>
<br/>
<hr>

<input type="button" value="Set"

onclick="moveIt('image',document.getElementById('top').value,document.getElementById('left').va
lue)"/>

</p>
</form>

<div id="image" style="position:absolute;top:100px;left:0px">

<img src="image.jpg" alt="not displayed" height="100" width="100"/>

</div>
</body>
</html>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output:

Result analysis:

An image is moved dynamically according to the given coordinates.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Aim of the program:

When a mouse is placed over a text, change text color to green when mouse moved out from text
change text color to Red.

Description:

Event handling in java script

• Java script detect certain events performed on the browser and
browser user and provide computation reactions when event
occurred.
• These computations are called event driven programming.
• Event is generate when user clicks on any html element with which
java script should react.
• Event handler is a script that is implicitly executed in response to the
appearance of event.

Events are handled in two ways

1. Used as tag attribute
2. Using addEventListener() method

- element.addEventListener(eventobject, funtionname)

Program Code:

<!DOCTYPE html>
<html>
<body>
<h1 onmousedown="style.color='green'"
onmouseup="style.color='red'">Text</h1>
</body>
</html>

Output:

Result analysis:

Text color of specified object is changed with mouse interaction.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Aim of the program:

When the mouse is moved on the screen display the mouse coordinates(X and Y coordinates).

Description:

Locating mouse cursor

• Event is a notification about the something happened on browser due to user actions.

• Event is an object created implicitly by the browser and javascript

has to response to the something happened.

• Every event that generated on XHTML document creates an event object. This object has
information about the event.

• A mouse click event has MouseEvent interface, which has two properties that provides
geometric coordinates of the position of the element in the display that created the event.

• Pair of propeties are clientX and clientY.

• These coordinates are relative to the upper left corner of the browser display window.

• Other pair of coordinates are relative to the computer screen which

are screenX and screen

onclick Event Type:

when a user clicks mouse left button.

You can put your validation, warning etc against this event
type.

onsubmit event type:

This event occurs when you try to submit a form. So you can put your form validation against this
event type.

onReset event:

- this event occurs when you try to reset the form.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Program Code:

<!DOCTYPE html>
<html>
<body>

<table border="5" cellpadding="50" onclick="showCoords(event)">

<th>Click inside table to get the x (horizontal) and y (vertical) coordinates of the mouse pointer
when it was clicked.</th>

</table>

<p><strong>Tip:</strong> Try to click different places in the table.</p>

function showCoords(event) {

var x = event.clientX;

var y = event.clientY;

var coords = "X coords: " + x + ", Y coords: " + y;

document.getElementById("demo").innerHTML = coords;
}

</script>

Output:

Result analysis:

The coordinates of the position are generated while the mouse moves through out the specified area.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2
Week no: 10 Date: 04-06-2022

Installation of Django

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2
Week no: 10 Date: 04-06-2022

Aim of the program: To install Django on ubuntu and run server.

Description:

# installation of pip
sudo apt-get install python3-pip
#install virtual env
sudo pip3 install virtualenv
#create virtual environment
virtualenv Demo
# activate virtual Demo
cd Demo/bin - go to folder Demo/bin
source activate
# django installation
sudo apt install python3-django
#check django version
sudo django-admin --version
#create django project
sudo django-admin startproject myproject
# run server
sudo python3 manage.py runserver

Procedure:

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output:

Result analysis:

Django is successfully installed, virtual environment is created, project is created and run
successfully.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

2.
Aim of the program: Create Django application to send Welcome message as response.

Description:

1. init .py: if any folder contains this file will be considered as a python package.

2. settings.py: all project related settings and configurations will be specified like database
configurations, installed apps and middleware configurations.

3. urls.py: specifies what are the urls are required to access particular page in web applications

4. wsgi.py: web server gateway interface. Used when application is deployed in online web servers.

5. asgi.py: Asynchronous server gateway interface. Communicates with web server and web
application.

6. manage.py: to create, start app, run servers.

Program code:

Urls.py

from django.contrib import admin

from django.urls import path
from wApp1 import views
from django.urls import re_path as url

urlpatterns = [
path('admin/', admin.site.urls),url(r'^greetings/',views.display),
]

views.py

from django.shortcuts import render

from django.http import HttpResponse

# Create your views here.

def display(request):
hello='<h1>Welcome</h1>'
return HttpResponse(hello)

settimgs.py

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles', 'wApp1'
]

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output:

Result analysis:

An application is started successfully and Welcome message is sent as response.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Aim of the program: To create virtual evnvironment for django and develop django application to
display current date and time.

Description:

The datetime module supplies classes for manipulating dates and times.

While date and time arithmetic is supported, the focus of the implementation is on efficient attribute
extraction for output formatting and manipulation.

Create application in project

1. Goto project folder like myproject

2. python manage.py startapp webApp1

Execute your first Django application

Activity1- settings.py

Add your app name to INSTALLED_APPS.

Activity2- views.py

Add required code of a function returning argument to HttpResponse.

Activity3- urls.py

Add url to urlpattrens for the required view.

Activity4
Start server: python manage.py runserver
Send request: http://127.0.0.1:8000/

Program code:

Urls.py

from django.contrib import admin

from django.urls import path
from wApp1 import views
from django.urls import re_path as url

urlpatterns = [
path('admin/', admin.site.urls),url(r'^date/',views.d),
]

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

views.py

from django.shortcuts import render

from django.http import HttpResponse
import datetime
# Create your views here.
def d(request):

date=datetime.datetime.now()
#display time
s='<h1>The Current Date and Time is :'+str(date)+'</h1>'
return HttpResponse(s)

Output:

Result analysis:

Date and time are successfully returned as http response.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Aim of the program: To create an application with multiple views

Description:

Role of web server

1. Web server provides environment to run web applications
2. Web server process request send by user.
3. Django framework is responsible to provide development
server. Even Django framework provides one builtin database
sqlite.
Note: Once we started Server a special database file will be
created in our project folder structure named db.sqlite3
We can configure our own web servers (tomcat server, lighttpd)
and databases also.

Creating view:

● First, we import the class HttpResponse from the django.http module, along with Python’s
datetime library.
● Next, we define a function called. This is the view function. Each view function takes an
HttpRequest object as its first parameter, which is typically named request.
● The view returns an HttpResponse object that contains the generated response. Each view
function is responsible for returning an HttpResponse object.

Program code:

views.py

from django.shortcuts import render

from django.http import HttpResponse
import datetime
# Create your views here.
def display(request):
hello='<h1>Welcome</h1>'
return HttpResponse(hello)

def d(request):

date=datetime.datetime.now()
#display time
s='<h1>The Current Date and Time is :'+str(date)+'</h1>'
return HttpResponse(s)

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Urls.py

from django.contrib import admin

from django.urls import path
from wApp1 import views
from django.urls import re_path as url

urlpatterns = [
path('admin/', admin.site.urls),url(r'^greetings/',views.display)url(r'^date/',views.d),
]

Output:

Result analysis:

Multiple views are successfully created by defining multiple functions in views.py. Hence multiple
urls are returned when we run the server.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Week no: 10 Date: 13-06-2022

Aim of the program: To develop an application to wish your friend based on the time like good
morning, good afternoon and good evening using templates and also display an image in the same
application using static folder.

Description:

Django Templates

Django provides a convenient way to generate dynamic HTML pages by using its template system.

A template consists of static parts of the desired HTML output as well as some special syntax
describing how dynamic content will be inserted.
Tags
In a template, Tags provide arbitrary logic in the rendering process. For example, a tag can output
content, serve as a control structure e.g. an "if" statement or a "for" loop, grab content from a
database etc.

Static files

Static files include stuff like CSS, JavaScript and images that you may want to serve alongside your
site.
Django also provides a mechanism for collecting static files into one place so that they can be
served easily. Using the collectstatic command, Django looks for all static files in your apps and
collects them wherever you told it to, i.e. the STATIC_ROOT. In our case, we are telling Django
that when we run python manage.py collectstatic, gather all static files into a folder called staticfiles
in our project root directory. This feature is very handy for serving static files, especially in
production settings.

Program code:

wish.html:
<html>
<head>
<title>Greeting Message using JavaScript</title>
</head>
<body>
<label id="lblGreetings"></label>
<p>{% load static %}
<img src="{%static 'image/wish.jpg' %}"/></p>
</p>
</body>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

var greet;

if (hrs < 12)

greet = 'Good Morning';
else if (hrs >= 12 && hrs <= 17)
greet = 'Good Afternoon';
else if (hrs >= 17 && hrs <= 24)
greet = 'Good Evening';

document.getElementById('lblGreetings').innerHTML =
'<b>' + greet + '</b>';
</script>
</html>

Views.py:
from django.shortcuts import render
from django.http import HttpResponse
from django.template import loader
# Create your views here.
#from django.http import HttpResponse
def G(request):
template = loader.get_template('wish.html') # getting our template
return HttpResponse(template.render())

Output:

Result analysis:

An application to wish your friend based on the time like good morning, good afternoon and good
evening using templates and also image is displayed using static folder in same application.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Week no: 11 Date: 20-06-2022

Aim of the program: To develop an application to create a student

form(rollno,name,marks,feedback) and save data in data base using django and display the student
table in sorted order based on marks in browser.

Description:

Django Forms
Forms are basically used for taking input from the user in some manner and using that information
for logical operations on databases. For example, Registering a user by taking input as his name,
email, password, etc.
Django maps the fields defined in Django forms into HTML input fields. Django handles three
distinct parts of the work involved in forms:
• preparing and restructuring data to make it ready for rendering
• creating HTML forms for the data
• receiving and processing submitted forms and data from the client

Creating a Django Form

Creating a form in Django is completely similar to creating a model, one needs to specify what
fields would exist in the form and of what type. For example, to input, a registration form one might
need First Name (CharField), Roll Number (IntegerField), and so on.

Syntax:
from django import forms
class FormName(forms.Form):
# each field would be mapped as an input field in HTML
field_name = forms.Field(**options)

Render Django Forms

A form comes with 3 in-built methods that can be used to render Django form fields.
• {{ form.as_table }} will render them as table cells wrapped in <tr> tags
• {{ form.as_p }} will render them wrapped in <p> tags
• {{ form.as_ul }} will render them wrapped in <li> tags

To render this form into a view, move to views.py and create a view.
In view, one needs to just create an instance of the form class created above in forms.py.

Create Django Form from Models

Django ModelForm is a class that is used to directly convert a model into a Django form.

Django Form Validation

Django provides built-in methods to validate form data automatically. Django forms submit only if
it contains CSRF tokens. It uses uses a clean and easy approach to validate data.
The is_valid() method is used to perform validation for each field of the form, it is defined in
Django Form class. It returns True if data is valid and place all data into a cleaned_data attribute.
Django form cleaned_data

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

form. cleaned_data returns a dictionary of validated form input fields and their values, where string
primary keys are returned as objects. form. data returns a dictionary of un-validated form input
fields and their values in string format (i.e. not objects)
Program code:

Models.py

from django.db import models

# Create your models here.
class Feedback(models.Model):
Rollno=models.IntegerField()
Name=models.CharField(max_length=40)
Marks=models.FloatField()
Feedback=models.CharField(max_length=30)

Views.py

from django.shortcuts import render

from .import forms
# Create your views here.
def fD(request):
form = forms.Ff()
if request.method=='POST':
form = forms.Ff(request.POST)
if form.is_valid():
form.save(commit=True)
return render(request,'input.html',{'form':form})

admin.py

from django.contrib import admin

from modelapp.models import Feedback
from . import models
# Register your models here.
class Fa(admin.ModelAdmin):
list_display=('Rollno','Name','Marks','Feedback')
l=['Rollno','Name','Marks','Feedback']
ordering=['-Marks']
admin.site.register(Feedback,Fa)

forms.py

from django import forms

from modelapp.models import Feedback
class Ff(forms.ModelForm):
class Meta:
model=Feedback
fields=' all '

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output:

Result analysis:

Student details are taken from the form and displayed in sorted order in the database.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Aim of the program: To develop an application to create a photo gallery using Bootstrap.

Description:

Bootstrap is the most popular HTML, CSS and JavaScript framework for developing a responsive
and mobile friendly website.
It includes HTML and CSS based design templates for typography, forms, buttons, tables,
navigation, modals, image carousels and many others.

For the bootstrap feature first, add CSS CDN to the webpage

1. Create a container with class container-fluid to cover the full width of the webpage.

2. Create a container with class jumbotron for Gallary heading and extra information

3. Now we will have a row container which will have column cells that will have a span of 12
for extra smaller devices, 6 for smaller devices, 4 for medium devices, and 3 for large or extra-large
devices. And each of these cells contains a figure element with an image and figure caption inside
it.

4. So create a div container with the class row.

5. Inside row create cells with class col-sm-6, col-md-4, and col-lg-3.

6. Now each of these cells contains a figure element with an image inside having class img-
thumbnail and grayscale.

7. Add CSS filter property for grayscale class so that it has filter: grayscale(50%) when the
mouse is over the image.

Grid Classes:

There are four classes in Bootstrap Grid System:

• xs (for phones)
• sm (for tablets)
• md (for desktops)
• lg (for larger desktops)

Creating a Bootstrap Grid:

Create a row (<div class="row">).

Add the number of columns, you want in the grid (tags with appropriate .col-*-* classes).
Note that numbers in .col-*-* should always add up to 12 for each row.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Program code:

<!DOCTYPE html>

<title>Photo gallery</title>
<h1 class="text-center">Photo gallery</h1>

</style>

</head>

<body>

<div class="col-sm-6 col-md-4 col-lg-3">

</figure>
</div>

<div class="col-sm-6 col-md-4 col-lg-3">

<figure>
<img src="https://images.unsplash.com/photo-1477346611705-
65d1883cee1e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8bW91bnRhaW5zfGVufDB8fDB8fA

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60" class="img-thumbnail
grayscale">

</figure>
</div>

<div class="col-sm-6 col-md-4 col-lg-3">

<div class="col-sm-6 col-md-4 col-lg-3">

</figure>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<figure>
<img src="https://images.unsplash.com/photo-1519681393784-
d120267933ba?ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8bW91bnRhaW5zfGVufDB8fDB8fA
%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60" class="img-thumbnail
grayscale">

</figure>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<figure>
<img src="https://images.unsplash.com/photo-1486870591958-
9b9d0d1dda99?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8bW91bnRhaW5zfGVufDB8fDB8f
A%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60" class="img-thumbnail
grayscale">

</figure>
</div>
</div>
</body>
</html>

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output:

Result analysis:

A photo gallery is created using bootstarp grid system.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Aim of the program: To develop django application to find no of times user visited a web site.

Description:

Django Cookie:A cookie is a small piece of information which is stored in the client browser. It is
used to store user's data in a file permanently (or for the specified time).
Cookie has its expiry date and time and removes automatically when gets expire. Django provides
built-in methods to set and fetch cookie.

The set_cookie() method is used to set a cookie and get() method is used to get the cookie.
The request.COOKIES['key'] array can also be used to get cookie values.

Program code:

Admin.py:

from django.contrib import admin

from django.urls import path
from django.urls import re_path as url
from count import views as v3
urlpatterns = [path('admin/', admin.site.urls),
path('hello/',v1.hello)
,path('date/',v2.date_view)
,path('times',v3.count_requests)]

Count.html

<html>
<body>
<h1>page count: {{count}}</h1>
</body>
</html>

Views.py

from django.shortcuts import render

from django.http import HttpResponse

# Create your views here.

def count_requests(request):
if 'count' in request.COOKIES:
newcount=int(request.COOKIES['count'])+1
else:
newcount=1
response=render(request,'count.html',{'count':newcount})
response.set_cookie('count',newcount)
return response

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Output:

Result analysis:

The number of times a user visits a webpage is counted by cookies methods and displayed it on the
same webpage using templates in Django.

Name: Adhikya Edammala Roll no: 160120733061 Section: Cse2

Week no: 11 Date: 20-05-2022

1.
Aim:Develop an application to create a student form(rollno, name,marks,feedback) and
save data in data base using django and display the student table in sorted order based
on marks in browser.

Description:
Django Forms
Forms are basically used for taking input from the user in some manner and using that
information for logical operations on databases. For example, Registering a user by
taking input as his name, email, password, etc.
Django maps the fields defined in Django forms into HTML input fields. Django handles
three distinct parts of the work involved in forms:
• preparing and restructuring data to make it ready for rendering
• creating HTML forms for the data
• receiving and processing submitted forms and data from the client

Creating a Django Form

Creating a form in Django is completely similar to creating a model, one needs to specify
what fields would exist in the form and of what type. For example, to input, a
registration form one might need First Name (CharField), Roll Number (IntegerField),
and so on.

Syntax:
from django import forms
class FormName(forms.Form):
# each field would be mapped as an input field in HTML
field_name = forms.Field(**options)

Render Django Forms

To render this form into a view, move to views.py and create a view.
In view, one needs to just create an instance of the form class created above in
forms.py.

Create Django Form from Models

Django ModelForm is a class that is used to directly convert a model into a Django form.

Django Form Validation

Django provides built-in methods to validate form data automatically. Django forms
submit only if it contains CSRF tokens. It uses uses a clean and easy approach to validate
data.
The is_valid() method is used to perform validation for each field of the form, it is
defined in Django Form class. It returns True if data is valid and place all data into a
cleaned_data attribute.

Name:Tummuru Sreeni Roll No:160120733083 Section:CSE-2

Week no: 11 Date: 20-05-2022

Django form cleaned_data

form. cleaned_data returns a dictionary of validated form input fields and their values,
where string primary keys are returned as objects. form. data returns a dictionary of un-
validated form input fields and their values in string format (i.e. not objects).

Program Code:

Models.py
from django.db import models
class Feedback(models.Model):
name=models.CharField(max_length=40)
rollno=models.IntegerField()
marks=models.FloatField()
feedback=models.CharField(max_length=30)
def str (self):
return self.name

forms.py
from django import forms
from FormsApp2.models import Feedback
class FeedbackForm(forms.ModelForm):
class Meta:
model=Feedback
fields=' all '

admin.py
from django.contrib import admin
from FormsApp2.models import Feedback
# Register your models here.
class FeedbackAdmin(admin.ModelAdmin):
list_display=['name','rollno','marks','feedback']
ordering=['-marks']
admin.site.register(Feedback,FeedbackAdmin)

Views.py
from django.shortcuts import render
from . import forms
from FormsApp2.models import Feedback
def feedbackdata(request):
form=forms.FeedbackForm()
if request.method=='POST':
form=forms.FeedbackForm(request.POST)
if form.is_valid():
form.save(commit=True)
return render(request,'FormsApp2/input.html',{'form':form})

def display(request):
list=Feedback.objects.all().order_by('-marks')
my_dict={'student_list':list}

Name:Tummuru Sreeni Roll No:160120733083 Section:CSE-2

Week no: 11 Date: 20-05-2022

return render(request,'FormsApp2/result.html',context=my_dict)

input.html
<html>
<title>Student Form</title>
<body>
<h1>Registration form</h1>
<form method="POST" action="">
{{form.as_p}}
{% csrf_token %}
<input type="submit" value="send_data"/>
</form>
</body>
</html>

result.html
<html>
<body>
<h1>Student Details</h1>
{% if student_list %}
<table border="2">
<thead>
<th>Roll no</th>
<th>Student Name</th>
<th>Marks</th>
<th>Feedback</th>
</thead>
{% for s in student_list %}
<tr>
<td>{{s.rollno}}</td>
<td>{{s.name}}</td>
<td>{{s.marks}}</td>
<td>{{s.feedback}}</td>
</tr>
{% endfor %}
</table>
{% else %}
<p>No Students</p>
{% endif %}
</body>
</html>

Urls.py
from django.contrib import admin
from django.urls import path
from FormsApp2 import views as v2
urlpatterns = [
path('admin/', admin.site.urls),
path('studentform',v2.feedbackdata), path('studentdata',v2.display)]

Name:Tummuru Sreeni Roll No:160120733083 Section:CSE-2

Week no: 11 Date: 20-05-2022

Output:
http://127.0.0.1:8000/studentform

http://127.0.0.1:8000/admin

http://127.0.0.1:8000/studentdata

Result Analysis:

Student details are taken from the form and displayed in sorted order in the database.

Name:Tummuru Sreeni Roll No:160120733083 Section:CSE-2

Week no: 11 Date: 20-05-2022

2.
Aim: Develop an application to create a photo gallery using Bootstrap

Description:

Bootstrap is the most popular HTML, CSS and JavaScript framework for developing a
responsive and mobile friendly website.
It includes HTML and CSS based design templates for typography, forms, buttons, tables,
navigation, modals, image carousels and many others.

Bootstrap Grid System

The Bootstrap Grid System allows up to 12 columns across the page. You can use all 12
columns individually or you can groups the columns together to create wider columns.

Bootstrap Grid System is responsive and the columns are re-arranged automatically
according to the screen size.

Grid Classes:
There are four classes in Bootstrap Grid System:
• xs (for phones)
• sm (for tablets)
• md (for desktops)
• lg (for larger desktops)

Creating a Bootstrap Grid:

Create a row (<div class="row">).
Add the number of columns, you want in the grid (tags with appropriate .col-*-*
classes).
Note that numbers in .col-*-* should always add up to 12 for each row.

Program Code:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="bootstrap.css">
<style>
img{
height: 300px;
width: 350px;
}
</style>

Name:Tummuru Sreeni Roll No:160120733083 Section:CSE-2

Week no: 11 Date: 20-05-2022

</head>
<body>
<h1 align="center">Photo Gallery</h1>

<div class="row">
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<img src="tulips.jpg" alt="no image"/>
<img src="rose.jpg" alt="no image"/>
<img src="roseorange.jpg" alt="no image"/>
<img src="flo3.jpg" alt="no image"/>
</div>
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<img src="sunflower.jpg" alt="no image"/>
<img src="flower4.jpg" alt="no image"/>
<img src="flower3.jpg" alt="no image"/>
<img src="rrr3.jpg" alt="no image"/>
</div>
</div></body>

Output:

Result Analysis:

A photo gallery is created using bootstarp grid system

3.
Aim: Develop django application to find no of times user visited a web site

Description:

Name:Tummuru Sreeni Roll No:160120733083 Section:CSE-2

Week no: 11 Date: 20-05-2022

Django Cookie:A cookie is a small piece of information which is stored in the client
browser. It is used to store user's data in a file permanently (or for the specified time).
Cookie has its expiry date and time and removes automatically when gets expire. Django
provides built-in methods to set and fetch cookie.

The set_cookie() method is used to set a cookie and get() method is used to get the
cookie.
The request.COOKIES['key'] array can also be used to get cookie values.

Program Code:

Views.py

from django.shortcuts import render

from django.http import HttpResponse
# Create your views here.
def count_requests(request):
if 'count' in request.COOKIES:
newcount=int(request.COOKIES['count'])+1
else:
newcount=1
response=render(request,'CookiesApp/count.html',{'count':newcount})
response.set_cookie('count',newcount)
return response

urls.py
from django.contrib import admin
from django.urls import path
from CookiesApp import views as v3
urlpatterns = [
path('admin/', admin.site.urls),path('formdata/',v1.studentData),
path('studentform',v2.feedbackdata),path('count',v3.count_requests)
]

count.html
<!DOCTYPE html>
<body>
<h1>Page count : {{count}}</h1>
</body>

Output:

Name:Tummuru Sreeni Roll No:160120733083 Section:CSE-2

Week no: 11 Date: 20-05-2022

Result Analysis:

The no.of times a user visits a webpage is counted by cookies methods and displayed it
on the same webpage using templates in Django.

Name:Tummuru Sreeni Roll No:160120733083 Section:CSE-2

Future Tech (Comp) Ans Key-8 (Final)
No ratings yet
Future Tech (Comp) Ans Key-8 (Final)
31 pages
Web Technologies
No ratings yet
Web Technologies
21 pages
Web Lab Program NEW UPDATED
No ratings yet
Web Lab Program NEW UPDATED
25 pages
HTML & CSS Practical 2
No ratings yet
HTML & CSS Practical 2
16 pages
FSD - Aiml
No ratings yet
FSD - Aiml
97 pages
KRM WT Class2 HTML 17feb2024 PDF
No ratings yet
KRM WT Class2 HTML 17feb2024 PDF
51 pages
WEB TECH Lab Manual
No ratings yet
WEB TECH Lab Manual
64 pages
WT Practical File Harshita Gupta COMPLETE
No ratings yet
WT Practical File Harshita Gupta COMPLETE
84 pages
Unit III Core Concepts of HTML
No ratings yet
Unit III Core Concepts of HTML
21 pages
III B.SC - Web Technology Record 2023
No ratings yet
III B.SC - Web Technology Record 2023
53 pages
FSD Lab
No ratings yet
FSD Lab
59 pages
HTML Programs
No ratings yet
HTML Programs
15 pages
Week 1: A) Write A HTML Program, To Explain The Working of Lists
No ratings yet
Week 1: A) Write A HTML Program, To Explain The Working of Lists
50 pages
Module 2
No ratings yet
Module 2
86 pages
Web Programming HTML 1,2
No ratings yet
Web Programming HTML 1,2
32 pages
Module 6
No ratings yet
Module 6
14 pages
Web Lab Programs
No ratings yet
Web Lab Programs
41 pages
Air Liquide HandBook Nov 2020
No ratings yet
Air Liquide HandBook Nov 2020
106 pages
BBA-108-E-Commerce Unit-TWO PDF
No ratings yet
BBA-108-E-Commerce Unit-TWO PDF
50 pages
WT Lab Programs (Prog.1 - Prog.40)
No ratings yet
WT Lab Programs (Prog.1 - Prog.40)
40 pages
WD Notes Unit-II
No ratings yet
WD Notes Unit-II
23 pages
Lec3 HTML
No ratings yet
Lec3 HTML
9 pages
WPD Lab Manual
No ratings yet
WPD Lab Manual
27 pages
E-Commerce Practical File - (VICKY)
No ratings yet
E-Commerce Practical File - (VICKY)
43 pages
Full Stack File
No ratings yet
Full Stack File
36 pages
IP Record Till EXP 10 504
No ratings yet
IP Record Till EXP 10 504
82 pages
Lab Manual
No ratings yet
Lab Manual
55 pages
Lecture 2
No ratings yet
Lecture 2
42 pages
Sark Esh
No ratings yet
Sark Esh
77 pages
Module 2
No ratings yet
Module 2
60 pages
WT File (For Internal Practical)
No ratings yet
WT File (For Internal Practical)
84 pages
1 Bcom - 2 Semester - E-Commerce and Web Designing - LAB-Experiments
100% (3)
1 Bcom - 2 Semester - E-Commerce and Web Designing - LAB-Experiments
23 pages
Silo - Tips - Part A 1 Designing A Profile
No ratings yet
Silo - Tips - Part A 1 Designing A Profile
76 pages
HTML Program
No ratings yet
HTML Program
20 pages
Anshu 1
No ratings yet
Anshu 1
58 pages
Web Tech. File
No ratings yet
Web Tech. File
15 pages
Web Tech Ex 1-1
No ratings yet
Web Tech Ex 1-1
11 pages
HTML Practical
No ratings yet
HTML Practical
15 pages
ICT 8 - REVIEWER 4th
No ratings yet
ICT 8 - REVIEWER 4th
3 pages
HTML
No ratings yet
HTML
6 pages
Webch 2
No ratings yet
Webch 2
42 pages
List of Programmes For IWT Lab
No ratings yet
List of Programmes For IWT Lab
20 pages
FYBSC - CS Sem 1 Web Programming Journal
No ratings yet
FYBSC - CS Sem 1 Web Programming Journal
38 pages
HTML
No ratings yet
HTML
6 pages
Chapter 3
No ratings yet
Chapter 3
7 pages
WT Record Programs
No ratings yet
WT Record Programs
49 pages
CLAT Previous Year Question Papers With Answers
No ratings yet
CLAT Previous Year Question Papers With Answers
209 pages
Jitendra WD
No ratings yet
Jitendra WD
18 pages
CNI Practical File
0% (1)
CNI Practical File
56 pages
Day 2
No ratings yet
Day 2
12 pages
Research Proposal On Grapevine Communication
No ratings yet
Research Proposal On Grapevine Communication
17 pages
Internet and Web Technologies Lab Assignment 1 Parshva A Maniar 20BDS0058
No ratings yet
Internet and Web Technologies Lab Assignment 1 Parshva A Maniar 20BDS0058
22 pages
Name - Neeraj Singh Course - Bca V Section - C Roll Number-1921105 Subject Name - Web Development Subject Code - PBC-501
No ratings yet
Name - Neeraj Singh Course - Bca V Section - C Roll Number-1921105 Subject Name - Web Development Subject Code - PBC-501
49 pages
HTML XML Applets
No ratings yet
HTML XML Applets
26 pages
Lecture 3 - HTML - Links Table & List
No ratings yet
Lecture 3 - HTML - Links Table & List
34 pages
FSD Soft
No ratings yet
FSD Soft
9 pages
Internet and Web Technologies Lab Assignment 1
No ratings yet
Internet and Web Technologies Lab Assignment 1
7 pages
Lesson 1: HTML Lists: 1 - Arabic Numbers I - Lowercase Roman Numerals
No ratings yet
Lesson 1: HTML Lists: 1 - Arabic Numbers I - Lowercase Roman Numerals
6 pages
Internet and Web Technologies Lab Assignment 1 Parshva A Maniar 20BDS0058
No ratings yet
Internet and Web Technologies Lab Assignment 1 Parshva A Maniar 20BDS0058
11 pages
PartA Programs Full
No ratings yet
PartA Programs Full
20 pages
Estrada On Downside Risk
No ratings yet
Estrada On Downside Risk
12 pages
Fun With Mud: by Deborah Schecter
No ratings yet
Fun With Mud: by Deborah Schecter
10 pages
Isuzu FXZ26 360 Tipper
No ratings yet
Isuzu FXZ26 360 Tipper
2 pages
Macroeconomics 2Nd Edition Krugman Solutions Manual Full Chapter PDF
100% (11)
Macroeconomics 2Nd Edition Krugman Solutions Manual Full Chapter PDF
34 pages
Tetra Plate Heat Exchanger - 2020H
No ratings yet
Tetra Plate Heat Exchanger - 2020H
8 pages
PThread API Reference
No ratings yet
PThread API Reference
348 pages
Sunalign: Agri Tech
No ratings yet
Sunalign: Agri Tech
18 pages
Forecasting Gold Price.
No ratings yet
Forecasting Gold Price.
6 pages
Cis - Qfs Jose Huberney
No ratings yet
Cis - Qfs Jose Huberney
4 pages
Manual Ir30 Parte 2
100% (1)
Manual Ir30 Parte 2
9 pages
Instructions For Creating A 3D Laser Scanner Based On A CNC Machine
No ratings yet
Instructions For Creating A 3D Laser Scanner Based On A CNC Machine
33 pages
Unified Compute Platform HC Datasheet
No ratings yet
Unified Compute Platform HC Datasheet
2 pages
Greening & Restoring The Sahara Desert With The Groasis Waterboxx
No ratings yet
Greening & Restoring The Sahara Desert With The Groasis Waterboxx
70 pages
Bath Bombs
No ratings yet
Bath Bombs
2 pages
SYLLABUS OCS 4410 Fall 2022
No ratings yet
SYLLABUS OCS 4410 Fall 2022
4 pages
Closurenotice
No ratings yet
Closurenotice
1 page
Qatar PPPs
No ratings yet
Qatar PPPs
29 pages
DSP Pyq
No ratings yet
DSP Pyq
13 pages
The Determination of Exchange Rates
No ratings yet
The Determination of Exchange Rates
35 pages
TPZB150 Method of Statement - Satamas (2024)
No ratings yet
TPZB150 Method of Statement - Satamas (2024)
9 pages
Exploring Retention Factors in Gen y Engineers
No ratings yet
Exploring Retention Factors in Gen y Engineers
18 pages
Ujwala N Jagdale and Ors Vs Jagdale Industries PriNC201723061716192583COM45336-1
No ratings yet
Ujwala N Jagdale and Ors Vs Jagdale Industries PriNC201723061716192583COM45336-1
2 pages
Bike Rental System
No ratings yet
Bike Rental System
18 pages
FINAL Wireline Operators
No ratings yet
FINAL Wireline Operators
2 pages
Quick Details
No ratings yet
Quick Details
2 pages
Lulu Chang Resume
No ratings yet
Lulu Chang Resume
1 page
Stivuitor Electric 4 Tone - Diagrama 4 Tone
No ratings yet
Stivuitor Electric 4 Tone - Diagrama 4 Tone
2 pages