Web Development usingHTML, CSS, and JavaScript
Chaiwoot Boonyasiriwat
August 21, 2018
2
HTML = Hyper Text Markup Language File extensions: .htm, .html HTML tags: <tagname>text</tagname> HTML element is everything from start tag to end
tag, e.g., <p>Hello</p> is paragraph element HTML elements can have attribute: name="value",
e.g., <img src="image.jpg"> (src is attribute) Structure of HTML file:<html>
<head>...</head>
<body>...</body>
</html>
HTML
https://www.w3schools.com/html/html_intro.asp
3
<!DOCTYPE html> <!-- HTML5 -->
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
HTML: Hello World!
4
<html>
<body>
<h1>Header Tags</h1>
<h2>There are 6 levels: h1–h6</h2>
<p>Paragraph</p>
<a href="https://www.w3schools.com">
HTML link to w3schools.com</a>
<img src="image.jpg" width="200" />
<ul><li>Unordered list</li></ul>
<ol><li>Ordered list</li></ol>
</body>
</html>
Commonly Used Tags 1
5
<html>
<body background="bg.jpg">
<p>Line 1<br>Line 2</p><hr>
<a href="https://www.w3schools.com">
HTML link to w3schools.com</a>
<table width="500" bgcolor="#998877">
<tr><td>R1,C1</td><td>R1,C2</td></tr>
</table>
</body>
</html>
Commonly Used Tags 2
6
"Block elements start a new line and takes up full width available."
"Inline elements do not start a new line and takes up as much width as necessary."
<html>
<body bgcolor="#000000">
<!-- division block element -->
<div bgcolor="#500000">Hello</div>
<!-- span inline element -->
<span bgcolor="#005000">World</span>
</body>
</html>
Block and Inline Elements
https://www.w3schools.com/html/html_blocks.asp
7
"To display an HTML page correctly, a web browser must know which character set (character encoding> to use."<!DOCTYPE html> <!--HTML5-->
<html lang="th">
<head>
<meta charset="utf-8"> <!--HTML5-->
</head>
<body>
<center><h1>ยนิดตีอ้นรบั</h1></center></body>
</html>
HTML Encoding (Character Sets)
https://www.w3schools.com/html/html_charset.asp
8
"CSS describes how HTML elements are displayed." "CSS can be added to HTML elements in 3 ways:"
• inline: by using the style attribute• internal: by using a <style> element in the <head> section
• external: by using an external CSS file
Cascading Style Sheet (CSS)
https://www.w3schools.com/html/html_css.asp
9
Syntax: <tagname style="property:value;">
Examples:<body style="background-color:blue;">
<h1 style="color:red;font-size:15px;">
<p style="font-family:courier;
text-align:center;"> ... </p>
Inline CSS: HTML Style Attribute
https://www.w3schools.com/html/html_styles.asp
10
<html>
<head>
<style>
body { background-color: blue; }
h1 { color: red; text-align: center; }
</style>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
Internal CSS
https://www.w3schools.com/html/html_styles.asp
11
File: hello.html<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello</h1>
</body>
</html>
File: style.cssbody { background-color: blue; }
h1 { color: red; text-align: center; }
External CSS
https://www.w3schools.com/html/html_styles.asp
12
File: index.html<html><head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="red bold">Header</h1>
<p class="red">Paragraph</p>
</body>
</html>
File: style.css.red {color: red; }
.bold { font-weight: bold; }
HTML Class Attribute
https://www.w3schools.com/html/html_styles.asp
13
File: index.html<html><head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="header">Header</h1>
<p id="p1">Paragraph</p>
</body>
</html>
File: style.css#header { font-size: 40px; color: red; }
#p1 { font-size: 20px; color: blue; }
HTML Id Attribute
https://www.w3schools.com/html/html_styles.asp
14
HTML, CSS, JavaScript are the 3 core technologies for web development.
JavaScript can change HTML contentdocument.getElementById("demo").innerHTML = "Hello";
JavaScript can change HTML attribute valuedocument.getElementById("image").src = "img.jpg";
JavaScript can change HTML styledocument.getElementById("demo").style.fontSize = "10px";
JavaScript can hide HTML elementdocument.getElementById("demo").style.display = "none";
JavaScript can show HTML elementdocument.getElementById("demo").style.display = "block";
JavaScript
https://www.w3schools.com/js/js_intro.asp
15
<html>
<body>
<button type="button"
onclick='document.getElementById("demo").
innerHTML="Hello"'>Change Text</button>
<button type="button"
onclick='document.getElementById("demo").
style.display="none"'>Hide Text</button>
<button type="button"
onclick='document.getElementById("demo").
style.display="block"'>Show Text</button>
<p id="demo">Text</p>
</body>
</html>
JavaScript Example
https://www.w3schools.com/js/js_intro.asp
16
"JavaScript can display data in various ways."
<html><body><p id="demo"></p><script>document.getElementById("demo").innerHTML = 5 + 6;document.write("Hello");console.log('1+1='+(1+1));</script><button type="button" onclick="document.write('Test')">Button1</button><button type="button" onclick="window.alert('Welcome');">Button2</button></body></html>
JavaScript Output
https://www.w3schools.com/js/js_output.asp
17
Constant: const pi = 3.14159;
Block-scoped variables: let i = 1;
Block-scoped functions: {function a(){}} Arrow functions: a=(x)=>{return x+1;} Default values: function a(x=0){} Template literals: a={b,1};c=`${a.b+1}` For-of operator:a=[1,2,3];
for(let x of a){console.log(x);}
JavaScript Version ES6
18
// math.js
export function a(x,y){return x+y}
export const pi = 3.14159;
// app1.js
import * as m from "./math"
console.log("pi+1="+m.a(m.pi,1))
// app2.js
import { a, pi } from "./math"
console.log("pi+1="+a(pi,1))
JavaScript ES6: Modules
19
class Shape {
constructor(x){ this.x = x; }
}
class Circle extends Shape{
constructor(x,r){super(x);this.r=r}
set radius(r){this.r=r}
get radius(){return this.r}
static default(){
return new Circle(0,1)}
}
var a = new Circle(0,1);
console.log(a.radius);
var b = Circle.default();
JavaScript ES6 : Classes