0% found this document useful (0 votes)

22 views

Lab Manual Intro To ASP - Net, HTML

This document provides an introduction to HTML and ASP.net using Visual Studio. It contains the following sections: 1. Overview of HTML tags, elements and how browsers interpret HTML pages. 2. Instructions on how to create an ASP.net web form project in Visual Studio, add web pages and common ASP controls like textboxes, buttons. 3. Examples of HTML headings, paragraphs and ASP controls like textboxes, dropdowns, buttons etc. with explanations of their usage. 4. An exercise asking students to recreate a sample login form using ASP controls.

Uploaded by

skyealice45

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

22 views

Lab Manual Intro To ASP - Net, HTML

Uploaded by

skyealice45

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 16

National University of Computer and Emerging

Sciences

Lab Manual
“Introduction to ASP.net, HTML”

Database Systems Lab

Spring 2023
Department of Computer Science
FAST-NU, Lahore, Pakistan
FAST NU Lahore Database Systems CL 219

Table of Contents
1 Objective............................................................................................................. 2
2 Task Distribution................................................................................................. 2
3 HTML..................................................................................................................3
1.1. What is HTML?............................................................................................ 3
1.2. HTML Tags...................................................................................................3
1.3. Web Browsers............................................................................................... 3
1.4. HTML ELEMENTS..................................................................................... 4
1.5. HTML Headings........................................................................................... 4
4 Creating ASP.Net Web form using Visual Studio............................................... 4
4.1 ASP CONTROLS (Similar behavior to HTML elements)...........................8
4.2 Keypoints.................................................................................................... 10
5 Exercise............................................................................................................. 13

Page 1
FAST NU Lahore Database Systems CL 219

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.

2 Task Distribution
Total Time 90 Minutes
Introduction 10 Minutes
HTML Elements 15 Minutes
ASP Control 15 Minutes
Exercise 45 Minutes

Page 2
FAST NU Lahore Database Systems CL 219

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 3
FAST NU Lahore Database Systems CL 219

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

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:

Page 4
FAST NU Lahore Database Systems CL 219

Page 5
FAST NU Lahore Database Systems CL 219

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

Page 6
FAST NU Lahore Database Systems CL 219

Step 3: Choose Web Form from available template and set its Name

Step 4: Double Click on MyPage.aspx in solution explorer and click on empty

space in the mypage.aspx and press “CTRL+F5”

Page 7
FAST NU Lahore Database Systems CL 219

Output would be like this:

4.1 ASP CONTROLS (Similar behavior to HTML elements)

A basic TextBox:

Page 8
FAST NU Lahore Database Systems CL 219

<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!"
runat="server"></asp:TextBox>

A multiline TextBox:
<asp:TextBox ID="txtComment" TextMode="multiline"
runat="server"></asp:TextBox>

Checkbox
<asp:CheckBox ID="chkIsStudent" runat="server" />

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>

Page 9
FAST NU Lahore Database Systems CL 219

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.