Cara menggunakan html bekerja

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

Table of Contents Show

Persiapan Sebelum Coding
1. Editor Teks
2. Peramban Web
13+ Contoh HTML untuk Pemula
1. dokumen HTML
3. Gugus kalimat
6. Garis horizontal
9. Huruf miring
10. Gambar-gambar
11. Warna latar belakang
12. Jenis huruf
13. Ukuran huruf
14. Warna huruf
15. Perataan Teks

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

Sangat mudah, bukan?

Pertama, dokumen diawali dengan tulisan . Kode ini menandakan bahwa dokumen ditulis menggunakan HTML. Nantinya, browser bisa membaca kode tersebut.

Selanjutnya, terdapat tag . Setiap dokumen HTML wajib memiliki tag tersebut. Nantinya, dokumen harus ditutup dengan seperti yang dapat Anda lihat di kode terakhir.

Berikutnya, ada tag . Tag ini menunjukkan kepala dokumen. Nantinya akan menjadi bagian pada judul tab browser Anda. Jangan lupa ditutup dengan .

Setelah itu, Anda menuliskan tag . Ini artinya bagian dari halaman web browser. Isinya bisa berupa heading, paragraf, dan lain-lain. Jika sudah selesai, pastikan Anda menutupnya dengan .

Lalu, bagaimana dengan heading dan paragraf yang kami sebutkan tadi? . Yuk simak ulasannya

2. Menuju

Contoh HTML kedua adalah heading.

Ini sangat penting untuk menjelaskan isi halaman web. Mulai dari judul, sub judul, dan seterusnya.

Selain itu, heading juga berfungsi untuk aspek SEO. Ini karena Google menyukai halaman web yang ditata dengan rapi dan jelas. Jadi, mesin pencari dapat merekomendasikan situs web Anda kepada pengguna

Heading memiliki banyak jenis. Ada H1, H2, H3, dan seterusnya. Semakin tinggi angkanya, semakin kecil tulisannya.

Tulisan judul terdapat di. Berikut adalah contoh penulisannya

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Hasilnya akan seperti ini

3. Gugus kalimat

Contoh HTML berikutnya adalah paragraf.

Misalkan Anda membuat website yang berisi artikel. Pastinya artikel tersebut memuat banyak paragraf bukan? . Ini juga akan menurunkan skor SEO situs web

Untuk itu, yuk kita gunakan tag

untuk membuat paragraf. Jangan lupa menutup baris tersebut dengan

supaya bisa menuliskan kode lain. Kira-kira, penulisan kodenya seperti ini:

<p>Paragraf artikel</p>

4. Tautan

Bagaimana jika ingin menambahkan link artikel di website?

Dalam HTML, sebuah link dapat dicantumkan dengan menuliskan tag dan diakhiri dengan tag . Contoh penulisannya seperti ini:

<a href="https://academy.alterra.id/">Kunjungi Alterra Academy!</a>

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 .

Contoh HTMLnya 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, 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>

Setelah 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>

Perlu 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>

Nantinya, 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.