HTML (Hyper Text Markup Language) adalah bahasa markup yang berguna untuk mengembangkan halaman web. Singkatnya, HTML adalah fondasi dari sebuah situs web. Jadi, struktur website Anda nantinya akan bergantung pada HTML
Sebenarnya HTML tidak sendirian dalam membangun sebuah website. Ada juga bahasa CSS dan Javascript. Namun untuk saat ini kita akan fokus mempelajari contoh-contoh HTML terlebih dahulu ya.
HTML cukup mudah untuk dipelajari oleh pemula. Sebelum masuk ke contoh HTML, mari kita lihat dulu apa saja yang perlu disiapkan. Baca pembahasannya di bawah ini
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 kodenya
Apa saja alatnya?
1. Editor Teks
Editor teks adalah alat yang sangat penting. Dengan editor teks, Anda dapat menulis kode HTML yang Anda inginkan
Setiap sistem operasi komputer memiliki editor teks yang berbeda. Namun, Anda tidak perlu khawatir. Anda dapat mengakses kedua editor teks tersebut secara gratis
Jika Anda menggunakan Windows, Anda dapat menggunakan Notepad. Sebaliknya, jika sistem operasi Anda menggunakan Mac OS, alternatifnya adalah TextEdit
Namun pada artikel ini text editor yang akan digunakan adalah Notepad. Jadi tinggal disesuaikan saja, ya
2. Peramban Web
Selain editor teks, Anda memerlukan browser web. Tool ini berguna untuk membuka kode HTML yang sudah Anda tulis sebelumnya
Ada banyak browser web yang dapat Anda pilih. Contohnya berkisar dari Google Chrome, Mozilla Firefox, Internet Explorer, Opera Mini, dan sebagainya
Apa pun browser webnya, kami menyarankan Anda untuk menggunakan versi terbaru. Hal ini dimaksudkan agar kode HTML yang Anda tulis dapat dibuka dengan baik
Jika sudah menyiapkan text editor dan web browser, mari kita mulai belajar contoh HTML pada pembahasan selanjutnya
13+ Contoh HTML untuk Pemula
1. dokumen HTML
Sebelum menulis kode, ada baiknya Anda mengetahui cara membuat dokumen HTML. Mari kita mulai dengan membuka Notepad atau TextEdit. Kemudian, tulis 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 dapat menyimpan dokumen dengan format ekstensi. htm,. html, atau. xhtml. Jika tidak, maka dokumen Anda tidak akan terbaca oleh web browser
Jika demikian, Anda dapat membuka dokumen menggunakan browser. Hasilnya akan seperti ini
Nah, di dalam tag , terdapat atribut href. Atribut ini menunjukkan link yang Anda cantumkan. Dilihat dari contoh di atas, link nya menuju ke website Alterra Academy.
Selanjutnya ada tulisan "Visit Alterra Academy. ”. Teks akan dibaca oleh pengguna. Jika diklik, itu akan menuju ke tautan yang ditautkan. Contohnya adalah sebagai berikut
Kunjungi Alterra Academy!_5. Tombol
Anda ingin membuat tautan, tetapi dalam bentuk tombol?
Penulisan kodenya cukup mudah. Di bawah penulisan kode untuk membuat link, Anda cukup menuliskan tag dengan awalan dan diakhiri dengan .
Contoh HTMLnya seperti ini
<a href="//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, baris ini digunakan untuk memisahkan paragraf. Jadi, penulisan kodenya akan seperti ini
<p>Paragraf Artikel</p> <hr> <p>Paragraf Artikel</p> _Tag di atas menunjukkan garis horizontal. Anda tidak perlu memberikan penutup seperti . Hal tersebut tidak diperlukan untuk membuat garis horizontal.
Hasil penulisan kodenya akan seperti di bawah ini
7. Kutipan
Terkadang, kutipan diperlukan dalam sebuah artikel
Misalnya, Anda menulis tentang perusahaan Apple. Kemudian, Anda ingin mengutip kata-kata Steve Jobs. Bagaimana cara melakukannya?
Cukup mudah. Anda hanya perlu mengawali kutipan tersebut dengan tag . Setelah itu, jangan lupa ditutup dengan tag . Contohnya seperti:
<q>Design is not just what it looks like and feels like. Design is how it works.</q>Hasilnya akan seperti ini
8. Berani
Contoh HTML berikut dicetak tebal.
Dengan membuat teks menjadi bold, Anda bisa membuat beberapa bagian dari tulisan Anda menjadi lebih menonjol. Caranya sangat mudah. Anda hanya perlu menggunakan tag dan .
Misalnya 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. Huruf miring
Bagaimana jika Anda ingin mencetak miring?
Caranya sama persis seperti bold. Anda tinggal menggunakan dan 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. Gambar-gambar
Sebuah artikel akan lebih menarik jika ada gambarnya bukan?
Ini juga memberi pembaca gambaran tentang apa yang Anda bicarakan dalam sebuah artikel.
Dalam HTML, memasukkan image ditandai dengan tag
13. Ukuran huruf
Tidak hanya ukuran gambar yang bisa diubah. Ukuran font juga bisa digunakan.
Atribut yang digunakan masih Style. Anda dapat langsung menyesuaikan ukuran font yang Anda inginkan. Contohnya adalah seperti di bawah ini
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> _3Setelah itu hasilnya akan seperti ini
14. Warna huruf
Selain warna background, Anda juga bisa mengubah warna font.
Caranya, Anda bisa menggunakan atribut Style. Setelah itu, Anda dapat menulis warna yang Anda inginkan. Misalnya seperti ini
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> _4Perlu diingat bahwa warna yang Anda masukkan harus sesuai dengan kode warna HTML. Selain menulis nama warna seperti 'oranye' atau 'merah', Anda juga bisa menulis kode Hex, RGB, dan HSL
15. Perataan Teks
Contoh HTML yang terakhir adalah Text Alignment. Atau kami juga menyebutnya posisi teks.
Cara mengubah posisi teks sangat mudah. Anda hanya perlu mengikuti contoh di bawah ini
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> _5Nantinya, Anda akan mendapatkan hasil seperti di bawah ini
Kesimpulan
Nah, di atas adalah beberapa contoh HTML. Cukup sederhana, bukan?
Anda bisa langsung mencobanya. Mulailah dengan apa yang menurut Anda paling mudah. Misalnya membuat heading, paragraf, atau membuat garis horizontal.
Setelah itu, Anda bisa melanjutkan dengan contoh HTML yang menggunakan atribut lainnya. Misalnya seperti menyisipkan gambar, tautan, atau membuat tombol.