Selamat datang kembali di Modul 2! Di modul sebelumnya, kita telah berhasil meletakkan fondasi kokoh untuk website portofolio kita. Saat ini, halaman kita masih sangat sederhana, hanya menampilkan nama kita. Sekarang saatnya untuk mulai membangun “dinding dan jendela” dari rumah digital kita.
Di modul ini, kita akan mempelajari elemen-elemen paling fundamental untuk menampilkan konten: judul, paragraf, gambar, dan tautan (links). Di akhir modul, halaman portofolio Anda akan terlihat jauh lebih hidup dan informatif.
Mari kita mulai coding!
1. Judul (Headings): Memberi Struktur pada Konten Anda
Judul sangat penting untuk memecah konten menjadi bagian-bagian yang mudah dibaca. HTML menyediakan enam tingkatan judul, dari <h1> hingga <h6>.
<h1>: Judul paling penting. Sebaiknya hanya ada satu<h1>per halaman, yang biasanya digunakan untuk judul utama halaman atau artikel (dalam kasus kita, nama kita).<h2>: Sub-judul untuk bagian utama.<h3>hingga<h6>: Sub-judul yang lebih rendah tingkatannya.
Penggunaan hierarki judul yang benar tidak hanya membuat halaman Anda rapi, tetapi juga sangat penting untuk SEO (Search Engine Optimization). Mesin pencari seperti Google menggunakan judul untuk memahami struktur dan topik utama konten Anda.
<h1>Ini Judul Utama</h1>
<h2>Ini Sub-judul Bagian A</h2>
<p>Ini paragraf di bawah bagian A.</p>
<h2>Ini Sub-judul Bagian B</h2>
<p>Ini paragraf di bawah bagian B.</p>
<h3>Ini sub-sub-judul di bawah B</h3>2. Paragraf dan Pemformatan Teks Dasar
Elemen yang paling sering Anda gunakan untuk teks adalah tag <p> (paragraf). Setiap kali Anda ingin memulai sebuah blok teks baru, bungkuslah dengan tag <p>.
<p>Ini adalah paragraf pertama. Browser akan secara otomatis memberikan jarak spasi di antara paragraf.</p>
<p>Ini adalah paragraf kedua. Menulis teks di baris baru dalam editor kode tidak akan membuat baris baru di browser, Anda harus menggunakan tag paragraf baru.</p>Selain paragraf, ada beberapa tag inline yang sangat berguna untuk memberi penekanan pada teks:
<strong>: Untuk menandai teks yang sangat penting. Secara visual, browser akan menampilkannya sebagai teks tebal.<em>: Singkatan dari emphasis, untuk memberi penekanan pada sebuah kata atau frasa. Secara visual, browser akan menampilkannya sebagai teks miring.
Penting: Gunakan <strong> dan <em> karena maknanya (semantik), bukan hanya karena tampilannya. Jika Anda hanya ingin membuat teks tebal atau miring untuk alasan gaya, sebaiknya gunakan CSS nanti.
<p>Ini adalah tugas yang <strong>sangat penting</strong> untuk diselesaikan.</p>
<p>Saya <em>yakin</em> kita bisa melakukannya.</p>3. Gambar (Images): Menghidupkan Halaman Anda
Sebuah gambar bernilai seribu kata. Untuk menampilkan gambar di HTML, kita menggunakan tag <img>. Tag ini adalah empty element, yang berarti ia tidak memiliki tag penutup.
Tag <img> memiliki dua atribut yang wajib ada:
src(source): Atribut ini berisi path atau URL menuju file gambar yang ingin Anda tampilkan.alt(alternative text): Teks alternatif yang akan ditampilkan jika gambar gagal dimuat. Teks ini juga sangat krusial untuk aksesibilitas (dibacakan oleh screen reader untuk pengguna tunanetra) dan SEO.
<img src="nama-file-gambar.jpg" alt="Deskripsi singkat tentang gambar ini">Path Gambar:
- Relatif: Jika gambar berada di folder yang sama dengan file HTML Anda, Anda cukup menuliskan nama filenya (contoh:
src="foto-profil.jpg"). - Absolut: Jika gambar berasal dari website lain, Anda harus menyalin URL lengkapnya (contoh:
src="https://website.com/gambar.png").
4. Tautan (Links): Menghubungkan Dunia Web
Tautan, atau hyperlink, adalah inti dari HyperText. Mereka memungkinkan kita untuk terhubung ke halaman lain. Kita menggunakan tag <a> (anchor) untuk membuatnya.
Tag <a> membutuhkan atribut href (hypertext reference) yang berisi alamat tujuan tautan.
<a href="https://www.google.com">Klik di sini untuk pergi ke Google</a>Jenis-jenis Tautan:
- Tautan Eksternal: Menuju ke website lain (seperti contoh di atas).
- Tautan Internal: Menuju ke halaman lain di dalam website Anda sendiri.
<a href="/halaman-kontak.html">Pergi ke Halaman Kontak</a>- Tautan Email: Membuka aplikasi email default pengguna
<a href="mailto:emailanda@contoh.com">Kirim Email ke Saya</a>Tips Pro: Jika Anda ingin tautan terbuka di tab browser baru, tambahkan atribut target="_blank". Ini sangat disarankan untuk tautan eksternal agar pengguna tidak meninggalkan website Anda.
<a href="https://www.instagram.com" target="_blank">Lihat Instagram Saya</a>Hands-on: Coding Bareng – Mengisi Portofolio Anda!
Saatnya mempraktikkan semua yang baru kita pelajari. Buka kembali file index.html dari proyek portofolio-saya Anda. Kita akan mengembangkannya dari modul sebelumnya.
- Tujuan: Mengisi kerangka dengan konten teks, gambar profil, dan tautan sosial media.
- Tugas Anda:
- Siapkan Gambar Profil: Cari satu foto diri Anda yang bagus. Ubah namanya menjadi
foto-profil.jpg(gunakan huruf kecil semua dan tanda hubung untuk spasi). Letakkan file gambar ini di dalam folderportofolio-saya, di samping fileindex.htmlAnda. - Modifikasi
index.html: Ganti seluruh isi<body>Anda dengan kode di bawah ini. Pastikan untuk mengganti konten placeholder (ditandai dengan[...]) dengan informasi Anda sendiri.
- Siapkan Gambar Profil: Cari satu foto diri Anda yang bagus. Ubah namanya menjadi
Kode Baru untuk <body>:
<body>
<h1>[Nama Lengkap Anda]</h1>
<p>
Seorang <strong>Calon Web Developer</strong> yang bersemangat dari [Kota Anda].
Saya memiliki ketertarikan mendalam pada teknologi dan <em>seni</em>
dalam menciptakan pengalaman digital yang intuitif dan bermanfaat bagi pengguna.
</p>
<img src="foto-profil.jpg" alt="Foto profil [Nama Anda]" width="200">
<h2>Tentang Saya</h2>
<p>
[Tulis 2-3 kalimat yang mendeskripsikan diri Anda. Apa passion Anda? Apa yang sedang Anda pelajari? Apa tujuan karir Anda? Jadikan ini personal!]
</p>
<h2>Hubungi Saya</h2>
<p>
Anda bisa menghubungi saya melalui email atau terhubung melalui media sosial di bawah ini.
</p>
<p>
<a href="mailto:[emailanda@contoh.com]">Email Saya</a> |
<a href="https://www.linkedin.com/company/anda-us" target="_blank">LinkedIn</a> |
<a href="https://www.instagram.com/andamh/?hl=en" target="_blank">Instagram</a>
</p>
</body>Penjelasan Kode:
- Kita menggunakan
<h1>untuk nama, yang merupakan judul utama. - Kita menambahkan paragraf pengantar singkat dengan penekanan menggunakan
<strong>dan<em>. - Kita menyisipkan gambar profil menggunakan
<img>. Perhatikan penggunaanwidth="200"untuk mengatur ukuran gambar agar tidak terlalu besar (ini bisa dilakukan di HTML, meskipun praktik terbaiknya nanti adalah menggunakan CSS). - Kita membuat bagian “Tentang Saya” dan “Hubungi Saya” menggunakan
<h2>sebagai sub-judul. - Di bagian kontak, kita membuat tautan untuk email, LinkedIn, dan Instagram. Tautan sosial media menggunakan
target="_blank"agar terbuka di tab baru.
Simpan file index.html Anda, lalu refresh halaman di browser. Halaman portofolio Anda sekarang sudah memiliki kepribadian!
[Screenshot of what the portfolio page should look like after this module]
Kesimpulan & Langkah Selanjutnya
Kerja bagus! Halaman portofolio Anda kini tidak lagi kosong. Anda telah berhasil menambahkan elemen-elemen konten paling vital yang akan Anda gunakan di hampir setiap proyek web.
Anda sekarang tahu cara:
- Memberi struktur pada konten dengan
<h1>–<h6>. - Menulis paragraf dan memberi penekanan pada teks dengan
<p>,<strong>, dan<em>. - Menampilkan gambar dengan
<img>beserta atributsrcdanalt. - Membuat tautan yang fungsional dengan
<a>dan atributhref.
Di Modul 3, kita akan melangkah lebih jauh dengan belajar cara mengorganisir informasi yang lebih kompleks menggunakan List (Daftar) dan Tabel. Ini akan sangat berguna untuk menampilkan daftar keahlian dan riwayat pendidikan Anda.
Tetap semangat dan sampai jumpa di modul berikutnya!
Sumber dan Referensi
- MDN – Headings: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
- MDN – Image Element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
- MDN – Anchor (Link) Element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
- W3Schools – HTML Images: https://www.w3schools.com/html/html_images.asp