![Page 1: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/1.jpg)
1
HTML, GUI, ASP.NETHTML, GUI, ASP.NET
Rina Zviel-Girshin
Lecture 2
![Page 2: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/2.jpg)
2
Overview
HTML GUI in Web Environment ASP.NET Studio.NET
![Page 3: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/3.jpg)
3
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>
![Page 4: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/4.jpg)
4
HTML page
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 <BR><I> Aventura Ave 23 <BR>Palo Alto, CA. </I>
The HTMLsource file:
Fred FoonlyAventura Ave 23Palo Alto, CA.
The HTML source file, as displayed by the browser:
![Page 5: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/5.jpg)
5
HTML tags
You can learn html using my html tutorial at: http://www2.kinneret.ac.il/girshin/ip/myint/ex1.html
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
![Page 6: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/6.jpg)
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>
![Page 7: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/7.jpg)
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=“http://www.idc.ac.il/index.html"> Local or global – to a specific bookmark <a
href=“http://www.idc.ac.il/index.html#definition"> 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.
![Page 8: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/8.jpg)
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>
![Page 9: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/9.jpg)
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<
![Page 10: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/10.jpg)
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]
![Page 11: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/11.jpg)
11
Select list example
![Page 12: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/12.jpg)
12
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.
PC runningUA – IE
Serverhttp request html pagehttp response html page
![Page 13: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/13.jpg)
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.
![Page 14: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/14.jpg)
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.
![Page 15: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/15.jpg)
15
ASP.NET in the Context of .NET Framework
Operating SystemOperating SystemOperating SystemOperating System
Common Language RuntimeCommon Language RuntimeCommon Language RuntimeCommon Language Runtime
Base Class LibraryBase Class LibraryBase Class LibraryBase Class Library
ADO.NET and XMLADO.NET and XMLADO.NET and XMLADO.NET and XML
ASP.NETASP.NETWeb Forms Web ServicesWeb Forms Web Services
ASP.NETASP.NETWeb Forms Web ServicesWeb Forms Web Services
WindowsWindowsFormsForms
WindowsWindowsFormsForms
Common Language SpecificationCommon Language SpecificationCommon Language SpecificationCommon Language Specification
VBVBVBVB C++C++C++C++ C#C#C#C# JScriptJScriptJScriptJScript J#J#J#J#V
isual S
tud
io.N
ET
Visu
al Stu
dio
.NE
TV
isual S
tud
io.N
ET
Visu
al Stu
dio
.NE
T
![Page 16: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/16.jpg)
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.NETASP+ = 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.
![Page 17: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/17.jpg)
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.
![Page 18: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/18.jpg)
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.
![Page 19: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/19.jpg)
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
![Page 20: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/20.jpg)
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:
http://127.0.0.1/mypage.aspx or http://localhost/mypage.aspx
It is a loopback call. Your PC now plays 2 roles: a client and a server.
![Page 21: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/21.jpg)
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
<%@Page Language=“C#” %>
The last directive defines the scripting language for the entire page.
![Page 22: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/22.jpg)
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.
![Page 23: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/23.jpg)
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
![Page 24: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/24.jpg)
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
![Page 25: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/25.jpg)
25
Output
The output after
inserting wwww to the first field and pressing
the button.
![Page 26: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/26.jpg)
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"; }
}
![Page 27: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/27.jpg)
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>
![Page 28: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/28.jpg)
28
The Code-Behind Example Output
After onclick event
![Page 29: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/29.jpg)
29
ASP.NET Execution ModelClient Server
public class Hello{protected void Page_Load(Object sender, EventArgs e){…}}Hello.aspx.cs
First requestPostback
Output Cache
![Page 30: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/30.jpg)
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 http://msdn2.microsoft
.com/en-us/library/aa730880(VS.80).aspx
More about web-applicationshttp://forums.asp.net/thread/1279716.aspx
![Page 31: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/31.jpg)
31
Open a correct Project
![Page 32: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/32.jpg)
32
Open a correct Project
![Page 33: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/33.jpg)
33
![Page 34: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/34.jpg)
34
![Page 35: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/35.jpg)
35
![Page 36: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/36.jpg)
36
![Page 37: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/37.jpg)
37
![Page 38: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/38.jpg)
38
![Page 39: 1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2](https://reader036.vdocument.in/reader036/viewer/2022070407/56649e2a5503460f94b18b28/html5/thumbnails/39.jpg)
39
An output
After Button1 click