HTML (Hyper Text Markup Language) adalah bahasa dasar untuk web scripting bersifat client side yang memungkinkan untuk menampilkan informasi dalam bentuk teks, grafik, serta multimedia, dan juga untuk menghubungkan antartampilan web page (hyperlink).
Struktur dasar dokumen HTML:
Bentuk penulisan di atas disebut tag. Tag memiliki pembuka <tag>, tetapi tidak semua tag memiliki penutup </tag>, berfungsi memberi instruksi interpreter kepada browser. Contoh pada dokumen di atas, tag yang pertama memberitahukan browser bahwa dokumen tersebut adalah dokumen HTML dengan tag <html> di awal dan </html> di akhir dokumen. Penggunaan tag-tag penutup disesuaikan dengan urutan penggunaan tag tersebut.
Di dalam sebuah tag HTML terdapat atribut tag. Atribut yang terkandung dalam tag satu dengan yang lainnya belum tentu sama. Atribut yang dipakai tidak memiliki urutan pendefinisian tertentu. Atribut digunakan untuk memodifikasi sifat-sifat dari tag, bergantung dari nilai yang diberikan. Namun ada pula atribut yang tidak memiliki nilai.
Format penulisan atribut dalam tag secara umum :
<tag atribut="nilai_atribut">...</tag>
Tag Dasar HTML :
1. Body Background
Tag <body> memiliki atribut "bgcolor" untuk menentukan warna sebagai background. Dapat diberikan nilai berupa pre-define color seperti red, blue, green, yellow, cyan, magenta, dan sebagainya, atau menggunakan aturan komposisi RGB dengan angka hexadecimal. Atribut yang lain yaitu "background" untuk menentukan gambar sebagai background, dan dapat diberi nilai berupa nama gambar yang akan dijadikan background.Contoh : <body bgcolor="#000000" background="gambar.jpg">
2. Heading
Digunakan untuk menampilkan format huruf yang besar dan dicetak tebal. Biasanya digunakan untuk judul atau topik utama dari sebuah paragraf, ukurannya dari terbesar <h1> hingga yang terkecil <h6>. Sedangkan untuk mengatur posisi heading digunakan atribut "align" dengan nilai "left", "right", "center" atau "justify".Contoh : <h1 align="left">...</h1>
3. Paragraf
Untuk memformat paragraf gunakan tag <p>...</p>. Tag ini memiliki atribut untuk mengatur perataan yaitu "align" dengan nilai "left", "right", "center" atau "justify".Contoh : <p align="left">...</p>
4. Line Break
Tag <br> digunakan untuk berpindah ke baris baru. Ini adalah salah satu tag HTML yang tidak memiliki penutup.5. Horizontal Rule
Untuk membuat garis horizontal gunakan tag <hr>. Adapun atribut yang dimiliki adalah "align" untuk perataan, "size" untuk ketebalan garis (dalam pixel), dan "widht" untuk mengatur lebar garis (dalam pixel atau persen).Satuan persen (%) artinya ukuran garis akan diambil dari persentase width terhadap ukuran tampilan window. Tag ini juga tidak memiliki tag penutup.Contoh : <hr align="center" size="20" width="50%">
6. Preformat
Tag <pre>...</pre> pada dokumen HTML digunakan untuk melakukan preformat terhadap dokumen HTML. Artinya teks yang akan ditampilkan akan sama keadaannya seperti yang tertulis pada kode HTML nya. Biasanya digunakan untuk menampilkan kode program.7. Center
Untuk menampilkan teks pada posisi tengah digunakan tag <center>...</center>.8. Komentar
Untuk menyertakan komentar pada dokumen HTML digunakan tag <!-- isi komentar -->. Komentar biasanya digunakan untuk memberikan keterangan tambahan pada dokumen HTML tapi keterangan tersebut tidak akan ditampilkan pada web browser.9. Efek Cetak Huruf
Beberapa tag untuk memberi efek cetak pada huruf : <b> </b> bold
<i> </i> italic
<u> </u> underline
<tt> </tt> efek menggunakan mesin ketik
<del> </del> coret
<s> </s> strike
<sup> </sup> superscript
<sub> </sub> subscript
<em> </em> tekanan
<cite> </cite> cite
<code> </code>
computer code <kbd> </kbd> input keyboard
<samp> </samp> teks sample
<strong> </strong> strong
<var> </var> variable komputer
<big> </big> big
<small> </small> small
10. Singkatan
Untuk memberi keterangan tambahan terhadap suatu istilah ataupun singkatan yang ditampilkan digunakan tag <acronym>...</acronym> atau <abbr>...</abbr> disertai atribut "title".
Contoh : <acronym title="World Wide Web">WWW</acronym>
Contoh : <font face="Arial" size="7" color="red">...</font>
Contoh : <basefont face="verdana" size="2" color="green">
Contoh :
<marquee behavior="scroll" direction="left"
bgcolor="red">Teks</marquee>
14. Menampilkan Gambar
Tag <img> pada dokumen HTML digunakan untuk menambahkan gambar pada suatu halaman web. Untuk menambahkan gambar dapat dilakukan dengan memberi nilai atribut "src" dengan nama file gambar yang diinginkan. Selain atribut "src", tag <img> juga memiliki atribut lain seperti "align", "border", "alt", "height", dan "width". Atribut "align" digunakan untuk mengatur aligmen. Nilai yang bisa diberikan pada atribut "align" adalah top, middle, atau bottom. Atribut "border" digunakan untuk menentukan ketebalan garis tepi dari suatu gambar. Atribut "alt" digunakan untuk memberi keterangan ketika suatu gambar gagal untuk ditampilkan ke web browser. Atribut "height" dan "width" digunakan untuk mengatur tinggi dan lebar gambar.
Contoh :
<img src="pic.jpg" align="left" alt="gambar"
width="20" height="30">
Contoh : <bgsound src="sound.mid" loop="2">
Untuk menampilkan video atau animasi dalam sebuah halaman digunakan tag <embed> lalu atribut "src" diikuti nama file video. Untuk mengatur tinggi dan lebar area digunakan atribut "height" dan "width". Atribut "loop" digunakan untuk mengatur perulangan pemutaran video dengan diberi nilai "true" jika diinginkan adanya perulangan dan "false" jika tidak. Lalu atribut "autostart" untuk mengatur modus pemutaran video dengan diberi nilai "true" jika pemutaran diinginkan secara otomatis, dan "false" jika tidak.
Contoh :
<embed src="video.mpg" width="300" height="200"
loop="true" autostart="false">
10. Singkatan
Untuk memberi keterangan tambahan terhadap suatu istilah ataupun singkatan yang ditampilkan digunakan tag <acronym>...</acronym> atau <abbr>...</abbr> disertai atribut "title".
Contoh : <acronym title="World Wide Web">WWW</acronym>
11. Modifikasi Tampilan Huruf
Untuk memformat tampilan huruf digunakan tag <font>...</font>. Untuk mengubah jenis huruf diatur dengan menggunakan atribut "face", untuk mengubah ukuran huruf diatur dengan menggunakan atribut "size", dan untuk mengubah warna huruf diatur dengan menggunakan atribut "color". Ukuran huruf terkecil adalah 1 dan ukuran terbesar adalah 7.Contoh : <font face="Arial" size="7" color="red">...</font>
12. Mengatur Font Default
Untuk mengatur default font pada suatu halaman digunakan tag <basefont>. Tag ini memiliki atribut yang sama dengan tag <font>. Tag ini tidak dikenali di semua web browser.Contoh : <basefont face="verdana" size="2" color="green">
13. Teks Berjalan
Untuk membuat teks bergerak digunakan tag <marquee>...</marquee>. Atribut yang terdapat pada tag <marque> adalah "direction" yang akan mengatur arah gerak teks dengan nilai left, right, up, atau down. Lalu "behaviour" untuk mengatur arah kemunculan berikutnya dengan diberi nilai alternate, scroll, atau slide, dan "bgcolor" untuk mengatur warna background teks berjalan.Contoh :
<marquee behavior="scroll" direction="left"
bgcolor="red">Teks</marquee>
14. Menampilkan Gambar
Tag <img> pada dokumen HTML digunakan untuk menambahkan gambar pada suatu halaman web. Untuk menambahkan gambar dapat dilakukan dengan memberi nilai atribut "src" dengan nama file gambar yang diinginkan. Selain atribut "src", tag <img> juga memiliki atribut lain seperti "align", "border", "alt", "height", dan "width". Atribut "align" digunakan untuk mengatur aligmen. Nilai yang bisa diberikan pada atribut "align" adalah top, middle, atau bottom. Atribut "border" digunakan untuk menentukan ketebalan garis tepi dari suatu gambar. Atribut "alt" digunakan untuk memberi keterangan ketika suatu gambar gagal untuk ditampilkan ke web browser. Atribut "height" dan "width" digunakan untuk mengatur tinggi dan lebar gambar.
Contoh :
<img src="pic.jpg" align="left" alt="gambar"
width="20" height="30">
15. Menampilkan Karakter Khusus
© © spasi
® ® « «
& & » »
× × " "
÷ ÷ ´ ´
< < ¶ ¶
> > — —
½ ½ ± ±
™ ™
16. Backsound & Video
Untuk mengatur backsound sebuah halaman digunakan tag <bgsound> beserta atribut "src" untuk menentukan URL dari file sound yang akan dijadikan backsound. Untuk mengatur pemutaran backsound digunakan atribut "loop" dan diberi nilai jumlah perulangan.Contoh : <bgsound src="sound.mid" loop="2">
Untuk menampilkan video atau animasi dalam sebuah halaman digunakan tag <embed> lalu atribut "src" diikuti nama file video. Untuk mengatur tinggi dan lebar area digunakan atribut "height" dan "width". Atribut "loop" digunakan untuk mengatur perulangan pemutaran video dengan diberi nilai "true" jika diinginkan adanya perulangan dan "false" jika tidak. Lalu atribut "autostart" untuk mengatur modus pemutaran video dengan diberi nilai "true" jika pemutaran diinginkan secara otomatis, dan "false" jika tidak.
Contoh :
<embed src="video.mpg" width="300" height="200"
loop="true" autostart="false">
1 komentar:
Terima kasih telah membaca tulisan saya kali ini.
Mudah-mudahan dapat berguna bagi Anda, baik sebagai bahan pembelajaran ataupun sebagai reverensi.
Kritik atau saran dari Anda akan sangat berguna untuk perbaikan kedepannya.
Jika ada, langsung saja tinggalkan komentar Anda disini.
Sekian,
Salam WEB mastah! :)
Posting Komentar