Belajar Membuat Script html untuk "Garis" dan "Border"

Redaksi Goblar 01.26.00

Berikut ini adalah script atau kode html untuk membuat Garis dan Border

Untuk membuat garis biasa gunakan kode ini; 
 <hr>
Untuk merubah warna gunakan kode;
 <hr color="red"> 
Untuk mengatur panjang garis gunakan kode berikut; 
<hr style="color:#ff0000;" width="60%"> 
Untuk menaruh garis disebelah kiri gunakan kode berikut; 
<hr style="color:#ff0000;" width="60%" align="left"> 
Untuk menaruh garis disebelah kanan gunakan kode berikut; 
<hr style="color:#ff0000;" width="60%" align="right"> 
Membuat garis dengan border; 
<hr style="height:5px ;background: #FF0000;color:#0000ff;" /> 
Membuat garis titik-titik; 
<div style="border-bottom:3px dotted #FF0000;"></div> 
Membuat garis putus-putus;
  <div style="border-bottom:3px dashed #FF0000;"></div> 

    Membuat Garis vertikal dan Border

    Membuat garis vertikal;
    <hr style="height:200px;width: 5px ;background:#FF0000;"/>

    Membuat border Solid
    <div style="background:#ffe4e1;color:#0000ff;border:8px #00ff00 solid;margin:5px;padding:5px;">Teks/URL disini</div>

    Membuat Border double
    <div style="background:#ffe4e1;color:#0000ff;border:8px #00ff00 double;margin:5px;padding:5px;">Teks/URL disini</div>

    Membuat Border dotted
    <div style="background:#ffe4e1;color:#0000ff;border:8px #00ff00 dotted;margin:5px;padding:5px;">Teks/URL disini </div>

    Membuat Border dashed
    <div style="background:#ffe4e1;color:#0000ff;border:8px #00ff00 dashed;margin:5px;padding:5px;">Teks/URL disini</div>

    Membuat Border inset
    <div style="background:#ffe4e1;color:#0000ff;border:8px #00ff00 inset;margin:5px;padding:5px;">Teks/URL disini</div>

    Membuat Border outset
    <div style="background:#ffe4e1;color:#0000ff;border:8px #00ff00 outset;margin:5px;padding:5px;">Teks/URL disini </div>

    Membuat Border Ridge
    <div style="background:#ffe4e1;color:#0000ff;border:10px #00ff00 ridge;margin:10px;padding:5px;">Teks/URL disini</div>

    Membuat Border Groove
    <div style="background:#ffe4e1;color:#0000ff;border:10px #00ff00 groove;margin:8px;padding:5px;">Teks/URL disini</div>

    Keterangan;

    • background = warna latar belakang
    • color = warna teks 
    • border:8px = ketebalan bingkai 8px
    • margin:5px = jarak dinding dengan bingkai 5px
    • padding:5px = jarak bingkai dengan teks 5px

    Untuk membuat gaya sendiri silahkan kombinasikan kodenya sendiri

    Contoh

    <div style="border:10px ridge red;"><div style="border:5px dotted #00ff00;"><div style="background:#ffe4e1;border:8px double #00ff00;">Teks/URL disini </div></div></div>

    Teks/URL disini


    Selamat Mencoba!!

    Tags: