Blog

Contoh Coding HTML Dasar, Pemula Wajib Tahu!

Jika kamu familiar dengan dunia pemrograman, khususnya pemrograman web, kamu mungkin sudah familiar dengan coding HTML. Dengan coding HTML memungkinkan untuk membuat website pribadi atau website untuk dijual, bahkan untuk seorang pemula.

Selain itu, kamu dapat membuat berbagai macam template website mulai dari yang murah hingga yang mahal. Oleh karena itu, yuk, simak pembahasan berikut mengenai HTML yang sering ditemui atau digunakan oleh para web developer.

<!DOCTYPE html>

Tag ini wajib ada di awal setiap dokumen HTML yang kamu buat. Coding HTML ini memastikan bahwa browser mengetahui bahwa website tersebut adalah HTML, atau bahkan HTML5 versi terbaru. Meskipun ini sebenarnya bukan tag HTML, namun penting untuk diketahui.

<html>

Coding HTML ini adalah tag wajib yang memberi tahu browser bahwa sedang membaca HTML. Tag ini berada tepat setelah tag DOCTYPE dan harus ditutup dengan tag </html> di akhir file program. Segala sesuatu yang lain dalam dokumen berada di antara tag-tag ini.

<head>

Tag ini dimulai di bagian header file HTML. Coding HTML yang masuk di sini tidak akan muncul di website kamu. Sebaliknya, tag ini berisi metadata untuk mesin pencari dan informasi untuk browser. Untuk halaman dasar, tag ini hanya berisi judul halaman website.

Namun, kamu juga dapat memasukkan beberapa sintaks HTML lainnya, diantaranya:

<title>

Tag Judul ini menetapkan judul halaman web dengan memasukkan atau menulis judul halaman web di antara tag <title> dan ditutup dengan tag </title>. Ini adalah nama yang muncul sebagai judul tab saat dibuka di browser.

Contoh:

<head>

<title>Hello World</title>

<head>

<Meta>

Seperti tag <title>, Tag Metadata ditempatkan di area header halaman web. Metadata adalah informasi yang digunakan oleh mesin pencari tentang apa yang ada di halaman web.

Ada beberapa contoh coding HTML website untuk berbagai metadata, namun berikut adalah beberapa nilai tag yang paling umum digunakan.

- description: deskripsi dasar halaman web
- keywords: pilihan kata kunci yang berlaku untuk halaman web
- author: penulis halaman web
- viewport: tag untuk memastikan halaman web terlihat bagus di semua perangkat.

Contoh:

<meta name="description" content="Coding HTML Dasar">

<meta name="keywords" content="HTML, tags, coding">

<meta name="author" content="Admin">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Agar halaman web dapat ditampilkan dengan baik di perangkat seluler dan desktop, tag “viewport” harus selalu menyertakan “width=device-width, initial-scale=1.0”.

<body>

Setelah menutup bagian header dari !DOCTYPE hingga Meta, sekarang kamu mulai masuk ke badan coding HTML. Dimulai dengan tag <body> dan diakhiri dengan tag </body> tepat di akhir file HTML sebelum tag penutup </html>. Semua konten di halaman web akan ditempatkan di antara tag-tag ini.

Contoh:

<body>

Semua konten di halaman web akan ditempatkan di antara tag ini.

</body>

Tag Body ini memiliki atribut opsional yang dapat kamu gunakan sesuai dengan kebutuhan website.

Beberapa atribut tag body adalah:

1) Background: menambahkan background dengan gambar tertentu

Contoh:

<html>

<body background="https://images.app.goo.gl/JC2X9DvbkCysWKV78">

</body>

</html>

2) Bgcolor: memberikan warna background untuk dokumen HTML.

Contoh:

<body bgcolor="#afafaf">

<h1>Website ini memiliki background berwarna.</h1>

</body>

*CATATAN:

HTML5 tidak mendukung format atribut <body bgcolor>. Kamu bisa menggunakan style CSS untuk memberi warna latar dengan contoh coding HTML website berikut:

<h1> sampai <h6>

Tag <h1> mendefinisikan header level satu di halaman web. Tag Heading ini biasanya digunakan untuk membuat judul dan idealnya hanya ada satu di setiap halaman.

Tag <h2> mendefinisikan header level dua untuk header bagian, tag <h3> mendefinisikan sub-header level-tiga, dan seterusnya hingga <h6>. Semakin besar angka heading, semakin kecil ukuran fontnya.

Contoh:

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

<p>

Tag Paragraf berguna untuk memulai paragraf baru. Tag ini biasanya menyisipkan dua jeda baris.

Contoh:

<p>Your First paragraph.</p>

<p>Your second paragraph.</p>

Kamu juga bisa menggunakan style CSS di tag paragraf coding HTML, seperti berikut ini:

<p style="font-size: 150%;">Tulisan ini berukuran 50% lebih besar.</p>

<br>

Tag Break ini digunakan untuk memberikan jeda baris (break) tunggal antar paragraf atau kalimat. Tag ini berfungsi sama seperti <hr>. Meskipun tag <hr> hanya memberikan garis horizontal pada halaman web sehingga cocok untuk memisahkan bagian teks.

Contoh:

<p>Baris pertama.<br>Baris kedua.</p>

<img>

Jika kamu ingin menambahkan gambar ke halaman web, kamu harus menggunakan Tag Gambar. Tag ini biasanya menggunakan atribut “src”. Atribut src sendiri mengacu pada lokasi file gambar dalam dokumen komputer atau web direktory.

Tag gambar biasanya juga memiliki atribut “alt”. Fitur “Alt” adalah penjelasan alternatif untuk gambar ketika gambar tidak dapat ditampilkan karena masalah teknis pada browser. Misalnya koneksi lambat atau pengguna masih menggunakan browser versi lama.

Contoh:

<img src="wp-content/uploads/2019/04/sunlit-birds.jpg" alt="gambar burung">

<div>

Elemen divisi konten HTML (div) adalah wadah tingkat blok yang umum untuk “konten aliran”. Konten aliran adalah contoh coding HTML untuk website yang berisi teks atau konten yang melengkapi halaman web. Elemen anchor, blockquote, dan title dianggap sebagai konten aliran.

Dalam konsep pemrograman backend, elemen div membantu mengatur kode ke dalam bagian yang ditandai dengan jelas. Di ujung depan, mereka menambahkan jeda baris sebelum dan sesudah konten. Jika tidak, hal ini tidak akan berpengaruh pada konten atau tata letak halaman kecuali jika ditata dengan CSS.

Contoh:

<div>

<img src="https://assets.codepen.io/6093409/sprocket.svg" alt+the HubSpot sprocket logo"/>

</div>

Tag div juga sering ditemui di versi HTML selain HTML5 dengan atribut align, misalnya:

<div align="left">

--Isi konten--

</div>

<span>

Elemen span HTML adalah wadah inline umum untuk “frasa konten”.Frasa konten mengacu pada teks dan markup yang dikandungnya, seperti tag <abbr> dan <audio>. Tag span pada dasarnya tidak mewakili apa pun, tetapi digunakan untuk mengelompokkan frasa konten karena dua alasan.

Yang pertama adalah menerapkan informasi gaya pada bagian teks tertentu. Misalnya, jika kamu ingin membuat drop cap, kamu dapat mengapit huruf pertama paragraf pembuka setiap bagian artikel dengan tag span.

Contoh:

<p><span style="font-size:36px;">I</span.ni adalah contoh teks span.</p>

<a>

Elemen anchor HTML digunakan untuk membuat hyperlink. Coding HTML ini memerlukan atribut href untuk menentukan tujuan link. Link tujuan bisa berupa bagian lain dari halaman web yang sama, halaman web lain di website yang sama, atau ke website eksternal, file, atau alamat email. Kata-kata yang diberi Tag Anchor biasanya digarisbawahi dan ditampilkan dengan warna biru.

Contoh:

<p><a

href="https://www.hosteko.com/blog"> Panduan Belajar HTML Dasar</a> terbaik hanya di Hosteko.</p>

Atribut berguna lainnya untuk tag ini adalah “Target” dan “Title”. Atribut target digunakan untuk membuka link di tab yang sama atau di jendela baru.

Contoh:

<a href=""https://www.hosteko.com/panduan"/" target="_blank"> Panduan Belajar HTML Dasar<a/>

<ul>

Codin HTML elemen unordered list digunakan untuk mengelompokkan item ketika urutannya tidak penting. Daftar item yang menggunakan tag ini harus didefinisikan dengan tag <li> di antara elemen <ul>. Tag “ul” memiliki atribut “type” yang dapat diatur ke “disc”, “circle”, atau “square” dengan menambahkan properti list-style-type .

Contoh:

<h1>Daftar Tag dan Atribut Belajar HTML Dasar</h1>
<ul style="list-style-type:circle;">
<li> Tag Paragraf (<p></>)</li>
<li> Tag Gambar> (<img>)</li>
<li> Tag Heading (<h1></h1> sampai <h6></h6>)</li>
<li> Tag Divisi (<div>)</li>
<li> Tag Span (<span>)</li>
<li> Tag Anchor (<a>)</li>
<li> Tag Unordered List (<ul></li>
</ul>

Sintaks di atas membuat daftar list dengan bentuk ikon bulat hitam.

<ol>

Coding HTML elemen ordered list digunakan untuk mengelompokkan item ketika urutannya penting. Misalnya resep masakan sehingga harus mengikuti urutan tertentu. Langkah-langkahnya harus didefinisikan oleh tag <li> diantara elemen <ul>.

Secara default, daftar yang diurutkan dimulai dengan nomor 1. Jika kamu ingin memulai dari nomor yang berbeda, cukup tambahkan atribut awal dan atur nilainya ke nomor yang kamu inginkan. Contoh atribut type yang umum adalah 1, A, a, I (romawi besar) dan i (romawi kecil).

Contoh:

<h1>Resep Nasi Goreng</h1>

<ol type="1">

<li> Panaskan minyak dan tumis bumbu hingga harum.</li>

<li> Masukkan telur dan wortel, lalu orak-arik hingga matang. </li>

<li> Masukkan nasi putih, bumbui dengan garam, merica bubuk, dan sedikit kecap. Masak hingga matang dan sajikan</li>

</ol>

<em>

Coding HTML elemen emphasis membantu dalam menekankan teks yang ada di dalamnya. Browser biasanya membuat teks dalam huruf miring. Cara kerja Tag Emphasis ini sama dengan tag <i> yang mencetak huruf miring pada kata atau kalimat.

Contoh:

<p>Ini adlaah paragraf normal.</p>

<p><em>Paragraf ini penting!</em></p>

<p>Kata <em>ini</em> sangat penting!</p>

<strong>

Coding HTML elemen strong membantu menunjukkan bahwa teks tersebut sangat penting atau mendesak. Browser biasanya membuat teks menjadi tebal. Cara kerja Tag Strong ini sama seperti tag <b> yang sama-sama membuat kata atau kalimat tebal.

Contoh:

<p>Ini adlaah paragraf normal.</p>

<p><strong>Paragraf ini penting!</strong></p>

<p>Kata <strong>ini</strong> sangat penting!</p>

<table>

Meskipun penggunaan tabel tidak disarankan untuk memformat website, tetapi kamu bisa menggunakan baris dan kolom dengan coding HTML <table> untuk mengelompokkan informasi di halaman web.

Contoh:

<table>
<tbody>
<tr>
<th>Kolom Pertama</th>
<th>Kolom Kedua</th>
</tr>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tbody>
</table>

Tag <table> dan </table> mendefinisikan awal dan akhir tabel. Tag<tbody> berisi seluruh isi konten tabel. Setiap baris tabel diapit oleh tag <tr>. Setiap sel dalam setiap baris dibungkus dengan tag <th> dan beberapa tag <td> untuk data kolom.

<blockquote>

Jika kamu mengutip suatu website atau orang lain dan ingin membedakan kutipan tersebut dengan dokumen lain, gunakan Tag Quote. Cukup masukkan tanda kutip di antara tag pembuka <blockquote> dan penutup <blockquote>

Contoh:

<blockquote> Dengan Hosteko, kamu bisa [beli domain dan hosting dengan harga murah] (https://hosteko.com/promo-domain-murah), lho!</blockquote>

<form>

Formulir HTML membantu kamu berinteraksi dengan pengguna dengan mengizinkan mereka mengirimkan data ke website kamu. Untuk menginisialisasi formulir HTML, kamu harus membuat elemen formulir menggunakan sepasang tag coding HTML <form> dan </form>.

Kamu bisa menggunakan elemen Tag Form untuk membuat formulir text input area dan button. Jika ingin membuat text input, kamu perlu menulis atribut “teks” di tag <input type = ‘jenis_atribut_form’>.

Contoh coding HTML website text input:

<form>

<br>Nama depan:<br>

<input type = "text" name="nama depan">

<br>Nama belakang:<br>

<input type = "text" name="nama belakang">

</form>

Sementara itu, jika kamu ingin membuat formulir multiple choice, kamu perlu menulis atribut radio, checkboxes, atau dropdown sesuai kebutuhan.

Contoh coding HTML website multiple choice:

<form>

<input type = "radio" name="day" value="monday" checked>Senin<br>

<input type = "checkboxes" name="day" value="tuesday" checked>Selasa<br>

<input type = "dropdown" name="day" value="wednesday" checked>Rabu

</form>

Nah, itulah beberapa contoh coding HTML dasar. Semoga bermanfaat!