Tips & Trick: HTML

Tag Komentar di HTML

Setiap bahasa pemrograman seperti html atau skrip lainnya, harus memiliki tag komentar. Manfaat dari komentar adalah sebagai dokumentasi proses, program logika, deskripsi rumus atau penjelasan. Tag komentar di HTML cara membuat nya dengan tag <-! Sebagai awal komentar dan tag -> sebagai akhir komentar. Komentar tag di html ini bisa satu baris atau lebih, asal ada pembuka tag komentar dan penutupnya. Komentar tag html dapat ditulis sebelum kode html, di dalam tubuh html , setelah html, atau di mana pun. Tapi tidak bisa dalam tag html lainnya.

Contoh penulisan memberi tag komentar di html:

<html>
<body>
<!– tag komentar awal konten –>
<p>
saya bisa belajar html dasar
</p>
<!– memberi komentar pada html –>
</body>
</html>

Jika dijalankan kode html tersebut, maka yang muncul hanya tulisan “saya bisa belajar html dasar” , Tag komentar juga bisa untuk menjelaskan link, gambar, dl.

<a href=”httP://seputarti.com”> Seputar ti</a> <!– Ini link dengan komentar>

Selanjutnya, penulisan komentar tag di html yang salah karena tag komentar berada di dalam tag html yang lain atau berada di kode html lain, seperti berikut:

<p <!– Tag komentar yang salah –>> Belajar komentar tag html</p>

Pemberian komentar tag pada html atau bahasa pemrograman lainnya tidak hanya sangat berguna bagi pemilik, namun juga penting untuk puhak lain yang ingin memahami kode HTML buatan Kita, misalkan bila Kita lama tidak membuka kode-kode tersebut, maka kita akan lupa jika akan mengeditnya, alangkah baik dan amannya jika membuat komentar pada html lita.

Membuat Blockquote dalam HTML

Gilang 17:26 1 Comment

Blockquote dalam HTML website digunakan untuk menentukan suatu kutipan pada teks yang ditandai. Blockquote pada website/blog lainnya sangat mudah dibuat, tinggal block teks pada posting lalu klik pada gambar petik dua biasanya. Untuk membuat blockquote dalam HTML sendiri menggunakan tag awalan<blockquote> dan ditutup dengan </blockquote>. Misalnya saja saya contohkan membuat blockquote pada wordpress:

1. Masuk sebagai admin dan new post.

Pada lembar posting di wordpress, kita memilih terlebih dahulu teks yang akan di blockquote. setelah itu klik tanda petik seperti gambar di atas. Artikel saya kebanyakan menggunakan blockquote untuk website pribadi.

Dan kode sederhana membuat blockquote di html adalah:

<html>
<head>
<title> example </title>
</head>
<body>
<p>
Membuat blockquote di html dengan mudah
</p>
<blockquote> Ini Adalah teks menggunakan blockquote sebagai pembeda dengan teks biasa agar lebih menarik.
</blockquote>
</body>
</html>

Dalam perkembangannya, blockquote ternyata banyak yang di buat lebih menarik dan cantik agar menjadi mudah dipahami. Untuk membuat blockquote kita harus mengatur pada CSS (Cascading Style Sheets) seperti warna font, warna background, warna garis tepi dan jenis garis tepi, jarak teks tepi, dll. Dan ketika cursor mengenai teks yang diberi blockquote, maka akan berubah warna atau berubah garis tepi.

Cara Mudah membuat blockquote pada blogger

Cara membuat blockquote pada blog atau blogger hampir sama dengan wordpress, Intinya masuk dlu pada admin lalu posting baru dan mengetik artikel. Selanjutnya untuk membuat blockquote tinggal block teks yang akan di beri blockquote, dan terakhir klik tanda petik seperti dibawah ini:

Sekian penjelasan singkat mengenai membuat blockquote sederhana pada html, wordpress, dan blogger. Untuk selanjutnya saya akan posting mengenai mempercantik blockquote dengan mengganti CSS agar lebih menarik. Terimakasih…

Tag Tulisan Terbalik pada HTML

Gilang 17:24 Add Comment

Untuk membuat tulisan terbalik pada HTML cukup mudah. kode html yang satu ini cukup unik. Dalam html tag, ada sebuah tag html yang mempunyai fungsi unik yaitu mengubah atau membalik arah baca suatu teks yang formal atau bisa dipahami menjadi sulit dipahami. Artinya membuat teks terbaca secara terbalik pada HTML. Mungkin tag html ini berkesan tersendiri jika Anda membutuhkan teka-teki pada kalimat yang ingin Anda samarkan. he….!

Tag html unik tersebut adalah tag bdo html. Atau penulisannya pada text editor adalah tag <bdo> ditambah dengan atribut “dir”.

Kode untuk membuat tulisan terbalik pada HTML tag bdo adalah sbb:

<HTML>
<HEAD>
<TITLE>
Membuat teks terbalik
</TITLE>
</HEAD>
<BODY>
<bdo dir=”ltr”>
Teks dibaca dari kiri dengan tag bdo
</bdo>
<br>
<bdo dir=”rtl”>
Teks dibaca terbalik dengan tag bdo
</bdo>
</BODY>
</HTML>

Membuat tulisan terbalik pada HTML, dalam hal ini atribut “dir” menyatakan arah yang diinginkan. “rtl” berarti right to left, yang artinya teks tersebut dibaca dari kanan ke kiri. Berbeda dengan “ltr” yang artinya teks dimulai dari kiri ke kanan. Gimana, cukup jelas kan mengenai tag bdo untuk membuat tulisan terbalik pada html. Oh iya, jika berminat silakan belajar juga html tag untuk membuat garis horisontal dan tag html untuk membuat komentar serta tag html untuk blockquote. Ok, terimakasih sudah mampir dan semoga tidak bosan untuk belajar. he….info: Cara membuat tulisan terbalik pada HTML.

Cara Membuat Tabel Belang dengan CSS

Gilang 17:23 1 Comment

Membuat tabel belang-belang dengan CSS bukanlah hal yang sulit. Html merupakan dasar pembuatan sebuah halaman website. Untuk membuat suatu halaman website yang menarik dan dinamis di butuhkan beberapa tambahan seperti CSS, PHP, Javascript, jQuery, dll. Nah kali ini saya sharing mengenai tag Tabel dalam HTML<table> dimana tabel banyak digunakan untuk menginformasikan sebuah informasi berbentuk list/daftar. Informasi akan terlihat menarik jika kita membuat tabel menjadi belang-belang dengan CSS di HTML. Selain itu kita juga bisa mengatur background, warna border, tebal border, jenis border, dan lain2 di postingan ini. Oke, sesuai judul kita akan mencoba membuat tabel (table) menjadi warna belang-belang/selang-seling dengan menggunakan CSS.

Cara mudah membuat tabel belang dengan CSS

A. Membuat tabel belang dengan CSS pada seluruh halaman.

Membuat tabel (table) seperti warna zebra/belang merupakan hal yang cukup mudah. Kita hanya menambahkan kode CSS pada dokumen html. berikut kode HTML dan CSS membuat tabel warna belang :

<html>
<head>
<title>belang</title>
</head>
<style type=”text/css”>
table{ font: 11px Arial Helvetica, sans-serif; color: #000; border-collapse: collapse; border-spacing: 0; border:0px solid #333;}
table th { color: #fff; background-color:#555; font-size:15px; padding:2px 5px; }
table td { font-size: 12px; text-align:left; padding: 7px 7px; background-color: #CCE9FD; border:3px solid #ffffff;}
table tr:nth-child(odd) td { background-color: #FFFF99; }
</style>
<body>
<table>
<tr>
<th>No</th>
<th>Judul</th>
</tr>
<tr>
<td>1</td>
<td>Membuat Tabel Belang-belang di HTML</td>
</tr>
<tr>
<td>2</td>
<td>Aplikasi Belajar Tajwid di Android dengan suara</td>
</tr>
<tr>
<td>3</td>
<td>Tema WordPress dengan loading Cepat</td>
</tr>
</table>
</body>
</html>

Maka dari hasil dokumen html diatas jika kita simpan dengan format .html akan tampil seperti gambar berikut ini:

Keterangan : Untuk merubah warna belang pada tabel dalam arti baris. Maka kita cukup mengatur CSS diatas. Pada CSS yang saya beri warna biru dan merah itulah yang kita edit untuk mengganti warna belang. Untuk mendapatkan kode warna kita bisa ambil dengan A.photoshop,dll. Untuk judul kita bisa ubah pada warna coklat. dan rata text kita bisa ganti pada warna hijau,bisa center, atau right. So, intinya kita belajar CSS dulu agar lebih mudah memahaminya. Ingat, jika kita mempunya banyak tabel maka secara otomatis warna tabel akan menjadi belang semua. Untuk menanggulangi hal tersebut saya beri ilmunya. he…just sharing.

B. Membuat beberapa tabel dengan warna belang yang berbeda-beda.

Yuk sampai disini kita akan sharing bagaimana membuat beberapa tabel dengan warna belang yang berbeda-beda. Bayangkan jika semua halaman yang ada tabelnya mempunyai warna sama, Waw…gk keren. he…canda..! Oke intinya mudah. lagi-lagi pada kode css kita. Banyak tabel dengan warna berbeda bisa kita akali dengan memberi selektor terhadap tabel yang kita pilih. Contohnya tabel A dengan belang biru merah, Tabel B dengan warna belang hijau kuning. Nah kita bedakan dulu tabel A dan B dengan memberi selektor.

Contoh tabel dengan warna belang biru-merah:

<table id=”birumerah”>……….</table>

Nah pada tabel diatas kita beri selektor dengan nama birumerah. maka pada CSS kita tambah juga seperti berikut:

<style type=”text/css”>
table#birumerah{ width:90%; font: 11px Arial Helvetica, sans-serif;
color: #000; border-collapse: collapse; border-spacing: 0; border:0px solid #333;}
table#birumerah th { color: #fff; background-color:#555; font-size:15px; padding:2px 5px; }
table#birumerah td { font-size: 12px; text-align:center; padding: 7px 7px; background-color: blue; border:3px solid #ffffff;}
table#birumerah tr:nth-child(odd) td { background-color: red; }
</style>

kesimpulannya pada CSS setiap tabel kita beri selektor yang berbeda-beda dan kita mempunyai beberapa kode CSS untuk setia tabelnya. Gimana, Udah paham? he….Tenang aja, jika kurang paham tanyakan lewat komentar. Oke..

Untuk Lebih tahu banyak tentang bagaimana membuat tabel menjadi menarik liat saja postingan saya sebelumnya. Maka semakin lengkap, bisa membuat tabel menjadi warna belang dan menambah tampilan tabel menjadi lebih menarik. Semoga cara membuat tabel belang dengan CSS ini bisa membantu Agan dalam belajar HTML.

Tips & Trick