HTML adalah bahasa markah yang digunakan untuk membuat dan menyusun halaman web. HTML menggunakan elemen-elemen yang disebut tag<\/em> untuk menandai konten. Tag ini membantu browser untuk memahami struktur konten seperti judul, paragraf, gambar, tabel, form, dan banyak lagi.<\/p>\n\n\n\n Text editor adalah aplikasi yang digunakan untuk menulis dan mengedit kode HTML dan berbagai bahasa pemrograman lainnya. Beberapa contoh text editor populer untuk mengedit HTML adalah:<\/p>\n\n\n\n Text editor yang baik biasanya mendukung fitur syntax highlighting<\/em>, auto-completion, dan dapat dihubungkan dengan extension<\/em> untuk meningkatkan produktivitas pengkodean.<\/p>\n\n\n\n \u201cSetiap website itu punya kerangka. Buat file Penjelasan:<\/p>\n\n\n\n Jika dibuka di browser, kita akan melihat teks sederhana. Sekarang kita buat halaman lebih bermakna:<\/p>\n\n\n\n Penjelasan :<\/p>\n\n\n\n \u201cTag Tambahkan:<\/p>\n\n\n\n Penjelasan:<\/p>\n\n\n\n Ini adalah cikal bakal menu website<\/strong>.<\/p>\n\n\n\n Tambahkan gambar dari internet:<\/p>\n\n\n\n Penjelasan :<\/p>\n\n\n\n \u201cWebsite bisa mengambil gambar langsung dari internet. Penjelasan:<\/p>\n\n\n\n Penjelasan sederhana:<\/p>\n\n\n\n Penjelasan :<\/p>\n\n\n\n \u201cForm digunakan untuk menerima input dari pengguna, Kita coba bungkus bagian-bagian dengan:<\/p>\n\n\n\n Penjelasan :<\/p>\n\n\n\n \u201c HTML (HyperText Markup Language) HTML adalah bahasa markah yang digunakan untuk membuat dan menyusun halaman web. HTML menggunakan elemen-elemen yang disebut tag untuk menandai konten. Tag ini membantu browser untuk memahami struktur konten seperti judul, paragraf, gambar, tabel, form, dan banyak lagi. Text Editor Text editor adalah aplikasi yang digunakan untuk menulis dan mengedit kode […]<\/p>\n","protected":false},"author":1,"featured_media":963,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[81,38],"tags":[88,84,86,91,85,87,89,90,92,94,93],"class_list":["post-1352","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5","category-tutorial-programming","tag-attribut-html","tag-html","tag-tag-body","tag-tag-formating","tag-tag-head","tag-tag-html","tag-tag-paragraf","tag-tag-style","tag-text-editor","tag-visual-studio-code","tag-vscode"],"yoast_head":"\nText Editor<\/h3>\n\n\n\n
\n
\n\n\n\n🟢 Langkah 1 \u2013 Struktur Dasar HTML<\/h2>\n\n\n\n
\n
Seperti rumah, HTML adalah pondasi dan rangkanya.\u201d<\/p>\n<\/blockquote>\n\n\n\nindex.html<\/code>, lalu isi:<\/p>\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n <title>Website Pertamaku<\/title>\n<\/head>\n<body>\n\n <h1>Halo Dunia!<\/h1>\n <p>Ini adalah website pertamaku.<\/p>\n\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n\n
<!DOCTYPE html><\/code> \u2192 memberi tahu browser bahwa ini dokumen HTML<\/li>\n\n\n\n<html><\/code> \u2192 pembungkus seluruh halaman<\/li>\n\n\n\n<head><\/code> \u2192 bagian informasi (judul tab)<\/li>\n\n\n\n<body><\/code> \u2192 semua yang tampil di layar<\/li>\n\n\n\n<h1><\/code> \u2192 judul besar<\/li>\n\n\n\n<p><\/code> \u2192 paragraf<\/li>\n<\/ul>\n\n\n\n
Inilah website pertama mereka<\/strong>.<\/p>\n\n\n\n
\n\n\n\n🟢 Langkah 2 \u2013 Membuat Judul & Paragraf<\/h2>\n\n\n\n
<h1>Toko Online SMK<\/h1>\n<p>Belanja mudah, cepat, dan terjangkau<\/p>\n<\/code><\/pre>\n\n\n\n\n
<h1><\/code> cocok untuk judul besar,
sedangkan <p><\/code> untuk kalimat biasa.\u201d<\/p>\n<\/blockquote>\n\n\n\n
\n\n\n\n🟢 Langkah 3 \u2013 Membuat Link (Menu)<\/h2>\n\n\n\n
<a href=\"#\">Home<\/a> |\n<a href=\"#\">Produk<\/a> |\n<a href=\"#\">Kontak<\/a>\n<\/code><\/pre>\n\n\n\n\n
<a><\/code> artinya anchor<\/em> (link)<\/li>\n\n\n\nhref<\/code> adalah tujuan link<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n🟢 Langkah 4 \u2013 Menampilkan Gambar<\/h2>\n\n\n\n
<img src=\"https:\/\/images.unsplash.com\/photo-1512436991641-6745cdb1723f\" width=\"300\">\n<\/code><\/pre>\n\n\n\n\n
Kita hanya perlu URL gambarnya.\u201d<\/p>\n<\/blockquote>\n\n\n\n
\n\n\n\n🟢 Langkah 5 \u2013 Membuat Daftar Produk<\/h2>\n\n\n\n
<h2>Produk Kami<\/h2>\n\n<div>\n <h3>Kaos Polos<\/h3>\n <p>Harga: Rp 50.000<\/p>\n <button>Beli<\/button>\n<\/div>\n\n<div>\n <h3>Sepatu Sneakers<\/h3>\n <p>Harga: Rp 150.000<\/p>\n <button>Beli<\/button>\n<\/div>\n<\/code><\/pre>\n\n\n\n\n
<div><\/code> adalah kotak pembungkus<\/li>\n\n\n\n<div><\/code><\/li>\n<\/ul>\n\n\n\n
\n\n\n\n🟢 Langkah 6 \u2013 Membuat Tabel Data<\/h2>\n\n\n\n
<h2>Daftar Harga<\/h2>\n\n<table border=\"1\">\n <tr>\n <th>No<\/th>\n <th>Nama Produk<\/th>\n <th>Harga<\/th>\n <\/tr>\n <tr>\n <td>1<\/td>\n <td>Kaos Polos<\/td>\n <td>Rp 50.000<\/td>\n <\/tr>\n <tr>\n <td>2<\/td>\n <td>Sepatu Sneakers<\/td>\n <td>Rp 150.000<\/td>\n <\/tr>\n<\/table>\n<\/code><\/pre>\n\n\n\nTag<\/th> Fungsi<\/th><\/tr><\/thead> <table><\/code><\/td>Membuat tabel<\/td><\/tr> <tr><\/code><\/td>Baris<\/td><\/tr> <th><\/code><\/td>Judul kolom<\/td><\/tr> <td><\/code><\/td>Isi kolom<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n🟢 Langkah 7 \u2013 Membuat Form Kontak<\/h2>\n\n\n\n
<h2>Hubungi Kami<\/h2>\n\n<form>\n <p>\n Nama:<br>\n <input type=\"text\">\n <\/p>\n\n <p>\n Email:<br>\n <input type=\"email\">\n <\/p>\n\n <p>\n Pesan:<br>\n <textarea rows=\"4\"><\/textarea>\n <\/p>\n\n <button>Kirim<\/button>\n<\/form>\n<\/code><\/pre>\n\n\n\n\n
seperti nama, email, dan pesan.\u201d<\/p>\n<\/blockquote>\n\n\n\n🟢 Langkah 8 \u2013 Mengenal HTML5 Section<\/h2>\n\n\n\n
<section>\n <h2>Produk Kami<\/h2>\n<\/section>\n<\/code><\/pre>\n\n\n\n\n
<section><\/code> digunakan untuk membagi halaman menjadi beberapa bagian,
agar struktur website rapi dan mudah dibaca.\u201d<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"