{"id":8740,"date":"2023-10-23T04:32:00","date_gmt":"2023-10-23T04:32:00","guid":{"rendered":"https:\/\/zaferinadigital.com\/optimaise\/?p=8740"},"modified":"2023-12-13T07:14:42","modified_gmt":"2023-12-13T07:14:42","slug":"4-cara-membuat-website-dengan-html-buat-pemula","status":"publish","type":"post","link":"https:\/\/zaferinadigital.com\/optimaise\/4-cara-membuat-website-dengan-html-buat-pemula\/","title":{"rendered":"4 Cara Membuat Website dengan HTML Buat Pemula"},"content":{"rendered":"\n<p>Bagi pemilik bisnis, kepemilikan <em>website <\/em>untuk kebutuhan <em>marketing<\/em> memang penting banget. Dengan memiliki <em>website<\/em> kamu bisa menjangkau lebih banyak audiens, target pemasaranmu pun tentunya jadi lebih luas. Bagi <em>web developer<\/em> yang ingin membuat portofolio, membuat <em>website<\/em>mu sendiri juga bisa menjadi cara untuk menunjukkan kebolehanmu. Cara <a href=\"https:\/\/zaferinadigital.com\/optimaise\/jasa-pembuatan-website\/\">pembuatan <em>website<\/em><\/a> yang paling kami rekomendasikan adalah dengan menggunakan kode HTML. <strong>Cara membuat website dengan html <\/strong>ini gampang banget dan cocok bagi pemula. Yuk, simak ulasan langkah-langkahnya berikut:<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h4>Table of Contents<\/h4><nav><ol><li><a href=\"#kenapa-harus-tahu-cara-membuat-website-dengan-html\">Kenapa Harus Tahu Cara Membuat Website dengan HTML?<\/a><\/li><li><a href=\"#yang-harus-dipersiapkan-untuk-cara-membuat-website-dengan-html\">Yang Harus Dipersiapkan untuk Cara Membuat Website dengan HTML<\/a><\/li><li><a href=\"#cara-membuat-website-dengan-html\">Cara Membuat Website dengan HTML<\/a><\/li><li><a href=\"#1-buat-struktur-project-websitemu\">1. Buat Struktur Project Websitemu<\/a><\/li><li><a href=\"#2-tambahkan-kode-html-di-dalam-file-index-html\">2. Tambahkan Kode HTML di dalam File Index.html<\/a><ol><li><a href=\"#langkah-pertama-atur-tag-head\">Langkah Pertama: Atur Tag Head<\/a><\/li><li><a href=\"#langkah-kedua-atur-tag-body\">Langkah Kedua: Atur Tag Body<\/a><\/li><li><a href=\"#langkah-ketiga-tambahkan-informasi-lain\">Langkah Ketiga: Tambahkan Informasi Lain<\/a><\/li><li><a href=\"#langkah-keempat-tambahkan-testimoni-dan-kontak\">Langkah Keempat: Tambahkan Testimoni dan Kontak<\/a><\/li><\/ol><\/li><\/ol><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"kenapa-harus-tahu-cara-membuat-website-dengan-html\">Kenapa Harus Tahu Cara Membuat Website dengan HTML?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"621\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Kenapa-Harus-Tahu-Cara-Membuat-Website-dengan-HTML-1024x621.webp\" alt=\"Kenapa Harus Tahu Cara Membuat Website dengan HTML?\" class=\"wp-image-8753\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Kenapa-Harus-Tahu-Cara-Membuat-Website-dengan-HTML-1024x621.webp 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Kenapa-Harus-Tahu-Cara-Membuat-Website-dengan-HTML-300x182.webp 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Kenapa-Harus-Tahu-Cara-Membuat-Website-dengan-HTML-768x466.webp 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Kenapa-Harus-Tahu-Cara-Membuat-Website-dengan-HTML-1536x931.webp 1536w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Kenapa-Harus-Tahu-Cara-Membuat-Website-dengan-HTML.webp 1676w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Kenapa Harus Tahu Cara Membuat Website dengan HTML?<\/figcaption><\/figure>\n\n\n\n<p>Mungkin kamu bertanya-tanya, kenapa wajib tahu <strong>cara membuat website dengan html<\/strong>? Jika kamu seorang <em>web developer<\/em> pemula sekalipun, ilmu HTML merupakan ilmu pemrograman yang wajib kamu kuasai. Selain itu, pembuatan <em>website<\/em> dengan kode HTML dan CSS adalah yang paling banyak digunakan di berbagai situs di dunia. Jadi, dengan menguasai langkah-langkah membuat <em>website<\/em> dengan kode HTML, kamu bisa memanfaatkan berbagai macam <em>platform<\/em> pembuatan <em>website<\/em> secara maksimal.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"yang-harus-dipersiapkan-untuk-cara-membuat-website-dengan-html\">Yang Harus Dipersiapkan untuk Cara Membuat Website dengan HTML<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"584\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Yang-Harus-Dipersiapkan-untuk-Cara-Membuat-Website-dengan-HTML-1024x584.webp\" alt=\"Yang Harus Dipersiapkan untuk Cara Membuat Website dengan HTML\" class=\"wp-image-8741\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Yang-Harus-Dipersiapkan-untuk-Cara-Membuat-Website-dengan-HTML-1024x584.webp 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Yang-Harus-Dipersiapkan-untuk-Cara-Membuat-Website-dengan-HTML-300x171.webp 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Yang-Harus-Dipersiapkan-untuk-Cara-Membuat-Website-dengan-HTML-768x438.webp 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Yang-Harus-Dipersiapkan-untuk-Cara-Membuat-Website-dengan-HTML-1536x877.webp 1536w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Yang-Harus-Dipersiapkan-untuk-Cara-Membuat-Website-dengan-HTML-2048x1169.webp 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Yang Harus Dipersiapkan untuk Cara Membuat Website dengan HTML<\/figcaption><\/figure>\n\n\n\n<p>\u00a0Sudah siap untuk mengetahui <strong>cara membuat website dengan html<\/strong>? Sebelum itu, kamu perlu tahu bahwa ada 2 <em>basic tools<\/em> atau <em>tools<\/em> dasar yang dipakai untuk membuat <em>website<\/em>. Kedua <em>tool <\/em>tersebut adalah Text Editor dan Web Browser. <em>Tool <\/em>\u201cText Editor\u201d ini dipakai untuk menuliskan atribut kode HTML yang akan kamu aplikasikan pada <em>web browser<\/em>.<\/p>\n\n\n\n<p>Baca juga: <a href=\"https:\/\/zaferinadigital.com\/optimaise\/afiliator-adalah-apa-dan-ini-3-keuntungannya\/\" data-type=\"post\" data-id=\"8864\">Afiliator Adalah Apa dan Ini 3 Keuntungannya<\/a><\/p>\n\n\n\n<p>Sebenarnya, ada banyak banget jenis <em>text editor tool<\/em> yang bisa kamu pakai untuk mempraktekkan <strong>cara membuat website dengan html<\/strong>. Kebanyakan <em>web developer<\/em> menggunakan Visual Code Studio. Tapi, ada juga <em>tools<\/em> lain, seperti Notepad++, Emacs, Bluefish, Komodo Edit, dan lain sebagainya. Pilih yang manapun sesuai dengan preferensi dan kenyamananmu, ya!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cara-membuat-website-dengan-html\">Cara Membuat Website dengan HTML<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Cara-Membuat-Website-dengan-HTML-1024x512.webp\" alt=\"Cara Membuat Website dengan HTML\" class=\"wp-image-8742\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Cara-Membuat-Website-dengan-HTML-1024x512.webp 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Cara-Membuat-Website-dengan-HTML-300x150.webp 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Cara-Membuat-Website-dengan-HTML-768x384.webp 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Cara-Membuat-Website-dengan-HTML.webp 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Cara Membuat Website dengan HTML<\/figcaption><\/figure>\n\n\n\n<p>Nah, selamat! Kamu sudah sampai di tahap ini. Setelah menemukan <em>text editor tool<\/em> dan <em>web browser<\/em> yang cocok denganmu, saatnya kamu menyimak langkah-langkah <strong>cara membuat website dengan html <\/strong>berikut ini:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-buat-struktur-project-websitemu\">1. Buat Struktur Project Websitemu<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/1.-Buat-Struktur-Project-Websitemu-1024x634.webp\" alt=\"1. Buat Struktur Project Websitemu\" class=\"wp-image-8748\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/1.-Buat-Struktur-Project-Websitemu-1024x634.webp 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/1.-Buat-Struktur-Project-Websitemu-300x186.webp 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/1.-Buat-Struktur-Project-Websitemu-768x475.webp 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/1.-Buat-Struktur-Project-Websitemu.webp 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Buat Struktur Project Websitemu<\/figcaption><\/figure>\n\n\n\n<p><strong>Cara membuat website dengan html <\/strong>yang pertama adalah, buka <em>tool text editor<\/em>mu terlebih dulu. Setelah itu, buat folder di dalam <em>tool <\/em>tersebut dan berikan nama pada <em>folder<\/em> tersebut. Selanjutnya, buatlah folder lagi dan kali ini simpan <em>folder<\/em> tersebut dengan nama \u201cGambar\u201d. Nantinya, folder kedua itu kamu pakai untuk menyimpan gambar-gambar yang akan kamu tampilkan ke dalam <em>website<\/em>mu.<\/p>\n\n\n\n<p>Setelah itu, buatlah <em>file <\/em>baru dan beri nama style.css dan index.html di dalam folder pertama. <em>For your information<\/em>, <em>file <\/em>index.html ini nantinya yang akan menjadi inti dari laman situs yang akan kamu buat. Di dalamnya, nanti kamu bisa menambahkan konten-konten yang akan tayang di dalam <em>website<\/em>. Sedangkan, <em>file <\/em>style.css ini nantinya akan bersifat sebagai <em>file <\/em>yang bertujuan untuk mengubah tampilan dari <em>website<\/em>mu. File ini penting banget jika kamu ingin membuat tampilan <em>website<\/em>mu jadi kelihatan lebih indah.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2-tambahkan-kode-html-di-dalam-file-index-html\">2. Tambahkan Kode HTML di dalam File Index.html<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/2.-Tambahkan-Kode-HTML-di-dalam-File-Index--1024x512.webp\" alt=\"Tambahkan Kode HTML di dalam File Index.html\" class=\"wp-image-8752\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/2.-Tambahkan-Kode-HTML-di-dalam-File-Index--1024x512.webp 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/2.-Tambahkan-Kode-HTML-di-dalam-File-Index--300x150.webp 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/2.-Tambahkan-Kode-HTML-di-dalam-File-Index--768x384.webp 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/2.-Tambahkan-Kode-HTML-di-dalam-File-Index-.webp 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Tambahkan Kode HTML di dalam File Index.html<\/figcaption><\/figure>\n\n\n\n<p>Seperti yang diulas sebelumnya, file index.html ini nantinya bakal digunakan untuk menjadi inti dari struktur <em>website<\/em>mu. Nah, makanya, kamu perlu membuat susunan <em>file<\/em> ini dengan memasukkan kode HTML di dalam <em>file <\/em>tersebut. <em>Basically<\/em>, setiap HTML terdiri dari 4 bagian utama, yaitu:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tag HTML: <\/strong>Tag ini menampung semua elemen html yang kamu pakai untuk membuat <em>website<\/em>mu<\/li>\n\n\n\n<li><strong>Tag Doctype (DTD): <\/strong><em>Tag<\/em> ini harus diletakkan di bagian awal dari dokumen HTMLmu. Fungsi dari <em>tag <\/em>ni adalah untuk menunjukkan jenis dokumen beserta versi HTML yang kamu pakai untuk kemudian diproses oleh <em>browser<\/em><\/li>\n\n\n\n<li><strong>Tag Head: <\/strong>Jenis tag ini biasanya terdiri dari informasi kode yang nggak dimunculkan pada tampilan <em>website<\/em>. Contohnya seperti <em>source js<\/em> dan <em>source css, meta charset<\/em>, dan <em>title<\/em><\/li>\n\n\n\n<li><strong>Tag Body: <\/strong>Tag ini menampung seluruh elemen yang akan ditampilkan di laman <em>website<\/em>mu. Termasuk di dalamnya adalah kontenmu.<\/li>\n<\/ul>\n\n\n\n<p>Secara singkat, berikut adalah langkah-langkah pembuatan struktur <em>website<\/em>mu:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"langkah-pertama-atur-tag-head\">Langkah Pertama: Atur Tag Head<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Pertama-Atur-Tag-Head-1024x512.webp\" alt=\"Langkah Pertama: Atur Tag Head\" class=\"wp-image-8751\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Pertama-Atur-Tag-Head-1024x512.webp 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Pertama-Atur-Tag-Head-300x150.webp 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Pertama-Atur-Tag-Head-768x384.webp 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Pertama-Atur-Tag-Head.webp 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Langkah Pertama: Atur Tag Head<\/figcaption><\/figure>\n\n\n\n<p>Pada bagian <em>tag head<\/em>, berikan informasi mengenai judul <em>website<\/em>, <em>meta tag carhset<\/em>, dan <em>link<\/em> atau pathyang kamu dari JavaScript, CSS, atau sumber eksternal lain yang kamu gunakan pada <em>website<\/em>mu. Jangan lupa untuk memastikan file CSS berada di tempat yang sama dengan file HTML. Apabila keduanya diletakkan di <em>folder<\/em> yang berbeda, maka pastikan untuk memasukkan <em>path<\/em> yang sesuai dengan kode href berikut:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\"\/&gt;<\/code><\/pre>\n\n\n\n<p>Untuk tampilan keseluruhan, adalah sebagai berikut:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;title&gt;Personal Website&lt;\/title&gt;\n    &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\"\/&gt;\n    &lt;script src=\"https:\/\/kit.fontawesome.com\/c8e4d183c2.js\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;   \n&lt;\/head&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"langkah-kedua-atur-tag-body\">Langkah Kedua: Atur Tag <em>Body<\/em><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Kedua-Atur-Tag-Body-1024x576.webp\" alt=\"Langkah Kedua: Atur Tag Body\" class=\"wp-image-8749\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Kedua-Atur-Tag-Body-1024x576.webp 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Kedua-Atur-Tag-Body-300x169.webp 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Kedua-Atur-Tag-Body-768x432.webp 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Kedua-Atur-Tag-Body-1536x864.webp 1536w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Kedua-Atur-Tag-Body.webp 1999w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Langkah Kedua: Atur Tag Body<\/figcaption><\/figure>\n\n\n\n<p><strong>Cara membuat website dengan html <\/strong>selanjutnya adalah, kamu perlu mengonfigurasikan tag <em>body<\/em>. Pada bagian pertama dari <em>body<\/em>, kamu perlu membuat kode untuk tampilan awal yang terdiri dari <em>navbar<\/em> (<em>navigation bar<\/em>), gambar, dan <em>text container<\/em>. Pastikan peletakan sesuai, dimana <em>navigation bar<\/em> berada di bagian <em>header<\/em> sedangkan <em>tagtext container<\/em> ditujukan untuk memuat konten berupa teks atau tulisan yang akan tampil pada <em>website<\/em>. Tampilannya adalah sebagai berikut:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body&gt;\n    &lt;section&gt;\n        &lt;!--- navigation ---&gt;\n        &lt;nav&gt;\n            &lt;!--- logo ---&gt;\n            &lt;a href=\"#\" class=\"logo\"&gt;Portfolio Tutorial&lt;\/a&gt;\n            &lt;!--- menu ---&gt;\n            &lt;ul&gt;\n                &lt;li&gt;&lt;a href=\"#\" class=\"active\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li&gt;&lt;a href=\"#\"&gt;Services&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li&gt;&lt;a href=\"#\"&gt;Testimonials&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li&gt;&lt;a href=\"#\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n            &lt;\/ul&gt;\n        &lt;\/nav&gt;\n        &lt;!--- text ---&gt;\n        &lt;div class=\"text-container\"&gt;\n            &lt;p&gt;Hello,&lt;\/p&gt;\n            &lt;p&gt;I&amp;#8217;M NIDA&lt;\/p&gt;\n            &lt;p&gt;SEO Technical Writer &amp; Developer&lt;\/p&gt;\n            &lt;p&gt;An aquarius girl who loves music, watching movies and\n            &lt;br&gt;of course writing.&lt;\/p&gt;\n            &lt;button class=\"hire-btn\"&gt;Hire me&lt;\/button&gt;\n            &lt;button class=\"down-cv\"&gt;Download CV&lt;\/button&gt;\n        &lt;\/div&gt;\n        &lt;!-- model --&gt;\n        &lt;img alt=\"model\" class=\"model\" src=\"images\/ilustrasi.jpg\"&gt;  \n    &lt;\/section&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"langkah-ketiga-tambahkan-informasi-lain\">Langkah Ketiga: Tambahkan Informasi Lain<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Ketiga-Tambahkan-Informasi-Lain-1024x640.webp\" alt=\"Langkah Ketiga: Tambahkan Informasi Lain\" class=\"wp-image-8746\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Ketiga-Tambahkan-Informasi-Lain-1024x640.webp 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Ketiga-Tambahkan-Informasi-Lain-300x188.webp 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Ketiga-Tambahkan-Informasi-Lain-768x480.webp 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Ketiga-Tambahkan-Informasi-Lain-1536x960.webp 1536w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Ketiga-Tambahkan-Informasi-Lain.webp 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Langkah Ketiga: Tambahkan Informasi Lain<\/figcaption><\/figure>\n\n\n\n<p>Tergantung dari jenis <em>website<\/em> yang kamu inginkan, maka detail dari <em>website<\/em> tersebut bisa kamu letakkan pada bagian ini. Misalnya, jika kamu membuat jenis <em>website <\/em>jasa, maka kamu bisa menambahkan jenis jasa atau layanan yang kamu sediakan. Sedangkan, untuk jenis <em>website<\/em> portofolio, maka tambahkan saja <em>skill<\/em> yang kamu miliki di bagian &lt;div class=&#8221;box-container&#8221;&gt;. Sebagai contoh, berikut kodenya:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"box-container\"&gt;.\n&lt;!-- services\/layanan --&gt;\n    &lt;div class=\"services\"&gt;\n        &lt;!--text--&gt;\n        &lt;div class=\"services-text \"&gt;\n            &lt;p&gt;Services&lt;\/p&gt;\n            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"box-container\"&gt;\n        &lt;!--- 1 ---&gt;\n            &lt;div class=\"box-1\"&gt;\n                &lt;span&gt;1&lt;\/span&gt;\n                &lt;p class=\"heading\"&gt;Technical Writing&lt;\/p&gt;\n                &lt;p class=\"details\"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;\/p&gt;\n                &lt;button&gt;Read More&lt;\/button&gt;\n            &lt;\/div&gt;\n        &lt;!--- 2 ---&gt;\n            &lt;div class=\"box-2\"&gt;\n                &lt;span&gt;2&lt;\/span&gt;\n                &lt;p class=\"heading\"&gt;Web Design&lt;\/p&gt;\n                &lt;p class=\"details\"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;\/p&gt;\n                &lt;button&gt;Read More&lt;\/button&gt;\n            &lt;\/div&gt;\n        &lt;!--- 3 ---&gt;\n            &lt;div class=\"box-3\"&gt;\n                &lt;span&gt;3&lt;\/span&gt;\n                &lt;p class=\"heading\"&gt;Web Development&lt;\/p&gt;\n                &lt;p class=\"details\"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;\/p&gt;\n                &lt;button&gt;Read More&lt;\/button&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"langkah-keempat-tambahkan-testimoni-dan-kontak\">Langkah Keempat: Tambahkan Testimoni dan Kontak<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Keempat-Tambahkan-Testimoni-dan-Kontak-1024x576.jpg\" alt=\"Langkah Keempat: Tambahkan Testimoni dan Kontak\" class=\"wp-image-8747\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Keempat-Tambahkan-Testimoni-dan-Kontak-1024x576.jpg 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Keempat-Tambahkan-Testimoni-dan-Kontak-300x169.jpg 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Keempat-Tambahkan-Testimoni-dan-Kontak-768x432.jpg 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Keempat-Tambahkan-Testimoni-dan-Kontak-1536x864.jpg 1536w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/10\/Langkah-Keempat-Tambahkan-Testimoni-dan-Kontak.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Langkah Keempat: Tambahkan Testimoni dan Kontak<\/figcaption><\/figure>\n\n\n\n<p>Di bagian ini, kamu bisa menambahkan testimoni atau <em>review<\/em> dari klien yang sebelumnya pernah bekerjasama denganmu. Penggunaan rating bintang untuk menunjukkan skala kepuasan juga bisa menjadi langkah bagus yang mempermudah pengunjung situsmu. Untuk menampilkan fitur rating tersebut, pastikan kamu menambahkan tautan <em>script<\/em> <a href=\"https:\/\/fontawesome.com\/\" rel=\"nofollow noopener\" target=\"_blank\">fontawesome<\/a> pada bagian tag <em>head<\/em>. Selain itu, kamu juga perlu menambahkan kontak yang mempermudah calon pembeli atau calon klien dalam menghubungimu. Semakin banyak kontak media sosial aktif yang kamu lampirkan, akan semakin baik. Apabila penjelasan di atas masih membingungkanmu, kamu bisa langsung menyalin dan menempelkan kode HTML berikut dan mengeditnya sesuai dengan kebutuhan:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;title&gt;Personal Website&lt;\/title&gt;\n    &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\"\/&gt;\n    &lt;script src=\"https:\/\/kit.fontawesome.com\/c8e4d183c2.js\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;   \n&lt;\/head&gt;\n \n&lt;body&gt;\n    &lt;section&gt;\n        &lt;!--- navigation ---&gt;\n        &lt;nav&gt;\n            &lt;!--- logo ---&gt;\n            &lt;a href=\"#\" class=\"logo\"&gt;Portfolio Tutorial&lt;\/a&gt;\n            &lt;!--- menu ---&gt;\n            &lt;ul&gt;\n                &lt;li&gt;&lt;a href=\"#\" class=\"active\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li&gt;&lt;a href=\"#\"&gt;Services&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li&gt;&lt;a href=\"#\"&gt;Testimonials&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li&gt;&lt;a href=\"#\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n            &lt;\/ul&gt;\n        &lt;\/nav&gt;\n \n        &lt;!--- text ---&gt;\n        &lt;div class=\"text-container\"&gt;\n            &lt;p&gt;Hello,&lt;\/p&gt;\n            &lt;p&gt;I AM SUWARDI&lt;\/p&gt;\n            &lt;p&gt;SEO Technical Writer &amp; Developer&lt;\/p&gt;\n            &lt;p&gt;An INTP who loves music, watching movies and\n            &lt;br&gt;of course writing.&lt;\/p&gt;\n            &lt;button class=\"hire-btn\"&gt;Hire me&lt;\/button&gt;\n            &lt;button class=\"down-cv\"&gt;Download CV&lt;\/button&gt;\n        &lt;\/div&gt;\n        &lt;!-- model --&gt;\n        &lt;img alt=\"model\" class=\"model\" src=\"images\/ilustrasi.jpg\"&gt;  \n    &lt;\/section&gt;\n \n    &lt;!-- services --&gt;\n    &lt;div class=\"services\"&gt;\n        &lt;!--text--&gt;\n        &lt;div class=\"services-text \"&gt;\n            &lt;p&gt;Services&lt;\/p&gt;\n            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"box-container\"&gt;\n        &lt;!--- 1 ---&gt;\n            &lt;div class=\"box-1\"&gt;\n                &lt;span&gt;1&lt;\/span&gt;\n                &lt;p class=\"heading\"&gt;Technical Writing&lt;\/p&gt;\n                &lt;p class=\"details\"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;\/p&gt;\n                &lt;button&gt;Read More&lt;\/button&gt;\n            &lt;\/div&gt;\n        &lt;!--- 2 ---&gt;\n            &lt;div class=\"box-2\"&gt;\n                &lt;span&gt;2&lt;\/span&gt;\n                &lt;p class=\"heading\"&gt;Web Design&lt;\/p&gt;\n                &lt;p class=\"details\"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;\/p&gt;\n                &lt;button&gt;Read More&lt;\/button&gt;\n            &lt;\/div&gt;\n        &lt;!--- 3 ---&gt;\n            &lt;div class=\"box-3\"&gt;\n                &lt;span&gt;3&lt;\/span&gt;\n                &lt;p class=\"heading\"&gt;Web Development&lt;\/p&gt;\n                &lt;p class=\"details\"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;\/p&gt;\n                &lt;button&gt;Read More&lt;\/button&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;  \n    &lt;!--testimonials--&gt;\n    &lt;div class=\"testimoni\"&gt;\n        &lt;!--text--&gt;\n        &lt;div class=\"testimoni-text \"&gt;\n            &lt;p&gt;What Our Client Says..&lt;\/p&gt;\n        &lt;\/div&gt;        \n        &lt;div class=\"testimoni-col\"&gt;\n            &lt;div class=\"testimoni-1\"&gt;\n                &lt;img src=\"images\/ava1.png\"&gt;\n                &lt;div&gt;\n                    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;\/p&gt;\n                    &lt;h3&gt;Client Pertama&lt;\/h3&gt;\n                    &lt;i class=\"fas fa-star\"&gt;&lt;\/i&gt;\n                    &lt;i class=\"fas fa-star\"&gt;&lt;\/i&gt;\n                    &lt;i class=\"fas fa-star\"&gt;&lt;\/i&gt;\n                    &lt;i class=\"fas fa-star\"&gt;&lt;\/i&gt;\n                    &lt;i class=\"far fa-star\"&gt;&lt;\/i&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"testimoni-2\"&gt;\n                &lt;img src=\"images\/ava2.png\"&gt;\n                &lt;div&gt;\n                    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;\/p&gt;\n                    &lt;h3&gt;Client Kedua&lt;\/h3&gt;\n                    &lt;i class=\"fas fa-star\"&gt;&lt;\/i&gt;\n                    &lt;i class=\"fas fa-star\"&gt;&lt;\/i&gt;\n                    &lt;i class=\"fas fa-star\"&gt;&lt;\/i&gt;\n                    &lt;i class=\"fas fa-star\"&gt;&lt;\/i&gt;\n                    &lt;i class=\"fas fa-star\"&gt;&lt;\/i&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;!-- footer --&gt;\n    &lt;footer&gt;\n        &lt;p&gt;Interested In Using Our Services?&lt;\/p&gt;         \n        &lt;!--paragraph--&gt;\n        &lt;p&gt;I try to work on your project as quickly as possible. Guarantee for revision until you are satisfied with my work.&lt;\/p&gt;\n        &lt;!--social--&gt;\n        &lt;div class=\"social-icons\"&gt;\n            &lt;a href=\"#\"&gt;&lt;i class=\"fab fa-whatsapp\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n            &lt;a href=\"#\"&gt;&lt;i class=\"fab fa-facebook-f\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n            &lt;a href=\"#\"&gt;&lt;i class=\"fab fa-twitter\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n            &lt;a href=\"#\"&gt;&lt;i class=\"fab fa-instagram\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n            &lt;a href=\"#\"&gt;&lt;i class=\"fab fa-youtube\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n        &lt;\/div&gt;\n    &lt;\/footer&gt;\n    &lt;!--social-attach-bar--&gt;\n    &lt;div class=\"social\"&gt;\n        &lt;a href=\"#\"&gt;&lt;i class=\"fab fa-whatsapp\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n        &lt;a href=\"#\"&gt;&lt;i class=\"fab fa-facebook-f\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n        &lt;a href=\"#\"&gt;&lt;i class=\"fab fa-twitter\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n        &lt;a href=\"#\"&gt;&lt;i class=\"fab fa-instagram\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n        &lt;a href=\"#\"&gt;&lt;i class=\"fab fa-youtube\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>Itulah ulasan sederhana mengenai <strong>cara membuat website dengan html<\/strong>. Bagaimana jika kamu ingin memiliki <em>website<\/em> tapi nggak punya <em>background<\/em> mumpuni mengenai HTML? Nggak perlu bingung! Karena, kamu bisa langsung menghubungi <a href=\"https:\/\/zaferinadigital.com\/optimaise\/\">Optimaise<\/a> dan menggunakan jasa pembuatan <em>website<\/em> dari kami. Dengan menggunakan jasa kami, kamu akan memperoleh <em>website<\/em> dengan konten SEO dan <em>mobile-friendly<\/em>. Nggak hanya itu, kamu juga akan mendapatkan gratis <em>domain, hosting<\/em>, dan SSL, lho! Jadi, tunggu apa lagi! Yuk, gunakan jasa Optimaise sekarang juga.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bagi pemilik bisnis, kepemilikan website untuk kebutuhan marketing memang penting banget. Dengan memiliki website kamu<\/p>\n","protected":false},"author":8,"featured_media":8754,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","footnotes":""},"categories":[27,28,33],"tags":[36,35,37],"class_list":["post-8740","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website","category-edukasi","category-hosting","tag-edukasi","tag-tips","tag-website","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"acf":[],"_links":{"self":[{"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/posts\/8740","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/comments?post=8740"}],"version-history":[{"count":0,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/posts\/8740\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/media\/8754"}],"wp:attachment":[{"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/media?parent=8740"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/categories?post=8740"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/tags?post=8740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}