Membuat situs web portofolio adalah langkah penting bagi profesional atau pekerja lepas mana pun yang ingin memamerkan karya dan keterampilan mereka. Dalam seri tutorial ini, kami akan memandu Anda melalui proses pembuatan situs web portofolio sederhana menggunakan HTML dan CSS. Di Bagian 1, kita akan mulai dengan membuat struktur HTML dasar untuk situs web. Kami akan menggunakan tag HTML semantik untuk membuat pohon dokumen yang terstruktur dengan baik. Di akhir tutorial ini, Anda akan memiliki pemahaman dasar tentang cara membuat dokumen HTML yang terstruktur dengan baik untuk situs web portofolio.
Petunjuk Langkah demi Langkah
Membuat Struktur Dasar HTML
Langkah pertama dalam membuat situs web portofolio sederhana kami adalah membuat struktur HTML dasar. Kita akan mulai dengan template boilerplate HTML5:
Dalam templat ini, kami telah menetapkan jenis dokumen sebagai HTML5 dan menentukan bahasanya sebagai bahasa Inggris. Kami juga menyertakan tag meta untuk menentukan rangkaian karakter dan area pandang, serta elemen judul untuk judul situs web.
2. Menambahkan Bagian Header
Selanjutnya, kami akan menambahkan bagian tajuk ke situs web portofolio kami. Bagian header biasanya berisi logo situs web, menu navigasi, dan informasi penting lainnya. Kami akan menggunakan elemen tajuk untuk membuat bagian tajuk:
Dalam kode ini, kami telah membuat bagian header menggunakan elemen header. Kami juga menambahkan elemen div dengan kelas “container” untuk membungkus konten header. Di dalam wadah div, kami telah menambahkan logo situs web dan menu navigasi masing-masing menggunakan elemen div dan nav.
3. Menambahkan Bagian Konten Utama
Bagian selanjutnya yang akan kami tambahkan ke situs web portofolio kami adalah bagian konten utama. Bagian ini biasanya berisi konten utama situs web, seperti artikel atau daftar produk. Kami akan menggunakan elemen utama untuk membuat bagian konten utama:
4. Menambahkan Bagian Tentang Bagian tentang adalah tempat Anda dapat memberikan informasi tentang diri Anda, keahlian Anda, dan pengalaman Anda. Kami akan menggunakan elemen bagian untuk membuat bagian tentang:
5 . Menambahkan Bagian Kontak Bagian terakhir yang akan kami tambahkan ke situs web portofolio kami adalah bagian kontak. Bagian ini biasanya berisi formulir kontak atau tautan ke profil media sosial Anda. Kami akan menggunakan elemen bagian untuk membuat bagian kontak:
Dalam kode ini, kami telah menambahkan formulir kontak menggunakan elemen formulir. Kami juga menyertakan kolom input untuk nama dan email, serta textarea untuk pesan tersebut. Terakhir, kami telah menambahkan tombol kirim untuk memungkinkan pengguna mengirim pesan mereka.