Introduction to HTML, CSS, and Javascript
0 likes490 views
This document provides an introduction to HTML, CSS, and JavaScript. It begins with explaining how client-side and server-side code works. It then defines HTML as the standard markup language for web pages and lists some commonly used HTML tags. CSS is introduced as the style sheet language used to describe the presentation of HTML documents. JavaScript is explained as the programming language used to create interactive effects in web browsers. The document concludes by covering JavaScript syntax like variables, functions, and some common methods.
Introduction to HTML, CSS, and Javascript
- 1. INTRODUCTION TO HTML, CSS, JS Agustinus Theodorus
- 2. HELLO! Agustinus Theodorus IT Architect and Web Services Staff at Bina Nusantara IT Division
- 3. HOW DOES CLIENT SIDE & SERVER SIDE WORK? Web Server Web BrowserInternet HTTP Request HTTP Response
- 5. WHAT IS HTML? Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser.
- 6. COMMONLY USED HTML TAGS <p>…</p> <br /> <h1>…</h1> <!--…--> <ol>…</ol> <ul>…</ul> <img /> <a>…</a> <table>…</table>
- 8. 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.
- 11. 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.
- 12. 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.
- 13. HOW DOES JAVASCRIPT WORK? Web Server Web Browser (Client Side JS is processed here)
- 14. 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>
- 17. var , let , & const; The variables used in javascript are dynamic. Variables in Javascript
- 18. function(){ console.log(‘I am a function’); } Javascript Functions
- 19. alert(object) To show an alert containing the value of the object. alert
- 20. console.log(object) To log the value of the object in the console. console.log
- 21. object.getElementById(‘name of element’) Used to get a HTML element by their Id as an object .getElementById
- 22. object.onclick Used to add a trigger event on a object. .onclick
- 23. object.value Used to get the value of input tags (<input>). .value
- 24. object.length Used to get the length of a object. .length
- 25. object.checked Used to get the Boolean in a <input type=“radio”> or <input type=“checkbox”>. .checked
- 26. object.innerHTML Used to get or modify the value of HTML tags, i.e: (<div>, < p>, <span>, etc..) .innerHTML
- 27. object.substring(start index, end index) Used to get the part of string in object value. .substring
- 28. testString.test(string) Used to check if the string contains testString. .test
- 29. EXERCISES ▪ File : form registrasi.html