Tuesday, May 14, 2013

Materi Ke 2 HTML : Membuat Halaman Artikel dengan Beberapa Format Huruf Tebal, Miring, Garis Bawah

Pada Materi Ke 2 HTML kita berlatih Membuat Halaman Artikel yang didalamnya ada beberapa format huruf seperti huruf tebal, miring, atau garis bawah. Tentunya dalam pengetikan artikel ada kalanya ada penegasan kata tertentu yang dianggap penting dan perlu perhatian ditandai dengan adanya tanda huruf tebal, huruf miring atau huruf dengan garis bawah, malahan terkadang ketiganya digunakan bersamaan.

Perlu diingatkan kembali dalam HTML kebanyakan tag ditulis dengan format awal <tag> akhir </tag> contoh: <head>Materi Kedua</head>. Bagaimana kita mendapat tampilan tebal, miring, dan garis bawah akan dibahas sebagai berikut:


1. HURUF TEBAL/ BOLD
Untuk menghasilkan huruf tebal digunakan tag:
<b>Latihan Format Tulisan</b> 
maka dihasilkan Latihan Format Tulisan

2. HURUF MIRING/ ITALIC
Untuk menghasilkan huruf miring digunakan tag:
<i>Latihan Format Tulisan</i> 
maka dihasilkan Latihan Format Tulisan

3. HURUF GARIS BAWAH/ UNDERLINE
Untuk menghasilkan huruf garis bawah digunakan tag
<u>Latihan Format Tulisan</u> 
maka dihasilkan Latihan Format Tulisan

4. GABUNGAN DARI KETIGANYA
Contoh penggabungan penulisan tagnya:
<b><i>Latihan Format Tulisan</i></b> <b><u>Latihan Format Tulisan</u></b>
 <i><u>Latihan Format Tulisan</u></i> <b><i><u>Latihan Format Tulisan</u></i></b>
hasilnya adalah :
Latihan Format Tulisan                   Latihan Format Tulisan
Latihan Format Tulisan                     Latihan Format Tulisan

Selanjutnya kita coba untuk langsung praktek penggunaan tag2 diatas, kita mulai dengan ikuti langkah2 berikut: (Jika ada yang masih bingung bisa membaca artikel Materi ke 1 HTML di sini )
1. Buka Notepad
2. Ketik Kode berikut:

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML>
   <HEAD>
      <TITLE>
         Latihan 2 HTML
      </TITLE>
   </HEAD>
<BODY>
   <H1><b>Energi Angin di Indonesia Melempem, Mengapa?</b></H1>
   <H2><b><i>Padahal, potensi energi angin di Indonesia telah mencapai 9,4 GWh.</i></b></H2>
   <P>Potensi energi angin di Indonesia mencapai 9,4 <b>Gigawatt per Hour (Gwh)</b>. Boleh dibilang cukup besar.
   Namun, pemanfaatannya belum maksimal dan kebijakan pemerintah <i>belum mendukung</i> penggunaan energi angin
   sebagai sumber energi terbarukan.</P>
   <P>Untuk mengembangkan energi angin, <b><u>Badan Pengkajian dan Penerapan Teknologi (BPPT)</u></b> melalui <b>Balai
   Besar Teknologi Energi (B2TE)</b> bekerja sama dengan <u>United Nations Development Programme (UNDP)</u>
   membangun proyek <i>Wind Hybrid Power Generation (WhyPGen) Market Development Intiatives</i>.</P>
   <P>Proyek yang didanai oleh <b><i><u>Global Environment Facility (GEF)</u></i></b> ini bertujuan mendorong komersialisasi
   pembangkit listrik hibrid berbasis energi angin di Indonesia. Targetnya menghasilkan sebesar <b>18,115 GWh</b>,
   dan dapat mengurangi emisi CO2 sebanyak <i><u>16.050 metric ton</u></i>.</P>
   <P><i>Namun, dalam pengembanan energi angin di Indonesia masih terkendala masalah kebijakan dari pemerintah.
   Perusahaan-perusahaan di bidang energi mendesak pemerintah agar cepat menetapkan tarif dasar penjualan
   energi angin.</i></P>
   <P>"Agar para perusahaan mau berinvestasi, pemerintah harus menetapkan harga dari energi angin.
   Jika tidak ada harga, bagaimana perusahaan mau menjualnya?" ujar <b>Poempida Hidayahtullah</b>,
   <i>CEO PT Viron Energy, di BPPT, Jakarta, 14 Mei 2013</i>.</P>
</BODY>
</HTML>
 
3. Simpan dengan nama artikel.html 

4. Tampilkan di webbrowser dengan alamat localhost/coba/artikel.php


Perlu diperhatikan bahwa ketika membuka alamat localhost/coba maka file html yang ditampilkan adalah index.html. Kesimpulannya index.html adalah file yang dipanggil pertama kali ketika mengakses halaman web. Bagaimana agar halaman yang tampil sesuai dengan yang kita inginkan?? Maka....
Karena kita menyimpan file html tadi dengan nama artikel.html maka agar bisa tampil maka harus kita panggil halaman tersebut dengan alamat localhost/coba/artikel.html agar yang tampil adalah laman artikel.html yang kita buat tadi.
Sekian dulu Materi Ke 2 sebagai dasar materi-materi selanjutnya...


No comments:

Post a Comment