introduction to web programming to... · basic web programming • html • css • javascript for...

WebProgramming

Hans-PetterHalvorsen,M.Sc.StepbystepExercises

HTML

JavaScriptCSS

HistoryoftheWeb• Internet(1960s)• WorldWideWeb- WWW(1991)• FirstWebBrowser- Netscape,1994• Google,1998• Facebook,2004• Smartphones(iPhone),2007• Tablets(iPad),2010

TheWebBrowserO.W

idder.(2013).g

eek&

poke.A

vailable:

http://geek-and-poke.com

InternetExplorerChrome

Firefox

Opera

Safari

4

WebPagesExamples

HTML

JavaScriptCSS

WebProgramming

UseHTML todefinethecontentofwebpages

UseCSS tospecifythelayoutofwebpages

TheWebProgrammingTriangle

UseJavaScript toprogramthebehaviorofwebpages

HTML

CSSJavaScript

IIS

ASP.NET

AJAXPHP

SQLWebServices

JQuery

XML

Web

Program

ming

BasicWebProgramming• HTML• CSS• JavaScript

FormoreDynamicWebProgrammingweusee.g.,• ASP.NET• SQL• AJAX• PHP• etc.(ButthesearenotpartofthisTutorial)

CSS

JavaScriptWeb

Server

WebArchitecture

WebServer

WebBrowserHTML JavaScriptCl

ient

CSS

Server-side

InternetExplorer Chrome Firefox Opera Safari

Client-ServerExample

Database

Client

WebServer

Request

Response

WebBrowser

InternetInformationServices(IIS),Apache,etc.

<!DOCTYPE html><html><body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body></html>

WebPlatform

Client-side

Server-side

WebBrowser

WebServer

WebPage(HTML)

HTML,CSS,JavaScript

ASP.NET,PHP,...InternetInformationServices(IIS),Apache,etc.

ThecoderunsontheserverandconvertedtoHTMLbeforesending toclient(WebBrowser)

TheWebBrowsercreatesthevisualwebpageyouseeinthebrowserbasedontheHTMLcode

Hans-PetterHalvorsen,M.Sc.

HTML• HyperTextMarkupLanguage(HTML)• TheVisualAppearnce ofaWebSite• “WebBrowserLanguage”:AllWebBrowserunderstandHTML

• HTML5isthelatest• MaintainedbyW3C

- WorldWideWebConsortium

13

<!DOCTYPE html><html>

<head><meta charset="UTF-8"><title>Title of the document</title>

</head>

<body>Content of the document......

</body>

</html>

HTML

14




</body></html>

HTMLCode

WebBrowser

HTMLPageStructure

15


<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body></html>

HTMLEditorsProfessionalHTMLeditors:• AdobeDreamweaver• CoffeeCup HTMLEditor• ...ForthesimpleexamplesinthisTutorialweonlyneedNotepad(Windows)orTextEdit (Mac)

MyFirstHTMLWebPage




</body></html> Students:CreatethisHTMLCodeine.g.,NotePadandSavetheFileas.htm.

ThenOpentheFileinaWebBrowser(justdouble-clickonthefile).

• TheDOCTYPEdeclarationdefinesthedocumenttype

• Thetextbetween<html>and</html>describesthewebdocument

• Thetextbetween<body>and</body>describesthevisiblepagecontent

• Thetextbetween<h1>and</h1>describesaheading

• Thetextbetween<p>and</p>describesparagraph

<tagname>content</tagname>

Hype

rlinks <!DOCTYPE html>

<html><body>


<a href="http://www.google.com">This is a link to Google</a>

</body></html>



<img src=“myimage.jpg" alt=”blabla" width="104" height="142">

</body></html>

Images

Students:CreatetheseExamples

HTMLTags<a href="http://www.google.com">This is a link to Google</a>

<b>This is my Text</b>

Hyperlink:

BoldText:

<h1>This is my Header</h1>Headers:

This is my Text<br>This is also my Text

LineBreak:

<p>My first paragraph.</p>Paragraph:

<img src=“myimage.jpg" alt=”blabla" width="104" height="142">Image:

<h2>This is my Header</h2><h3>This is my Header</h3>

<title>This is my Title</title>

Title:

Comments:

Students:TrytheseExamples


CSS

CSS• CSS– CascadingStyleSheets

• Stylesdefinehowtodisplay HTMLelements

• CSSisusedtocontrolthestyleandlayoutofmultipleWebpagesallatonce

body {background-color: #d0e4fe;

}h1 {

color: orange;text-align: center;

}p {

font-family: "Times New Roman";font-size: 20px;

}

WhyCSSisneeded• HTMLwasneverintendedtocontaintagsforformattingadocument.• HTMLwasintendedtodefinethecontentofadocument,like:• <h1>Thisisaheading</h1>• <p>Thisisaparagraph.</p>• Whentagslike<font>,andcolorattributeswereaddedtotheHTML3.2

specification,itstartedanightmareforwebdevelopers.Developmentoflargewebsites,wherefontsandcolorinformationwereaddedtoeverysinglepage,becamealongandexpensiveprocess.

• Tosolvethisproblem,theWorldWideWebConsortium(W3C)createdCSS.

• InHTML4.0,allformattingcouldberemovedfromtheHTMLdocument,andstoredinaseparateCSSfile.

• AllbrowserssupportCSStoday.

<!DOCTYPE html><html><head><style>body {

background-color: #d0e4fe;}

h1 {color: orange;text-align: center;

}

p {font-family: "Times New Roman";font-size: 20px;

}</style></head><body>

<h1>My First CSS Example</h1><p>This is a paragraph.</p>

</body></html>

Students:CreatethisCodeine.g.,NotePadandSavetheFileas.htm.ThenOpentheFileinaWebBrowser(justdouble-clickon thefile).Changecolor,etc.andseewhathappens.

HTML+CSSExample

CSSSyntax

ACSSdeclarationalwaysendswithasemicolon,anddeclarationgroupsaresurrounded bycurlybraces,e.g.:

p {color:red;text-align:center;}

.center {text-align: center;color: red;

}

} p.center {text-align: center;color: red;

}

<!DOCTYPE html><html><head><style>.center {

text-align: center;color: red;


<h1 class="center">My Heading</h1><p class="center">My Paragraph</p>

</body></html> Students:TrytheseExamples

<!DOCTYPE html><html><head><style>p.center {

text-align: center;color: red;


<h1 class="center">My Heading</h1><p class="center">My Paragraph</p>

</body></html>

CSSClasses

ThreeWaystoInsertCSSTherearethreewaysofinsertingastylesheet:• Externalstylesheet(Recommended!!)

– Anexternalstylesheetisidealwhenthestyleisappliedtomanypages.Withanexternalstylesheet,youcanchangethelookofanentireWebsitebychangingjustonefile.

– Anexternalstylesheetcanbewritteninanytexteditor.Thefileshouldnotcontainanyhtmltags.

– Thestylesheetfilemustbesavedwitha.cssextension

• Internalstylesheet– Aninternalstylesheetshouldbeusedwhenasingledocumenthasauniquestyle.– YoudefineinternalstylesintheheadsectionofanHTMLpage,insidethe<style>tag

• Inlinestyle– Aninlinestylelosesmanyoftheadvantagesofastylesheet(bymixingcontent

withpresentation).Usethismethodsparingly!

InternalStyleSheetExample

<head><style>body {

background-color: linen;}h1 {

color: maroon;margin-left: 40px;

} </style></head>

Students:TrythisExample

YoudefineinternalstylesintheheadsectionofanHTMLpage,insidethe<style>tag,likethis:

<!DOCTYPE html><html><head><style>body {

background-color: linen;}h1 {

color: maroon;margin-left: 40px;

} </style></head><body>

<h1>This is a heading</h1><p>This is a paragraph.</p>

</body></html>

ExternalStyleSheetExample

<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>

body {background-color: lightblue;

}

h1 {color: navy;margin-left: 20px;

} Students:TrythisExample

EachHTMLpagemustincludealinktothestylesheetwiththe<link>tag.The<link>taggoesinsidetheheadsection:

Anexampleofastylesheetfilecalled“myStyle.css”,isshownbelow:

CSSProperties

29

TextColor

BackgroundColorTextAlignment

TextFont

body {color: blue;

}

h1 {color: #00ff00;

}

h2 {color: rgb(255,0,0);

}

h1 {text-align: center;

}

p.date {text-align: right;

}

p.main {text-align: justify;

}

p {font-family: "Times New Roman", Times, serif;

}

TextSizeh1 {

font-size: 40px;}

h2 {font-size: 30px;

}

p {font-size: 14px;

}

body {background-color: lightblue;

}

Students:CreateaStyleSheet(.CSS)andaHTMLpagewhereyouusetheseProperties

CSSExamplehttp://www.w3schools.com/css/demo_default.htm

Students:OpenthisExampleandseehowdifferentstylestotallychangesthedisplayandlayoutofaHTMLpage


JavaScript

JavaScript• JavaScriptistheprogramminglanguageoftheWeb.• AllmodernHTMLpagesareusingJavaScript.• JavaScriptisthedefaultscriptinglanguageinallmodernbrowsers,andinHTML5.

• JavaScriptisprobablythemostpopularprogramminglanguageintheworld.

• ItisthelanguageforHTML,fortheWeb,forcomputers,servers,laptops,tablets,smartphones,andmore.

• JavaScriptcanChangeHTMLElements!– whichmakesitverypowerful!

WhyJavaScript?JavaScriptisoneof3languages allwebdevelopersmust learn:• 1.HTML todefinethecontentofwebpages• 2.CSS tospecifythelayoutofwebpages• 3.JavaScript toprogramthebehaviorofwebpages

ThistutorialisaboutJavaScript,andhowJavaScriptworkswithHTMLandCSS.

• JavaScriptandJavaaredifferent languages,bothinconceptanddesign.• JavaScriptwasinventedbyBrendanEich,tobeusedinNetscape(anolongerexistingbrowser)in1995,andwasadoptedbytheECMAstandardassociationin1997.

JavaScriptvs.Java

JavaScriptExample<!DOCTYPE html><html><body><h1>My First JavaScript</h1>

<p>JavaScript can change the content of an HTML element:</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo">This is a demonstration.</p>

<script>function myFunction() {

document.getElementById("demo").innerHTML = "Hello JavaScript!";}</script>

</body></html>



<p>Please input a number between 1 and 10:</p>

<input id="numb" type="number">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>function myFunction() {

var x, text;

// Get the value of input field with id="numb"

x = document.getElementById("numb").value;

// If x is Not a Number or less than one or greater than 10

if (isNaN(x) || x < 1 || x > 10) {text = "Input not valid";

} else {text = "Input OK";

}document.getElementById("demo").innerHTML = text;

}</script>

</body></html>


JavaScriptExample2

JavaScriptComments// Change heading:document.getElementById("myH").innerHTML = "My First Page";// Change paragraph:document.getElementById("myP").innerHTML = "My first paragraph.";

var x = 5; // Declare x, give it the value of 5var y = x + 2; // Declare y, give it the value of x + 2

/*The code below will change the heading with id = "myH” and the paragraph with id = "myP” in my web page:*/document.getElementById("myH").innerHTML = "My First Page";document.getElementById("myP").innerHTML = "My first paragraph.";

UsingCommentstoPreventExecution://document.getElementById("myH").innerHTML = "My First Page";document.getElementById("myP").innerHTML = "My first paragraph.";

/*document.getElementById("myH").innerHTML = "My First Page";document.getElementById("myP").innerHTML = "My first paragraph.";*/

JavaScriptPlacement• YoucanplaceanynumberofscriptsinanHTMLdocument.Scriptscanbeplacedinthe<body>,orinthe<head>sectionofanHTMLpage,orinboth.

• Itisagoodideatoplacescriptsatthebottomofthe<body>element.Thisimprovespageload,becauseHTMLloadingisnotblockedbyscriptsloading.

• Scriptscanalsobeplacedinexternalfiles.Externalscriptsarepracticalwhenthesamecodeisusedinmanydifferentwebpages.JavaScriptfileshavethefileextension.js.


Web

Server

WebServerThetermwebservercanrefertoeitherthehardware(thecomputer)orthesoftware(thecomputerapplication)thathelpstodeliverwebcontentthatcanbeaccessedthroughtheInternet.Themostcommonuseofwebserversistohostwebsites,butthereareotherusessuchasgaming,datastorageorrunningenterpriseapplications.• IIS - InternetInformationServices

– MicrosoftWindows• ApacheWebServer

– OpenSource– Cross-platform:UNIX,Linux,OSX,Windows,...

• Nginx (pronounced"enginex")- Hasbecomeverypopularlatly• GWS(GoogleWebServer)• ...

WebServerPopularity

http://www.digi.no/921119/under-halvparten-bruker-apache

InternetInformationServices(IIS)• IIS– InternetInformationServices• WebServerthathosttheWebPages/WebSite• MakesuretohavetheIISRoleinstalledwithASP.NETsub

components

DefaultIISDirectory:C:\inetpub\wwwroot

Students:Deployone(or)moreofyourWebpagesusingIIS

IISDeployment<!DOCTYPE html><html><body>



</body></html>

IISDeployment

TestyourWebPageinyourWebbrowser

“localhost”isyourpersonalcomputer, youcamalsouse

yourIPaddress.

http://www.w3schools.com

eBooksfromSafariBooksOnlinehttp://proquest.safaribooksonline.com/?uicode=telemark

...

References• HTMLTutorial:http://www.w3schools.com/html

• CSSTutorial:http://www.w3schools.com/css• JavaScriptTutorial:http://www.w3schools.com/js


UniversityCollegeofSoutheastNorwaywww.usn.no

E-mail:[email protected]:http://home.hit.no/~hansha/

introduction to web programming to... · basic web programming • html • css • javascript for...

Documents