Dalam tutorial ini, kami akan mencoba membuat proyek web kecil. Tujuannya adalah untuk berlatih dan memahami cara membuat web
Baiklah
Mari kita mulai sekarang juga
Langkah 1 - Buat Desain Web
Pengembangan web dimulai dengan desain. Kalau tidak ada desain, nanti kita akan kesulitan dan tidak tahu harus berbuat apa
Biasanya web design dikerjakan oleh designer, setelah itu diserahkan ke programmer untuk diubah menjadi HTML
Pada proyek ini, kita akan membuat tiga halaman web yaitu home, contact, dan about. Desain yang digunakan adalah desain berupa wireframe atau sketsa
Berikut adalah desain untuk setiap halaman
1. Desain Halaman Rumah
Home page adalah halaman utama yang akan dibuka pertama kali saat pengunjung membuka website. Halaman ini berisi menu, foto, teks, dan tabel
2. Desain Halaman Kontak
Halaman kontak adalah halaman yang berisi form untuk menghubungi pemilik website
3. Tentang Desain Halaman
Halaman about adalah halaman yang berisi informasi lengkap tentang website
Langkah 2 โ Memulai Proyek Web
Silakan buat folder baru dengan nama websiteku
Setelah itu buat folder image dan video di dalam folder websiteku. Folder image akan kita gunakan untuk menyimpan gambar dan video untuk menyimpan video
Sampai nanti struktur folder kita akan seperti ini
- ๐ image
- ๐ผ๏ธ <!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>1
- ๐ video
- ๐ <!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>3
- ๐ <!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>4
- ๐ <!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>5
- ๐ <!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>6
- ๐ <!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>_7
- ๐ผ๏ธ <!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>8
File yang perlu Anda siapkan pada tahap ini adalah <!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>1 dan <!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>3
Selanjutnya, kita akan mulai menulis kode. Silakan buka folder websiteku_ dengan Visual Studio Code
Jalan
Klik menu File, lalu pilih Open Folder dan cari folder websiteku
Dengan cara ini, kami siap untuk menulis kode
Langkah 3 - Buat Halaman Beranda
Silakan buat file baru bernama <!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>5 di folder situs web saya
Setelah itu isikan kode berikut
<!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>
Jangan lupa ganti nama <!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>4 dengan nama Anda
Jika kita coba membuka file <!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>5, maka hasilnya akan seperti ini
Gambar tidak bisa muncul karena kita belum menambahkan file gambar di folder image
Silakan tambahkan file gambar dengan nama <!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>1. Pastikan gambar yang ditambahkan memiliki ukuran persegi atau rasio 1. 1. Dalam proyek ini, saya menggunakan gambar dengan ukuran 200x200 piksel
Unduh file gambar. โฌ๏ธ foto profil. jpg
Setelah itu, coba segarkan beranda atau <!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>5
Jadi hasilnya
Langkah 4 โ Membuat Halaman About Me
Buat file HTML baru dengan nama <!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>7
Kemudian isi kode berikut
<!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>
Sama seperti halaman beranda, halaman ini juga memiliki konten video untuk ditampilkan. Tapi file videonya belum ada
Dapat dipastikan bahwa video tersebut tidak akan dapat ditampilkan
Oleh karena itu, silakan tambahkan file video ke folder video dengan nama <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon">1
Jika Anda belum memiliki filenya, silakan unduh dari tautan ini
โฌ๏ธ video-tentang. webm
Setelah itu, coba buka dan segarkan halaman tentang
Jadi hasilnya
Langkah 5 - Buat Halaman Kontak
Buat file baru dengan nama <!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>6
Kemudian isi kode berikut
<!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>
Hasil
Formulir kontak ini belum berfungsi, karena kami belum membuat kode untuk mengirim data
Langkah 6 - Buat Fitur Download CV
Fitur ini sebenarnya paling mudah dibuat. Kami hanya perlu menambahkan file <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon">_3 ke folder situs web saya
Unduh file. โฌ๏ธ cv-dian. pdf
Setelah itu coba klik menu Download CV. Jika PDF terbuka, maka tautan ini benar
Langkah 7 โ Membuat Ikon untuk Web
Agar tampilan website menjadi menarik, kita akan membuat icon atau favicon. Silahkan buka favicon-generator. org lalu pilih gambar yang akan dijadikan icon
Setelah itu kita akan mendapatkan link download dan juga kode HTML yang harus ditambahkan pada tag <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon">4 agar icon dapat ditampilkan