{"id":686,"date":"2022-11-30T00:49:17","date_gmt":"2022-11-29T17:49:17","guid":{"rendered":"https:\/\/ototekno.id\/?p=686"},"modified":"2022-11-30T00:49:23","modified_gmt":"2022-11-29T17:49:23","slug":"dasar-pengenalan-html-dan-html-5-yang-harus-diketahui","status":"publish","type":"post","link":"https:\/\/ototekno.id\/dasar-pengenalan-html-dan-html-5-yang-harus-diketahui\/","title":{"rendered":"Dasar pengenalan HTML dan HTML 5"},"content":{"rendered":"\n<p><strong>OtoTekno.id<\/strong> - Dasar pengenalan HTML adalah sesuatu yang harus dikuasai bagi kamu yang ingin membentuk sebuah dasar dari halaman web. Dengan adanya HTML ini kamu dapat membentuk sebuah struktur yang akan dapat dibagikan dan membuat kamu terhubung kepada suatu halaman web.<\/p>\n\n\n\n<p>Untuk menjadi seorang web programmer, langkah awal yang harus dipelajari yakni HTML (Hypertext Markup Language). HTML adalah bahasa pemrograman\u00a0 yang digunakan menulis format dokumen untuk ditampilkan di web.\u00a0<\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">Dasar pengenalan HTML<\/h2>\n\n\n\n<p>Apa itu HTML? dan apa perbedaannya dengan HTML 5? HTML adalah sebuah rangkaian teknologi yang membuat suatu struktur dari sebuah halaman web. HTML ini untuk dapat menghasilkan sebuah konten web tidak bisa berdiri tunggal, HTML ini harus ditambahkan java script, CSS, dan lain-lainnya agar membentuk sebuah konten yang utuh.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/ototekno.id\/wp-content\/uploads\/2022\/11\/HTML-2.png?resize=800%2C475&#038;ssl=1\" alt=\"Dasar pengenalan HTML dan HTML 5\" class=\"wp-image-689\" width=\"800\" height=\"475\" srcset=\"https:\/\/i0.wp.com\/ototekno.id\/wp-content\/uploads\/2022\/11\/HTML-2.png?w=800&amp;ssl=1 800w, https:\/\/i0.wp.com\/ototekno.id\/wp-content\/uploads\/2022\/11\/HTML-2.png?resize=300%2C178&amp;ssl=1 300w, https:\/\/i0.wp.com\/ototekno.id\/wp-content\/uploads\/2022\/11\/HTML-2.png?resize=768%2C456&amp;ssl=1 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Ilustrasi [foto: Canva]<\/figcaption><\/figure>\n\n\n\n<p>Sedangkan HTML 5 adalah Hyper Text Markup Language versi 5, HTML 5 ini diciptakan sebagai penerus dari HTML yang telah ada sebelumnya. Teknologi yang dirilis pada tanggal 22 Januari 2022 ini memiliki fitur yang lebih kompleks dari pada pendahulunya. dengan adanya teknologi baru yang dikeluarkan oleh World Wide Web Consortium dan Web Hypertext Application Technology Working Group ini menambahkan kemajuan baru dalam dunia internet. berikut adalah bahasa-bahasa dasar pengenalan HTML yang perlu kamu ketahui pada Dasar pengenalan HTML:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Istilah-istilah<\/h2>\n\n\n\n<p>Agar dapat memahami pengenalan dasar HTML, kamu harus mengetahui istilah-istilah dasar berikut:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tag, adalah suatu tanda pengenal dokumen pada HTML yang terdiri dua bagian, yaitu Tag pembuka dan Tag penutup. Namun, pada beberapa Tag di HTML ada yang bersifat tunggal atau dapat berdiri sendiri.<\/li>\n\n\n\n<li>Atribut, adalah suatu bentuk informasi tambahan atau khusus yang dapat kamu isi atau kamu berikan pada tag atau dalam beberapa tag.<\/li>\n\n\n\n<li>Hyper Text, adalah sebuah teks aktif yang membuat suatu halaman terhubung dengan halaman lainnya.<\/li>\n\n\n\n<li>Markup Languange, adalah dokumen HTML yang disusun oleh tag-tag markup dan pada setiap tag pada HTML yang berisikan perintah isi dokumen yang berbeda-beda.<\/li>\n\n\n\n<li>Element, adalah isi dari sebuah tag yang berada antara tag pembuka dan penutup, dan hal itu juga termasuk dengan tag itu sendiri dan atribut yang ia miliki, jika ada.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Hal yang Dapat Dilakukan Menggunakan HTML<\/h2>\n\n\n\n<p>Dengan menggunakan HTML, pada dasar pengenalan HTML ada beberapa hal yang dapat kita lakukan di antaranya;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Modifikasi format teks<\/li>\n\n\n\n<li>membuat link<\/li>\n\n\n\n<li>membuat form<\/li>\n\n\n\n<li>menampilkan informasi dalam bentuk tabel<\/li>\n\n\n\n<li>menampilkan daftar dalam bentuk point<\/li>\n\n\n\n<li>dan memutar audio ataupun video<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"475\" src=\"https:\/\/i0.wp.com\/ototekno.id\/wp-content\/uploads\/2022\/11\/HTML-3.png?resize=800%2C475&#038;ssl=1\" alt=\"Dasar pengenalan HTML dan HTML 5\" class=\"wp-image-690\" srcset=\"https:\/\/i0.wp.com\/ototekno.id\/wp-content\/uploads\/2022\/11\/HTML-3.png?w=800&amp;ssl=1 800w, https:\/\/i0.wp.com\/ototekno.id\/wp-content\/uploads\/2022\/11\/HTML-3.png?resize=300%2C178&amp;ssl=1 300w, https:\/\/i0.wp.com\/ototekno.id\/wp-content\/uploads\/2022\/11\/HTML-3.png?resize=768%2C456&amp;ssl=1 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Ilustrasi [foto: Canva]<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Aturan Dasar HTML<\/h2>\n\n\n\n<p>Di dalam dasar pengenalan HTML ada beberapa aturan dasar yang digunakan dalam pemrograman HTML di antaranya:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Di setiap tag\u00a0 harus diapit dengan\u00a0 kurung siku &lt;....><\/li>\n\n\n\n<li>Pada penulisan tag, anda bisa menggunakan huruf kecil maupun huruf besar (kapital), keduanya akan menghasilkan efek yang sama. Hal tsb terjadi karena source code HTML tidak case sensitive. &lt;B> atau &lt;b> merupakan 2 perintah yang sama dan akan menghasilkan output yang sama . Namun, disarankan menggunakan huruf kecil atau lowercase.<\/li>\n\n\n\n<li>Tag biasanya berpasangan, yakni ada yang awal dan ada tag akhir. Tag\u00a0 awal digunakan dalam menandai suatu awal style, dan tag akhir digunakan dalam menandai akhir style. <strong>Contoh<\/strong>: saya senang mengunjungi &lt;b> Website Ototekno.id &lt;\/b>.<\/li>\n\n\n\n<li>Ketika menyimpan dokumen HTML\u00a0 harus menggunakan teks murni\u00a0 yakni file yang menggunakan ekstensi html<br><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Struktur HTML 5<\/h2>\n\n\n\n<p>&lt;!doctype html&gt;<\/p>\n\n\n\n<p>&lt;html lang=\"id\"&gt;<\/p>\n\n\n\n<p>&lt;head&gt;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &lt;title&gt;Ototekno&lt;\/title&gt;<\/p>\n\n\n\n<p>&nbsp; &nbsp; &lt;meta charset=\"UTF-8\" \/&gt;<\/p>\n\n\n\n<p>&lt;\/head&gt;<\/p>\n\n\n\n<p>&lt;body&gt;<\/p>\n\n\n\n<p>&lt;\/body&gt;<\/p>\n\n\n\n<p>&lt;\/html><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Keterangan<\/h2>\n\n\n\n<p><strong>&lt;! DOCTYPE HTML><\/strong>\u00a0<\/p>\n\n\n\n<p>\u00a0Merupakan sebuah instruksi atau info ke web browser tentang versi HTML pada halaman yang ditulis .<\/p>\n\n\n\n<p><strong>Tag &lt;html> &lt;\/html><\/strong><\/p>\n\n\n\n<p>Merupakan tanda awal dan akhir dalam suatu dokumen html.<\/p>\n\n\n\n<p><strong>Attribute Lang<\/strong><\/p>\n\n\n\n<p>Merupakan penjelasan bahasa dari halaman web<\/p>\n\n\n\n<p><strong>Tag &lt;head> &lt;\/head><\/strong><\/p>\n\n\n\n<p>Merupakan isi bagian head, sebagai informasi pada page header.<\/p>\n\n\n\n<p><strong>Tag &lt;meta charset=\"UTF- 8\"\/ >\u00a0<\/strong><\/p>\n\n\n\n<p>Merupakan karakter encoding<\/p>\n\n\n\n<p><strong>Tag &lt;body> &lt;\/body><\/strong><\/p>\n\n\n\n<p>Merupakan bagian dari html yang akan ditampilkan ke dalam\u00a0 browser. Biasanya pada bagian ini memuat teks, link, gambar, form dll.<\/p>\n\n\n\n<p><strong>Baca juga<\/strong>: <a href=\"https:\/\/ototekno.id\/10-tombol-shortcut-windows-yang-jarang-diketahui\/\" target=\"_blank\" data-type=\"post\" data-id=\"455\" rel=\"noreferrer noopener\">10 Tombol Shortcut Windows yang Jarang Diketahui<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"475\" src=\"https:\/\/i0.wp.com\/ototekno.id\/wp-content\/uploads\/2022\/11\/HTML-5.png?resize=800%2C475&#038;ssl=1\" alt=\"Dasar pengenalan HTML dan HTML 5\" class=\"wp-image-691\" srcset=\"https:\/\/i0.wp.com\/ototekno.id\/wp-content\/uploads\/2022\/11\/HTML-5.png?w=800&amp;ssl=1 800w, https:\/\/i0.wp.com\/ototekno.id\/wp-content\/uploads\/2022\/11\/HTML-5.png?resize=300%2C178&amp;ssl=1 300w, https:\/\/i0.wp.com\/ototekno.id\/wp-content\/uploads\/2022\/11\/HTML-5.png?resize=768%2C456&amp;ssl=1 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Ilustrasi [foto: Canva]<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Penutup<\/h2>\n\n\n\n<p>Berikut di atas adalah dasar pengenalan HTML, jika artikel ini membantumu, jangan lupa untuk bagikan ke teman-teman kamu, ya. Untuk mendapatkan lebih banyak artikel menarik lainnya, kamu dapat mencarinya di <em>OtoTekno.id<\/em>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>OtoTekno.id - Dasar pengenalan HTML adalah sesuatu yang harus dikuasai bagi kamu yang ingin me...<span class=\"excerpt-more\"><a href=\"https:\/\/ototekno.id\/dasar-pengenalan-html-dan-html-5-yang-harus-diketahui\/\" title=\"Baca selengkapnya untuk: Dasar pengenalan HTML dan HTML 5\" class=\"read-more-text\">Lanjutkan Membaca<\/a><\/span>","protected":false},"author":3,"featured_media":688,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[11,1],"tags":[88,87],"class_list":["post-686","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-internet","category-tekno","tag-edukasi","tag-html"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/ototekno.id\/wp-content\/uploads\/2022\/11\/HTML-1.png?fit=800%2C475&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ototekno.id\/wp-json\/wp\/v2\/posts\/686","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ototekno.id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ototekno.id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ototekno.id\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ototekno.id\/wp-json\/wp\/v2\/comments?post=686"}],"version-history":[{"count":2,"href":"https:\/\/ototekno.id\/wp-json\/wp\/v2\/posts\/686\/revisions"}],"predecessor-version":[{"id":692,"href":"https:\/\/ototekno.id\/wp-json\/wp\/v2\/posts\/686\/revisions\/692"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ototekno.id\/wp-json\/wp\/v2\/media\/688"}],"wp:attachment":[{"href":"https:\/\/ototekno.id\/wp-json\/wp\/v2\/media?parent=686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ototekno.id\/wp-json\/wp\/v2\/categories?post=686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ototekno.id\/wp-json\/wp\/v2\/tags?post=686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}