Web and ASP Basics

APPENDIX A Web and ASP Basics Understanding HTML Understanding HTTP Using liS Using ASP ONE oF THE MosT EXcmNG THINGs about ASP. NET is that it allows developers who have never created any Web pages before to apply their existing development skills to Web development. The purpose of this appendix is to explain the basic terms and techniques ofWeb development for those developers who until now have only ever been users of the Internet or have been insulated from the coding detail by using products such as Microsoft FrontPage or Macromedia Dreamweaver. So, if you're basically comfortable with HTML, if you have a clear idea of how a Web server fundamentally works, or if you've spent more than a few days using Active Server Pages (ASP) to create Web content in the pre-.NET world, you don't need to read this appendix. However, if any of these topics are new to you, you should read these next few pages before delving into the main text of the book, which makes certain assumptions about Web basics, all of which we'll address here. Everyone knows how to use the Internet. You type an address into the address line of a browser or maybe click a hyperlink on an existing page. You wait slightly longer than you really want, and then the page you requested displays in your browser. Figure A-1 shows this basic model. 629 Appendix A User requests a page HTTP I HTML Server responds User's Computer Web Server Figure A-1. How the Web works To be able to write programs for the Internet (that is, programs that construct the pages that Web servers send to browsers when a user requests them), you need to know some things about exactly how the page you asked for gets dis played in your browser. Actually, two things are going on here that you need to understand. The first is how your browser displays the page. The second is how the page gets to your browser in the first place. To display a page, the browser needs to understand a markup language called HyperText Markup Language (HTML). To be able to get hold of the page, the browser needs to use a communi cation protocol called HyperText Transfer Protocol (HTTP) when talking to the Web server. Understanding HTML HTML is a markup, or layout, language designed for use on the Web. It describes how a page of information should be displayed by a browser. The browser is responsible for reading HTML and generating specific graphic instructions suitable for the computer and operating system on which it's running. HTML itself doesn't care about any specific type of computer, operating sys tem, or browser. It simply contains instructions for browsers to use to create a display. Here's an example of a simple HTML file (created in Notepad and saved to c: \simple. htm): <html> <head> <title>A Simple Browser Page</title> </head> <body> Here's some text </body> </html> 630 Web and ASP Basics Just before seeing what this looks like in a browser, examine the structure and content of this HTML document. The document begins with an opening <html> tag and finishes with a closing <lhtml> tag. Together, opening and closing tags define an element. Elements can contain other elements, as well as having their own content. Everything inside the html element is treated by the browser as potential page content to be displayed. Within the <html> tags are further tags defining the head and body of the page. Within the body is some plain text. As you'll see, HTML defines a wide range of other tags that can be used within the body for specific effects. Figure A-2 shows what this HTML looks like in two different browsers (Microsoft Internet Explorer 6.0 and Opera 6.01). In each case, the display is cre ated simply by typing c: \simple. htm into the address line and pressing Enter. Figure A-2. Using Internet Explorer (left) and Opera (right) Note that the tags themselves don't get displayed, only their content. Tags give information to the browser about how to display the data they contain. Note also that the title actually gets displayed in the browser's caption bar, rather than directly within the page. There are some slight differences in how the two browsers handle the HTML (for example, the title is displayed differently), but what you see in each case is fundamentally the same. In the next example, the simple page has been slightly enhanced: <html> <head> <title>A Simple Browser Page</title> </head> <body> Here's some text Here's some BIG RED text 631 Appendix A </body> </html> In this example, a simple element called has been added to create a line break between two pieces of text (note that this tag doesn't have a corresponding closing tag because it doesn't contain any text). The next line uses the slightly more complex font element, which has a closing and opening tag: ••• . The text between the tags is displayed according to attri butes that specify the font size and color. Figure A-3 shows how this looks in a browser. Attributes and their values appear within the opening tag of an ele ment. For example, the size attribute in the opening tag of the font element has a value of "7". ~ Rebad Harne Hotist Here's some text Here's some BIG RED text Figure A-3. Using elements and attributes for layout effects We'll add one more touch of sophistication to the page by including a table and an image. Figure A-4 shows what this looks like. 632 Web and ASP Basics Hcn:'s some text Here's some BIG RED text apple I pear I plwn orange peach [ banana Figure A-4. Using tables and images To add the table and the soda bottle image, insert the following HTML into the body of the document: <table border="6" width="lOO%"> <tr> <td width="33%" align= "center">apple</td> <td width= "33%" align="center">pear</td> <td width="34%" align="center">plum<ltd> <ltr> <tr> <td width="33%" align="center">orange</td> <td width="33%" align="center">peach</td> <td width= "34%" align="center">banana</td> </tr> </table> <img border="O" src="soda4 .gif" width="6o" height="160"> 633 Appendix A Here you can see the HTML syntax for creating a table, using table tags (<table>), table row tags (<tr>) and table data tags (<td> ). Each table row element contains three table data elements, resulting in a table with three columns of data. You can also see the use of attributes to control the appearance of the table-its width and border size. The last section of this HTML displays an image, presented in a paragraph () whose contents are centered. Note that the <img> tag has an src attribute that identifies the image's filename. Because no path is specified, this image file must be in the same directory as simple. htm. You've seen enough to get a basic idea of what HTML looks like and how it's displayed by browsers. Of course there is a great deal more to HTML, and there are plenty of HTML books and resources that go into amazing detail on the sub ject. You've probably also worked out that writing complex HTML pages in Notepad is unlikely to be a rewarding task. Many Web page authors use graphical tools such as FrontPage or Dreamweaver to generate HTML. Visual Studio .NET also contains an HTML designer. So far, you've seen only static layout in our Web page. HTML also enables you to interact with a Web page, and perhaps the most common ways to interact with Web pages is via hyperlinks and forms. Interacting with a Web Page Figure A-5 shows a simple page called welcome. htm that contains a hyperlink to simple. htm. • . Opera - [ A Welcome Page ] Back Forward Reload Home Hotlist Print New Welcome. Click here to go somewhere else. Figure A-5. Hyper/inking 634 Web and ASP Basics The HTML for this page is as follows: <html> <head> <title>A Welcome Page</title> </head> <body> Welcome. Click <a href="simple.htm">here<la> to go somewhere else. </body> </html> The hyperlink functionality is provided by the anchor element (<a href=" simple. htm" >here). This specifies that when the text contained in the anchor element is clicked, the browser should request the page specified by the href attribute. In this case, the href refers to a local file in the same directory as the current page, but the href can equally be a fully qualified HTTP-based Uniform Resource Locator CURL), such as "http:/ /www.mydomain.com/simple.htm".Ahyperlinkcan also link to a named location within the same document, in which case the user gets the experience of hyperlinking without the delay of a round-trip back to the server. HTML forms provide a more flexible kind of user input. This is where the Web page presents control elements (such as text boxes, check boxes, list boxes and buttons) that you can use to interact with the page and send information to the server. You can see an example in Figure A-6. 635 Appendix A 'l A Wt>lfomf' Pclge - Mtcrosoft Internet fKpl Welcome. Click h re ro go somewhere else. Or enter your email address and click 'Done' wPlease sell my email address to all and sundry Figure A-6.

Load more