web development using html, css, and...

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> 

<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">



<div bgcolor="#500000">Hello</div>



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

<html lang="th">

<head>

<meta charset="utf-8"> 

</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


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


12

File: index.html<html><head>


</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


13

File: index.html<html><head>


</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


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>



style.display="none"'>Hide Text</button>



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

web development using html, css, and...

Documents