HTML (HyperText Markup Language) adalah suatu bahasa yang menggunakan tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan secara benar. Show Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web. Fungsi HTML yang lebih spesifik yaitu :
Pengaturan Division Tag:
Contoh: <div style="text-align: center; color: black;"> <span style="font-size:18px;">Bendera</span><br /> <span style="color: red;">merah</span> <hr style="color:blue; width:50%;" /> <span style="color: white; background-color: red; font-size:24px;">putih</span> </div> Hasilnya Pengaturan Image Tag:
Contoh: <div align="center"> <img style="width: 105px; height: 105px; border-width: 1px; border-style: solid; margin: 10px;" src="https://us02images.zoom.us/p/EijUUiRfQsWh3ryzOuz3HA/2d7acef0-6ce1-4ab0-a21c-6936df3bc819-4080?type=small" alt="Logo UNIKAMA" /> </div> Hasilnya: Pengaturan Link Tag:
Contoh: <p> Link ke <a href="https://unikama.ac.id" target="_blank" title="Masuk ke Website UNIKAMA">Website UNIKAMA</a> </p> Hasilnya: Variasi 1 memberi warna tertentu pada link: <p>Link ke <a href="http://unikama.ac.id" target="_blank" title="Masuk ke website UNIKAMA"><span style="color:#FF0000;">UNIKAMA</span></a></p> Hasilnya: Link ke UNIKAMA Variasi 2, memberi warna link yang akan berubah jika mouse lewat di atas link: <div align="left">Link ke <a title="Masuk ke website UNIKAMA" href="http://unikama.ac.id" target="_blank"><font style="color: 'red';" onmouseover="color:'blue';" onmouseout="color:'red';">UNIKAMA</font></a></div> Link ke
UNIKAMA Variasi 3, mengganti link teks dengan gambar: <div align="center"><a href="http://UNIKAMA.com" target="_blank" title="Masuk ke website UNIKAMA"><img src="http://UNIKAMA.com/gb/logo.png" style="width: 105px; height: 105px; border-width: 0px; border-style: solid; margin: 10px;" /></a></div> Hasilnya: Variasi 4 mengganti link gambar jika mouse di atas link gambar : <div align="center"><a title="Masuk ke website UNIKAMA" href="http://UNIKAMA.com" target="_blank"><img style="width: 105px; height: 105px; border-width: 0px; border-style: solid; margin: 10px;" src="http://UNIKAMA.com/gb/logo.png" onmouseover=" src='http://UNIKAMA.com/gb/logo2.png';" onmouseout="src='http://UNIKAMA.com/gb/logo.png';" alt="Logo UNIKAMA" /></a></div> Hasilnya: Pengaturan List Tag:
Contoh: <ol type="A"> <li>Judul</li> <li>Sub Judul</li> <li>Sub Sub Judul</li> </ol> <ol type="1"> <li>Judul</li> <li>Sub Judul</li> <li>Sub Sub Judul</li> </ol> <ul type="circle"> <li>Judul</li> <li>Sub Judul</li> <li>Sub Sub Judul</li> </ul> <ul type="square"> <li>Judul</li> <li>Sub Judul</li> <li>Sub Sub Judul</li> </ul> Hasilnya
Pengaturan Table Tag:
Contoh: <table align="center" bgcolor="lightyellow" border="1" cellpadding="5" cellspacing="0" height="300" width="466"> <tr> <td style="text-align: center;"><span style="color:#FF0000;"><strong>No.</strong></span></td> <td style="text-align: center;"><span style="color:#FF0000;"><strong>Kolom 2</strong></span></td> <td style="text-align: center;"><span style="color:#FF0000;"><strong>Kolom 3</strong></span></td> <td style="text-align: center;"><span style="color:#FF0000;"><strong>Kolom 4</strong></span></td> </tr> <tr> <td style="text-align: center;">1.</td> <td><span style="color:#0000FF;">Isi sel kolom 2 baris 1</span></td> <td><span style="color:#0000FF;">Isi sel kolom 3 baris 1</span></td> <td><span style="color:#0000FF;">Isi sel kolom 4 baris 1</span></td> </tr> <tr> <td style="text-align: center;">2.</td> <td style="text-align: right;">Isi sel kolom 2 baris 2</td> <td style="text-align: right;">Isi sel kolom 3 baris 2</td> <td style="text-align: right;">Isi sel kolom 4 baris 2</td> </tr> <tr> <td style="text-align: center;">3.</td> <td style="text-align: center;"><a href="http://UNIKAMA.com" target="_blank"><img alt="Logo UNIKAMA" src="http://UNIKAMA.com/gb/logo.png" style="width: 50px; height: 50px; margin: 1px;" /></a></td> <td bgcolor="#dddddd" style="text-align: center;"><span style="color:#800080;">Warna background lain</span></td> <td style="text-align: center;"> </td> </tr> <tr> <td colspan="3" style="text-align: center;">Jumlah</td> <td>Rp. 1234</td> </tr> </table> Hasilnya:
— Embed Iframe, memasang halaman web lain di web kita:
Hasilnya: Embed Youtube:
HASILNYA: Pengaturan Frame Tag:
Contoh: <frameset cols="25%,*,35%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> Hasilnya: (*) Important Note:Tags marked with (*) should still work, but have been superseeded by Cascading Style Sheets (CSS), which is now the recommended way to change the font, colour, spacing, border or alignment of HTML elements. Bagaimana membuat teks dalam CSS menjadi di tengah?Membuat text di tengah dengan <center></center>
kita bisa menggunakan tag <center> di awal text yang ingin di tempatkan di tengah, kemudian menutupnya dengan tag </center> penutup.
Apa itu text Center?Center: Center adalah sebuah bentuk daripada penjajaran teks yang dimana memiliki posisi dari teks akan menjadi hingga pada rata tengah.
Apa itu align di HTML?Atribut HTML align merupakan atribut yang digunakan untuk menata perataan teks. Atribut align biasanya digunakan pada HTML element pada tingkatan blok seperti DIV, P (paragraf), header dan lainnya. Atribut align juga dapat diterapkan pada tabel agar konten pada data tabel nilai perataannya dapat diatur.
Apa saja fungsi dari HTML?Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web. Fungsi HTML yang lebih spesifik yaitu : Membuat halaman web. Menampilkan berbagai informasi di dalam sebuah browser Internet.
|