Coding HTML: Contoh Dasar Yang Wajib Diketahui Pemula

Bagi masyarakat yang cukup familiar di dunia pemrograman, khususnya pemrograman web tentunya tidak asing dengan coding HTML. Dengan coding satu ini Anda membangun website untuk dijual atau pribadi sehingga cukup menjanjikan. Tidak itu saja, Anda bisa membuat template website yang mempunyai harga jual mulai dari yang murah sampai paling mahal.

Itulah sebabnya bagi Anda yang merupakan pemula harus belajar apa saja mengenai contoh jenis coding yang satu ini karena mengingat banyak dipakai oleh web developer. Nah, supaya Anda bisa memahami lagi dengan contoh coding, maka simak penjelasan di bawah ini.

Contents hide

1 Daftar Contoh Coding HTML Paling Dasar

1.1 Tag Judul atau Title

1.2 Contoh Tag Metadata <meta>

1.3 Contoh Tag Heading <h1> sampai <h6>

1.4 Contoh Tag Paragraf <p>

1.5 Contoh Tag Image atau Gambar <img>

1.6 Contoh Tag Divisi <div>

1.7 Contoh Tag Span <span>

Daftar Contoh Coding HTML Paling Dasar

Kumpulan atau daftar contoh coding html dasar yang harus Anda ketahui adalah :

<!DOCTYPE html>

Anda perlu menggunakan tag yang satu ini di setiap awal dokumen HTML yang akan dibuat. Coding yang satu ini akan memastikan browser tahu jika website ini HTML dan HTML5 atau versi terbarunya. Meskipun demikian, sebenarnya ini bukanlah tag HTML tetapi tag yang satu ini sangat penting untuk Anda ketahui.

<head>

Coding HTML yang satu ini dimulai pada bagian header file HTML. Coding yang akan masuk ke sini biasanya tidak muncul pada halaman web Anda. Nah, sebaliknya tag ini isinya adalah metadata di mesin pencarian dan info pada browser.

Pada halaman dasar, tag <head> umumnya besisi judul halaman webnya saja. Namun ada sejumlah contoh HTML lainnya yang bisa Anda masukkan.

<html>

Coding ini wajib diberitahu ke browser bahwa sedang membaca HTML. Tag ini posisinya berada setelah tak DOCTYPE di atas dan Anda harus menutupnya dengan tag </html> pada akhir file program tersebut.

Tag Judul atau Title

Tag satu ini biasanya menetapkan judul pada halaman web Anda dengan cara memasukkan maupun menuliskan judul halaman web di antara tag <title> dan menutup menggunakan tag </title>. Itu adalah nama yang ditampilkan sebagai judul tab pada saat dibuka pada browser. Contohnya adalah :

<head>

<title>Hallo</title>

</head>

Contoh Tag Metadata <meta>

Sama seperti pada tag <title>, biasanya metadata diletakkan pada area header di halaman web. Metadata ini dipakai oleh search engine dan juga informasi mengenai apa yang terdapat di halaman webnya. Ada sejumlah contoh coding HTML website untuk membuat metadata dengan berbeda. Nah, contoh tag yang paling umum dipakai adalah :

Keyword, yaitu pilihan kata kunci untuk ke halaman web
Description, yaitu deskripsi dasar tentang halaman web
Author, yaitu penulis halaman webnya
Viewport, yaitu tag untuk memastikan halaman web bisa terlihat bagus di seluruh jenis perangkat yang digunakan oleh pengguna

Contoh HTML:

<meta name=”keywords” content=”HTML,code,tags”>
<meta name=”description” content=”Contoh Coding HTML Website”>
<meta name=”author” content=”Admin”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Tag viewport harus mempunyai “width=device-width, initial-scale=1.0” supaya memastikan halaman web tersebut ditampilkan secara baik di seluruh perangkat selular atau PC.

Contoh Tag Body <body>

Setelah Anda menutup pada bagian header dari !DOCTYPE sampai metadata, maka Anda akan mulai masuk ke badan codingnya. Anda bisa awali dengan tag <body> dan menutup memakai tag </body> pada akhir file HTML dan sebelum tag penutup </html>/

Semua kontan di halaman web Anda ada di antara tag-tag yang seperti ini.

Contoh HTML:

<body>

Seluruh konten halaman web ada di antara tag-tag ini.

</body>

Biasanya tag body mempunyai pilihan atribut yang dipakai sesuai dengan kebutuhan website Anda masing-masing. Contoh pilihan atribut yang paling umum digunakan adalah :

Background, yaitu untuk tambahkan background menggunakan gambar tertentu. Contoh HTMLnya adalah :
<html>
<body background=”https://assets.digitalocean.com/blog/static/hacktoberfest-is-back/hero.png”>
</body>
</html>
bgcolor, yaitu untuk memberi warna pada background di dokumen HTML. Contoh HTMLnya adalah:
<body bgcolor=”#afafaf”>
<h1>Website ini memiliki background berwarna.</h1>
</body>

Catatan khusus:

HTML5 belum mendukung format atribut <body bgcolor>. Anda bisa memakai style CSS untuk memberikan warna di background dengan contoh di bawah ini :

<body style=”background-color: rgb(251, 235, 217)”>

Contoh Tag Heading <h1> sampai <h6>

Nah, tag <h1> artinya adalah header di level satu pada halaman website. Coding HTML satu ini biasanya dipakai untuk membuat judul dan idealnya adalah hanya 1 pada setiap halaman saja.

Tag <h2> artinya adalah header di level dua pada header bagian, tag <h3> untuk sub-header di level tiga dan seterusnya sampai<h6>.

Apabila semakin besar angka headingnya, maka akan semakin kecil ukuran tulisannya.

Contoh Coding HTMLnya adalah:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Contoh Tag Paragraf <p>

Coding HTML ini berguna untuk memulai paragraf baru sesuai dengan keinginan Anda. Biasanya tag satu ini menyisipkan 2 jeda baris.

Contoh HTMLnya adalah:

<p>Your first paragraph.</p>
<p>Your second paragraph.</p>

Anda juga dapat memakai style CSS pada tag paragraf coding tersebut, contohnya adalah :

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

Contoh Tag Image atau Gambar <img>

Apabila Anda ingin menambahkan gambar pada web, maka harus memakai tag gambar ini. Coding HTML tag yang satu ini umumnya akan menggabungkan dengan atribut ‘src”/

Atribut yang satu ini akan merujuk pada lokasi file gambar pada dokumen komputer maupun web directory. Fungsi dari ‘alt” ialah penjelasan alternatif gambar apabila gambar tidak bisa ditampilkan karena suatu kesalahan teknis di browser, seperti pengguna memakai browser versi lama atau jaringan internet lambat.

Contoh HTMLnya adalah :

Contoh Tag Divisi <div>

Tak divisi satu ini merupakan tempat tingkat blok umum untuk jenis konten aliran. Konten aliran merupakan contoh coding website yang isinya teks maupun konten yang akan melengkapi halaman websitenya. Elemen anchor, title dan blockquote merupakan konten aliran juga.

Pada konsep pemrograman backend, div ini bisa membantu untuk mengatur kode ke bagian yang akan ditandai dengan jelas. Pada ujung depan, mereka akan menambahkan jeda baris sebelum dan juga sesudah konten yang dimiliki. Apabila tidak, maka mereka tidak akan berpengaruh pada konten maupun tata letak halaman terkecuali ditata menggunakan CSS.

Contoh HTMLnya adalah :

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

Tak div umumnya banyak ditemukan pada versi HTML dan selain HTML5 dengan memakai atribut align jadi contoh codingnya adalah :

<div align=”left”>
–Isi konten–
</div>

Contoh Tag Span <span>

Tag span HTML atau elemen rentang merupakan tempat inline umum untuk di frasa konten. Frasa konten biasanya mengacu ke teks dan markup apa saja yang dikandungnya, seperti tag <audio> dan <abbr>.

Tag span satu ini tidak bisa mewakili apa saja, namun bisa digunakan untuk kelompokkan frasa konten sebab ada 2 alasan. Alasan yang pertama adalah menerapkan informasi gaya pada bagian teks tertentu, contohnya Anda membuat drop caps sehingga Anda harus bisa membungkus huruf pertama di paragraf pembuka di setiap bagian artikel atau konten pada tag span.

Contoh HTMLnya adalah :

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

Nah, itulah beberapa kumpulan contoh coding HTML dasar yang harus dipahami dengan baik oleh pemula. Dapat dipelajari lebih lengkap disini ya!