Creating a Web Page Lesson 1
Objectives
HTML HTML is slowly being replaced by XHTML. XHTML stands for Extensible Hypertext Markup Language and is the current W3C standard for writing HTML. HTML (HyperText Markup Language) is based on the standards presented by the World Wide Web Consortium. DTD (Document Type Definition) is a tool used by the developer to ensure that Web pages follow a specified markup language.
<!DOCTYPE> is the declaration statement that uses the three words: strict, transitional, and frameset. The statement is optional in HTML but required for XHTML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " /xhtml1-strict.dtd">
Elements and Tags An element is the name of an XHTML structure. –Tags are used to create them. –XHTML requires that every element that has been started with a tag also ends with a tag. –The symbol used to end, or close, an element is the slash. or.
Attributes Attributes define any properties that an element might want to include. They are placed inside the starting tag after the element name. The attribute name is followed by an equal sign and its value:. The quotation marks around the attribute value may either be single, as shown, or double.
Basic Elements The HTML language commonly uses the,,, and elements in Web pages, and all of these elements are required for XHTML. The element is the required “root” element of an XHTML page. All nested elements within the starting and ending tags are called child elements of the element.
Element Element The element contains information about the document but is not part of the document content. Although not required, a element should be included as a child element of the element. It holds data about the data in the Web page such as type of content, page refresh rate, the author of the page, character set, etc. Data placed in this element will not be displayed on the page but can be useful for browsers, search engines, and other Web services.
and Elements and Elements The element is required for XHTML, which provides the browser with a title and is used for bookmarking. The element contains the content of the Web page that will be displayed by the browser. –Text placed within the tags of this element is displayed in HTML but not XHTML. –XHTML requires another element to display text, such as the paragraph element.
Validating HTML XHTML has more strict syntax rules than HTML and should always be validated. Since these syntax rules are the very same rules used for XML, we can use an XML validator to validate our XHTML pages. If the page passes the validation test, it is considered a “Well Formed” document.
Writing HTML The HTML used in this section focuses on the XHTML syntax rules. It can be a challenge to write strict XHTML for the simplest of Web pages. Both XHTML and HTML use elements and attributes to create Web pages. Try to avoid using deprecated elements. Deprecated elements have either been replaced with new elements or have been dropped altogether in favor of Cascading Style Sheets (CSS).
Embedding Images with HTML The image element is used in most Web pages along with the src attribute that points to the name of the image. –However, many of these pages will not pass XHTML validation.
Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) define how to display these HTML elements, including such characteristics as fonts, borders, color, size, etc. CSS can be located in three areas: –Inline - embedded within the HMTL code –Internal - included in the Web page but not embedded –External - On a separate page
Cascading Style Sheets (CSS) Internal and external style sheets use selectors to direct the style information to designated elements. CSS selectors use complex pattern-matching techniques to locate these elements. A selector is the first part of the internal and external style sheet. –It can be used for matching more than element names, such as the paragraph in the previous exercise.
Creating HTML Tables Tables are very common elements in Web pages. They are constructed with a set of easy-to- remember element names. The table itself uses the tag, while its components are for table row and for table data. Some of the more specialized elements are to display the name and for the headers.
Laying Out HTML On a Page Web pages are often divided into sections. –CSS is now used to help create these sections. The use of CSS is now the standard technique for laying out Web pages and is most often used jointly with the division element. –Each division element is assigned a unique ID, which is then located using the CSS ID selector.
Creating Web Pages Using the Properties, Methods and Events of ASP.NET Intrinsic Objects The.NET platform uses classes and objects. The class contains sets of programming code bundled with data meant to complete a specific task. Hundreds of pre-defined classes are available in the ASP.NET foundation for use in a Web site. If a pre-defined class cannot address a particular need, developers are free to create their own.
Creating Web Pages Using the Properties, Methods and Events of ASP.NET Intrinsic Objects An object has a number of assigned attributes called properties that describe the characteristics of the object. Some objects have behaviors called methods that can be called upon when needed. Some objects also respond to external stimuli, also called events.
Visual Studio Visual Studio has one of the most comprehensive integrated development environments (IDEs) available today. It includes Visual Web Developer, which enables visual objects, such as labels and buttons, to be directly placed on Web pages. These objects can then be programmed in familiar programming languages such as C# or Visual Basic (VB). Even though this IDE uses HTML and ASP code in the background, the Web page looks and feels like a desktop environment.
ASP.NET ASP.NET’s intrinsic objects are objects that are built into the language. Most of the objects available to ASP.NET will not be displayed in Web pages and are found under the namespace hierarchy. Namespaces are abstract containers used to identify groups of names that represent everything that ASP.NET needs to create Web pages. –Includes classes, objects, properties, methods, and even other namespaces.
System Namespace The System namespace contains the classes and interfaces that facilitate client server communication. The System.Web namespace includes the HttpContext, HttpRequest, HttpResponse, and the HttpServerUtility classes that carry information about the contents of a page, a request for a page, the transmission of the page, and the access to server-side utilities to process the content of the page and user requests. The System.Web namespace also includes other classes for managing cookies, file transfers, and output control.
HttpContext HttpContext contains several methods but only one object, the Current object. The Current object is tied to all HTTP-specific information regarding page requests and facilitates getting or setting all HTTP requests. The HttpContext.Current object provides the other five intrinsic objects: Response, Request, Server, Application, and Session. Because HttpContext is a top-level object, these objects do not require a fully qualified namespace and can be accessed directly.
Response Object The Response object is a top-level object in the HttpContext.Current object. It contains properties and methods relating to browser output. The two most popular uses of this object are to write text directly to the Web page using its Response.Write method and to redirect the browser to another page using its Response.Redirect method.
Request Object The Request object is a top-level object from the HttpContext.Current object. It contains properties and methods related to the browser. This includes retrieving information about the browser, reading cookies, and passing values directly from the Web page. The Request object can also be used with the Response object to display browser information on the Web page.
Server Object The Server object is a top-level object from Httpcontext.Current. The primary focus of the Server object is to make changes to the server.
Storing States Unlike desktop applications, this stateless protocol must be addressed to maintain an ongoing dialog between the browser and server. ASP.NET includes several methods for saving the state of the page between requests. Changes to a Web page, called the current state of the page, are not saved when using a stateless protocol. –Cookies –Query strings –Hidden elements
Session State Session state is a data repository for the user. –It is a server-side technique that uses a session ID number stored on the server and assigned to the browser in the form of a cookie. The session object is used for managing session state. –This object allows the page to store and retrieve values as the user navigates through ASP.NET pages. –Session state retains the identity of the browser during multiple requests, at least for a limited time.
Application State Application state is a data repository for the application. Application state is a server-side technique that uses the Web server to store data. Unlike session state, where session data is saved for the user, application state saves data for everyone using the application. Where session state is temporary and can time out, application state is always available and never times out.
View State View state is a data repository for Web form controls. View state is a client-side technique. Every control has a Boolean property that, when turned on, saves the state of the control on the Web page. View state has a very different purpose from the session and application states. Rather than saving user-created values, view state is designed to save the state of the form and all its controls between postbacks automatically. View state is a client-side technique because it uses hidden elements within the page to store state data rather than the server.
Control State Control state is a data repository for Web form controls. Control state is a client-side technique. Every control automatically saves the state of the control on the Web page. Unlike view state, control state cannot be disabled. Control state stores the essential data and properties of each control that must be available on postback so that the control is able to function.
Summary Writing a Web page using strict XHTML syntax. Validating your HTML for XHTML syntax. Embedding an image using XHTML. Writing inline, internal, and external CSS. Writing CSS using Layout, ID, and Class selectors. Writing HTML for a table that only uses CSS for its borders. Laying out a Web page using the division element and CSS. Using Microsoft Visual Web Developer to create a Web page.
Summary Using the Intrinsic objects of HttpContext. Using the Response object to write to the page. Using the Request object to retrieve browser information from the server. Using the Server object to retrieve server information from the server. Using the Application object to retrieve application information from the server. Using the Session object to retrieve session information from the server.
Summary Using session state to store values on the server for the user. Using application state to store values on the server for all users of the application. Using view state to optionally save the state of the controls on the client. Using control state to save essential values of the controls automatically.