HTML, CSS, JavaScript

1,152 views

Published on

Menjelaskan dasar-dasar HTML, CSS, dan JavaScript untuk keperluan selanjutnya mengembangkan konten HTML5.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,152
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
109
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML, CSS, JavaScript

  1. 1. HTML, CSS, & JavaScript Muhammad Yusuf (muhammad.yusuf@comlabs.itb.ac.id)
  2. 2. Muhammad Yusuf E-Learning Content Developer di ComLabs USDI ITB (pengembang konten e-learning untuk PT Pertamina, PT BII Maybank, Bank Riau Kepri, PT Newmont Nusa Tenggara, PT Pelindo II) Microsoft Student Partner (2009-2013) Intel Indonesia Developer Community
  3. 3. Apa itu HTML? Singkatan dari Hyper Text Markup Language Sebuah markup language Markup language berarti sekumpulan set dari markup tag Tag mendeskripsikan konten dokumen Mengandung tag HTML dan plain text Digunakan untuk membuat halaman web
  4. 4. Tag HTML Tag HTML adalah sebuah tag di dalam tanda kurung siku (“<“ dan “>”) contoh: <html>, <body>, <p> Tag HTML selalu berpasangan seperti: <html> dan </html> Tag yang pertama adalah tag awalan dan tag yang kedua adalah tag penutup Tag penutup ditulis persis seperti tag awalan namun didahului oleh sebuah karakter garis miring “/“
  5. 5. <namatag>konten</namatag>
  6. 6. <p>Istri saya sedang tertidur pulas</p>
  7. 7. Web Browser Untuk membaca dokumen HTML dan menampilkannya sebagai sebuah halaman web. Browser tidak menampilkan tag HTML tetapi menggunakan tag untuk mendefinisikan bagaimana konten akan ditampilkan.
  8. 8. Contoh struktur HTML
  9. 9. Versi HTML Version Year HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 HTML5 2012
  10. 10. <!DOCTYPE> Untuk mendefinisikan dokumen HTML dan mengenalkannya pada browser.
  11. 11. <!DOCTYPE> HTML5: <!DOCTYPE html> HTML 4.01: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN” " http://www.w3.org/TR/html4/loose.dtd">
  12. 12. Perangkat HTML Editor Membuat atau menyunting sebuah dokumen HTML dapat menggunakan: Adobe Dreamweaver Adobe Edge Code Microsoft Expression Web Notepad (Geek mode: ON)
  13. 13. Let’s Try! (Buat sebuah folder di komputer Anda, lalu buat sebuah file index.html di dalam folder tersebut menggunakan Notepad) (Buat sebuah folder di komputer Anda, lalu buat sebuah file index.html di dalam folder tersebut menggunakan Notepad)
  14. 14. Let’s try! (index.html) <!DOCTYPE html> <html> <body> <h1>Hello World!</h1> </body> </html>
  15. 15. Let’s try! (index.html) <!DOCTYPE html> <html> <body> <h1>Hello World!</h1> <p>Ini adalah halaman web ku</p> </body> </html>
  16. 16. Let’s try! (index.html) <!DOCTYPE html> <html> <head> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> <p>Ini adalah halaman web ku</p> </body> </html>
  17. 17. Let’s try! (index.html) <!DOCTYPE html> <html> <head> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> <p>Ini adalah halaman web ku</p> <a href=“gambar.html”>Klik di sini untuk melihat gambar</a> </body> </html>
  18. 18. Let’s try! (gambar.html) <!DOCTYPE html> <html> <head> <title>Gambar</title> </head> <body> <h1>Gambar</h1> <img src=“filegambar.jpg” width=“400” height=“300”/> <a href=“index.html”>Klik di sini untuk kembali ke halaman awal</a> </body> </html>
  19. 19. Attribut HTML <a href=“gambar.html”>Klik di sini untuk melihat gambar</a> href=“gambar.html adalah sebuah attribut.
  20. 20. Attribut HTML <img src=“filegambar.jpg” width=“400” height=“300”/>
  21. 21. Daftar Tag dan Attribut pada HTML yang lebih lengkap dapat dilihat di: http://www.w3schools.com/tags/default.asp
  22. 22. HTML Formatting <!DOCTYPE html> <html> <body> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><i>This text is italic</i></p> <p><em>This text is emphasized</em></p> <p><code>This is computer output</code></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html>
  23. 23. Simple CSS Style (gambar.html) <!DOCTYPE html> <html> <head> <title>Gambar</title> <style type="text/css"> body {background-color:yellow;} a {color:black;} </style> </head> <body> <h1>Gambar</h1> <img src=“filegambar.jpg” width=“400” height=“300”/> <a href=“index.html”>Klik di sini untuk kembali ke halaman awal</a> </body> </html>
  24. 24. Let’s try! (index.html) <!DOCTYPE html> <html> <head> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> <p style="color:blue;margin-left:20px;">Ini adalah halaman web ku</p> <a href=“gambar.html”>Klik di sini untuk melihat gambar</a> </body> </html>
  25. 25. Let’s try! (index.html) <!DOCTYPE html> <html> <head> <title>Hello World</title> </head> <body> <h1 style=“text-align:center;font-family:arial;color:red;font-size:20px;">Hello World!</h1> <p style="color:blue;margin-left:20px;">Ini adalah halaman web ku</p> <a href=“gambar.html”>Klik di sini untuk melihat gambar</a> </body> </html>
  26. 26. Let’s try! (table.html) <!DOCTYPE html> <html> <head> <title>Tabel</title> </head> <body> <table border="1"> <tr> <td>row 1, cell <td>row 1, cell </tr> <tr> <td>row 2, cell <td>row 2, cell </tr> </table> </body> </html> 1</td> 2</td> 1</td> 2</td>
  27. 27. Tag <div> dan <span> Berguna untuk mendefinisikan bagian-bagian dari dokumen HTML. Tag <div> untuk mendefinisikan bagian yang berbeda baris. Tag <span> untuk mendefinisikan bagian yang berada dalam satu baris yang sama.
  28. 28. Let’s try! (index.html) <!DOCTYPE html> <html> <head> <title>Hello World</title> </head> <body> <div id=“header”> <h1 style=“text-align:center;">Hello World!</h1> </div> <div id=“konten”> <p style="color:blue;margin-left:20px;">Ini adalah halaman web ku</p> <a href=“gambar.html”>Klik di sini untuk melihat gambar</a> </div> </body> </html>
  29. 29. Simple JavaScript (index.html) <!DOCTYPE html> <html> <head> <title>Hello World</title> <script> document.write(“<p><i>Berikut ini adalah contoh Hello World</i></p>“) </script> </head> <body> <div id=“header”> <h1 style=“text-align:center;">Hello World!</h1> </div> <div id=“content”> <p style="color:blue;margin-left:20px;">Ini adalah halaman web ku</p> <a href=“gambar.html”>Klik di sini untuk melihat gambar</a> </div> </body> </html>
  30. 30. Simple JavaScript (index.html) <!DOCTYPE html> <html> <head> <title>Hello World</title> <script> document.write(“<p><i>Berikut ini adalah contoh Hello World</i></p>“) </script> </head> <body> <div id=“header”> <h1 style=“text-align:center;">Hello World!</h1> </div> <div id=“konten”> <p id=“teksKonten” style="color:blue;margin-left:20px;">Ini adalah halaman web ku</p> <a href=“gambar.html”>Klik di sini untuk melihat gambar</a> <button type="button" onclick=“tombolKlik()">Klik saya!</button> </div> </body> </html>
  31. 31. Simple JavaScript (index.html) <head> <title>Hello World</title> <script> document.write(“<p><i>Berikut ini adalah contoh Hello World</i></p>”); function tombolKlik(){ document.getElementById(“teksKonten").style.color="#FF0000"; } </script> </head>

×