HTML, CSS, JavaScript

HTML, CSS, & JavaScript
Muhammad Yusuf
(muhammad.yusuf@comlabs.itb.ac.id)

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

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

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

<!DOCTYPE html>
<html>
<body>
<p>Ini adalah halaman web ku</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<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>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="color:blue;margin-left:20px;">Ini adalah halaman web ku</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style=“text-align:center;font-family:arial;color:red;font-size:20px;">Hello
World!</h1>
</body>
</html>

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>

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.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id=“header”>
<h1 style=“text-align:center;">Hello World!</h1>
</div>
<div id=“konten”>
</div>
</body>
</html>

Simple JavaScript (index.html)
<!DOCTYPE html>
<html>
<head>
<script>
document.write(“<p><i>Berikut ini adalah contoh Hello World</i></p>“)
</script>
</head>
<body>
</div>
<div id=“content”>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script>
document.write(“<p><i>Berikut ini adalah contoh Hello World</i></p>“)
</script>
</head>
<body>
</div>
<div id=“konten”>
<p id=“teksKonten” style="color:blue;margin-left:20px;">Ini adalah halaman
web ku</p>
<button type="button" onclick=“tombolKlik()">Klik saya!</button>
</div>
</body>
</html>

<head>
<script>
document.write(“<p><i>Berikut ini adalah contoh Hello
World</i></p>”);
function tombolKlik(){
document.getElementById(“teksKonten").style.color="#FF0000";
}
</script>
</head>

HTML, CSS, JavaScript

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (6)

Similar to HTML, CSS, JavaScript

Similar to HTML, CSS, JavaScript (20)

HTML, CSS, JavaScript