Ingin coba membangun website? Artinya, Anda perlu belajar contoh HTML.
Nyatanya, 93.4% website di dunia menggunakan HTML loh.
HTML (Hyper Text Markup Language) adalah sebuah bahasa markup yang berguna untuk membangun halaman web. Singkatnya, HTML adalah fondasi dari sebuah website. Jadi, struktur website Anda nantinya akan bergantung pada HTML.
Sebenarnya, HTML tidak sendirian dalam membangun website. Ada juga bahasa CSS dan Javascript. Namun, untuk saat ini, kita akan fokus belajar contoh HTML dulu, ya.
HTML ini cukup mudah untuk dipelajari oleh pemula. Sebelum masuk ke contoh HTML, yuk kita simak terlebih dahulu apa saja yang perlu dipersiapkan. Simak pembahasannya di bawah ini ya!
- Persiapan Sebelum Coding
- 13+ Contoh HTML Untuk Pemula
- 1. Dokumen HTML
- 2. Heading
- 3. Paragraf
- 4. Link
- 5. Button
- 6. Garis Horizontal
- 7. Quotes
- 8. Bold
- 9. Italic
- 10. Images
- 11. Background Color
- 12. Jenis Font
- 13. Ukuran Font
- 14. Warna Font
- 15. Text Alignment
- Kesimpulan
Persiapan Sebelum Coding
Sebelum mengikuti contoh HTML, ada dua tools yang perlu disiapkan. Yang pertama adalah alat untuk menulis kode HTML. Setelah itu alat yang bisa membuka dan melihat kode tersebut.
Apa saja ya tools nya? Simak penjelasannya di bawah ini!
1. Teks Editor
Teks editor adalah tool yang sangat penting. Dengan teks editor, Anda bisa menulis kode HTML yang Anda inginkan.
Setiap sistem operasi di komputer memiliki teks editor yang berbeda. Namun, Anda tidak perlu khawatir. Kedua teks editor tersebut bisa Anda akses secara gratis.
Jika Anda menggunakan Windows, Anda bisa memakai Notepad. Di sisi lain, jika sistem operasi Anda menggunakan Mac OS, alternatifnya adalah TextEdit.
Namun, pada artikel ini, teks editor yang akan digunakan adalah Notepad. Jadi bisa Anda sesuaikan saja, ya!
2. Web Browser
Selain teks editor, Anda membutuhkan web browser. Tool yang satu ini berguna untuk membuka kode HTML yang telah Anda tuliskan sebelumnya.
Ada banyak web browser yang bisa Anda pilih. Contohnya mulai dari Google Chrome, Mozilla Firefox, Internet Explorer, Opera Mini, dan sebagainya.
Apapun web browsernya, kami menyarankan Anda untuk menggunakan versi yang terbaru. Hal ini bertujuan agar kode HTML yang Anda tulis bisa dibuka dengan baik.
Jika Anda sudah menyiapkan teks editor dan web browser, mari kita mulai belajar contoh HTML di pembahasan selanjutnya!
13+ Contoh HTML untuk Pemula
1. Dokumen HTML
Sebelum menuliskan kode, ada baiknya Anda mengetahui cara membuat dokumen HTML. Yuk kita mulai dengan membuka Notepad atau TextEdit. Lalu, tuliskan kode seperti di bawah ini:
<!DOCTYPE html> <html> <head> <title>Alterra Academy</title> </head> <body> <h1>Coding Bootcamp Indonesia</h1> </body> </html>
Setelah itu, Anda bisa menyimpan dokumennya dengan format ekstensi .htm, .html, atau .xhtml. Jika tidak, maka dokumen Anda tidak akan terbaca oleh web browser.
Jika sudah, Anda bisa membuka dokumen tersebut menggunakan browser. Hasilnya akan menjadi seperti ini:
Sangat mudah, kan? Sekarang, mari kita bahas sedikit tentang kode yang sebelumnya Anda tulis.
Pertama, dokumen diawali dengan tulisan <!DOCTYPE html>. Kode ini menandakan bahwa dokumen ditulis menggunakan HTML. Nantinya, browser bisa membaca kode tersebut.
Selanjutnya, terdapat tag <html>. Setiap dokumen HTML wajib memiliki tag tersebut. Nantinya, dokumen harus ditutup dengan </html> seperti yang dapat Anda lihat di kode terakhir.
Berikutnya, ada tag <head>. Tag ini menunjukkan kepala dokumen. Nantinya akan menjadi bagian pada judul tab browser Anda. Jangan lupa ditutup dengan </head>.
Setelah itu, Anda menuliskan tag <body>. Ini artinya bagian dari halaman web browser. Isinya bisa berupa heading, paragraf, dan lain-lain. Jika sudah selesai, pastikan Anda menutupnya dengan </body>.
Lalu, bagaimana dengan heading dan paragraf yang tadi sempat kita sebut? Anda akan mempelajarinya di bagian berikutnya. Yuk kita simak ulasannya!
2. Heading
Contoh HTML yang kedua adalah heading.
Hal ini sangat penting untuk menjelaskan isi halaman web. Mulai dari judul, sub-judul, dan seterusnya.
Selain itu, heading juga berfungsi untuk aspek SEO. Hal ini dikarenakan Google menyukai halaman web yang tertata dengan rapi dan jelas. Sehingga, mesin pencarian tersebut dapat merekomendasikan website Anda kepada pengguna.
Heading memiliki banyak jenis. Ada H1, H2, H3, dan seterusnya. Semakin tinggi angkanya, semakin kecil tulisannya.
Penulisan heading terdapat dalam. Berikut adalah contoh penulisannya:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3>
Hasilnya akan menjadi seperti ini:
3. Paragraf
Contoh HTML berikutnya adalah paragraf.
Misalkan Anda membuat website berisi artikel. Pastinya, artikel tersebut berisi banyak paragraf, bukan? Jika tidak, maka artikel Anda akan sulit untuk dibaca. Hal ini juga akan menurunkan skor SEO pada website.
Untuk itu, yuk kita gunakan tag <p> untuk membuat paragraf. Jangan lupa menutup baris tersebut dengan </p> supaya bisa menuliskan kode lain. Kira-kira, penulisan kodenya seperti ini:
<p>Paragraf artikel</p>
4. Link
Bagaimana kalau ingin mencantumkan link pada artikel di website?
Dalam HTML, sebuah link dapat dicantumkan dengan menuliskan tag <a> dan diakhiri dengan tag </a>. Contoh penulisannya seperti ini:
<a href="https://academy.alterra.id/">Kunjungi Alterra Academy!</a>
Nah, di dalam tag <a>, terdapat atribut href. Atribut ini menunjukkan link yang Anda cantumkan. Dilihat dari contoh di atas, link nya menuju ke website Alterra Academy.
Berikutnya, terdapat tulisan “Kunjungi Alterra Academy!”. Tulisan tersebutlah yang akan terbaca oleh pengguna. Jika diklik, maka akan menuju ke link yang telah dicantumkan. Contohnya seperti berikut ini:
Kunjungi Alterra Academy!
5. Button
Anda ingin membuat link, tapi dalam bentuk button? Bisa!
Penulisan kodenya cukup mudah. Di bawah penulisan kode untuk membuat link, Anda cukup menuliskan tag dengan awalan <button> dan diakhiri dengan </button>.
Contoh HTML nya seperti ini:
<a href="https://academy.alterra.id/" target="_blank"> <button>Kunjungi Alterra Academy</button>
Hasilnya akan muncul tombol seperti di bawah ini:
6. Garis Horizontal
Apa itu garis horizontal?
Penjelasannya persis seperti namanya. Biasanya, garis ini digunakan untuk memisahkan paragraf. Jadi, penulisan kodenya akan seperti ini:
<p>Paragraf Artikel</p> <hr> <p>Paragraf Artikel</p>
Tag <hr> di atas menunjukkan garis horizontal. Anda tidak perlu memberikan penutup seperti </hr>. Hal tersebut tidak diperlukan untuk membuat garis horizontal.
Hasil penulisan kodenya akan menjadi seperti di bawah ini:
7. Quotes
Terkadang, quotes atau kutipan dibutuhkan di sebuah artikel.
Misalkan, Anda menulis tentang perusahaan Apple. Lalu, Anda ingin mengutip perkataan Steve Jobs. Bagaimana caranya?
Cukup mudah. Anda hanya perlu mengawali kutipan tersebut dengan tag <q>. Setelah itu, jangan lupa ditutup dengan tag </q>. Contohnya seperti:
<q>Design is not just what it looks like and feels like. Design is how it works.</q>
Hasilnya akan menjadi seperti ini:
8. Bold
Contoh HTML selanjutnya adalah bold.
Dengan membuat teks menjadi bold, Anda bisa membuat beberapa bagian dari tulisan Anda menjadi lebih menonjol. Caranya sangat mudah. Anda hanya perlu menggunakan tag <b> dan </b>.
Contohnya seperti ini:
<p>Design is not just what it looks like and feels like.</p> <p><b>Design is how it works.</b></p>
Nantinya, Anda akan mendapatkan hasil seperti di bawah ini.
9. Italic
Bagaimana jika Anda ingin membuat tulisan miring?
Caranya sama persis seperti bold. Anda tinggal menggunakan <i> dan </i> untuk membuat tulisan menjadi italic. Kira-kira, seperti ini contohnya:
<p>Design is not just what it looks like and feels like.</p> <p><i>Design is how it works.</i></p>
Selanjutnya, tulisan Anda akan terlihat seperti ini:
10. Images
Sebuah artikel akan lebih menarik jika ada gambar, bukan?
Hal ini juga memberikan gambaran kepada pembaca tentang apa yang sedang Anda bicarakan di sebuah artikel.
Dalam HTML, memasukkan image ditandai dengan tag <img>. Kira-kira, begini contohnya:
<img src="alterra.jpg" alt="logo alterra" style="width:48px;height:48px;">
Jika kalian perhatikan, ada atribut ‘src’, ‘alt’, dan ‘style’. Apa artinya?
Src artinya url atau lokasi penyimpanan gambar. Sedangkan Alt adalah atribut berisi teks. Jika gambar tidak muncul, maka teks tersebut yang akan dilihat oleh pengunjung website.
Lalu, bagaimana dengan Style?
Style menunjukkan ukuran dari gambar yang Anda masukkan. Tentunya, Anda bisa mengatur ukuran yang Anda mau melalui atribut tersebut.
11. Background Color
Bosan dengan warna background halaman website yang selalu putih?
Anda bisa menggantinya loh. Seperti mengatur ukuran image, mengganti warna background juga menggunakan atribut Style. Seperti ini contohnya:
<body style="background-color:orange;">
Kata ‘orange’ bisa Anda sesuaikan dengan warna yang Anda mau. Nantinya, background halaman website akan mengikuti warna tersebut.
12. Jenis Font
Contoh HTML berikutnya adalah jenis font.
Anda bisa menggantinya dengan menggunakan atribut Style seperti contoh HTML sebelumnya. Jenis font tersebut bisa Anda ganti di manapun, baik di heading ataupun paragraf.
Inilah contoh penulisannya:
<h1 style="font-family:century gothic;">Heading</h1> <p style="font-family:verdana;">Paragraf</p>
Dan berikut adalah hasil font yang telah Anda atur:
13. Ukuran Font
Tidak hanya ukuran gambar nih yang bisa diubah. Ukuran font juga bisa loh.
Atribut yang dipakai tetap Style. Anda bisa langsung mengatur ukuran font yang Anda inginkan. Contohnya seperti di bawah ini:
<h1 style="font-size:56px;">Heading</h1> <p style="font-size:36px;">Paragraf</p>
Setelah itu, hasilnya akan menjadi seperti ini:
14. Warna Font
Selain warna background, warna font juga bisa Anda ganti.
Caranya, Anda bisa menggunakan atribut Style. Setelah itu, Anda bisa menulis warna yang Anda inginkan. Contohnya seperti ini:
<h1 style="color:orange;">Heading</h1>
Perlu diingat bahwa warna yang Anda masukkan harus sesuai dengan kode warna HTML. Selain menuliskan nama warna seperti ‘orange’ atau ‘red’, Anda juga bisa menuliskan kode Hex, RGB, dan HSL.
15. Text Alignment
Contoh HTML yang terakhir adalah Text Alignment. Atau kita sebut juga dengan posisi teks.
Cara mengubah posisi teks sangat mudah. Anda hanya perlu mengikuti contoh di bawah ini:
<h1 style="text-align:right;">Right Heading</h1>
Nantinya, Anda akan mendapatkan hasil seperti di bawah ini:
Kesimpulan
Nah, di atas adalah beberapa contoh HTML. Cukup mudah, bukan?
Anda bisa langsung mencobanya. Mulailah dengan yang menurut Anda paling mudah. Contohnya membuat heading, paragraf, atau membuat garis horizontal.
Setelah itu, Anda bisa melanjutkan dengan contoh HTML yang menggunakan atribut lain. Contohnya seperti memasukkan gambar, link, atau membuat button.
Selamat mencoba dan semoga membantu!
