Asp.

net is server based technology for creating dynamic web pages using fully fledged languages like c# supported by .Net framework. server-side programming language such as C# or VB, and a client side language such as JavaScript Hyper Text Transfer Protocol HTTP is the protocol by which web browsers and web servers communicate. When you send the address, you send a request to the server. When the server is active and the request is valid, the server accepts the request, processes it, and then sends the response back to the client (our computer) browser. Attribute Extra information in a tag to define or change its behavior Element A pair of tags holding some text or other content HTML Hyper Text Markup Language: the language that browsers use to display a web page integrated development environment (IDE) an integrated collection of applications and tools to develop applications JavaScript A programming language used to interact with a web page in the clients browser Visual Studio 2010 The development environment to build .NET applications Visual Web Developer The part of Visual Studio (but also available separately as the free Express edition) that enables you to build ASP.NET web applications XHTML HTML rewritten with XML rules Toolbox is not visible on-screen, press Ctrl+Alt+X to open it or choose View Toolbox. Solution Explorer by choosing View Solution Explorer from the main menu or by pressing Ctrl+Alt+L. You can use the Solution Explorer to add new files to your site, move existing files around using drag and drop or cut and paste, rename files and delete them from the project, and more. Properties Grid by pressing F4. With the Properties Grid, you can view and edit the properties of many items in Visual Studio, including files in the Solution Explorer, controls on a web page, properties of the page itself, and much more. The Document Window is the main area in the middle of the application. At the bottom of the Document Window, you see three buttons called Design, Split, and Source. They allow you to open the Design View of a page (giving you an idea of how the page will look in the browser), its Markup View (the HTML and other markup), or both at the same time.

You will often need to replace some text in the current document or even in the entire site. Find in Files (Ctrl+Shift+F) and Replace in Files (Ctrl+Shift+H) both output their results in the Find Results window. Customizing the IDE, VWD is fully customizable, Rearranging Windows, Modifying the Toolbox by You can do this by choosing Add Tab from the Toolboxs right-click menu. Enter a name and press Enter, and your Toolbox tab is ready for use. Resetting Your Changes, Resetting the Toolbox, Resetting the Window Layout just by right clicking and reset option and for Resetting All Settings To completely revert all VWD settings to the way they were right after installation, choose Tools Settings Import and Export Settings or Tools Import and Export Settings, depending on the version of Visual Web Developer you're using. Next, choose the Reset All Settings option and click Next. If you want, you can create a backup of the existing settings; otherwise, choose No, Just Reset Settings. You get another screen that enables you to choose among a number of settings collections. Choose Expert Settings and click finish. Web Site Project site is simply a Windows folder with a bunch of files and subfolders in it. There is no collective file (known as the project file with a .vbproj or .csproj extension) that keeps track of all the individual files in the web site. You just point VWD to a folder, and it instantly opens it as a web site. This makes it very easy to create copies of the site, move them, and share them with others Web Application Projects make it easier for developers who work in teams or who need more control over the contents of the site and their compilation and deployment processes to build web sites with VWD, because the whole web site is managed as a project with a single project file that keeps track of all the content of the web site. selecting template- empty web site template Working with Files in Your Web Site To give you an idea of how many different files you can use in ASP.NET- choose Solution Explorer and choosing Add New Item or by choosing Website Add New Item from the main menu). web files Web Form .aspx The workhorses of any ASP.NET web site, Web Forms represent the pages that your users view in their browser. Master Page .master Enable you to define the global structure and the look and feel of a web site. You see how they can be used in Chapter 6. Web User Control .ascx Contains page fragments that can be reused in multiple pages in your site. Chapter 8 is entirely devoted to user controls.

HTML Page .htm / .html Can be used to display static HTML in your web site. Style Sheet .css Contains CSS code that enables you to style and format your web site. You learn more about CSS in the next chapter. Web Configuration File .config Contains global configuration information that is used throughout the site. You see how to use the web.config later in this book, starting with Chapter 4. Site Map .sitemap Contains a hierarchical representation of files in your site in an XML format. The Site Map is used for navigation and is discussed in Chapter 7. JScript File .js Contains JavaScript (which Microsoft calls JScript) that can be executed in the clients browser. Skin File .skin Contains design information for controls in your web site.Skins are discussed in Chapter 6. Code Files-Class .cs / .vb etc Can contain code to program your web site Data Files Data Files are used to store data that can be used in your site and in other applications. The group consists of the XML files, database files, and files related to working with data. Special File Types- when you try to add a class file (with a .vb or .cs extension), you get the warning When you get this dialog box, always click Yes. Otherwise your file wont function correctly. You get similar dialog boxes for other file types, including skin and database files. Choosing between Code Behind and Pages with Inline Code Web Forms come in two flavors: either as an .aspx file with a Code Behind file (a file named after the Web Form with an additional .vb or .cs extension) or as .aspx files that have their code embedded, often referred to as Web Forms with inline code. However, as your page gets larger and you add more functionality to it, its often easier if you have the code in a separate file. The dashed rectangle represents the <div> element you saw in Markup View. In many cases, the list with options pops up automatically if you begin typing. If it doesnt, press Ctrl+Spacebar to invoke it. If the list covers some of your code in the code window, press and hold the Ctrl key to make the window transparent. Setting up a page with inline code is very similar. Start by adding a new Web Form to the Demos folder. Call it Inline.aspx and make sure you uncheck the Place Code in Separate File option.for setting up a page with code behind page just add a page in

demo folder and make sure while adding web form that place code in separate file is checked. & markup code-&amp ( )apostrophe character === &#39 VWD adds a <table> element and a number of <tr> and <td> elements to define rows and cells, respectively. <li> elements are used to define each item in the list. for bold text markup- <strong> tags for italic text markup-<em> tags <bgcolor> -attribute for background color Code Behind A page model where server side code is stored in a separate code file Design View Gives you a graphical representation of your page Inline Code A page model where server side code is stored in the same file as the markup the relevance of and need for CSS in your ASP.NET web sites, you need to understand the shortcomings of HTML first To summarize, formatting with HTML suffers from the following problems Data and presentation are mixed within the same file. HTML doesnt allow you to easily switch formatting at runtime in the browser. The required formatting tags and attributes make your pages larger and thus slower to load and display. <style type=text/css> h1 { font-size: 20px; color: Green; }

... </style> The <style> tag is used to wrap a style sheet that is embedded in the page with its type attribute set to text/css. The h1 at the top of the code block is called a selector and is used to indicate to what element the formatting should be applied. Between the curly braces you see the style information that should be applied to the heading. Each line between the curly braces is called a declaration. A declaration consists of a property, followed by a colon and then followed by a value. a cascading style sheet is actually a collection of rules. A rule is a combination of a selector and one or more declarations, which in turn can be broken down to a

property and a value. The ID Selector The ID selector is always prefixed by a hash symbol (#) and enables you to refer to a single element in the page. #IntroText { font-style: italic; } Because you can reuse this ID across multiple pages in your site (it only has to be unique within a single page), you can use this rule to quickly change the appearance of an element that you use once per page, but more than once in your site, for example with the following HTML code: <p id=IntroText>I am italic because I have the right ID.</p> <p id=BodyText>I am NOT italic because I have a different ID.</p> In this example, the #IntroText selector changes the font of the first paragraph which has the matching id attribute but leaves the other paragraph unmodified. ID selectors are case sensitive, so make sure that the id attribute and the selector always use the same casing.

The Class Selector The Class selector enables you to style multiple HTML elements through the class attribute. This is handy when you want to give the same type of formatting to a number of unrelated HTML Designing Your Web Pages elements. .Highlight { font-weight: bold; color: Red; } This is normal text but <span class=Highlight>this is Red and Bold.</span> This is also normal text but <a href=CssDemo.aspx class=Highlight>this link is Red and Bold as well.</a>

Properties Properties are the part of the element that you want to change with your style sheet.

Using Shorthand border: 1px solid Black; However, if you want more control over the individual borders and their properties, you can use the expanded version border-top-width: 1px; border-top-style: solid; border-top-color: Black; border-right-width: 1px; border-right-style: solid; border-right-color: Black; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: Black; border-left-width: 1px; border-left-style: solid; border-left-color: Black; The CSS Box Model The CSS Box Model describes the way three important CSS properties are applied to HTML elements: padding, border, and margin. Adding CSS to Your Pages The first way to add CSS style sheets to your web pages is through the <link> element that points to an external CSS file <link href=StyleSheet.css rel=Stylesheet type=text/css media=screen /> The rel and type attributes tell the browser that the linked file is in fact a cascading style sheet. You briefly saw the second way to include style sheets at the beginning of this chapter: using embedded <style> elements. The <style> element should be placed at the top of your ASPX or HTML page, between the <head> tags. <head runat=server> <title></title> <style type=text/css> h1 { color: Blue; }

</style> </head> The third way to apply CSS to your HTML elements is to use inline styles with the style attribute <span style=color: White; background-color: Black;> This is white text on a black background. </span> Choosing among External, Embedded, and Inline Style Sheets In general, you should give preference to external style sheets over embedded styles, which in turn are preferred over inline styles. If you want to change the look of a single page, without affecting other pages in your site, an embedded style sheet is your best choice. The same applies to inline styles: if you only want to change the behavior of a single element in a single page we use external css in which we use build style to by writing a selector name and its property through window that pops up after styles-build styles and setting the things that we want. Creating New Styles in External Style Sheets In an earlier Try It Out, you manually added selectors to the CSS file and then used the Style Builder to write the rules. However, you can also use the VWD tools to write the selectors for you. The :hover and :visited parts on the a selector are probably new to you. These selectors are called pseudo class selectors. The Manage Styles window gives you a quick overview of style sheets that are active for the current page, either as an external and attached style sheet, or as an embedded style sheet in the <head> section of the page. Its a very useful window to attach new styles to the current document, and to move styles from one location to another Managing Styles To achieve reusability, you should move as much of your inline and embedded styles as possible to an external style sheet. This is exactly what the Apply Styles and Manage Styles windows enable you to do