Pengenalan HTML (Bagian Pertama)

1.1 HTML (HyperText Markup Language)

HTML merupakan kepanjangan dari HyperText Markup Language bahasa ini digunakan untuk membuat hypertext page (halaman hypertext) pada Internet. Pada dokumen kita tidak harus membaca teks secara berurutan baris per baris atau halaman per halaman, tetapi kita dapat melompat dari satu topik lain yang kita inginkan.

Yang membedakan dokumen HTML dengan dokumen pada umumnya, adalah adalanya elemen-elemen HTML beserta tag-tagnya. Elemen dan tag HTML menentukan bagian dan format pada suatu bagian pada struktur dokumen HTML.

HTML merupakan bahasa pemrograman yang fleksibel dimana kita dapat menempatkan script dari bahasa program lain seperti Java, Visual Basic, C++ dan lain-lain. Karena HTML berupa text dokumen biasa (ASCII) maka HTML dapat dibaca oleh platform yang berlainan seperti Windows, Unix dan lain-lainnya.

1.2 Struktur Dokumen HTML

Pada dokumen HTML terdapat 3 tag utama yang membentuk struktur HTML tersebut, yaitu tag:

  • <HTML> —- Sebagai tanda awal dokumen HTML.
  • <HEAD> —– Sebagai informasi page header. Didalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.
  • <BODY>—— Didalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.

Struktur Dokumen HTML terlihat seperti conto dokumen HTML dibawah ini :

<HTML>

<HEAD>

<TITLE> Pengelan HTML </TITLE>

</HEAD>

<BODY>

<b> Belajar HTML emang paling mengasikan lohhhhhhhhh </b>

</BODY>

</HTML>

1.3   Elemen

Elemen pada dokumen HTML berupa tag-tag beserta teks yang ada didalam tag-tag tersebut. Pada dokumen HTML, terdapat dua kelompok elemen utama yaitu elemen-elemen <HEAD> dan elemen <BODY>. Elemen yang terdapat pada <HEAD> berisi informasi mengenai dokumen HTML tersebut sebagai contoh judul dokumen. Untuk menuliskan judul dokumen menggunakan tag <TITLE>, lihat pada contoh dokumen HTML diatas. Elemen-elemen pada <BODY> menentukan isi dari dokumen HTML seperti paragraf (menggunakan tag <p>, lihat pada contoh dokumen HTML diatas), tabel ,form, frame dan lain-lain. Pada dokumen HTML tidak dibedakan pemakaian huruf kecil dan huruf besar suatu elemen, penulisan <p> ataupun <p> memberikan hasil yang sama pada browser.

1.4 Tag

Tag diawali dengan tanda < (tanda lebih kecil) dan diakhiri dengan tanda > (tanda lebih besar). Pada saat browser membaca dokumen HTML, maka browser mencari tag yang terdapat pada dokumen HTML tersebut.

Pada dokumen HTML terdapat 4 macam tag, yaitu :

  • Tag berpasangan     :

Perintah awal (opening tags) berada diantara (<….>). Perintah akhir (closing tags) mengandung / dimuka perintah sehingga berbentuk seperti (</….>). Sebagai contoh tag yang digunakan untuk menebalkan teks adalah : <b>….teks….</b>

  • Tag tunggal              :

Sebagai contoh seperti <br> untuk pindah baris, dan <hr> membuat garis horizontal.

  • Tag dengan atribut :

Sebagai contoh <BODY bgcolor=yellow>, bgcolor adalah attribut yang dapat digunakan pada tag <BODY> yang fungsinya untuk mengatur tampilan latar belakang. Suatu nilai attribut harus ditulis didalam pasangan tanda petik ganda kecuali nilai attribut tersebut suatu kumpulan dari nilai tertentu, sebagai contoh <p align=center> atau nilai attribut tersebut hanya berisi angka, huruf dan titik.

  • Disamping itu terdapat juga tag yang perintahnya dapat memakai closing tag maupun tidak sebagai contoh tag : <p> yakni tag paragraph dan <li> untuk membuat daftar (list)

1.5     Tag-Tag Dasar Pada HTML

Tag <HTML> sebagai tanda awal dari dokumen HTML, semua informasi yang terdapat pada dokumen HTML harus berada didalam tag awal dan tag akhir dari tag <HTML>

1.5.1  <HTML>

Tag <HTML> sebagai tanda awal dari dokumen HTML, semua informasi yang terdapat pada dokumen HTML harus berada didalam tag awal dan tag akhir Tag <HTML>.

1.5.2  <HEAD>

Tag <HEAD> sebagai informasi page header. Didalam tag ini kita bisa meletakkan tag-tag.

  • TITLE : Tag ini digunakan untuk menentukan judul dokumen HTML, tag ini harus digunakan pada dokumen HTML. Contoh : < TITLE> Belajar HTML </TITLE>
  • BASE  :  Tag ini digunakan untuk menentukan suatu link ke alamat web induk. Perintah ini mirip dengan perintah PATH pada perintah DOS.

<BASE HREF=”https://indrajayaadriand.wordpress.com&gt;

Setelah penulisan perintah diatas maka penulisan perintah <IMG SRC =”gambar/indra.jpg> mempunyai arti sama dengan penulisan : < IMG src=”https://indrajayaadriand.wordpress.com/gambar/indra.jpg&#8221; mce_src=”https://indrajayaadriand.wordpress.com/gambar/indra.jpg”&gt;

  • ISINDEX

Tag ini digunakan untuk melakukan pencarian dalam dokumen.

Contoh : <ISINDEX prompt=”Ketik teks yang akan dicari:”>

  • META

Tag ini dipakai untuk memberikan informasi mengenai dokumen. Attribut yang dapat digunakan pada tag ini adalah :

  1. NAME               : Suatu informasi mengenai dokumen
  2. HTTP-EQUIV : Attribut ini digunakan untuk menghubungkan elemen meta ke protokol tertentu.
  3. CONTENT       : Merupakan isi dari nama suatu meta.

Contoh : <META HTTP-EQUIV=”REFRESH”CONTENT=2>

Dokumen akan dipanggil secara otomatis dalam 2 detik.

<META NAME=”GENERATOR” CONTENT=”MACROMEDIA DREAMWEAVER MX”>

Dokumen dibuat dengan MACROMEDIA DREAMWEAVER MX.

1.5.3 <BODY>

Tag ini digunakan untuk menentukan bagian isi dokumen. Beberapa Atribut yang dapat kita gunakan pada tag ini adalah :

  • BGCOLOR :

Mengatur warna belakang, warna dapat kita tuliskan namanya, misalkan yellow, blue, red dll, atau menggunakan nilai HEX.

Contoh : < BODY bgcolor=yellow>

<BODY bgcolor=”FFFFFF”>

  • ALINK  : Mengatur warna link yang sedang aktif.
  • VLINK  : Mengatur warna link yang belum pernah dipilih.
  • VLINK  : Mengatur warna link yang pernah dipilih.
  • BACKGROUND : Memanggil file gambar yang akan digunakan sebagai latar belakang.
  • LEFTMARGIN : Mengatur margin kiri dokumen.
  • TOPMARGIN   : Mengatur margin atas dokumen.
  • TEXT                  : Mengatur warna teks pada dokumen.

1.5.5 Paragraph

Untuk menyatakan suatu kumpulan teks sebagai paragraph kita menggunakan tag <P>

Contoh :

<p> HTML merupakan kepanjangan dari Hyper Text Markup Language</p>

1.5.6 BLOCKQUOTE

Untuk menuliskan suatu kelompok teks agar tampilannya dicetak dengan indent kita dapat menggunakan tag <BLOCKQUOTE>. Perhatikan contoh dibawah ini :

<blockquote> HTML merupakan kepanjangan Hyper Text Markup Language </blockquote>.

1.5.7 PREFORMATTED TEXT

Pada saat kita menggunakan tag <p> untuk paragraph, penekan tombol tab, spasi atau enter tidak berpengaruh terhadap tampilan dibrowsernya. Apabila kita menghendaki agar penekanan tombol-tombol tersebut memberikan efek pada tampilan di browser, kita dapat menggunakan tag <PRE>. Perhatikan contoh dibawah ini :

<PREE>

AAAAAAAAAAAAAAAAAAAAA

BBBBBBBBBBBBBBBBBBBBBBBBBB

CCCCCCCCCCCCCCCCCCCCCCCCCCCCCC

DDDDDDDDDDDDDDDDDDDDDDDD

EEEEEEEEEEEEEEEEEEEEEEE

</PRE>

Tampilan pada browser adalah sama dengan yang tertulis pada dokumen HTML diatas.

1.5.8 ADDRESS

Untuk menampilkan informasi tentang pembuat Home Page kita dapat menggunakan tag <ADDRESS> Perhatikan contoh dibawah ini :

<ADDRESS>

<H4>ALAMAT:</H4>

Indra < A HREF =” https://indrajayaadriand.wordpress.com“>  TIM ICT DINPENDIK PKP </A>

</ADDRESS>

1.5.9 Karakteristik Spesial ( Entity )

Ada dua macam entity yang dapat kita gunakan, yaitu : character entity dan numeric entity.

Contoh character entity :

  • < karakter <
  • > karakter>

Contoh numeric entity

  • ¹ karakter@
  • ² karakter@

1.5.10 Pergantian Baris

Supaya teks ditulis pada garis yang baru maka kita dapat menambahkan tag <BR> pada akhir baris sebelumnya. Perhatikan contoh dibawah ini :

Kantor <br>

Jalan Rasakunda Bukit Intan Pangkalpinang <br>

Propinsi Kep. Bangkabelitung <br><br>

Penulisan <BR> dua kali dimaksudkan agar terbentuk spasi kosong sebelum baris berikutnya.

1.5.11 Garis Horisontal

Untuk membuat garis horizontal kita dapat menggunakan tag <HR>, perhatikan contoh dibawah ini :

<hr>

Kantor <br>

Jalan Rasakunda Bukit Intan Pangkalpinang <br>

Propinsi Kep. Bangkabelitung <br>

<hr>

1.5.12 Memberi Komentar

Untuk memberi komentar kita dapat menggunakan tag <COMMENT> teks </COMMENT>, atau <!—-teks>. Perhatikan contoh dibawah ini.

<COMMENT> Teks ini hanya komentar </COMMENT>

<!—Dapat diletakkan dibaris manapun——>

(bersambung)

6 Tanggapan

  1. bantu dunkz…..cara buat html web baru….

  2. gimana donk untuk mengonlenkan webnya saya udah saya buat, caranya gimana?

    • Saudara harus sewa hosting dan domain dulu, baru webnya bisa di online kan, banyak perusahaan yang menyediakan hosting web dengan harga terjangkau, sekitar 200 ribuan kalau tidak salah per tahunnya.

  3. kirimin doang buku untuk memperlajari HTML

  4. thakz ya….

  5. thanks for nice info…>o<

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: