Scribd
Unggah
4 tayangan

Modul_3_XII

Diunggah oleh

alimassury847
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
4 tayangan

Modul_3_XII

Diunggah oleh

alimassury847
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 7

MODUL 3

MEMBUAT PROJECT

Step 1 – Membuat Desain Web

Pembuatan web dimulai dengan desain. Kalau tidak ada desain, nanti kita akan kesulitan dan tidak akan
tahu mau buat apa.

Biasanya desain web dikerjakan oleh desainer, setelah itu diserahkan ke programmer untuk diubah
menjadi HTML.

Pada project ini, kita akan membuat tiga halaman web, yakni home, contact, dan about. Desain yang
digunakan adalah desain dalam bentuk wireframe atau sketsa.

Berikut ini desain untuk tiap-tiap halaman:

1. Desain Halaman Home

Halaman home adalah halaman utama yang akan dibuka pertama kali saat pengunjung membuka
website. Halaman ini berisi menu, foto, teks, dan tabel.
2. Desain Halaman Contact

Halaman contact adalah halaman yang berisi form untuk menghubungi pemilik website.
3. Desain Halaman About

Halaman about adalah halaman yang berisi informasi lengkap tentang website.

Step 2 – Memulai Project Web

1) Silakan buat folder baru dengan nama websiteku.


2) Setelah itu buat folder image dan video di dalam folder websiteku. Folder image akan kita gunakan
untuk menyimpan gambar dan video untuk menyimpan video.

Sehingga nanti struktur folder kita akan menjadi seperti ini:

• image

• foto-profile.jpg

• video

• 🎞 video-about.webm

• cv-name.pdf

• index.html

• contact.html

• about.html

3) File yang perlu kamu persiapkan di tahapan ini adalah foto-profile.jpg dan video-about.webm.
4) Berikutnya, kita akan mulai menulis kode. Silakan buka folder websiteku dengan Visual Studio
Code.
Caranya:
Klik menu File, lalu pilih Open Folder dan carilah folder websiteku.

Step 3 – Membuat Halaman Home

Silakan buat file baru bernama index.html di dalam folder websiteku.

Setelah itu, isi dengan 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 berdomisili di Jakarta.
Saat ini sedang belajar HTML di Petani 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>Leader Local Linux Community</li>
<li>Leader Local Linux Community</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>

<hr>
<footer style="text-align: center;">
<p>Copyright &copy; 2020 Ahmad Muhardian.</p>
</footer>
</body>
</html>

Jangan lupa untuk mengubah nama Ahmad Muardian dengan nama kamu.
Silakan tambahkan file gambar dengan nama foto-profile.jpg.

Membuat Halaman About Me


Buatlah file HTML baru dengan nama about.html.

Kemudian isi dengan 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 berdomisili di Jakarta.
Saat ini sedang belajar HTML di Petani 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 &copy; 2020 Ahmad Muhardian.</p>
</footer>
</body>
</html>

silakan tambahkan file video-nya ke dalam folder video dengan nama video-about.webm.

Mmaka hasilnya:

Membuat Halaman Contact


Buatlah file baru dengan nama contact.html.

Kemudian isi dengan 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 &copy; 2020 Ahmad Muhardian.</p>
</footer>
</body>
</html>
Hasilnya:

Membuat Fitur Download CV


Tambahkan file cv-dian.pdf ke dalam folder websiteku.

Setelah itu, coba klik menu Download CV. Jika PDF-nya terbuka,
maka link ini sudah benar.

Anda mungkin juga menyukai