Introduction To Web Programming

https://www.halvorsen.
blog
Web Programming
HTML
CSS JavaScript
Step by step Exercises

Hans-Petter Halvorsen
History of the Web
• Internet (1960s)
• World Wide Web - WWW (1991)
• First Web Browser - Netscape, 1994
• Google, 1998
• Facebook, 2004
• Smartphones (iPhone), 2007
• Tablets (iPad), 2010
O. Widder. (2013). geek&poke. Available:
http://geek-and-poke.com
Edge
Firefox
Opera
Safari
Chrome
The Web Browser
Web Pages Examples
4
Web Pages
Examples
https://www.halvorsen.blog
The Web Programming Triangle
HTML Use HTML to define the
content of web pages
Web
Programming
CSS JavaScript
Use CSS to specify the layout of web pages Use JavaScript to program
the behavior of web pages
Web Programming
JavaScript CSS
HTML ASP.NET
IIS XML
Web Services SQL
Web API
JQuery
PHP AJAX
Basic Web Programming
• HTML
• CSS
• JavaScript
For more Dynamic Web Programming we use, e.g.,

• ASP.NET
• SQL
• AJAX
• PHP
• etc. (But these are not part of this Tutorial)
These are typically used together with a Database System, such as MySQL, SQL
Server, etc.
HT
CSS
LM
Server
Web
JavaScript
Web Architecture
Edge Chrome Firefox Opera Safari
Web Browser
Client
HTML CSS JavaScript
ASP.NET PHP
Server-side
Web Server Database

Client-Server Example
Client
The Web Pages are stored on the Web Server
Web Browser and sent to the client on request from the Web
Browser
Response
Web Server
Request
Database
Internet Information Services (IIS), Apache, etc.

Web Platform
The Web Browser creates the visual web page you see in the browser based on
<!DOCTYPE html> the HTML code
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p> HTML, CSS, JavaScript
</body> Web Browser Client-side

</html>
The code runs on the server and converted to Web Page (HTML)
HTML before sending to client (Web Browser)
ASP.NET, PHP, ...

Web Server Server-side
Internet Information Services (IIS), Apache, etc.

HT
ML
Hans-Petter Halvorsen, M.Sc.

HTML
• HyperText Markup Language (HTML)
• The Visual Appearance of a Web Site
• “Web Browser Language”: All Web Browser
understand HTML <!DOCTYPE html>
• HTML 5 is the latest <html>
<head>
• Maintained by W3C <meta charset="UTF-8">
<title>Title of the document</title>
- World Wide Web </head>
Consortium <body>
Content of the document......
</body>
</html>
14
<!DOCTYPE html>
<html> HTML Code
<body>
<h1>My First Heading</h1> HTML

<p>My first paragraph.</p>
</body>
</html>
Web Browser
15
HTML Page Structure
<!DOCTYPE html>
<html>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another
paragraph.</p>
</body>
</html> 16
HTML Editors
Professional HTML editors: These are WYSIWYG Editors
• Adobe Dreamweaver where you can see the resulting
Web page instantly
• CoffeeCup HTML Editor
• ...
For the simple examples in this Tutorial you may only
need Notepad (Windows) or TextEdit (Mac)
Another Editor is Visual Studio Code

My First HTML Web Page
<tagname>content</tagname>
• The DOCTYPE declaration defines the
<!DOCTYPE html> document type
<html> • The text between <html> and
<body> </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> Exercise: Create this HTML Code in e.g., NotePad and Save the File as .htm.
Then Open the File in a Web Browser (just double-click on the file).
<!DOCTYPE html>
Hyperlinks <html>
<body>
<a href="http://www.google.com">This is a link to Google</a>
</body>
</html>
Exercises: Create these Examples

<!DOCTYPE html>
<html>
Images
<body>
<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> or <strong> <p>My first paragraph.</p>
Headers:
Line Break:
<h1>This is my Header</h1>
<h2>This is my Header</h2> This is my Text
<br>
<h3>This is my Header</h3> This is also my Text
Title:
Comments:
<title>This is my Title</title> 
Image:
<img src=“myimage.jpg" alt=”blabla" width="104" height="142">
Exercises: Try these Examples

CSS

CSS
• CSS – Cascading Style
Sheets
• Styles define how to
display HTML elements
• CSS is used to control the body {
background-color: #d0e4fe;
style and layout of }
h1 {
multiple Web pages all at color: orange;
once }
text-align: center;
p {
font-family: "Times New Roman";
font-size: 20px;
}
Why CSS is needed
• HTML 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.2
specification, it started a nightmare for web developers. Development of
large web sites, where fonts and color information were added to every
single page, became a long and expensive process.
• To solve this problem, the World Wide Web Consortium (W3C) created
CSS.
• 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>
Exercises: Create this Code in e.g., NotePad or
Visual Studio Code and Save the File as .html.
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p> Then Open the File in a Web Browser (just
</body>
double-click on the file).
</html> Change color, etc. and see what happens.
CSS Syntax
A CSS declaration always ends with a semicolon, and declaration groups are
surrounded by curly braces, e.g.:
p {color:red;text-align:center;}
.center {
CSS Classes } p.center {
text-align: center;
text-align: center; color: red;
color: red; }
}
<!DOCTYPE html>
<html>
<head>
<style>
<!DOCTYPE html> p.center {
<html> text-align: center;
<head> color: red;
<style> }
.center {
</style>
text-align: center;
color: red; </head>
} <body>
</style>
</head> <h1 class="center">My Heading</h1>
<body> <p class="center">My Paragraph</p>
<h1 class="center">My Heading</h1> </body>

<p class="center">My Paragraph</p> </html>
</body>
</html> Exercises: Try these Examples
Three Ways to Insert CSS
There 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 external
style 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 any
html 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 content
with presentation). Use this method sparingly!
Internal Style Sheet Example
You define internal styles in the head section of an HTML page, inside the <style> tag, like this:
<!DOCTYPE html>
<head> <html>
<style> <head>
<style>
body { body {
background-color: linen; background-color: linen;
}
} h1 {
color: maroon;
h1 { margin-left: 40px;
color: maroon; }
</style>
margin-left: 40px; </head>
<body>
}
</style> <h1>This is a heading</h1>
<p>This is a paragraph.</p>
</head>
</body>
</html>
Exercise: Try this Example
External Style Sheet Example
Each 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;
} Exercise: Try this Example
Text Color
body {
CSS Properties
color: blue; Background Color
}
Text Alignment
h1 {
body {
text-align: center; background-color: lightblue;
h1 { } }
color: #00ff00;
} p.date {
text-align: right;
h2 { } Text Size
color: rgb(255,0,0);
p.main { h1 {
}
text-align: justify; font-size: 40px;
} }
Text Font
p { h2 {
font-family: "Times New Roman", Times, serif; font-size: 30px;
} }
p {
Exercise: Create a Style Sheet (.CSS) and a font-size: 14px;
HTML page where you use these Properties } 30
CSS Example
http://www.w3schools.com/css/demo_default.htm
Exercise: Open this Example and see how different styles totally
changes the display and layout of a HTML page
JavaScript

JavaScript
• JavaScript is the programming language of the Web.
• All modern HTML pages are using JavaScript.
• JavaScript is the default scripting language in all modern
browsers, and in HTML5.
• JavaScript is probably the most popular programming
language 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 it
very powerful!
Why JavaScript?
JavaScript is one of 3 languages all web developers
must 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 web
pages
This tutorial is about JavaScript, and how JavaScript
works with HTML and CSS.
JavaScript vs. Java
• JavaScript and Java are different languages, both
in concept and design.
• JavaScript was invented by Brendan Eich, to be
used in Netscape (a no longer existing browser)
in 1995, and was adopted by the ECMA standard
association 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>
JavaScript Example 2
<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;
}
Exercise: Try this Example

</script>
</body>
</html>
JavaScript Comments
// 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 5
var 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:
*/
Using Comments to Prevent Execution:

//document.getElementById("myH").innerHTML = "My First Page";
/*
*/
JavaScript Placement
• You can place any number of scripts in an HTML
document. Scripts can be placed in the <body>, or in
the <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, because
HTML loading is not blocked by scripts loading.
• Scripts can also be placed in external files. External
scripts are practical when the same code is used in
many different web pages. JavaScript files have the
file extension .js.
Server
Web
Web Server
The term web server can refer to either the hardware (the computer) or the software (the
computer application) that helps to deliver web content that can be accessed through the
Internet.
The most common use of web servers is to host websites, but there are other uses such as
gaming, 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 Popularity
http://www.digi.no/921119/under-halvparten-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 installed with ASP.NET sub components
Default IIS Directory:

C:\inetpub\wwwroot
Exercise: Deploy one (or) more

of your Web pages using IIS
IIS Deployment
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
IIS Deployment
Test your Web Page in

your Web browser
“localhost” is your personal
computer, you cam also use
your IP address.
http://www.w3schools.com
eBooks from Safari Books Online
http://proquest.safaribooksonline.com
...
References
• HTML Tutorial:
http://www.w3schools.com/html
• CSS Tutorial: http://www.w3schools.com/css
• JavaScript Tutorial:
http://www.w3schools.com/js
Hans-Petter Halvorsen
University of Southeast Norway
www.usn.no
E-mail: hans.p.halvorsen@usn.no
Web: https://www.halvorsen.blog

Introduction To Web Programming

Uploaded by

Introduction To Web Programming

Uploaded by

https://www.halvorsen.

Step by step Exercises

For more Dynamic Web Programming we use, e.g.,

Edge Chrome Firefox Opera Safari

HTML CSS JavaScript

Web Server Database

Internet Information Services (IIS), Apache, etc.

<h1>My First Heading</h1>

<p>My first paragraph.</p> HTML, CSS, JavaScript

</body> Web Browser Client-side

ASP.NET, PHP, ...

Internet Information Services (IIS), Apache, etc.

Hans-Petter Halvorsen, M.Sc.

<h1>My First Heading</h1> HTML

Another Editor is Visual Studio Code

<a href="http://www.google.com">This is a link to Google</a>

Exercises: Create these Examples

<img src=“myimage.jpg" alt=”blabla" width="104" height="142">

Bold Text: Paragraph:

Exercises: Try these Examples

Hans-Petter Halvorsen, M.Sc.

<h1 class="center">My Heading</h1> </body>

Hans-Petter Halvorsen, M.Sc.

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo">This is a demonstration.</p>

<p>Please input a number between 1 and 10:</p>

<input id="numb" type="number">

<button type="button" onclick="myFunction()">Submit</button>

// Get the value of input field with id="numb"

// If x is Not a Number or less than one or greater than 10

if (isNaN(x) || x < 1 || x > 10) {

Exercise: Try this Example

Using Comments to Prevent Execution:

Default IIS Directory:

Exercise: Deploy one (or) more

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Test your Web Page in

You might also like