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

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)

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

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

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

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>

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

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

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

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

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

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>

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

Special Characters • How can we express characters like “<” and “>”? • Use character entities • < < • > > • & & • " " • (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 Formatting <P> <B>Bold</B>, <I>italic</I>, <U>underscored</U>. </P> <P>

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>

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

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

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

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

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

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

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

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

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

Embedded Style Sheets .. .. .. <STYLE TYPE="text/css">  </STYLE> .. .. ..

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

Using Classes <HEAD> <STYLE TYPE=“text/css”></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 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”></STYLE> </HEAD> <BODY> Calling out <SPAN>special sections of text</SPAN> is possible using SPAN container. </BODY>

Using Divisions <HEAD> <STYLE TYPE=“text/css”></STYLE> </HEAD> <BODY> <DIV CLASS=“red_on_yellow” ALIGN=CENTER> … </DIV> </BODY>

ID attribute <H1 ID=“FirstHeading”>Welcome to WSTTT!<H1> <HEAD> <STYLE TYPE=“text/css”></STYLE> </HEAD> <BODY> <H1 ID=“FirstHeading”>Welcome to WSTTT!<H1> </BODY>

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

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

The<SCRIPT> Tag <SCRIPT LANGUAGE ="JavaScript">  </SCRIPT> <SCRIPT LANGUAGE ="VBScript">  </SCRIPT>

Simple JavaScript Example … <BODY> … Welcome to my web site! <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> … </BODY> </HTML>

Variables and Decision Making <SCRIPT LANGUAGE="JavaScript">  </SCRIPT>

Using Functions <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT>

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>"); }

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>

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 HTML • Dynamic Styles • Changing Contents

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>

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; }

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

PART 1 - Building a Static Web Site

PART 1 - Building a Static Web Site

Presentation Transcript

Building a Web Site

Chapter 2 Static Routing – Part 1

PART 1: BUILDING BRIDGES

Building a Knowledgebase With Web Part Connections

Online Portfolio: Building a Wordpress Web Site

Building a Perspective (Part 1)

Building Your Web Site

LIS901N: webmastering I: the static web site

Web site security Part 1 : SQL Injection

Chapter 2 Static Routing – Part 1

Building a Great News Web Site

Build your Web Site – Part 1

Building a Web 2.0 Web Site with ASP.NET

Building Your Own Web Site

Building Sapienza web site

Web Site Basics - Part 2

Building a Web Site

Planet Building Part 1

Building a Web Site

Activity 1 Bookmarking a web site

Building Your Own Class Web Site

Integrating RSS into Your Web site Part 1: Introduction