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.

OMT II

Mam Saima Gul

*Introduction to HTML

*Static Web Pages versus Dynamic Web Pages

*Static web page

*a web page with contents that remain fixed and unchanged once it has been created by the author

Web serverClient 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 pages5

*Client-Side Processing Technologies

*JavaScript

*VB Script

*Java

*Java Applets

6

*Server-Side Processing Technologies

*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 pages7

8

*HTML Basics

*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.

<HTML>

<HEAD>

<TITLE>First HTML Example</TITLE>

</HEAD>

<BODY>

<H1>Welcome to the world of HTML</H1>

<HR>

<P>HTML <B>really</B> isn’t so hard!</P>

<P>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. </P>

</BODY>

</HTML>

9

*HTML Basics (Contd.)

*The preceding example uses some of the most common elements used in HTML documents, which are described here:

The <HTML>, <HEAD> and <BODY> tag pairs are used to specify the general structure of the document.

The <TITLE> and </TITLE> tag pair specifies the title of the document that generally appears in the title bar of the web browser.

The <H1> and </H1> header tag pair creates a headline indicating some important information.

The <HR> element, which has no end tag, inserts a horizontal rule, or bar, across the screen.

The <P> and </P> paragraph tag pair indicates a paragraph of text.

10

*HTML Basics (Contd.)

*So a basic template can be derived for a basic HTML document as shown here:

<HTML>

<HEAD>

<TITLE>Document Title Goes Here</TITLE>

...Other supplementary information goes here....

</HEAD>

<BODY>

...Document content and markup go here....

</BODY>

</HTML>

11

*The <HTML> Element

*The <HTML> element delimits the beginning and the end of an HTML document. It contains only the <HEAD> element and the <BODY> element.

*The <HEAD> Element

*The information in the <HEAD> 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 <TITLE> Element

*The most important head element is the <TITLE> 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 <TITLE> element should appear in every document.

12

*The <BODY> Element

*Body of a document is delimited by <BODY> and </BODY>. Only one <BODY> element can appear per document. Because the <BODY> 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

*The Rules of HTML

*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

<B><I>is in error as tags cross</B></I>

Whereas

<B><I>is not since tags nest>/I></B>

*Browsers ignore unknown attributes and elements.

14

*Headings* The heading elements are used to create “headlines” in documents.

* Six different levels of headings are supported: <H1>, <H2>, <H3>, <H4>, <H5>, and <H6>. These range in importance from <H1>, the most important, to <H6>, the least important.

*Most browsers display headings in larger and/or bolder font than normal text.

<HTML>

<HEAD>

<TITLE>Heading Example</TITLE>

</HEAD>

<BODY>

<H1>Heading 1</H1>

<H2>Heading 2</H2>

<H3>Heading 3</H3>

<H4>Heading 4</H4>

<H5>Heading 5</H5>

<H6>Heading 6</H6>

</BODY>

</HTML>

15

*Heading (Contd.)

*By setting the ALIGN attribute of the various heading elements, the text may be aligned to the right, left, or center of the screen.

<HTML>

<HEAD>

<TITLE>Heading Alignment Example</TITLE>

</HEAD>

<BODY>

<H1 ALIGN="left">Aligned Left</H1>

<H1 ALIGN="center">Aligned Center</H1>

<H1 ALIGN="right">Aligned Right</H1>

</BODY>

</HTML>

16

*Paragraphs and Breaks

*Surrounding text with the <P> and </P> 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 <P> 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

*Paragraphs and Breaks (Contd.)

<HTML>

<HEAD>

<TITLE>Paragraph Example</TITLE>

</HEAD>

<BODY>

<P>This is the first paragraph in the example about the P tag. There really isn't much to say here.</P>

<P ALIGN="center">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.</P>

<P ALIGN="right">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.</P>

<P ALIGN="justify">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.</P>

</BODY>

</HTML>

18

*Paragraphs and Breaks (Contd.)*To insert returns or blank lines in a document, the <BR>

element must be used. The <BR> 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.

<HTML>

<HEAD>

<TITLE>Break Example</TITLE>

</HEAD>

<BODY>

<P>This is the first paragraph.<BR>

Not much to say here.</P>

<BR><BR><BR>

<P>This is the second paragraph. Notice all the extra space between these paragraphs. That's from the BR tags.</P>

</BODY>

</HTML>

19

*Horizontal Rules<HTML>

<HEAD>

<TITLE>Horizontal Rule Example</TITLE>

</HEAD>

<BODY>

<P>Size of 10</P>

<HR SIZE=10>

<P>Width of 50%</P>

<HR WIDTH=50%>

<P>Width of 200 pixels, size of 3 pixels</P>

<HR WIDTH=200 SIZE=3>

<P>Width of 100, aligned right</P>

<HR ALIGN="right" WIDTH=100>

<P>Width of 100, aligned left</P>

<HR ALIGN="left" WIDTH=100>

<P>Width of 100, aligned center</P>

<HR ALIGN="center" WIDTH=100>

</BODY>

</HTML>

20

*Physical Character-Formatting Elements<HTML>

<HEAD>

<TITLE>Physical Text Elements</TITLE>

</HEAD>

<BODY>

<H1 ALIGN="center">Physical Text Elements</H1>

<HR>

This is <B>Bold</B> <BR>

This is <I>Italic</I> <BR>

This is <TT>Monospaced</TT> <BR>

This is <U>Underlined</U> <BR>

This is <STRIKE>Strike-through</STRIKE> <BR>

This is also <S>Strike-through</S> <BR>

This is <BIG>Big</BIG> <BR>

This is even <BIG><BIG>Bigger</BIG></BIG> <BR>

This is <SMALL>Small</SMALL> <BR>

This is even <SMALL><SMALL>Smaller</SMALL></SMALL> <BR>

This is <SUP>Superscript</SUP> <BR>

This is <SUB>Subscript</SUB> <BR>

</BODY> </HTML>

*Basic Layout:Text, Colors, and

Backgrounds

*Fonts<html>

<head>

<title>Font Element Demo</title>

<body>

<h2 align = "center">Font Sizing</h2>

<font size=1>Font Size 1</font><br>







This is <font size = +2>+2 from the base size.</font>

Now it is <font size = -1>-1 from the base size.</font>

*Fonts (Contd.)<h2 align="center">Font Color</h2>

<font color="red">Red Text</font><br>

<font color = "#ffc66">Hex #ffc66 color</font>

<h2 align="center">Font Face</h2>

<font face="Arial">Set font to common fonts like Arial</font><br>

<font face="'Viner Hand ITC'">Take a chance on an unusual font</font><br>

Even set text to dingbat characters

<font face="Webdings">f3khilqm</font><br>

<h2 align="center">Common Font Face Combinations</h2>

<font face=Arial,Helvetica,sans-serif">

Arial, Helvetica, sans-serif</font><br>

<h2 align="center">Combination</h2>

You can <font size=02 color="red" face="Arial">set all attributes at once!</font>

</body></html>

* Common HTML 4 Color Names and HEX Values

* Document-Wide Color Attributes for <BODY><HTML>

<HEAD>

<TITLE>Colors</TITLE>

</HEAD>

<BODY BGCOLOR="pink" TEXT="#008000">

...Content to color...

</BODY>

</HTML>

26

*The End

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.

Documents

basic html document

document title

world of html html

web browsers

dynamic web pages

document content

static web page

entire document