Download presentation
Presentation is loading. Please wait.
1
HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2
2
Overview HTML GUI in Web Environment ASP.NET Studio.NET
3
<tag_name>piece of text</tag_name>
HTML HyperText Markup Language. Developed by Tim Berners-Lee in 1990. HTML file is a text file with hypertext (links) and tags (instructions) added to it The file contains no hidden instructions, only instructions how to display the text The general format for a HTML tag is: <tag_name>piece of text</tag_name> An opening tag: <title> , a closing tag: <\html>
4
HTML page Fred Foonly <BR> <I> Aventura Ave 23 <BR> Palo Alto, CA. </I> The HTML source file: Basic idea: present all formatting information in a universally-agreed-upon mark up language Ship this text file from computer A to computer B On computer B, use a special program (browser) that uses the mark up instructions to render the document’s text on the scree Fred Foonly Aventura Ave 23 Palo Alto, CA. The HTML source file, as displayed by the browser:
5
HTML tags You can learn html using my html tutorial at: Basically tags can be divided into the following groups: Text formatting tags:<b>,<font>,<I>,<u>,<code>,<pre> Formatting: <br>,<center>,<hr> Block level tags: <address>,<h1-h6>,<p>,<div> List tags: <ul>,<ol>,<li>,<menu> Table tags: <table>,<tr>,<td>,<caption> Forms: <form>, <input> ,<select>,<textarea> HTML is not a case sensitive language: <img>=<Img>=<IMG>=<iMg> and more
6
More about tags Tags can have properties. Example:
<body background="marble.gif" text=red> <font color=green size=7>This is a green text.</font> Exist a group of multimedia tags: Image: <img src=somefile> Video: <img> tag and dynsrc="FileName" attribute: <img dynsrc="FileName" loop=infinite> Sound: <bgsound SRC=“File.mid" loop=5>
7
Hyperlink to the specific location
To create a hypertext you have to use an anchor tag <a> The link to this place is created using the following code: <a href=“address"> Jump to some text</a> An address can be: local (only file name directory) <a href=“my/rina.html"> global (computer name and protocol should be mentioned> <a href=“ Local or global – to a specific bookmark <a href=“ But you have to create a bookmark: <a name="PlaceName"></a> tag before this specific place Suppose you want to set a link to a specific place in another document then the link you use should be. Another multi-line document. You defined , bookmarked . My bookmark. Another text.
8
HTML GUI tags and events
The most used form tag is an <input> tag. The type of input is specified with the type attribute. <type input=“type”> The most commonly used input types are: text password button checkbox radio file For almost every tag events can be defined. Additional tags: select, textarea <select> <option value='RED'>red <option value='WHITE' selected>white </select>
9
Input type button Example
<html><head></head> <body><center> <h3>Form Input Button Example</h3> <form> <input type=button value="RED" onclick="document.bgColor='red'"> <input type=button value="BLUE" onclick="document.bgColor='blue'"> <input type=button value="GREEN" onclick="document.bgColor='green'"> </form></center> </body></html>
10
Select list example <html><head></head><body><center> <h3>Form Select List Example</h3> <form> <select name="s" onChange="document.bgColor=s.options[s.selectedIndex].value"> <option value='RED'>red <option value='WHITE' selected>white <option value='BLACK'>black <option value='GREEN'>green <option value='BLUE'>blue </select></form> </center></body></html> where Selected list item is - s.options[s.selectedIndex]
11
Select list example
12
http response html page
A User Agent (browser) asks for an HTML page by sending HTTP request to the web-server. Web-server sends a response which includes the required page including additional data objects. Browser displays the file. User can view an entire code using “view source” option. Server http request html page PC running UA – IE http response html page
13
Server side programming
What happens if you want to hide the information. If you want to send only an output. You don’t want to reveal data base and table names. Use server side scripting languages.
14
Why ASP.NET? ASP.NET makes building real world Web applications relatively easy. Displaying data, validating user input and uploading files are all very easy. Just use correct classes/objects. ASP.NET uses predefined .NET Framework classes: over 4500 classes that encapsulate rich functionality like XML, data access, file upload, image generation, performance monitoring and logging, transactions, message queuing, SMTP mail and more ASP.NET pages work in all browsers including Netscape, Opera, AOL, and Internet Explorer.
15
ASP.NET in the Context of .NET Framework
VB C++ C# JScript J# Visual Studio.NET Common Language Specification ASP.NET Web Forms Web Services Windows Forms ADO.NET and XML Base Class Library Common Language Runtime Operating System
16
ASP.NET page modus operand
Usually ASP.NET page constructed from regular HTML instructions and server instructions. Server instructions are a sequence of instructions that should be performed on server. An ASP .NET page has the extension .aspx. ASP+ = ASP.NET If UA requests an ASP .NET page the server processes any executable code in the page (the code can be written in current page or can be written in additional file). The result is sent back to the UA.
17
Adding Server Code You can add some code for execution simply by adding syntactically correct code inside <% %> block. Inside <% %> block you write instruction that should be implemented on server machine. Example: <html> <body bgcolor=“silver"> <center> <p> <%Response.Write(now())%> </p> </center> </body> </html> Where now() returns the date on the server computer and adds it to the resulting html page. Response is a Response object and it has a write method that outputs it’s argument to the resulted text.
18
Dynamic Pages ASP.NET pages are dynamic.
Different users get different information. In addition to using <% %> code blocks to add dynamic content ASP.NET page developer can use ASP.NET server controls. Server controls are tags that can be understood by the server and executed on the server.
19
Types of Server Controls
There are three types of server controls: HTML Server Controls – regular HTML tags with additional attribute id and runat=“server”directive: <input id="field1" runat="server"> Web Server Controls - new ASP.NET tags that have the following syntax: <asp:button id="button1" Text="Click me!" runat="server" OnClick="submit"/> Validation Server Controls – those controls are used for input validation: <asp:RangeValidator ControlToValidate=“gradesBox" MinimumValue="1" MaximumValue="100" Type="Integer" Text="The grade must be from 1 to 100!" runat="server" /> More about server controls in the future
20
How to run ASPX file? To run ASPX file on your computer you need to install IIS, .NET SDK, IE6 and Service Pack 2. Now you can write asp.net pages using any text editor - even Notepad! Exists many other tools Visual Studio.NET or Web-Matrix. Place your code to the disk:\Inetpub\wwwroot directory (or you can change this default directory). Now open your browser and request the following page: or It is a loopback call. Your PC now plays 2 roles: a client and a server.
21
Language Support The Microsoft .NET Platform currently offers built-in support for three languages: C#, Visual Basic and Jscript (Microsoft JavaScript) You have to specify language using one of the following directive <script language="VB" runat="server"> or Language=“C#” %> The last directive defines the scripting language for the entire page.
22
What’s in a name? Web Forms
All server controls must appear within a <form> tag. The <form> tag must contain the runat="server" attribute. The runat="server" attribute indicates that the form should be processed on the server. An .aspx page can contain only ONE <form runat="server"> control. That is why .aspx page is also called a web form.
23
Web Forms creation ASP.NET supports two methods of creation dynamic pages: a spaghetti code - the server code is written within the .aspx file. a code-behind method - separates the server code from the HTML content. 2 files – .cs and .aspx
24
Spaghetti code - Copy.aspx
Page Language="C#" %> <script runat=server> void Button_Click(Object sender, EventArgs e) { field2.Value = field1.Value; } </script> <html><body> <form Runat="Server"> Field 1:<input id="field1" size="30" Runat="Server"><br> Field 2: <input id="field2" size="30" Runat="Server"><br> <input type="submit" Value=“Submit Query” OnServerClick="Button_Click" Runat="Server"> </form> </body></html> A server code is written within the .aspx file
25
Output The output after inserting wwww to the first field and pressing the button.
26
Code-behind– myCodeBehind.cs file
using System; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; public class myCodeBehind: Page { protected Label lblMessage; protected void Button_Click(Object sender , EventArgs e) { lblMessage.Text="Code-behind example"; } }
27
Presentation.aspx file
Page src="myCodeBehind.cs" Inherits="myCodeBehind" %> <html><body> <form runat="Server"> <asp:Button id="Button1" onclick="Button_Click" Runat="Server" Text="Click Here!"></asp:Button> <br/> <asp:Label id="lblMessage" Runat="Server"></asp:Label> </form> </body></html>
28
The Code-Behind Example Output
After onclick event
29
ASP.NET Execution Model
Client Server public class Hello{ protected void Page_Load( Object sender, EventArgs e) {…} } Hello.aspx.cs First request Postback Output Cache
30
Studio.NET Very simple Microsoft Environment for project development.
You can use Studio.NET 2003 or 2005 (with web application) or Microsoft ASP.NET Web Matrix. How to work with web applications More about web-applications
31
Open a correct Project
32
Open a correct Project
39
An output After Button1 click
Similar presentations
