Scribd
Upload
386 views

Introduction To Web Programming

The document provides an overview of web programming using HTML, CSS, and JavaScript, describing their roles in defining content, layout, and behavior of web pages respectively. It also gives a brief history of the web and examples of common web browsers. The document then discusses the client-server model and basic web programming concepts like HTML tags, CSS syntax, and using JavaScript with HTML and CSS.

Uploaded by

Magical music
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
386 views

Introduction To Web Programming

The document provides an overview of web programming using HTML, CSS, and JavaScript, describing their roles in defining content, layout, and behavior of web pages respectively. It also gives a brief history of the web and examples of common web browsers. The document then discusses the client-server model and basic web programming concepts like HTML tags, CSS syntax, and using JavaScript with HTML and CSS.

Uploaded by

Magical music
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 48

Web

Programming
HTML

CSS JavaScript

Step by step Exercises


Hans-Petter Halvorsen, M.Sc.
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

Firefox
Internet Explorer

Opera

Safari
Chrome
The Web Browser
Web Pages Examples

4
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
CSS
Web Programming
JavaScript

HTML ASP.NET

IIS XML
Web Services SQL

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)
CSS

Server
Web
JavaScript
Web Architecture

Internet Explorer Chrome Firefox Opera Safari

Web Browser
Client

HTML CSS JavaScript


Server-side

Web Server
Client-Server Example
Client
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.


Hans-Petter Halvorsen, M.Sc.
HTML
• HyperText Markup Language (HTML)
• The Visual Appearnce 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>
13
<!DOCTYPE html>
<html> HTML Code
<body>

<h1>My First Heading</h1>


HTML
<p>My first paragraph.</p>

</body>
</html>

Web Browser
14
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> 15
HTML Editors
Professional HTML editors:
• Adobe Dreamweaver
• CoffeeCup HTML Editor
• ...
For the simple examples in this Tutorial we only
need Notepad (Windows) or TextEdit (Mac)
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> Students: 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>

<h1>This is a heading</h1>

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

</body>
</html>

Students: Create these Examples


<!DOCTYPE html>
<html>
Images

<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> Line Break:
<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> <!-- Write your comments here -->
Image:
<img src=“myimage.jpg" alt=”blabla" width="104" height="142">

Students: Try these Examples


CSS

Hans-Petter Halvorsen, M.Sc.


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>
Students: Create this Code in e.g., NotePad
and Save the File as .htm.
<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> Students: 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>
Students: 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;
} Students: Try this Example
Text Color
body {
CSS Properties
color: blue; Background Color
}
Text Alignment
body {
h1 {
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 {
Students: Create a Style Sheet (.CSS) and a font-size: 14px;
HTML page where you use these Properties } 29
CSS Example
http://www.w3schools.com/css/demo_default.htm

Students: Open this Example and see how different styles totally
changes the display and layout of a HTML page
JavaScript

Hans-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 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;
}
</script>
Students: Try this Example
</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:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";

Using Comments to Prevent Execution:


//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.";
*/
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
Hans-Petter Halvorsen, M.Sc.
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 Role installed with ASP.NET sub
components

Default IIS Directory:


C:\inetpub\wwwroot

Students: 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/?uicode=telemark

...
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, M.Sc.

University College of Southeast Norway


www.usn.no

E-mail: hans.p.halvorsen@hit.no
Blog: http://home.hit.no/~hansha/

You might also like