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

Posting Komentar

Postingan populer dari blog ini

Trik Sederhana Membuat Internet Menjadi Murah

Gambar
  Sekarang internet sudah menjadi kebutuhan dan setiap orang menggunakan internet, siapa sih yang tidak ingin internet menjadi murah? Supaya internet bisa menjadi murah sebenarnya sangat sederhana: Berbagi biaya akses internet dengan tetangga / Patungan, contoh sederhana bisa kita gunakan dengan sistem RT/RW Net . Membangun Server Lokal untuk menyimpan semua data konten dari internet, hal ini bertujuan untuk menghilangkan biaya akses internet ke luar, jika server ada di lingkungan RT/RW Net maka cukup hanya server yang mengumpulkan data/konten baru dari internet untuk disimpan di server lokal. (konten video dan artikel ). Lebih banyak yang ikut patungan untuk akses internet maka akan semakin murah biaya layanan internet. Misal harga layanan 500rb 10Mbps. Maka kita bisa bagi dengan jumlah orang/rumah yang ikut patungan. Contoh : untuk membagi biaya kita bisa bagi dengan misal 10 Rumah ikut patungan , 10Mbps / 10 rumah maka masing-masing rumah akan me...
Baca selengkapnya

Membuat Aplikasi Login Sederhana PHP mysqli

Gambar
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/ (sudah off) Aplika...
Baca selengkapnya

SITU GARUNGAN DESA BUNGUR RAYA - LANGKAPLANCAR - PANGANDARAN

Gambar
  Gimana nih udah nemu tempat liburan yang masih alami belum, atau bosan ke tempat yang sama setiap liburan, ke pantai atau ke gunung, ada satu lagi tempat rekomendasi buat liburan yang masih alami dan jauh dari keramaian lalulintas, udaranya juga sangat bersih terhindar dari polusi asap kendaraan cocok buat liburan keluarga. "SITU GARUNGAN" sebuah tempat wisata di Desa Bungur Raya Kecamatan Langkaplancar Kabupaten Pangandaran ini menawarkan wisata air yang dipadukan dengan suasana pegunungan yang sejuk, sangat cocok untuk yang ingin mendapatkan ketenangan sejenak dari keramaian atau sejenak melupakan banyaknya tugas pekerjaan yang menumpuk. Tempat ini menawarkan Spot Mancing untuk yang seneng mancing, ada juga wahana bebek goes untuk berkeliling menikmati pemandangan dan kalau sudah lelah bisa langsung makan tuh, ada nasi liwet dengan ikan bakar ,, wiihhh mantapkan, setelah bermain dan beraktivitas seharian lanjut makan. Buat kalian yang ingin melaksanakan ibadah Shalat, ja...
Baca selengkapnya