Tutorial Pemrograman

Cara Membuat Kartu Profil Sederhana dengan CSS

CSS singkatan dari Cascading Style Sheets. CSS adalah salah satu bahasa markup yang berfungsi khusus untuk merancang tampilan pada website agar hasil tampilan website lebih maksimal dan sesuai kebutuhan klien atau perusahaan.

Kamu akan pikirkan cara membuat tampilan data profil pada website kamu seperti kartu, agar menarik dan dilihat oleh si pengunjung atau client. Kamu juga bisa membuat kartu identitas kamu di dalam website agar si pengunjung bisa melihat bahkan mencetak kartu identitas kamu untuk menyimpan informasi.

Penulis akan berikan tutorial cara membuat kartu profil dengan css. Sebelum memulai, siapkan 1 gambar bitmap tipenya (jpg, png, bmp, jpeg). Usahakan perbedaan ukuran panjang dan lebar tidak terlalu jauh, agar mudah dimodifikasi dengan CSS.

A. MEMBUAT KERANGKA TAMPILAN WEBSITE KARTU 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 “cardprofile-css.html”.

5. Klik Save.

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

Berikut hasilnya.

Selesai.

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

Catatan:

Pada kode script diatas, sebenarnya bisa berjalan, namun karena belum ada file style.css di dalam project kamu sehingga tampilannya seperti kerangka awal.

B. MEMPERCANTIK TAMPILAN WEBSITE KARTU 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.

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

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

5. Klik Save.

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

Selesai.

Catatan: Kamu tidak perlu mencari gambar cari untuk memasukkan ke dalam object, tinggal menggunakan font Awesome, kemudian cari elemen tag object untuk dihiasi.

Pada kode script font Awesome di bawah ini.

Font Answer inilah yang akan menambahkan ikon-ikon pada object seperti button, textfield, logo, dan sebagainya tanpa tambahan gambar, tinggal masukkan kode script ke bagian elemen.

Kode script di bawah ini.

Pada kode script yang di atas, tinggal ganti ikon font Awesome dengan ikon font Awesome sesuai dengan fungsinya dalam perancangan atau tampilan website. Font Awesome ini biasanya dipakai pada elemen tag HTML, <i class=””> atau <span class=””>.

Pada bagian tag <a href=”#” >, kamu bisa mengisi link sosial media kamu di dalamnya. Misalkan kamu memiliki akun Instagram, maka kamu isikan yaitu <a href=”www.instagram.com/” > dan beserta isikan nama akun kamu setelah garis miring (/) dan sebagainya.

Pada kode script yang di atas, kamu bisa mengganti ikon sosial media kamu sesuai keinginan kamu. Misalkan kamu buat informasi link Instagram, maka kamu masukkan isi dari class adalah <i class=”fa fa-instagram” >, atau kamu buat informasi link Twitter, maka kamu masukkan isi dari elemen adalah <i class=”fa fa-twitter” > dan sebagainya.

Demikian tutorial cara membuat kartu profil sederhana 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