OMT II Mam Saima Gul

* Static web page * a web page with contents that remain fixed and unchanged once it has been created by the author Web server Client computer 1. Client requests web pages 2. Web server looks for the corresponding HTML files 3. HTML files return to client 4. Client browser formats HTML files 2

* Static web page 3

* Dynamic web page * a web page with contents generated “on-the-fly” by the server or the client computer according to clients’ requests * e.g. return the system’s current date and time to the surfer browser (written in Active Server Page) 4

Comparison between static and dynamic web pages 5

* JavaScript * VB Script * Java * Java Applets 6

* Common Gateway Interface (CGI) * a standard that specifies how an application program communicates with the web server * Active Server Pages (ASP) * a server-side scripting language developed by Microsoft * JSP (JavaServer Pages) * developed by Sun Microsystems * combine Java code and HTML(or XML) codes to generate dynamic web pages * HyperText Preprocessor (PHP) * another scripting language for creating dynamic web pages 7

8 * Hypertext Markup Language (HTML) is the text markup language currently used on the World Wide Web. It is used to tell web browsers how to structure and display web pages. First HTML Example Welcome to the world of HTML HTML really isn’t so hard! You can put in lots of text if you want to. In fact, you could keep on typing and make up more sentences and continue on and on.

9 * The preceding example uses some of the most common elements used in HTML documents, which are described here:  The, and tag pairs are used to specify the general structure of the document.  The and tag pair specifies the title of the document that generally appears in the title bar of the web browser.  The and header tag pair creates a headline indicating some important information.  The element, which has no end tag, inserts a horizontal rule, or bar, across the screen.  The and paragraph tag pair indicates a paragraph of text.

10 * So a basic template can be derived for a basic HTML document as shown here: Document Title Goes Here...Other supplementary information goes here Document content and markup go here....

11 * The element delimits the beginning and the end of an HTML document. It contains only the element and the element. * The information in the of an HTML document is very important because it is used to describe or augment the content of the document. The head of an HTML document is like the front matter or cover page of a document. * The most important head element is the element, which most browsers display in a title bar at the top of the browser window. It gives an HTML document a title by which it is known to browsers. Only one element should appear in every document.

12 * Body of a document is delimited by and. Only one element can appear per document. Because the element delimits the document itself, its attributes are primarily used to effect change across the entire document, such as setting background images, background colors, and link and text color.

13 * HTML is not case sensitive. * HTML is sensitive to a single white space character. * HTML elements should close unless empty. * HTML elements should nest. * A simple rule states that HTML should nest, not cross, thus is in error as tags cross Whereas is not since tags nest>/I> * Browsers ignore unknown attributes and elements.

14 * The heading elements are used to create “headlines” in documents. * Six different levels of headings are supported:,,,,, and. These range in importance from, the most important, to, the least important. * Most browsers display headings in larger and/or bolder font than normal text. Heading Example Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6

15 * By setting the ALIGN attribute of the various heading elements, the text may be aligned to the right, left, or center of the screen. Heading Alignment Example Aligned Left Aligned Center Aligned Right

16 * Surrounding text with the and tags indicates that the text is a logical paragraph unit. Normally, the browser places a blank line or two before the paragraph. * Text within the is normally rendered flush left, with a ragged right margin. The ALIGN attribute makes it possible to specify a left, right, or center alignment.

17 Paragraph Example This is the first paragraph in the example about the P tag. There really isn't much to say here. This is the second paragraph. Again, more of the same. This time the paragraph is aligned in the center. This might not be such a good idea as it makes the text hard to read. Here the paragraph is aligned to the right. Right-aligned text is also troublesome to read. The rest of the text of this paragraph is of little importance. Under HTML 4.0-compliant browsers, you are able to justify text. As you may notice, the way browsers tend to justify text is sometimes imprecise. Furthermore, not all browsers support this attribute value.

18 * To insert returns or blank lines in a document, the element must be used. The element is a text-level element that inserts a single carriage return or break into a document. It contains no content and has no end tag. It is an empty element – thus, no close tag. Break Example This is the first paragraph. Not much to say here. This is the second paragraph. Notice all the extra space between these paragraphs. That's from the BR tags.

19 Horizontal Rule Example Size of 10 Width of 50% Width of 200 pixels, size of 3 pixels Width of 100, aligned right Width of 100, aligned left Width of 100, aligned center

20 Physical Text Elements Physical Text Elements This is Bold This is Italic This is Monospaced This is Underlined This is Strike-through This is also Strike-through This is Big This is even Bigger This is Small This is even Smaller This is Superscript This is Subscript

Font Element Demo Font Sizing Font Size 1 Font Size 2 Font Size 3 Font Size 4 Font Size 5 Font Size 6 Font Size 7 This is +2 from the base size. Now it is -1 from the base size.

Font Color Red Text Hex #ffc66 color Font Face Set font to common fonts like Arial Take a chance on an unusual font Even set text to dingbat characters f3khilqm Common Font Face Combinations Arial, Helvetica, sans-serif Combination You can set all attributes at once!

Colors...Content to color...

26