Artikel ini merupakan lanjutan dari artikel “Pengetahuan Dasar dalam Membuat Website”.
Artikel ini mempunyai tujuan mengajarkan membuat website dengan tampilan sederhana.
Terdapat persiapan yang harus ada pada komputer untuk membuat membuat website yaitu:
1. Browser
Untuk menampilkan hasil website yang dibuat.
2. Xampp
Untuk menjadikan komputer anda sebagai server sehingga browser dapat membaca flow coding yang dibuat.
3. Notepad++
Aplikasi untuk menuliskan coding.
Untuk Xampp bisa anda download dan install melalui link ini.
Sesuaikan pilihan dengan sistem operasi komputer anda dan ikuti langkah instalasi.
Setelah terinstall dapat dijalan untuk fungsi apache dengan menekan tombol start.
Lanjutkan dengan notepad++ yang bisa didapat melalui link ini.
Setelah download selesai silahkan melanjutkan instalasi melalui langkah yang diberikan dan jalankan aplikasinya.
Bukalah windows explorer anda dan carilah folder htdocs yang terletak pada c://xampp/htdocs jika anda tidak mengubah lokasi pada saat instalasi.
Lanjut dengan notepad++ dan lakukan “save as” -> pilih lokasi folder htdocs -> buat folder baru -> berikan nama new dan namakan file menjadi “index.html”
Kita akan membagi dalam 4 bagian tampilan yaitu header, menu, content dan footer.
1. Header
Kita akan memulai dengan mengetikkan coding menggunakan notepad++.
Mari kita berikan logo sebagai pengenal website, bisa berupa huruf atau gambar.
Untuk huruf bisa menggunakan coding:
<p>Logo</p>
Dan untuk gambar harus mencari image terlebih dahulu dan letakkan pada folder yang sama dengan file index.html dan gunakan coding berikut untuk memanggil:
<img src=”letak file dan nama file yang digunakan”>
2. Menu
Disini akan dibuat bentuk sebuah tampilan utama untuk navigasi halaman website.
Mari gunakan bentuk tombol sebagai bentuk:
<a href=””><button>Menu 1</button></a>
<a> berfungsi untuk mengarahkan tujuan tombol
<button> berfungsi membuat bentuk tampilan tombol
Duplikat sesuai dengan kebutuhan.
3. Content
Dalam sini dapat dibuat selera masing-masing dan untuk contoh akan dibuat 1 buah artikel berisi kata dan gambar.
<div><img src=”letak file dan nama file yang digunakan”><br><p>Ini merupakan isi dari halaman website saya</p></div>
<div> Untuk memberikan alokasi pada suatu isi.
<img> Untuk memasukkan gambar
<br> Untuk mengakhiri baris.
<p> Untuk menandakan isi merupakan paragraph.
4. Footer
Memberikan identitas kepemilikan sangat mudah hanya mengetikkan keterangan yang diinginkan menggunakan paragraph.
<center><p>Dibuat oleh Saya</p></center>
<center> Untuk mengalokasikan isi ketengah tampilan.
Mari simpan lalu bukalah browser anda untuk melihat hasil dengan alamat website “localhost/new“.
File index.html akan diketahui sebagai halaman awal yang harus dibuka oleh browser jadi jika ada penamaan lain maka harus diketikkan juga nama file tersebut seperti “localhost/new/contoh.html“.
Sebagai latihan, hasil ini dapat digunakan untuk mendapatkan yang lebih baik agar kemampuan dapat menjadi lebih baik.
Semakin sering melakukan percobaan maka pengalaman akan bertambah seiring waktu.
Semoga artikel ini berguna bagi pengunjung.
