Frames Creating Frames Using frames you can split

Frames

Creating Frames Using frames, you can split a single Web page into multiple windows, each of which can open a different document Frames are independent, scrollable portions of a Web browser window, with each frame capable of displaying a different document

Creating Frames

Creating Frames You divide a document into frames using the <frameset> element The <frame> element and other <frameset> elements are the only items that you can place inside a <frameset> element

Creating Frames Two attributes of the <frameset> element, rows and cols, determine whether frames are created as rows or columns ◦ The rows attribute determines the number of horizontal frames to create ◦ The cols attribute determines the number of vertical frames to create The src attribute of the <frame> element specifies the document to be opened in an individual frame

Using the target and base Attributes One popular use of frames creates a table of contents frame on the left side of a Web browser window with a display frame on the right side The target attribute determines in which frame or Web browser window a document opens When you are using the same target window or frame for a long list of hyperlinks, it is easier to use the target attribute in the <base> element instead of repeating the target attribute within each hyperlink You use the target attribute with the <base> element to specify a default target for all links in a document, using the assigned name of a window or frame

Nesting Frames Each individual frame within a window can contain its own set of frames You accomplish this nesting by including a <frameset> element inside another <frameset> element Frames that are contained within other frames are called nested frames In Figure 5 -9, the first <frameset> element creates the four parent frames in the window

Nested Frames

HTML Frameset DESCRIPTION Attributes of frameset tag PROPERTY border =pixel count Define border width of frames inside frameset Frameborder Controles border of frames whether to display a border or not Yes | no Cols Define the size of the column arrangement of frames inside frameset Rows Define the size of the rows arrangement of frames inside frameset framespacing Spacing in pixels between frames

HTML Frames DESCRIPTION Attributes of frame tag PROPERTY Bordercolor sets color for the border of frame scrolling No | yes Prevent or allow scrolling in the frame src Define the URL of the contents to be loaded

HTML Frames <frameset rows="50%, 50%" cols="50%, 50%"> <frame src="topleft. htm" name="topleft"> <frame src="topright. htm" name="topright"> <frame src="botleft. htm" name="botleft"> <frame src="botright. htm" name="botright"> </frameset> topleft topright botleft botright

LINKS WITHIN frames Jump to the <a href="analysis. htm" target="main">Analysis</a> of the project The target can be a name of a frame that you specified in the FRAME tag or one of the following Values: q"_blank“ Loads the link into a new blank window. q"_self“ Loads the link into the same window. (default) q"_top“ Loads the link into the full body of the current window.

Cascading Style Sheets - CSS CSS was developed by the W 3 C. CSS is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML, XHTML and any kind of XML document. Styles define how to display HTML elements (font face, size, color, alignment, …etc) The term cascading derives from the fact that multiple style sheets can be applied to the same Web page.

Why use CSS? With CSS we have the following benefits: 1. The Separation of Structure and Presentation 2. Managing Style at Large Sites 3. Improved performance 4. Decreased production work 5. Ease of maintenance of large sites

How to Link CSS? CSS can be linked to an HTML document as: 1. Inline style 2. Embedding a style tag 3. Linking to an external stylesheet file 4. Importing a stylesheet

1. Embedding a style tag You define internal styles in the head section by using the <style> tag An embedded (internal) style sheet should be used when a single document has a unique style. <STYLE TYPE="text/css"> <!-H 1 { color: blue } H 2 { color: red} --> </STYLE>

2. Linking to an external style sheet file An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head> <link type="text/css" href="style. css"> </head>

3. Importing a style sheet Imported Style Sheet is a sheet that can be imported to (combined with) another sheet. <STYLE TYPE="text/css"> <!-@import url(“styles 1. css); @import url(“style 2. css”); p {color: yellow } --> </STYLE>

4. Inline style loses many of the advantages of style sheets by mixing content with presentation. Example: <P STYLE="color: red; font-family: ‘Ariel‘ "> This paragraph is styled in red with the Ariel font, if available. </P>

CSS Syntax The CSS syntax rule is made up of three parts: 1. selector 2. property 3. value selector is the tag to be affected property and value describe the appearance of that tag Style rules are formed as follows: selector {property: value} p {font-family: "sans serif"}

CSS Syntax (Cont. ) Three selectors are defined for use when implementing Style Sheets: 1. The style attribute of HTML element 2. IDs 3. Classes

1. The style attribute of HTML element The STYLE attribute can be added to any HTML element Example: <span Style = ‘ font-family: "sans serif "; color: "blue"; textalign: center ’> Hello There! </span>

2. IDs The ID attribute is used to define a unique style for an element. Example: ü In the CSS #id 1 {color: red} ü In the HTML <div id=id 1 > This is the div with the id. </div>

3. Classes allow you to define a style which can be applied to multiple elements on your page. Example 1: - Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles: ü In the CSS p. right {text-align: right} p. center {text-align: center} ü In the HTML <p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p>

3. Classes (Cont. ) Example 2: - To apply more than one class per given element: ü ü In the CSS p. bold { font-weight: bold } p. large { font-size: xx-large} In the HTML <p class=“bold large"> This paragraph will be Bold & very large. </p> The paragraph above will be styled by the class “bold" AND the class “large".

Comments <STYLE TYPE="text/css"> <!-/* H 1 { color: red; font-family: “Verdana“; } */ --> </STYLE>

Grouping selectors is done by separating each selector with a comma: h 1, h 2, h 3, h 4, h 5, h 6 { color: green, font-family: "Ariel”}

Cascading Order Styles will be applied to HTML in the following order: 1. Browser default 2. External style sheet 3. Internal style sheet 4. Inline style When styles conflict, the “nearest” (most recently applied) style wins

Example of cascading order • External Style sheet h 3 { color: red; text-align: left; font-size: 8 pt } • Resultant attributes • Internal Style sheet h 3 { text-align: right; font-size: 20 pt } color: red; text-align: right; font-size: 20 pt

Client Side Scripts Interpreted languages �� Java. Script �� VBScript �� JScript

Static and dynamic web sites

Static and dynamic web sites HTML files

Cold. Fusion It has a powerful IDE that can help you get productive quickly, Its overall simplicity and tag-based syntax make it easy to learn

Introducing Web Services A Web Service is a programmable application component that provides a particular functionality, such as a business logic, that is accessible to any number of potentially disparate systems via standard Web protocols such as HTTP, XML, SOAP, and UDDI. ASP. NET Web Form Pages are text files with a. asmx filename extension. Web Services enable the exchange of data in business to consumer (b 2 c) and business to business (b 2 b) scenarios, providing access to remotely distributed business applications that can be manipulated from a variety of Internet-enabled clients and devices. A Web Service can be used either internally by a single application or exposed externally over the Internet for use by any number of applications. Because it is accessible through a standard interface, a Web Service allows disparate systems to work together as a single Web application.

XML: The future XML is a way of labeling or tagging information so that it can be retrieved or inserted into a website

Web Servers Apache IIS IPlanet Zeus

Certificates Using certificates for privacy and security How do security certificates work? Where do you get your own security certificates personal certificate Web site certificate is a verification that you are who you say you are states that a specific Web site is secure and genuine