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.<\/p>\n
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\u00a0sering ditemui atau digunakan oleh para web developer.<\/p>\n
<!DOCTYPE html><\/strong><\/span><\/pre>\nTag 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.<\/p>\n
<html><\/strong><\/span><\/pre>\nCoding 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.<\/p>\n
<head><\/strong><\/span><\/pre>\nTag ini dimulai di bagian header file HTML.\u00a0Coding 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.<\/p>\n
Namun, kamu juga dapat memasukkan beberapa sintaks HTML lainnya, diantaranya:<\/p>\n
<title><\/strong><\/span><\/pre>\nTag 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.<\/p>\n
Contoh:<\/p>\n
<head><\/span>\r\n\r\n<title>Hello World<\/title><\/span>\r\n\r\n<head><\/span><\/pre>\n<Meta><\/strong><\/span><\/pre>\nSeperti 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.<\/p>\n
Ada beberapa contoh\u00a0coding HTML website untuk berbagai metadata, namun berikut adalah beberapa nilai tag yang paling umum digunakan.<\/p>\n
\n- \n
\n- description: deskripsi dasar halaman web<\/li>\n
- keywords: pilihan kata kunci yang berlaku untuk halaman web<\/li>\n
- author: penulis halaman web<\/li>\n
- viewport: tag untuk memastikan halaman web terlihat bagus di semua perangkat.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Contoh:<\/p>\n
<meta name=\"description\" content=\"Coding HTML Dasar\"><\/span>\r\n\r\n<meta name=\"keywords\" content=\"HTML, tags, coding\"><\/span>\r\n\r\n<meta name=\"author\" content=\"Admin\"><\/span>\r\n\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/span><\/pre>\nAgar halaman web dapat ditampilkan dengan baik di perangkat seluler dan desktop, tag “viewport” harus selalu menyertakan “width=device-width, initial-scale=1.0”.<\/p>\n
<body><\/strong><\/span><\/pre>\nSetelah 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.<\/p>\n
Contoh:<\/p>\n
<body><\/span><\/pre>\nSemua konten di halaman web akan ditempatkan di antara tag ini.<\/p>\n
<\/body><\/span><\/pre>\nTag Body ini memiliki atribut opsional yang dapat kamu gunakan sesuai dengan kebutuhan website.<\/p>\n
Beberapa atribut tag body adalah:<\/p>\n
1) Background: menambahkan background dengan gambar tertentu<\/strong><\/p>\nContoh:<\/p>\n
<html><\/span>\r\n\r\n<body background=\"https:\/\/images.app.goo.gl\/JC2X9DvbkCysWKV78\"><\/span>\r\n\r\n<\/body><\/span>\r\n\r\n<\/html><\/span><\/pre>\n2) Bgcolor: memberikan warna background untuk dokumen HTML.<\/strong><\/p>\nContoh:<\/p>\n
<body bgcolor=\"#afafaf\"><\/span>\r\n\r\n<h1>Website ini memiliki background berwarna.<\/h1><\/span>\r\n\r\n<\/body><\/span><\/pre>\n*CATATAN:<\/strong><\/p>\nHTML5 tidak mendukung format atribut <body bgcolor>. Kamu bisa menggunakan style CSS untuk memberi warna latar dengan contoh coding HTML website berikut:<\/p>\n
<body style=”background-color: rbg(251, 235, 217)”><\/p>\n
<h1> sampai <h6><\/strong><\/span><\/pre>\nTag <h1> mendefinisikan header level satu di halaman web. Tag Heading ini biasanya digunakan untuk membuat judul dan idealnya hanya ada satu di setiap halaman.<\/p>\n
Tag <h2>\u00a0 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.<\/p>\n
Contoh:<\/p>\n
<h1>Heading 1<\/h1><\/span>\r\n\r\n<h2>Heading 2<\/h2><\/span>\r\n\r\n<h3>Heading 3<\/h3><\/span>\r\n\r\n<h4>Heading 4<\/h4><\/span>\r\n\r\n<h5>Heading 5<\/h5><\/span>\r\n\r\n<h6>Heading 6<\/h6><\/span><\/pre>\n<p><\/strong><\/span><\/pre>\nTag Paragraf berguna untuk memulai paragraf baru. Tag ini biasanya menyisipkan dua jeda baris.<\/p>\n
Contoh:<\/p>\n
<p>Your First paragraph.<\/p><\/span>\r\n\r\n<p>Your second paragraph.<\/p><\/span><\/pre>\nKamu juga bisa menggunakan style CSS di tag paragraf coding HTML, seperti berikut ini:<\/p>\n
<p style=\"font-size: 150%;\">Tulisan ini berukuran 50% lebih besar.<\/p><\/span><\/pre>\n<br><\/strong><\/span><\/pre>\nTag Break ini digunakan untuk memberikan jeda baris (break) tunggal antar paragraf atau kalimat. Tag ini berfungsi sama seperti <hr>. Meskipun tag <hr> hanya\u00a0memberikan garis horizontal pada halaman web sehingga cocok untuk memisahkan bagian teks.<\/p>\n
Contoh:<\/p>\n
<p>Baris pertama.<br>Baris kedua.<\/p><\/span><\/pre>\n<img><\/strong><\/span><\/pre>\nJika 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.<\/p>\n
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.<\/p>\n
Contoh:<\/p>\n
<img src=\"wp-content\/uploads\/2019\/04\/sunlit-birds.jpg\" alt=\"gambar burung\"><\/span><\/pre>\n<div><\/span> <\/strong><\/pre>\nElemen divisi konten HTML (div) adalah wadah tingkat blok yang umum untuk “konten aliran”. Konten\u00a0aliran adalah contoh\u00a0coding HTML untuk website yang berisi teks atau konten yang melengkapi halaman web. Elemen anchor, blockquote, dan title dianggap sebagai konten aliran.<\/p>\n
Dalam konsep pemrograman backend, elemen div membantu mengatur kode\u00a0ke dalam bagian yang ditandai dengan jelas.\u00a0Di 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.<\/p>\n
Contoh:<\/p>\n
<div><\/span>\r\n\r\n<img src=\"https:\/\/assets.codepen.io\/6093409\/sprocket.svg\" alt+the HubSpot sprocket logo\"\/><\/span>\r\n\r\n<\/div><\/span>\r\n\r\nTag div juga sering ditemui di versi HTML selain HTML5 dengan atribut align, misalnya:<\/span>\r\n\r\n<div align=\"left\"><\/span>\r\n\r\n--Isi konten--<\/span>\r\n\r\n<\/div><\/span><\/pre>\n<span><\/strong><\/span><\/pre>\nElemen span HTML adalah wadah\u00a0\u00a0inline umum untuk “frasa konten”.Frasa konten mengacu pada teks dan markup yang dikandungnya, seperti tag <abbr>\u00a0 dan <audio>. Tag span pada dasarnya tidak mewakili apa pun, tetapi digunakan untuk mengelompokkan frasa konten karena dua alasan.<\/p>\n
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.<\/p>\n
Contoh:<\/p>\n
<p><span style=\"font-size:36px;\">I<\/span.ni adalah contoh teks span.<\/p><\/span><\/pre>\n<a><\/strong><\/span><\/pre>\nElemen\u00a0anchor HTML digunakan untuk membuat hyperlink.\u00a0Coding HTML ini memerlukan atribut href untuk menentukan\u00a0tujuan link.\u00a0Link tujuan bisa berupa bagian lain dari halaman web yang sama, halaman web lain di\u00a0website yang sama, atau ke\u00a0website eksternal, file, atau alamat email. Kata-kata\u00a0yang diberi Tag Anchor biasanya digarisbawahi dan ditampilkan dengan warna biru.<\/p>\n
Contoh:<\/p>\n
<p><a<\/span>\r\n\r\nhref=\"https:\/\/www.hosteko.com\/blog\"> Panduan Belajar HTML Dasar<\/a> terbaik hanya di Hosteko.<\/p><\/span><\/pre>\nAtribut berguna lainnya untuk tag ini adalah “Target” dan “Title”. Atribut target digunakan untuk membuka link di tab yang sama atau di jendela baru.<\/p>\n
Contoh:<\/p>\n
<a href=\"\"https:\/\/www.hosteko.com\/panduan\"\/\" target=\"_blank\"> Panduan Belajar HTML Dasar<a\/><\/span><\/pre>\n<ul><\/strong><\/span><\/pre>\nCodin HTML\u00a0elemen unordered list digunakan untuk mengelompokkan item ketika urutannya tidak penting. Daftar item yang menggunakan tag ini harus\u00a0didefinisikan 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 .<\/p>\n
Contoh:<\/p>\n
<h1>Daftar Tag dan Atribut Belajar HTML Dasar<\/h1><\/span>\r\n<ul style=\"list-style-type:circle;\"><\/span>\r\n<li> Tag Paragraf (<p><\/>)<\/li><\/span>\r\n<li> Tag Gambar> (<img>)<\/li><\/span>\r\n<li> Tag Heading (<h1><\/h1> sampai <h6><\/h6>)<\/li><\/span>\r\n<li> Tag Divisi (<div>)<\/li><\/span>\r\n<li> Tag Span (<span>)<\/li><\/span>\r\n<li> Tag Anchor (<a>)<\/li><\/span>\r\n<li> Tag Unordered List (<ul><\/li><\/span>\r\n<\/ul><\/span><\/pre>\nSintaks di atas membuat daftar list dengan bentuk ikon bulat hitam.<\/p>\n
<ol><\/strong><\/span><\/pre>\nCoding HTML elemen ordered list digunakan untuk mengelompokkan item ketika\u00a0urutannya penting. Misalnya resep masakan sehingga harus mengikuti urutan tertentu. Langkah-langkahnya harus didefinisikan oleh tag <li> diantara elemen <ul>.<\/p>\n
Secara default, daftar yang diurutkan dimulai dengan nomor 1. Jika kamu ingin memulai dari\u00a0nomor yang berbeda, cukup tambahkan atribut awal dan atur nilainya ke\u00a0nomor yang kamu inginkan. Contoh atribut type yang umum adalah 1, A, a, I (romawi besar) dan i (romawi kecil).<\/p>\n
Contoh:<\/p>\n
<h1>Resep Nasi Goreng<\/h1><\/span>\r\n\r\n<ol type=\"1\"><\/span>\r\n\r\n<li> Panaskan minyak dan tumis bumbu hingga harum.<\/li><\/span>\r\n\r\n<li> Masukkan telur dan wortel, lalu orak-arik hingga matang. <\/li><\/span>\r\n\r\n<li> Masukkan nasi putih, bumbui dengan garam, merica bubuk, dan sedikit kecap. Masak hingga matang dan sajikan<\/li><\/span>\r\n\r\n<\/ol><\/span><\/pre>\n<em><\/strong><\/span><\/pre>\nCoding HTML elemen emphasis\u00a0membantu dalam\u00a0menekankan teks yang ada di dalamnya. Browser biasanya\u00a0membuat teks dalam huruf miring. Cara kerja Tag Emphasis ini sama dengan tag <i> yang mencetak huruf miring pada kata atau kalimat.<\/p>\n
Contoh:<\/p>\n
<p>Ini adlaah paragraf normal.<\/p><\/span>\r\n\r\n<p><em>Paragraf ini penting!<\/em><\/p><\/span>\r\n\r\n<p>Kata <em>ini<\/em> sangat penting!<\/p><\/span><\/pre>\n<strong><\/strong><\/span><\/pre>\nCoding 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.<\/p>\n
Contoh:<\/p>\n
<p>Ini adlaah paragraf normal.<\/p><\/span>\r\n\r\n<p><strong>Paragraf ini penting!<\/strong><\/p><\/span>\r\n\r\n<p>Kata <strong>ini<\/strong> sangat penting!<\/p><\/span><\/pre>\n<table><\/strong><\/span><\/pre>\nMeskipun penggunaan tabel tidak disarankan untuk memformat website, tetapi kamu bisa menggunakan baris dan kolom dengan\u00a0coding HTML <table> untuk mengelompokkan informasi di halaman web.<\/p>\n
Contoh:<\/p>\n
<table><\/span>\r\n<tbody><\/span>\r\n<tr><\/span>\r\n<th>Kolom Pertama<\/th><\/span>\r\n<th>Kolom Kedua<\/th><\/span>\r\n<\/tr><\/span>\r\n<tr><\/span>\r\n<td>Baris 1, Kolom 1<\/td><\/span>\r\n<td>Baris 1, Kolom 2<\/td><\/span>\r\n<\/tr><\/span>\r\n<td>Baris 2, Kolom 1<\/td><\/span>\r\n<td>Baris 2, Kolom 2<\/td><\/span>\r\n<\/tbody><\/span>\r\n<\/table><\/span><\/pre>\nTag <table> dan <\/table>\u00a0 mendefinisikan awal dan akhir tabel. Tag<tbody> berisi seluruh isi konten tabel. Setiap baris tabel\u00a0diapit oleh tag <tr>. Setiap sel dalam setiap baris dibungkus dengan tag <th> dan beberapa tag <td> untuk data kolom.<\/p>\n
<blockquote><\/strong><\/span><\/pre>\nJika 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><\/p>\n
Contoh:<\/p>\n
<blockquote> Dengan Hosteko, kamu bisa [beli domain dan hosting dengan harga murah] (https:\/\/hosteko.com\/promo-domain-murah), lho!<\/blockquote><\/span><\/pre>\n<form><\/span> <\/strong><\/pre>\nFormulir HTML membantu kamu berinteraksi dengan pengguna dengan mengizinkan mereka mengirimkan data ke website kamu. Untuk menginisialisasi formulir HTML,\u00a0kamu harus membuat elemen formulir menggunakan sepasang tag coding HTML <form> dan <\/form>.<\/p>\n
Kamu bisa menggunakan elemen Tag Form untuk membuat formulir text input area dan button. Jika\u00a0\u00a0ingin membuat text input, kamu perlu menulis atribut “teks” di tag <input type = ‘jenis_atribut_form’>.<\/p>\n
Contoh coding HTML website text input:<\/p>\n
<form><\/span>\r\n\r\n<br>Nama depan:<br><\/span>\r\n\r\n<input type = \"text\" name=\"nama depan\"><\/span>\r\n\r\n<br>Nama belakang:<br><\/span>\r\n\r\n<input type = \"text\" name=\"nama belakang\"><\/span>\r\n\r\n<\/form><\/span><\/pre>\nSementara itu, jika kamu ingin membuat formulir multiple choice, kamu perlu menulis atribut\u00a0radio, checkboxes, atau dropdown sesuai kebutuhan.<\/p>\n
Contoh coding HTML website multiple choice:<\/p>\n
<form><\/span>\r\n\r\n<input type = \"radio\" name=\"day\" value=\"monday\" checked>Senin<br><\/span>\r\n\r\n<input type = \"checkboxes\" name=\"day\" value=\"tuesday\" checked>Selasa<br><\/span>\r\n\r\n<input type = \"dropdown\" name=\"day\" value=\"wednesday\" checked>Rabu<\/span>\r\n\r\n<\/form><\/span><\/pre>\nNah, itulah beberapa contoh coding HTML dasar. Semoga bermanfaat!<\/p>\n\n\n