Senin, 12 Desember 2011

Membuat Border Cantik Dengan Tag HTML

Blog yang berpenampilan rapi dan menarik tentu menjadi idaman para blogger, nilai estetika dari sebuah blog janganlah dianggap remeh, selain content yang berbobot penampilan juga harus representatif.

Memang semua itu tak lepas dari selera dari setiap orang, tetapi paling tidak jika sebuah blog tertata dengan rapi, baik itu menu navigasinya, image yang ditampilkan, animasi-animasi yang menarik dan lain sebagainya, akan menimbulkan kesan “plus” pada pandangan pertama awal jumpa, sehingga pengunjung tidak akan cepat bosan dan jenuh untuk membolak-balik isi  halaman blog anda.

Banyak yang dapat anda lakukan untuk memperindah tampilan blog anda, salah satunya adalah dengan menambahkan border. Ada beberapa border pada kode tag HTML yang dapat anda kreasikan kedalam blog.
(baca juga Menata Susunan Kalimat Dengan Text Alignment Pada HTML    |    Membuat Daftar atau List Menggunakan Kode HTML


  • Solid Border
  • Contoh tag Solid Border :

    <div style="width:200px;height:60px;border:1px solid blue;">
    Contoh Solid Border.
    </div>


    Hasilnya seperti dibawah ini :
    Contoh Solid Border.


  • Dotted Border
  • Contoh tag Dotted Border :

    <div style="width:200px;height:60px;border:2px dotted blue;">
    Contoh Dotted Border.
    </div>


    Hasilnya seperti dibawah ini :
    Contoh Dotted Border.



  • Dashed Border
  • Contoh tag Dashed Border :

    <div style="width:200px;height:60px;border:2px dashed blue;">
    Contoh Dashed Border.
    </div>


    Hasilnya seperti dibawah ini :
    Contoh Dashed Border.


  • Outset Border
  • Contoh tag Outset Border :

    <div style="width:200px;height:60px;border:2px outset blue;">
    Contoh Outset Border.
    </div>


    Hasilnya seperti dibawah ini :
    Contoh Outset Border.


  • Inset Border
  • Contoh tag Inset Border :

    <div style="width:200px;height:60px;border:2px inset blue;">
    Contoh Inset Border.
    </div>


    Hasilnya seperti dibawah ini :
    Contoh Inset Border.


  • Grooved Border
  • Contoh tag Grooved Border :

    <div style="width:200px;height:60px;border:2px groove blue;">
    Contoh Grooved Border.
    </div>


    Hasilnya seperti dibawah ini :
    Contoh Grooved Border.


  • Double Border
  • Contoh tag Double Border :

    <div style="width:200px;height:60px;border:2px double blue;">
    Contoh Double Border.
    </div>


    Hasilnya seperti dibawah ini :
    Contoh Double Border.


  • Ridget Border
  • Contoh tag Ridged Border :

    <div style="width:200px;height:60px;border:2px ridge blue;">
    Contoh Ridged Border.
    </div>


    Hasilnya seperti dibawah ini :
    Contoh Ridged Border.


  • Mixed Border
  • Contoh tag Mixed Border :

    <div style="width:200px;height:60px;border-width:5px;border-color:black;border-style:dotted dashed solid double;">
    Create borders for any HTML element.
    </div>


    Hasilnya seperti dibawah ini :
    Contoh Mixed Border.

    Silahkan anda coba dengan merubah width, border-color, boder-style, height dan lain sebagainya untuk membandingkan hasilnya, sambil belajar memahami kode-kode tag HTML ini, selamat mencoba.

    3 komentar:

    Indonesa AFF 2012 mengatakan...

    Terimakasih :)

    cherylaghniads mengatakan...

    sangat bermanfaat mas bro, ijin sedot ya postingannya. trims

    Gisha Anggraeni mengatakan...

    kak mau mempercantik list sitemap pake border gitu gimana ya??

    contoh sitemap nya disini nih drakorku-id

    Posting Komentar