Dalam sebuah penulisan HTML biasanya disertakan gambar-gambar atau effect-effect yang bertujuan untuk memperindah web anda. Disini saya akan membahas beberapa tag yang dapat anda gunakan pada web anda:

1. Image

Pertama saya akan menjelaskan tentang cara memasang image pada web anda, anda membutuhkan tag <img>. Tag <img> tidak membutuhkan penutup dan disertai dengan tag src yang fungsi nya untuk mengambil gambar dari suatu alamat tertentu. Misal anda mempunya gambar bernama bear.jpg pada folder gambar di dekstop anda. Kode nya sebagai berikut:

<img src=”gambar/bear.jpg” height=”100″ width=”200″/ alt=”Bear”>

Atribut alt menentukan sebuah teks alternatif untuk sebuah gambar  jika gambar tidak bisa ditampilkan,karena misal di sebabkan karena koneksi yang lamban atau kesalahan dalam atribut src. Atribut height dan weight untuk mengatur tinggi dan lebar nya.

2. Links

Salah satu cara agar pada halaman web kita dapat berpindah ke halaman lain adalah dengan menggunakan tag <a> disertai dengan atribut href. Perhatikan contoh kode di bawah ini:

<a href=”www.keb0.wordpress.com”>myblog</a>

Sekarang text myblog sudah menjadi link, yang jika anda klik dia akan pindah ke alamat link yang lain.

Atribut yang lain yang dapat digunakan adalah atribut target, berfungsi untuk membuka link pada jendela browser yang baru, contoh nya sebagai berikut :

<a href=”www.keb0.wordpress.com” target=”_blank”>myblog</a>

Hyperlink juga dapat memindahkan kita ke sebuah image, kita pakai atribut href karena file yang saya ambil lokal.  Kode nya sebagai berikut :

<a href=”bear.jpg”>MyBear</a>

Jika kita klik Mybear, dia akan berpindah link khusus memunculkan gambar nya saja.

3.List

List dibagi dalam 3 jenis, yang pertama adalah <ul> Unordered List. mempunyai  atribut type beserta 3 value nya, yaitu disc, square, dan circle. Sebagai contoh nya adalah kode berikut:

<ul type=”circle”>

<li>list 1</li>

<li>list 2</li>

<li>list 3</li>

</ul>

Hasilnya sebagai berikut:

  • list 1
  • list 2
  • list 3

<li>berfungsi untuk menampilkan list nya, tag list yang kedua adalah <ol> Ordered List, contoh nya :

<ol><li>list 1</li>

<li>list 2</li>

<li>list 3</li>

</ol>

Hasilnya sebagai berikut :

  1. list 1
  2. list 2
  3. list 3

Yang terakhir adalah dengan menambahkan start pada <ol>, memungkinkan dapat memulai dari nomor yang ditentukan. berikut contoh kode nya:

<ol start=”5″><li>list 1</li>

<li>list 2</li>

<li>list 3</li>

</ol>

Berikut hasilnya :

5. list 1
6. list 2
7. list 3

4.Sound

Tag <sound> digunakan untuk memperdengarkan suara atau lagu saat memasuki suatu halaman web, sebagai contoh lihat kode berikut ini :

<sound src=”namafile.wav” loop=”infinite” delay=”20″></sound>

kode src untuk menentukan di direktori mana file tersebut, loop untuk melakukan pengulangan secara terus menerus karena nila nya infinite, dan delay selama 20 detik sebelum suara dimulai.

Ada juga tag <bgsound>, hanya dapat digunakan di Internet Explorer. Tag ini memiliki 2 atribut, yaitu src dan loop. Sebagai contoh saya menggunakan file berekstensi midi, ini kode nya :

<bgsound src=”namafile.mid”><noembed></bgsound></noembed>

5.Video

Flash movies (.swf), AVI’s (.avi),  dan MOV’s (.mov) adalah file yang di support oleh tag .

  • (.swf) adalah tipe file yang dibuat oleh Macromedia’s Flash program.
  • (.wmf) adalah tipe file dari Microsoft Window’s Media Video.
  • (.mov) adalah tipe dari Apple’s Quick Time Movie format.
  • (.mpeg) adalah tipe file yang dibuat oleh Moving Picture Expert Group.

Ini adalah contoh kode nya:

<embed src=”/html/file.swf” width=”100%” height=”200″><noembed><img src=”image.jpg” alt=”Image.jpg” /> </noembed>

</embed>

Tag <embed> ini adalah tag yang khusus untuk menambahkan video dan juga sound ke situs web anda. Anda tidak perlu memiliki Java VM, VB script, ActiveX, atau java script untuk mendukung tag <embed>, karena tag ini menyertakan kontrol untuk media secara otomatis.

6.Text

Tag <font>digunakan untuk mengedit sebuah tulisan yang kita pilih dan <basefont>menjadikan default tulisan dari awal .Tag <p>paragraf digunakan untuk membuat sebuah paragraf, biasa disertai juga dengan tag <h> heading. Tag heading ada 6 jenis ukuran, dari mulai <h1> yang mempunya ukuran terbesar  sampai <h6> yang mempunyai ukuran terkecil. Ada lagi tag <i>italic <u>underline dan tag <b>bold.  Ada juga tag <big> dan <small> untuk penulisan huruf lebih besar dan kecil nya. Ada juga tag <pre> yang berfungsi untuk membuat paragraf yang terformat sendiri sesuai yang kita mau. Contoh penggunaanya sebagai berikut:

<h1 >Judul 1</h1><h4 >Judul 2</h4>

<h6> judul 6</h6>

<font face=”arial” color=”blue”><p><b>Ini adalah paragraf tebal</b></font>

<i> Bercetak miring </i>

<u> Bergaris bawah </u>

</p>

<pre>

<big>Nama saya Evan</big>

<small>kuliah di Maranatha</small>

Jurusan IT

</pre>

Hasilnya :

Judul 1

Judul 2

judul 6

Ini adalah paragraf tebal

Bercetak miring

Bergaris bawah

Nama saya Evan

kuliah di Maranatha

Jurusan IT

Tag selanjutnya adalah tag <sup>superscript, <sub>subscript, <tt>membuat tulisan menjadi seperti mesin tik, dan <del> membuat tulisan tercoret. Ada juga <acronym> digunakan untuk memberi keterangan tambahan atau penjelasan dari sebuah singkatan. Sebagai contoh :

Satuan luas adalah meter<sup> 2 </sup>Senyawa H<sub>2</sub>SO<sub>4</sub>

<tt>mesin tik</tt>

Ini di <del> coret </del>

<acronym title=”Internet Protocol”> IP </acronym> dan

<acronym title=”Operating System”> OS </acronym>

Hasilnya :

Satuan luas adalah meter 2 Senyawa H2SO4

mesin tik

Ini di coret

IP dan

OS

Demikian penjelasan Tag HTML dasar dari saya, semoga dapat membantu kalian semua…..^^

About these ads