National University of Computer and Emerging Sciences Lab Manual 1.1 “Introduction to ASP.net, HTML” Database Systems Lab Spring 2021 Department of Computer Science FAST-NU, Lahore, Pakistan 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 ⦁ 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. ⦁ Task Distribution Total Time 90 Minutes Introduction 10 Minutes HTML Elements 15 Minutes ASP Control 15 Minutes Exercise 45 Minutes ⦁ HTML ⦁ 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 ⦁ HTML Tags HTML markup tags are usually called HTML tags ⦁ HTML tags are keywords (tag names) surrounded by angle brackets like ⦁ HTML tags normally come in pairs like and ⦁ 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 ⦁ 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: ⦁ 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 ⦁ HTML Headings
⦁ 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: Step 2: Navigate to Solution Explorer, and add a new Web Form 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” Output would be like this: ⦁ 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!" 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> 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" /> ⦁ 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. ⦁
means new line in HTML ⦁ means space in HTML SAMPLE FORM ⦁ Exercise Using ASP Web form create sample page like given below. Note: instagram logo : You can use any logo from internet.