2. HTML adalah…
Bahasa yang digunakan untuk membuat dokumen
hypertext yang bebas platform
Atau bisa kita imajinasikan, HTML adalah
“kerangka/tengkorak” sebuah sistem/aplikasi
File HTML memiliki
ekstensi .html. Dan
dijalankan dengan browser
3. Aturan Penulisan
Ada karakter khusus dalam HTML yang disebut tag
Tag tersebut ada tag buka (<>) dan tag tutup (</>)
HTML hanya akan membaca data dari tag <html>
sampai tag </html> saja
Dan isi dari data HTML hanya boleh di tempatkan di
tag <body> sampai tag </body> saja
5. Coba!
“
Save as : coba1.html, tulis di notepad
<html>
<head>
<title>Judul HTML, suka tampil di tab
browser</title>
</head>
<body>
Badan HTML, disinilah tag-tag HTML dituliskan. By the way, tag head di
atas itu apa? Itu kepalanya HTML. Apa fungsinya? Nanti dia menghasilkan
apa? Biasanya disana tempat untuk Javasript dan CSS (monggo di googling
kalo kepo). Terus tag title didalam tag head itu apa? Itu untuk memberi judul
apa sih isi dari HTML kita. Mau pakai tag head dan title atau tidak, tidak
masalah
</body>
</html>
6. No Copas !!!
Ketik sendiri
Dan rasakan sensasinya
Tahukah kalian, salah satu cara mengingat sesuatu itu adalah dengan melihat dan
mencoba/menyentuh sesuatu. Dengan kita mengetik contoh-contoh HTML, otak
kita sedang menyimpan apa saja tag HTML yang kita ketik. InsyaAllah akan lebih
lama ingat dibandingkan cuma sekedar melihat tapi tidak mencobanya.
Jangan lupa! Save as
atau
HTML file (.html)
8. Heading
Heading
Nilainya dari 1 sampa 6. Digunakan untuk judul HTML
(bedakan dengan title. Heading ada di dalam browser,
title ada di tab browser)
Garis Horizontal
Digunakan untuk membuat garis horizontal. Tag yang
satu ini tidak punya tag penutup
10. Peraturan HTML!
HTML tidak mengenal ENTER
Saat kita menulis :
<html>
<head>
<title>Judul HTML, suka
tampil di tab
browser</title>
</head>
<body>
Balonku ada lima
Rupa-rupa warnanya
Hijau kuning kelabu
Merah muda dan biru
</body>
</html>
Yang akan tampil di
browser :
Balonku ada limaRuparupa warnanyaHijau
kuning kelabuMerah
muda dan biru
12. Coba!
“
1.
<html>
<head>
<title>Judul HTML, suka
tampil di tab
browser</title>
</head>
<body>
Balonku ada lima
<br/>Rupa-rupa warnanya
<br/>Hijau kuning kelabu
<br/>Merah muda dan biru
</body>
</html>
2.
<html>
<head>
<title>Judul HTML, suka tampil
di tab
browser</title>
</head>
<body>
<pre>
Balonku ada lima
Rupa-rupa warnanya
Hijau kuning kelabu
Merah muda dan biru
</pre>
</body>
</html>
13. Coba!
“
3.
<html>
<head>
<title>Judul HTML, suka
tampil di tab
browser</title>
</head>
<body>
Balonku ada lima
<p/>Rupa-rupa warnanya
<p/>Hijau kuning kelabu
<p/>Merah muda dan biru
</body>
</html>
Lihat hasilnya. Apa
perbedaan dari setiap
hasilnya. Apa bedanya
tag-tag itu ya?
14.
1. <br/>
Tag “enter” yang sederhana. Hanya bisa men”enter” satu baris
kalimat saja. Kalau kita ingin 100 kali “enter”, maka tulis </br>
100 kali
2. <pre></pre>
Tag yang mengikuti apa yang kita ketik. Bahkan, kalau kita ingin
meng”enter” 100 kali, cukup lakukan “enter biasa”. Maka secara
otomatis <pre> akan mengikutinya
3. <p></p>
Sebenarnya itu bukan untuk meng“enter”, tapi untuk membuat
garis baru sebuah paragraf/memisahkan antar paragraf. Bukankah
membuat paragraf baru berarti harus di enter juga kan? Tidak
masalah pakai tag ini, tapi jarak antar barisnya cukup besar
15. Format Teks dan Font
Tag Format Teks
Untuk memodifikasi bentuk teks
Pada umumnya ada bold, italic, underline, strike,
supperscript, dan
subscript
Tag Font
Untuk mengubah gaya, warna, ukuran tulisan
16. Coba!
“
<html>
<head>
<title>Heading dan garis</title>
</head>
<body>
<b>BOLD</b>
<i>ITALIC</i>
<u>UNDERLINE</u>
<s>STRIKECROSS</s>
<big>BIG</big>
<small>SMALL</small>
<strong>STRONG</strong>
<blink>BLINK</blink>
<sub>SUBSCRIPT</sub>
<sup>SUPPERSCRIPT</sup>
<br/> <font face="papyrus"
color="aqua">
<sup>Naik</sup>
<sup>Naik</sup> ke puncak
gunung </font>
<br/> <font face="papyrus"
color="fuchsia"> Tinggi tinggi
sekali </font>
<br/> <font face="papyrus"
color="teal"> Kiri kanan kulihat
saja </font>
<br/> <font face="papyrus"
color="silver"> Banyak <sub>
pohon stroberi </sub> </font>
</body>
</html>
17. Warna teks, ada 2 macam
1. Pakai nama warnanya
Contoh orange, blue, maroon, cyan
2. Pakai kode warna
Contoh #FFFFFF (putih), #000000 (hitam)
#993399 (ungu gelap)
<tont tace=“calibri” size=“7” color=“orange”> Jeruk makan jeruk </font>
Catatan :
Dianjurkan pakai kode warna
karna warnanya lebih kaya. Kalau
pakai nama warna, emang warna
hijau sedikit biru apa namanya hayo?
green little blue?
<font color=“green little blue”> ?
19. <img>
Untuk memasukan gambar
Coba ini !
<html>
<head>
<title>Gambar</title>
</head>
<body>
<img src=“unikom.jpg”>
</body>
</html>
Siapkan gambar,
tempatnya 1 folder ya
dengan file HTML anda
Sudah di coba?
Sudah lihat hasilnya?
Coba edit !
<html>
<head>
<title>Gambar</title>
</head>
<body>
<img src=“unikom.jpg”
width=“100”
height=“100”>
</body>
</html>
22.
Didalam folder a, buat folder
b. Didalam folder b, buat
folder c. Coba edit seperti ini
<html>
<head>
<title>Gambar</title>
</head>
<body>
<img
src=“../a/b/c/unikom.jpg”>
</body>
</html>
Silahkan disimpulkan
Sendiri
23. Eksplorasi
Tag HTML itu ada banyak sekali
jadi tidak mungkin dijelaskan satu persatu
sisanya anda yang mengeksplorasi
coba tulis script HTML dibawah ini dan lihat
hasilnya
ubah beberapa script HTMLnya
can simpulkan bagaimana menurut anda
25. 2.
<html>
<head>
<title> AT&T WorldNet
Service</title>
</head>
<body bgcolor=“#663366”>
<p align=“right”>
<font size=“8” color=“red”
face=“Times Roman”>
Internet for everybody
</font>
</br>
</p>
<p align=“left”>
<font face=“arial”>
<b>Discover new ways</b> to
stay in touch with the people, ideas,
and information that are imortant for
you. Make travel reservation anytime
Day or night. Find out mutual fund are
hot and which ones are not. Play games.
Do research. Stay on top of current
evants. Converse in our newsgroup, or
keep in touch with e-mail. Armed with
AT&T WorldNet member
directory, meeting new people and
finding old friend is easy.<br/> Click <a
href=“#signup”>here</a> to learn how
to join the AT&T WorldNet
community</font>
</p>
</body>
</html>
27. Referensi
Contoh-contoh latihan, dan tutorial dapat anda dapatkan
Lebih banyak lagi di internet.
Tutorial bahasa inggris lebih banyak dan lebih lengkap
Anda bisa coba sambil melatih kemampuan bahasa inggris anda
Ilmukomputer.org
Youtube.com (codeschool & jream)
Slideshare.com
28. Bisa karena terbiasa
Terbiasa karena mau mencoba
orang rajin tak berbakat
akan mengalahkan
orang cerdas yang tak serius