PART 1 - Building a Static Web Site HTTP Request/ Response HTTP Request/ Response HTML HTML DHTML...

transcript

PART 1 - Building a Static PART 1 - Building a Static Web SiteWeb Site

HTTP Request/ HTTP Request/ ResponseResponse

HTMLHTMLDHTMLDHTML

Style Sheet Style Sheet ScriptingScripting

Introduction to URLsIntroduction to URLs

Uniform Resource Locators (URL)Uniform Resource Locators (URL) Identifies location and protocol to Identifies location and protocol to

access a resourceaccess a resource URLs are a form of Uniform Resource URLs are a form of Uniform Resource

Identifier (URI)Identifier (URI)

URL SyntaxURL Syntax

http://www.microsoft.com/ie

ftp://ftp.demon.co.uk

news:comp.infosys.www.announce

mailto:billg@microsoft.com

msdn.microsoft.com

ftp://ftp.demon.co.uk

news:comp.infosys.www.announce

mailto:billg@microsoft.com

msdn.microsoft.com

Scheme Path (scheme-specific format)

This is not a valid URL, but many browsers acceptit as equivalent to http:// msdn.microsoft.com

HTTP URL FormatHTTP URL Format

http://www.microsoft.com:80/ie

http://www.wsdl.org.il

http://www.yahoo.com/index.html

http://www.microsoft.com:80/ie

http://www.wsdl.org.il

http://www.yahoo.com/index.html

Host name Port number. Defaults to 80.

An empty path refers to the home page(server-dependent: may be index.html or default.html)

FTP HTTP TELNET

CLIENT

Ports in ActionPorts in ActionEach process uses a different port:Each process uses a different port:

TCP / UDP

80 123421Port Number :

HyperText Transfer HyperText Transfer Protocol (HTTP)Protocol (HTTP)

Application Level ProtocolApplication Level Protocol Technical information at Technical information at http://www.w3.orghttp://www.w3.org TCP-basedTCP-based Current version is 1.0Current version is 1.0

LightweightLightweight Easy to implement clients and serversEasy to implement clients and servers Stateless: each request is independent from the othersStateless: each request is independent from the others

Request/response paradigmRequest/response paradigm HTTP

Network

Finding a Web Server Finding a Web Server

http://www.google.com/options

TCP/IP

Web Server

GET /options HTTP/1.0

HTTP request:

•Wilkommen•Bienvenue•Welcome

HTTP Request / HTTP Request / ResponseResponse

Client Request:Client Request: Method, Resource, HTTP versionMethod, Resource, HTTP version MIME type header and messageMIME type header and message

Server Response:Server Response: HTTP version and standard response codeHTTP version and standard response code MIME type header and messageMIME type header and message

40.0 Power

GET /index.html HTTP/1.0GET /index.html HTTP/1.0

HTTP/1.0 0 200 OKContent-Length: 793Content-type: text/html<HTML>…</HTML>

Client Web server

HTTP RequestHTTP Request MethodMethod

Action to perform on resourceAction to perform on resource GET, HEAD, POSTGET, HEAD, POST

Uniform Resource IdentifierUniform Resource Identifier Identifies a networked resourceIdentifies a networked resource Absolute URI used with a proxy serverAbsolute URI used with a proxy server Request URI used with an origin serverRequest URI used with an origin server

HTTP VersionHTTP Version Major.minor versionMajor.minor version

MIME-like messageMIME-like message Contains request modifiers and forms dataContains request modifiers and forms data

HTTP ResponseHTTP Response Simple Response/Full ResponseSimple Response/Full Response Status lineStatus line

HTTP version HTTP version Standard status codeStandard status code Reason phraseReason phrase

MIME like messageMIME like message Generated by Web server or by backend scriptGenerated by Web server or by backend script Header fields describe the requested resourceHeader fields describe the requested resource Modified using HTML <META> tagModified using HTML <META> tag Requested dataRequested data Header and Data are separated by Header and Data are separated by CRLF CRLF pairpair

Building static web site Building static web site

o HTTPHTTPo Basic HTMLBasic HTMLo Images Images o Cascading Style Sheet Cascading Style Sheet o FormsFormso Client Scripting Client Scripting o Dynamic HTML Dynamic HTML

Basic HTMLBasic HTML HTML Syntax HTML Syntax Paragraphs Paragraphs Lists Lists Hyperlinks Hyperlinks Frames Frames Tables Tables

HTML PageHTML Page

<HTML>

<HEAD><TITLE>weclome wsttt</TITLE></HEAD>

<BODY>

Welcome to <B> WSTTT </B> course.<BR>

</BODY>

</HTML>

<HTML>

<HEAD><TITLE>weclome wsttt</TITLE></HEAD>

<BODY>

Welcome to <B> WSTTT </B> course.<BR>

</BODY>

</HTML>

Attributes of TagsAttributes of Tags

<P>This is a normal paragraph.</P>

<P ALIGN=CENTER>This paragraph will be aligned in the centre of the page or screen.</P>

<P ALIGN="CENTER">This paragraph will be also be centred.</P>

<P>This is a normal paragraph.</P>

<P ALIGN=CENTER>This paragraph will be aligned in the centre of the page or screen.</P>

<P ALIGN="CENTER">This paragraph will be also be centred.</P>

CommentsComments

<!-- Written by yair, 1/1/2003

Can you see me .. --><HTML><HEAD><TITLE>weclome wsttt</TITLE></HEAD><BODY>Welcome to <B> WSTTT </B> course.<BR></BODY></HTML>

<!-- Written by yair, 1/1/2003

Can you see me .. --><HTML><HEAD><TITLE>weclome wsttt</TITLE></HEAD><BODY>Welcome to <B> WSTTT </B> course.<BR></BODY></HTML>

Special CharactersSpecial Characters How can we express characters like “<” and “>”?How can we express characters like “<” and “>”? Use character entitiesUse character entities

<< << >> >> && && "" " " (non-breaking space)(non-breaking space)

If the relative density > 1.0 then "you have a problem!" If the relative density > 1.0 then "you have a problem!"

Text FormattingText Formatting

<B>Bold</B>, <I>italic</I>, <U>underscored</U>.

FontsFonts

</FONT></P>

</FONT></P>

Ahh ..<BIG>Ahh ..

<BIG>Ahh ..<BIG>Ahh ..

</BIG></BIG></BIG>

Ahh ..<BIG>Ahh ..

<BIG>Ahh ..<BIG>Ahh ..

</BIG></BIG></BIG>

HeadingsHeadings

<H1>Agenda</H1>

<H2>Minutes of last meeting</H2>

<H2>Marketing report</H2>

<H3>Market survey</H3>

<H1>Agenda</H1>

<H2>Minutes of last meeting</H2>

<H2>Marketing report</H2>

<H3>Market survey</H3>

AgendaMinutes of last meeting

Marketing reportMarket survey

AgendaMinutes of last meeting

Marketing reportMarket survey

ListsLists

<P>Shopping list:

</P><P>The prize-winners are

<LI>Colonel Pickering</LI>

<LI>Henry Higgins</LI>

<LI>Eliza Dolittle</LI>

</OL></P>

<P>Shopping list:

</P><P>The prize-winners are

<LI>Colonel Pickering</LI>

<LI>Henry Higgins</LI>

<LI>Eliza Dolittle</LI>

</OL></P>

Shopping list:

• Eggs

• Ham

• Milk

The prize-winners are

1. Colonel Pickering

2. Henry Higgins

3. Eliza Dolittle

Shopping list:

• Eggs

• Ham

• Milk

The prize-winners are

1. Colonel Pickering

2. Henry Higgins

3. Eliza Dolittle

Horizontal RulesHorizontal Rules

DivisionsDivisions

<H1>This is centered.</H1>

</DIV>

<H1>This is centered.</H1>

</DIV>

HyperlinksHyperlinks

SummarySummary

HTML standardsHTML standards Elements of HTMLElements of HTML Character and paragraph formattingCharacter and paragraph formatting ListsLists HyperlinksHyperlinks

ImagesImages GIF, GIF Transparency, GIF GIF, GIF Transparency, GIF

Animation Animation JPG JPG Image Maps Image Maps

FormsForms

Input FieldsInput Fields Text FieldText Field Text AreaText Area Radio ButtonsRadio Buttons Check BoxCheck Box List BoxList Box FileFile

Submitting FormsSubmitting Forms Method GET/POSTMethod GET/POST ActionAction Practicing on a predefine virtual dir with an ASPX Practicing on a predefine virtual dir with an ASPX

sample page sample page

Cascading Style Cascading Style SheetSheet

Line spacing, Indents, Font sizes and Line spacing, Indents, Font sizes and colors colors

Tools for STYLE generation and Tools for STYLE generation and editing editing

In-Line STYLE In-Line STYLE Using CLASS tag to reference a Using CLASS tag to reference a

STYLE placed in the page head STYLE placed in the page head Using external CSS fileUsing external CSS file

Embedded Style SheetsEmbedded Style Sheets

.. .. ..

H1 { font-size: 15pt; font-weight:bold}

P { font: bold italic 12pt/20pt Times, serif}

</STYLE>

.. .. ..

H1 { font-size: 15pt; font-weight:bold}

P { font: bold italic 12pt/20pt Times, serif}

</STYLE>

.. .. ..

Inline Style SheetsInline Style Sheets

This text will be shown with one-inch left and right margins, and doublespaced.

This text is formatted as normal for <P> tags.

This text will be shown with one-inch left and right margins, and doublespaced.

This text is formatted as normal for <P> tags.

Using ClassesUsing Classes

<HEAD>

<STYLE TYPE=“text/css”><!--

P.red_caps {color:red; font-style: small-caps}

.blue_Arial {font-family: Arial; color: blue}

--></STYLE>

</HEAD>

<BODY>

<H1 CLASS=“blue_Arial”>This heading is in blue Arial</H1>

<P CLASS=“red_caps”>This text is in red and all small caps</P>

<P CLASS=“blue_Arial”>This text is in blue Arial, like the heading.</P>

</BODY>

<HEAD>

P.red_caps {color:red; font-style: small-caps}

.blue_Arial {font-family: Arial; color: blue}

--></STYLE>

</HEAD>

<BODY>

<H1 CLASS=“blue_Arial”>This heading is in blue Arial</H1>

<P CLASS=“red_caps”>This text is in red and all small caps</P>

<P CLASS=“blue_Arial”>This text is in blue Arial, like the heading.</P>

</BODY>

<SPAN> container<SPAN> container

Calling out <SPAN STYLE=“background: yellow; font-weight: bold; color: red”>special sections of text</SPAN> is possible using SPAN container.

<HEAD>

SPAN {background: yellow; font-weight: bold; color: red}

--></STYLE>

</HEAD>

<BODY>

Calling out <SPAN>special sections of text</SPAN> is possible using SPAN container.

</BODY>

<HEAD>

SPAN {background: yellow; font-weight: bold; color: red}

--></STYLE>

</HEAD>

<BODY>

Calling out <SPAN>special sections of text</SPAN> is possible using SPAN container.

</BODY>

Using DivisionsUsing Divisions

<HEAD>

.red_on_yellow {background: yellow; font-weight: bold; color: red}

--></STYLE>

</HEAD>

<BODY>

</DIV>

</BODY>

<HEAD>

.red_on_yellow {background: yellow; font-weight: bold; color: red}

--></STYLE>

</HEAD>

<BODY>

</DIV>

</BODY>

ID attributeID attribute

<H1 ID=“FirstHeading”>Welcome to WSTTT!<H1><H1 ID=“FirstHeading”>Welcome to WSTTT!<H1>

<HEAD>

#FirstHeading {background: yellow; font-weight: bold; color: red}

--></STYLE>

</HEAD>

<BODY>

<H1 ID=“FirstHeading”>Welcome to WSTTT!<H1>

</BODY>

<HEAD>

#FirstHeading {background: yellow; font-weight: bold; color: red}

--></STYLE>

</HEAD>

<BODY>

<H1 ID=“FirstHeading”>Welcome to WSTTT!<H1>

</BODY>

Linking to a Style SheetLinking to a Style Sheet

<HEAD>

</HEAD>

<HEAD>

</HEAD>

Client ScriptingClient Scripting The SCRIPT tag The SCRIPT tag Variables and Decision Making (if Variables and Decision Making (if

statement) statement) Using Functions Using Functions HTML generation (document. write) HTML generation (document. write) Events and FORM Validation Events and FORM Validation Error handling and Debugging Error handling and Debugging

TheThe <SCRIPT><SCRIPT> Tag Tag

Simple JavaScript Simple JavaScript ExampleExample

… <BODY>…Welcome to my web site!

… <BODY>…Welcome to my web site!

Variables and Decision Variables and Decision MakingMaking

<SCRIPT LANGUAGE="JavaScript"><!-- var d = new Date(); var w = d.getDay(); var s;

if (w==0) s="Sunday"; if (w==1) s="Monday"; if (w==2) s="Tuesday"; if (w==3) s="Wednesday"; if (w==4) s="Thursday"; if (w==5) s="Friday"; if (w==6) s="Saturday"; alert(s);//--></SCRIPT>

<SCRIPT LANGUAGE="JavaScript"><!-- var d = new Date(); var w = d.getDay(); var s;

if (w==0) s="Sunday"; if (w==1) s="Monday"; if (w==2) s="Tuesday"; if (w==3) s="Wednesday"; if (w==4) s="Thursday"; if (w==5) s="Friday"; if (w==6) s="Saturday"; alert(s);//--></SCRIPT>

Using FunctionsUsing Functions<SCRIPT LANGUAGE="JavaScript"><!--function ShowTheDay(){ var d = new Date(); var w = d.getDay(); var s;

if (w==0) s="Sunday"; if (w==1) s="Monday"; if (w==2) s="Tuesday"; if (w==3) s="Wednesday"; if (w==4) s="Thursday"; if (w==5) s="Friday"; if (w==6) s="Saturday"; alert(s);}//--></SCRIPT>

<SCRIPT LANGUAGE="JavaScript"><!--function ShowTheDay(){ var d = new Date(); var w = d.getDay(); var s;

if (w==0) s="Sunday"; if (w==1) s="Monday"; if (w==2) s="Tuesday"; if (w==3) s="Wednesday"; if (w==4) s="Thursday"; if (w==5) s="Friday"; if (w==6) s="Saturday"; alert(s);}//--></SCRIPT>

HTML GenerationHTML Generationfunction ShowTheDay(){ var d = new Date(); var w = d.getDay(); var s;

if (w==0) s="Sunday"; if (w==1) s="Monday"; if (w==2) s="Tuesday"; if (w==3) s="Wednesday"; if (w==4) s="Thursday"; if (w==5) s="Friday"; if (w==6) s="Saturday"; document.write("Today is <B>" + s + "</B>");}

function ShowTheDay(){ var d = new Date(); var w = d.getDay(); var s;

if (w==0) s="Sunday"; if (w==1) s="Monday"; if (w==2) s="Tuesday"; if (w==3) s="Wednesday"; if (w==4) s="Thursday"; if (w==5) s="Friday"; if (w==6) s="Saturday"; document.write("Today is <B>" + s + "</B>");}

Validation (1)Validation (1)

A form’s A form’s ONSUBMITONSUBMIT attribute is a attribute is a Boolean valueBoolean value Typically a script functionTypically a script function Returns true: form is valid and is Returns true: form is valid and is

submittedsubmitted Returns false: form is not valid and is Returns false: form is not valid and is

not submittednot submitted

<FORM METHOD="POST" NAME="DrinkSelector" ONSUBMIT="return isValidDrink(this)"><INPUT type="radio" checked name="RadioDrink" value="Tea">Tea<INPUT type="radio" name="RadioDrink" value="Coffee">Coffee<INPUT type="radio" name="RadioDrink" value="Soup">Soup<INPUT type="checkbox" name="CheckMilk" value="ON">Milk<INPUT type="checkbox" name="CheckSugar" value="ON">Sugar<INPUT type="submit" name="OKButton" value="Vend"> </FORM>

Validation(2)Validation(2)

function isValidDrink(theForm){ if (theForm.RadioDrink[2].Checked && (theForm.CheckMilk.Checked || theForm.CheckSugar.Checked)) { alert("You can't have milk or sugar with soup!"); return false; // Problem } else return true; // OK}

Dynamic HTMLDynamic HTML Dynamic Styles Dynamic Styles Changing Contents Changing Contents

Sample 1/2Sample 1/2

<DIV id="DIV1" style="BACKGROUND-COLOR: powderblue"

onmouseover="DIV1_OnNouseOver()"onmouseout="DIV1_OnNouseOut()">Bring your mouse over here

</DIV>

<DIV id="DIV2“ style="BACKGROUND-COLOR: violet">and see the background changed here

</DIV>

Sample 2/2Sample 2/2var DIV2_BackGround

function winOnLoad(){

DIV2_BackGround = DIV2.style.backgroundColor;}function DIV1_OnNouseOver(){

DIV2.style.backgroundColor = "royalblue";}

function DIV1_OnNouseOut(){

DIV2.style.backgroundColor = DIV2_BackGround;}

What Next? – Web What Next? – Web ApplicationApplication

C#C#SQLSQLADO.Net ADO.Net ASP.NetASP.Net

PART 1 - Building a Static Web Site HTTP Request/ Response HTTP Request/ Response HTML HTML DHTML...

Documents