Pemrograman HTML<\/a> digunakan sebagai bahasa dasar pembuatan website dan berperan sebagai struktur sebuah website. HTML digambarkan dengan tag<\/em> ditulis menggunakan kurung sudut ( < ), seperti <p> digunakan untuk menulis teks dokumen. Contoh lain <H1> digunakan untuk judul sebuah dokumen atau halaman website.<\/p>\n\n\n\n Jika dipadukan dengan Cascading Style Sheets (CSS) dan JavaScript, HTML adalah tampilan sebuah website, CSS untuk mempercantik tampilan website, sedangkan JavaScript membuat website lebih dinamis.<\/p>\n\n\n\n Ide pertama HTML dimulai pada tahun 1980 oleh Tim Berners-Lee yang bekerja di CERN (Organisasi Eropa untuk Riset Nuklir), mengusulkan sebuah sistem yang digunakan untuk berbagi dokumen sesama ilmuan di CERN.<\/p>\n\n\n\n Pada akhir tahun 1990 Tim Berners-Lee menspesifikasikan HTML dan menulis jaringan beserta perangkat lunaknya. Masih ditahun sama, Berners-Lee dan Robert Cailliau, insinyur sistem data CERN berkolaborasi, namun tidak diterima secara resmi oleh CERN.<\/p>\n\n\n\n Dalam perkembangannya, akhir tahun 1991 Tim menjelaskan secara umum dari HTML adalah dokumen yang disebut “Tanda HTML”. Tanda ini menggambarkan 18 elemen awal mula, versi sederhana dari HTML.<\/p>\n\n\n\n Ada beberapa versi HTML awal hingga saat ini, yaitu;<\/p>\n\n\n\n Berikut contoh struktur HTML dari kode yang dibuat:<\/p>\n\n\n\n Penulisan HTML diawali dengan deklarasi !DOCTYPE , dilanjutkan tag pembuka <html> yang didalamnya terdapat <head> dan <body>.<\/p>\n\n\n\n Jika kita sederhanakan, struktur HTML ada tiga, yaitu:<\/p>\n\n\n\n Penulisan kode HTML diawali dengan kode <!DOCTYPE html>. Ini adalah tag deklarasi yang menyatakan format dokumen html dengan versi HTML 5.<\/p>\n\n\n\n Berbeda lagi saat dulu masih memakai HTML 4, tag deklarasinya lumayan panjang.<\/p>\n\n\n\n Sebenarnya kita bisa saja tidak menyertakan tag deklarasi ini didalam struktur kode HTML yang kita buat. Tetapi akan melanggar standar aturan oleh W3C.<\/p>\n\n\n\n Setelah menuliskan tag deklarasi <!DOCTYPE html> , dibawahnya terdapat tag pembuka HTML.<\/p>\n\n\n\n Tag pembuka <html> wajib ada setiap menulis kode html. Di dalam tag HTML kita tambahkan attribut lang=”en” , untuk menyatakan dokumen ini dibuat menggunakan bahasa inggris.<\/p>\n\n\n\n Setelah tag pembuka HTML, selanjutnya ada tag <head>, <body>, bagian terakhir diisi tag penutup HTML <\/html>.<\/p>\n\n\n\n Bagian head diawali dengan tag <head> dan ditutup dengan <\/head>. Didalam tag head ini biasanya kita menyematkan kode-kode yang dibaca oleh mesin, seperti<\/p>\n\n\n\n Pada bagian body ini yang nantinya ditampilkan pada browser atau peramban. Penulisan tag nya dimulai dengan <body> dan penutup <\/body>.<\/p>\n\n\n\n Didalam tag body nantinya kita akan menulis kode html dengan berbagai macam tag. Misalnya <p> <\/p> digunakan untuk membuat paragraf. <\/p>\n\n\n\n Contoh tag lain, element, atribut dan cara memakainya akan kami lanjutkan pada artikel selanjutnya.<\/p>\n\n\n\n Dalam belajar HTML untuk pemula, memahami tag-tag dasar adalah langkah penting. Tag ini digunakan untuk memberi tahu browser bagaimana cara menampilkan konten pada halaman web. Berikut beberapa tag HTML yang paling sering digunakan, lengkap dengan contoh singkatnya:<\/p>\n\n\n\n Digunakan untuk judul atau heading, mulai dari paling besar <h1> hingga paling kecil <h6>.<\/p>\n\n\n\n Digunakan untuk membuat paragraf.<\/p>\n\n\n\n Digunakan untuk membuat hyperlink <\/em>ke halaman lain atau url website lain.<\/p>\n\n\n\n Menampilkan gambar pada halaman web.<\/p>\n\n\n\n Digunakan untuk membuat daftar, baik tidak berurutan (unordered list) maupun berurutan (ordered list).<\/p>\n\n\n\n Berikut adalah beberapa persiapan yang perlu Anda lakukan sebelum memulai belajar HTML.<\/p>\n\n\n\n Teks editor seperti Notepad, Notepad++, Visual Studio Code sebagai alat pertama yang harus disiapkan. Selain itu, Teks editor digunakan untuk menulis kode HTML. Selain tiga teks editor tersebut, Anda bisa memakai aplikasi lainnya dengan fungsi yang sama<\/p>\n\n\n\n Pada artikel ini kita akan menggunakan teks editor Visual Studio Code<\/p>\n\n\n\n Browser <\/em>atau peramban digunakan untuk membuka halaman HTML yang sudah dibuat. Anda bisa memakai Google Chrome, Mozilla Firefox, Safari, Opera, maupun browser <\/em>lain.<\/p>\n\n\n Setelah mengenal tag-tag dasar, langkah selanjutnya dalam belajar HTML untuk pemula adalah mulai menulis file HTML sendiri. Proses ini sangat mudah karena hanya membutuhkan editor teks dan browser. Berikut langkah-langkahnya:<\/p>\n\n\n\n 1. Pilih Editor Teks<\/strong><\/p>\n\n\n\n Anda bisa menggunakan aplikasi sederhana seperti Notepad (Windows) atau TextEdit (Mac). Namun, untuk pengalaman yang lebih nyaman, gunakan editor modern seperti Visual Studio Code, Sublime Text, atau Notepad++ yang memiliki fitur highlight kode.<\/p>\n\n\n\n 2. Tulis Kode HTML Dasar<\/strong><\/p>\n\n\n\n Berikut contoh struktur HTML paling sederhana:<\/p>\n\n\n\n 3. Simpan File dengan Ekstensi .html<\/strong><\/p>\n\n\n\n 4. Buka File di Browser<\/strong><\/p>\n\n\n\n Cukup klik dua kali file index.html tadi, maka file akan otomatis terbuka di browser default (Chrome, Firefox, Edge, dll).<\/p>\n\n\n\n Berikut adalah beberapa tips dalam membuat file HTML untuk pemula.<\/p>\n\n\n\n Jika memakai notepad, pilih save as type: All Files kemudian simpanlah file dengan extention “.html” <\/p>\n\n\n\n Jika ingin membuat file untuk halaman depan atau homepage website. Sangat disarankan menamai dengan nama index.html . Karena file index.html otomatis dibuka saat membuka halaman website. Dalam penamaan file HTML, hindari menamainya dengan karakter aneh, karakter lebay, dan nama file dengan spasi. Karena kurang bagus untuk dibaca manusia maupun oleh mesin.<\/p>\n\n\n\n Belajar HTML untuk pemula bisa jadi terasa membingungkan jika tidak tahu harus mulai dari mana. Agar proses belajar lebih cepat dan efektif, berikut beberapa tips yang bisa Anda terapkan:<\/p>\n\n\n\n Selain itu, kami sarankan agar dokumentasikan setiap tag atau kode yang sudah dipelajari dalam catatan pribadi. Ini akan memudahkan saat ingin mengingat kembali.<\/p>\n\n\n\n Seperti sudah disampaikan sebelumnya, artikel ini adalah bagian dari seri belajar HTML untuk pemula. Berikut beberapa artikel lanjutan yang bisa Anda ikuti:<\/p>\n\n\n\n Belajar HTML adalah langkah untuk pemula sebelum mendalami bahasa pemrograman web lainnya. Dengan memahami dasar-dasar HTML, Anda sudah memiliki fondasi kuat untuk membuat website sederhana hingga mengembangkan proyek web yang lebih kompleks. <\/p>\n\n\n\n Jangan khawatir jika di awal terasa sulit, karena dengan latihan konsisten, Anda akan semakin mahir. <\/p>\n\n\n\n Ikuti juga seri belajar HTML dari Rumahweb untuk mendapatkan panduan lengkap, mulai dari teori, contoh praktis, hingga tips lanjutan yang akan membantu perjalanan Anda menjadi seorang web developer<\/em>.<\/p>\n","protected":false},"excerpt":{"rendered":" Belajar HTML adalah langkah pertama untuk memahami cara membuat website dari nol. Dengan belajar HTML untuk pemula, Anda bisa mengetahui struktur dasar halaman web, menampilkan teks, gambar, hingga link, sehingga menjadi bekal penting sebelum melanjutkan ke CSS atau JavaScript. Artikel ini merupakan bagian dari seri pembelajaran HTML dari Rumahweb, yang akan terus berlanjut untuk membantu […]<\/p>\n","protected":false},"author":321,"featured_media":25322,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[7],"tags":[1697,56,2278,2524],"class_list":{"0":"post-21","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-programming","8":"tag-belajar-html","9":"tag-html","10":"tag-html-dasar","11":"tag-html-pemula"},"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2021\/10\/Banner-Belajar-HTML-Pengenalan-Dasar-HTML-Untuk-Pemula-Part-1.png","jetpack_shortlink":"https:\/\/wp.me\/p8n3G7-l","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/321"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":2,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/21\/revisions"}],"predecessor-version":[{"id":61853,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/21\/revisions\/61853"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/25322"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=21"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=21"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Sejarah Singkat HTML<\/h2>\n\n\n\n
\n
Struktur Dasar HTML<\/h2>\n\n\n\n
![\"Struktur](\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2006\/01\/Struktur-HTML.jpg\")
<\/a>Deklarasi<\/h3>\n\n\n\n
<!DOCTYPE HTML PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/html4\/loose.dtd\"><\/code><\/pre>\n\n\n\n<html lang=\"en\"><\/code><\/pre>\n\n\n\nHead<\/h3>\n\n\n\n
\n
![\"Tag](\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2006\/01\/Tag-head-Dasar-dasar-HTML.jpg\")
<\/a>Body<\/h3>\n\n\n\n
Tag HTML yang Paling Sering Digunakan<\/h2>\n\n\n\n
1. Tag <h1> sampai <h6><\/h3>\n\n\n\n
<h1>Judul Artikel<\/h1>\n<h2>Sub Judul<\/h2><\/code><\/pre>\n\n\n\n2. Tag <p><\/h3>\n\n\n\n
<p>Ini adalah paragraf pertama saya.<\/p><\/code><\/pre>\n\n\n\n3. Tag <a><\/h3>\n\n\n\n
<a href=\"https:\/\/www.rumahweb.com\">Kunjungi Rumahweb<\/a><\/code><\/pre>\n\n\n\n4. Tag <img><\/h3>\n\n\n\n
<img src=\"gambar.jpg\" alt=\"Contoh Gambar\" width=\"300\">\n<\/code><\/pre>\n\n\n\n5. Tag <ul>, <ol>, dan <li><\/h3>\n\n\n\n
<ul>\n <li>Item pertama<\/li>\n <li>Item kedua<\/li>\n<\/ul>\n\n<ol>\n <li>Langkah pertama<\/li>\n <li>Langkah kedua<\/li>\n<\/ol>\n<\/code><\/pre>\n\n\n\nPersiapan Belajar HTML<\/h2>\n\n\n\n
1. Teks editor untuk menulis kode HTML<\/h3>\n\n\n\n
![\"visual](\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2006\/01\/visual-studio-code-dasar-dasar-html.jpg\")
<\/a><\/figure>\n\n\n\n2. Browser <\/em>untuk membuka HTML<\/h3>\n\n\n\n
![\"dasar-dasar](\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2006\/01\/dasar-dasar-html-I-browser.jpg\")
<\/a><\/figure>\n<\/div>\n\n\nBelajar Menulis File HTML<\/h2>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n <title>Halaman Pertama Saya<\/title>\n<\/head>\n<body>\n <h1>Selamat Datang<\/h1>\n <p>Ini adalah halaman HTML pertama saya!<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\n
Tips Membuat file HTML untuk pemula<\/h2>\n\n\n\n
1. Extension file HTML<\/h3>\n\n\n\n
![\"dasar-dasar](\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2006\/01\/dasar-dasar-html-I-journal-Rumahweb.jpg\")
<\/a><\/figure>\n\n\n\n2. Nama khusus untuk halaman depan atau homepage<\/h3>\n\n\n\n
Sebagai contoh, saat membuka website www.rumahweb.com , maka tampilanya sama saat kita membuka www.rumahweb.com\/index.html<\/p>\n\n\n\n3. Penamaan file<\/h3>\n\n\n\n
![\"penamaan](\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2006\/01\/penamaan-file-dalam-HTML-Dasar-dasar-HTML.jpg\")
<\/a><\/figure>\n\n\n\nTips Mempercepat Belajar HTML<\/h2>\n\n\n\n
\n
Pahami struktur dasar HTML (tag <html><\/code>, <head><\/code>, <body><\/code>) sebelum mencoba hal-hal rumit seperti CSS atau JavaScript.<\/li>\n\n\n\n
Jangan hanya membaca teori. Cobalah langsung menulis kode HTML sederhana dan buka hasilnya di browser. Dengan begitu, Anda lebih cepat memahami fungsi setiap tag.<\/li>\n\n\n\n
Pilih editor teks seperti Visual Studio Code<\/strong> atau Notepad++<\/strong> yang bisa memberi warna pada kode. Ini membantu mengenali kesalahan dengan lebih mudah.<\/li>\n\n\n\n
Sumber seperti MDN Web Docs<\/strong> atau tutorial dari platform belajar coding dapat memberi penjelasan mendalam.<\/li>\n\n\n\n
Banyak website menyediakan latihan coding gratis, misalnya W3Schools atau FreeCodeCamp. Semakin sering berlatih, semakin cepat Anda menguasainya.<\/li>\n\n\n\n
Cobalah membuat halaman sederhana, seperti profil diri atau daftar produk. Proyek nyata akan membuat Anda lebih terbiasa dengan alur kerja HTML.<\/li>\n\n\n\n
Luangkan waktu belajar 30\u201360 menit per hari. Konsistensi jauh lebih efektif daripada belajar dalam jumlah banyak tapi jarang.<\/li>\n<\/ol>\n\n\n\nKelas Belajar HTML untuk Pemula<\/h2>\n\n\n\n
\n
Penutup<\/h2>\n\n\n\n