docIntroduction to Web Programming
download 
Report Transcription
Introduction to Web Programming
WebProgramming
HTML
CSS
StepbystepExercises
JavaScript
Hans-PetterHalvorsen,M.Sc.
HistoryoftheWeb
•
•
•
•
•
•
•
Internet(1960s)
WorldWideWeb- WWW(1991)
FirstWebBrowser- Netscape,1994
Google,1998
Facebook,2004
Smartphones(iPhone),2007
Tablets(iPad),2010
O.Widder.(2013).geek&poke.Available:
http://geek-and-poke.com
TheWebBrowser
InternetExplorer
Firefox
Chrome
Opera
Safari
WebPagesExamples
4
TheWebProgrammingTriangle
HTML
CSS
UseHTML todefinethe
contentofwebpages
Web
Programming
JavaScript
UseCSS tospecifythelayoutofwebpages
UseJavaScript toprogram
thebehaviorofwebpages
HTML
ASP.NET
IIS
XML
PHP
WebServices
AJAX
SQL
JQuery
WebProgramming
CSS
JavaScript
BasicWebProgramming
• HTML
• CSS
• JavaScript
FormoreDynamic WebProgrammingweusee.g.,
• ASP.NET
• SQL
• AJAX
• PHP
• etc.(ButthesearenotpartofthisTutorial)
CSS
Web
Server
JavaScript
WebArchitecture
Server-side
Client
InternetExplorer
Chrome
Opera
Firefox
WebBrowser
HTML
CSS
JavaScript
WebServer
Safari
Client
Client-ServerExample
WebBrowser
Response
WebServer
Request
Database
InternetInformation Services(IIS),Apache,etc.
WebPlatform
TheWebBrowsercreatesthevisualwebpageyouseeinthebrowserbasedon
theHTMLcode
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML,CSS,JavaScript
WebBrowser
Thecoderunsontheserverandconvertedto
HTMLbeforesending toclient(Web Browser)
ASP.NET,PHP,...
Client-side
WebPage(HTML)
WebServer
Server-side
InternetInformation Services(IIS),Apache,etc.
Hans-PetterHalvorsen,M.Sc.
HTML
• HyperText MarkupLanguage(HTML)
• TheVisualAppearnce ofaWebSite
• “WebBrowserLanguage”:AllWebBrowser
understandHTML
<!DOCTYPE html>
<html>
• HTML5isthelatest
<head>
<meta charset="UTF-8">
• MaintainedbyW3C
<title>Title of the document</title>
</head>
- WorldWideWeb
<body>
Consortium
Content of the document......
</body>
</html>
13
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
HTMLCode
HTML
<p>My first paragraph.</p>
</body>
</html>
WebBrowser
14
HTMLPageStructure
<!DOCTYPE html>
<html>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another
paragraph.</p>
</body>
</html>
15
HTMLEditors
ProfessionalHTMLeditors:
• AdobeDreamweaver
• CoffeeCup HTMLEditor
• ...
ForthesimpleexamplesinthisTutorialweonly
needNotepad(Windows)orTextEdit (Mac)
MyFirstHTMLWebPage
<tagname>content</tagname>
• TheDOCTYPEdeclarationdefinesthe
documenttype
• Thetextbetween<html>and
</html>describesthewebdocument
• Thetextbetween<body>and
<h1>My First Heading</h1>
</body>describesthevisiblepagecontent
• Thetextbetween<h1>and</h1>describes
<p>My first paragraph.</p>
aheading
• Thetextbetween<p>and</p>describes
</body>
paragraph
</html> Students: CreatethisHTMLCodeine.g.,NotePadandSavetheFileas.htm.
<!DOCTYPE html>
<html>
<body>
ThenOpentheFileinaWebBrowser(justdouble-clickonthefile).
Hyperlinks
<!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>
Images
Students: CreatetheseExamples
<!DOCTYPE html>
<html>
<body>
<h1>This is a heading</h1>
<img src=“myimage.jpg" alt=”blabla" width="104" height="142">
</body>
</html>
Hyperlink:
HTMLTags
<a href="http://www.google.com">This is a link to Google</a>
BoldText:
Paragraph:
<b>This is my Text</b>
<p>My first paragraph.</p>
Headers:
<h1>This is my Header</h1>
<h2>This is my Header</h2>
<h3>This is my Header</h3>
Title:
This is my Text
<br>
This is also my Text
Comments:
<title>This is my Title</title>
Image:
LineBreak:
<!-- Write your comments here -->
<img src=“myimage.jpg" alt=”blabla" width="104" height="142">
Students: TrytheseExamples
CSS
Hans-PetterHalvorsen,M.Sc.
CSS
• CSS– CascadingStyle
Sheets
• Stylesdefinehowto
display HTMLelements
• CSSisusedtocontrolthe
styleandlayoutof
multipleWebpagesallat
once
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.Developmentof
largewebsites,wherefontsandcolorinformationwereaddedtoevery
singlepage,becamealongandexpensiveprocess.
• Tosolvethisproblem,theWorldWideWebConsortium(W3C)created
CSS.
• InHTML4.0,allformattingcouldberemovedfromtheHTMLdocument,
andstoredinaseparateCSSfile.
• AllbrowserssupportCSStoday.
•
•
•
•
•
HTML+CSSExample
<!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.,NotePad
andSavetheFileas.htm.
ThenOpentheFileinaWebBrowser(just
double-clickon thefile).
Changecolor, etc.andseewhathappens.
CSSSyntax
ACSSdeclarationalwaysendswithasemicolon, anddeclarationgroups are
surrounded bycurlybraces,e.g.:
p {color:red;text-align:center;}
.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>
{
CSSClasses } p.center
text-align: center;
color: red;
}
<!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>
Students: TrytheseExamples
ThreeWaystoInsertCSS
Therearethreewaysofinsertingastylesheet:
• Externalstylesheet(Recommended!!)
– Anexternalstylesheetisidealwhenthestyleisappliedtomanypages.Withanexternal
stylesheet,youcanchangethelookofanentireWebsitebychangingjustonefile.
– Anexternalstylesheetcanbewritteninanytexteditor.Thefileshouldnotcontainany
htmltags.
– Thestylesheetfilemustbesavedwitha.cssextension
• Internalstylesheet
– Aninternalstylesheetshouldbeusedwhenasingledocumenthasauniquestyle.
– YoudefineinternalstylesintheheadsectionofanHTMLpage,insidethe<style>tag
• Inlinestyle
– Aninlinestylelosesmanyoftheadvantagesofastylesheet(bymixingcontent
withpresentation).Usethismethodsparingly!
InternalStyleSheetExample
YoudefineinternalstylesintheheadsectionofanHTMLpage,insidethe<style>tag,likethis:
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Students: TrythisExample
<!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
EachHTMLpagemustincludealinktothestylesheetwiththe<link>tag.The
<link>taggoesinsidetheheadsection:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Anexampleofastylesheetfilecalled“myStyle.css”,isshown below:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Students: TrythisExample
TextColor
body {
color: blue;
}
CSSProperties
TextAlignment
h1 {
text-align: center;
h1 {
color: #00ff00;
}
}
p.date {
text-align: right;
}
h2 {
color: rgb(255,0,0);
}
p.main {
text-align: justify;
}
TextFont
Background Color
body {
background-color: lightblue;
}
TextSize
h1 {
font-size: 40px;
}
h2 {
p {
font-family: "Times New Roman", Times, serif;
}
Students: CreateaStyleSheet(.CSS)anda
HTMLpagewhereyouusetheseProperties
font-size: 30px;
}
p {
font-size: 14px;
}
29
CSSExample
http://www.w3schools.com/css/demo_default.htm
Students:OpenthisExampleandseehowdifferentstylestotally
changesthedisplayandlayoutofaHTMLpage
JavaScript
Hans-PetterHalvorsen,M.Sc.
JavaScript
• JavaScriptistheprogramminglanguageoftheWeb.
• AllmodernHTMLpagesareusingJavaScript.
• JavaScriptisthedefaultscriptinglanguageinallmodern
browsers,andinHTML5.
• JavaScriptisprobablythemostpopularprogramming
languageintheworld.
• ItisthelanguageforHTML,fortheWeb,forcomputers,
servers,laptops,tablets,smartphones,andmore.
• JavaScriptcanChangeHTMLElements!– whichmakesit
verypowerful!
WhyJavaScript?
JavaScriptisoneof3languages allwebdevelopers
must learn:
• 1.HTML todefinethecontentofwebpages
• 2.CSS tospecifythelayoutofwebpages
• 3.JavaScript toprogramthebehaviorofweb
pages
ThistutorialisaboutJavaScript,andhowJavaScript
workswithHTMLandCSS.
JavaScriptvs.Java
• JavaScriptandJavaaredifferent languages,both
inconceptanddesign.
• JavaScriptwasinventedbyBrendanEich,tobe
usedinNetscape(anolongerexistingbrowser)
in1995,andwasadoptedbytheECMAstandard
associationin1997.
JavaScriptExample
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
Students:TrythisExample
<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>
<!DOCTYPE html>
<html>
<body>
<p>Please input a number between 1 and 10:</p>
JavaScriptExample2
<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
JavaScriptComments
// Change heading:
document.getElementById("myH").innerHTML = "My First Page";
// Change paragraph:
document.getElementById("myP").innerHTML = "My first paragraph.";
var x = 5;
var y = x + 2;
// Declare x, give it the value of 5
// 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
• YoucanplaceanynumberofscriptsinanHTML
document.Scriptscanbeplacedinthe<body>,orin
the<head>sectionofanHTMLpage,orinboth.
• Itisagoodideatoplacescriptsatthebottomofthe
<body>element.Thisimprovespageload,because
HTMLloadingisnotblockedbyscriptsloading.
• Scriptscanalsobeplacedinexternalfiles.External
scriptsarepracticalwhenthesamecodeisusedin
manydifferentwebpages.JavaScriptfileshavethe
fileextension.js.
Web
Server
Hans-PetterHalvorsen,M.Sc.
WebServer
Thetermwebservercanrefertoeitherthehardware(thecomputer)orthesoftware(the
computerapplication)thathelpstodeliverwebcontentthatcanbeaccessedthroughthe
Internet.
Themostcommonuseofwebserversistohostwebsites,butthereareotherusessuchas
gaming,datastorageorrunningenterpriseapplications.
• IIS - InternetInformationServices
– MicrosoftWindows
• Apache WebServer
– 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/Web Site
• MakesuretohavetheIISRoleinstalledwithASP.NETsub
components
DefaultIISDirectory:
C:\inetpub\wwwroot
Students:Deployone(or)more
ofyourWebpagesusingIIS
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
IISDeployment
IISDeployment
TestyourWebPagein
yourWebbrowser
“localhost”isyourpersonal
computer, youcamalsouse
yourIPaddress.
http://www.w3schools.com
eBooksfromSafariBooksOnline
http://proquest.safaribooksonline.com/?uicode=telemark
...
References
• HTMLTutorial:
http://www.w3schools.com/html
• CSSTutorial:http://www.w3schools.com/css
• JavaScriptTutorial:
http://www.w3schools.com/js
Hans-PetterHalvorsen,M.Sc.
UniversityCollegeofSoutheastNorway
www.usn.no
E-mail:hans.p.halvorsen@hit.no
Blog:http://home.hit.no/~hansha/
