Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step...
Transcript of Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step...
![Page 1: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/1.jpg)
WebProgramming
Hans-PetterHalvorsen,M.Sc.StepbystepExercises
HTML
JavaScriptCSS
![Page 2: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/2.jpg)
HistoryoftheWeb• Internet(1960s)• WorldWideWeb- WWW(1991)• FirstWebBrowser- Netscape,1994• Google,1998• Facebook,2004• Smartphones(iPhone),2007• Tablets(iPad),2010
![Page 3: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/3.jpg)
TheWebBrowserO.W
idder.(2013).g
eek&
poke.A
vailable:
http://geek-and-poke.com
InternetExplorerChrome
Firefox
Opera
Safari
![Page 4: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/4.jpg)
4
WebPagesExamples
![Page 5: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/5.jpg)
HTML
JavaScriptCSS
WebProgramming
UseHTML todefinethecontentofwebpages
UseCSS tospecifythelayoutofwebpages
TheWebProgrammingTriangle
UseJavaScript toprogramthebehaviorofwebpages
![Page 6: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/6.jpg)
HTML
CSSJavaScript
IIS
ASP.NET
AJAXPHP
SQLWebServices
JQuery
XML
Web
Program
ming
![Page 7: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/7.jpg)
BasicWebProgramming• HTML• CSS• JavaScript
FormoreDynamicWebProgrammingweusee.g.,• ASP.NET• SQL• AJAX• PHP• etc.(ButthesearenotpartofthisTutorial)
![Page 8: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/8.jpg)
CSS
JavaScriptWeb
Server
![Page 9: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/9.jpg)
WebArchitecture
WebServer
WebBrowserHTML JavaScriptCl
ient
CSS
Server-side
InternetExplorer Chrome Firefox Opera Safari
![Page 10: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/10.jpg)
Client-ServerExample
Database
Client
WebServer
Request
Response
WebBrowser
InternetInformationServices(IIS),Apache,etc.
![Page 11: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/11.jpg)
<!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
![Page 12: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/12.jpg)
Hans-PetterHalvorsen,M.Sc.
![Page 13: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/13.jpg)
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>
![Page 14: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/14.jpg)
HTML
14
<!DOCTYPE html><html><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
HTMLCode
WebBrowser
![Page 15: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/15.jpg)
HTMLPageStructure
15
<!DOCTYPE html><html><body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body></html>
![Page 16: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/16.jpg)
HTMLEditorsProfessionalHTMLeditors:• AdobeDreamweaver• CoffeeCup HTMLEditor• ...ForthesimpleexamplesinthisTutorialweonlyneedNotepad(Windows)orTextEdit (Mac)
![Page 17: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/17.jpg)
MyFirstHTMLWebPage
<!DOCTYPE html><html><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</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>
![Page 18: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/18.jpg)
Hype
rlinks <!DOCTYPE html>
<html><body>
<h1>This is a heading</h1>
<a href="http://www.google.com">This is a link to Google</a>
</body></html>
<!DOCTYPE html><html><body>
<h1>This is a heading</h1>
<img src=“myimage.jpg" alt=”blabla" width="104" height="142">
</body></html>
Images
Students:CreatetheseExamples
![Page 19: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/19.jpg)
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:
<!-- Write your comments here -->Comments:
Students:TrytheseExamples
![Page 20: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/20.jpg)
Hans-PetterHalvorsen,M.Sc.
CSS
![Page 21: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/21.jpg)
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;
}
![Page 22: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/22.jpg)
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.
![Page 23: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/23.jpg)
<!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
![Page 24: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/24.jpg)
CSSSyntax
ACSSdeclarationalwaysendswithasemicolon,anddeclarationgroupsaresurrounded bycurlybraces,e.g.:
p {color:red;text-align:center;}
![Page 25: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/25.jpg)
.center {text-align: center;color: red;
}
} p.center {text-align: center;color: red;
}
<!DOCTYPE html><html><head><style>.center {
text-align: center;color: red;
}</style></head><body>
<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;
}</style></head><body>
<h1 class="center">My Heading</h1><p class="center">My Paragraph</p>
</body></html>
CSSClasses
![Page 26: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/26.jpg)
ThreeWaystoInsertCSSTherearethreewaysofinsertingastylesheet:• Externalstylesheet(Recommended!!)
– Anexternalstylesheetisidealwhenthestyleisappliedtomanypages.Withanexternalstylesheet,youcanchangethelookofanentireWebsitebychangingjustonefile.
– Anexternalstylesheetcanbewritteninanytexteditor.Thefileshouldnotcontainanyhtmltags.
– Thestylesheetfilemustbesavedwitha.cssextension
• Internalstylesheet– Aninternalstylesheetshouldbeusedwhenasingledocumenthasauniquestyle.– YoudefineinternalstylesintheheadsectionofanHTMLpage,insidethe<style>tag
• Inlinestyle– Aninlinestylelosesmanyoftheadvantagesofastylesheet(bymixingcontent
withpresentation).Usethismethodsparingly!
![Page 27: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/27.jpg)
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>
![Page 28: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/28.jpg)
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:
![Page 29: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/29.jpg)
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
![Page 30: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/30.jpg)
CSSExamplehttp://www.w3schools.com/css/demo_default.htm
Students:OpenthisExampleandseehowdifferentstylestotallychangesthedisplayandlayoutofaHTMLpage
![Page 31: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/31.jpg)
Hans-PetterHalvorsen,M.Sc.
JavaScript
![Page 32: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/32.jpg)
JavaScript• JavaScriptistheprogramminglanguageoftheWeb.• AllmodernHTMLpagesareusingJavaScript.• JavaScriptisthedefaultscriptinglanguageinallmodernbrowsers,andinHTML5.
• JavaScriptisprobablythemostpopularprogramminglanguageintheworld.
• ItisthelanguageforHTML,fortheWeb,forcomputers,servers,laptops,tablets,smartphones,andmore.
• JavaScriptcanChangeHTMLElements!– whichmakesitverypowerful!
![Page 33: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/33.jpg)
WhyJavaScript?JavaScriptisoneof3languages allwebdevelopersmust learn:• 1.HTML todefinethecontentofwebpages• 2.CSS tospecifythelayoutofwebpages• 3.JavaScript toprogramthebehaviorofwebpages
ThistutorialisaboutJavaScript,andhowJavaScriptworkswithHTMLandCSS.
![Page 34: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/34.jpg)
• JavaScriptandJavaaredifferent languages,bothinconceptanddesign.• JavaScriptwasinventedbyBrendanEich,tobeusedinNetscape(anolongerexistingbrowser)in1995,andwasadoptedbytheECMAstandardassociationin1997.
JavaScriptvs.Java
![Page 35: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/35.jpg)
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>
Students:TrythisExample
![Page 36: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/36.jpg)
<!DOCTYPE html><html><body>
<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>
Students:TrythisExample
JavaScriptExample2
![Page 37: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/37.jpg)
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.";*/
![Page 38: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/38.jpg)
JavaScriptPlacement• YoucanplaceanynumberofscriptsinanHTMLdocument.Scriptscanbeplacedinthe<body>,orinthe<head>sectionofanHTMLpage,orinboth.
• Itisagoodideatoplacescriptsatthebottomofthe<body>element.Thisimprovespageload,becauseHTMLloadingisnotblockedbyscriptsloading.
• Scriptscanalsobeplacedinexternalfiles.Externalscriptsarepracticalwhenthesamecodeisusedinmanydifferentwebpages.JavaScriptfileshavethefileextension.js.
![Page 39: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/39.jpg)
Hans-PetterHalvorsen,M.Sc.
Web
Server
![Page 40: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/40.jpg)
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)• ...
![Page 41: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/41.jpg)
WebServerPopularity
http://www.digi.no/921119/under-halvparten-bruker-apache
![Page 42: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/42.jpg)
InternetInformationServices(IIS)• IIS– InternetInformationServices• WebServerthathosttheWebPages/WebSite• MakesuretohavetheIISRoleinstalledwithASP.NETsub
components
DefaultIISDirectory:C:\inetpub\wwwroot
Students:Deployone(or)moreofyourWebpagesusingIIS
![Page 43: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/43.jpg)
IISDeployment<!DOCTYPE html><html><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
![Page 44: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/44.jpg)
IISDeployment
TestyourWebPageinyourWebbrowser
“localhost”isyourpersonalcomputer, youcamalsouse
yourIPaddress.
![Page 45: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/45.jpg)
http://www.w3schools.com
![Page 46: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/46.jpg)
eBooksfromSafariBooksOnlinehttp://proquest.safaribooksonline.com/?uicode=telemark
...
![Page 47: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/47.jpg)
References• HTMLTutorial:http://www.w3schools.com/html
• CSSTutorial:http://www.w3schools.com/css• JavaScriptTutorial:http://www.w3schools.com/js
![Page 48: Introduction to Web Programming - home.usn.no · Web Programming Hans-Petter Halvorsen, M.Sc. Step by step Exercises HTML ... History of the Web • Internet (1960s) • World Wide](https://reader031.fdocuments.net/reader031/viewer/2022021618/5b7a686a7f8b9a483c8c04f3/html5/thumbnails/48.jpg)
Hans-PetterHalvorsen,M.Sc.
UniversityCollegeofSoutheastNorwaywww.usn.no
E-mail:[email protected]:http://home.hit.no/~hansha/