[PENKOM] Pengenalan HTML (bagian 2)

Posted by : Me Sabtu, 02 Mei 2015

HTML (source: wikipedia.org) Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Merancang Sebuah HTML

  1. Pendefinisian masalah
  2. Desain struktur dan isi situs
  3. Implementasi
  4. Uji coba

Pengertian TAG

Tag merupakan suatu sintaksis yang mendefinisikan suatu hypertext. Tag diawali dengan "<", diisi dengan tipe tag yang diinginkan, dan diakhiri ">". Contohnya: <br />, <em>, <strong>, <img>, <a>, dan lain-lain. Tag ini tidak case-sensitive, jadi mudah untuk dipahami.

Terdapat dua jenis tag:
  1. Tag yang berpasangan. Contoh: <html> dengan </html>, tanda "/" digunakan untuk menutup pasangannya.
  2. Tag yang tidak berpasangan. Contoh: <br/>, <hr/>, <img>

Logical Formatting Tag

Logical Formatting Tag akan menerapkan layout dokumen secara logis dan teratur. Tag-tag yang termasuk dalam logical format yaitu sebagai berikut :

Berikut adalah contoh dalam bentuk dokumen HTML :
  1. <cite>, digunakan untuk menandai sebuah kutipan (Citation).
  2. <code>, digunakan untuk menampilkan kode-kode pemrograman, misalnya kode pemrograman PHP.
  3. <em>, digunakan untuk menampilkan teks yang ditekankan oleh penulis.
  4. <kbd>, digunakan untuk menandai suatu teks yang harus dimasukkan oleh user melalui keyboard.
  5. <samp>, digunakan untuk menandai teks yang digunakan sebagai contoh.
  6. <strong>, digunakan untuk menandai bagian yang terpenting dari suatu teks.
  7. <var>, digunakan untuk menampilkan nama variable.
  8. <dfn>, digunakan untuk menandai sebuah subdefinisi dari daftar definisi.
Berikut contoh dari penggunaan logical formatting tag: KLIK DI SINI

Physical Formatting Tag

Physical Formatting Tag adalah format terhadap fisik suatu font. Tag-tag-nya sebagai berikut :
  1. <b>, untuk menebalkan karakter atau teks.
  2. <i>, untuk memiringkan karakter atau teks.
  3. <u>, untuk menampilkan garis bawah pada karakter atau teks.
  4. <tt>, untuk menampilkan huruf seperti huruf mesin ketik.
  5. <strike>, untuk menampilkan garis horizontal pada bagian tengah huruf.
  6. <big>, menampilkan huruf yang lebih besar.
  7. <small>, menampilkan huruf yang lebih kecil.
  8. <sub>, menampilkan subscript.
  9. <sup>, untuk menampilkan superscript.
Perbedaan antara Physical Formatting Tag dengan Logical Formatting Tag tidak terlalu begitu penting bagi manusia, akan tetapi bagi komputer hal tersebut sangat penting sebab Logical Formatting Tag dapat memberitahukan komputer bahwa terdapat tag-tag penting yang didefinisikan seperti contoh di atas.

Berikut contoh dari penggunaan logical formatting tag: KLIK DI SINI

Pengaturan Teks

  1. Blockquote adalah elemen yang berfungsi untuk menampilkan teks dengan menjorok ke dalam atau dapat dikatakan tag yang berfungsi menampilkan suatu teks dalam bentuk "kutipan".
  2. PRE artinya pre-formatted atau secara mudahnya, apabila teks ditulis dalam tag pre maka hasilnya akan sama dengan apa yang kita tulis, baik dalam jarak (white space, line break atau tab. Tag ini cocok untuk menuliskan code program dan lain-lain dibandingkan tag blockquote
Contoh:
Ini adalah tulisan yang menggunakan tag blockquote
Ini adalah tulisan yang menggunakan pre
Masih kurang paham? Agar lebih mudah melihat kegunaannya silakan KLIK LINK INI

Membuat Description List

Di postingan sebelumnya, sudah dibahas mengenai unordered list <ul> dan ordered list <ol>, serta kegunaan tag <li>. Nah, sekarang saya akan membahas mengenai tag <dl> atau description list, <dt> atau data term, dan <dd> atau data description. Description List adalah jenis list yang ditujukan untuk membuat struktur yang berisi deskripsi atau daftar penjelasan. Contoh:

<dl>
  <dt>HTML</dt>
      <dd>HTML adalah singkatan dari Hypertext Markup Language.</dd>
  <dt>CSS</dt>
      <dd>CSS adalah singkatan dari Cascading Style Sheet.</dd>
  <dt>PHP</dt>
      <dd>PHP adalah singkatan dari PHP: Hypertext Preprocessor.</dd>
</dl>
Hasil:Hasil Description Lists

Menyisipkan Gambar

Untuk menyisipkan gambar pada halaman web, kita dapat menggunakan tag <img>. Sebagai contoh:
<img src="http://rajamuda.esy.es/favicon.png" height="200px" width="200px" alt="ini gambar" align="left">
Atribut src (source) mendefinisikan suatu alamat gambar yang ingin ditampilkan. Atribut height dan width mendefinisikan ukuran (tinggi dan lebar) gambar. Atribut alt mendefinisikan saat pointer diarahkan ke gambar, maka akan muncul tulisan yang berada di dalam atribut tersebut. Terakhir, atribut align mendefinisikan letak gambar. Hasilnya sebagai berikut:

ini gambar











Membuat Link

Untuk mendefinisikan suatu link 'tautan' dalam html, kita dapat menggunakan tag <a>. Sebagai contoh:
<a href="http://www.google.com" target="_blank" title="link menuju google">Menuju Google</a>

<a href="mailto:fksutan.rajomudo@gmail.com">Kirim e-mail ke saya</a>
Terdapat tag <a href> untuk mendefinisikan alamat situs yang mau dituju. Lalu 'target' mendefinisikan bagaimana link dimunculkan, "_blank", mendefinisikan ketika link diklik, maka akan terbuka di tab baru. Kemudian "title", mendefinisikan saat pointer tetap berada di link maka akan dimunculkan teks deskripsi link tersebut. Lalu versi link di bagian kedua, menunjukkan tautan untuk mengirimkan surel ke alamat yang dituju.

Contoh link: Menuju Google.

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Welcome to My Blog

Labels

Popular Post

- Copyright © Dunia [masih] bersinar -Robotic Notes- Powered by Blogger - Designed by Johanes Djogan -