_(300_x_130_px).png){kind=logo}
Tugas RPL Kelas XI Membuat website data diri.
Tugas
- Buka explorer selanjutnya buka drive C kemudian buka folder xampp, kemudian cari file yang bernama xampp-control lalu jalankan (klik 2kali)
- Kemudian start service Apache dan MySQL sampai tanda start menjadi stop. Seperti gambar dibawah
- Buka folder C:/xampp/htdocs dan buat folder baru dengan cara klik kanan pada mouse pilih new folder, kemudian beri nama folder tersebut dengan nama panggilan kalian, contoh gambar dibawah ini :
- Selanjutnya buka aplikasi Visual Studio Code lalu buka folder yang baru saja dibuat tadi dengan cara pilih menu File kemudian pilih Open Folder. contoh gambar dibawah ini.
- Selanjutnya buka drive C lalu pilih xampp kemudian pilih folder htdocs lalu pilih nama folder kalian, sepeti contoh dibawah ini. Kemudian pilih select Folder
Selanjutnya klik file pilih New Text File
Selanjutnya tekan Ctrl + S (untuk save document yang dibuat tadi) kemudian berinama index.php lalu tekan save.
Sehnigga tampilan menjadi seperti ini
- Selanjutnya copy script dibawah ini ke file index.php
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biodata Diri</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}
.container {
max-width: 800px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #007BFF;
}
.section {
margin-bottom: 20px;
}
.section h2 {
color: #007BFF;
border-bottom: 2px solid #007BFF;
padding-bottom: 5px;
}
.info {
margin-bottom: 10px;
}
.info label {
font-weight: bold;
}
.info p {
margin: 5px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>Biodata Diri</h1>
<div class="section">
<h2>Informasi Pribadi</h2>
<div class="info">
<label>Nama:</label>
<p>John Doe</p>
</div>
<div class="info">
<label>Tanggal Lahir:</label>
<p>1 Januari 1990</p>
</div>
<div class="info">
<label>Alamat:</label>
<p>Jl. Raya Contoh No. 123, Jakarta, Indonesia</p>
</div>
<div class="info">
<label>Kontak:</label>
<p>Email: john.doe@example.com</p>
<p>Telepon: +62 812 3456 7890</p>
</div>
</div>
<div class="section">
<h2>Riwayat Pendidikan</h2>
<div class="info">
<label>Universitas:</label>
<p>Universitas Contoh</p>
</div>
<div class="info">
<label>Gelar:</label>
<p>Sarjana Teknik Informatika</p>
</div>
<div class="info">
<label>Periode:</label>
<p>2008 - 2012</p>
</div>
</div>
<div class="section">
<h2>Pengalaman Kerja</h2>
<div class="info">
<label>Perusahaan:</label>
<p>Perusahaan Contoh</p>
</div>
<div class="info">
<label>Posisi:</label>
<p>Software Engineer</p>
</div>
<div class="info">
<label>Periode:</label>
<p>2013 - Sekarang</p>
</div>
</div>
</div>
</body>
</html>
Penjelasan Kode:
<!DOCTYPE html>: Mendefinisikan tipe dokumen dan versi HTML.<html lang="id">: Menetapkan bahasa dokumen sebagai bahasa Indonesia.<head>: Bagian kepala dokumen, di mana Anda bisa menyertakan metadata, judul halaman, dan link ke stylesheet.<meta charset="UTF-8">: Menetapkan encoding karakter sebagai UTF-8.<meta name="viewport": Mengatur viewport untuk desain responsif di perangkat seluler.<style>: Menyertakan CSS untuk gaya halaman.<body>: Bagian utama dokumen yang berisi konten.<div class="container">: Wadah untuk konten dengan gaya khusus.<div class="section">: Seksi untuk membagi konten.<div class="info">: Kontainer untuk informasi individu
- Selanjutnya buka browser chrome atau firefox, lalu ketikkan localhost/nama siswa (contoh : localhost/gibran)
- Tugasnya adaah ganti nama dan data diri diatas menjadi data diri kalian!
- Berilah / rubahlah warna background dan text sehingga tampilan jadi lebih berwarna, seperti warna hidupmu.
- Tambah foto anda masing2 di bagian paling atas
- Note : Cari di google script untuk menambah foto.
_(2).png)
