Segera setelah Anda mulai membuat halaman web dengan HTML, Anda akan mulai bekerja dengan ukuran. Untuk membuat situs Anda terlihat seperti yang Anda inginkan, kemungkinan mencocokkan desain yang dibuat oleh Anda atau desainer lain, Anda akan ingin mengubah ukuran teks di situs itu, serta elemen lain di halaman. Untuk melakukan ini, Anda mungkin mulai mencari tag "ukuran" HTML, tetapi Anda akan segera menemukannya hilang.
Tag ukuran HTML tidak ada dalam HTML. Sebagai gantinya, untuk mengatur ukuran font, gambar atau tata letak Anda harus menggunakan Cascading Style Sheets. Bahkan, perubahan visual apa pun yang perlu Anda buat pada teks situs atau elemen lain harus ditangani oleh CSS! HTML hanya untuk struktur.
Tag terdekat ke tag ukuran HTML adalah tag font lama, yang memang menyertakan atribut ukuran. Berhati-hatilah bahwa tag ini sudah usang dalam versi HTML saat ini dan mungkin tidak didukung oleh browser di masa mendatang! Anda tidak ingin menggunakan tag font di HTML Anda! Sebaliknya, Anda harus belajar CSS untuk mengukur elemen HTML Anda dan menata halaman web Anda dengan sesuai.
Ukuran Font
Font bisa dibilang hal yang paling mudah untuk ukuran dengan CSS. Lebih dari sekadar mengukur teks itu, dengan CSS Anda bisa lebih spesifik tentang tipografi situs web Anda. Anda dapat menentukan ukuran font, warna, casing, berat, awalan, dan lainnya. Dengan tag font, Anda hanya dapat menentukan ukuran, dan kemudian hanya sebagai angka relatif terhadap ukuran font default browser yang berbeda untuk setiap pelanggan.
Untuk mengatur paragraf Anda agar memiliki ukuran font 12pt, gunakan properti bergaya font-size:
h3 {font-size = 24px; }Gaya ini akan mengatur ukuran font elemen headiing3 24 piksel. Anda dapat menambahkan ini ke lembar gaya eksternal dan semua H3 situs Anda akan menggunakan gaya ini.
Jika Anda ingin menambahkan gaya tipografi tambahan ke teks Anda, Anda bisa menambahkannya ke aturan CSS ini:
h3 {font-size: 24px; warna: # 000; font-weight: normal; }Ini tidak hanya mengatur ukuran font untuk H3, itu juga akan mengatur warna menjadi hitam (yang merupakan kode hex dari # 000 berarti) dan itu akan mengatur berat untuk "normal". Secara default, browser memberikan judul 1-6 sebagai teks tebal, sehingga gaya ini akan menggantikan default itu dan pada dasarnya teks "tidak berani".
Ukuran Gambar
Gambar dapat menjadi rumit untuk menentukan ukuran karena Anda benar-benar dapat menggunakan browser untuk mengubah ukuran gambar. Tentu saja, mengubah ukuran gambar dengan peramban adalah ide yang buruk karena menyebabkan laman dimuat lebih lambat dan peramban sering melakukan pengubahan ukuran yang buruk, membuat gambar tampak buruk. Sebagai gantinya, Anda harus menggunakan perangkat lunak grafis untuk mengubah ukuran gambar dan kemudian menulis ukuran sebenarnya di HTML halaman web Anda.
Tidak seperti font, gambar dapat menggunakan HTML atau CSS untuk menentukan ukurannya. Anda menentukan lebar gambar dan tinggi. Saat Anda menggunakan HTML, Anda hanya dapat menentukan ukuran gambar dalam piksel. Jika Anda menggunakan CSS, Anda dapat menggunakan pengukuran lain termasuk inci, sentimeter, dan persentase. Nilai terakhir ini, persentase, sangat berguna ketika gambar Anda harus berubah-ubah, seperti di situs web responsif.
Untuk menentukan ukuran gambar Anda menggunakan HTML, gunakan atribut tinggi dan lebar dari tag img. Misalnya, gambar ini berukuran 400x400 piksel persegi:
height = "400" width = "400" alt = "image" />Untuk menentukan ukuran gambar Anda menggunakan CSS, gunakan properti gaya tinggi dan lebar. Berikut gambar yang sama, menggunakan CSS untuk menentukan ukurannya:
style = "height: 400px; width: 400px;" alt = "image" />Ukuran Tata Letak
Ukuran paling umum yang Anda tetapkan dalam tata letak adalah lebarnya, dan hal pertama yang harus Anda putuskan adalah apakah akan menggunakan tata letak lebar tetap atau situs web responsif. Dengan kata lain, apakah Anda akan menentukan lebar sebagai jumlah piksel, inci, atau titik yang tepat? Atau apakah Anda akan mengatur lebar layout Anda menjadi fleksibel menggunakan ems atau persentase? Untuk menentukan ukuran tata letak Anda, Anda menggunakan properti CSS lebar dan tinggi seperti yang Anda lakukan dalam sebuah gambar.
Lebar tetap:
style = "width: 600px;">Lebar cairan:
style = "width: 80%;">Ketika Anda memutuskan pada lebar untuk tata letak Anda, Anda harus mengingat lebar browser yang berbeda yang mungkin digunakan pembaca Anda dan berbagai perangkat yang juga akan mereka gunakan. Inilah sebabnya mengapa situs web responsif , yang dapat mengubah tata letak dan ukurannya berdasarkan perangkat dan ukuran layar yang berbeda, adalah standar praktik terbaik saat ini.