Introduction to HTML, CSS, and Javascript

INTRODUCTION TO
HTML, CSS, JS
Agustinus Theodorus

HELLO!
Agustinus Theodorus
IT Architect and Web Services Staff at Bina Nusantara
IT Division

HOW DOES CLIENT SIDE & SERVER SIDE WORK?
Web
Server
Web BrowserInternet
HTTP Request
HTTP Response

INTRODUCTION TO
HTML
Agustinus Theodorus

WHAT IS HTML?
Hypertext Markup Language
is the standard markup language for documents designed to be displayed in a web browser.

COMMONLY USED HTML TAGS
<p>…</p>
<br />
<h1>…</h1>

<ol>…</ol>
<ul>…</ul>
<img />
<a>…</a>
<table>…</table>

INTRODUCTION TO
CSS
Agustinus Theodorus

WHAT IS CSS?
Cascading Style Sheets
is a style sheet language used for describing the presentation of a document written in a markup language like
HTML.

INTRODUCTION TO
JAVASCRIPT
Agustinus Theodorus

WHAT IS JAVASCRIPT?
Ja-va-Script
ˈjävəskript,ˈjavə-/
noun
an object-oriented computer programming language commonly used to create interactive effects within web
browsers.

HOW DOES JAVASCRIPT WORK?
A brief explanation of Client Side and Server Side.
▪ Client Side 🡪 script is run on client’s browser, and doesn’t need web server to run.
▪ Server Side 🡪 script is processed on a web server, and is served back at the user to generate a dynamic html
page for the client.

HOW DOES JAVASCRIPT WORK?
Web
Server
Web Browser
(Client Side JS is
processed here)

HOW DO WE APPLY JAVASCRIPT?
▪ There are 3 ways to apply Javascript in your web app:
▪ Internal JavaScript
Written in the .html file within the script tag
<script>
function sayHiConsoleLog()
{
var button = document.getElementById(‘helloBtn’);
button.onclick = function () {
console.log(‘Hello World’);
}
}
</script>
▪ External JavaScript
Written in a external .js file
<script src="script.js"></script>
▪ Inline JavaScript handlers
Written inline in html tags (script here usually calls functions)
<button onclick=“sayHiConsoleLog()">Click me!</button>

var , let , & const;
The variables used in javascript are dynamic.
Variables in Javascript

function(){
console.log(‘I am a function’);
}
Javascript Functions

alert(object)
To show an alert containing the value of the object.
alert

console.log(object)
To log the value of the object in the console.
console.log

object.getElementById(‘name of element’)
Used to get a HTML element by their Id as an object
.getElementById

object.onclick
Used to add a trigger event on a object.
.onclick

object.value
Used to get the value of input tags (<input>).
.value

object.length
Used to get the length of a object.
.length

object.checked
Used to get the Boolean in a <input type=“radio”> or <input type=“checkbox”>.
.checked

object.innerHTML
Used to get or modify the value of HTML tags, i.e: (<div>, < p>, <span>, etc..)
.innerHTML

object.substring(start index, end index)
Used to get the part of string in object value.
.substring

testString.test(string)
Used to check if the string contains testString.
.test

EXERCISES
▪ File : form registrasi.html

Introduction to HTML, CSS, and Javascript

More Related Content

What's hot

Similar to Introduction to HTML, CSS, and Javascript

More from Agustinus Theodorus

Recently uploaded

Introduction to HTML, CSS, and Javascript