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
HTML adalah…
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
Aturan Penulisan
Tes1.html
<html>
<body>
Ini badan HTML
</body>
</html>
Tes2.html
<html>
<body>
Ini badan HTML
</body>
Di luar badan HTML
</html>
Diluar HTML
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>
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
HTML file (.html)
No Copas !!!
atau
Silahkan eksplorasi Ganti kata-katanya, coba Tulis kalimat di luar tag html, head ,body Bagaimana hasilnya?
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
Heading
Coba! “
<html> <head> <title>Heading dan garis</title> </head> <body> <h1>Gila! Gede banget</h1> <h2>Wuih! Gedeeee!</h2> <h3>Wow. Gede.</h3> <h4>Ya standarlah ukurannya!</h4> <h5>Hmm, kecil juga yah</h5> <h6>Ih kecilnya cimit cimit! >< </h6> <br/></br> <hr size=10 width="60%" align="center" color="yellow"> <hr size=10 width="50%" align="center" color="orange">
<hr size=10 width="40%" align="center" color="red">
<hr size=10 width="30%" align="center" color="pink">
<hr size=10 width="20%" align="center" color="silver">
<hr size=10 width="30%" align="center" color="pink">
<hr size=10 width="40%" align="center" color="red">
<hr size=10 width="50%" align="center" color="orange">
<hr size=10 width="60%" align="center" color="yellow">
</body>
</html>
Peraturan HTML!
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 limaRupa-rupa warnanyaHijau kuning kelabuMerah muda dan biru
HTML tidak mengenal ENTER
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>
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?
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
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
Format Teks dan Font
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>
<tont tace=“calibri” size=“7” color=“orange”> Jeruk makan jeruk </font>
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)
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”> ?
<img> Untuk memasukan gambar
Siapkan gambar, tempatnya 1 folder ya dengan file HTML anda
Coba ini ! <html> <head> <title>Gambar</title> </head> <body> <img src=“unikom.jpg”> </body> </html>
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>
Bagaimana?
Silahkan simpulkan sendiri bagaimana menurut anda.
Sekarang tempatkan gambar di luar folder
CTRL+X
CTRL+V
Coba! “
<html>
<head>
<title>Gambar</title>
</head>
<body>
<img src=“../unikom.jpg”>
</body>
</html>
Sudah di coba? Sekarang buat folder a, simpan gambar di folder a. Coba edit seperti ini <html> <head> <title>Gambar</title> </head> <body> <img src=“../a/unikom.jpg”> </body> </html>
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
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
Eksplorasi
1. <html> <head> <title> AT&T WorldNet Service</title> </head> <body bgcolor=“gray”> <p> <font face=“Arial”><b>Still have question?</b> In the United States, Call 1-800-WORLDNET (1-800-967-5363). Outside the U.S. call 201-WORLDNET (201-967-5363)</font> </br> </p> <p align=“left”> <font size=“1”> <sup>*</sup> Today card member may be liable for the first $50
of change as the card member notifies AT&T Universal Card of the loss with in 24 hours and otherwise of <i>card member</i> or <i>authorized user</i> </font> </p> <p align=“left”> <font size=“1”> Copyright © 1996 AT&T. All right reserved. AT&T WorldNet is a service mark of AT&T </font> </p> </body> </html>
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>
3. <html> <head> <title> Karakter Khusus </title> </head> <body bgcolor=“#3399cc”> <h1>Karakter Khusus</h1> <hr size=“5” width=“90%”> align=“center”> <pre> < > & ö ñ è " ¢ £ ¥ © & reg; ° ¼ ½ ¾ × </pre> <hr size=“5” width=“90%”>
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
Top Related