Welcome to Hakim Official!

Make sure to SUBSCRIBE Hakim Nurubay channel guys



SUBSCRIBE !

October 29, 2020

Artikel ini telah dikunjungi 1834×


Cara Membuat Website Sederhana Hanya dengan HTML dan CSS saja!


thumbnail

Untuk Kali ini saya akan kasih tutorial membuat website sederhana hanya dengan HTML dan CSS saja guys.

seperti yang kalian ketahui HTML adalah singkatan dari Hypertext Markup Language. HTML memungkinkan seorang user untuk membuat dan menyusun bagian paragraf, heading, link atau tautan, dan blockquote untuk halaman web dan aplikasi.


Baca juga : Apa itu HTML? apakah HTML Punya Sejarah? apa Perbedaannya HTML dengan HTML5?

Persiapan

Sebelum Kita membuatnya, Kita Siapkan Folder dengan nama example (terserah, boleh ganti nama lain). setelah itu untuk kalian yang ingin menggunakan CSS di luar coding HTML Siapkan Folder dengan nama css, lalu Siapkan File HTML dan CSS(nama terserah, untuk CSS bisa Kasih nama style.css) yang kosong guys lalu kita buat codingannya.

DomaiNesia

*Penting* Khusus untuk CSS di luar Coding kalian bisa tambahkan link seperti ini :
<link rel="stylesheet" href="css/style.css"> sebelum </head>. jadinya di dalam File HTML Kalian seperti ini

  1. <!DOCTYPE html>
  2. <html lang="id">
  3. <head>
  4. <title>Ngoding bareng Hakim</title>
  5.  
  6. <!-- Memanggil File CSS -->
  7. <link rel="stylesheet" href="css/style.css">
  8. </head>

Kalian buat struktur HTML

Kalian membuat struktur HTML nya dulu guys seperti ini :

  1. <!DOCTYPE html>
  2. <html lang="id"><!-- lang="id" itu artinya language Indonesia / Bahasa Indonesia -->
  3. <head>
  4. <title></title>
  5. </head>
  6. <body>
  7.  
  8. </body>
  9. </html>

untuk pengguna Sublime Text kalian bisa ketik html lalu tekan tab agar otomatis membuat strukturnya guys.

Mulai Ngoding

Langusng saja Kita mulai ngodingnya. di dalam <title></title> kalian masukkan judul nya contohnya seperti ini <title>Example Website HTML - CSS</title> maka hasilnya be like :

thumbnail

Tambahkan script CSS berikut ini, Kalian bisa ketikkan sebelum </head> :

  1. <style>
  2. body{
  3. background: url(img/road-690138.jpg);
  4. background-size: 1280px;
  5. }
  6. #konten{
  7. width: 1000px;
  8. margin: auto;
  9. background-color: #ffffff;
  10. }
  11. #header{
  12. background-color: #419161;
  13. border: 1px solid #000000;
  14. padding: 10px;
  15. color: #ffffff;
  16. font-family: -apple-system;
  17. }
  18. #Menu{
  19. float: right;
  20. width: 220px;
  21. }
  22. .navigasi{
  23. margin-top: 10px;
  24. margin-bottom: 10px;
  25. padding: 19px;
  26. border: 1px solid #000000;
  27. background-color: #51c9c3;
  28. }
  29.  
  30. #isi{
  31. padding: 10px;
  32. border: 1px solid #000000;
  33. width: 750px;
  34. }
  35. #footer{
  36. background-color: #aaa8a5;
  37. border: 1px solid #000000;
  38. padding: 10px;
  39. }
  40. </style>

oh ya, untuk Kalian yang menggunakan CSS di luar File HTML ketikkan isi style nya saja, jadi kalian hanya mengetikkan ini di dalam style.css

  1. body{
  2. background: url(img/road-690138.jpg);
  3. background-size: 1280px;
  4. }
  5. #konten{
  6. width: 1000px;
  7. margin: auto;
  8. background-color: #ffffff;
  9. }
  10. #header{
  11. background-color: #419161;
  12. border: 1px solid #000000;
  13. padding: 10px;
  14. color: #ffffff;
  15. font-family: -apple-system;
  16. }
  17. #Menu{
  18. float: right;
  19. width: 220px;
  20. }
  21. .navigasi{
  22. margin-top: 10px;
  23. margin-bottom: 10px;
  24. padding: 19px;
  25. border: 1px solid #000000;
  26. background-color: #51c9c3;
  27. }
  28.  
  29. #isi{
  30. padding: 10px;
  31. border: 1px solid #000000;
  32. width: 750px;
  33. }
  34. #footer{
  35. background-color: #aaa8a5;
  36. border: 1px solid #000000;
  37. padding: 10px;
  38. }

setelah itu kalian ketikkan codingan berikut di bawah </head> fungsinya ini adalah untuk membuat isi dari Website Kalian :

  1. <body>
  2.  
  3. <div id="konten">
  4. <div id="header">
  5. <h1>NGOBAR HAKIM</h1>
  6. </div>
  7. <div id="Menu">
  8. <div class="navigasi">
  9. <h3>Menu Navigasi Satu</h3>
  10. <ul>
  11. <li><a href="Latihan HTML -CSS-Home.html">Home</a></li>
  12. <li><a href="Latihan HTML -CSS-About.html">About</a></li>
  13. <li><a href="Latihan HTML -CSS-Profile.html">Profile</a></li>
  14. <li><a href="Latihan HTML -CSS-Portofolio.html">Portofolio</a></li>
  15. <li><a href="Latihan HTML -CSS-Contact.html">Contact</a></li>
  16. </ul>
  17. </div>
  18. <div class="navigasi">
  19. <h3>Menu Navigasi Dua</h3>
  20. <ul>
  21. <li><a href="#">Home</a></li>
  22. <li><a href="#">About</a></li>
  23. <li><a href="#">Profile</a></li>
  24. <li><a href="#">Portofolio</a></li>
  25. <li><a href="#">Contact</a></li>
  26. </ul>
  27. </div>
  28. </div>
  29. <div id="isi">
  30. <img border="1px" src="img/countryside-1149680.jpg" alt="">
  31. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  32. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  33. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  34. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  35. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  36. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  37. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  38. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  39. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  40. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  41. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  42. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  43. </div>

Setelah itu kalian buat footer, footer itu di isi dengan copyright untuk membuat nya Kalian ketikkan ini :

  1. <div id="footer">
  2. <p>Copyright &copy 2020 - Ngobar Hakim</p>
  3. </div>
  4. </div><!-- Menutup id Konten -->

Jangan lupa tutup body dan html dengan ini :

  1. </body>
  2. </html>

Maka Codingan nya Seperti ini jika kita jadikan satu :

  1. <!DOCTYPE html>
  2. <html lang="id">
  3. <head>
  4. <title>Example Website HTML - CSS</title>
  5.  
  6. <style>
  7. body{
  8. background: url(img/road-690138.jpg);
  9. background-size: 1280px;
  10. }
  11. #konten{
  12. width: 1000px;
  13. margin: auto;
  14. background-color: #ffffff;
  15. }
  16. #header{
  17. background-color: #419161;
  18. border: 1px solid #000000;
  19. padding: 10px;
  20. color: #ffffff;
  21. font-family: -apple-system;
  22. }
  23. #Menu{
  24. float: right;
  25. width: 220px;
  26. }
  27. .navigasi{
  28. margin-top: 10px;
  29. margin-bottom: 10px;
  30. padding: 19px;
  31. border: 1px solid #000000;
  32. background-color: #51c9c3;
  33. }
  34.  
  35. #isi{
  36. padding: 10px;
  37. border: 1px solid #000000;
  38. width: 750px;
  39. }
  40. #footer{
  41. background-color: #aaa8a5;
  42. border: 1px solid #000000;
  43. padding: 10px;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48.  
  49. <div id="konten">
  50. <div id="header">
  51. <h1>NGOBAR HAKIM</h1>
  52. </div>
  53. <div id="Menu">
  54. <div class="navigasi">
  55. <h3>Menu Navigasi Satu</h3>
  56. <ul>
  57. <li><a href="Latihan HTML -CSS-Home.html">Home</a></li>
  58. <li><a href="Latihan HTML -CSS-About.html">About</a></li>
  59. <li><a href="Latihan HTML -CSS-Profile.html">Profile</a></li>
  60. <li><a href="Latihan HTML -CSS-Portofolio.html">Portofolio</a></li>
  61. <li><a href="Latihan HTML -CSS-Contact.html">Contact</a></li>
  62. </ul>
  63. </div>
  64. <div class="navigasi">
  65. <h3>Menu Navigasi Dua</h3>
  66. <ul>
  67. <li><a href="#">Home</a></li>
  68. <li><a href="#">About</a></li>
  69. <li><a href="#">Profile</a></li>
  70. <li><a href="#">Portofolio</a></li>
  71. <li><a href="#">Contact</a></li>
  72. </ul>
  73. </div>
  74. </div>
  75. <div id="isi">
  76. <img border="1px" src="img/countryside-1149680.jpg" alt="">
  77. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  78. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  79. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  80. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  81. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  82. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  83. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  84. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  85. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  86. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  87. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  88. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  89. </div>
  90. <div id="footer">
  91. <p>Copyright &copy 2020 - Ngobar Hakim</p>
  92. </div>
  93. </div><!-- Menutup id Konten -->
  94. </body>
  95. </html>

Untuk hasilnya seperti ini :

thumbnail

Hasil dari Website Sederhana HTML dan CSS


Nah Kurang lebih seperti itu. Menurut saya mending menggunakan CSS yang di dalam File HTML karena lebih mudah untuk di akses hehehehe.

Jika Kalian ingin Request membuat artikel, silakan tuliskan di kolom komentar di bawah ini!
Sekian dari saya. Terima Kasih telah berkunjung ke artikel ini.
kunjungan anda adalah Tamu Kami!
Salam !DOCTYPE

Avatar
𝓗𝓪𝓴𝓲𝓶 Nurubay

I'm a beginner web programmer, and I like to learn new things, and my passionate is about Music. you can subscribe to My YouTube Channel Hakim Nurubay. Thank you for you guys who have subscribed My YouTube Channel, and I'm glad for it. Greetings !DOCTYPE


Apa itu Bootstrap? Pengertian dan Fungsinya itu apaansih?


Bootstrap adalah kerangka kerja CSS yang sumber terbuka dan bebas untuk merancang situs web dan aplikasi web.
Read More


Apa itu JavaScript? Pengertian dan Fungsinya itu apaansih? apakah JavaScript Punya Sejarah?


JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis.
Read More


Apa itu HTML? apakah HTML Punya Sejarah? apa Perbedaannya HTML dengan HTML5?


Hypertext Markup Language adalah bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di peramban internet.
Read More


Apa itu CSS? Pengertian dan Fungsinya itu apaansih? Apakah ada Sejarahnya about CSS?


CSS atau Cascading Style Sheet merupakan aturan untuk mengatur beberapa komponen dalam sebuah web
Read More


Flag Counter

ads

ads



DomaiNesia

Related Posts


posts

Pengertian dan Cara Menggunakan Bootstrap

Seperti yang kalian ketahui Bootstrap adalah kerangka kerja CSS yang sumber terbuka dan bebas untuk merancang situs web dan aplikasi web.

Lihat

posts

Cara Embed Website ke halaman Website Sendiri Responsive

Kalian ingin meng-Embed sebuah website ke halaman website Kalian sendiri, dan Kalian tidak tahu cara membuatnya? di sini saya akan memberi tahu caranya meng-Embed Website

Lihat

posts

Cara Embed Video YouTube AutoPlay Terbaru ke halaman Website Sendiri Responsive

Kalian ingin meng-Embed video YouTube kalian ke sebuah halaman website? dan juga ingin membuatnya AutoPlay? Yuk Sini saya beri source code nya!

Lihat

posts

Coming soon

Gone? Coming soon guys, have a nice day

Lihat