Contoh Kode HTML Sederhana – Contoh Web HTML Sederhana
Di halaman ini anda akan mempelajari tentang :
Tools-tools yang diperlukan untuk membuat kode html
Cara Membuat file HTML
Membuat Title halaman website HTML
Membuat Header Website HTML
Membuat Menu Website
Mengisi Konten website
Membuat Footer
Download contoh koding HTML website lengkap
Dari sederhana yang akan kita buat, nantinya akan menghasilkan halaman website seperti ini :
Kode HTML merupakan kode yang digunakan untuk membuat suatu halaman website. Jika anda ingin belajar membuat website, pondasi awalnya adalah mempelajari HTML. Setelah anda menguasai HTML secara fasih, selanjutnya anda bisa mempelajari lebih jauh bahasa-bahasa pemrograman website lainnya seperti javascript, PHP, dan lain-lain. Namun tanpa anda mempelajari HTML, mempelajari bahasa pemrograman website lainnya bisa menjadi sia-sia karena bahasa pemrograman website apapun selalu berujung kepada output HTML.
Jika anda ingin mencoba membuat contoh coding HTML website, berikut ini akan kami berikan panduan singkatnya agar anda bisa mencoba sendiri membuat kode website HTML dengan mudah dan cepat.
Tools yang Dibutuhkan untuk Membuat Kode HTML
Membuat file html untuk web html sederhana sangatlah mudah, bahkan jika sekedar ingin mencoba, anda bisa menggunakan tools-tools atau software yang sudah ada di komputer/laptop anda. Yaitu :
Notepad
Software bawaan windows ini bisa anda gunakan untuk membuat file HTML sederhana hingga file HTML yang rumti sekalipun. Namun tentunya ada beberapa kekurangan ketika anda memilih melakukan proses coding atau penulisan kode HTML menggunakan notepad, diantaranya kode yang tidak tersusun rapi sehingga agak sulit ketika dilakukan pengeditan ataupun modifikasi kode. Tapi apabila anda sekedar hanya ingin membuat kode HTML sederhana, anda bisa menggunakan notepad, lalu selanjutnya setelah lebih mahir anda bisa menggunakan aplikasi editing lainnya yang memiliki fitur lebih lengkap.
Browser
Tools selanjutnya yang akan kita gunakan yaitu browser. Anda bisa menggunakan browser bawaan windows yaitu Internet Explorer, ataupun menggunakan browser lainnya seperti Google Chrome, Firefox, Safari ataupun Opera. Browser ini diperlukan untuk menampilkan hasil halaman website HTML yang akan kita buat.
Membuat file HTML
Untuk membuat file HTML, buka aplikasi notepad di laptop/komputer anda. Setelah itu ketikkan kode berikut di dalam notepad :
<!DOCTYPE html> <html> </html>
Kode diatas merupakan kode dasar untuk membuat suatu file HTML yang berfungsi untuk memberitahu browser bahwa file tersebut adalah file HTML.
Setelah mengetikkan kode tersebut di notepad anda, pilih menu save as. Simpan file notepad dengan nama index.html lalu ganti file type menjadi all type. Selamat, anda telah berhasil membuat file HTML pertama anda!
Anda bisa mencoba menjalankan file html ini dengan membuka file index.html yang telah anda simpan. File ini akan terbuka di browser default anda. Atau untuk membukanya di browser favorit anda, anda bisa melakukan right klik pada file ini, lalu pilih open with, dan pilih browser favorit anda. Maka browser akan membuka file html anda dan menampilkannya menjadi sebuah tampilan halaman website.
Membuat Pagetitle dan Head Halaman HTML
Selanjutnya setelah berhasil membuat file HTML kita akan membuat tag head di file html anda. Tag head ini akan berisi informasi-informasi mengenai halaman website anda. Selain itu di tag head ini juga anda bisa memasukkan file-file lain yang dibutuhkan seperti file css ataupun javascript untuk menunjang website anda. Kode-kode di dalam tag head ini tidak akan ditampilkan kedalam layar output saat anda membuka file html di browser, namun sangatlah penting untuk memberikan informasi kepada browser, bot maupun search engine mengenai halaman website anda.
Pada contoh kali ini, kita akan memasukkan beberapa informasi penting seperti nama halaman (pagetitle) serta meta description yang merupakan deskripsi atau penjelasan mengenai halaman website anda. Tambahkan tag head di file notepad anda sebelumnya diantara tag html dengan kode sebagai berikut :
<head> <title>Contoh Website HTML Sederhana</title> <meta name="description" content="Contoh Kode HTML Sederhana"> </head>
Save notepad anda, maka sekarang file HTML anda sudah berisi informasi awal mengenai website anda.
Membuat Header Website
Sebelumya perlu dijelaskan disini bahwa header berbeda dengan tag head. Jika tag head merupakan tempat disimpannya kode berupa informasi-informasi seputar halaman website, sedangkan header merupakan tampilan website yang berada di paling atas halaman website. Pada umumnya, di header ini akan ditampilkan judul utama halaman, tagline website, logo, serta menu navigasi website.
Untuk contoh kode HTML sederhana kali ini kita akan membuat header dengan background berwarna biru yang berisi judul serta tagline website. Tambahkan beberapa baris kode setelah tag penutup </head> di file html anda dengan beberapa baris kode berikut :
<body> <div class="top-header"> <h1>Judul Halaman Website</h1> <span>Tagline mengenai halaman website</span> </div> </body>
Selanjutnya, untuk merubah tampilan header yang telah kita buat tersebut diatas, kita memerlukan beberapa kode css untuk merubah tampilan seperti warna, huruf, background, dan settingan-settingan tampilan lain. Untuk itu, anda perlu menambahkan kode berikut di antara tag <head> dan </head> file html anda :
<style>
body {
font-family: 'Open Sans Condensed', sans-serif;
margin:0;
}
.top-header {
width:100%;text-align:center;background-color:#2ca1db;padding-top:80px;padding-bottom:80px;color:#fff;
}
.menu {
background-color:#247ca7;
}
</style>
Setelah mengetikkan kode diatas, save file notepad anda, lalu cobalah untuk membuka file tersebut. Maka header telah berhasil muncul di halaman website anda.
Membuat Menu Website
Menu merupakan suatu bagian penting dalam sebuah website. Dengan adanya menu, pengunjung website bisa membuka halaman lain di website anda. Kode selanjutnya yang akan kita buat adalah kode menu untuk membuat menu dibawah bagian header halaman website.
Setelah kode header terakhir diatas yang anda tambahkan ke file html sederhana anda, tambahkan kode berikut untuk membuat sebuah menu :
<div class="menu"> <ul class="nav-menu"> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Profile</a></li> <li><a href="">Contact</a></li> </ul> </div>
Selain itu untuk membuat tampilan menu menjadi lebih menarik, tambahkan kode berikut diantara tag <style> dan </style> untuk memasukkan kode css guna merubah tampilan menu default.
.menu {
background-color:#247ca7;
}
.menu {
background-color:#247ca7;
}
.nav-menu {
margin:0px;
padding-left:0px;
list-style:none;
text-align:center;
}
.nav-menu li {
display:inline-block;
padding-top:15px;
padding-bottom:15px;
color:#fff;
}
.nav-menu a {
color:#fff;
padding-top:15px;
padding-bottom:15px;
text-decoration:none;
padding-right:5px;
padding-left:5px;
}
.nav-menu li:after {
content : '|';
}
.nav-menu li:last-child:after {
content : '';
}
Mengisi Konten Website (Judul, Paragraf, Gambar, Serta List)
Langkah selanjutnya adalah mengisi halaman website anda dengan konten. Kita akan menambahkan judul, paragraf, gambar dan juga list di konten halaman website. Tambahkan kode-kode berikut di file HTML anda :
<div class="main-content"> <h2>Sub Judul Halaman</h2> <h3>Sub Judul</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus risus eu leo luctus venenatis. Mauris eros dui, commodo vitae venenatis volutpat, porttitor quis tellus. Aenean ullamcorper tristique ex iaculis fringilla. Maecenas rutrum, ipsum ut porttitor varius, risus eros lobortis urna, accumsan mollis metus tortor ut mauris. Morbi eu mollis ante. Vivamus venenatis tortor quis finibus auctor. Suspendisse consequat tempor quam. Praesent sem dolor, tristique ac iaculis sit amet, tristique sit amet arcu. In vel dui a elit imperdiet varius sed in sapien. Pellentesque vel sapien sit amet mi imperdiet vestibulum.</p> <p>Aliquam aliquam blandit orci, vitae blandit ligula dignissim in. Aliquam at eleifend nisi. Maecenas gravida nibh eu semper tempor. Mauris placerat id ex sit amet placerat. Cras malesuada fringilla risus et tempus. Fusce sit amet velit metus. Integer facilisis venenatis lectus, ut mollis risus porta sed. Ut eu ullamcorper turpis, id elementum ante. Nam aliquam feugiat aliquam. Proin commodo fermentum dapibus.</p> <div style="text-align:center;"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/180px-HTML5_logo_and_wordmark.svg.png"> </div> <p>Pellentesque non nisi elit. Donec viverra enim augue, id consequat ex elementum sed. Aenean purus sem, bibendum quis tristique sed, laoreet quis nisi. Integer ultrices purus ac aliquet fermentum. Sed vulputate orci leo, vel dignissim sem dictum quis. Sed eleifend, tortor venenatis porta vestibulum, risus ante scelerisque mauris, id commodo tortor massa nec tortor. Nullam semper molestie purus in congue. Duis ac vulputate libero. Etiam vel orci aliquam, tempor nunc gravida, tempus metus. Duis lobortis fringilla nisl non ultrices. Vivamus vulputate enim mauris, quis rhoncus leo facilisis nec. Vestibulum et elit scelerisque, fermentum massa quis, ullamcorper nunc. Proin ut tincidunt purus, et lobortis tellus. Vivamus ut leo ullamcorper, suscipit ipsum a, tincidunt dolor. Donec ut interdum velit, nec porta sapien.</p> <ul> <li>Daftar List 1</li> <li>Daftar List 2</li> <li>Daftar List 3</li> <li>Daftar List 4</li> <li>Daftar List 5</li> <li>Daftar List 6</li> </ul> <h3>Sub Judul</h3> <p>Nulla consectetur ornare leo nec consequat. Fusce fermentum convallis lectus, at posuere sem vehicula fringilla. Morbi nulla justo, dapibus quis mi et, fringilla tempor nunc. Praesent faucibus gravida ex, ut tincidunt sem vestibulum et. Ut ac enim eros. Duis luctus dui vitae sagittis finibus. In eu velit ut ante elementum placerat a sit amet magna. Praesent aliquet interdum dui, in eleifend augue accumsan id.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper nisl sem, ut sagittis urna consequat vel. Nulla tincidunt luctus sodales. Nulla venenatis neque et felis interdum efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sit amet mollis ante. Nullam sit amet dui in felis tempor fringilla ut vulputate enim. In sit amet augue imperdiet, venenatis tellus ut, facilisis felis. Sed porttitor magna ante, ac pretium lacus tristique ut. Nam sem magna, accumsan quis risus eu, sollicitudin lobortis mi. Nulla consectetur tortor at sapien tincidunt cursus. Sed porta ornare volutpat. Vestibulum sollicitudin vehicula mi. Quisque eu dui ex. Proin dignissim egestas facilisis. Proin pretium velit tempus, volutpat ipsum et, dapibus leo.</p> </div>
Membuat Footer Website
Bagian terakhir dari suatu website adalah footer. Footer merupakan bagian paling bawah dari suatu website, biasanya pada footer berisi link, alamat bisnis, kontak, account social media, dan informasi-informasi lain yang belum sempat tercantum di bagian lain suatu website. Kali ini kita akan membuat kode html untuk membuat footer website. Masukkan kode footer pada bagian bawah file html anda sebelum tag </body> :
<div class="footer"> <div class="foot-area"> <h3>Tentang Website</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus risus eu leo luctus venenatis. Mauris eros dui, commodo vitae venenatis volutpat, porttitor quis tellus. </p> </div> <div class="foot-area"> <h3>Daftar Link</h3> <a href="">Link 1</a> <a href="">Link 2</a> <a href="">Link 3</a> <a href="">Link 4</a> <a href="">Link 5</a> </div> <div class="foot-area"> <h3>Hubungi Kami</h3> <ul> <li>Email : Email@email.com</li> <li>Telepon : 0800-0000-0000</li> </ul> </div> <div class="foot-area"> <h3>Follow Social Media Kami</h3> <ul> <li>Facebook : Link Facebook</li> <li>Twitter : Link Twitter</li> </ul> </div> <div class="copy"> <span>Copyright 2018 - website anda. </span></div> </div>
Demikianlah tutorial kali ini mengenai contoh website HTML sederhana untuk membuat website yang bisa anda praktekkan langsung untuk membuat sebuah halaman website. Halaman website yang telah kita buat sangatlah sederhana, namun setidaknya bisa menjadi awal pengetahuan anda mengenai cara membuat kode HTML, dan berbekal pengalaman membuat contoh kode HTML ini anda bisa mempelajari lagi lebih dalam tentang HTML.
