Lab Manual 1: National University of Computer and Emerging Sciences

FAST NU Lahore Database Systems Lab CL 219
National University of Computer and Emerging

Sciences
Lab Manual 1
Introduction to ASP.net, HTML, CSS & JavaScript
Database Systems Lab

Spring 2021
Department of Computer Science

FAST-NU, Lahore, Pakistan
Page 1
Table of Contents
1 Objective 3
2 Task Distribution 3
3 HTML 4
3.1 What is HTML? 4
3.2 HTML Tags 4
3.3 Web Browsers 4
3.4 HTML ELEMENTS 5
3.5 HTML Headings 5
4 Creating ASP.Net Web form using Visual Studio 6
4.1 ASP CONTROLS (Similar behavior to HTML elements) 9
4.2 Key points 10
5 ASP.net HTML Exercise (10 Marks) 12
6 CSS-Cascaded Style Sheet 13
6.1 Different Ways to Add Styles to Tags 14
6.1.1 CSS-Selector 14
6.2 CSS-ID and CSS-CLASS 15
6.2.1 CSS-ID 15
6.2.2 CSS-CLASS 15
6.3 CSS Exercise (10 Marks) 17
6.3.1 Self-Exploration 17
7 JAVA SCRIPT 18
7.1 JavaScript Exercise (10 Marks) 20
7.1.1 Self-Exploration 20
8 Submission Guidelines: 21
Page 2
1 Objective
The purpose of this document is to give a practical implementation of HTML, the whole
overview of HTML tags and element, with example and live implementation during lab.
Introduction to ASP.NET, this document will answer how to create new project? How to create
new web page? And practice on various ASP controls. You will also learn how to use CSS to
style ASP.net web application and how to use JavaScript to perform client-side validation.
2 Task Distribution
Total Time 170 Minutes
HTML Elements 10 Minutes
ASP Control 20 Minutes
ASP.net HTML Exercise 30 Minutes
CSS 20 Minutes
CSS Exercise 30 Minutes
JavaScript 20 Minutes
JavaScript Exercise 40 Minutes
Page 3
HTML
3.1 What is HTML?

HTML is a language for describing web pages.
 HTML stands for Hyper Text Markup Language

 HTML is not a programming language, it is a markup language
 The purpose of the tags are to describe page content
3.2 HTML Tags

HTML markup tags are usually called HTML tags
 HTML tags are keywords (tag names) surrounded by angle brackets like
<html>
 HTML tags normally come in pairs like <b> and </b>
 The end tag is written like the start tag, with a forward slash before the tag
name
 Start and end tags are also called opening tags and closing tags
3.3 Web Browsers

The purpose of a web browser (Chrome, Internet Explorer, and Firefox) is to read HTML
documents and display them as web pages. The browser does not display the HTML tags, but
uses the tags to interpret the content of the page:
Page 4
3.4 HTML ELEMENTS

 An HTML element starts with a start tag / opening tag
 An HTML element ends with an end tag / closing tag
 The element content is everything between the start and the end tag
 Some HTML elements have empty content
 Most HTML elements can have attributes
3.5 HTML Headings

<h1>Check this out</h1>
<h2>What you think of it now</h2>
<h3>And what about now</h3>
4 Creating ASP.Net Web form using Visual Studio
Page 5
Step 1: Start an instance of Visual Studio (version:20XY) and create a new project by going to
File –> New—> Project –> Web –> ASP.NET Web Application as shown below:
Step 2: Navigate to Solution Explorer, and add a new Web Form
Page 6
Step 3: Choose Web Form from available template and set its Name
Page 7
Step 4: Double Click on MyPage.aspx in solution explorer and click on empty space in the
mypage.aspx and press “CTRL+F5”
Output would be like this:
Page 8
4.1 ASP CONTROLS (Similar behavior to HTML elements)
A basic TextBox:
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
A password TextBox:
<asp:TextBox ID="txtPassword" TextMode="password"
runat="server"></asp:TextBox>
A TextBox with text:

<asp:TextBox ID="txtTextValue" Text="Hello World!"
A multiline TextBox:
<asp:TextBox ID="txtComment" TextMode="multiline"
Checkbox
<asp:CheckBox ID="chkIsStudent" runat="server" />
Page 9
Radio Button
<asp:RadioButton ID="rdMale" GroupName="Gender" runat="server" />
<asp:RadioButton ID="rdFemale" GroupName="Gender" runat="server" />
Dropdown List
<asp:DropDownList ID="ddlDepartment" runat="server">
<asp:ListItem Text="Select" Value="0"></asp:ListItem>
<asp:ListItem Text="Computer Science" Value="CS"></asp:ListItem>
<asp:ListItem Text="Electrical Engineering" Value="EE"></asp:ListItem>
<asp:ListItem Text="Business Administrator" Value="BBA"></asp:ListItem>
<asp:ListItem Text="Civil Engineering" Value="CV"></asp:ListItem>
</asp:DropDownList>
Button
<asp:Button ID="btnSave" Text="Save Form" runat="server" />
Image
<asp:Image ID="Image2" ImageUrl=https://auth.gfx.ms/images/ms-logo.png

runat="server" />
4.2 Key points
 Question: Why do I have to specify runat="server" on all my ASP.NET

controls when it is a mandatory attribute and server is the only option available
in my limited knowledge of ASP.NET, and I get an error if I don't use it?
 Answer: It has to do with how server-side controls are identified during
processing. Rather than having to check every control at runtime by name to
determine whether server-side processing needs to be done, it does a selection
on the internal node representation by tag. The compiler checks to make sure
that all controls that require server tags have them during the validation step.
 <br> means new line in HTML

 means space in HTML
Page 10
SAMPLE FORM
Page 11
5 ASP.net HTML Exercise (10 Marks)

Using ASP Web form create sample page like given below.
Note: Instagram logo : You can use any logo from internet.
Page 12
6 CSS-Cascaded Style Sheet

CSS is a language used to design and style the layout of web page, including colors, size, images
font etc. To use CSS, you first create a Style and then you can apply it to Tags (for examples on
button tag, textbox tag etc.).
TRY THIS:
Open Visual Studio, and create ASP.net web project then go to Solution Explorer and Add new
ASPX web form.
Modify your Web form as follow: Add some text in body and add the CSS style tags as shown.
**NOTE DON’T CREATE ASP.net Empty Project, always create ASP.net web project
Execute your project (CTRL+F5) and make sure you open your own Web form in browser (see
the URL in browser). Your web page will look as shown in figure, all the font in body tag will be
of the style-rule body you defined in Style tag.
Page 13
6.1 Different Ways to Add Styles to Tags

6.1.1 CSS-Selector
The above example defined a style on body tag. This is called CSS selector. The selector points
to the Asp.net element you want to style. Syntax to define CSS-Selector Style rules is
Selectors can be any HTML elements such as h1 tag, p tag, and body tag.
TRY IT: Add h1 tags to you Web form and then add the following CSS selector to Style tag.
Execute, all the text in h1 tag will have the Style h1 selector.
Page 14
6.2 CSS-ID and CSS-CLASS

To change the style of ASP.net controls such as buttons and textboxes, you can use CSS-ID or
CSS-CLASS.
6.2.1 CSS-ID
CSS-ID is used to change the style of only one specific ASP.net control in Web form.
CSS-ID is defined as follow:
#ClassName {Property:Value; Property:Value; Property:Value}
Example:
Now the ASP.net control with ID=submit will be styled according to the #submit rules, and as all
controls have unique ID CSS-ID rules can only be for once control on one page.
6.2.2 CSS-CLASS
Unlike CSS-ID, CSS-Class can be used for more than one control (same or different type) in a
page. To apply CSS-class to ASP.net control set the CssClass property of that control equal to
that CSS-Class
CSS class is defined as follow:
.ClassName {Property:Value; Property:Value; Property:Value}
Example:
NOTE: Classname will always begin with a dot <.>, List of property:value is separated by
semicolon <;>
Page 15
TRY THIS: Add .buttonCSS style to Style tag, add two buttons in you page and set there
CssClass="buttonCSS", as shown in figure. Also add #submit style to you Style tag and add one
button with ID="submit"
Execute it,
Button 1 and Button 2 has .buttonCSS rules applied on it to it and Submit has #submit style
applied to it.
Page 16
6.3 CSS Exercise (10 Marks)

Create new Web form as shown in figure below and Replicate the following:
 Main Heading style and color.
 All the other text style and color.
 Button’s text color and border color and border glow, buttons also have round
edges.
 Text box border color and glow.
 Drop down border color and glow, it has three options, Dollar, Euro and Pound
 Search the property and values to do these from internet.
6.3.1 Self-Exploration
You can also create a separate CSS style from Webform by adding style in .css file and link it to
your Webform.
Page 17
7 JAVA SCRIPT
JavaScript is the most popular scripting language on the internet. JavaScript is used in millions of
Web pages to improve the design, validate forms, detect browsers, create cookies, and much
more. It works in all major browsers, such as Internet Explorer, Mozilla, Firefox, Netscape,
Opera.
In this manual we will use java Script to perform Client side operations or validation.
TRY THIS:
Create a new Web form and add Script tag and add statments to it as shown in figure. The
statment in the script will run when ever the page is loaded.
document.write(String) will overwrite your web page and display the string you give it as input
Execute your page and result should be as follow:
Page 18
You can create functions in java script that can be called on some specific action:
Syntax of Javascript function is
function <fucntionName>()
{
<body>
}
TRY THIS
Create a page as shown, the page will take two numbers and when you press the button
JavasScript function AddTwoNumbers will be called this function will add the two numbers and
display in output textbox.
Page 19
The example showed how to take get input from text boxes in JavaScript function, how to set
value of text box in JavaScript function, and how to specify what function should be called on
Client side when a button is pressed.
Page 20
7.1 JavaScript Exercise (10 Marks)

Use the Web form you create and how create JavaScript function to convert currency to/from Rs
to selected medium
 Create a JS function that will be called when ‘Convert Rupees to Selected Medium’ is
pressed. It should get the value from 1st text box and convert it to selected medium, and
display in 2nd text box.
 Create a JS function the will be called when ‘Convert from Selected Medium to Rupees’
is clicked. It should take value from 3rd text box convert it into Rupees from selected
currency and display in 4th text box.
 Create a JS function that will be called when Reset button is pressed. It should clear all
the text boxes, display the selected currency in 5th text box and you name and roll number
in 6th text box.
**NOTE: DON’T USE KEYWORDS SUCH AS RESET AS NAME OF YOU JS FUNCTIONS
7.1.1 Self-Exploration
You can also create a separate JavaScript by adding a .js file and link it to your Webform.
Page 21
8 Submission Guidelines:
Please stick to submission guidelines. Late and incorrect submissions WON'T be
accepted.
1. For ASP.net HTML exercise, rename your Webform to rollno_htmlexercise.aspx
e.g l181234_htmlexercise.aspx
2. For CSS exercise, rename your Webform to rollno_cssexercise.aspx e.g.
l181234_cssexercise.aspx and rename the corresponding css file to
rollno_cssexercise.css
3. For JavaScript exercise, rename your Webform to rollno_jsexercise.aspx e.g.
l181234_jsexercise.aspx and rename the corresponding css file to
rollno_jsexercise.js
4. You are required to submit 5 files in total i.e.
a. l181234_htmlexercise.aspx
b. l181234_cssexercise.aspx
c. l181234_cssexercise.css
d. l181234_jsexercise.aspx
e. l181234_jsexercise.js
5. DONOT rar or zip these files. Simple upload these 5 files on Google Classroom
under this Lab-1 assignment.
Page 22

Lab Manual 1: National University of Computer and Emerging Sciences

Uploaded by

Copyright:

Available Formats

You might also like

Lab Manual 1: National University of Computer and Emerging Sciences

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab Manual 1: National University of Computer and Emerging Sciences

Uploaded by

Copyright:

Available Formats

FAST NU Lahore Database Systems Lab CL 219

National University of Computer and Emerging

Database Systems Lab

Department of Computer Science

3.1 What is HTML?

 HTML stands for Hyper Text Markup Language

3.2 HTML Tags

3.3 Web Browsers

3.4 HTML ELEMENTS

3.5 HTML Headings

4 Creating ASP.Net Web form using Visual Studio

Step 2: Navigate to Solution Explorer, and add a new Web Form

Output would be like this:

4.1 ASP CONTROLS (Similar behavior to HTML elements)

A TextBox with text:

<asp:Image ID="Image2" ImageUrl=https://auth.gfx.ms/images/ms-logo.png

4.2 Key points

 Question: Why do I have to specify runat="server" on all my ASP.NET

 <br> means new line in HTML

5 ASP.net HTML Exercise (10 Marks)

6 CSS-Cascaded Style Sheet

6.1 Different Ways to Add Styles to Tags

6.2 CSS-ID and CSS-CLASS

CSS-ID is defined as follow:

#ClassName {Property:Value; Property:Value; Property:Value}

CSS class is defined as follow:

.ClassName {Property:Value; Property:Value; Property:Value}

6.3 CSS Exercise (10 Marks)

Execute your page and result should be as follow:

7.1 JavaScript Exercise (10 Marks)

**NOTE: DON’T USE KEYWORDS SUCH AS RESET AS NAME OF YOU JS FUNCTIONS

You might also like