33
Creating a Web Page Creating a Web Page
| Date post: | 13-May-2017 |
| Category: |
Documents |
| Upload: | carlos-bruni |
| View: | 219 times |
| Download: | 4 times |
Creating a Web PageCreating a Web Page
ObjectivesObjectives
HTMLHTML• 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><!DOCTYPE>• <!DOCTYPE> is the declaration
statement that uses the three words: strict, transitional, and frameset.
• The <!DOCTYPE> statement is optional in HTML but required for XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Elements and TagsElements 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. <br></br> or <br />.
AttributesAttributes• 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: <img src='myImage.jpg' />.
• The quotation marks around the attribute value may either be single, as shown, or double.
Basic ElementsBasic Elements• The HTML language commonly uses the
<html>, <head>, <title>, and <body> elements in Web pages, and all of these elements are required for XHTML.
• The <html> element is the required “root” element of an XHTML page.
• All nested elements within the <html> starting and ending tags are called child elements of the <html> element.
<head> Element<head> Element• The <head> element contains information
about the document but is not part of the document content.
• Although not required, a <meta> element should be included as a child element of the <head> 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.
<title> and <body> Elements<title> and <body> Elements• The <title> element is required for XHTML,
which provides the browser with a title and is used for bookmarking.
• The <body> 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 <p>.
Validating HTMLValidating 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 HTMLWriting 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 HTMLEmbedding Images with HTML• The image element <img> 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)• 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)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 TablesCreating 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 <table> tag,
while its components are <tr> for table row and <td> for table data.
• Some of the more specialized elements are <caption> to display the name and <th> for the headers.
Laying Out HTML On a PageLaying 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, Creating Web Pages Using the Properties, Methods and Events of ASP.NET Intrinsic Methods and Events of ASP.NET Intrinsic ObjectsObjects• 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, Creating Web Pages Using the Properties, Methods and Events of ASP.NET Intrinsic Methods and Events of ASP.NET Intrinsic ObjectsObjects• 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 StudioVisual 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.NETASP.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 NamespaceSystem 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.
HttpContextHttpContext• 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 ObjectResponse 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 ObjectRequest 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 ObjectServer 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 StatesStoring 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 StateSession 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 StateApplication 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 StateView 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 StateControl 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.
SummarySummary• 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.
SummarySummary• 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.
SummarySummary• 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.
