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

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

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:

Cara Mendapatkan Username dan Password Akun Facebook

Facebook kini sudah seperti rumah dan bahkan menjadi tempat untuk curhat , iya kan?. kenapa saya bisa bilang seperti itu karena ya seperti yang saya amati pengguna facecbook di dunia kini semakin bertambah ya, bahkan sekarang di facebook  juga kita bisa berjualan, beriklan sudah seperti situs jual beli saja. di facebook juga ada grup yang khusus menjual suatu produk dan tidak jarang orang bertransasksi di platform ini ya, meskipun sangat rawan terhadap penipuan karena tidak adanya admin khusus dan peraturan yang mengikat seperti di platform situs jual beli. belakangan ini banyak sekali keluhan akun facebook yang di bobol hingga pemiliknya tidak dapat lagi mengakses akun tersebut, bahkan ada yang sampai meminta tebusan agar akun nya bisa kembali seperti semula. saran saya jika memang terlanjur seperti ini laporkan saja akun tersebut untuk ditinjau oleh pihak facebook jangan lupa juga untuk screanshoot percakapan di chat.   ada banyak cara untuk membobol akun facebook, apalagi dul