Jese Vernando Nababan
153303030249
Semester 3 Pagi B
Teknik Informatika
Universitas Prima Indonesia
Tugas PROFILE
Kurang lebih seperti itu lah penampakan hasil sebuah Profile dari pemrograman HTML.
Didalam gambar tersebut terlihat ada 2 file HTML yang di jadikan 1 file HTML, Nah selanjutnya kita akan bahas cara pembuatan nya, yook MULAI!!!
(boleh copy tapi cantumkan sumber penulisnya, saya capek looh nulis kodenya, okeey? deal?)
Nah pertama kali kita akan buat file HTML pertama yaitu :
<html>
<head>
<title>Profile</title>
<style type="text/css">
h1
{ text-shadow:5px 5px 5px #00ff00; }
</style>
</head>
<body>
<font face="forte">
<body bgcolor="redblack">
<img src="jese.jpg" width="230px" height="240px" />
<table border="2" height="10"width="230">
<tr>
<td bgcolor="grey"><font face="forte"color="white">
<p align="left"><b>
<div style="background: url("images/h.gif") no-repeat scroll left center rgb(22, 22, 43); border-top: 1px solid rgb(92, 93, 130); color: #00ff00; font-family: staccato222 BT; font-size: 2em; font-weight: 900; line-height: 1.2em; margin-top: 20px; padding: 3px 10px; text-align: center; text-shadow: 0.1em 0.1em 0.2em white;">
Media Sosial</div>
</b>
</font
<td>
</tr>
</table>
BBM           : 5C537DE5<br>
Line             : <u>jesenababan</u><br>
Instagram: <u>jesenababan</u>
<table border="2" height="5"width="230">
<tr>
<td bgcolor="grey"><font face="forte"color="white">
<p align="left"><b>
<div style="background: url("images/h.gif") no-repeat scroll left center rgb(22, 22, 43); border-top: 1px solid rgb(92, 93, 130); color: #00ff00; font-family: staccato222 BT; font-size: 2em; font-weight: 900; line-height: 1.2em; margin-top: 20px; padding: 3px 10px; text-align: center; text-shadow: 0.1em 0.1em 0.2em white;">
Telepon/HP</div>
</b>
</font
<td>
</tr>
</table>
Pilih :
<SELECT NAME="POSITION">
<OPTION VALUE="PB"><h3>0856-9594-1518 (Indosat)</h3>
<OPTION VALUE="DBA" SELECTED><h3>0812-1030-5690 (Telkomsel)</h3>
</SELECT>
</h3>
<table border="2" height="5"width="230">
<tr>
<td bgcolor="grey"><font face="forte"color="white">
<p align="left"><b>
<div style="background: url("images/h.gif") no-repeat scroll left center rgb(22, 22, 43); border-top: 1px solid rgb(92, 93, 130); color: #00ff00; font-family: staccato222 BT; font-size: 2em; font-weight: 900; line-height: 1.2em; margin-top: 20px; padding: 3px 10px; text-align: center; text-shadow: 0.1em 0.1em 0.2em white;">
E-MAIL</div>
</b>
</font
<td>
</tr>
</table>
<a href="http://jesenababan5@gmail.com">jesenababan5@gmail.com</a><br>
<a href="http://cocjese@gmail.com">cocjese@gmail.com</a></br></li>
</body>
</html>
ini adalah kode simpan di file pertamanya kalau saya tulis dengan nama file jese1.html
kita lanjut langkah ke 2
silakan copy coding ini:
<html>
<head>
</head>
<body>
<body bgcolor="redblack">
<p>
<style type="text/css">b.drop-shadow { text-shadow: 2px 2px 2px yellow }</style><font color="green">
<b class="drop-shadow"><h1><b>Profile</h1></b>
</font></b><hr>
</p>
Nama            :
<input type="text" name="name">
</a><p>
NIM             : <input type="text" name="NIM"><p>
Lahir             : <select name="lahir" >
<option value="Tanggal"> Tanggal</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="bulan" >
<option value="Bulan"> Bulan</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option></select>
<select name="tahun" >
<option value="Tahun"> Tahun</option>
<option>2001</option>
<option>2000</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
<option>1994</option>
<option>1993</option>
<option>1992</option>
<option>1991</option>
<option>1990</option></select><p>
Jenis kelamin : <input type="radio" name="jenis_kelamin" value="laki-laki" />
Laki - Laki<br>            
          <input type="radio" name="jenis_kelamin" value="perempuan" />
Perempuan<p>
Alamat          : <textarea rows="1" cols="20">jl.danau poso , Medan
</textarea><p>
Agama          :
<select name="Pilih" >
<option value=" ~Pilih~">~Pilih~</option>
<option>Kristen protestan</option>
<option>kristen Katolik</option>
<option>Islam</option>
<option>Hindu</option>
<option>Budha</option>
</select>
<style type="text/css">b.drop-shadow { text-shadow: 2px 2px 2px yellow }</style><font color="green">
<b class="drop-shadow"><h1><b>Pendidikan Formal</h1></b>
</font></b><hr>
<table style=”witdh:100%” border=”1”>
<tr>
<td><b>No</b></td>
<td><center><b>Tahun</center></b></td>
<td><center><b>Nama Sekolah</b></center></td>
</tr>
<tr>
<td>1</td>
<td>2015-sekarang</td>
<td><center>Universitas Prima Indonesia</center></td>
</tr>
<tr>
<td>2</td>
<td>2012-2015</td>
<td><center>SMK Swasta Eka Prasetya Medan</center></td>
</tr>
<tr>
<td>3</td>
<td>2009-2012</td>
<td><center>SMP NEGERI 2 Bandar Pulau, ASAHAN</center></td>
</tr>
<tr>
<td>4</td>
<td>2003-2009</td>
<td><center>SD NEGERI 010143 Bandar Pulau, ASAHAN</center></td>
</tr>
</table>
</body>
</html>
simpan file nya dengan akhiran .HTML juga, kalau saya buat nama file nya jese2.html (nama file ini terserah kamu aja)
nah uda nampak kan gambar ke 2?
yok kita gabungkan gambar 1 dan 2 agar terlihat seperti gambar paling atas
lihat kode HTML ini untuk menggabungkan file jese1.html dengan jese2.html
<html>
<head>
<title>Profile</title>
</head>
<frameset cols="40%,60%">
<frame src="jese1.html">
<frame src="jese2.html">
</frameset>
<body>
</body>
</html>
Sedikit kan kode nya? ya iya lah, kan tinggal gabungkan file... okee
simpan kode tersebut dengan nama file profile.html , kalau sudah siap silakan lihat hasilnya
oyaa buat suatu folder yang berisi file jese1.html dan jese2.html serta file gambanya, seperti gambar berikut ini:
nah selesai, silakan share/bagikan postingan ini jika bermanfaat bagi anda. TERIMA KASIH sudah mengunjungin BLOG saya, bye!!
