PENGENALAN DASAR HTML | Paragraph (Bagian 2)

pada tanggal

Halo semuanya, kali ini bakal sharing tentang basic HTML. Seperti biasa, topik akan dibagi menjadi beberapa post agar tidak terlalu panjang dan lebih mudah di cari kalau hanya butuh bagian tertentunya. Tetap nantikan post selanjutnya ya.

Post kedua berisi mengenai basic HTML dalam pembuatan konten berbentuk paragraf. 

Untuk mempermudah dan mempersingkat penjelasan, simak snippet code berikut. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html>
  <body>
    <!-- Write your comments here -->
    <h1>Ini judul dengan Headings 1</h1>
    <p>Ini paragraf pertama dengan text <b>tebal</b> dan text <i>miring</i>.</p>
    <br>
    <a href="https://funtastic-share.blogger.com">Hyperlink Blog</a>
    <img src="funtasticshare.jpg" alt="gambar" width="104" height="142">
  </body>
</html>

Penjelasan tiap baris code:

  1. Deklarasi wajib untuk mendefinisikan tipe dokumen. Hal ini dilakukan untuk mempermudah browser menampilkan halaman web dengan benar.
  2. Tag pembuka dokumen HTML.
  3. Tag pembuka dokumen HTML body. HTML bagian body ini yang akan tertampil pada web browser.
  4. Digunakan untuk menulis comment atau catatan. Comment berguna untuk memberikan informasi mengenai code selanjutnya agar lebih mudah dicari dan dipelajari. Selain itu, comment juga bisa digunakan sebagai alat debugging jika terjadi error atau kesalahan ketika membuat code. Perlu diperhatikan, terdapat simbol "!" pada tag pembuka namun tidak ada pada tag penutup.
  5. Element headings. Headings digunakan untuk kata yang penting dan harus lebih besar dari lainnya, misalnya judul. Headings dapat dipilih berdasarkan ukurannya. Secara berurutan dari besar ke kecil yaitu h1, h2, h3, h4, h5, dan h6.
  6. Element paragraf. Digunakan untuk content paragraf. Pada element ini, terdapat element lainnnya yaitu element huruf tebal (bold) dan huruf miring (italic). Beberapa element huruf lainnya yang biasa digunakan yaitu huruf subscript (dengan tag "<sub>"), superscript (dengan tag "<sup>"), hightlight (dengan tag "<mark>"), dan lainnya.
  7. Element line break atau enter. Element ini disebut element kosong karena tidak membutuhkan tag penutup.
  8. Element hyperlink. Pada element ini, dibutuhkan pendefinisian attribute href yang merupakan url yang ingin dituju.
  9. Element gambar. Pada element ini, dibutuhkan pendefinisian attribute src yang merupakan sumber gambar, bisa berupa link url gambar dan bisa berupa gambar yang sudah tersedia pada komputer. Bisa juga menggunakan attribute witdh dan height untuk pengaturan lebar dan tinggi gambar, dan alt untuk menampikan suatu text jika gambar tidak bisa ditampilkan.
  10. Tag penutup dokumen HTML body.
  11. Tag penutup dokumen HTML.

Jika spinnet code tersebut dilihat lewat web browser, maka halaman web yang akan tertampil seperti gambar berikut. 

Sekian dulu post kali ini. Kalau masih bingung, bisa langsung dilihat video (link video menyusul) kami. Post ketiga membahas mengenai basic HTML untuk membuat table dan list. Pantengin terus post selanjutnya.


Salam share,


Funtastic Share

Komentar

Posting Komentar