Langsung ke konten utama

Cara Membuat Website Sederhana untuk pemula Bagian #01

( Tampilan Website Sederhana )
Selamat datang kembali di blog snb , artikel kali ini saya akan membuat tutorial "Cara Membuat website sederhana untuk pemula bagian 1". langsung saja ke persiapan nya ya... Kalian bisa download projectnya di bagian akhir artikel ini yaa...
  • Komputer / Laptop
  • Browser bisa mozila atau chrome
  • Editor saya rekomendasikan (SublimeText atau Visual Studio Code)
pada gambar di atas  bisa kita lihat no. 1 adalah browser mozila dan no. 2 adalah text editor dan saya akan menggunakan Sublime Text ya... ingat ya disini saya menggunakan OS LinuxMint versi 19.3 , di windows juga sama aplikasi text editor nya ya..!

Langkah selanjutnya adalah kita buat folder dengan nama "snb-web" di letakan di Desktop ya, lihat gambar di bawah ini..
 selanjutnya kita buat 1 file dengan nama "index.html" dan folder "assets" seperti gambar di bawah..
Folder aset nantinya akan diisi dengan gambar dan pendukung web lainya, ini saya jelaskan di lain waktu aja ya..
sekarang kita buka folder snb-web ke editor sublime ya, lihat gambar dibawah..
Buka dulu "sublime text" nya, pada sublime klik menu "file" kemudian "Open Folder"....

 setelah muncul jendela select folder, kita masuk ke Desktop - pilih folder "snb-web" kemudian klik "Open"..
pada gambar di bawah bisa kita lihat sebelah kiri ada sidebar "OPEN FILES"  pada bagian OPEN FILES klik index.html nanti muncul di bagian kanan kode html nya seperti gambar di bawah ini..

 Code:

<!DOCTYPE html>
<html>
<head>
    <title></title>

</head>
<body>
<h1></h1>
</body>
</html> 

sekarang bka file "index.html" di browser kita ya, caranya klik kanan kemudian open with firefox atau bisa double klik file nya, di sesuaikan saja oke.. lihat gambar di bawah ini,

 nanti tampil di browser seperti di bawah ini

 lihat no 1 adalah title atau judul dan masih berantakan ya hehehe... di no 2 juga masih kosong, untuk merubahnya kita kembali ke editor sublime text nya..
 masukan judul diantara tag <title> seperti gambar diatas ya..
<title>snb-web</title> hingga code nya menjadi :

<!DOCTYPE html>
<html>
<head>
    <title>snb-web</title>

</head>
<body>
<h1></h1>
</body>
</html>

kemudian reload di browser kita, jika tidak ada error nanti akan muncul pada kolom title no 1 tulisan "snb-login" lihat gambar dibawah ini..

disini kolom 2 masih kosong ya, sekarang kita akan coba menampilkan icon disamping judul snb-web , lihat gambar dibawah ini:

 kita masukan kode dibawah ini disimpan antara tag <head> lihat gambar di atas..

<link rel="shortcut icon" href="https://comps.canstockphoto.com/internet-global-network-icon-blue-clip-art_csp50739629.jpg">

pada teks warna biru diganti dengan url tempat gambar kita simpan, nantinya kita akan buat url nya jadi [ "assets/icon.png/" ] untuk sekarang kita biarkan seperti ini dulu karena kita belum punya file gambar di folder assets.

sekarang kita reload di browser maka akan ada icon disamping judul snb-web ..
 
lihat di kotak merah sebelah judul snb-web ada gambar kecil / icon, sampai disini harusnya tidak ada error jika penulisan nya benar. tapi di bagian halaman masih kosong ya belum ada konten nya.

kita akan buat tulisan di bagian konten "SELAMAT DATANG SNB" , kembali ke editornya lagi..

pada gambar diatas kita masukan kode 
<h1>SELAMAT DATANG SNB</h1>

sehingga kodenya jadi seperti ini

<!DOCTYPE html>
<html>
<head>
    <title>snb-web</title>
    <link rel="shortcut icon" href="https://comps.canstockphoto.com/internet-global-network-icon-blue-clip-art_csp50739629.jpg">
</head>
<body>
<h1>SELAMAT DATANG SNB</h1>
</body>
</html>

Kemudian reload di browser, nanti akan muncul seperti gambar dibawah ini:

Oke selesai 😍😍... 
klik demo untuk melihat halamannya..  DEMO 
juga kalian bisa download project nya Disini....

Terimakasih selamat mencoba tolong share ke taman kalian ya  biar mereka juga tau apa yang kalian tau salam #snb 😊  .

Komentar

Postingan populer dari blog ini

Aplikasi Sistem Informasi Data Kependudukan ( SIDAK ) GRATISS!!

  Aplikasi Sistem Informasi Data Kependudukan digunakan untuk mengelola data penduduk di lingkup dalam satu Desa. aplikasi ini dibuat dengan open source yang artinya gratis untuk digunakan dan dikembangkan oleh user dan atau oleh pelajar /mahasiswa ataupun guru dan dosen sebagai bahan ajar. aplikasi ini bisa di download gratis link download ada di bawah ini:  Aplikasi : Download disini... Database : Download disini...  Setelah file nya di download kemudian ekstrak seperti biasa dan simpang ke file htdoc untuk aplikasiny dan untuk database import ke server di phpMyadmin kalian yaaa.. untuk login : username :  admin password  : admin Video Tutorial review di bawah ini:

Aplikasi Sistem Informasi Tabungan Siswa (GRATISS!!)

  eTABS singkatan dari Elektronik Tabungan Siswa adalah aplikasi yang akan memudahkan pekerjaan para guru atau staff yang membidangi pengelolaan tabungan siswa di sekolah. aplikasi ini memberikan kemudahan dalam hal pencatatan tabungan meliputi setoran dan penarikan serta info saldo baik itu masing masing siswa atau info kas total. Aplikasi ini gratis dan bebas untuk di downloads serta di modifikasi untuk dikembangkan penggunaan nya. bagi yang ingin mendownload aplikasi nya silahkan menggunakan link di bawah ini : LINK DOWNLOAD Aplikasi  : Download disini... untuk login  aplikasi : username : admin password  : admin Untuk cara pemasangan dan penggunaan aplikasi ini sudah saya jelaskan di video channel youtube saya ya... dan lagi aplikasi ini benar-benar gratis agar bisa digunakan untuk keperluan sekolah baik itu digunakan oleh guru ataupun untuk dikembangkan lagi sebagai bahan pembelajaran dll.  Untuk video cara instalasi dan penggunaan bisa di lihat di bawah ini : semoga aplikas

Membuat Aplikasi Login Sederhana PHP mysqli

Assalamu'alaikum, apa kabar teman teman semua? kali ini saya akan membuat sebuah aplikasi berbasiskan web menggunakan PHP dan mysqli, yaitu membuat login sederhana. aplikasi ini berguna untuk mengidentifikasi pengguna pada suatu halaman website tertentu yang tidak bisa semua orang dapat mengaksesnya. pada artikel kali ini saya tidak akan menampilkan tekhnis coding yang panjang, tapi saya akan memberikan script atau code PHP dan database yang sudah jadi atau tinggal pakai, jika teman teman ingin mempelajarinya bisa buka file nya di teks editor kesayangan teman teman semua ya. yang perlu kita siapkan disini adalah kode editor dan local server, saya menggunakan sublime teks sebagai kode editornya dan menggunakan XAMPP sebagai server local. Berikut adalah contoh Demo dari aplikasi login sederhana ini, teman teman bisa login menggunakan data berikut : Username : admin Password  : admin123 Halaman demo aplikasi ada di http://prodeskel.id/login/ Aplikasi ini terdiri da