Belajar Dasar Pemrogaman Web Secara Terstrukur (Modul 3: More About HTML) bagian 1 (1-10)

Modul 3: More About HTML
Daftar Isi :

1. Atribut HTML
2. Paragraf
3. Heading
4. List
5. Menambahkan List pada Halaman Profil
6. Gambar
7. Menambahkan Gambar pada Halaman Profil
8. Teks Terformat
9. Inline Formatting Text - Bagian 1
10. Inline Formatting Text - Bagian 2
11. Menerapkan Anchor pada Navigasi Halaman Profil
12. Semantic HTML - Mengorganisasikan Halaman Konten
13. Header, Footer, dan Nav
14. Articles, Aside, dan Section
15. Generic Element
16. Mengorganisasikan Konten pada Halaman Profil
17. Menetapkan Elemen Header, Main, dan Footer
18. Menggunakan Div, Aside, Article, dan Section pada Konten
19. Table
20. Struktur Dasar Sebuah Tabel
21. Spanning Cell
22. Elemen dan Atribut pada Tabel
23. Menerapkan Elemen Tabel pada Halaman Profil
24. Special Character

More About HTML

Pada modul sebelumnya, kita sudah menyiapkan sebuah konten, menambahkan elemen dasar sebuah berkas HTML (html, head, title, dan body) dan kita mengidentifikasi sebagian konten. Pada materi ini kita akan berkenalan lebih dalam mengenai elemen yang ada pada HTML. Sehingga, kita dapat memilih elemen yang sesuai dalam menampilkan sebuah konten pada website yang akan kita bangun nantinya.

Dalam modul ini kita akan mempelajari bagaimana cara menambahkan elemen seperti paragraf, heading, gambar, list, format teks, hingga menerapkan struktur layout dasar menggunakan elemen dengan pendekatan semantic HTML.

Pada akhir modul ini kita akan membuat halaman website yang menerapkan gambar, list, serta elemen lainnya.

1. Attribute HTML

Pada modul sebelumnya kita sudah mengenal berbagai macam elemen. Elemen dituliskan dengan awalan tag pembuka <> dan diakhiri dengan tag penutup </>. Ada satu hal lagi yang bisa kita tuliskan pada sebuah elemen, lebih tepatnya pada sebuah tag pembuka, yaitu Attribute. Atribut ini berfungsi memberikan informasi tambahan pada sebuah elemen. Atribut dituliskan pada tag pembuka sebuah elemen setelah nama dari elemennya tersebut ditulis. Contohnya:

<p lang="id">Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.</p>

Pada contoh kode tersebut, kita menetapkan artibut bahasa (dengan penulisan lang) dengan nilai “id” atau Indonesia (kode bahasa bisa kita explore pada link berikut: https://www.w3schools.com/tags/ref_language_codes.asp) pada sebuah elemen paragraf.

Belajar Dasar Pemrogaman Web Secara Terstrukur (Modul 3: More About HTML)

Untuk menuliskan sebuah atribut kita memerlukan nama dari atribut itu diikuti dengan nilai atribut tersebut dalam bentuk string (Dituliskan dalam tanda kutip dua). Untuk lebih jelasnya, perhatikan gambar berikut:

Atribut pada elemen juga dapat dituliskan lebih dari satu. Kita bisa menuliskan kembali seluruh struktur atribut di samping dari atribut yang sudah ada. Contohnya pada elemen paragraf di atas, kita akan memberikan sebuah atribut translate, sehingga penulisannya menjadi seperti ini:

<p lang="id" translate="no">Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.</p>

Dengan menambahkan atribut translate dan memberikan nilai “no” pada elemen paragraf tersebut, maka konten dari elemen yang dimaksud tidak akan diterjemahkan oleh layanan sistem translate otomatis seperti Google Translate.

Lantas atribut apa saja yang dapat digunakan pada elemen HTML? Pada elemen HTML terdapat dua jenis atribut, yaitu Global Attribute dan atribut yang hanya bisa digunakan pada elemen tertentu. Untuk atribut yang spesifik pada sebuah elemen, kita akan mengulasnya pada pembahasan elemen tersebut. Untuk Global Attribute, berikut daftar atribut yang bisa kita gunakan di seluruh elemen HTML.

Attribute	Description
accesskey	Menentukan tombol shortcut untuk mengaktifkan/memfokuskan pada sebuah element.
class	Menentukan satu atau lebih classname untuk sebuah elemen.
contenteditable	Menentukan konten dari elemen merupakan konten yang dapat diubah atau tidak.
data-*	Digunakan untuk menyimpan sebuah data pribadi khusus ke halaman atau aplikasi.
dir	Menentukan arah teks untuk konten pada suatu elemen.
draggable	Menentukan apakah suatu elemen dapat di-drag atau tidak.
dropzone	Menentukan apakah data yang di-drag adalah data yang disalin, dipindahkan, atau ditautkan saat dijatuhkan.
hidden	Menentukan apakah suatu elemen ditampilkan atau tidak pada browser.
id	Menetapkan id pada elemen.
lang	Menentukan bahasa pada konten elemen.
spellcheck	Menentukan apakah elemen harus diperiksa ejaannya dan tata bahasanya atau tidak.
style	Menentukan styling secara satu baris untuk suatu elemen.
tabindex	Menentukan urutan dari suatu elemen.
title	Menentukan informasi tambahan tentang suatu elemen.
translate	Menentukan apakah konten elemen harus diterjemahkan atau tidak.

2. Paragraf

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

<p>Kata Bandung berasal dari kata bendung atau bendungan karena terbendungnya sungai Citarum 















oleh lava







Gunung Tangkuban Parahu yang lalu membentuk telaga...</p>







<p>Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat Nga-Bandung-an Banda Indung, yang















merupakan kalimat sakral dan luhur karena mengandung nilai ajaran Sunda. Nga-Bandung-an artinya







menyaksikan atau bersaksi...</p>

Belajar Dasar Pemrogaman Web Secara Terstrukur (Modul 3: More About HTML)

Ketika menggunakan paragraf pada browser, teks selalu ditampilkan dengan garis baru dan terdapat sedikit jarak (space) antar elemennya. Jarak tersebut nantinya bisa kita atur ketika sudah menerapkan styling.

Paragraf dapat terdiri dari teks, elemen gambar, dan inline element lainnya. Tetapi hindarilah penggunaan element paragraf untuk konten seperti heading atau list, karena terdapat elemen lain yang lebih tepat untuk digunakan.

“Pastikan kita selalu menggunakan elemen (tags) dalam seluruh teks yang ada pada dokumen. Teks yang berada pada dokumen HTML tanpa tags disebut “anonymous text” dan ini dapat menyebabkan dokumen HTML menjadi tidak valid.”

3. Heading

Pada modul sebelumnya, kita sudah melihat contoh penggunaan header yang diterapkan pada konten yang kita siapkan. Kita menggunakan <h1> dan <h2> dalam mengindikasi judul dan sub judul di dalam kontennya. Pada HTML terdapat <h1> hingga <h6> elemen heading yang dapat kita gunakan.

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

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

<h1>Bandung</h1>







<h2>Geografis</h2>







<p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan sebuah mangkok raksasa</p>







<h2>Wisata</h2>



dari Jakarta sekitarnya.</p>







<p>Kota Bandung telah menjadi tujuan utama dalam menikmati liburan akhir pekan terutama dari masyarakat yang berasal



<p>Berada di jalur utama Bandung-Lembang, Farm House menjadi objek wisata yang tidak pernah sepi pengunjung.</p>







<h3>Farm House Lembang</h3>



<h4>Lokasi</h4>

spot swafoto Instagramable.</p>



<h4>Kondisi</h4>

<p>Selain karena letaknya strategis, kawasan ini juga menghadirkan nuansa wisata khas Eropa. Semua itu diterapkan dalam



bentuk

<h3>Observatorium Bosscha</h3>

Cassegrain GOTO, dan Teleskop Surya.</p>







<p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss, Schmidt Bimasakti, Refraktor Bamberg,

Dari penggunaan elemen heading pada konten tersebut, maka kita bisa membuat garis besar dokumen seperti berikut:

Belajar Dasar Pemrogaman Web Secara Terstrukur (Modul 3: More About HTML)

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

Belajar Dasar Pemrogaman Web Secara Terstrukur (Modul 3: More About HTML)

4. List

Seperti 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 atau daftar yang struktur sekalipun.

Pada HTML terdapat tiga tipe list:

• Unordered lists : daftar yang ditampilkan tidak memiliki urutan.
• Ordered lists : daftar yang ditampilkan secara terurut.
• Description lists : daftar yang terbuat dari beberapa istilah diikuti dengan deskripsi dari istilah tersebut.

Unordered List

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

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

<ul>







<li>Item 1</li>







<li>Item 2</li>



<li>Item 4</li>







<li>Item 3</li>



</ul>

Ketika kita membukanya pada browser, maka akan nampak seperti ini:

Di antara tag elemen <li>, kita dapat mengisikan konten apapun termasuk elemen HTML lain. Contohnya kita dapat memasukan sebuah heading atau paragraf pada item.

<ul>







<li><h1>Sebuah Heading sebagai item list</h1></li>







<li><h2>Sebuah Heading level 2 sebagai item list</h2></li>







<li><p>Sebuah paragraf sebagai item list</p></li>



</ul>

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

Kita juga bisa menyimpan kembali elemen <ul> untuk membuat sebuah nested list.

<ul>







<li>List item 1</li>







<li>List item 2</li>



<ul>







<li>List item 3



<li>List item 3.2</li>







<li>List item 3.1</li>



</li>







<li>List item 3.3</li>



</ul>

</ul>







<li>List item 4</li>

Ordered List

Ordered list digunakan untuk membuat list yang mementingkan urutan. Contohnya, membuat daftar instruksi langkah demi langkah sehingga dibutuhkan urutan yang sesuai. Ordered list bekerja seperti unordered list, namun perbedaanya pada tiap item menampilkan angka bukan sebuah bullet. Angka yang ditampilkan, otomatis berurut tiap itemnya, sehingga kita tidak perlu menuliskan secara kasar urutan nomornya. Hal ini tentu mempermudah kita untuk mengorganisir tiap itemnya.

Untuk menetapkan konten sebagai ordered list kita gunakan <ol></ol>. Sama seperti Unordered list, tiap item dalam list ditetapkan dengan menggunakan tags <li></li>.

<ol>







<li>Langkah pertama</li>







<li>Langkah kedua</li>



<li>Langkah selanjutnya</li>







<li>Langkah ketiga</li>



</ol>

Ketika kita membukanya pada browser, maka akan nampak seperti ini:

List

Sama seperti pada unordered list, di antara tag elemen <li> kita dapat mengisikan konten apapun termasuk elemen HTML lain.

Pada ordered list, tipe urutan angkanya dapat kita atur melalui sebuah atribut type. Contohnya, selain nomor urutan angka dapat menggunakan alfabet ataupun angka romawi.

<ol type="I">







<li>Langkah pertama</li>







<li>Langkah kedua</li>



<li>Langkah selanjutnya</li>







<li>Langkah ketiga</li>



</ol>

<ol type="A">

<li>Langkah kedua</li>







<li>Langkah pertama</li>



<li>Langkah ketiga</li>



</ol>







<li>Langkah selanjutnya</li>

List

Berikut 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
i	Menggunakan huruf romawi kecil dalam urutan item
I	Menggunakan huruf romawi besar dalam urutan item

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

<ol start="7">







<li>Langkah ketujuh</li>







<li>Langkah kedelapan</li>







<li>Langkah kesembilan</li>







<li>Langkah selanjutnya</li>







</ol>

Maka hasilnya list akan dimulai dengan nilai urutan ke-7.

List

Normalnya urutan list diawali dengan urutan paling rendah dengan menambahkan atribut reversed pada elemen <ol> maka urutan dalam sebuah list akan dibalik. Atribut ini berbeda dengan atribut yang lain (yang sudah dibahas sebelumnya), atribut ini tidak memerlukan sebuah nilai ketika menggunakannya. Atribut ini hanya menandakan sebuah list untuk membalikan urutan angka pada tiap itemnya.

List

5. Menambahkan List Pada Halaman Profil

Setelah mempelajari penerapan list pada HTML, sekarang kita coba terapkan elemen list yang berperan sebagai navigasi pada halaman profil yang sebelumnya sudah kita buat.

“Pada langkah ini dan selanjutnya, Sebaiknya gunakanlah teks editor yang disarankan pada modul text editor agar proses penulisan dan pengelolaan berkas HTML dapat lebih cepat”.

Silakan buka kembali berkas index.html pada teks editor. Tambahkan elemen unordered list di bawah dari elemen paragraf pertama pada berkas HTML sebagai berikut.

…………..







<body>



<h1>Bandung</h1>







<p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.</p>







<ul>



<li>Sejarah</li>



<li>Geografis</li>



<li>Wisata</li>

<h2>Sejarah</h2>



</ul>

……...

Sehingga pada browser akan menampilkan list seperti ini.

Menambahkan List Pada Halaman Profil

6. 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, 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. Tetapi untuk menetapkan gambar yang ditampilkan kita gunakan sebuah atribut. Contohnya seperti ini:

<img src="https://i.imgur.com/EUUXQcf.png" alt="dicoding">

Gambar

Maka gambar akan ditampilkan pada browser seperti ini:

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

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

Yang pertama, atribut src. Atribut ini berfungsi sebagai sumber dari gambar yang ditampilkan. Atribut ini dapat bernilai url gambar atau path gambar lokal dari gambar yang digunakan.

Selanjutnya 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 gambaran dari gambar yang ditampilkan dalam bentuk tulisan. Sehingga ketika gambar gagal ditampilkan maka akan memunculkan teks alternatif yang dapat mewakili arti dari gambar tersebut.

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

Mengatur ukuran pada gambar

Gambar

Untuk mengatur ukuran gambar yang ditampilkan 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, maka gambar yang ditampilkan tidak akan proporsional.

<img src="https://i.imgur.com/EUUXQcf.png" alt="dicoding" width="500px" height="200px"> <!-- Jangan lakukan ini! -->

Gambar

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://i.imgur.com/EUUXQcf.png" alt="dicoding" width="500px">

Gambar

Atau kita 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://i.imgur.com/EUUXQcf.png" alt="dicoding" height="100px">

Gambar

Gambar tentu lebih perlu waktu untuk tampil di browser, sehingga tentukanlah ukuran sesuai kebutuhan.

7. Menambahkan Gambar pada Halaman Profil

Setelah mempelajari penerapan list pada HTML, sekarang kita coba terapkan elemen gambar konten yang terdapat di halaman profil yang sebelumnya sudah kita buat.

Sebelum menerapkannya, silakan unduh resource gambar yang digunakan pada latihan melalui tautan berikut: assets.zip

Pindahkan berkas yang sudah diunduh pada folder yang sama dengan berkas index.html.

Menambahkan Gambar pada Halaman Profil

Kemudian lakukan ekstraksi pada berkas assets.zip tersebut dengan melakukan Klik Kanan -> Extract Here.

Jika berhasil, akan terbentuk folder dengan nama assets. Sampai langkah ini, berkas assets.zip sudah tidak digunakan. Kita bisa menghapusnya.

Menambahkan Gambar pada Halaman Profil

Pastikan di dalam folder assets -> image terdapat empat berkas gambar yang akan kita gunakan pada latihan.

Menambahkan Gambar pada Halaman Profil

Silakan buka kembali berkas index.html pada teks editor. Tambahkan elemen gambar di bawah elemen heading sesuai kontennya masing-masing.

<body>



……

<h2>Sejarah</h2>



<img src="assets/image/history.jpg" alt="sejarah">



…….

<h2>Geografis</h2>

<img src="assets/image/geografis.jpg" alt="geografis">



…….

<h2>Wisata</h2>
…….



<h3>Farm House Lembang</h3>

<h3>Observatorium Bosscha</h3>



<img src="assets/image/farm-house.jpg" alt="farm house">
…….



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





…….

Perhatikan penulisan nilai dari atribut src. Penulisan sedikit berbeda dengan yang telah kita pelajari. Penulisan alamat gambar tidak dimulai dengan https://www, karena kita menggunakan gambar lokal yang ada pada project kita. Sehingga untuk penulisan path-nya mengarah ke lokasi dari berkas gambar tersebut.

Setelah menambahkan elemen gambar, maka halaman akan nampak seperti ini pada browser.

Menambahkan Gambar pada Halaman Profil

8. Teks Terformat

Sejauh ini, kita sudah mengenal paragraf, heading dan juga list pada HTML. Tapi masih ada beberapa lagi yang merupakan spesial teks format yang dapat kita gunakan yaitu <blockqoute>, <pre>, dan <figure>.

Long quotations

Jika pada konten kita memiliki sebuah kutipan ataupun sebuah testimonial, kita dapat gunakan format long quotations dengan menggunakan tags <blockquote>. Konten di dalam elemen <blockquote> ini dapat berupa sebuah paragraf, heading, ataupun list.

<blockquote>

<p>Situs web (bahasa Inggris: website) adalah sekumpulan halaman web yang saling berhubungan yang umumnya   berada pada peladen yang sama berisikan kumpulan informasi yang disediakan secara perorangan, kelompok, atau organisasi.</p>

</blockquote>

Berikut tampilan standar ketika kita sebuah konten berada di dalam <blockquote>.

Teks Terformat

Pada elemen ini kita dapat menggunakan atribut cite untuk menentukan sumber URL dari sebuah kutipan (Jika kutipan tersebut bersumber dari sebuah situs website).

<blockquote cite="https://id.wikipedia.org/wiki/Situs_web">

<p>Situs web (bahasa Inggris: website) adalah sekumpulan halaman web yang saling berhubungan yang umumnya berada pada peladen yang sama berisikan kumpulan informasi yang disediakan secara perorangan, kelompok, atau organisasi.</p>

</blockquote>

Preformatted text

Pada modul sebelumnya, kita sudah mengetahui bahwa HTML akan mengabaikan penulisan spasi yang dituliskan secara berulang dan juga line breaks (baris baru). Tetapi pada beberapa tipe konten seperti contoh kode atau puisi hal tersebut sangat berarti. Dengan begitu, terdapat sebuah elemen yang dapat kita gunakan untuk menampilkan konten sesuai yang kita tulis pada text editor. Untuk menggunakannya, kita gunakan elemen <pre> sebagai pembungkus kontennya. Perhatikan contoh berikut:

<pre>

SAJAK PUTIH

Bersandar pada tari warna pelangi
Kau depanku bertudung sutra senja

Di hitam matamu kembang mawar dan melati
Harum rambutmu mengalun bergelut senda


Dan dalam dadaku memerdu lagu
Sepi menyanyi, malam dalam mendoa tiba
Meriak muka air kolam jiwa

Selama matamu bagiku menengadah
Menarik menari seluruh aku

Hidup dari hidupku, pintu terbuka

Karya : Chairil Anwar
Selama kau darah mengalir dari luka
Antara kita Mati datang tidak membelah...


</pre>

Sehingga pada browser akan menampilkan hasil yang sama seperti yang kita tuliskan.

Teks Terformat

Figure

Elemen ini digunakan untuk merepresentasikan konten tersendiri (self-contained content) seperti ilustrasi, diagram, foto atau bisa juga sebuah baris kode. Banyak hal yang dapat digunakan dalam elemen ini.

Elemen ini digunakan untuk mengkelompokkan blok konten yang dapat dipindahkan posisinya dari blok utama sebuah dokumen tanpa mempengaruhi arti dari induk dokumen.

Di dalam elemen figure kita dapat menuliskan elemen <figcaption> sebagai sebuah caption (judul) untuk konten tersebut. Berikut contoh penggunaan figure pada sebuah konten gambar.

<p>Dicoding adalah sebuah perusahaan startup yang bertujuan mengembangkan ekosistem developer di Indonesia.

Berdiri sejak 5 Januari 2015, Dicoding memiliki platform pembelajaran elektronik di laman Dicoding.com.</p>
<figure>
    <img src="https://i.imgur.com/cs2BJzw.jpg" alt="dicoding" width="200px">

<p>Materi perdana yang menjadi magnet dari awal berdirinya Dicoding hingga kini adalah kelas Menjadi Android Developer
<figcaption>Dicoding</figcaption>
</figure>

Ahmad Imaduddin. Seperti halnya kelas Picodiploma lain, modul online-nya juga hadir dalam bentuk buku berjudul sama
Expert. Kelas ini dikembangkan oleh Google Developer Expert in Android, Sidiq Permana dan Head of Dicoding Academy,

yang telah mendapatkan ijin dan ISBN.</p>

Teks Terformat

Contoh lainnya, figure ini dapat kita gunakan untuk markup sebuah konten puisi.

<figure>
<pre>

SAJAK PUTIH

Bersandar pada tari warna pelangi
Kau depanku bertudung sutra senja

Di hitam matamu kembang mawar dan melati
Harum rambutmu mengalun bergelut senda


Dan dalam dadaku memerdu lagu
Sepi menyanyi, malam dalam mendoa tiba
       Meriak muka air kolam jiwa

Selama matamu bagiku menengadah
Menarik menari seluruh aku

       Hidup dari hidupku, pintu terbuka

<figcaption>Sajak Putih oleh Charil Anwar</figcaption>
Selama kau darah mengalir dari luka
       Antara kita Mati datang tidak membelah...
   </pre>

</figure>

Teks Terformat

9. Inline Formatting Text - Bagian 1

Kita sudah belajar mengidentifikasi penggunaan elemen pada konten yang major (besar) dengan menerapkan semantic HTML untuk mengorganisasikan kontennya. Sekarang kita akan mengenal beberapa formatting text yang digunakan dalam sebuah baris teks (inline text).

Sebelum menjelaskan elemen inline untuk formatting text yang dapat digunakan, sepertinya kita perlu membahas sekilas mengenai block dan inline.

Standarnya elemen HTML memiliki dua sifat yaitu block dan inline. Elemen yang memiliki sifat block selalu membuat baris baru ketika menampilkannya, contohnya seperti elemen paragraf, list, heading, dan lainnya. Berlawanan dengan elemen yang memiliki sifat inline, elemen ini tidak menambahkan baris baru ketika dibuat. Apa saja elemen tersebut? Mari kita bahas satu persatu.

Anchor

Apa itu anchor? Anchor (jangkar) merupakan elemen yang digunakan untuk membuat sebuah hyperlink ke halaman atau website lain, file, alamat email, atau URL lainnya. Untuk menggunakan elemen ini kita gunakan tag <a>...</a> bersama dengan atribut href untuk menetapkan sebuah target yang akan dituju.

<p>Hubungi kami di</p>
<ul>
   <li><a href="https://example.com">Website</a></li>
   <li><a href="mailto:info@example.com">Email</a></li>
   <li><a href="tel:+62123456">Telepon</a></li>
   <li><a href="#address">Alamat</a></li>
</ul>

Selain atribut href, terdapat beberapa khusus yang dapat digunakan pada elemen ini, antara lain:

Atribut	Nilai	Deskripsi
download	filename	Menginstruksikan browser untuk mengunduh pada URL yang ditetapkan daripada mengarahkannya.
href	URL	Menetapkan target yang akan diarahkan/unduh ketika pengguna menekan hyperlink.
hreflang	language_code	Menetapkan bahasa dari dokumen target.
ping	list_of_URLs	Menetapkan URL yang akan diberitahu dengan mengirimkan post request ping pada body oleh browser (berjalan di belakang layar) ketika target URL pada hyperlink ditekan. Biasanya atribut ini digunakan untuk pelacakan.
referrerpolicy	no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url	Menetapkan referensi untuk dikirim pada target.
rel	alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, noopener, prev, search, tag	Menetapkan hubungan antara halaman yang ditampilkan dengan target.
target	_blank, _parent, _self, _top	Menetapkan lokasi ketika membuka target contohnya pada sebuah tab, window atau pada tab itu sendiri.
media	media_type	Menetapkan tipe media yang digunakan pada target.

Emphasized text

Gunakan elemen <em> untuk menunjukan bagian kata yang perlu kita tekankan. Elemen ini menunjukan stress emphasis atau konten/kata yang perlu mendapatkan penekanan atau perhatian khusus. Berikut contoh penggunaannya.

<p><em>Oding</em> adalah seorang pelajar</p>
<p>Dia adalah seorang <em>pelajar</em></p>

Pada kalimat pertama, penekanan terdapat pada “siapa” seorang pelajar. Sedangkan pada kalimat kedua, penekanan terdapat pada “apa” yang sedang ditekuni oleh Oding.

Standarnya pada browser sebuah kata yang ditekankan akan ditampilkan dalam gaya miring pada teks nya.

Important text

Gunakan elemen <strong> untuk menunjukan sebuah teks yang begitu penting (strong importance), serius, ataupun mendesak. Dalam arti teks tersebut harus dapat perhatian lebih dari teks biasa lainnya.

<p>Kesehatan merupakan hal yang penting, jaga pola makan yang teratur dan <strong>jangan sampai makan tengah
   malam!</strong></p>

Inline Formatting Text - Bagian 1

Standarnya pada browser sebuah teks yang diberi markup <strong> akan ditampilkan secara tebal. Dan ketika pengguna menggunakan pembaca layar (screen reader), suara yang terdengar akan berbeda. Ini mengartikan bahwa teks tersebut penting tidak hanya sekedar tebal.

Short quotations

Gunakan elemen <q> untuk menandai sebuah kutipan dalam sebuah teks. Elemen short quations berbeda dengan <blockquote>. Elemen ini digunakan untuk kutipan pendek yang terletak di dalam baris (inline).

<p>Sebelum pulang kerja, ia berkata kepadaku: <q>Maaf saya tidak bisa hadir dalam pertemuan nanti</q></p>

Inline Formatting Text - Bagian 1

Standarnya pada browser sebuah teks yang diberi markup <q> akan ditampilkan di dalam tanda kutip (Quotation marks).

10. Inline Formatting Text - Bagian 2

Selain sebuah atribut, <cite> juga merupakan sebuah elemen yang digunakan untuk sebuah rujukan pada sebuah dokumen, contohnya sebuah buku, majalah, artikel dan lainnya.

<p>Informasi selengkapnya bisa Anda dapatkan di <cite><a href="https://dicoding.com">dicoding.com</a></cite>.</p>

Standarnya pada browser sebuah teks yang diberi markup <cite> akan ditampilkan dengan garis miring (italic).

Defining terms

Elemen <dfn> digunakan ketika mendefinisikan sebuah istilah (term). Elemen ini harus terletak pada elemen lain yang menaunginya. Contohnya pada sebuah elemen <p> atau elemen <section>. Berikut contoh penggunaannya:

<p><dfn>Website</dfn> merupakan halaman yang menampilkan informasi melalui teks atau gambar. Website dapat diakses melalui internet dengan menggunakan browser.</p>

Standar pada browser yakni sebuah teks yang diberi markup <dfn> akan ditampilkan dengan garis miring (italic).

Subscript dan Superscript

Subscript <sub> dan superscript <sup> merupakan elemen yang dapat membuat teks yang ditampilkan nampak kecil, dengan posisi di bawah (sub) atau di atas (sup) dari teks biasanya. Elemen ini digunakan untuk menunjukan sebuah rumus kimia ataupun matematika.

<p>Sukrosa merupakan suatu disakarida yang dibentuk dari monomer-monomernya yang berupa unit glukosa dan fruktosa,dengan rumus molekul C<sub>12</sub>H<sub>22</sub>O<sub>11</sub>.</p>

<p>Salah satu persamaan paling umum dalam semua fisika adalah E=MC<sup>2</sup></p>

Jika kita lihat pada browser, tampilan akan tampak seperti ini:

Highlighted text

Untuk menandai atau menyorot sebuah teks kita bisa menggunakan elemen <mark>. Elemen ini digunakan ketika terdapat sebuah teks yang memiliki peran penting, biasanya teks tersebut merupakan bagian yang paling relevan atau penting dalam sebuah konteks kalimat.

<p>Ini adalah periode perang saudara. Pesawat ruang angkasa pemberontak, menyerang dari pangkalan tersembunyi, telah
   memenangkan kemenangan pertama mereka melawan Kekaisaran Galactic yang jahat. Selama pertempuran,
   <mark>mata-mata
       Pemberontak berhasil mencuri rencana rahasia
   </mark>
   ke senjata pamungkas Kekaisaran, STAR DEATH, stasiun ruang angkasa
   berlapis baja dengan kekuatan yang cukup untuk menghancurkan seluruh planet.
</p>

Standarnya pada browser teks yang diberi markup <mark> akan ditampilkan dengan background kuning dan teks hitam.

Line Break

Terkadang kita mungkin perlu menambahkan sebuah baris baru pada sebuah baris teks (termasuk di dalam paragraf), tetapi kita mengetahui bahwa browser akan mengabaikan sebuah penulisan spasi ganda ataupun garis baru, sehingga kita memerlukan sebuah tanda yang dapat digunakan untuk memberitahu browser untuk “Tambahkan garis baru di sini!”.

Inline line break element atau <br> dapat digunakan untuk memberitahu browser untuk memberikan sebuah garis baru pada baris teks. Sama seperti gambar, elemen ini merupakan elemen kosong sehingga kita tidak membutuhkan sebuah tag penutup.

<p>
   Dicoding Space,<br>
   Jln. Batik Kumeli No. 50.<br>
   Bandung.<br>
   40123
</p>

Jika kita lihat pada browser, maka tampilan akan tampak seperti ini:

Belajar Dasar Pemrogaman Web Secara Terstrukur (Modul 3: More About HTML) bagian 2