Cara Membuat Web html Keren Dengan Notepad Lengkap

Setiap hari kita mengakses website dari ponsel yang kita miliki untuk berbagai kebutuhan, baik untuk melakukan aktivitas di media sosial, mencari informasi, belanja dan lain sebagainya. Pernahkah anda bertanya? Apakah sulit membuat web? Artikel ini akan menjelaskan bagaimana cara membuat web html keren dengan notepad secara lengkap. Yuk simak!

Saat ini membuat web memang tidak sulit, karena sudah banyak CMS (Content Management System) yang bisa di gunakan untuk membuat web dengan lebih mudah tanpa harus paham coding.

Akan tetapi pemahaman akan web html sangat penting, dengan memahami pembuatan web berbasis html ini anda bisa membuat sebuah website sesuai dengan keinginan anda tanpa menggunakan aturan CMS lagi.

Kelebihan web html sendiri

Membuat sebuah web dengan html sendiri tentu memiliki banyak kelebihan. Berbeda dengan web CMS, web html memiliki beberapa kelebihan diantaranya:

  1. Lebih fleksibel bisa buat sesuai dengan keinginan sendiri
  2. Bisa mendesain web sesuai selera
  3. Dapat digunakan pada berbagai jenis komputer

Tag dasar web html

Sebelum anda belajar proses membuat web html, terlebih dahulu anda harus paham beberapa jenis tag dasar html yang digunakan untuk membuat web. Beberapa tag dasar html yang digunakan diantaranya adalah:

  1. Tag <html> </html> : Digunakan untuk jenis dokumen
  2. Tag <head> </head> : Digunakan untuk bagian header atau bagian atas web
  3. Tag <title> </title> : Digunakan untuk judul halaman web
  4. Tag <body> <body> : Digunakan untuk bagian body web

Baca juga:

Cara buat web dengan hosting sendiri

Cara membuat web html keren dengan notepad

Setelah anda memahami dasar-dasar tag html yang sering digunakan untuk membuat web html maka langkah selanjutnya adalah tinggal langsung anda praktikan untuk membuat sebuah website berbasis html.

Tim carapedi sudah menuliskan prosedur dan cara-caranya untuk anda. Silahkan simak uraian selengkapnya berikut ini:

  • Silahkan anda buka aplikasi notepad dari komputer yang anda miliki, dengan cara klik start, pilih all program, windows accecories, lalu pilih dan klik notepad
cara membuat web html keren dengan notepad
Membuka aplikasi notepad dari komputer
  • Ketika anda mulai membuat web html, silahkan anda awali dengan memasukkan kode <html> terlebih dahulu, seperti ini:
cara membuat web html keren dengan notepad
Mengawali proses pembuatan web html anda awali dengan memasukkan kode
  • Kemudian masukkan kode <head> untuk membuat kepala atau bagian atas web yang akan anda buat
cara membuat web html keren dengan notepad
Masukkan kode untuk membuat bagian atas web
  • Buat judul web anda dengan memasukkan kode <title> JUDUL WEB </title>, contohnya seperti ini:
cara membuat web html keren dengan notepad
Memasukkan judul we dengan tag </figcaption></figure> <ul><li>Kemudian akhiri lagi dengan kode <head></li></ul> <figure class="wp-block-image"><img src="https://carapedi.id/wp-content/uploads/2019/07/Cara-Membuat-Web-html-Keren-Dengan-Notepad-Lengkap-4.png" alt="cara membuat web html keren dengan notepad" class="wp-image-7953"/></figure> <ul><li>Selanjutnya anda buat bagian body nya dengan menggunakan tag <body> <body>, pada bagian body anda bisa memasukkan H1 dan juga menambahkan meta deskripsi situs yang anda buat dengan warna sesuai keinginan, contohnya seperti ini:</li></ul> <figure class="wp-block-image"><img src="https://carapedi.id/wp-content/uploads/2019/07/Cara-Membuat-Web-html-Keren-Dengan-Notepad-Lengkap-5.png" alt="cara membuat web html keren dengan notepad" class="wp-image-7954"/><figcaption>Contoh body situs html</figcaption></figure> <ul><li>Akhiri dengan menggunakan tag <html> kembali</li></ul> <figure class="wp-block-image"><img src="https://carapedi.id/wp-content/uploads/2019/07/Cara-Membuat-Web-html-Keren-Dengan-Notepad-Lengkap-6.png" alt="cara membuat web html keren dengan notepad" class="wp-image-7955"/><figcaption>Akhiri dengan menggunakan tag <html></figcaption></figure> <ul><li>Jika semua sudah selesai, silahkan anda simpan file web html tersebut, klik file> pilih simpan</li></ul> <figure class="wp-block-image"><img src="https://carapedi.id/wp-content/uploads/2019/07/Cara-Membuat-Web-html-Keren-Dengan-Notepad-Lengkap-7.png" alt="cara membuat web html keren dengan notepad" class="wp-image-7956"/><figcaption>Menyimpan file web html</figcaption></figure> <ul><li>Beri nama file tersebut sesuai keinginan</li><li>Pilih format penyimpanan file .html</li></ul> <p>Nah itulah beberapa langkah <a href="https://carapedi.id/blog/cara-membuat-web-html-keren-dengan-notepad-lengkap/">cara membuat web html keren dengan notepad</a>. Setelah anda menyimpan file tersebut maka anda bisa langsung membukanya dan akan mengarah ke browser di komputer anda.</p> </div><!-- .entry-content --> <footer class="entry-meta"> <span class="cat-links"><span class="screen-reader-text">Kategori </span><a href="https://carapedi.id/blog/category/blogging/" rel="category tag">Blogging</a></span> <nav id="nav-below" class="post-navigation"> <span class="screen-reader-text">Navigasi Tulisan</span> <div class="nav-previous"><span class="prev" title="Sebelumnya"><a href="https://carapedi.id/blog/cara-membuat-chanel-youtube/" rel="prev">Cara Membuat Chanel Youtube di Android & Laptop Menghasilkan Uang</a></span></div><div class="nav-next"><span class="next" title="Berikut"><a href="https://carapedi.id/blog/cara-membuat-contact-us-keren/" rel="next">Cara Membuat Contact Us Keren di Blogger dan WordPress</a></span></div> </nav><!-- #nav-below --> </footer><!-- .entry-meta --> </div><!-- .inside-article --> </article><!-- #post-## --> <div class="comments-area"> <div id="comments"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Tinggalkan komentar <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/cara-membuat-web-html-keren-dengan-notepad-lengkap/#respond" style="display:none;">Batalkan balasan</a></small></h3><form action="https://carapedi.id/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-form-comment"><label for="comment" class="screen-reader-text">Komentar</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p><label for="author" class="screen-reader-text">Nama</label><input placeholder="Nama *" id="author" name="author" type="text" value="" size="30" /> <label for="email" class="screen-reader-text">Surel</label><input placeholder="Surel *" id="email" name="email" type="email" value="" size="30" /> <label for="url" class="screen-reader-text">Situs web</label><input placeholder="Situs web" id="url" name="url" type="url" value="" size="30" /> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Kirim Komentar" /> <input type='hidden' name='comment_post_ID' value='7945' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="f71c29a6a0" /></p><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="95"/></p></form> </div><!-- #respond --> <p class="akismet_comment_form_privacy_notice">This site uses Akismet to reduce spam. <a href="https://akismet.com/privacy/" target="_blank" rel="nofollow noopener">Learn how your comment data is processed</a>.</p> </div><!-- #comments --> </div> </main><!-- #main --> </div><!-- #primary --> </div><!-- #content --> </div><!-- #page --> <div class="site-footer grid-container grid-parent"> <footer class="site-info" itemtype="https://schema.org/WPFooter" itemscope> <div class="inside-site-info grid-container grid-parent"> <div class="copyright-bar"> Copyright@Carapedi.id </div> </div> </footer><!-- .site-info --> </div><!-- .site-footer --> <a title="Gulirkan kembali ke puncak laman" rel="nofollow" href="#" class="generate-back-to-top" style="opacity:0;visibility:hidden;" data-scroll-speed="400" data-start-scroll="300"> <span class="screen-reader-text">Gulirkan kembali ke puncak laman</span> </a> <nav id="generate-slideout-menu" class="main-navigation slideout-navigation" itemtype="https://schema.org/SiteNavigationElement" itemscope style="display: none;"> <div class="inside-navigation grid-container grid-parent"> <button class="slideout-exit "> <span class="screen-reader-text">Close</span></button><div class="main-nav"><ul id="menu-slideout-spacious" class=" slideout-menu"><li id="menu-item-16102" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-16102"><a href="https://carapedi.id/">Home</a></li> <li id="menu-item-15603" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15603"><a href="https://carapedi.id/about-carapedi/">About</a></li> <li id="menu-item-15602" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15602"><a href="https://carapedi.id/contact/">Contact</a></li> <li id="menu-item-15597" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-15597"><a href="https://carapedi.id/privacy/">Privacy</a></li> <li id="menu-item-15596" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15596"><a href="https://carapedi.id/disclaimer/">Disclaimer</a></li> <li id="menu-item-15595" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15595"><a href="https://carapedi.id/kerjasama/">Kerjasama</a></li> <li id="menu-item-15936" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15936"><a href="https://carapedi.id/jasa/">Jasa Review</a></li> <li id="menu-item-15935" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15935"><a href="https://panel.niagahoster.co.id/ref/195248?r=hosting-murah">Promo Hosting</a></li> </ul></div><aside id="text-2" class="slideout-widget widget_text"><h2 class="widget-title">About Me</h2> <div class="textwidget"><p>Berbagi cara dari apa yang kita bisa.</p> </div> </aside><aside id="lsi_widget-1" class="slideout-widget widget_lsi_widget"><ul class="lsi-social-icons icon-set-lsi_widget-1" style="text-align: left"><li class="lsi-social-facebook"><a class="" rel="nofollow" title="Facebook" aria-label="Facebook" href="https://www.facebook.com/carapedi.id" ><i class="lsicon lsicon-facebook"></i></a></li><li class="lsi-social-twitter"><a class="" rel="nofollow" title="Twitter" aria-label="Twitter" href="https://twitter.com/id_carapedi" ><i class="lsicon lsicon-twitter"></i></a></li><li class="lsi-social-instagram"><a class="" rel="nofollow" title="Instagram" aria-label="Instagram" href="https://www.instagram.com/carapedi.id/" ><i class="lsicon lsicon-instagram"></i></a></li><li class="lsi-social-email"><a class="" rel="nofollow" title="Contact" aria-label="Contact" href="https://carapedi.id/contact/" ><i class="lsicon lsicon-email"></i></a></li></ul></aside> </div><!-- .inside-navigation --> </nav><!-- #site-navigation --> <div class="slideout-overlay"> </div> <link rel='stylesheet' id='lsi-style-css' href='https://carapedi.id/wp-content/plugins/lightweight-social-icons/css/style-min.css?ver=1.1' type='text/css' media='all' /> <style id='lsi-style-inline-css' type='text/css'> .icon-set-lsi_widget-1 a, .icon-set-lsi_widget-1 a:visited, .icon-set-lsi_widget-1 a:focus { border-radius: 2px; background: #1E72BD !important; color: #FFFFFF !important; font-size: 20px !important; } .icon-set-lsi_widget-1 a:hover { background: #777777 !important; color: #FFFFFF !important; } </style> <script type='text/javascript' src='https://carapedi.id/wp-content/plugins/gp-premium/menu-plus/functions/js/sticky.min.js?ver=1.11.0-beta.3'></script> <script type='text/javascript'> /* <![CDATA[ */ var offSide = {"side":"left"}; /* ]]> */ </script> <script type='text/javascript' src='https://carapedi.id/wp-content/plugins/gp-premium/menu-plus/functions/js/offside.min.js?ver=1.11.0-beta.3'></script> <script type='text/javascript'> /* <![CDATA[ */ var adsforwp_obj = {"ajax_url":"https:\/\/carapedi.id\/wp-admin\/admin-ajax.php","adsforwp_front_nonce":"6c90ad84b6","ad_performance_tracker":"1"}; /* ]]> */ </script> <script type='text/javascript' src='https://carapedi.id/wp-content/plugins/ads-for-wp/public/assets/js/ads-front.min.js?ver=1.9.16.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var adsforwp_browser_obj = []; /* ]]> */ </script> <script type='text/javascript' src='https://carapedi.id/wp-content/plugins/ads-for-wp/public/assets/js/ads-frontend.min.js?ver=1.9.16.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var smooth = {"elements":[".smooth-scroll","li.smooth-scroll a"],"duration":"800"}; /* ]]> */ </script> <script type='text/javascript' src='https://carapedi.id/wp-content/plugins/gp-premium/general/js/smooth-scroll.min.js?ver=1.11.0-beta.3'></script> <!--[if lte IE 11]> <script type='text/javascript' src='https://carapedi.id/wp-content/themes/generatepress/js/classList.min.js?ver=2.4.2'></script> <![endif]--> <script type='text/javascript' src='https://carapedi.id/wp-content/themes/generatepress/js/menu.min.js?ver=2.4.2'></script> <script type='text/javascript' src='https://carapedi.id/wp-content/themes/generatepress/js/a11y.min.js?ver=2.4.2'></script> <script type='text/javascript' src='https://carapedi.id/wp-content/themes/generatepress/js/back-to-top.min.js?ver=2.4.2'></script> <script type='text/javascript' src='https://carapedi.id/wp-includes/js/wp-embed.min.js?ver=5.4.2'></script> <script async="async" type='text/javascript' src='https://carapedi.id/wp-content/plugins/akismet/_inc/form.js?ver=4.1.6'></script> </body> </html>