Membuat Layout Kalender dengan HTML dan CSS
Halo teman-teman, apa kabar semuanya. Pastinya bagus dan sehat selalu ya, berjumpa lagi dengan saya. Nah di panduan kali ini kita akan Membuat Layout Kalender dengan HTML dan CSS sederhana, berikut yakni demo gambar nya.
Pertama-tama-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 di code editornya, lalu save dengan nama kelender.html dan buka di browsernya karenanya akan menghasilkan output seperti gambar di bawah ini
Langkah berikutnya kita berikan css nya bagi membangun layout kalender mirip seperti demo gambar di atas, teman-teman dapat 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 pada tag <head>, sekiranya telah save dan refresh di browsernya. Layout kalender sederhana telah berhasil di bikin dan rapi
Amat gampang bukan, oke bagi teman-teman dapat di pahami ya dari contoh diatas. Nah bagi latihan coba teman-teman bikin layout sendiri dirumah yaitu layout kalender full 12 bulan tahun 2017 dengan meniru dari contoh diatas.
Mungkin demikian dulu di artikel kali ini mengenai Membuat Layout Kalender dengan HTML dan CSS , semoga dapat menjadi bahan latihan bagi membangun layout dengan HTML dan CSS khususnya teman-teman yang ketika ini baru terjun mempelajari HTML dan CSS. Terimakasih dan hingga jumpa.
Baca pun artikel mengenai Membuat Table Stripped Dengan Nth-child
Sumber https://kursuswebsite.org
