{"id":7558,"date":"2021-08-19T09:09:00","date_gmt":"2021-08-19T02:09:00","guid":{"rendered":"https:\/\/www.jetorbit.com\/blog\/?p=7558"},"modified":"2021-08-16T14:43:41","modified_gmt":"2021-08-16T07:43:41","slug":"panduan-belajar-html-lengkap-untuk-pemula","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/blog\/panduan-belajar-html-lengkap-untuk-pemula\/","title":{"rendered":"Panduan Belajar HTML Lengkap untuk Pemula"},"content":{"rendered":"\n<p>HTML itu menjadi dasar utama ketika memulai belajar pemrograman website. Ada beberapa bahasa pemrograman website lain yang bisa kalian kombinasikan dengan HTML, seperti CSS, PHP dan lain-lain. Baca sampai selesai yuk <strong>Panduan Belajar HTML Lengkap untuk Pemula<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Apa Itu HTML <\/strong><\/h2>\n\n\n\n<p>HTML (<em>Hypertext Markup Language<\/em>) merupakan gabungan dari dua istilah, yakni <em>hypertext <\/em>dan <em>markup language<\/em>.&nbsp;<\/p>\n\n\n\n<p><em>Hypertext <\/em>adalah dokumen berisi tautan yang memungkinkan pengguna terhubung ke halaman lain. Sedangkan <em>markup language<\/em> merupakan bahasa komputer yang terdiri dari sekumpulan kode untuk mengatur struktur dan menyajikan informasi.<\/p>\n\n\n\n<p>Jadi, HTML adalah bahasa <em>markup <\/em>untuk membuat struktur halaman website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Kegunaan HTML <\/strong><\/h2>\n\n\n\n<p>HTML bisa diaplikasikan untuk berbagai keperluan dalam pembuatan website, sebagai berikut:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Membungkus element pada HTML<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Membuat format judul<\/li><li>Membuat heading<\/li><li>Membuat tabel<\/li><li>Membuat paragraph<\/li><li>Membuat list<\/li><li>Membuat form<\/li><li>Membuat tombol<\/li><li>Membuat garis<\/li><li>Menampilkan gambar<\/li><li>Menampilkan video<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Belajar HTML Dasar <\/strong><\/h2>\n\n\n\n<p>Pastikan terlebih dahulu kalian sudah memiliki text editor pada komputer yang kalian gunakan. Biasanya Windows memiliki text editor bawaan bernama Notepad. Jika mau menggunakan text editor lain juga bisa kok, tergantung pada keperluan. Selain itu, Pastikan juga sudah terinstall Web Browser untuk melihat hasil dari script yang kalian tuliskan.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>HTML Basic <\/strong><\/h3>\n\n\n\n<p>Semua dokumen HTML dideklarasikan dengan tipe dokumen <strong>&lt;!DOCTYPE html&gt;<\/strong> dimulai <strong>&lt;html&gt;<\/strong> diakhiri dengan <strong>&lt;\/html&gt;<\/strong>. Di dalam dokumen HTML terdapat bagian yang akan ditampilkan dalam web browser dimulai <strong>&lt;body&gt;<\/strong> dan ditutup dengan <strong>&lt;\/body&gt;<\/strong>.<\/p>\n\n\n\n<p>Berikut contoh HTML basic:<\/p>\n\n\n\n<p>&lt;!DOCTYPE HTML&gt;<\/p>\n\n\n\n<p>&lt;html&gt;<\/p>\n\n\n\n<p>&lt;body&gt;<\/p>\n\n\n\n<p>Ini HTML<\/p>\n\n\n\n<p>&lt;\/body&gt;<\/p>\n\n\n\n<p>&lt;\/html&gt;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>HTML Elements <\/strong><\/h3>\n\n\n\n<p>Dasar HTML yang kedua adalah elements, element terdiri dari tag awal dan tag akhir dengan konten yang berada di tengah-tengah tag. Kira-kira penerapannya seperti ini <strong>&lt;tagname&gt;<\/strong> Ini adalah tagname <strong>&lt;\/tagname&gt;<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Start tag&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/strong><\/td><td><strong>Element content&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/strong><\/td><td><strong>End tag<\/strong><\/td><\/tr><tr><td><strong>&lt;h1&gt;<\/strong><\/td><td><strong>Ini adalah heading<\/strong><\/td><td><strong>&lt;\/h1&gt;<\/strong><\/td><\/tr><tr><td><strong>&lt;p&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/strong><\/td><td><strong>Ini adalah paragraf&nbsp;&nbsp;&nbsp;<\/strong><\/td><td><strong>&lt;\/p&gt;<\/strong><\/td><\/tr><tr><td><strong>&lt;br&gt;&nbsp;&nbsp;&nbsp;<\/strong><\/td><td><\/td><td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>HTML Attributes <\/strong><\/h3>\n\n\n\n<p>Atribut dalam HTML memiliki fungsi untuk memberikan informasi tambahan tentang elemen yang ada pada HTML. Semua elemen dalam HTML memiliki atribut yang berada pada tag awal biasanya dengan diikuti tanda kutip.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Atribut href <\/strong><\/h3>\n\n\n\n<p>Atribut href diawali dengan tag pembuka <strong>&lt;a&gt;<\/strong> dan penutup <strong>&lt;\/a&gt;<\/strong>.<\/p>\n\n\n\n<p>Contoh:<\/p>\n\n\n\n<p>&lt;a href=\u201dhttps:\/\/www.qwords.com\u201d&gt;Ini adalah link&lt;\/a&gt;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Attribute src<\/strong><\/h3>\n\n\n\n<p>Gambar dalam HTML didefinisikan dengan tag <strong>&lt;img&gt;<\/strong> dan nama file akan ditulis dalam atribut <strong>src<\/strong>.<\/p>\n\n\n\n<p>Contoh:<\/p>\n\n\n\n<p>&lt;img src=\u201dgambar_server.jpg\u201d&gt;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Atribut width dan height<\/strong><\/h3>\n\n\n\n<p>Atribut width dan height dalam HTML berfungsi untuk menentukan lebar dan tinggi.<\/p>\n\n\n\n<p>Contoh:<\/p>\n\n\n\n<p>&lt;img src=\u201dgambar_server.jpg\u201d width=\u201d400\u2033 height=\u201d600\u2033&gt;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Atribut alt<\/strong><\/h3>\n\n\n\n<p>Atribut alt merupakan teks <em>alternative <\/em>yang digunakan saat gambar tidak dapat ditampilkan. <em>Alternate image<\/em> ini juga bisa dioptimasi untuk keperluan SEO, lho.<\/p>\n\n\n\n<p>Contoh:<\/p>\n\n\n\n<p>&lt;img src=\u201dgambar_server.jpg\u201d alt=\u201dgambar server windows terbaru\u201d&gt;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Atribut style<\/strong><\/h3>\n\n\n\n<p>Atribut style digunakan untuk menentukan <em>styling<\/em>, seperti warna, font, ukuran, dan lain-lain.<\/p>\n\n\n\n<p>Contoh:<\/p>\n\n\n\n<p>&lt;p style=\u201dcolor:blue\u201d&gt;Ini paragraph style warna biru.&lt;\/p&gt;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Atribut lang<\/strong><\/h3>\n\n\n\n<p>Atribut lang berfungsi untuk mendeklarasikan bahasa, contohnya pada syntax <strong>&lt;html lang=\u201den-US\u201d&gt;<\/strong> menandakan bahasa yang digunakan adalah <strong>en <\/strong>menunjukan <strong>English <\/strong>dan <strong>US <\/strong>menunjukan dialek yang digunakan.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Atribut title<\/strong><\/h3>\n\n\n\n<p>Atribut title untuk menunjukan judul dari sebuah halaman. Biasanya atribut title ini diawali dengan atribut pembuka &lt;p&gt; tittle &lt;\/p&gt;.<\/p>\n\n\n\n<p>Contoh:<\/p>\n\n\n\n<p>&lt;p title=\u201dIni adalah title\u201d&gt;<\/p>\n\n\n\n<p>Ini adalah paragraf.<\/p>\n\n\n\n<p>&lt;\/p&gt;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>HTML Headings<\/strong><\/h3>\n\n\n\n<p>Heading didefinisikan dengan tag &lt;h1&gt; sampai &lt;h6&gt;. Untuk H1 biasanya digunakan untuk judul, H2 untuk sub judul, dan heading lainnya mengikuti.<\/p>\n\n\n\n<p>Contoh:<\/p>\n\n\n\n<p>&lt;h1&gt;Ini Heading 1&lt;\/h1&gt;<\/p>\n\n\n\n<p>&lt;h2&gt;Ini Heading 2&lt;\/h2&gt;<\/p>\n\n\n\n<p>&lt;h3&gt;Ini Heading 3&lt;\/h3&gt;<\/p>\n\n\n\n<p>&lt;h4&gt;Ini Heading 4&lt;\/h4&gt;<\/p>\n\n\n\n<p>&lt;h5&gt;Ini Heading 5&lt;\/h5&gt;<\/p>\n\n\n\n<p>&lt;h6&gt;Ini Heading 6&lt;\/h6&gt;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>HTML Paragraphs<\/strong><\/h3>\n\n\n\n<p>Tag pada paragraph didefinisikan dengan pembuka<strong> &lt;p&gt;<\/strong> dan penutup <strong>&lt;\/p&gt;<\/strong>.<\/p>\n\n\n\n<p>Contoh:<\/p>\n\n\n\n<p>&lt;p&gt;Ini adalah paragraf.&lt;\/p&gt;<\/p>\n\n\n\n<p>&lt;p&gt; Ini adalah paragraf.&lt;\/p&gt;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Apa Itu Tag, Element, dan Atribut <\/strong><\/h2>\n\n\n\n<p>Agar lebih mudah belajar HTML, kalian harus berkenalan dengan tag, elemen, dan atribut karena mereka adalah inti pembentuk HTML.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Tag<\/strong>: digunakan sebagai awalan instruksi atau perintah yang akan dibaca web browser. Misal, <strong>tag &lt;bold&gt;<\/strong>. Tag ini akan meminta browser menampilkan teks dalam format tebal.<\/li><li><strong>Element<\/strong>: merupakan keseluruhan kode yang terdiri dari tag pembuka (&lt;&gt;) hingga tag penutup (&lt;\/ &gt;). Contoh, <strong>&lt;h1&gt; Contoh Elemen &lt;\/h1&gt;<\/strong>. Meski demikian, tidak semua tag HTML memiliki pasangan penutup;<\/li><li><strong>Attribute<\/strong>: yaitu informasi atau perintah tambahan yang berada di dalam elemen. Misal, <strong>&lt;img src=\u201dpantai.jpg\u201d alt=\u201dPantai Baron.\u201d&gt;<\/strong> Elemen ini menggunakan tag &lt;img&gt; dengan atribut sumber gambar (src) dan alt text (alt).<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Kerangka Inti HTML <\/strong><\/h2>\n\n\n\n<p>Jika ketiga inti di atas dikumpulkan maka terbentuklah dokumen HTML.<\/p>\n\n\n\n<p>Selanjutnya, bentuk dokumen HTML paling sederhana dan menjadi kerangka inti yang menyusun setiap dokumen HTML:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>&lt;!DOCTYPE html&gt;<\/strong> berfungsi untuk mendeklarasikan kepada komputer bahwa Anda akan menuliskan perintah dalam kode HTML.<\/li><li><strong>&lt;html&gt;&lt;\/html&gt;<\/strong> merupakan tag yang menandakan bahwa Anda memulai dan mengakhiri dokumen dalam kode HTML.<\/li><li><strong>&lt;head&gt;&lt;head&gt;<\/strong> diisi dengan metadata dari dokumen HTML. Seperti judul tab, deskripsi, dan lain-lain.<\/li><li><strong>&lt;body&gt;&lt;\/body&gt;<\/strong> diisi dengan konten halaman website.<\/li><\/ul>\n\n\n\n<p>Setelah mengetahui kerangka inti HTML, kalian dapat melengkapinya sesuai dengan tujuan dan kebutuhan halaman website kalian.<\/p>\n\n\n\n<p>Jika kalian penasaran untuk melihat dokumen HTML sebuah halaman website, silakan lakukan trik berikut: klik kanan pada mouse dan pilih \u2018View page source\u2019. Atau, sederhananya dengan menekan <strong>Ctrl + U<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/08\/Panduan-Belaja-HTML-Lengkap-untuk-Pemula-1.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"275\" height=\"295\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/08\/Panduan-Belaja-HTML-Lengkap-untuk-Pemula-1.jpg\" alt=\"panduan-belajar-html-untuk-pemula\" class=\"wp-image-7560\" \/><\/a><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Belajar HTML dengan Editor HTML<\/strong><\/h2>\n\n\n\n<p>Kalian sudah menggebu-gebu untuk praktik, kah? Nah, sekarang saatnya kalian menyiapkan editor HTML. Editor HTML merupakan lembar kerja untuk membuat dan mengedit dokumen HTML.<\/p>\n\n\n\n<p>Ada berbagai editor HTML yang bisa digunakan secara gratis, seperti Notepad++, Atom, Bracket, dan sebagainya. Namun, sebelum memilih editor HTML, silakan pastikan OS komputer kalian juga kompatibel.<\/p>\n\n\n\n<p>Setelah menginstal editor HTML, kalian bisa belajar HTML dengan lebih mudah karena fitur yang ditawarkan oleh editor HTML akan mempercepat proses kerja kalian.<\/p>\n\n\n\n<p>Nah Guys, jadi itu beberapa panduan dasar belajar HTML untuk pemula. Perjalanan kalian untuk belajar HTML masih terus berlanjut, apalagi jika kalian ingin sampai level <em>expert<\/em>. Semangat ya, Guys!<\/p>\n\n\n\n<p>Have a good day and keep healthy<\/p>\n\n\n\n<p><br><br>Bagi kalian yang masih bingung bagaimana cara membuat website, tenang saja. Kami punya solusinya. Kalian bisa langsung cek ke <a href=\"https:\/\/www.jetorbit.com\/\">Jetorbit<\/a> guna memenuhi kebutuhan pembuatan website kalian. Selain itu, kami juga menyediakan VPS dan bisa kalian cek <a href=\"https:\/\/www.jetvm.com\/\" target=\"_blank\" rel=\"noopener\">di sini<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML itu menjadi dasar utama ketika memulai belajar pemrograman website. Ada beberapa bahasa pemrograman website lain yang bisa kalian kombinasikan dengan HTML, seperti CSS, PHP dan lain-lain. Baca sampai selesai yuk Panduan Belajar HTML Lengkap untuk Pemula Apa Itu HTML HTML (Hypertext Markup Language) merupakan gabungan dari dua istilah, yakni hypertext dan markup language.&nbsp; Hypertext &#8230; <a title=\"Panduan Belajar HTML Lengkap untuk Pemula\" class=\"read-more\" href=\"https:\/\/www.jetorbit.com\/blog\/panduan-belajar-html-lengkap-untuk-pemula\/\" aria-label=\"Read more about Panduan Belajar HTML Lengkap untuk Pemula\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":7559,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"generate_page_header":"","footnotes":""},"categories":[25],"tags":[2033,2028,1385,283,7,1099,2032,2031,2029,2030,2034],"class_list":["post-7558","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-info","tag-apa-itu-element","tag-apa-itu-html","tag-apa-itu-tag","tag-domain-murah","tag-hosting-murah","tag-html","tag-html-basic","tag-html-dasar","tag-hypertext-adalah","tag-kegunaan-html","tag-kerangka-inti-html","infinite-scroll-item","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"_links":{"self":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/7558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/comments?post=7558"}],"version-history":[{"count":1,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/7558\/revisions"}],"predecessor-version":[{"id":7561,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/7558\/revisions\/7561"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media\/7559"}],"wp:attachment":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media?parent=7558"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/categories?post=7558"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/tags?post=7558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}