A. PENDAHULUAN
Halo teman-teman, apa kabar semuanya. Pastinya baik dan sehat selalu ya, berjumpa lagi dengan saya. Nah pada tutoria kali ini kita akan Membuat Layout Kalender dengan HTML dan CSS sederhana
B. LATAR BELAKANG
Ingin mengetahui cara membuat Layout Kalender dengan HTML dan CSS.
C. TUJUAN dan MAKSUD
Agar bisa memahaminya tentang Layout Kalender itu sendiri.
D. PEMBAHASAN
Sekarang kita akan membuat kalender tahun 2016.
Pertama-tama siapkan code editornya terlebih dahulu, saya di sini memakai sublime text. Setelah itu copy script di bawah ini
<!DOCTYPE html> <html> <head> <title>Layout Kalender</title> </head> <body> <div class="container"> <h1>Desember</h1> <table> <tr> <th>Minggu</th> <th>Senin</th> <th>Selasa</th> <th>Rabu</th> <th>Kamis</th> <th>Jumat</th> <th>Sabtu</th> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td id="red">4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> <tr> <td id="red">11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> </tr> <tr> <td id="red">18</td> <td>19</td> <td>20</td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td id="red">25</td> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td>30</td> <td>31</td> </tr> </table> </div> </body> </html>
Kemudian pastekan script di atas ini pada code editornya, lalu save dengan nama kelender.html dan buka pada browsernya maka akan menghasilkan output seperti gambar di bawah ini
Langkah berikutnya kita berikan css nya untuk membuat layout kalender mirip seperti demo gambar di atas, teman-teman bisa copy scriptnya di bawah ini
<style type="text/css">
.container{width: 400px; margin:auto;}
th{padding: 10px; background-color: orange; color:white; font-family: calibri}
td{text-align: center; padding: 10px 0; background-color: #fbf7f7}
#red{color:red;}
h1{text-align: center; font-family: calibri}
</style>
Pastekan di dalam tag <head>, jika sudah save dan refresh pada browsernya. Layout kalender sederhana sudah berhasil di buat dan rapi
Sangat mudah bukan, oke untuk teman-teman bisa di pahami ya dari contoh diatas. Nah untuk latihan coba teman-teman buat layout sendiri dirumah yaitu layout kalender full 12 bulan tahun 2017 dengan meniru dari contoh diatas.
Mungkin sekian dulu di artikel kali ini tentang Membuat Layout Kalender dengan HTML dan CSS , semoga bisa menjadi bahan latihan untuk membuat layout dengan HTML dan CSS khususnya teman-teman yang saat ini baru terjun mempelajari HTML dan CSS. Terimakasih dan sampai jumpa.
E. KESIMPUAN
Semoga teman-teman bisa membuat kalender sendiri.
F. PENUTUP
Sekian penjelasan di atas semoga bermanfaat. Terima Kasih
Wassalamu'alaikum Wr.Wb
Tidak ada komentar:
Posting Komentar