{"id":15,"date":"2019-07-11T12:11:52","date_gmt":"2019-07-11T12:11:52","guid":{"rendered":"https:\/\/www.webhozz.com\/code\/?p=15"},"modified":"2019-09-03T11:57:41","modified_gmt":"2019-09-03T11:57:41","slug":"html","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/code\/html\/","title":{"rendered":"HTML : Membuat File HTML Pertama"},"content":{"rendered":"\n

File HTML hanyalah file teks yang disimpan dengan ekstensi .html atau .htm.<\/p>\n\n\n\n

Dalam tutorial ini kalian akan belajar betapa mudahnya\nmembuat dokumen HTML atau halaman web. Untuk mulai coding HTML, kalian hanya\nperlu dua hal yaitu editor teks sederhana dan browser web.<\/p>\n\n\n\n

Baiklah, mari kita mulai dengan membuat halaman HTML pertama kalian.<\/p>\n\n\n\n

Membuat Dokumen HTML Pertama<\/strong> <\/h4>\n\n\n\n

Mari kita ikuti langkah-langkahnya. Di akhir tutorial ini, kalian akan membuat file HTML yang menampilkan pesan “Hello world” pada browser web kalian. <\/p>\n\n\n\n

Langkah 1: Membuat file HTML<\/h4>\n\n\n\n

Buka editor teks di komputer kalian dan buat file baru. <\/p>\n\n\n\n

Tips: <\/em><\/strong>Kami menyarankan kalian untuk menggunakan Notepad (di Windows), TextEdit (di Mac) atau editor teks sederhana lainnya untuk melakukan ini; jangan gunakan Word atau WordPad! Setelah kalian memahami prinsip-prinsip dasarnya, kalian dapat beralih ke program yang lebih canggih seperti Adobe Dreamweaver. <\/p>\n\n\n\n

Langkah 2: Ketikkan beberapa kode HTML <\/h4>\n\n\n\n

Mulai dengan window baru dan ketikkan kode berikut : <\/p>\n\n\n

\n<!DOCTYPE html>\n<html>\n<head>\n    <title>A simple HTML document<\/title>\n<\/head>\n<body>\n    <p>Hello World!<p>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
Langkah 3: Menyimpan file <\/h4>\n\n\n\n
Sekarang simpan file di desktop kalian dengan nama\n“myfirstpage.html”.<\/p>\n\n\n\n
Catatan: Penting untuk menyimpannya menggunakan ekstensi .html \u2013 karena jika\ntidak beberapa teks editor, seperti Notepad, akan secara otomatis menyimpannya\nsebagai .txt.<\/p>\n\n\n\n
Untuk membuka file di browser. Arahkan ke file kalian lalu klik dua kali maka akan otomatis terbuka di browser Web default kalian. Jika tidak, buka browser kalian dan drag file nya.<\/p>\n\n\n\n
Penjelasan Kode<\/strong> <\/h4>\n\n\n\n
Kalian mungkin berpikir tentang apa kode tersebut. Baiklah, mari kita cari tahu. <\/p>\n\n\n\n
  • Baris pertama <! DOCTYPE html> adalah deklarasi tipe dokumen. Ini menginstruksikan browser web bahwa dokumen ini adalah dokumen HTML5. Tidak masalah tulisannya besar\/kecil.<\/li>
  • Elemen <head> adalah wadah untuk tag yang memberikan informasi tentang dokumen, misalnya, tag <title> dimana tag ini untuk judul dokumen.<\/li>
  • Elemen <body> berisi konten aktual dokumen (paragraf, tautan, gambar, tabel, dan sebagainya) yang dirender di browser web dan ditampilkan kepada pengguna.<\/li><\/ul>\n\n\n\n
    Kalian akan belajar tentang berbagai elemen HTML secara rinci di bab-bab selanjutnya. Untuk saat ini, kita fokus pada struktur dasar dokumen HTML. <\/p>\n\n\n\n
    Catatan:<\/em><\/strong> Deklarasi DOCTYPE muncul di bagian atas halaman web sebelum elemen-elemen  lainnya; namun deklarasi DOCTYPE itu sendiri bukan merupakan tag HTML. Setiap dokumen HTML memerlukan deklarasi DOCTYPE untuk memastikan bahwa halaman kalian akan ditampilkan dengan benar. <\/p>\n\n\n\n
    Tips:<\/em><\/strong> Tag <html>, <head>, dan <body> membentuk kerangka dasar setiap halaman web. Konten di dalam tag <head> dan <\/head> tidak akan terlihat oleh pengguna dengan satu pengecualian: teks di tulis di antara tag <title> dan <\/title> yang muncul sebagai judul pada tab browser. <\/p>\n\n\n\n
    Tag HTML dan Elemen<\/h4>\n\n\n\n
    HTML ditulis dalam bentuk elemen HTML yang terdiri dari tag markup. Tag markup ini adalah karakteristik dasar dari HTML. Setiap tag markup terdiri dari kata kunci, diawali dan ditutup oleh tanda kurung sudut, seperti , , , , <p>, dan sebagainya.<\/p>\n\n\n\n
    Tag HTML biasanya berpasangan seperti <html> dan <\/html>. Tag pertama sering disebut tag pembuka <html>, dan tag kedua disebut tag penutup <\/html>.<\/p>\n\n\n\n
    Tag pembuka dan tag penutup identik, kecuali slash (\/) setelah sudut pembuka tag penutup, untuk memberi tahu browser bahwa perintah telah selesai.<\/p>\n\n\n\n
    Di antara tag awal dan akhir kalian dapat menempatkan konten yang sesuai. Misalnya, paragraf, yang diwakili oleh elemen p, akan ditulis :<\/p>\n\n\n
    \n<p>This is a paragraph.<\/p>\n<!-- Paragraph with nested element -->\n<p>\n    This is <b>another<\/b> paragraph.\n<\/p>\n<\/pre><\/div>\n\n\n
    Kalian akan mempelajari berbagai macam variasi elemen HTML pada bab selanjutnya.<\/p>\n","protected":false},"excerpt":{"rendered":"
    File HTML hanyalah file teks yang disimpan dengan ekstensi .html atau .htm. Dalam tutorial ini kalian akan belajar betapa mudahnya membuat dokumen HTML atau halaman<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-15","post","type-post","status-publish","format-standard","hentry","category-html"],"yoast_head":"\nBelajar HTML : Membuat File HTML Pertama - WebHozz Code<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhozz.com\/code\/html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar HTML : Membuat File HTML Pertama - WebHozz Code\" \/>\n<meta property=\"og:description\" content=\"File HTML hanyalah file teks yang disimpan dengan ekstensi .html atau .htm. Dalam tutorial ini kalian akan belajar betapa mudahnya membuat dokumen HTML atau halaman\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/code\/html\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Code\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-11T12:11:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-03T11:57:41+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/html\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"headline\":\"HTML : Membuat File HTML Pertama\",\"datePublished\":\"2019-07-11T12:11:52+00:00\",\"dateModified\":\"2019-09-03T11:57:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/html\\\/\"},\"wordCount\":544,\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/html\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/html\\\/\",\"name\":\"Belajar HTML : Membuat File HTML Pertama - WebHozz Code\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\"},\"datePublished\":\"2019-07-11T12:11:52+00:00\",\"dateModified\":\"2019-09-03T11:57:41+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/html\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/code\\\/html\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML : Membuat File HTML Pertama\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\",\"name\":\"WebHozz Code\",\"description\":\"Tutorial Web & Pemrograman Indonesia\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/author\\\/dody\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar HTML : Membuat File HTML Pertama - WebHozz Code","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webhozz.com\/code\/html\/","og_locale":"en_US","og_type":"article","og_title":"Belajar HTML : Membuat File HTML Pertama - WebHozz Code","og_description":"File HTML hanyalah file teks yang disimpan dengan ekstensi .html atau .htm. Dalam tutorial ini kalian akan belajar betapa mudahnya membuat dokumen HTML atau halaman","og_url":"https:\/\/www.webhozz.com\/code\/html\/","og_site_name":"WebHozz Code","article_published_time":"2019-07-11T12:11:52+00:00","article_modified_time":"2019-09-03T11:57:41+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/code\/html\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/html\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"headline":"HTML : Membuat File HTML Pertama","datePublished":"2019-07-11T12:11:52+00:00","dateModified":"2019-09-03T11:57:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/code\/html\/"},"wordCount":544,"articleSection":["HTML"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/code\/html\/","url":"https:\/\/www.webhozz.com\/code\/html\/","name":"Belajar HTML : Membuat File HTML Pertama - WebHozz Code","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/#website"},"datePublished":"2019-07-11T12:11:52+00:00","dateModified":"2019-09-03T11:57:41+00:00","author":{"@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"breadcrumb":{"@id":"https:\/\/www.webhozz.com\/code\/html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/code\/html\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/code\/html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/code\/"},{"@type":"ListItem","position":2,"name":"HTML : Membuat File HTML Pertama"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/code\/#website","url":"https:\/\/www.webhozz.com\/code\/","name":"WebHozz Code","description":"Tutorial Web & Pemrograman Indonesia","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/code\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/code\/author\/dody\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":5,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/15\/revisions"}],"predecessor-version":[{"id":403,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/15\/revisions\/403"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/media?parent=15"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/categories?post=15"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/tags?post=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}