PART 1 - Building a Static Web Site
-
Upload
evan-ayers -
Category
Documents
-
view
33 -
download
0
description
Transcript of PART 1 - Building a Static Web Site
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:[email protected]
msdn.microsoft.com
http://www.microsoft.com/ie
ftp://ftp.demon.co.uk
news:comp.infosys.www.announce
mailto:[email protected]
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/ie
http://www.microsoft.com:80/ie
http://www.wsdl.org.il
http://www.yahoo.com/index.html
http://www.microsoft.com/ie
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
IP
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
TCP
IP
Network
Finding a Web Server Finding a Web Server
http://www.google.com/options
DNS
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
Turbo
Reset
GET /index.html HTTP/1.0GET /index.html HTTP/1.0
HTTP/1.0 0 200 OKContent-Length: 793Content-type: text/html<HTML>…</HTML>
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!"
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
<P>
<B>Bold</B>, <I>italic</I>, <U>underscored</U>.
</P>
<P>
<P>
<B>Bold</B>, <I>italic</I>, <U>underscored</U>.
</P>
<P>
FontsFonts
<P><FONT SIZE="7">
<FONT FACE="Garamond, Times New Roman, Times"><I>The</I></FONT>
<FONT FACE="Arial Black, Arial, Helvetica"><B>News</B></FONT>
</FONT></P>
<P><FONT SIZE="7">
<FONT FACE="Garamond, Times New Roman, Times"><I>The</I></FONT>
<FONT FACE="Arial Black, Arial, Helvetica"><B>News</B></FONT>
</FONT></P>
Ahh ..<BIG>Ahh ..
<BIG>Ahh ..<BIG>Ahh ..
</BIG></BIG></BIG>
<SMALL><SMALL>Choo!</SMALL></SMALL>
Ahh ..<BIG>Ahh ..
<BIG>Ahh ..<BIG>Ahh ..
</BIG></BIG></BIG>
<SMALL><SMALL>Choo!</SMALL></SMALL>
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:
<UL>
<LI>Eggs</LI>
<LI>Ham</LI>
<LI>Milk</LI>
</UL>
</P><P>The prize-winners are
<OL TYPE="1">
<LI>Colonel Pickering</LI>
<LI>Henry Higgins</LI>
<LI>Eliza Dolittle</LI>
</OL></P>
<P>Shopping list:
<UL>
<LI>Eggs</LI>
<LI>Ham</LI>
<LI>Milk</LI>
</UL>
</P><P>The prize-winners are
<OL TYPE="1">
<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
<HR>
<HR NOSHADE ALIGN="CENTER" WIDTH="50%" SIZE="8">
<HR>
<HR NOSHADE ALIGN="CENTER" WIDTH="50%" SIZE="8">
DivisionsDivisions
<DIV ALIGN=CENTER>
<H1>This is centered.</H1>
<H2>and so is this</H2>
<P>and so is this</P>
</DIV>
<DIV ALIGN=CENTER>
<H1>This is centered.</H1>
<H2>and so is this</H2>
<P>and so is this</P>
</DIV>
HyperlinksHyperlinks
<A HREF="http://msdn.microsoft.com">GO</A>
<A HREF="http://msdn.microsoft.com">GO</A>
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
<IMG SRC=“pic1.gif" WIDTH=100 HEIGHT=100>
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
.. .. ..
<STYLE TYPE="text/css">
<!--
H1 { font-size: 15pt; font-weight:bold}
P { font: bold italic 12pt/20pt Times, serif}
-->
</STYLE>
.. .. ..
.. .. ..
<STYLE TYPE="text/css">
<!--
H1 { font-size: 15pt; font-weight:bold}
P { font: bold italic 12pt/20pt Times, serif}
-->
</STYLE>
.. .. ..
Inline Style SheetsInline Style Sheets
<P STYLE="margin-left: 1in; margin-right: 1in; line-height:200%">
This text will be shown with one-inch left and right margins, and doublespaced.
</P>
<P>
This text is formatted as normal for <P> tags.
</P>
<P STYLE="margin-left: 1in; margin-right: 1in; line-height:200%">
This text will be shown with one-inch left and right margins, and doublespaced.
</P>
<P>
This text is formatted as normal for <P> tags.
</P>
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>
<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>
<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.
Calling out <SPAN STYLE=“background: yellow; font-weight: bold; color: red”>special sections of text</SPAN> is possible using SPAN container.
<HEAD>
<STYLE TYPE=“text/css”><!--
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>
<STYLE TYPE=“text/css”><!--
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>
<STYLE TYPE=“text/css”><!--
.red_on_yellow {background: yellow; font-weight: bold; color: red}
--></STYLE>
</HEAD>
<BODY>
<DIV CLASS=“red_on_yellow” ALIGN=CENTER>
…
</DIV>
</BODY>
<HEAD>
<STYLE TYPE=“text/css”><!--
.red_on_yellow {background: yellow; font-weight: bold; color: red}
--></STYLE>
</HEAD>
<BODY>
<DIV CLASS=“red_on_yellow” ALIGN=CENTER>
…
</DIV>
</BODY>
ID attributeID attribute
<H1 ID=“FirstHeading”>Welcome to WSTTT!<H1><H1 ID=“FirstHeading”>Welcome to WSTTT!<H1>
<HEAD>
<STYLE TYPE=“text/css”><!--
#FirstHeading {background: yellow; font-weight: bold; color: red}
--></STYLE>
</HEAD>
<BODY>
<H1 ID=“FirstHeading”>Welcome to WSTTT!<H1>
</BODY>
<HEAD>
<STYLE TYPE=“text/css”><!--
#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>
…
<LINK REL=STYLESHEET HREF="mystylesheet.css" TYPE="text/css">
</HEAD>
<HEAD>
…
<LINK REL=STYLESHEET HREF="mystylesheet.css" TYPE="text/css">
</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
<SCRIPT LANGUAGE ="JavaScript"><!-- // Put your JavaScript here!//--></SCRIPT>
<SCRIPT LANGUAGE ="JavaScript"><!-- // Put your JavaScript here!//--></SCRIPT>
<SCRIPT LANGUAGE ="VBScript"><!-- ' Put your VBScript here!--></SCRIPT>
<SCRIPT LANGUAGE ="VBScript"><!-- ' Put your VBScript here!--></SCRIPT>
Simple JavaScript Simple JavaScript ExampleExample
… <BODY>…Welcome to my web site!
<SCRIPT LANGUAGE="JavaScript"><!-- // My first JavaScript program alert("Welcome to JavaScript!");//--></SCRIPT>…</BODY></HTML>
… <BODY>…Welcome to my web site!
<SCRIPT LANGUAGE="JavaScript"><!-- // My first JavaScript program alert("Welcome to JavaScript!");//--></SCRIPT>…</BODY></HTML>
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>
<SCRIPT LANGUAGE="JavaScript"><!-- ShowTheDay()//--></SCRIPT>
<SCRIPT LANGUAGE="JavaScript"><!-- ShowTheDay()//--></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>
<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}
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}
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;}