View
14
Download
0
Category
Preview:
Citation preview
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
<!DOCTYPE html><html><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
HTMLCode
WebBrowser
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>
HTMLEditorsProfessionalHTMLeditors:• AdobeDreamweaver• CoffeeCup HTMLEditor• ...ForthesimpleexamplesinthisTutorialweonlyneedNotepad(Windows)orTextEdit (Mac)
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>
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
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
Hans-PetterHalvorsen,M.Sc.
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;
}</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
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
Hans-PetterHalvorsen,M.Sc.
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>
Students:TrythisExample
<!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
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.
Hans-PetterHalvorsen,M.Sc.
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>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</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
Hans-PetterHalvorsen,M.Sc.
UniversityCollegeofSoutheastNorwaywww.usn.no
E-mail:hans.p.halvorsen@hit.noBlog:http://home.hit.no/~hansha/
Recommended