cara membuat web html keren dengan notepad

Cara Membuat Web html Keren Dengan Notepad Lengkap

Diposting pada

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"><noscript><img src="https://cdn.shortpixel.ai/client/q_glossy,ret_img/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"/></noscript><img src='https://cdn.shortpixel.ai/client/q_lqip,ret_wait/https://carapedi.id/wp-content/uploads/2019/07/Cara-Membuat-Web-html-Keren-Dengan-Notepad-Lengkap-4.png' data-src="https://cdn.shortpixel.ai/client/q_glossy,ret_img/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="lazyload 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"><noscript><img src="https://cdn.shortpixel.ai/client/q_glossy,ret_img/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"/></noscript><img src='https://cdn.shortpixel.ai/client/q_lqip,ret_wait/https://carapedi.id/wp-content/uploads/2019/07/Cara-Membuat-Web-html-Keren-Dengan-Notepad-Lengkap-5.png' data-src="https://cdn.shortpixel.ai/client/q_glossy,ret_img/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="lazyload 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"><noscript><img src="https://cdn.shortpixel.ai/client/q_glossy,ret_img/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"/></noscript><img src='https://cdn.shortpixel.ai/client/q_lqip,ret_wait/https://carapedi.id/wp-content/uploads/2019/07/Cara-Membuat-Web-html-Keren-Dengan-Notepad-Lengkap-6.png' data-src="https://cdn.shortpixel.ai/client/q_glossy,ret_img/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="lazyload 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"><noscript><img src="https://cdn.shortpixel.ai/client/q_glossy,ret_img/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"/></noscript><img src='https://cdn.shortpixel.ai/client/q_lqip,ret_wait/https://carapedi.id/wp-content/uploads/2019/07/Cara-Membuat-Web-html-Keren-Dengan-Notepad-Lengkap-7.png' data-src="https://cdn.shortpixel.ai/client/q_glossy,ret_img/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="lazyload 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.<div class="idblog-banner-aftercontent idblog-center-ads"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-8840643959099778" data-ad-slot="8722432165"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> <amp-auto-ads type="adsense" data-ad-client="ca-pub-8840643959099778"> </amp-auto-ads></div><div class="idblog-social-share"><h3>Sebarkan ini:</h3><ul class="idblog-socialicon-share"><li class="facebook"><a href="#" class="idblog-sharebtn idblog-facebook" onclick="popUp=window.open('https://www.facebook.com/sharer/sharer.php?u=https://carapedi.id/blog/cara-membuat-web-html-keren-dengan-notepad-lengkap/', 'popupwindow', 'scrollbars=yes,height=300,width=550');popUp.focus();return false" rel="nofollow" title="Sebarkan ini">Facebook</a></li><li class="twitter"><a href="#" class="idblog-sharebtn idblog-twitter" onclick="popUp=window.open('https://twitter.com/share?url=https://carapedi.id/blog/cara-membuat-web-html-keren-dengan-notepad-lengkap/&text=Cara%20Membuat%20Web%20html%20Keren%20Dengan%20Notepad%20Lengkap', 'popupwindow', 'scrollbars=yes,height=300,width=550');popUp.focus();return false" rel="nofollow" title="Twit ini">Twit</a></li><li class="whatsapp"><a href="https://api.whatsapp.com/send?text=Cara%20Membuat%20Web%20html%20Keren%20Dengan%20Notepad%20Lengkap%20https%3A%2F%2Fcarapedi.id%2Fblog%2Fcara-membuat-web-html-keren-dengan-notepad-lengkap%2F" class="idblog-sharebtn idblog-whatsapp" rel="nofollow" title="WhatsApp">WhatsApp</a></li></ul></div></div><footer class="entry-footer"> <span class="cat-links">Posting pada <a href="https://carapedi.id/blog/category/blogging/" rel="category tag">Blogging</a></span><nav class="navigation post-navigation" role="navigation" aria-label="Posts"><h2 class="screen-reader-text">Navigasi pos</h2><div class="nav-links"><div class="nav-previous"><a href="https://carapedi.id/blog/cara-membuat-chanel-youtube/" rel="prev"><span>Pos sebelumnya</span> Cara Membuat Chanel Youtube di Android & Laptop Menghasilkan Uang</a></div><div class="nav-next"><a href="https://carapedi.id/blog/cara-membuat-contact-us-keren/" rel="next"><span>Pos berikutnya</span> Cara Membuat Contact Us Keren di Blogger dan WordPress</a></div></div></nav></footer></div><div class="gmr-box-content gmr-authorbox clearfix"><div class="gmr-ab-gravatar"><noscript><img alt='Gambar Gravatar' title='Gravatar' src='https://secure.gravatar.com/avatar/93b16133da5c9fb4b5371ce26cc67d04?s=100&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/93b16133da5c9fb4b5371ce26cc67d04?s=200&d=mm&r=g 2x' class='avatar avatar-100 photo' height='100' width='100' /></noscript><img alt='Gambar Gravatar' title='Gravatar' src='https://cdn.shortpixel.ai/client/q_lqip,ret_wait/https://carapedi.id/wp-content/uploads/2019/07/Cara-Membuat-Web-html-Keren-Dengan-Notepad-Lengkap-7.png' data-src='https://secure.gravatar.com/avatar/93b16133da5c9fb4b5371ce26cc67d04?s=100&d=mm&r=g' data-srcset='https://secure.gravatar.com/avatar/93b16133da5c9fb4b5371ce26cc67d04?s=200&d=mm&r=g 2x' class='lazyload avatar avatar-100 photo' height='100' width='100' /></div><div class="gmr-ab-content"><div class="gmr-ab-authorname"><span class="uname"><a href="https://carapedi.id/blog/author/admin/">Kim</a></span><span class="gmr-ab-web"> - <a href="https://carapedi.id/" target="_self" rel="nofollow">https://carapedi.id/</a></span></div><div class="gmr-ab-desc"><div class="vcard author"><span class="fn">Penulis, Blogger dan penikmat film action</span></div></div></div></div></article><div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/id-ID/sdk.js#xfbml=1&appId=100003116121577&version=v2.8"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div id="comments" class="idblog-fb-comments"><div class="fb-comments" data-href="https://carapedi.id/blog/cara-membuat-web-html-keren-dengan-notepad-lengkap/" data-numposts="5" data-width="100%"></div></div></main></div></div></div><div id="stop-container"></div><div class="container"><div class="idblog-footerbanner"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8840643959099778" data-ad-slot="6149197571" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div></div></div></div><div id="footer-container"><div class="gmr-bgstripes"> <span class="gmr-bgstripe gmr-color1"></span><span class="gmr-bgstripe gmr-color2"></span> <span class="gmr-bgstripe gmr-color3"></span><span class="gmr-bgstripe gmr-color4"></span> <span class="gmr-bgstripe gmr-color5"></span><span class="gmr-bgstripe gmr-color6"></span> <span class="gmr-bgstripe gmr-color7"></span><span class="gmr-bgstripe gmr-color8"></span> <span class="gmr-bgstripe gmr-color9"></span><span class="gmr-bgstripe gmr-color10"></span> <span class="gmr-bgstripe gmr-color11"></span><span class="gmr-bgstripe gmr-color12"></span> <span class="gmr-bgstripe gmr-color13"></span><span class="gmr-bgstripe gmr-color14"></span> <span class="gmr-bgstripe gmr-color15"></span><span class="gmr-bgstripe gmr-color16"></span> <span class="gmr-bgstripe gmr-color17"></span><span class="gmr-bgstripe gmr-color18"></span> <span class="gmr-bgstripe gmr-color19"></span><span class="gmr-bgstripe gmr-color20"></span></div><footer id="colophon" class="site-footer" role="contentinfo" ><div class="container"><div class="site-info"> Copyrigrht 2019 @carapedi.id</div></div></footer></div> <script>var id = "c99831a9b1e32bf043f4137d050f36ebcd6f19cb";</script> <script type="text/javascript" src="https://api.sosiago.id/js/tracking.js"></script> <script>(function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', '<!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-123786591-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-123786591-1'); </script>', 'auto'); ga('send', 'pageview');</script><noscript><style>.lazyload{display:none;}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://carapedi.id/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script><script data-noptimize="1">function c_webp(A){var n=new Image;n.onload=function(){var e=0<n.width&&0<n.height;A(e)},n.onerror=function(){A(!1)},n.src='data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA=='}function s_webp(e){window.supportsWebP=e}c_webp(s_webp);document.addEventListener('lazybeforeunveil',function({target:c}){supportsWebP&&['data-src','data-srcset'].forEach(function(a){attr=c.getAttribute(a),null!==attr&&c.setAttribute(a,attr.replace(/\/client\//,'/client/to_webp,'))})});</script><script type='text/javascript' async='async' src='https://carapedi.id/wp-content/themes/superfast/js/jquery.sidr.min.js'></script> <script type='text/javascript' async='async' src='https://carapedi.id/wp-content/themes/superfast/js/customscript.js'></script> <script type='text/javascript' async='async' src='https://carapedi.id/wp-includes/js/comment-reply.min.js'></script> </body></html> <!-- Page generated by LiteSpeed Cache 2.9.9.2 on 2019-12-12 11:25:51 -->