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 mendap
Baca selengkapnya

Arduino NANO | Menyalakan LED & Blink dengan Arduino NANO

Gambar
 Arduino NANO | Menyalakan LED & Blink dengan Arduino NANO  Kali ini kita akan belajar bagaimana cara untuk menyalakan LED dan Blink pada arduino NANO, yang harus di siapkan adalah: 1. Arduino NANO 2. LED 3. Resistor 220 ohm aplikasi yang kita gunakan adalah “arduinoIDE” dan saya menggunakan OS LinuxMint buat kalian yang menggunakan windows sama aja ya. Saran saya kalian gunakan linux karena akan lebih mudah dalam pembuatan project seperti arduino ini dan pemrograman web.  Hubungkan LED (-) ke GND melalui resistor 220 ohm, kemudian LED (+) ke pin 7 arduino. Hubungkan arduino ke komputer menggunakan usb. Kemudian masukan kode dibawah ini:  Bisa kalin lihat gambar tampilan aplikasi ArduinoIDE di atas ini, untuk kode kalian bisa copy di bawah ini: void setup(){ pinMode(7, OUTPUT); } void loop(){ digitalWrite(7, HIGH); delay(500);digitalWrite(7, LOW); delay(500); } Ket: Void setup akan dibaca 1 kali oleh arduino dan merupakan inisialisasi pin, kemudian untuk void loop akan dibaca berul
Baca selengkapnya

Bagaimana Cara Untuk Memblockir Situs Porno

Gambar
  Situs Porno bukan hanya satu-satunya hal yang tidak baik di Internet, masih ada lagi situs atau hal yang tidak baik di internet diantaranya adalah : Pornografi Judi Kekerasan Sara Hoax Penipuan Terorisme Phising Bullying dll. Seperti yang terlihat pada gambar diatas, ada banyak cara melakukan blockir pada situs-situs tersebut. Walaupun harus di akui bahwa cara memblock situs tidak ada yang sempurna, karena banyak cara pengguna melakukan mem-baypass proses blok yang dilakukan oleh manusia tersebut. Sering kali walaupun sudah di block masih ada saja halaman yang tidak baik dan masih muncul juga. Karena teknik memblockir sebuah situs terbatas pada bahasa (Inggris) dan teknologi. Sulit bagi software pemblokir jika informasi yang harus di blockir berupa content / kata-kata, akan lebih mudah memblockir situs daripada content. Cara lain yang bisa kita lakukan untuk memBlock situs-situs yang tidak baik adalah
Baca selengkapnya