WIXLIB

Web ProgrammingHTMLCSSStep by step ExercisesJavaScriptHans-Petter Halvorsen, M.Sc.

History of the Web Internet (1960s)World Wide Web - WWW (1991)First Web Browser - Netscape, 1994Google, 1998Facebook, 2004Smartphones (iPhone), 2007Tablets (iPad), 2010

O. Widder. (2013). geek&poke. Available:http://geek-and-poke.comThe Web BrowserInternet ExplorerFirefoxChromeOperaSafari

Web Pages Examples4

The Web Programming TriangleHTMLCSSUse HTML to define thecontent of web pagesWebProgrammingJavaScriptUse CSS to specify the layout of web pagesUse JavaScript to programthe behavior of web pages

HTMLASP.NETIISXMLPHPWeb ServicesAJAXSQLJQueryWeb ProgrammingCSSJavaScript

Basic Web Programming HTML CSS JavaScriptFor more Dynamic Web Programming we use e.g., ASP.NET SQL AJAX PHP etc. (But these are not part of this Tutorial)

CSSWebServerJavaScript

Web ArchitectureServer-sideClientInternet ExplorerChromeOperaFirefoxWeb BrowserHTMLCSSJavaScriptWeb ServerSafari

ClientClient-Server ExampleWeb BrowserResponseWeb ServerRequestDatabaseInternet Information Services (IIS), Apache, etc.

Web PlatformThe Web Browser creates the visual web page you see in the browser based onthe HTML code !DOCTYPE html html body h1 My First Heading /h1 p My first paragraph. /p /body /html HTML, CSS, JavaScriptWeb BrowserThe code runs on the server and converted toHTML before sending to client (Web Browser)ASP.NET, PHP, .Client-sideWeb Page (HTML)Web ServerServer-sideInternet Information Services (IIS), Apache, etc.

Hans-Petter Halvorsen, M.Sc.

HTML HyperText Markup Language (HTML) The Visual Appearnce of a Web Site “Web Browser Language”: All Web Browserunderstand HTML !DOCTYPE html html HTML 5 is the latest head meta charset "UTF-8" Maintained by W3C title Title of the document /title /head - World Wide Web body ConsortiumContent of the document. /body /html 13

!DOCTYPE html html body h1 My First Heading /h1 HTML CodeHTML p My first paragraph. /p /body /html Web Browser14

HTML Page Structure !DOCTYPE html html body h1 This is a heading /h1 p This is a paragraph. /p p This is anotherparagraph. /p /body /html 15

HTML EditorsProfessional HTML editors: Adobe Dreamweaver CoffeeCup HTML Editor .For the simple examples in this Tutorial we onlyneed Notepad (Windows) or TextEdit (Mac)

My First HTML Web Page tagname content /tagname The DOCTYPE declaration defines thedocument type The text between html and /html describes the web document The text between body and h1 My First Heading /h1 /body describes the visible page content The text between h1 and /h1 describes p My first paragraph. /p a heading The text between p and /p describes /body paragraph /html Students: Create this HTML Code in e.g., NotePad and Save the File as .htm. !DOCTYPE html html body Then Open the File in a Web Browser (just double-click on the file).

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 ImagesStudents: Create these Examples !DOCTYPE html html body h1 This is a heading /h1 img src “myimage.jpg" alt ”blabla" width "104" height "142" /body /html

Hyperlink:HTML Tags a href "http://www.google.com" This is a link to Google /a Bold Text: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 TextComments: title This is my Title /title Image:Line Break: !-- Write your comments here -- img src “myimage.jpg" alt ”blabla" width "104" height "142" Students: Try these Examples

CSSHans-Petter Halvorsen, M.Sc.

CSS CSS – Cascading StyleSheets Styles define how todisplay HTML elements CSS is used to control thestyle and layout ofmultiple Web pages all atoncebody {background-color: #d0e4fe;}h1 {color: orange;text-align: center;}p {font-family: "Times New Roman";font-size: 20px;}

Why CSS is neededHTML was never intended to contain tags for formatting a document.HTML was intended to define the content of a document, like: h1 This is a heading /h1 p This is a paragraph. /p When tags like font , and color attributes were added to the HTML 3.2specification, it started a nightmare for web developers. Development oflarge web sites, where fonts and color information were added to everysingle page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) createdCSS. In HTML 4.0, all formatting could be removed from the HTML document,and stored in a separate CSS file. All browsers support CSS today.

HTML CSS Example !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: Create this Code in e.g., NotePadand Save the File as .htm.Then Open the File in a Web Browser (justdouble-click on the file).Change color, etc. and see what happens.

CSS SyntaxA CSS declaration always ends with a semicolon, and declaration groups aresurrounded by curly braces, 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 {CSS Classes } p.centertext-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: Try these Examples

Three Ways to Insert CSSThere are three ways of inserting a style sheet: External style sheet (Recommended!!)– An external style sheet is ideal when the style is applied to many pages. With an externalstyle sheet, you can change the look of an entire Web site by changing just one file.– An external style sheet can be written in any text editor. The file should not contain anyhtml tags.– The style sheet file must be saved with a .css extension Internal style sheet– An internal style sheet should be used when a single document has a unique style.– You define internal styles in the head section of an HTML page, inside the style tag Inline style– An inline style loses many of the advantages of a style sheet (by mixing contentwith presentation). Use this method sparingly!

Internal Style Sheet ExampleYou define internal styles in the head section of an HTML page, inside the style tag, like this: head style body {background-color: linen;}h1 {color: maroon;margin-left: 40px;} /style /head Students: Try this Example !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

External Style Sheet ExampleEach HTML page must include a link to the style sheet with the link tag. The link tag goes inside the head section: head link rel "stylesheet" type "text/css" href "mystyle.css" /head An example of a style sheet file called “myStyle.css”, is shown below:body {background-color: lightblue;}h1 {color: navy;margin-left: 20px;}Students: Try this Example

Text Colorbody {color: blue;}CSS PropertiesText Alignmenth1 {text-align: center;h1 {color: #00ff00;}}p.date {text-align: right;}h2 {color: rgb(255,0,0);}p.main {text-align: justify;}Text FontBackground Colorbody {background-color: lightblue;}Text Sizeh1 {font-size: 40px;}h2 {p {font-family: "Times New Roman", Times, serif;}Students: Create a Style Sheet (.CSS) and aHTML page where you use these Propertiesfont-size: 30px;}p {font-size: 14px;}29

CSS Examplehttp://www.w3schools.com/css/demo default.htmStudents: Open this Example and see how different styles totallychanges the display and layout of a HTML page

JavaScriptHans-Petter Halvorsen, M.Sc.

JavaScript JavaScript is the programming language of the Web. All modern HTML pages are using JavaScript. JavaScript is the default scripting language in all modernbrowsers, and in HTML5. JavaScript is probably the most popular programminglanguage in the world. It is the language for HTML, for the Web, for computers,servers, laptops, tablets, smart phones, and more. JavaScript can Change HTML Elements! – which makes itvery powerful!

Why JavaScript?JavaScript is one of 3 languages all web developersmust learn: 1. HTML to define the content of web pages 2. CSS to specify the layout of web pages 3. JavaScript to program the behavior of webpagesThis tutorial is about JavaScript, and how JavaScriptworks with HTML and CSS.

JavaScript vs. Java JavaScript and Java are different languages, bothin concept and design. JavaScript was invented by Brendan Eich, to beused in Netscape (a no longer existing browser)in 1995, and was adopted by the ECMA standardassociation in 1997.

JavaScript Example !DOCTYPE html html body h1 My First JavaScript /h1 Students: Try this Example 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 JavaScript Example 2 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 10if (isNaN(x) x 1 x 10) {text "Input not valid";} else {text "Input OK";}document.getElementById("demo").innerHTML text;} /script /body /html Students: Try this Example

JavaScript Comments// 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.";Using Comments to Prevent ML "My First Page";document.getElementById("myP").innerHTML "My first HTML "My First Page";document.getElementById("myP").innerHTML "My first paragraph.";*/

JavaScript Placement You can place any number of scripts in an HTMLdocument. Scripts can be placed in the body , or inthe head section of an HTML page, or in both. It is a good idea to place scripts at the bottom of the body element. This improves page load, becauseHTML loading is not blocked by scripts loading. Scripts can also be placed in external files. Externalscripts are practical when the same code is used inmany different web pages. JavaScript files have thefile extension .js.

WebServerHans-Petter Halvorsen, M.Sc.

Web ServerThe term web server can refer to either the hardware (the computer) or the software (thecomputer application) that helps to deliver web content that can be accessed through theInternet.The most common use of web servers is to host websites, but there are other uses such asgaming, data storage or running enterprise applications. IIS - Internet Information Services– Microsoft Windows Apache Web Server– Open Source– Cross-platform: UNIX, Linux, OS X, Windows, . Nginx (pronounced "engine x") - Has become very popular latly GWS (Google Web Server) .

Web Server en-bruker-apache

Internet Information Services (IIS) IIS – Internet Information Services Web Server that host the Web Pages/Web Site Make sure to have the IIS Role installed with ASP.NET subcomponentsDefault IIS Directory:C:\inetpub\wwwrootStudents: Deploy one (or) moreof your Web pages using IIS

!DOCTYPE html html body h1 My First Heading /h1 p My first paragraph. /p /body /html IIS Deployment