html, css, javascript
DESCRIPTION
Menjelaskan dasar-dasar HTML, CSS, dan JavaScript untuk keperluan selanjutnya mengembangkan konten HTML5.TRANSCRIPT
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
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
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 “/“
<namatag>konten</namatag>
<p>Istri saya sedang tertidur pulas</p>
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.
Contoh struktur HTML
Versi HTML
Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
HTML5 2012
<!DOCTYPE>
Untuk mendefinisikan dokumen HTML dan mengenalkannya pada browser.
<!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">
Perangkat HTML Editor
Membuat atau menyunting sebuah dokumen HTML dapat menggunakan:
Adobe Dreamweaver
Adobe Edge Code
Microsoft Expression Web
Notepad (Geek mode: ON)
Let’s Try!(Buat sebuah folder di komputer Anda, lalu buat sebuah file index.html di dalam folder tersebut menggunakan Notepad)
Let’s try! (index.html)
<!DOCTYPE html>
<html>
<body>
<h1>Hello World!</h1>
</body>
</html>
Let’s try! (index.html)
<!DOCTYPE html>
<html>
<body>
<h1>Hello World!</h1>
<p>Ini adalah halaman web ku</p>
</body>
</html>
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>
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>
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>
Attribut HTML
<a href=“gambar.html”>Klik di sini untuk melihat gambar</a>
href=“gambar.html adalah sebuah attribut.
Attribut HTML
<img src=“filegambar.jpg” width=“400” height=“300”/>
Daftar Tag dan Attribut pada HTML yang lebih lengkap dapat
dilihat di: http://www.w3schools.com/tags/default.asp
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>
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>
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>
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>
Let’s try! (table.html)
<!DOCTYPE html><html>
<head><title>Tabel</title>
</head><body>
<table border="1"><tr>
<td>row 1, cell 1</td><td>row 1, cell 2</td>
</tr><tr>
<td>row 2, cell 1</td><td>row 2, cell 2</td>
</tr></table>
</body></html>
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.
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>
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>
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>
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>