Kode dasar HTML - Sonny Ogawa

Halaman

    Social Items

Kode HTML ~ Sangat diperlukan kalau kita ingin terjun di dunia web, misalnya anda ingin mengelola sebuah blog. karena sedikit banyak akan menuntut kemampuan kita dalam mengedit kode-kode HTML.

kode dasar html

Kode HTML diperlukan saat kita harus mengedit sidebar, memposting artikel, menempatkan kode HTML, mengedit kode warna HTML, menempatkan tabel dan lain sebagainya. Maka dari itu kita diharuskan menguasai dasar-dasar kode atau script HTML.

Dalam belajar HTML anda tidak perlu secara khusus membuat kode HTML, dengan membaca artikel ini saja anda sudah bisa belajar HTML sesuai keperluan anda dalam mengedit blog anda. Pengertian Kode HTML bagi pemula seperti saya adalah serangkaian kode-kode bahasa pemrograman yang digunakan untuk membangun blog.

Untuk mempermudah anda dalam mengelola website atau blog terutama untuk para blogger mobile, di sini juga akan saya berikan contoh penerapan kode atau script HTML sehingga anda dapat belajar dan mengenal kode-kode dasar HTML serta mempraktekkannya di blog anda.

Dan bagi anda yang masih pemula dan ingin belajar ngeblog, berikut ini saya sertakan beberapa kode dasar HTML :


cara membuat paragraf gunakan kode

<p>teks kamu</p>
hasilnya
teks kamu

cara membuat baris baru gunakan kode:
<br>Teks Kamu
hasilnya
teks kamu

cara membuat text warna ukuran besar gunakan kode:
<font color="red"size="50"><b>Teks Kamu</b></font>
hasilnya
Teks Kamu

cara untuk membuat sebuah link gunakan kode:
<a href="http://sonny-ogawa-ogawa.blogspot.com">Teks Kamu</a>
hasilnya
http://sonny-ogawa.blogspot.com

cara untuk membuat sebuah link gunakan kode:
<a href="http://sonny-ogawa-ogawa.blogspot.com">Teks Kamu</a>
hasilnya
Sonny Ogawa

cara memasang link gambar gunakan kode :
<a href="http://URL KAMU"><img src="http://URL GAMBAR"></a>
hasilnya:


cara memasang gambar gunakan kode:
<img src="http://2.bp.blogspot.com/-fjzLimrIjNQ/Uom6Bj_Q8EI/AAAAAAAAA04/t1ph833hfgc/s1600/sonny_ogawa-765766.jpg">
hasilnya:


cara ganti ukuran gambar gunakan kode :
<img src="http://URL GAMBAR"width="100" height="100">
hasilnya


membuat box copy paste gunakan kode :
<textarea style=text-align:center," rows="3" cols="10">Teks Kamu</textarea>
hasilnya


cara membuat text rata kiri dan kanan gunakan kode:
<div style="text-align: justify;">teks kamu</div>
hasilnya seperti ini:
teks kamu

Membuat text di tengah atau center gunakan kode :
<p align="center">teks kamu</p>
hasilnya seperti:
teks kamu

Membuat text Posisi kekanan gunakan kode :
<p align="right">teks kamu</p>
hasilnya seperti :
teks kamu

Membuat Posisi kekiri gunakan kode:
<p align="left">teks kamu</p>
hasilnya seperti :
teks kamu

Membuat Huruf Tebal gunakan kode:
<b>teks kamu</b> hasilnya seperti :
teks kamu

Membuat Huruf Garis Bawah gunakan kode :
<u>teks kamu</u>
hasilnya seperti :
teks kamu

Membuat Huruf bercetak Mirin gunakan kode :
<i>teks kamu</i>
hasilnya seperti :
teks kamu

Membuat Kombinasi huruf tebal,miring,garisbawahgunakan kode :
<b><i><u>teks kamu</u></i></b>
hasilnya seperti :
teks kamu

Membuat Huruf tebal strong gunakan kode :
<srong>teks kamu</strong>
hasilnya seperti :
teks kamu

Membuat Huruf Besar semua (uppercase) gunakan kode :
<span style="text-transform: uppercase">teks kamu</span>
hasilnya seperti :
teks kamu

Membuat Huruf Small caps gunakan kode:
<span style="font-variant: small- caps">teks kamu</span>
hasilnya seperti ini:
teks kamu

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 tengah gunakan kode:
<strike>teks kamu</strike>
hasilnya seperti ini:
teks kamu

Menentukan jenis huruf gunakan kode:
<p><font-family="Arial" >teks kamu</font></p>
hasilnya seperti ini:
teks kamu

Menentukan ukuran huruf gunakan kode:
<p><font-size="3" >teks kamu</font></p>
hasilnya seperti ini:
teks kamu

Menentukan warna huruf gunakan kode:
<p style="color: blue">teks kamu</p>
hasilnya seperti ini:
teks kamu

Menentukan kombinasi warna, jenis, dan ukuran huruf gunakan kode:
<p><font style="color: green; font-family: courier new; font-size: 15px;" >teks kamu</font></p>
hasilnya seperti:
teks kamu

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> <ul> <li>DOT 1</li> <li>DOT 2</li> <li>DOT 3</li> </ul> </blockquote>
hasilnya seperti ini:
  • DOT 1
  • DOT 2
  • DOT 3

Membuat tabel border solid gunakan kode:
<table border="1" width="200"> <tr> <td style="border-style: solid">Teks kamu</td> </tr> </table>
hasilnya seperti :
Teks kamu

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

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

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>teks kamu</td> </tr> </table>
hasilnya seperti ini:
teks kamu

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

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

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

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

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



Sekian untuk postingan kali ini semoga bermanfaat. Dan untuk kode warna silahkan baca kode warna HTML


Kode dasar HTML

Kode HTML ~ Sangat diperlukan kalau kita ingin terjun di dunia web, misalnya anda ingin mengelola sebuah blog. karena sedikit banyak akan menuntut kemampuan kita dalam mengedit kode-kode HTML.

kode dasar html

Kode HTML diperlukan saat kita harus mengedit sidebar, memposting artikel, menempatkan kode HTML, mengedit kode warna HTML, menempatkan tabel dan lain sebagainya. Maka dari itu kita diharuskan menguasai dasar-dasar kode atau script HTML.

Dalam belajar HTML anda tidak perlu secara khusus membuat kode HTML, dengan membaca artikel ini saja anda sudah bisa belajar HTML sesuai keperluan anda dalam mengedit blog anda. Pengertian Kode HTML bagi pemula seperti saya adalah serangkaian kode-kode bahasa pemrograman yang digunakan untuk membangun blog.

Untuk mempermudah anda dalam mengelola website atau blog terutama untuk para blogger mobile, di sini juga akan saya berikan contoh penerapan kode atau script HTML sehingga anda dapat belajar dan mengenal kode-kode dasar HTML serta mempraktekkannya di blog anda.

Dan bagi anda yang masih pemula dan ingin belajar ngeblog, berikut ini saya sertakan beberapa kode dasar HTML :


cara membuat paragraf gunakan kode

<p>teks kamu</p>
hasilnya
teks kamu

cara membuat baris baru gunakan kode:
<br>Teks Kamu
hasilnya
teks kamu

cara membuat text warna ukuran besar gunakan kode:
<font color="red"size="50"><b>Teks Kamu</b></font>
hasilnya
Teks Kamu

cara untuk membuat sebuah link gunakan kode:
<a href="http://sonny-ogawa-ogawa.blogspot.com">Teks Kamu</a>
hasilnya
http://sonny-ogawa.blogspot.com

cara untuk membuat sebuah link gunakan kode:
<a href="http://sonny-ogawa-ogawa.blogspot.com">Teks Kamu</a>
hasilnya
Sonny Ogawa

cara memasang link gambar gunakan kode :
<a href="http://URL KAMU"><img src="http://URL GAMBAR"></a>
hasilnya:


cara memasang gambar gunakan kode:
<img src="http://2.bp.blogspot.com/-fjzLimrIjNQ/Uom6Bj_Q8EI/AAAAAAAAA04/t1ph833hfgc/s1600/sonny_ogawa-765766.jpg">
hasilnya:


cara ganti ukuran gambar gunakan kode :
<img src="http://URL GAMBAR"width="100" height="100">
hasilnya


membuat box copy paste gunakan kode :
<textarea style=text-align:center," rows="3" cols="10">Teks Kamu</textarea>
hasilnya


cara membuat text rata kiri dan kanan gunakan kode:
<div style="text-align: justify;">teks kamu</div>
hasilnya seperti ini:
teks kamu

Membuat text di tengah atau center gunakan kode :
<p align="center">teks kamu</p>
hasilnya seperti:
teks kamu

Membuat text Posisi kekanan gunakan kode :
<p align="right">teks kamu</p>
hasilnya seperti :
teks kamu

Membuat Posisi kekiri gunakan kode:
<p align="left">teks kamu</p>
hasilnya seperti :
teks kamu

Membuat Huruf Tebal gunakan kode:
<b>teks kamu</b> hasilnya seperti :
teks kamu

Membuat Huruf Garis Bawah gunakan kode :
<u>teks kamu</u>
hasilnya seperti :
teks kamu

Membuat Huruf bercetak Mirin gunakan kode :
<i>teks kamu</i>
hasilnya seperti :
teks kamu

Membuat Kombinasi huruf tebal,miring,garisbawahgunakan kode :
<b><i><u>teks kamu</u></i></b>
hasilnya seperti :
teks kamu

Membuat Huruf tebal strong gunakan kode :
<srong>teks kamu</strong>
hasilnya seperti :
teks kamu

Membuat Huruf Besar semua (uppercase) gunakan kode :
<span style="text-transform: uppercase">teks kamu</span>
hasilnya seperti :
teks kamu

Membuat Huruf Small caps gunakan kode:
<span style="font-variant: small- caps">teks kamu</span>
hasilnya seperti ini:
teks kamu

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 tengah gunakan kode:
<strike>teks kamu</strike>
hasilnya seperti ini:
teks kamu

Menentukan jenis huruf gunakan kode:
<p><font-family="Arial" >teks kamu</font></p>
hasilnya seperti ini:
teks kamu

Menentukan ukuran huruf gunakan kode:
<p><font-size="3" >teks kamu</font></p>
hasilnya seperti ini:
teks kamu

Menentukan warna huruf gunakan kode:
<p style="color: blue">teks kamu</p>
hasilnya seperti ini:
teks kamu

Menentukan kombinasi warna, jenis, dan ukuran huruf gunakan kode:
<p><font style="color: green; font-family: courier new; font-size: 15px;" >teks kamu</font></p>
hasilnya seperti:
teks kamu

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> <ul> <li>DOT 1</li> <li>DOT 2</li> <li>DOT 3</li> </ul> </blockquote>
hasilnya seperti ini:
  • DOT 1
  • DOT 2
  • DOT 3

Membuat tabel border solid gunakan kode:
<table border="1" width="200"> <tr> <td style="border-style: solid">Teks kamu</td> </tr> </table>
hasilnya seperti :
Teks kamu

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

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

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>teks kamu</td> </tr> </table>
hasilnya seperti ini:
teks kamu

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

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

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

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

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



Sekian untuk postingan kali ini semoga bermanfaat. Dan untuk kode warna silahkan baca kode warna HTML