K o n n i c h i w a-!
Haii-! Haii-! bagi pembaca blog aku ❤
Kali ini aku mau bahas tentang cara membuat kalender dengan html & css.
1. Buka software notepad / notepad++
2. Setelah itu, copas script di bawah ini :
<html>
<head>
<title>Kalender</title>
</head>
<body>
<div class="container">
<center><h3 style="color: #F08080">TANGGAL LAHIRKU</h3></center>
<center><h2 style="color: #F08080">LUTFIAH NOOR JANNAH</h2></center>
<center><h3 style="color: #F08080">XII MULTIMEDIA 1</h3></center>
<br>
<table>
<tr>
<td>Agustus</th>
<td></th>
<td></th>
<td></th>
<td></th>
<td></th>
<td>2002</th>
</tr>
<tr>
<th>Minggu</th>
<th>Senin</th>
<th>Selasa</th>
<th>Rabu</th>
<th>Kamis</th>
<th>Jum'at</th>
<th>Sabtu</th>
</tr>
<tr>
<td id="grey">27</td>
<td id="grey">28</td>
<td id="grey">29</td>
<td id="grey">31</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><img src ="kue.png" width="25px" height="25px"></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>
</div>
</body>
</html>
3. Untuk <img src ="kue.png"> kalian bisa mencari gambar di google sesuai keinginan sendiri. Lalu kalian ubah nama sesuai dengan gambar yang kalian download.
4. Langkah berikutnya kita berikan css untuk memberikan tampilan kalender seperti gambar di atas, kalian bisa copas scriptnya di bawah ini :
<style type="text/css">
body {
background: white;
margin:50;
}
.container {width: 400px; margin:auto;}
th{padding: 10px; background-color: #F08080; color:white; font-family: calibri}
td{text-align: center; padding: 10px 0; background-color: #FBF7F7}
#red{color:red;}
#grey{color:grey;}
}
.kotak {
width:720px;
background: white;
margin: 0px auto;
padding: 50px 50px;
border-radius: 10px;
}
</style>
Sangat mudah bukan? Ayo kita bersama belajar bahasa pemograman~
1. Buka software notepad / notepad++
2. Setelah itu, copas script di bawah ini :
<html>
<head>
<title>Kalender</title>
</head>
<body>
<div class="container">
<center><h3 style="color: #F08080">TANGGAL LAHIRKU</h3></center>
<center><h2 style="color: #F08080">LUTFIAH NOOR JANNAH</h2></center>
<center><h3 style="color: #F08080">XII MULTIMEDIA 1</h3></center>
<br>
<table>
<tr>
<td>Agustus</th>
<td></th>
<td></th>
<td></th>
<td></th>
<td></th>
<td>2002</th>
</tr>
<tr>
<th>Minggu</th>
<th>Senin</th>
<th>Selasa</th>
<th>Rabu</th>
<th>Kamis</th>
<th>Jum'at</th>
<th>Sabtu</th>
</tr>
<tr>
<td id="grey">27</td>
<td id="grey">28</td>
<td id="grey">29</td>
<td id="grey">31</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><img src ="kue.png" width="25px" height="25px"></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>
</div>
</body>
</html>
3. Untuk <img src ="kue.png"> kalian bisa mencari gambar di google sesuai keinginan sendiri. Lalu kalian ubah nama sesuai dengan gambar yang kalian download.
4. Langkah berikutnya kita berikan css untuk memberikan tampilan kalender seperti gambar di atas, kalian bisa copas scriptnya di bawah ini :
<style type="text/css">
body {
background: white;
margin:50;
}
.container {width: 400px; margin:auto;}
th{padding: 10px; background-color: #F08080; color:white; font-family: calibri}
td{text-align: center; padding: 10px 0; background-color: #FBF7F7}
#red{color:red;}
#grey{color:grey;}
}
.kotak {
width:720px;
background: white;
margin: 0px auto;
padding: 50px 50px;
border-radius: 10px;
}
</style>
Sangat mudah bukan? Ayo kita bersama belajar bahasa pemograman~
Tidak ada komentar:
Posting Komentar