BELAJAR HTML DAN BAHASA PEMOGRAMAN HTML
PENDAHULUAN
HTML singkatan dari Hyper Text Markup Language.
HTML bukan suatu bahasa pemrograman tetapi sebuah bahasa dalam bentuk text yang dapat digunakan untuk menyusun tulisan, gambar, suara, film dan banyak lagi informasi yang bisa ditampilkan.
Cukup dengan mengunakan Notepad untuk mengetik Text dan Internet Explorer untuk menampilkan halaman WEB kita.
Kalau kita menginstall windows dua program ini sudah pasti tersedia.
Anda juga dapat menggunakan program-program yang lain untuk membuat HTML seperti Front Page, Microsoft Word, Dos Edit, Mac SimpleText, Unix, dll.
Dengan cara mengetik di editor kemudian disimpan dalam file dengan akhiran html, misalnya coba.html
Kemudian file yang berakhiran html tersebut dibuka di Internet Explorer, jadilah sudah program HTML kita.
Hubungkan program HTML kita dengan salah satu Internet Service Provider (ISP) yang kita kehendaki.
Kita bisa menggunakan provider dari www.geocities.com dengan cara upload file atau dengan provider lainnya.
MEMBUAT HALAMAN PERTAMA
Silahkan buka notepad anda.
Ketik seperti dibawah ini:
<html>
<head><title>Halaman web saya yang pertama</title></head>
<body>
Ini halaman web saya yang pertama.
</body>
</html>
<body> dan </body> digunakan sebagai isi dari halaman WEB kita.
Sekarang kita simpan text yang telah kita ketik misalnya dengan nama hal1.html
Sekali lagi jangan lupa akhiri nama file dengan .html
Selanjutnya kita buka Internet Explorter: klik gambarnya, kemudian File->Open->Browse, cari file dengan nama hal1.html kemudian Open dan OK.
Pada bab ini kita akan belajar membuat paragaf, heading, format text dan
bentuknya.
1. Membuat Paragraf
Silahkan ketik di notepad seperti dibawah ini:
<html>
<head><title>Menambah Text dan Formatnya</title></head>
<body>
Ini baris pertama<p>
Dan ini baris ke tiga<br>
Kalau ini baris ke empat<br>
</body>
</html>
· <p>
artinya pindah paragraf atau pindah dua baris
· <br>
artinya pindah baris
2.
Membuat Heading
Silahkan ketik diantara <body> dan </body> seperti dibawah ini:
<h1>Heading
Pertama</h1>
<h2>Heading Kedua</h2>
<h3>Heading Ketiga</h3>
<h4>Heading Keempat</h4>
<h5>Heading Kelima</h5>
<h6>Heading Keenam</h6>
· Terlihat bahwa
besarnya tulisan tiap heading berbeda-beda.
3.
Format Text dan Bentuknya
Silahkan ketik diantara <body> dan </body> seperti dibawah ini:
<style
type="text/css">
body {font-family:"Arial";font-size:"12pt";color:blue}
</style>
<body>
Ini <b><i><u>halaman</u></i></b> web saya
</body>
· <style>
dan </style> adalah bentuk, ukuran dan warna text.
· <b> dan
</b> adalah text yang ditebalkan.
· <i> dan
</i> adalah text yang dimiringkan.
· <i> dan </i> adalah text yang
digaris bawahi.
Tabel digunakan untuk menampilkan angka-angka dalam baris dan kolom, pada
bab ini kita akan belajar bagaimana membuat tabel.
1. Membuat Tabel Sederhana
Silahkan ketik diantara <body> dan </body> seperti dibawah ini:
<table>
<tr><th>Kolom 1</th><th>Kolom 2</th></tr>
<tr><td>Baris 2</td><td>Baris 2</td></tr>
<tr><td>Baris 3</td><td>Baris 3</td></tr>
</table>
· <tr>
definisi baris horisontal
· <td>
definisi data sel dalam satu baris
· <th>
definisi data sel pada judul tabel
2.
Membuat Tabel Dengan Formatnya
Silahkan ketik diantara <head> dan </head> seperti dibawah ini:
<style
type="text/css">
th {font-family:"Arial";font-size:"12pt";color:red}
td {font-family:"Tahoma";font-size:"12pt";color:blue}
</style>
Silahkan
ketik diantara <body> dan </body> seperti dibawah ini:
<table
with="50%" border="1" rules=ALL>
<tr><th bgcolor="silver">Kolom 1</th><th bgcolor="silver">Kolom
2</th></tr>
<tr><td align="center">Baris 2</td><td
align="center">Baris 2</td></tr>
<tr><td align="center">Baris 3</td><td
align="center">Baris 3</td></tr>
</table>
3. Membuat Tabel Lanjutan
Silahkan ketik diantara <head> dan </head> seperti dibawah ini:
<style
type="text/css">
th {font-family:"Arial";font-size:"12pt";color:red}
td {font-family:"Tahoma";font-size:"12pt";color:blue}
</style>
Silahkan
ketik diantara <body> dan </body> seperti dibawah ini:
<table
with="100%" border="1" rules=ALL>
<tr><th bgcolor="silver" colspan="2">Kombinasi
kolom 1 dan kolom 2.</th></tr>
<tr><td>Baris 2</td><td rowspan="2">Kombinasi
baris 2 dan baris 3.</td></tr>
<tr><td>Baris 3</td></tr>
</table>
|
Kombinasi kolom 1 dan kolom 2.
|
|
|
Baris 2
|
Kombinasi baris 2 dan baris 3.
|
|
Baris 3
|
|
Pada
bab ini kita akan membahas cara menghubungkan text atau web dokumen yang kita
buat ke lokasi tertentu atau sering disebut dengan Hyperlinks.
Kita dapat menghubungkan text kita dengan file dan email lainnya, bisa juga
kita hubungkan dalam halaman yang sama ataupun halaman yang berbeda.
1. Menghubungkan Text kita dengan file lain dan email lain
Silahkan ketik diantara <body> dan </body> seperti dibawah ini:
Silahkan <a href="hal1.html">klik disini
</a>untuk membuka halaman pertama.<br>
Silahkan <a
href="http://www.geocities.com/riyanto_its/html.html">klik disini
</a>untuk membuka web belajar HTML.<br>
Silahkan <a href="mailto:sigit@ece.ibaraki-ct.ac.jp">klik
disini </a>untuk mengirim email ke Sigit.<br>
2. Menghubungkan Text Pada Halaman Yang Sama
Silahkan ketik diantara <body> dan </body> seperti dibawah ini:
<h2>Klik tulisan bergaris untuk membaca text secara
penuh</h2><br>
<a href="#BS"><i>Paragraf
Satu</i></a><br>
<a href="#BD"><i>Paragraf
Dua</i></a><br>
<h1>Membaca Artikel Penuh>/h1><br>
<h2><a name="BS">Paragraf
Satu</a></h2><br>
Ini tulisan pertama.<p>
Ini tulisan kedua.<p>
Ini tulisan ketiga.<p>
Ini tulisan keempat.<p>
Ini tulisan kelima.<p>
Ini tulisan keenam.<p>
Ini tulisan ketujuh.<p>
<h2><a name="BD">Paragraf
Dua</a></h2><br>
Ini tulisan pertama.<p>
Ini tulisan kedua.<p>
Ini tulisan ketiga.<p>
Ini tulisan keempat.<p>
Ini tulisan kelima.<p>
Ini tulisan keenam.<p>
Ini tulisan ketujuh.<p>
3.
Menghubungkan Text Pada Halaman Lain
Silahkan ketik diantara <body> dan </body> seperti dibawah ini:
<h2>Klik tulisan bergaris untuk membaca text secara
penuh</h2><br>
<a href="para1.html"><i>Paragraf
Satu</i></a><br>
<a href="para2.html"><i>Paragraf
Dua</i></a><br>
HASIL SELANJUTNYA YANG LEBIH LENGKAP SILAHKAN KUNJUNGI ALAMAT WEB DIBAWAH INI :
http://lecturer.eepis-its.edu/~riyanto/wawal.html
Tidak ada komentar:
Posting Komentar