Membuat Web Dengan Html

Html5 Hotel Room Booking Javascript Php Mysql Daypilot Code

Membuat Website HTML CSS Sederhana Part 1/11

Dalam pembuatan website, tentu tidak bisa langsung selesai. Kita perlu membuatnya beberapa part pengerjaan, begitu juga artikel Cara Membuat Wesbite Sederhana HTML CSS ini akan dibagi menjadi beberapa part karena setiap partnya akan banyak penjelasan yang bisa diikuti dan mudah-mudahan bisa menjadi ilmu baru buat yang belum tau.

Supaya sesuai dengan judul membuat website sederhana, saya sudah gambarkan rencana website sederhana yang akan dibuat seperti ini: (lihat gambar).

Dibagian atas, akan kita gunakan untuk header dan bisa diisi dengan gambar. Dibagian Menu, kita akan terapkan beberapa menu seperti biasanya. Dibagian Artikel Disarankan, bisa terapkan beberapa artikel yang disarankan / artikel andalan yang lebih menonjol dan direkomendasikan pada pengunjung situs web kalian.

Kemudian pada bagian utamanya ada 2 kolom (kiri & kanan), pada bagian kiri kita buat lebih kecil dibanding kolom disebelah kanan karena sebelah kiri akan kita gunakan untuk Sidebar / Widget dan sebelah kanannya bisa kita gunakan untuk menampilkan deretan post terbaru / post arsip / single post nantinya.

Sekarang, silahkan siapkan aplikasi coding / code editor yang akan digunakan, misalnya Adobe Dreamweaver atau Sublime Text.

Buat file baru didalam aplikasinya dan save terlebih dahulu supaya syntaxnya enak, simpan file dengan ekstensi .html supaya syntaxnya berupa HTML. Untuk nama filenya bebas misalnya home.html / beranda.html / index.html, file pertama ini akan kita buat sebagai halaman beranda / halaman utama sebuah situs maka biasa disimpan sebagai index.html tapi saya akan simpan dengan nama membuatwebsite.html saja karena ini sebagai contoh / tutorial saja ya…

Sebaiknya kalian buat folder baru untuk tutorial ini sampai selesai part terakhir supaya lebih rapih kemudian didalam folder itu kalian simpan semua tutorial ini. Saya akan buat dengan nama folder Tutorial Today dan didalamnya akan disimpan filenya.

Setelah filenya disimpan sebagai .html maka syntaxnya sekarang pada aplikasi coding sudah berupa syntax HTML. Selanjutnya, silahkan buat Struktur Dasar HTML. Pada bagian ini akan kita terapkan judul untuk website dan judul ini akan muncul di bagian tab browser. Didalam head buatlah tag dan didalamnya tuliskan judul website kalian.

<!DOCTYPE html>
 <html>
 <head>
 	<title>Tutorial Membuat Website Sederhana - HTML CSS</title>
 </head>
 <body>
 
 </body>
 </html>

Untuk memahami lebih lanjut tentang struktur dasar dokumen HTML, silahkan lihat disini.

Tulisan dalam <title> itu disebut judul karena akan muncul pada bagian tab browser ketika dibuka di browser, disamping logo ketika membuat favicon.

Sekarang tuliskan tag <header></header> didalam bagian body. Pada bagian header ini akan kita simpan gambar, maka sebaiknya kita buat folder gambar terlebih dahulu. Nantinya folder gambar ini akan kita gunakan untuk menyimpan semua gambar yang kita gunakan pada website. Sebetulnya, kalian bisa simpan gambar dimana saja tapi kita buat folder seperti ini supaya lebih rapih dan saya akan beri nama foldernya images.

Folder images ini sejajar dengan file beranda html ini atau sama-sama berada didalam folder Tutorial Today. Jangan lupa didalam folder images nya simpan gambar yang akan digunakan, saya sudah siapkan beberapa gambar yang akan digunakan dan sudah disimpan didalam folder images ini.

Didalam tag <header> tadi, tuliskan tag untuk menampilkan gambar yaitu <images src=””>.

<!DOCTYPE html>
 <html>
 <head>
 	<title>Tutorial Membuat Website Sederhana - HTML CSS</title>
 </head>
 <body>
      <header>
           <img src="images/">
      </header>
 </body>
 </html>

Memanggil gambar dalam HTML harus sama dengan nama gambar + ekstensinya, jangan sampai salah karena kalo salah akan error. Misalnya saya akan gunakan gambar yang bernama satu dengan jenisnya JPEG/JPG maka saya tuliskan didalam tag img tadi seperti ini: <image src=”images/satu.jpg”> yang ditulis disitu adalah nama folder yang tadi kita buat untuk menyimpan gambar, kita panggil nama foldernya lalu nama file (gambar) nya yang akan digunakan.

Untuk mengetahui lebih lanjut tentang pemanggilan gambar / file dalam html silahkan baca artikel Bagaimana Cara Memanggil File Didalam HTML CSS.

Sekarang klik Save & silahkan cek di browser file HTML yang sudah dibuat, kalo gambarnya tidak muncul maka artinya ada kesalahan dalam penulisannya. Dari codingan yang kita buat diatas, gambar sudah berhasil muncul tapi tidak rapih, karena kita belum atur CSS nya, nanti akan kita atur. Sekarang kita susun kerangka HTML nya terlebih dahulu.

Buatlah tag <menu></menu> dibawah header tadi. Pada menu ini kita akan menggunakan tag daftar / list yang nantinya kita isi dengan link. Untuk menulis daftar silahkan gunakan tag <li> dan didalamnya adalah nama menu yang diinginkan misalnya seperti ini:

<!DOCTYPE html>
 <html>
 <head>
 	<title>Tutorial Membuat Website Sederhana - HTML CSS</title>
 </head>
 <body>
      <header>
           <img src="images/satu.jpg">
      </header>
      <menu>
      	<li>Home</li>
      	<li>Download</li>
      	<li>Tutorial</li>
      	<li>Software</li>
      	<li>Design</li>
      	<li>Support</li>
      	<li>Contact</li>
      </menu>
 </body>
 </html>

Sekarang cek lagi di browser kalian yang masih berantakan dan lihat dibawah gambar yang tadi akan muncul list / daftar menu yang baru saja dimasukkan.

Sampai tahap ini, saya rasa pembaca sudah mulai paham beberap hal dalam bahasa pemrograman HTML seperti: Struktur dasar, daftar / list, pemanggilan file gambar, tag menu, dll.

Untuk membuat semua struktur HTML diatas terlihat rapih, tentu kita memerlukan bantuan CSS sebagai style. Silahkan buat file baru dengan nama misalnya style.css kemudian simpan didalam folder yang sama dengan file HTML ini atau jika mau dipisahkan silahkan buat folder baru dengan nama CSS artinya file style.css ini berada didalam folder CSS.

Setelah itu, panggil file CSS nya dibagian <head> seperti ini: <link href="css/style.css" type="text/css" rel="stylesheet">

Terapkan kode tersebut tepat dibawah tag <title> didalam <head>. Maka sekarang file HTML ini sudah terintegerasi dengan file CSS. Silahkan buka file style.css tersebut di kode editor dan tambahkan kode berikut didalamnya:

* {margin: 0; padding: 0;}
 body {
 	width: 900px;
 	margin: auto;
 }
 
 header {
 	width: 900px;
 	height: 250px;
 }
 header img {
 	width: 900px;
 	height: 250px;
 }
 
 menu {
 	width: 880px;
 	height: 30px;
 	background-color: blue;
 	padding: 10px;
 	margin-top: 5px;
 }
 
 menu li {
 	list-style: none;
 	float: left;
 	margin-right: 20px;
 	margin-top: 5px;
 	color: #fff;
 }
 menu li a {
 	text-decoration: none;
 	color: #fff;
 }
 menu li a:hover {
 	color: orange;
 }

Setelah diterapkan, silahkan Save dan lihat hasilnya di browser. (lihat gambar)

Jika ada yang bertanya-tanya apa maksudnya * {}, itu style adalah keseluruhan nilai default pada HTML. Didalamnya saya terapkan margin dan padding 0 karena secara default HTML memiliki margin dan padding dan saya ingin menghilangkannya agar tidak mengganggu codingan style saya yang lain.

Perhatikan pada style header terdapat width dan height, itu adalah lebar dan tinggi header yang sudah kita sisipkan gambar didalamnya. Silahkan tentukan lebar dan tinggi header yang memiliki gambar didalamnya sesuai selera.

Kenapa lebar header dan lebar menu bisa sama padahal header width 900px sedangkan menu width 880px ?

Pertanyaan bagus 😀

Perhatikan pada bagian menu, disitu terdapat padding 10px yang artinya atas kanan bawah dan kiri menu akan memiliki jarak 10px. Ketika lebar 900px dipotong kanan 10px dan kiri 10px maka hasilnya ? Ya 880px, makanya saya tulis 880px.

Nah sampai sini saya rasa sudah lumayan terlihat rapih walaupun baru header dan bagian menu saja. Saya anggap sudah paham dan mari lanjutkan ke part berikutnya.

Jika ingin memberikan dropdown menu / menu tarik-turun silahkan lihat disini bagaimana cara membuat menu dropdown sederhana di HTML CSS. Lihat juga disini jika ingin mempelajari cara membuat dropdown menu dengan banyak submenu / anak menu didalamnya.

Silahkan lanjut ke penjelasan part selanjutnya (Part 2), atau jika masih kurang paham tentang pembahasan diatas silahkan lihat video tutorial membuat website sederhana part 1 disini.

Kesimpulan

Menu yang saya buat hanya sekedar contoh saja, jika ingin menambahkan atau mengurangi menu silahkan atur pada tag li dan a href nya. Begitupun dengan gambar, warna dan warna ketika hover silahkan diatur sesuai keinginan. Jangan terlalu terpaku dengan tutorial, explore your self guys !