Pengantar Pendalaman HTML

Pada modul sebelumnya, kita telah mempelajari permukaan dari HTML. Pengetahuan tersebut sangat dibutuhkan sebagai fondasi untuk mempelajari materi selanjutnya. Tidak kalah penting juga, itu sangat dibutuhkan dalam membangun halaman web yang baik dan benar.

Selain mempelajari HTML, kita juga sudah berlatih dalam membangun halaman web sederhana, mulai dari tanpa struktur dasar dokumen HTML hingga mengidentifikasi dan menerapkan elemen-elemen yang sesuai dengan konten yang ditampilkan. Pada modul ini, kita akan menyelam lebih dalam dengan variasi elemen pada HTML. Harapannya, kita dapat memilih elemen yang sesuai dalam menampilkan konten, terutama ketika mengembangkan proyek latihan kita.

Beberapa hal yang akan kita pelajari sebagai berikut.

Variasi elemen seperti paragraf, heading, list, gambar, dan teks terformat.
Membangun halaman web dengan semantic HTML.
Mengelompokkan elemen dengan generic elemen.
Membuat tabel pada HTML.
Mengetahui berbagai macam elemen input untuk membuat formulir dalam halaman web.

Pada akhir modul, kita akan melanjutkan pengembangan proyek Halaman Profil dengan variasi elemen yang telah dipelajari. Berikut adalah hasil akhir dari latihan modul ini.

Sudah tidak sabar dan sangat bersemangat, kan? Langsung saja masuk ke materi berikutnya. Cus!

Paragraf

Paragraf adalah elemen paling mendasar dari sebuah dokumen teks. Pada HTML , kita bisa menunjukkan sebuah paragraf dengan menggunakan elemen <p>. Contohnya berikut.

Ketika menggunakan elemen paragraf, browser akan menampilkannya dalam baris baru dan sedikit jarak ( spasi ) di bawah elemen. Dalam CSS , ini disebut sebagai margin. Singkatnya, ia merupakan bagian dari elemen yang mengatur jarak antar elemen. Margin akan kita bahas dan atur pada penerapan gaya.

Elemen paragraf tidak melulu menampilkan teks. Ia dapat berisi elemen lain yang memiliki sifat inline, seperti elemen gambar, input, dan sebagainya. Anda akan menemukan elemen bahasan secara inline pada materi-materi berikutnya.

Pada modul sebelumnya, Anda sudah berlatih mengidentifikasi elemen pada Halaman Profil Bandung. Sebagai catatan, gunakanlah elemen paragraf untuk konten bertipe paragraf. Bagi teks yang bersifat sebagai judul, jangan gunakan elemen ini meskipun tidak menjadi error. Hal ini karena ada elemen lain yang lebih cocok untuk hal tersebut. Namun, tidak perlu risiko. Kita akan membahas elemen lainnya secara lengkap pada materi berikutnya.

Catatan:
Pastikan kita selalu menggunakan elemen HTML dalam menampilkan seluruh teks (konten) yang ada pada dokumen HTML. Teks yang ditampilkan tanpa dibungkus elemen disebut teks anonim.

Menuju

Pada modul sebelumnya, kita sudah melihat contoh penggunaan heading yang diterapkan pada konten yang kami siapkan. Kita menggunakan <h1> dan <h2> dalam mengindikasikan judul dan subjudul pada kontennya. Pada HTML , ada elemen <h1> hingga <h6> elemen heading yang dapat kita gunakan.

Ketika kita menambahkan judul pada konten, ia merepresentasikan garis besar halaman pada sebuah browser . Alat bantu baca seperti pembaca layar membaca garis besar halaman untuk membantu memetakan dan mengarahkan pengguna selama menjelajahi halaman. Selain itu, heading juga merupakan elemen yang dicari oleh mesin pencarian, contohnya Google Search.

Ini contoh penerapan heading empat level pada sebuah dokumen. Tiap level heading dituliskan dengan cara yang sama.

Dari penggunaan elemen heading pada konten tersebut maka kita dapat membuat garis besar dokumen seperti berikut.

Pada browser , heading standarnya akan ditampilkan dengan tulisan tebal ( teks tebal ), dimulai dari h1 dengan ukuran teks paling besar kemudian berurutan sesuai dengan level heading- nya.

Daftar

sama yang sudah disebutkan pada pembahasan paragraf, tidak semua teks dibungkus oleh paragraf, salah satunya list. Kita pun terbiasa membuat list dalam kehidupan sehari-hari, baik membuat to-do list maupun daftar yang terstruktur sekalipun.

Pada HTML terdapat tiga tipe list.

Unordered list : daftar yang ditampilkan tidak memiliki urutan.
Daftar yang diurutkan : daftar yang ditampilkan secara terurut.
Description list : daftar yang terbuat dari beberapa istilah yang diikuti dengan deskripsi dari istilah tersebut.

Daftar Tak Berurutan

Seperti namanya, unordered list merupakan daftar yang tidak mementingkan urutan. Standarnya, unordered list menampilkan bullet pada setiap item list-nya (tetapi kita bisa mengubahnya dengan styling).

Untuk mengatur konten sebagai unordered list kita gunakan <ul></ul> kemudian di dalam elemen tersebut kita gunakan tag <li></li> untuk mengatur item pada list tersebut. Contoh penerapannya sebagai berikut.

Di antara tag elemen <li>, kita dapat mengisikan konten apa pun termasuk elemen HTML lainnya. Contohnya, kita dapat memasukkan sebuah judul atau paragraf pada item.

<ul>
  <li><h1> Sebuah Heading sebagai daftar item </h1></li>
  <li><h2> Sebuah Heading level 2 sebagai daftar item </h2></li>
  <li><p> Sebuah paragraf sebagai daftar item </p></li>
</ul>

Seperti yang sudah kita ketahui, list item akan menampilkan seperti format heading.

Kita juga bisa menambahkan elemen <ul> lagi dalam list item untuk membuat nested list .

Daftar Berurutan

Daftar terurut digunakan untuk membuat daftar yang mengutamakan urutan. Contohnya, membuat daftar instruksi langkah demi langkah sehingga dibutuhkan urutan yang sesuai. Ordered list berfungsi seperti unordered list, namun perbedaannya adalah pada setiap item yang menampilkan angka bukan sebuah bullet . Angka yang ditampilkan, otomatis berurut tiap item-nya sehingga kita tidak perlu menuliskan secara kasar urutan nomornya. Hal ini tentu mempermudah kita untuk mengorganisasi tiap itemnya.

Untuk mengatur konten sebagai daftar terurut kita gunakan <ol></ol>. Sama seperti unordered list, setiap item dalam list ditetapkan dengan menggunakan tag <li></li>.

serupa unordered list, di antara tag elemen <li>, kita dapat mengisikan konten apa pun termasuk elemen HTML lainnya.

Pada daftar yang dipesan, tipe urutan angkanya dapat kita atur melalui sebuah atribut type . Contohnya, selain nomor, urutan angka dapat diganti dengan alfabet ataupun angka romawi.

<ol type = "Saya" > 
  Langkah pertama
  Langkah kedua
  Langkah ketiga
  <li> Langkah selanjutnya </li>
</ol>
<ol type = "A" > 
  Langkah pertama
  Langkah kedua
  Langkah ketiga
  <li> Langkah selanjutnya </li>
</ol>

Berikut adalah nilai-nilai yang dapat digunakan pada atribut type pada elemen <ol>.

Nilai	Deskripsi
1	Menggunakan angka dalam urutan item ( default ).
A	Menggunakan huruf kecil dalam urutan item.
A	Menggunakan huruf besar dalam urutan item.
Saya	Menggunakan huruf romawi kecil dalam urutan item.
SAYA	Menggunakan huruf romawi besar dalam urutan item.

Selain tipe angka pada urutan, kita juga bisa menetapkan nilai awal pada sebuah daftar yang dipesan dengan menggunakan atribut start . Contohnya, jika kita ingin memulai sebuah list dari angka 7, kita tetapkan atribut start dengan nilai 7 pada elemen <ol>.

Secara default, urutan list diawali dengan urutan paling rendah. Namun, kita dapat menambahkan atribut reversed pada elemen <ol> untuk membuat urutan dalam sebuah list terbalik. Atribut ini berbeda dengan atribut yang lain (yang telah dibahas sebelumnya), atribut ini tidak memerlukan sebuah nilai ketika menggunakannya. Atribut ini hanya menandakan sebuah daftar untuk misalkan urutan angka pada setiap item-nya. Berikut contoh penggunaannya.

Latihan: Menambahkan Daftar pada Halaman Profil

Setelah mempelajari penerapan list pada HTML , sekarang kita akan berlatih menerapkannya untuk menampilkan navigasi pada Halaman Profil.

Tujuan

Pada latihan ini, kami akan mengembangkan lagi studi kasus Halaman Profil yang telah kami lakukan pada modul sebelumnya. Kali ini, kami akan menambahkan daftar navigasi untuk menampilkan daftar konten yang tersedia di halaman tersebut. Kita akan memanfaatkan elemen list, lebih tepatnya adalah elemen ul.

Hasil akhirnya akan tampak seperti berikut.

Tips:
Pada langkah ini dan berikutnya, sebaiknya gunakanlah code editor yang disarankan pada pembahasan Requirement Tools agar proses penulisan dan pengelolaan berkas HTML dapat lebih cepat.

Alur Latihan

Berikut adalah alur latihan kali ini.

Membuka hasil latihan terakhir dengan VSCode.
Menuliskan daftar navigasi pada dokumen HTML .
Batasan dokumen HTML pada browser .

Latihan Menambahkan List pada Halaman Profil

Silakan ikuti dan simak beberapa langkah berikut untuk mengikuti latihan dengan baik.

Silakan buka proyek Halaman Profil terakhir dengan VS Code. Jika belum memilikinya, silakan unduh proyek tersebut pada repositori GitHub ini .

Kita akan menambahkan daftar navigasi menggunakan elemen list. Silakan buka berkas index.html dan tambahkan elemen unordered list berikut di bawah dari elemen paragraf pertama pada berkas HTML. Elemen yang ditambahkan memiliki cetakan tebal.

<!-- Kode lainnya disembunyikan... -->
 
<body>
  <h1> Bandung </h1>
  <p>
    Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.
  </p>
 
  <ul>
    <li> Sejarah </li>
    <li> Geografi </li>
    Wisata </li>
  </ul>
 
  <h2> Sejarah </h2>
  <!-- Kode lainnya disembunyikan... -->
</body>

Hasilnya akan tampak seperti berikut.

Kode Bedah

Kerja bagus! Kamu berhasil menerapkan elemen list pada Halaman Profil. Elemen ini akan berfungsi sebagai navigasi daftar yang menampilkan daftar konten dalam Halaman Profil. Mari kita pelajari hal yang telah kita lakukan pada latihan ini.

sama seperti yang dipelajari sebelumnya, elemen list digunakan untuk membuat daftar item. Namun, kami memanfaatkannya untuk membuat daftar navigasi atau daftar navigasi. Jika boleh menerka-nerka, kami yakin bahwa Anda akan bertanya-tanya seperti berikut.

Mengapa menggunakan <ul> daripada <ol>?
Mengapa menggunakan elemen list untuk memasaknya? Padahal daftar navigasi umumnya ditampilkan secara horizontal dan tanpa penomoran.
Jika ditampilkan secara horizontal dan tanpa penomoran, bukankah bisa menggunakan elemen lain selain elemen list? Misalnya elemen umum seperti div.

Catatan:
Kita belum membahas elemen div. Sebagai informasi awal, ia merupakan elemen generik yang sebetulnya tidak memilki makna sedikit pun. Namun, ia dapat dimanfaatkan untuk mengelompokkan sejumlah elemen.

Pada dasarnya, kita dibebaskan untuk menggunakan elemen apa pun untuk mencapai konten dan tampilan yang diinginkan. Alasan yang paling logis adalah elemen <ol> umumnya untuk menampilkan item-item yang mementingkan urutan. Contohnya, membuat langkah-langkah memasak mie instan, membuat minuman kopi, dsb. Namun, ketika membaca sebuah artikel feature yang informasinya tidak bergantung pada urutan (tidak seperti resep, novel, dsb.), tentu pembaca bebas memulai dari mana pun yang diinginkan, bukan? Oleh sebab itulah, kita menggunakan elemen <ul>.

Elemen list merupakan salah satu elemen yang dapat dimanfaatkan menampilkan daftar navigasi halaman. Namun, tentu saja ada karakter bullet pada setiap item dan ini tidak kita butuhkan. Bagaimana cara untuk mengubah tampilannya? Tentunya, kita akan mempelajari ini pada modul styling (modul terpisah).

Saat ini, kita baru bisa membuat daftar navigasi hanya dengan elemen list, tetapi belum dapat berfungsi sebagaimana mestinya.

Untuk melakukannya, kita memerlukan elemen anchor (<a>). Apakah Anda bertanya-tanya untuk cara lain? Jawabannya, ada! Namun, kita memerlukan JavaScript dan ini tidak dicakup pada kelas ini. Anda akan belajar JavaScript pada kelas lanjutan.

Untuk menambahkan pengetahuan tentang elemen list, seperti biasa, kami mengarahkan Anda pada MDN sebagai dokumentasi terlengkap. Silakan kunjungi dan simak The Ordered List element dan The Unordered List element.

Gambar

Tanpa gambar, sebuah website tentu tidak akan menarik bukan? Ada beberapa alasan mengapa website perlu gambar. Contohnya kita perlu menampilkan logo perusahaan, ilustrasi, diagram struktur atau data, dan sebagainya.

Pada HTML untuk menampilkan sebuah gambar kita bisa menggunakan tag <img>. Berbeda dengan elemen lain, elemen <img> tidak menuliskan konten di antara tag pembuka dan tag penutup. Namun, untuk menetapkan gambar yang ditampilkan kita gunakan sebuah atribut.

Contohnya berikut.

Pada contoh kode di atas, perlu kita perhatikan bahwa elemen <img> merupakan sebuah elemen kosong (tidak memiliki konten sehingga tidak ada closing tag).

Selain itu, hal yang perlu kita perhatikan adalah atribut pada elemen tersebut, terdapat dua attributes yang harus kita gunakan ketika menerapkan elemen <img>.

Pertama, atribut src. Atribut ini berfungsi sebagai sumber dari gambar yang ditampilkan. Atribut ini dapat bernilai url gambar atau path gambar local dari gambar yang digunakan.

Kedua adalah atribut alt. Atribut ini sebenarnya tidak wajib untuk diterapkan, hanya saja atribut ini akan sangat berguna ketika gambar tidak berhasil ditampilkan. Nilai atribut ini merupakan tampilan dari gambar yang ditampilkan dalam bentuk tulisan. Jadi, ketika gambar gagal ditampilkan akan memunculkan teks alternatif yang dapat mewakili arti dari gambar tersebut.

Selanjutnya terdapat atribut lain yang bisa Anda gunakan pada elemen ini, contohnya title. Ia berfungsi sebagai informasi tambahan untuk sebuah gambar. Informasi tersebut akan muncul ketika kita mengarahkan sebuah kursor pada gambar yang ditampilkan.

Jenis Format Gambar

Berikut adalah jenis format gambar yang umum digunakan pada pembuatan website.

Nama	Ekstensi Format File	Keterangan
Graphics Interchange Format	.gif	Dapat digunakan untuk gambar animasi. Ukuran file biasanya kecil. Kualitas gambar terbatas.
Joint Photographic Expert Group image	.jpg, .jpeg, .jfif, .pjpeg, .pjp	Kualitas teks pada gambar dapat menjadi buruk. Ukuran file lumayan kecil. Pada website biasanya digunakan untuk gambar yang tidak banyak teks.
Portable Network Graphics	.png	Teks lebih bisa terbaca dibandingkan jenis jpeg. Ukuran file dapat menjadi besar sehingga mengurangi kecepatan memuat situs.
WebP	.webp	Dibandingkan dengan gambar berkualitas sama pada jpeg atau png, ukuran file pada webp dapat menjadi lebih kecil. Memiliki tingkat kompresi yang lebih baik dari JPEG, PNG and GIF.
Scalable Vector Graphics	.svg	Kualitas gambar terjaga dan ukuran file kecil. Namun, tidak cocok untuk gambar yang terlalu kompleks, seperti foto. Pada website biasanya digunakan untuk logo atau ikon.

Mengatur Ukuran pada Gambar

Untuk mengatur ukuran gambar yang ditampilkan, kita juga tentunya menggunakan sebuah atribut. Untuk menentukan lebar gambar, kita gunakan atribut width, dan untuk menentukan tinggi tentu gunakan atribut height.

Ketika menggunakan atribut ini, disarankan hanya gunakan salah satunya. Terkecuali kita menentukan nilai lebar dan tingginya sesuai dengan rasio dari ukuran gambar aslinya.

Contohnya, jika kita tetap memaksa untuk menentukan ukuran panjang dan lebar sebuah gambar tanpa menyesuaikan rasionya, gambar yang ditampilkan tidak akan proporsional.

<!-- Jangan lakukan hal ini! -->
<img src="https://raw.githubusercontent.com/dicodingacademy/BelajarDasarPemrogramanWeb/099-shared-files/dicoding-logo.png" alt="Logo Dicoding" width="500px" height="200px">

Hasilnya berikut.

Dengan menetapkan hanya satu atribut ukurannya, maka ukuran lainnya akan mengikuti sesuai dengan rasio gambar aslinya. Contohnya, kita bisa menetapkan ukuran gambar berdasarkan nilai lebarnya saja.

<!-- Menetapkan ukuran gambar berdasarkan lebar -->
<img src="https://raw.githubusercontent.com/dicodingacademy/BelajarDasarPemrogramanWeb/099-shared-files/dicoding-logo.png" alt="Logo Dicoding" width="500px">

Hasilnya berikut.

Opsi lainnya, kita juga bisa tetapkan ukuran gambar berdasarkan tingginya. Dengan begitu nilai lebar akan menyesuaikan nilainya berdasarkan rasio gambar aslinya.

<!-- Menetapkan ukuran gambar berdasarkan tinggi -->
<img src="https://raw.githubusercontent.com/dicodingacademy/BelajarDasarPemrogramanWeb/099-shared-files/dicoding-logo.png" alt="Logo Dicoding" height="100px">

Hasilnya berikut.

Bagaimana, canggih bukan? Oh iya, gambar tentu perlu waktu lebih untuk tampil di browser. Jadi, tentukanlah ukuran sesuai kebutuhan.

Latihan: Menambahkan Gambar pada Halaman Profil

Betapa bahagianya! Kini tidak hanya tulisan lagi yang ditampilkan, kita sudah belajar cara menambahkan elemen gambar pada halaman web. Nah, kami telah menyiapkan beberapa aset gambar untuk proyek studi kasus kita tentunya. Yuk, berlatih lagi!

Tujuan

Pada latihan terakhir, kita berhasil menambahkan navigation list pada Halaman Profil. Lebih lanjut lagi, halaman tersebut akan kita kembangkan lagi dengan menambahkan elemen gambar dalam setiap topik pembahasan.

Hasil akhir pada latihan ini akan seperti gambar berikut.

Alur Latihan

Berikut adalah alur latihan kali ini.

Membuka hasil latihan terakhir dengan VSCode.
Mengunduh dan memindahkan aset-aset gambar yang telah disediakan pada proyek.
Menambahkan elemen gambar pada beberapa topik.
Menjalankan dokumen HTML pada browser.

Latihan Menambahkan Gambar pada Halaman Profil

Silakan ikuti dan simak beberapa langkah berikut untuk mengikuti latihan dengan baik.

Silakan buka proyek Halaman Profil terakhir dengan VSCode. Jika belum memilikinya, silakan Anda unduh dan buka proyek tersebut pada GitHub repository ini.
Karena kita akan menampilkan elemen-elemen gambar, silakan unduh aset-aset gambar yang digunakan pada halaman-profil-bandung-images.zip.
Jika sudah, silakan pindahkan berkas hasil unduhan pada halaman proyek. Pastikan berkas diletakkan sejajar dengan berkas index.html.
Lakukan ekstraksi berkas halaman-profil-bandung-images.zip dengan cara berikut.
1. Klik kanan dan tekan tombol “Extract All...”.
2. Window berjudul “Select a Destination and Extract Files” akan muncul untuk menanyakan lokasi ekstraksi. Kali ini, kita akan langsung menekan tombol “Extract”.
3. Proses ekstraksi akan berjalan dan folder dengan nama halaman-profil-bandung-images akan muncul. Ini merupakan nama dari berkas zip. Jika isi folder tersebut terdapat folder lagi yang bernama “halaman-profil-bandung-images”, silakan pindahkan berkas tersebut keluar dari folder hasil ekstraksi ini.
Sampai dengan langkah ini, berkas halaman-profil-bandung-images.zip sudah tidak digunakan dan bisa dihapus. Seharusnya, isi dari folder WebDasar menjadi seperti gambar berikut.
Sebelum lanjut, pastikan isi folder assets → image ada empat buah berkas gambar. Berkas-berkas ini yang akan kita tampilkan dalam halaman web.
Pada folder WebDasar, kita sudah memiliki dua isi, yaitu folder bernama “halaman-profil-bandung-images” dan berkas index.html. Silakan ubah dulu nama folder “halaman-profil-bandung-images” menjadi “assets”. Tujuannya hanya untuk mempermudah pemanggilan folder saja ketika digunakan.

Jika aset gambar sudah siap, mari kita terapkan pembelajaran elemen <img> pada proyek ini. Silakan buka berkas index.html dan tambahkan elemen-elemen gambar di bawah elemen heading sesuai kontennya masing-masing. Kode yang perlu ditambahkan memiliki cetakan tebal.

<!DOCTYPE html><html>
  <head>
    <!-- Kode disembunyikan... -->
  </head>
  <body>
    <!-- Kode disembunyikan... -->
 
    <h2>Sejarah</h2>
    <img src="assets/image/history.jpg" alt="Sejarah" />
 
    <!-- Kode disembunyikan... -->
 
    <h2>Geografis</h2>
    <img src="assets/image/geografis.jpg" alt="Geografis" />
 
    <!-- Kode disembunyikan... -->
 
    <h3>Farm House Lembang</h3>
    <img src="assets/image/farm-house.jpg" alt="Farm house" />
    <p>
      <!-- Kode disembunyikan... -->
    </p>
 
    <h3>Observatorium Bosscha</h3>
    <img src="assets/image/bosscha.jpg" alt="Bosscha" />
    <p>
      <!-- Kode disembunyikan... -->
    </p>
  </body>
</html>

Perhatikan penulisan nilai dari atribut src. Penulisannya sedikit berbeda dengan yang telah kita pelajari. Penulisan alamat gambar tidak menggunakan URL dari suatu domain (misalnya “https://www.example.com/image.jpg”). Namun, kita menggunakan relative URL di sini. URL yang merupakan lokasi sumber gambar yang relatif terhadap lokasi berkas index.html. Hal ini karena kita menggunakan gambar lokal yang ada dalam proyek pekerjaan kita sehingga penulisan path-nya mengarah ke lokasi dari berkas gambar tersebut.
Setelah menambahkan elemen gambar, halaman akan tampak seperti gambar berikut.
Selamat! Anda sudah berhasil menerapkan elemen gambar pada Halaman Profil. Kontennya sudah menjadi lebih menarik, bukan?

Bedah Kode

Pada latihan ini, kita telah melakukan perubahan yang sangat berarti. Halaman Profil yang telah dikembangkan kembali sudah memiliki gambar di dalamnya. Konten yang disajikan semakin lengkap dan menarik. Yuk, kita bahas tahapan yang telah kita lakukan selama latihan.

Menambahkan Konten Gambar

Sebagaimana telah dipelajari sebelumnya, elemen gambar bisa diciptakan dengan kode berikut.

<img src="path/ke/sumber/gambar.jpg" alt="Teks alternatif untuk gambar">

Elemen image tidak memiliki tag pasangan untuk bekerja dengan baik. Ada satu atribut wajib dan satu atribut opsional, yaitu src dan alt. Namun, atribut alt sangat direkomendasikan untuk disertakan nilainya meskipun opsional.

Atribut	Keterangan
src	Menentukan sumber gambar yang akan ditampilkan, baik menggunakan relative URL atau absolute URL.
alt	Memberikan alternatif data yang ditampilkan saat gambar tidak berhasil dimuat (error).

Absolute URL vs. Relative URL

Dalam menentukan sumber gambar untuk elemen <img>, kita tidak wajib menerapkan absolute URL sebagaimana pada materi sebelumnya. Itu disebabkan kita memanggil URL melalui suatu server lain sehingga perlu menyebutkan alamat URL secara lengkap. Ini disebut sebagai absolute URL.

Bagi yang memiliki gambar tersimpan secara lokal–tersimpan dalam satu folder proyek, kita dapat memanggil sumber gambar tersebut menggunakan relative URL. Kita hanya perlu mengarahkan path yang sesuai relatif terhadap letak index.html.

Perhatikan struktur berkas berikut sebagai contohnya.

Untuk memanggil gambar bernama “bosscha.jpg” dan menggunakan metode relative URL, kita membutuhkan penulisan kode berikut.

<img src="assets/image/bosscha.jpg" alt="Observatorium Bosscha">

Bagaimana jika gambar yang diberikan tidak berhasil ditampilkan? Alternatif tekslah yang akan ditampilkan.

Itulah pembahasan mengenai penerapan elemen gambar pada Halaman Profil. Seperti biasa, ada beberapa referensi yang dapat menambah pengetahuan Anda terkait gambar di HTML.

Bersambung ke:

Search This Blog

Full-Stack Web Developer