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
HTML
JavaScriptCSS
WebProgramming
UseHTML todefinethecontentofwebpages
UseCSS tospecifythelayoutofwebpages
TheWebProgrammingTriangle
UseJavaScript toprogramthebehaviorofwebpages
BasicWebProgramming• HTML• CSS• JavaScript
FormoreDynamicWebProgrammingweusee.g.,• ASP.NET• SQL• AJAX• PHP• etc.(ButthesearenotpartofthisTutorial)
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
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
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
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.
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)• ...
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.
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:[email protected]:http://home.hit.no/~hansha/