Belajar HTML #15: Membuat Project Web Pribadi dengan HTML

 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.

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

Silahkan 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.


Sehingga nanti stuktur folder kita akan menjadi seperti ini:


📁 image

🖼️ foto-profile.jpg

📁 video

🎞 video-about.webm

📄 cv-name.pdf

📜 index.html

📜 contact.html

📜 about.html

🖼️ favicon.ico

File yang perlu kamu persiapkan di tahapan ini adalah foto-profile.jpg dan video-about.webm.


Berikutnya, kita akan mulai menulis kode. Silahkan buka folder websiteku dengan Visual Studio Code.


Caranya:


Klik menu File, lalu pilih Open Folder dan carilah folder websiteku.



Degan begini, kita sudah siap untuk menulis kode.



Step 3 – Membuat Halaman Home

Silahkan 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 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 &copy; 2020 Ahmad Muhardian.</p>

    </footer>

</body>

</html>

Jangan lupa untuk mengubah nama Ahmad Muardian dengan nama kamu.


Jika kita coba membuka file index.html, maka hasilnya akan seperti ini:



Gambarnya tidak bisa tampil karena kita belum menambahkan file gambar di dalam folder image.


Silahkan tambahkan file gambar dengan nama foto-profile.jpg. Pastikan gambar yang ditambahkan memiliki ukuran persegi atau raStep 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 HTM


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


Berikut ini desain untuk tiap-tiap halama


1. Desain Halaman Ho


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


2. Desain Halaman Conta


Halaman contact adalah halaman yang berisi form untuk menghubungi pemilik websit


3. Desain Halaman Abo


Halaman about adalah halaman yang berisi informasi lengkap tentang websit


Step 2 – Memulai Project W

Silahkan 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 vid


Sehingga nanti stuktur folder kita akan menjadi seperti in


📁 ima

🖼️ foto-profile.jp

📁 vide

🎞 video-about.web

📄 cv-name.pd

📜 index.htm

📜 contact.htm

📜 about.htm

🖼️ favicon.ic

File yang perlu kamu persiapkan di tahapan ini adalah foto-profile.jpg dan video-about.webm


Berikutnya, kita akan mulai menulis kode. Silahkan buka folder websiteku dengan Visual Studio Cod


Carany


Klik menu File, lalu pilih Open Folder dan carilah folder websitek



Degan begini, kita sudah siap untuk menulis ko



Step 3 – Membuat Halaman H

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



Setelah itu, isi dengan kode berik


<!DOCTYPE htm

<html lang="en"


<hea

    <meta charset="UTF-8"

    <meta name="viewport" content="width=device-width, initial-scale=1.0"

    <title>Ahmad Muhardian Personal Website</title

</head


<bod

    <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 Kod

        </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


    <h

    <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


Jika kita coba membuka file index.html, maka hasilnya akan seperti in



Gambarnya tidak bisa tampil karena kita belum menambahkan file gambar di dalam folder ima


Silahkan tambahkan file gambar dengan nama foto-profile.jpg. Pastikan gambar yang ditambahkan memiliki ukuran persegi atau 


Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar Python: Cara Membaca dan Menulis File di Python

Gambar
  Baca dan tulis file adalah teknik dasar yang harus dipahami dalam pemrograman Python, karena banyak digunakan untuk pengolahan dan pemerosesan file. Paham cara membaca dan menulis file dengan Python akan membuatmu mampu membuat aplikasi yang bisa mengambil dan menyimpan data ke file. Selain itu juga, kamu akan lebih mudah memahami beberapa materi Python Pada Python, file hanya dikelompokkan menjadi dua tipe: File Teks : File yang berisi teks. Setiap baris teks memiliki EOL  (End of Line) . Contoh: TXT, MD, CSV, JSON, dsb. File Binary : File yang bukan teks, hanya bisa diproses oleh program tertentu yang memahami strukturnya. Contoh: EXE, JPG, MKV, M4A, 3GP, dsb. Pada tutorial ini, kita akan hanya belajar cara membaca dan menulis file teks saja. Untuk file  binary , mungkin nanti di kesempatan yang lain. Cara Membaca File di Python Python sudah menyediakan fungsi  open()  untuk membaca dan menulis file.  1 Fungsi ini memiliki dua parameter, yaitu nama file...
Baca selengkapnya

Belajar Javascript: Memahami Struktur Data Array pada Javascript

  Apa itu Array? Sebelum kita membahas Array, kita bahas dulu apa itu struktur data? Struktur data  merupakan cara-cara atau metode yang digunakan untuk menyimpan data di dalam memori komputer. Salah satu struktur data yang sering digunakan dalam pemrograman adalah  Array . Array merupakan struktur data yang digunakan untuk  menyimpan sekumpulan data  dalam satu tempat. Setiap data dalam Array memiliki indeks, sehingga kita akan mudah memprosesnya. Indeks array selalu dimulai dari angka nol ( 0 ). Pada teori struktur data… …Ukuran array akan bergantung dari banyaknya data yang ditampung di dalamnya. Cara Membuat Array pada Javascript Pada javascript, array dapat kita buat dengan tanda kurung siku ( [...] ). Cara Menambahkan Data ke Dalam Array Ada dua cara yang bisa dilakukan untuk menambah data ke dalam array: Mengisi menggunakan indeks; Mengisi menggunakan method  push() . Terdapat tiga data di dalam array  buah  dengan indeks: 0 :  "Apel" ...
Baca selengkapnya

Fungsi dan cara kerja HTML

Gambar
  Apa itu HTML?  Hypertext Markup Language  atau  HTML  adalah bahasa markup yang digunakan untuk membuat sebuah halaman web. Isinya terdiri dari berbagai kode yang dapat menyusun struktur suatu website. HTML terdiri dari kombinasi teks dan simbol yang disimpan dalam sebuah file. Dalam membuat file HTML, terdapat standar atau format khusus yang harus diikuti. Format tersebut telah tertuang dalam standar kode internasional atau  ASCII (American Standard Code for Information Interchange).  Dengan adanya HTML, pengguna dapat membuat atau menyusun heading, paragraf, gambar, link, dan lainnya supaya dapat dilihat banyak orang melalui halaman website.  Baca juga:  Cara Memasukkan dan Mengatur Gambar di HTML Untuk bisa diakses secara umum, pengguna perlu membukanya lewat aplikasi browser, seperti Internet Explorer, Chrome, atau Mozilla Firefox.  Setelah mengetahui pengertian HTML di atas, Anda mungkin penasaran bagaimana sejarah lahirnya HTML h...
Baca selengkapnya