Tutorial Membuat Tampilan Chat dengan Html dan CSS

Posted on

Assalamualaikum sahabat lupacode semuanya…

Bagaimana kabar kalian sekarang ? Semoga kita tetap berada didalam perlindungan allah swt.

lama rasanya admin tidak uodate tutorial maupun source code diblog kesayangan ini hihii…

Berhubung pada akhir – akhir ini admin banyak sekali kesibukan diluar sana jadi belum sempet update lagi ..

Namun sekarang admin akan mencoba kembali menyempatkan waktu untuk dapat berbagi kepada sahabat lupacode semuanya yang senantiasa menantikan update materi terbaru dari blog lupacode – Tutorial pemrograman

Tutorial Cara Membuat Tampilan Chat dengan Html dan CSS

Tutorial Cara Membuat Tampilan Chat dengan Html dan CSS



Pada kesempatan kali ini admin akan memberikan sebuah tutorial cara membuat tampilan chatting yang dapat kalian buat dengan menggunakan html dan css saja.

Chatting merupakan sebuah istilah yang sering kali terdengar sangat tidak asing lagi di telinga kita…

Tentu saja, karena pada saat sekarang ini pastinya setiap orang telah mengetahui apa itu istilah chatting …

Nah bagi sahabat lupacode yang saat ini penasaran bagaimana cara membuat sebuah halaman chatting dengan menggunakan Html dan css …

Maka tidak ada salahnya jika sahabat semuanya mencoba untuk membuatnya pada localhost sahabat masing-masing.

Baiklah sekarang kita langsung saja kepada inti pembahasan dari tutorial kali ini yaitu Belajar membuat tampilan halaman chatting dengan menggunakan Html dan css.

Silahkan sahabat semua ikuti tutorialnya dibawah ini :

  1. Pertama kita buat dulu sebuah folder didalam HTDOCS jika sahabat semua menggunakan Xampp.. Buat sebuah folder dengan Nama Simple-Chat
  2. Kemudian selanjutnya kita buat 3 buah file didalam folder tersebut diantaranya :
  • index.html
  • style.css
  • app.js

Setelah sahabat semua membuat sebuah folder serta ke-tiga file yang admin sebutkan diatas, maka saatnya sekarang kita memasukan codingan kita kedalam masing-masing file tersebut.

Untuk file yang pertama yaitu index.html silahkan sahabat semua masukan code dibawah ini :

Kemudian jangan lupa untuk menyimpan code yang telah masukan tersebut.

Selanjutnya pada file yang ke-dua yaitu style.css dimana pada file ini kita akan mengatur desain pada tampilan chatting kita nantinya…
Sahabat semua juga bisa untuk memodifikasi kembali kode css pada file tersebut.

Silahkan masukan kode berikut pada file style.css :

Jangan lupa kembali untuk menyimpan kode yang telah masukan tersebut.

Selanjutnya untuk file yang ke-tiga atau yang terakhir didalam folder simple-chat diatas…

Silahkan sahabat semua masukan kode berikut pada file app.js :

Baiklah ketiga file tersebut sekarang sudah ada isinya hihih…

Maka saatnya sekarang kita cek hasil yang telah kita buat … yaitu dengan mengakses http://localhost/simple-chat pada addres bar kita secara langsung …

Silahkan sahabat semua kembangkan lagi … ini hanya untuk atau sekedar latihan saja …

Jangan takut untuk selalu berkreasi …

Sering-sering lah kita ngoprek karna dengan begitu kita akan lebih cepat tau akan kesalahan – kesalahan yang kita dapat ambil hikmah nya.

Baiklah mungkin itu saja materi tutorial pada kesempatan kali ini …

Sampai berjumpa kembali pada materi tutorial selanjutnya dari blog lupacode …

jangan lupa untuk selalu berkunjung kedalam blog lupacode guna untuk mendapatkan materi – materi terbaru yang dapat sahabat semua pelajari.

Saya admin dari blog lupacode undur diri, see you …

Wassalamualaium Wr. Wb.

Leave a Reply

Your email address will not be published. Required fields are marked *