BLANTERORBITv102

    Membuat Website Biodata Pribadi Menggunakan HTML Dan CSS Part 4

    Rabu, 08 Juli 2015
    D. Membuat Konten Pada Blog Pribadi 

    Kali ini dalam tutorial ke empat, saya akan memberikan kode program html dan css untuk membuat tabel dalam kontent pada website pribadi. Tak lepas dari itu , kemungkinan ada beberapa kode html yang tidak termasuk dalam pembuatan tabel.

    1. Membuat Tabel Pada HTML

    Buatlah sebuah file baru dengan nama tabelbiodata.html , buka file tersebut dan masukan kode html berikut : 

    [code] <table border="1"> <tr> <td>Kolom 1 Baris 1</td> <td>Kolom 2 Baris 1</td> <td>Kolom 3 Baris 1</td> </tr> <tr> <td>Kolom 1 Baris 2</td> <td>Kolom 2 Baris 2</td> <td>Kolom 3 Baris 2</td> </tr> <tr> <td>Kolom 1 Baris 3</td> <td>Kolom 2 Baris 3</td> <td>Kolom 3 Baris 3</td> </tr> </table>[/code]
    Pada kode html tersebut , tag <table> adalah pembuka dalam membuat suatu table di html dan tag </table> sebagai penutupnya. Selanjutnya tag <tr> adalah pembuka dalam membuat baris (row) pada tabel dan tentunya akan ditutup dengan tag </tr>. Sedangkan tag <td> adalah pembuka dalam mebuat sebuah kolom pada tabel, dan harus ditutup dengan tag </td>. Gambar dibawah adalah hasil dari kode html di atas.

    Contoh-tabel-html
    Contoh tabel
    Dari table diatas, saya akan memasukan data diri di dalam kolom-kolom tersebut. Dan saya akan mengkostum tampilan tabel di atas dengan css. Berikut kode html tabel yang berisi data diri.

    [code] <link rel="stylesheet" type="text/css" href="style.css"> <div id="bio"> <img src="image/foto.jpg"> <table border="0"> <tr> <td>Nama Lengkap</td><td>:</td><td>Hady Eka Saputra</td> </tr> <tr> <td>Nama Panggilan</td><td>:</td><td>Bang Hes</td> </tr> <tr> <td>TTL</td><td>:</td><td>Disamarkan , d / mm / yyyy</td> </tr> <tr> <td>Makanan Favorite</td><td>:</td><td>Yang Halal</td> </tr> <tr> <td>Minuman Favorite</td><td>:</td><td>Yang Halal</td> </tr> <tr> <td>Hobi</td><td>:</td><td>Terserah</td> </tr> <tr> <td>Minat</td><td>:</td><td>Teknologi</td> </tr> <tr> <td>Pendidikan</td><td>:</td><td><ul><li>SDN 007 Sdmlyo</li><li>SMP N 3 Pasir Penyu</li> <li>SMK N 1 Pasir Penyu</li> </ul></td> </tr> </table> </div>[/code] Dan berikut kode css dari tabel tersebut :

    [code] #bio { box-shadow:0 1px 5px black; margin: 10px; width: 60%; } img { width:200px; height:300px; float: left; padding: 4px } table[border="0"] {   border-collapse:collapse;   font-family: cursive;   color:#fff;   padding: 4px; } table[border="0"] tr {   background:#16abdd; } table[border="0"] th, table[border="0"] td {   vertical-align:top;   padding:5px 15px;   border:1px solid #fff; } table[border="0"] tr:nth-child(even) {   background:#1d98e0; }[/code] Penampakan hasilnya pada browser

    Tabel-dengan-css
    Tabel dengan CSS
    Kemudian kita akan tampilkan pada website kita, nah disini saya akan menggunakan iframe , sehingga kita tidak perlu mengetik kode pada file index dan mengganti isi pada konten. Buatlah 1 file html kosong sebagai tujuan link yang di buka pada iframe , beri nama file tersebut dengan konten1.html. Perhatikan kode pada menu dan konten , 

    [code]  <div id="right">   <iframe src="konten1.html" name="konten"></iframe>  </div>[/code] kode diatas berada pada bagian konten , silahkan perhatikan kode file index.html.

    [code] <li><a href="tabelbiodata.html" target="konten">About Me</a></li>[/code] dan kode di atas adalah kode pada menu About Me, silahkan perhatikan kode file index.html. Pada browser maka akan tampil seperti gambar berikut apabila file index di jalankan pada browser:

    Iframe-pada-html
    Iframe pada html

    Menu-About-Me-dengan-mentargetkan-file-ke-iframe
    Menu About Me dengan mentargetkan file ke iframe
    Tambah sedikit kode pada bagian style.css , dengan kode berikut :

    [code] iframe { width: 100%; height: 100%; border:none; }[/code] Setelah kita reload dan buka kembali menu about me ,

    Iframe-dengan-css
    Sudah Ok
    Berakhir , saya akan beri kembali beberapa tutorial pada blog ini sampai anda dapat membuat website pribadi sendiri. Silahkan kepo dan cari tahu mengenai tabel dan iframe lagi, agar ilmu anda dapat lebih bertambah.

    Terimakasih sudah berkesempatan untuk menimba ilmu dari blog JSC, semoga ilmu yang di share dapat bermanfaat. Jika ada pertanyaan mengenai ilmu yang terkait ataupun tidak, mari kita berdiskusi di dalam kolom komentar ini.

    Keep Learning and Keep Sharing