Dasar-dasar Html (Bagian 2 )
Lanjutin dari bagian sebelumnya. Jika sebelumnya hanya dasar-dasar perkenalan sebatas pengertian saja, kali ini saya akan jelaskan dasar-dasar html selanjutnya.
1. Preformatted Text
Preformatted Text (pre) digunakan untuk menampilkan teks sama seperti yang Anda ketikkan dalam dokumen HTML. Browser akan menampikan teks tersebut dalam font monospaced, yaitu seperti terlihat dalam teks yang tampilkan oleh aplikasi berbasis teks (misalnya telnet).
<html>
<head>
<title>preformatted text</title>
</head>
<body>
<pre>
edisi yang lalu dibahas tentang membuat billing system untuk warnet yang dapat langsung mencetak tagihan.
kali ini diulas bagaimana menyimpan setiap transaksi dalam database agar bisa diperoleh beberapa laporan secara periodik.
</pre>
</body>
</html>
2. Ukuran Font
Untuk mengatur huruf dokumen HTML digunakan tag <font size>. Tag <font size> memiliki beberapa atribut untuk mengatur ukuran huruf yang akan digunakan.
<html>
<head>
<title>ukuran font</title>
</head>
<body>
<font size=1>ukuran font 1</font>
<font size=2>ukuran font 2</font>
<font size=3>ukuran font 3</font>
<font size=4>ukuran font 4</font>
<font size=5>ukuran font 5</font>
<font size=6>ukuran font 6</font>
<font size=7>ukuran font 7</font>
</body>
</html>
<head>
<title>ukuran font</title>
</head>
<body>
<font size=1>ukuran font 1</font>
<font size=2>ukuran font 2</font>
<font size=3>ukuran font 3</font>
<font size=4>ukuran font 4</font>
<font size=5>ukuran font 5</font>
<font size=6>ukuran font 6</font>
<font size=7>ukuran font 7</font>
</body>
</html>
3. Jenis Font
Atribut face digunakan untuk mengatur jenis huruf yang diinginkan. Atribut face harus diisi dengan string jenis font seperti Arial, Times New Roman,Verdana, dan sebagainya.
<html>
<head>
<title>jenis font</title>
</head>
<body>
<font size=5>
<font face = "arial">arial, contoh ac milan <p>
<font face = "verdana">verdana , contoh persebaya <p>
<font face = "times new roman">times new roman, contoh indonesia <p>
</body>
</html>
<head>
<title>jenis font</title>
</head>
<body>
<font size=5>
<font face = "arial">arial, contoh ac milan <p>
<font face = "verdana">verdana , contoh persebaya <p>
<font face = "times new roman">times new roman, contoh indonesia <p>
</body>
</html>
4. Warna Font
Atribut color digunakan untuk mengatur warna font yang akan digunakan. Untuk memberi nilai pada atribut color, ada dua cara. Cara pertama dengan menuliskan nama warna seperti Red, Blue, Yellow, White, dll. Sedangkan cara kedua adalah dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya ff0000 untuk Red, 00ff00 untuk green, dan 0000ff untuk Blue.
<html>
<head>
<title>warna font</title>
</head>
<body>
<font size=5>
<font color = "red">psm makassar<p>
<font color = "#ff0000">tetap psm makassar kan?<p>
<font color = "#00ff00">ini baru persebaya<p>
</body>
<head>
<title>warna font</title>
</head>
<body>
<font size=5>
<font color = "red">psm makassar<p>
<font color = "#ff0000">tetap psm makassar kan?<p>
<font color = "#00ff00">ini baru persebaya<p>
</body>
5. Penggunaan Tag Break Row (pindah baris)
Tag ini digunakan untuk menurunkan teks sebanyak yang kita inginkan, dengan kata lain satu tag <BR> sama dengan anda menekan tombol Enter satu kali. Untuk lebih jelas sekarang perhatikan contoh berikut ini :
Breakrow.html
<html>
<head>
<title>belajar tag br</title>
</head>
<body>
Mudah-mudahan anda cepat bisa belajar HTML <br>
Amin …!
</body>
</html>
6. Penggunaan Tag Paragraf
Tag <P> berguna untuk membuat paragraf. Jarak paragraf/tek pertama dengan paragraf/tek kedua sama dengan anda menggunakan tag <br> dua kali. Untuk lebih jelasnya perhatikan contoh di bawah ini.
Paragraf1.html
<html>
<head>
<title>belajar tag paragraf</title>
</head>
<body>
Senja Telah Tiba<p>
Mentari kian temaram<br>
Samar disela-sela daun cemara<br>
Angin mulai berhembus dari samudera<br>
Pertanda malam telah tiba
</body>
</html>
Atribut Align juga bisa diterapkan pada tag paragraf. Yang berguna untuk mengatur peletakan teks di dalam masing-masing baris. Sebagai contoh : tambahkan pada kode HTML di atas dengan kode seperti yang terlihat pada contoh program HTML berikut :
Paragraf2.html
<html>
<head>
<title>belajar tag paragraf</title>
</head>
<body>
Senja Telah Tiba
<p align = “center”>
Mentari kian temaram<br>
Samar disela-sela daun cemara<br>
Angin mulai berhembus ke samudera<br>
Pertanda malam telah tiba<br>
</p>
Bandar Lampung, 2004
</body>
</html>
7. Penggunaan Tag Center
Untuk meratakan teks ketengah, kita juga bisa menggunakan tag <Center>. Dan untuk mengakhiri penengahan teks (yakni agar teks berikutnya tidak terletak ditengah), kita perlu menambahkan tanda penutup berupa tanda slash (/), cara penulisannya adalah : </center>. Untuk jelasnya perhatikan latihan di bawah ini :
center.html
<html>
<head>
<title>belajar tag center </title>
</head>
<body>
<center>
Addres :
<hr>
Green Kost Production<br>
<hr size = 5 width = 25% align = left noshade>
Jl. Jambu 1 No. 12<br>
Gedung Meneng<br>
Bandar Lampung 35145
</center>
</body>
</html>
8. Penggunaan Tag Heading
Tag ini digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam badan dokumen. Ukuran yang ada pada tag heading ada 6 buah ukuran yang paling besar ditunjukan dengan penomoran yang paling kecil yaitu angka 1 dan yang paling kecil ditandai dengan nomor terbesar yaitu 6. anda juga bisa menggunakan angka lebih dari enam misal 7 atau 8, tetapi hasilnya adalah tetap seukuran angka 6 karena standarnya adalah ukuran 6 yang terkecil. Untuk memperjelas kegunaan tag heading ini perhatikan pada contoh di bawah ini :
heading.html
<html>
<head>
<title>belajar tag heading</title>
</head>
<body>
<h1>ukuran heading 1</h1>
<h2>ukuran heading 2</h2>
<h3>ukuran heading 3</h3>
<h4>ukuran heading 4</h4>
<h5>ukuran heading 5</h5>
<h6>ukuran heading 6</h6>
</body>
</html>
Seperti halnya pada tag <P>, tag heading juga memiliki atribut. Salah satu atribut yang bisa digunakan adalah atribut align yang bisa bernilai : center, left, right, justify.
Cara menuliskan pada dokumen HTML adalah <h1 align=”center”>.
9. Menampilkan Garis Horisontal (Horizontal Row)
Agar tampilan dokumen HTML yang kita buat menjadi lebih menarik, seorang pembuat dokumen web sering menambahkan garis horisontal biasanya diletakkan di bawah sebuah teks maupun objek lainnya. Cara membuat garis ini sangat mudah sekali, caranya yakni dengan menyertakan tag horizontal Row <HR>. Pada tag <hr> juga bisa ditambahkan atribut-atribut seperti berikut ini :
·Size : Untuk merubah Ketebalan garis
·Width : Untuk merubah lebar garis
·Align : Untuk mengatur tataletak teks dalam baris
·Noshade : Untuk merubah agar garis yang dibuat tidak disertai bayangan
Berikut adalah contoh kode HTML yang menggunakan tag ini :
Garis.html
<html>
<head>
<title>belajar membuat garis </title>
</head>
<body>
Addres :
<hr>
Green Kost Production<br>
<hr size = 5 width = 25% align = left noshade>
Jl. Jambu 1 No. 12<br>
Gedung Meneng<br>
Bandar Lampung 35145
</body>
</html>
10. Meletakkan Gambar pada HTML
Cara yang termudah untuk meletakkan gambar ke suatu halaman html adalah dengan menaruh gambar yang bersangkutan ke dalam folder satu file dengan file htmlnya kemudian dipanggil melalui tag <img>.
Cara pengunaannya seperti ini, lihat kode dibawah ini
<img src="gambar_mobil.jpg" alt="gambar mobil" />
Tag <img> berbeda penggunaannya dengan tag html lain, karena ia tidak menjepit suatu tulisan, melainkan menutup dirinya sendiri. Atribut src adalah atribut yang berisi info dimana lokasi gambar itu berada. Sedangkan atribut alt berguna untuk menampilkan tulisan yang keluar apabila browser yang digunakan tidak memperbolehkan tampilnya gambar. Src adalah kependekan dari Source (sumber) dan Alt adalah kependekan dari Alternative (alternatif teks).
Penempatan gambar terhadap teks juga dapat dimodifikasi melalui atribut align. Silahkan kalian coba kode berikut di papan tulis di bawah.
Teks sejajar
<img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
align="bottom" />
dengan gambar<br />
Teks ditengah-tengah
<img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
align="middle" />
gambar<br />
Teks diatas
<img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
align="top" />
gambar
Align=”bottom” untuk membuat bagian bawah dari gambar rata dengan bagian bawah tulisan, dan gunakan align="middle" untuk membuat gambar berada di tengah-tengah tulisan, namun apabila menginginkan bagian atas gambar rata dengan bagian atas tulisan (rata atas) maka dapat menggunakan align="top". Align="left" dan align="right" untuk membuatnya rata kiri dan rata kanan. Apabila membuat gambar yang ditengahkan harus menambahkan tag <center> dan </center>.
. Untuk membuat background pada tag <body> tambahkan atribut background. Lalu isi dengan nama file gambarnya.
<body background="namafilegambarkalian.gif">
11. Membuat Tabel pada Halaman HTML
Untuk membuat sebuah tabel maka susun bahan-bahan tersebut menjadi seperti ini,
<table>
<tr>
<td>baris 1, kolom 1</td>
<td>baris 1, kolom 2</td>
</tr>
<tr>
<td>baris 2, kolom 1</td>
<td>baris 2, kolom 2</td>
</tr>
</table>
Susunan seperti kode diatas akan membuat sebuah tabel sederhana yang berukuran 2 X 2, yaitu 2 kolom dan 2 baris.
<tr> digunakan untuk membuat suatu baris baru. Sedangkan <td> digunakan untuk membuat kolom/data.
Komentar
Posting Komentar