Mohon tunggu...
Alifkhan Hatma
Alifkhan Hatma Mohon Tunggu... Mahasiswa - Mahasiswa

Mahasiswa Univesitas Haluoleo

Selanjutnya

Tutup

Ilmu Alam & Tekno

Membuat Tampilan Form Sederhana Menggunakan HTML dan CSS

30 Oktober 2024   23:47 Diperbarui: 31 Oktober 2024   07:04 86
+
Laporkan Konten
Laporkan Akun
Kompasiana adalah platform blog. Konten ini menjadi tanggung jawab bloger dan tidak mewakili pandangan redaksi Kompas.

Hasil:

Dokumen pribadi
Dokumen pribadi

Gambar diatas adalah hasil dari pembuatan halaman form menggunakan HTML, selanjutnya kita akan menambahkan style CSS agar tampilan halaman form tesebut terlihat lebih bagus dan rapih.

Cascading Style Sheets (CSS) digunakan untuk memformat tata letak halaman web. Dengan CSS, kita dapat mengontrol warna, font, ukuran teks, jarak antar elemen, bagaimana elemen diposisikan dan ditata, gambar latar belakang atau warna latar belakang apa yang akan digunakan, tampilan berbeda untuk perangkat dan ukuran layar berbeda, dan lebih banyak lagi.

4. Tambahkan Tag style di dalam head. Tag style ini berfungsi sebagai tempat yang akan kita gunakan untuk menuliskan code-code CSS.

5. Tuliskan kode CSS seperti gambar di bawah ini.

Dokumen pribadi
Dokumen pribadi
  • text-align: center; berfungsi mengatur agar text ditampilkan di tengah secara horizontal
  • margin: auto; membuat elemen memiliki margin otomatis secara horizontal
  • backgroun: white; mengatur warna background menjadi putih
  • padding: 20px; berfungsi untuk menambahkan ruang di dalam elemen sebanyak 20 piksel
  • border-radius: 5px; membuat sudut elemen menjadi bulat dengan lengkungan sebesar 5 piksel
  • box-shadow: 0 0 10px; berfungsi menambahkan bayangan di sekitar elemen
  • width: 100%; Menentukan lebar elemen agar menempati 100% dari kontainer induknya.

Hasil setelah di tambahkan CSS

Dokumen pribadi
Dokumen pribadi

Kesimpulan:

Setiap kode dalam HTML dan CSS memiliki fungsinya masing-masing dalam pembuatan halaman website. HTML digunakan untuk membuat struktur dasar pada halaman website kita, sedangkan CSS berfungsi untuk memberikan style pada elemen-elemen HTML agar website kita memiliki tampilan yang lebih rapih dan teratur.

HALAMAN :
  1. 1
  2. 2
  3. 3
Mohon tunggu...

Lihat Konten Ilmu Alam & Tekno Selengkapnya
Lihat Ilmu Alam & Tekno Selengkapnya
Beri Komentar
Berkomentarlah secara bijaksana dan bertanggung jawab. Komentar sepenuhnya menjadi tanggung jawab komentator seperti diatur dalam UU ITE

Belum ada komentar. Jadilah yang pertama untuk memberikan komentar!
LAPORKAN KONTEN
Alasan
Laporkan Konten
Laporkan Akun