Langsung ke konten utama

Belajar HTM & PHP - Membuat Website


Kali ini kita membahas "Belajar Cara Membuat Website Dengan HTML / PHP" untuk part yang kedua Sebelum kita memulai bahasan tentang "Cara Membuat Website Localhost Menggunakan Xampp" ada baiknya kita mengenal lebih dekat dengan fungsi index dalam website dilocalhost.

Apa Itu Index.html ?

Index.html adalah sebuah file yang menjadi indeks sebuah website. File ini otomatis dibuka saat kita membuka website dengan memanggil nama domain website. Index html adalah default file dan merupakan file paling penting bagi website. Tanpa file index.html, jika kita membuka website maka browser akan menampilkan file-file lain dalam bentuk tampilan folder bukan tampilan website sesuai design.

Letak file Index.html

File index.html wajib berada pada direktori utama atau direktori root sebuah website. File index.html juga harus berada pada setiap direktori dan sub direktori dalam direktori website. Hal ini dilakukan untuk alasan keamanan agar website aman dari hacking oleh pihak-pihak yang tidak bertanggungjawab.

Isi file Index.html

File index.html yang berada pada direktori root umumnya berisi tampilan homepage website, yaitu halaman default saat website dibuka dengan nama domainnya. File index.html ini berisi script-script dan tata letak website beserta isi dan link-link didalam website. Dalam sistem website dinamis file index.html menjadi sangat kompleks berbeda dengan website statis.

Sedangkan file index.html pada tiap-tiap direktori dan sub direktori dalam website bisa berisi peringatan untuk tidak diijinkan mengakses halaman atau bisa juga berisi script untuk mengarahkan pengguna ke file index.html pada direktori root. Baik website statis dan website dinamis sebaiknya mewajibkan adanya file index.html pada direktori dan sub direktori dalam website.

File index.html yang berada dalam direktori dan sub direktori akan otomatis dibuka saat pengguna mencoba masuk langsung ke direktori dan sub direktori tersebut. Hal ini mencegah pengguna melihat isi direktori dan sub direktori yang bisa saja menjadi celah keamanan sebuah website.

Apakah harus index.html ?

Sebetulnya ada beberapa nama file yang bisa dipakai untuk file indeks sebuah website, yaitu misalnya :
index.html
index.htm (ekstensi htm sama dengan html, namun html lebih banyak dipakai)
index.php (digunakan jika file index berisi script php)
default.htm (pada server windows)

Diantara ke-empat file diatas, file index.html lah yang paling banyak dan paling umum digunakan. Jika dalam file index ada beberapa atau bahkan keseluruhan mengandung script php, maka file index harus disimpan dengan ekstensi .PHP menjadi file index.php.

Contoh file index.html

Sebuah file index.html sederhana hanya dibuat agar memenuhi format html standar seperti head, body, title dan isi.
Berikut ini contoh file index.html sederhana untuk memberitahukan bahwa situs sedang dalam tahap pembuatan. silahkan taruh file index.html nya taruh di C:>xampp>htdoc>newbie-study :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ayo Membuat website Study-newbie.blogspot.com</title>
</head>
<body>

<p> Hello world</p>
</body>
</html>

Dan lihat di browser anda dengan mengetikkan localhost/study-newbie hasil coding diatas akan nampak seperti ini :




Cara Membuat file index.html

Untuk membuat file index.html sebenarnya kita hanya memerlukan aplikasi text editor. Untuk sistem operasi Windows kita bisa gunakan notepad, notepad++ atau sublime text editor (recommeded). Dan jika kita menggunakan sistem operasi Linux malah ada banyak sekali pilihan teks editor diantaranya Geany, Bluefish, Pluma, Gedit, Kate dan masih banyak lagi aplikasi teks editor di linux.


Untuk lebih jelas bisa dilihat pada tulisan sebelumnya yang khusus membahas tentang Aplikasi Teks Editor untuk Pemrograman Web.
File index.html juga bisa dibuat secara online pada aplikasi teks editor yang disediakan oleh cpanel atau spanel. Jadi file index.html bisa dibuat dan diedit dimana saa asalkan ada aplikasi teks editor.

Sumber : www.nulis-ilmu.com

Selanjutnya Anda bisa membahas desain web bisa lihat di "Belajar Membuat Desain Website Dengan CSS"

Komentar

  1. Terimakasih mas, walaupun saya jualan kaos ukuran besar secara online, tapi kebetulan tertarik untuk belajar programming php. Postingan ini sangat membantu saya untuk belajar mulai dari awal.

    BalasHapus
  2. Dalam index.html kalo misalnya konten meta kita hapus apakah berpengaruh pada index?
    fungsi meta itu untuk apa ya mas?

    thnx mas, masi pemula bgt soalnya hehe

    BalasHapus
    Balasan
    1. Meta atau meta tag itu berfungsi untuk pencarian robot terhadap situs kita, misalnya google menggunakan robot untuk menjelajahi blog kita dengan meta tag. jadi kalau ditanya berpengaruh tidak terhadap tampilan index.html setelah mehapus meta maka jawabannya tidak mas tapi jika ditanya pengaruh terhadap peng-index-kan situs dalam situs pencari seperti google maka jawabannya berpengaruh mas. Semoga bisa membantu mas :)

      Hapus
  3. Mmmm, jadi pengaruhnya pada saat pencarian google ya mas,
    thanx bgt mas penjelasannya sangat jelas :)
    dan thanx juga balesannya cepet hehe

    BalasHapus

Posting Komentar

Komentar dan Kritik kawan diperlukan agar dapat membangun pemula belajar kedepannya. Terima Kasih

Postingan populer dari blog ini

Tutorial Lengkap Membuat Short Link Sendiri Dengan PHP Mysql

Hallo kawan, berjumpa lagi nih sama toturial www.pemulabelajar.com. Kali ini kita akan membahas cara membuat short link sendiri . Pernah dong kawan menjumpai namanya short link, contoh sederhananya saja goo.gl . goo.gl akan membuat url site kita menjadi lebih pendek misalnya saja : http://www.pemulabelajar.com bisa menjadi goo.gl/Jiahs . Begitu juga tutorial kita membuat short link kali ini. Karena membuat short link kita sekarang menggunakan PHP Mysql maka kawan disarankan untuk membuat hosting untuk website yang akan dijadikan website short link kita sendiri, kawan bisa menggunakan layanan gratis seperti 000webhosting.com atapun idhostinger.com (recomended) selain gratis, pembuatan databasenya juga termasuk mudah dan juga tutorialnya sangat banyak digoogle kalau ada waktu saya akan membuatkan tutorial membuat hosting gratis untuk kawan. Membuat Short Link Saya anggap saja kawan sudah membuat hosting disalah satu tempat hosting diatas. Maka langkah a...

Belajar Power Design - Cara Membuat Project Menjadi Gambar

Cara Membuat Project Menjadi Gambar - Artikel ini akan membahas sedikit tentang Power Design dan Bagaimana merubah project power design menjadi sebuah gambar . Masalah ini sering dialami oleh pemula khususnya saya yang bingung bagaimana merubah sebuah project power design menjadi berupa gambar agar mudah dimuat ke sebuah karya tulis. Baca juga : Membuat Teks Rotasi Dengan Photoshop Apa itu Power Design ? Power design adalah sebuah paket program desain tools yang digunakan untuk membuat Visualisasi, dokumentasi dan mendesain suatu sistem perangkat lunak. Paket ini meliputi Process analyst Model (PAM), Data architect tools, Aplication modeler tools, dan Metawork tools. Power Design ini juga sering digunakan menjadi software untuk membuat Diagram Flow Diagram atau DFD . Bagaimana Merubah Project Menjadi Gambar ? Untuk merubah sebuah project pada power design menjadi sebuah gambar cukup mudah. Secara singkatnya kawan cukup memilih semua object yang akan dijadikan sebuah gambar, s...

Belajar Web - Membuat Website Responsive CSS

Sebelum kita meneruskan tutorial selanjutnya yaitu Belajar Membuat Website Responsive baiknya kita pelajari terlebuh dahulu apa aja yang akan kita bahas. Karena yang akan kita bahas selanjutnya adalah responsive web, maka diwajibkan mengerti fungsi script css yang ada di Belajar Desajn Website di html / php toturial sebelumnya. Apa itu float ? Apa itu width ? Apa itu height ? Apa itu clear: both ? Responsive ini memakai @media(max-width) atau @media(min-width) yang memiliki arti lebar maximal style dan lebar minimal yang kita masukkan di dalam @media tersebut. Sebelum memperlajari responsive menu sebaiknya lita pelajari dulu float, clear dan lain-lain. Karena @media tersebut hanya mengganti script css dari css global. Apa itu css global ? Nanti anda penjelasannya masing-masing. Apakah anda sudah ngerti dengan coding css diatas ? Jika belum, ada baiknya anda harus pelajari dulu scriptnya di toturial sebelumnya. Cara memperbaiki jika terjadi error atau kesalahan penulidan pada d...