Tutorial Pemrograman

Cara Membuat Website Data Profil dengan CSS

Data profil merupakan salah satu komponen yang sangat diperlukan untuk mengetahui sebuah informasi secara deskripsi dari website tersebut agar si pengunjung (visitor) dapat mengetahui tentang identitas secara baik. Berlaku untuk website personal, bisnis, pendidikan, traveler, ilmuan, kepolisian, dan sebagainya.

Dengan adanya data profil ini, si pengunjungi (visitor) bisa mengenali identitas, menyuarakan kritik dan saran, membantu apabila ada kebutuhan melalui telepon, mendapat alamat kantor dengan mudah, dan sebagainya.

Sekarang penulis akan berikan tutorial untuk membuat website tampilan profil data menggunakan CSS. Sebelum memulai, siapkan 1 gambar bitmap tipenya terserah kamu (jpg, png, bmp, jpeg). Usahakan perbedaan ukuran panjang dan lebar tidak terlalu jauh, agar mudah dimodifikasi dengan CSS.

A. MEMBUAT KERANGKA TAMPILAN WEBSITE DATA PROFIL DENGAN HTML

1. Silahkan buka teks editor seperti Notepad++, Sublime, Visual Code, dan sebagainya.

2. Silahkan ketik kode script di bawah ini.

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “profile.html”.

5. Klik Save.

6. Cari file yang tadi, kemudian klik kanan pada mouse → Open With → Web Browser app (Chrome atau Mozilla).

Berikut hasilnya.

Apabila di dalam project website data profil kamu belum ada gambar, silahkan siapkan 1 gambar dulu, kemudian ditaruhkan ke dalam project website kamu, saat sebelum memasuki tahap berikutnya.

Catatan : 

Pada atribut tag <img src=”logo.png” class=”imgprofile”/>, img src ini diisikan sesuai dengan nama file gambar kamu. Misalkan nama filenya “user.png“, maka di img src diisikan dengan “user.png“.

B. MEMPERCANTIK TAMPILAN WEBSITE DATA PROFIL DENGAN CSS

1. Klik File → New atau tekan CTRL + N untuk membuat halaman baru pada text editor.

2. Silahkan ketik kode script di bawah ini.

Tips: Apabila kamu ingin mengubah bentuk tampilan profil gambar menjadi lingkaran, maka gunakan kode script yakni “border-radius: 50%;” pada bagian img atau image element baik element id maupun class.

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “style.css”.

5. Klik Save.

C. HUBUNGKAN LINK CSS KE HALAMAN HTML

1. Kembali ke fokus halaman profile.html tadi di text editor.

2. Tambahkan kode script di bawah ini.

3. Kode script ini terletak di bawah tag <title>. Setelah itu tekan CTRL + S lagi.

4. Silahkan tekan F5 pada web browser kamu. Lihat hasilnya.

Jadi, kamu bisa membuat website data profil tentang deskripsi website kamu agar si pengguna mudah percaya dan mengenali identitas profil bahwa website itu buatan kamu.

Demikian tutorial cara membuat website data profil dengan CSS. Selamat mencoba.









Click to comment

Leave a Reply

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

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Download Aplikasi Inwepo

Berlangganan tutorial Inwepo melalui email

Copyright © 2018 Inwepo - All Rights Reserved.

To Top