Bocah Programmer

Postingan

Menampilkan postingan dengan label web programing

Button Style

<!DOCTYPE html> <html> <head> <title>Pengenalan css</title> <style> button { margin-bottom: 10px; } .satu { border-radius: 10px; } .dua { background-color: blue; color: yellow; border: 2px solid red; } .tiga { box-shadow: 0 8px 16px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0...

Baca selengkapnya

Link Style

<!DOCTYPE html> <html> <head> <title>Pengenalan css</title> <style> a { text-decoration: none; } a:link{ color: red; } a:visited { color: green; } a:hover { color: blue; } a:active { color: yellow; } </style> </head> <body> <a href="...

Baca selengkapnya

Font Style

<!DOCTYPE html> <html> <head> <title>Pengenalan css</title> <style> .normal { font-style: normal; } .italic { font-style: italic; } .ukuran { font-size: 50px; } </style> </head> <body> <p class="normal">Gaya tulisan normal</p> <p class="italic">Gaya tulisan italic</p> <br> <p class="ukuran">Paragraf ini ditulis dengan ukuran 50px</p> </body> </html> jika menggunakan class pada tag HTML maka saat mengetik tag pad...

Baca selengkapnya

Pengenalan CSS

<!DOCTYPE html> <html> <head> <title>Pengenalan css</title> <style> h1 { color: blue; } </style> </head> <body> <h1>Hello World!!</h1> <br> <p>bisa juga dengan menambahkan langsung di tag html nya</p> <br> <h2 style="color: green;">Halo Dunia!!</h2> </body> </html> Bisa juga CSS di tempatkan dihalaman lain yang terpisah dengan tag HTML. dengan tag berikut : <link ref="stylesheet" href="style.css">

Baca selengkapnya

Memasukkan Gambar

<!DOCTYPE html> <html> <head> <title>gambar</title> </head> <body> <img src="INDONESIA.jpg"> </body> </html> gambar akan muncul jika berada di folder yg sama jika dalam folder yang berbeda tambahkan "namafolder/gambar.jpg"

Baca selengkapnya

Membuat Form Sederhana

Membuat Form <!DOCTYPE html> <html> <head> <title>form</title> </head> <body> <form> Nama Depan : <input type="text" name="NamaDepan" id="NamaDepan"> <br> Nama Belakang : <input type="text" name="NamaBelakang" id="NamaBelakang"> <br> Password : <input type="password" name="Password" id="Password"> <br> Jenis Kelamin : <br> <input type="radio" name="jeniskelamin" value="P"> Pria <br> <input type="radio" name="jeniskelamin" value="W"> ...

Baca selengkapnya

Membuat Tabel

Contoh Tabel Pada Website <!DOCTYPE html> <html> <head> <title>Tabel</title> </head> <body> <table border="1"> <tr> <th>Nama</th> <th>Alamat</th> </tr> <tr> <td>Ari</td> <td>Jakarta</td> </tr> <tr> <td>Budi</td> <td>Bandung</td> </tr> ...

Baca selengkapnya

Membuat List

Cara membuat list <!DOCTYPE html> <html> <head> <title>List</title> </head> <body> Nama Bulan : <br> <ol> <li>January</li> <li>February</li> <li>Maret</li> <li>April</li> <li>Mei</li> <li>Juni</li> </ol> Nama Hari : <br> <ul> <li>Senin</li> <li>Selasa</li> <li>Rabu</li> <li>Kamis</li> ...

Baca selengkapnya

Hyperlink

Membuat link <!DOCTYPE html> <html> <head> <title>Hyperlink</title> </head> <body> <a href="https://www.google.com">link menuju google</a> <br> Buka <a href="https://www.google.com" target="_blank">link menuju google</a> di halaman baru <br> Kritik dan saran <a href="mailto:emailsaya@gmail.com">Email saya</a> </body> </html> "mailto:" digunakan untuk link yang berupa email Semoga sukses

Baca selengkapnya

Membuat paragraf pada website

Contoh membuat paragraf <!DOCTYPE html> <html> <head> <title>Paragraf</title> </head> <body> <p>ini adalah paragraf 1</p> <p>ini adalah paragraf 2</p> <p>ini adalah paragraf 3</p> <br> <p>ini adalah paragraf 4</p> <p>ini adalah paragraf 5</p> <p>ini adalah paragraf 6</p> <hr> <p>ini adalah paragraf 7</p> <p>ini adalah paragraf 8</p> <p>ini adalah paragraf 9</p> </body> </html> Tag <p> digunakan untuk membuat paragraf. Tag <br> digunakan untuk membuat spasi/jarak dari atas kebawah seperti fungsi ENTER. Tag <hr> mirip seperti fungsi <br> hanya saja menggunakan garis horizontal. Selamat mencoba😁

Baca selengkapnya

Pemrograman web sederhana

Contoh Pemrograman web sederhana <!DOCTYPE html> <html> <head> <title>Program web pertama saya</title> </head> <body> <h1>Hello World!!</h1> </body> </html> Source code di atas adalah contoh pembuatan web sederhana hanya dangan mengganti title/judul dan membuat h1/judul yang biasa ditempatan sebelum konten. Terdapat 6 head/judul yaitu : h1 , h2 , h3 , h4 , h5 , h6. h1 > h2 > h3 > h4 > h5 > h6 h1 memiliki ukuran text lebih besar dari yang lain dan h6 meiliki ukuran paling kecil dari yang lain. Terus pelajari hal baru dan kuasai , karena ILMU akan mengangkat derajat anda

Baca selengkapnya

source code

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <style> .y { color: yellow; } </style> </head> <body> <div class="jumbotron text-center"> <h1>My First Bootstrap Page</h1> <p>Resize this responsive page to see the e...

Baca selengkapnya

Bootstrap Dasar

Bootstrap Example My First Bootstrap Page Resize this responsive page to see the effect! Column 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit... Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris... Column 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit... Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris... Column 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit... Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

Baca selengkapnya