1 / 46

PART 1 - Building a Static Web Site

PART 1 - Building a Static Web Site. HTTP Request/ Response HTML DHTML Style Sheet Scripting. Introduction to URLs. Uniform Resource Locators (URL) Identifies location and protocol to access a resource URLs are a form of Uniform Resource Identifier (URI). http://www.microsoft.com/ie

evan-ayers
Download Presentation

PART 1 - Building a Static Web Site

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. PART 1 - Building a Static Web Site • HTTP Request/ Response • HTML • DHTML • Style Sheet • Scripting

  2. Introduction to URLs • Uniform Resource Locators (URL) • Identifies location and protocol to access a resource • URLs are a form of Uniform Resource Identifier (URI)

  3. http://www.microsoft.com/ie ftp://ftp.demon.co.uk news:comp.infosys.www.announce mailto:billg@microsoft.com msdn.microsoft.com URL Syntax Scheme Path (scheme-specific format) This is not a valid URL, but many browsers accept it as equivalent to http:// msdn.microsoft.com

  4. HTTP URL Format Port number. Defaults to 80. Host name http://www.microsoft.com/ie http://www.microsoft.com:80/ie http://www.wsdl.org.il http://www.yahoo.com/index.html An empty path refers to the home page (server-dependent: may be index.html or default.html)

  5. Ports in Action • Each process uses a different port: TELNET CLIENT FTP HTTP 1234 Port Number : 21 80 TCP / UDP IP

  6. HTTP TCP IP Network HyperText Transfer Protocol (HTTP) • Application Level Protocol • Technical information at http://www.w3.org • TCP-based • Current version is 1.0 • Lightweight • Easy to implement clients and servers • Stateless: each request is independent from the others • Request/response paradigm

  7. DNS TCP/IP HTTP request: GET /options HTTP/1.0 Finding a Web Server Web Server http://www.google.com/options • Wilkommen • Bienvenue • Welcome

  8. HTTP Request / Response • Client Request: • Method, Resource, HTTP version • MIME type header and message • Server Response: • HTTP version and standard response code • MIME type header and message GET /index.html HTTP/1.0 Client Web server HTTP/1.0 0 200 OKContent-Length: 793Content-type: text/html¿<HTML>…</HTML>

  9. HTTP Request • Method • Action to perform on resource • GET, HEAD, POST • Uniform Resource Identifier • Identifies a networked resource • Absolute URI used with a proxy server • Request URI used with an origin server • HTTP Version • Major.minor version • MIME-like message • Contains request modifiers and forms data

  10. HTTP Response • Simple Response/Full Response • Status line • HTTP version • Standard status code • Reason phrase • MIME like message • Generated by Web server or by backend script • Header fields describe the requested resource • Modified using HTML <META> tag • Requested data • Header and Data are separated by CRLF pair

  11. Building static web site • HTTP • Basic HTML • Images • Cascading Style Sheet • Forms • Client Scripting • Dynamic HTML

  12. Basic HTML • HTML Syntax • Paragraphs • Lists • Hyperlinks • Frames • Tables

  13. HTML Page <HTML> <HEAD><TITLE>weclome wsttt</TITLE></HEAD> <BODY> Welcome to <B> WSTTT </B> course.<BR> </BODY> </HTML>

  14. Attributes 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>

  15. Comments <!-- 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>

  16. Special Characters • How can we express characters like “<” and “>”? • Use character entities • < &lt; • > &gt; • & &amp; • " &quot; • (non-breaking space) &nbsp; If the relative density &gt; 1.0 then &quot;you have a problem!&quot; If the relative density > 1.0 then "you have a problem!"

  17. Text Formatting <P> <B>Bold</B>, <I>italic</I>, <U>underscored</U>. </P> <P>

  18. Fonts <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>

  19. Headings <H1>Agenda</H1> <H2>Minutes of last meeting</H2> <H2>Marketing report</H2> <H3>Market survey</H3> Agenda Minutes of last meeting Marketing report Market survey

  20. Lists <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

  21. Horizontal Rules <HR> <HR NOSHADE ALIGN="CENTER" WIDTH="50%" SIZE="8">

  22. Divisions <DIV ALIGN=CENTER> <H1>This is centered.</H1> <H2>and so is this</H2> <P>and so is this</P> </DIV>

  23. Hyperlinks <A HREF="http://msdn.microsoft.com">GO</A>

  24. Summary • HTML standards • Elements of HTML • Character and paragraph formatting • Lists • Hyperlinks

  25. Images • GIF, GIF Transparency, GIF Animation • JPG • Image Maps <IMGSRC=“pic1.gif" WIDTH=100 HEIGHT=100>

  26. Forms • Input Fields • Text Field • Text Area • Radio Buttons • Check Box • List Box • File • Submitting Forms • Method GET/POST • Action • Practicing on a predefine virtual dir with an ASPX sample page

  27. Cascading Style Sheet • Line spacing, Indents, Font sizes and colors • Tools for STYLE generation and editing • In-Line STYLE • Using CLASS tag to reference a STYLE placed in the page head • Using external CSS file

  28. Embedded Style Sheets .. .. .. <STYLE TYPE="text/css"> <!-- H1 { font-size: 15pt; font-weight:bold} P { font: bold italic 12pt/20pt Times, serif} --> </STYLE> .. .. ..

  29. Inline 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 &lt;P&gt; tags. </P>

  30. Using 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>

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

  32. Using 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>

  33. ID attribute <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>

  34. Linking to a Style Sheet <HEAD> … <LINK REL=STYLESHEET HREF="mystylesheet.css" TYPE="text/css"> </HEAD>

  35. Client Scripting • The SCRIPT tag • Variables and Decision Making (if statement) • Using Functions • HTML generation (document. write) • Events and FORM Validation • Error handling and Debugging

  36. The<SCRIPT> Tag <SCRIPT LANGUAGE ="JavaScript"> <!-- // Put your JavaScript here! //--> </SCRIPT> <SCRIPT LANGUAGE ="VBScript"> <!-- ' Put your VBScript here! --> </SCRIPT>

  37. Simple JavaScript Example … <BODY> … Welcome to my web site! <SCRIPT LANGUAGE="JavaScript"> <!-- // My first JavaScript program alert("Welcome to JavaScript!"); //--> </SCRIPT> … </BODY> </HTML>

  38. Variables and Decision Making <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>

  39. Using 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"> <!-- ShowTheDay() //--> </SCRIPT>

  40. HTML Generation 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>"); }

  41. Validation (1) • A form’s ONSUBMIT attribute is a Boolean value • Typically a script function • Returns true: form is valid and is submitted • Returns false: form is not valid and is not 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>

  42. 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 }

  43. Dynamic HTML • Dynamic Styles • Changing Contents

  44. Sample 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>

  45. Sample 2/2 var DIV2_BackGround function winOnLoad() { DIV2_BackGround = DIV2.style.backgroundColor; } function DIV1_OnNouseOver() { DIV2.style.backgroundColor = "royalblue"; } function DIV1_OnNouseOut() { DIV2.style.backgroundColor = DIV2_BackGround; }

  46. What Next? – Web Application • C# • SQL • ADO.Net • ASP.Net

More Related