Kali ini kita akan belajar membuat project akhir membuat web menggunakan html dimana ilmu – ilmu yang sudah kita pelajari akan kita asah kembali disini.
Baik langsung saja kita buat tahapan project nya :
-
-
-
-
-
- Membuat desain web
-
-
- desain halaman home
- desain halaman about me
- desain halaman contac
- desain halaman download cv
-
-
- Memulai project web dengan html
- Membuat halaman home
- membuat halaman about me
- membuat halaman contac
- membuat halaman download cv
- Membuat desain web
-
-
-
-
lanjut langsung kita praktek kan
1. Membuat desain web
1a. Desain Halaman Home
Halaman home merupakan tampilan muka awal dari website. nah nantinya kita akan isi dengan menu web, foto web, teks dan tabel kurang lebih mookup nya seperti ini :
1b. Desain Halaman About me
Halaman About me berisi tentang deskripsi informasi lengkap tentang website ini, mookupnya seperti berikut :
1c. Desain Halaman Contact
Halaman contact berisi sebuah form input dimana melalui form itu pengunjung bisa menghubungi pemilik website, mookupnya seperti berikut :
1d. Desain Halaman Download
Halaman download ini cuman berisi link dowonload file saja. jadi ketika klik menu download akan langsung mendownload file yang sudah tersedia.
2. Memulai project
awalan kita akan buat folder baru yang akan kita beri nama websiteku.
setelahnya kita masuk di dalam folder websiteku lalu kita buat folder image dan video yang akan di gunakan untuk menyimpan gambar dan video tentunya. ingat folder image dan video berada di dalam folder websiteku.
untuk file gambar bisa di download pada link ini.
untuk file video bisa di download pada link ini.
Sehingga struktur foldernya sama seperti di bawah ini :
3. Membuat Halaman Home
Kita akan membuat file baru yaitu file index.html didalam foleder websiteku.
Setelah itu isi file index.html dengan code beriku ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ahmad Muhardian Personal Website</title>
</head>
<body>
<nav>
<a href="index.html">Home</a> |
<a href="cv-dian.pdf">Download CV</a> |
<a href="contact.html">Contact</a> |
<a href="about.html">About me</a>
</nav>
<hr />
<header style="text-align: center;">
<img src="image/foto-profile.jpg" width="200" height="200" style="border-radius: 50%;"/>
<h1>Ahmad Muhardian</h1>
<p>(Web Developer)</p>
</header>
<hr />
<article style="text-align: center;">
<h2>Overview</h2>
<p>
Hi, saya adalah web developer yang berdomisisli di Jakarta.
Saat ini sedang belajar HTML di Petnai Kode
</p>
</article>
<div style="max-width: 600px; margin: 3em auto">
<table border="1" width="100%">
<thead>
<tr>
<th>Skill</th>
<th>Pengalaman</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul>
<li>HTML (Expert)</li>
<li>CSS (Beginner)</li>
<li>Javascript (Beginner)</li>
</ul>
</td>
<td>
<ul>
<li>Freelancer di Internet</li>
<li>Leaeder Local Linux Community</li>
<li>Leaeder Local Linux Community</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<hr>
<footer style="text-align: center;">
<p>Copyright © 2020 Ahmad Muhardian.</p>
</footer>
</body>
</html>
Setelahnya kita coba jalankan file index.html nya maka akan tampil seperti berikut :
Untuk gambar yg belum tampil, hal itu disebabkan karena kita belum memasukan file gambar foto-profile.jpg ke dalam folder image.
olehkarena itu silahkan masukkan file gambar foto-profile.jpg kedalam folder image setelah itu refresh lah browser anda untuk melihat tampilan terbaru dari website seperti ini.
4. Membuat Halaman About Me
kita buat file html baru di dalam folder websiteku kita namai about.html lalu kita isi code berikut ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ahmad Muhardian Personal Website</title>
</head>
<body>
<nav>
<a href="index.html">Home</a> |
<a href="cv-dian.pdf">Download CV</a> |
<a href="contact.html">Contact</a> |
<a href="about.html">About me</a>
</nav>
<hr />
<article>
<h1>About Me</h1>
<p>
Hi, saya adalah web developer yang berdomisisli di Jakarta.
Saat ini sedang belajar HTML di Petnai Kode.
</p>
<p>
Saya memang masih baru dalam web development, karena itu
saya tidak akan pernah berhenti belajar.
</p>
<p>
Saya ingin menguasai bahasa HTML, CSS, dan Javascript.
Simak video lengkap tentang saya.
</p>
<p>
<video controls>
<source src="video/video-about.webm" type="video/webm"/>
</video>
</p>
</article>
<hr>
<footer style="text-align: center;">
<p>Copyright © 2020 Ahmad Muhardian.</p>
</footer>
</body>
</html>
Jangan lupa juga masukan file video-about.webm kedalam folder video
setelah itu kita jalankan file about.html sehingga hasilnya akan sperti ini
5. Membuat Halaman Contact
kita buat file html baru di dalam folder websiteku kita namai contact.html lalu kita isi code berikut ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ahmad Muhardian Personal Website</title>
</head>
<body>
<nav>
<a href="index.html">Home</a> |
<a href="cv-dian.pdf">Download CV</a> |
<a href="contact.html">Contact</a> |
<a href="about.html">About me</a>
</nav>
<hr />
<div>
<h1>Contact Me</h1>
<form>
<label for="email">Email</label><br />
<input type="email" name="email" placeholder="alamat email"/>
<br />
<label for="message">Pesan</label><br />
<textarea name="message" placeholder="Tulis pesan anda..." rows="4" cols="80"></textarea>
<br />
<br />
<input type="submit" value="Kirim" />
</form>
</div>
<hr>
<footer style="text-align: center;">
<p>Copyright © 2020 Ahmad Muhardian.</p>
</footer>
</body>
</html>
Hasilnya seperti berikut ini :
form ini belum berfungsi karena kita belum membuat code untuk pengiriman data yang biasanya kita kombinasikan dengan php. sebaiknya kita bahas di topik lain.
6. Membuat Halaman Download
Untuk kalini kita hanya memasukan file cv-dian.pdf di dalam folder websiteku.
jika kalian belum punya file nya silahkan download di link ini.
struktur filenya bisa di lihat di gambar awal diatas
Sumber :
https://www.petanikode.com/html-project/
