Contoh Kode HTML Sederhana untuk Membuat Website

Contoh Kode HTML Sederhana untuk Membuat Website

Contoh Kode HTML Sederhana

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 kode HTML sederhana, berikut ini akan kami berikan tutorialnya agar anda bisa mencoba sendiri membuat kode website HTML dengan mudah dan cepat.

Tools yang Dibutuhkan untuk Membuat Kode HTML

Membuat file html 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!

Save file html sederhana

Anda bisa mencoba menjalankan file html ini dengan membuka file index.html yang telah anda simpan. File ini akan terbuka di browser default anda.

tampilan html

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 hingga kode HTML di file tersebut menjadi seperti berikut :

<!DOCTYPE html>
<html>
<head>
<title>Judul Website Anda</title>
<meta name="description" content="Deskripsi mengenai website anda">
</head>
</html>

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 sehingga kode HTML anda menjadi sebagai berikut :

<!DOCTYPE html>
<html>
<head>
<title>Judul Website Anda</title>
<meta name="description" content="Deskripsi mengenai website anda">
</head>
<body>
<div style="width:100%;text-align:center;background-color:#70a1ff;padding-top:80px;padding-bottom:80px;">
<h1>Judul Halaman Website</h1>
<span>Tagline mengenai halaman website</span>
</div>
</body>
</html>

Setelah mengetikkan kode diatas, save file notepad anda, lalu cobalah untuk membuka file tersebut. Maka hasilnya adalah tampilan website seperti berikut :

contoh tampilan HTML sederhana header

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 :

<!DOCTYPE html>
<html>
<head>
<title>Judul Website Anda</title>
<meta name="description" content="Deskripsi mengenai website anda">
</head>
<body>
<div style="width:100%;text-align:center;background-color:#70a1ff;padding-top:80px;padding-bottom:80px;">
<h1>Judul Halaman Website</h1>
<span>Tagline mengenai halaman website</span>
</div>
<h2>Sub Judul Halaman </h1>
<p>Isi Paragraf Halaman Website </p>
<img src="gambar.jpg">
</body>
</html>

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 sehingga file index.html anda akan menjadi seperti ini :

<!DOCTYPE html>
<html>
<head>
<title>Judul Website Anda</title>
<meta name="description" content="Deskripsi mengenai website anda">
</head>
<body>
<div style="width:100%;text-align:center;background-color:#70a1ff;padding-top:80px;padding-bottom:80px;">
<h1>Judul Halaman Website</h1>
<span>Tagline mengenai halaman website</span>
</div>
<h2>Sub Judul Halaman </h1>
<p>Isi Paragraf Halaman Website </p>
<img src="gambar.jpg">
<div style="width:100%;text-align:center;background-color:#ececec;padding-top:80px;padding-bottom:80px;">
<span>Copyright - website anda.</span>
</div>
</body>
</html>

Demikianlah tutorial kali ini mengenai contoh kode 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 kode HTML ini anda bisa mempelajari lagi lebih dalam tentang HTML.

Ditulis oleh : Admin | Tanggal Terbit : 15 Februari 2018 | Share artikel ini di :

Artikel Lainnya

Panduan Cara Membuat Website Toko Online dan Website Bisnis Lainnya Tutorial Membuat Website

Belajar cara membuat website toko online dan website bisnis. Video tutorial terlengkap yang akan membantu anda mempelajari dari A-Z cara membuat website sendiri dengan mudah dan cepat bahkan untuk pemula sekalipun.

HTML Adalah – Pengertian HTML HTML Adalah

Mengenal HTML atau Hypertext Markup Language, HTML adalah kode yang digunakan untuk membuat suatu website.

Belajar HTML Mudah dan Cepat untuk Pemula Belajar HTML

Panduan belajar HTML dengan mudah dan cepat untuk semua orang, bahkan anda yang tidak memiliki pengalaman ataupun background di bidang IT sekalipun bisa membuat website HTML anda sendiri.

Tutorial Lengkap Cara Mendapat Uang dari Google Adsense Dapat Uang dari Google

Tutorial cara mendapat uang dari google adsense terlengkap. Nikmati penghasilan passive income dari bisnis google adsense.