Rabu, 09 Maret 2016

Kumpulan Kode HTML.

Ketika anda menulis sebuah artikel yang di-dalamnya diperlukan kode khusus yaitu kode HTML blog, mungkin bagi anda seorang pemula/Newbie akan merasa kesulitan dan tidak tahu harus bagaimana, namun jika anda seorang yang sudah berpengalaman dalam kode HTML ini bukanlah sebuah perkara yang sulit.
Beberapa contoh penerapan kode HTML yang biasa/harus diterapkan adalah ketika anda membuat tulisan di sidebar kiri atau kanan dalam sebuah blog (blogger-gadget HTML/Javascript) atau tulisan yang ditulis di dalam Edit HTML pada sebuah template. ini berbeda ketika anda menulis pada bagian posting artikel atau ketika membuat halaman/artikel, karena sudah disediakan fungsi-fungsi edit tulisan, misalnya ketika anda akan menebalkan huruf, anda tinggal klik ikon bold "B" maka huruf/tulisan anda akan berubah menjadi tebal.

karena tidak sedikit pendatang baru merasakan kesulitan dalam menulis dengan kode HTML maka saya sedikit informasi kan beberapa kode HTML yang biasa digunakan untuk keperluan menulis:
  1. Tengah, Kode HTMLnya: <center></center>
  2. Huruf tebal, Kode HTMLnya: <b></b>
  3. Garis bawah, Kode HTMLnya: <u></u> 
  4. Paragrap baru, Kode HTMLnya: <p/>   
  5. Baris baru, Kode HTMLnya: <br/>  
  6. Huruf miring, Kode HTMLnya: <i></i> 
  7. Besar, Kode HTMLnya: <big></big>
  8. Coret, Kode HTMLnya <s></s> 
  9. Ukuran huruf, Kode HTMLnya: <font size ="16"></font>         
  10. Warnai huruf, Kode HTMLnya: <font color="red"></font> 

Contoh penerapan kode HTML diatas:
  1. Membuat tulisan bergaris bawah, cara penulisan: <u>tulisan anda disini</u>
    hasilnya akan seperti ini: tulisan anda disini 
  2. Mewarnai huruf dengan warna biru, cara penulisan: <font color="blue">tulisan anda disini</font>
    hasilnya akan seperti ini: tulisan anda disini
untuk kode lainnya silahkan anda mencobanya sendiri ya..

Untuk lebih jelas lagi, saya akan kasih contoh perbandingan penerapan-nya pada template toko online blogspot pada bagian gadget HTML/Javascript side bar kanan.
pada side bar kanan di buat menu "Berita terbaru" dengan menginformasikan 3 produk unggulan yaitu:

    Produk unggulan kami:
    1. Madu
    2. Zaitun
    3. Kurma

Sebelum memasang kode HTML




Sesudah memasang kode HTML

kode html blog
kode html

Setelah melihat artikel saya tentang Mengenal kode HTML blog diatas, mudah-mudahan ini bisa membantu anda dalam menulis di blog. Salam Blogger.
 
 
Semoga kali ini sangat bermanfaat untuk bisa berbagi Kode-kode HTML dibawah ini untuk Para Sobat Blogger dan Pembaca sekalian.
Kode-kode HTML itu sebenarnya merupakan salah satu syarat yang harus dimiliki sebagai seorang blogger untuk bisa lebih afdhol gitu hloo... ™Ќîiîk.·:::D Ќîiîk :D::·. Ќîiîk™...
Tapi ya tidaklah segitunya koq Sobat... Maksud tutor26 tadi itu hanya untuk memberikan semangat supaya Kita mau Mempelajari Kode-kode HTML Dasar, itu saja.
Mari Kita semua BELAJAR !!!


Membuat Center, gunakan kode : <p align="center">Belajar</p> hasilnya seperti:
Belajar
Membuat Posisi kekanan gunakan kode : <p align="right">Belajar</p> hasilnya seperti :
Belajar
Membuat Posisi kekiri gunakan kode: <p align="left">Belajar</p> hasilnya seperti :
Belajar
Membuat Huruf Tebal gunakan kode: <b>Belajar</b> hasilnya seperti :
Belajar
Membuat Huruf Garis Bawah gunakan kode : <u>Belajar</u> hasilnya seperti :
Belajar
Membuat Huruf bercetak Miring gunakan kode : <i>Belajar</i> hasilnya seperti :
Belajar
Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :
<b><i><u>Belajar</u></i></b> hasilnya seperti :
Belajar
Membuat Huruf tebal strong gunakan kode : <srong>Belajar</strong> hasilnya seperti :
Belajar
Membuat Huruf Hidden gunakan kode : <span style="visibility: hidden">Belajar</span> hasilnya seperti :


Namanya juga hidden.. tentunya tidak kelihatan laaah...xixixixiii...
Membuat Huruf Besar semua (uppercase) gunakan kode :
<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :
Belajar
Membuat Huruf Small caps gunakan kode:
<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:
Belajar
Membuat Huruf Subscribe / kecil di bawah gunakan kode:
<p>4<sub>2</sub></p>hasilnya seperti ini:
42
Membuat Huruf Superscribe / pangkat gunakan kode:
<p>4<sup>2</sup></p> hasilnya seperti ini:
42
Membuat Huruf bergaris atas gunakan kode:
<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:
Belajar mengganti huruf
Membuat Huruf bergaris tengah gunakan kode:
<strike>Belajar</strike> hasilnya seperti ini:
Belajar
Menentukan jenis huruf gunakan kode:
<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:
Belajar
Menentukan ukuran huruf gunakan kode:
<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:
Belajar
Menentukan warna huruf gunakan kode:
<p style="color: green; >Belajar</p> hasilnya seperti ini:
Belajar
Membuat bullet dot bolong gunakan kode:
<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
  • DOT 1

  • DOT 2

  • DOT 3
Membuat bullet dot kotak gunakan kode:
<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
  • DOT 1
  • DOT 2
  • DOT 3
Membuat bullet dot bulat gunakan kode:
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
  • DOT 1
  • DOT 2
  • DOT 3
Mengatur posisi bullet gunakan kode:
<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>
hasilnya seperti ini:

  • DOT 1
  • DOT 2
  • DOT 3
Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:
<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>
hasilnya seperti ini:
Belajar
Membuat tabel border solid gunakan kode:
<table border="1" width="200">
<tr>
<td style="border-style: solid">Text</td>
</tr>
</table>
hasilnya seperti :
Text

Membuat tabel border dot gunakan kode:
<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

Membuat tabel border dashed gunakan kode:
<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

Membuat tabel border groove gunakan kode:
<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

Membuat tabel border Ridge gunakan kode:
<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
Text

Membuat tabel border Insert gunakan kode:
<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
Text

Membuat tabel border Outset gunakan kode:
<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
Text

Membuat Tabel Biasa gunakan kode :
<table border="1"width="200"><td>Text</td></table>
hasilnya seperti:
Text

Membuat Tabel berwarna gunakan kode :
<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> hasilnya seperti :
Text

Membuat Tabel berwarna tak berbingkai gunakan kode :
<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> hasilnya seperti:
Text

Untuk kode-kode HTML yang lain anda bisa mengulik lewat software-software web designer atau situs-situs penyedia layanan HTML.

*Tabel-tabel diatas, support pada browser IE (Internet Explorer).

Bagaimana Sobat...apa Kalian semua kesulitan...???
Ini mah belum seberapa untuk pelajaran tentang peng-kode-an HTML, masih lebih Gila lagi jika nanti masuk pada tahap belajar PHP.
Yakin aja bahwa diri kalian Hebat...!!!
Bukan bermaksud untuk mengajarkan KESOMBONGAN,  tetapi lebih kepada memberika semangat dan menyemangati diri kita sendiri agar lebih Percaya Diri.
Seperti yang dikatakan Paman "Pe" tentang mempelajari Kode PHP.
 
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)