Gunakan Font, Borders, dan Gambar untuk Menghias Headline
Judulnya umum di sebagian besar halaman web. Bahkan, hampir semua dokumen teks cenderung memiliki setidaknya satu judul sehingga Anda tahu judul dari apa yang Anda baca. Headline ini dikodekan menggunakan elemen heading HTML - h1, h2, h3, h4, h5, dan h6.
Di beberapa situs, Anda mungkin menemukan bahwa judul dikodekan tanpa menggunakan elemen-elemen ini. Sebagai gantinya, judul dapat menggunakan paragraf dengan atribut kelas tertentu yang ditambahkan pada mereka, atau divisi dengan elemen kelas. Alasan saya sering mendengar tentang praktik yang salah ini adalah bahwa perancang "tidak suka cara judul terlihat". Secara default, judul ditampilkan dalam huruf tebal dan ukurannya lebih besar, terutama elemen h1 dan h2 yang ditampilkan dalam ukuran font yang jauh lebih besar daripada teks halaman lainnya. Perlu diingat ini hanya tampilan default dari elemen-elemen ini! Dengan CSS, Anda dapat membuat heading terlihat sesuai keinginan Anda! Anda dapat mengubah ukuran font, menghapus tebal, dan banyak lagi. Judul adalah cara yang tepat untuk mengkode berita utama suatu halaman. Inilah beberapa alasan mengapa.
Mengapa Menggunakan Tag Heading Daripada DIV dan Styling
Mesin Pencari Seperti Tag Heading
Ini adalah alasan terbaik untuk menggunakan judul, dan menggunakannya dalam urutan yang benar (mis. H1, kemudian h2, kemudian h3, dll.). Mesin pencari memberikan pembobotan tertinggi ke teks termasuk di dalam tag judul karena ada nilai semantik untuk teks itu. Dengan kata lain, dengan memberi label judul halaman Anda H1, Anda memberi tahu spider mesin pencari bahwa itu adalah fokus # 1 halaman. Judul H2 memiliki penekanan # 2, dan seterusnya.
Anda Tidak Harus Ingat Kelas Apa Yang Anda Gunakan Untuk Menentukan Judul Anda
Ketika Anda tahu bahwa semua halaman Web Anda akan memiliki H1 yang tebal, 2em, dan kuning, maka Anda dapat menentukannya sekali dalam stylesheet Anda dan selesai. 6 bulan kemudian, ketika Anda menambahkan halaman lain, Anda cukup menambahkan tag H1 ke bagian atas halaman Anda, Anda tidak perlu kembali ke halaman lain untuk mencari tahu apa ID gaya atau kelas yang Anda gunakan untuk menentukan judul dan sub-kepala.
Mereka Memberikan Garis Besar Halaman Yang Kuat
Garis besar membuat teks lebih mudah dibaca. Itulah sebabnya mengapa kebanyakan sekolah AS mengajarkan siswa untuk menulis garis besar sebelum mereka menulis makalah. Saat Anda menggunakan tag judul dalam format kerangka, teks Anda memiliki struktur yang jelas yang menjadi sangat cepat terlihat. Plus, ada alat yang dapat meninjau garis besar halaman untuk memberikan sinopsis, dan ini bergantung pada tag heading untuk struktur kerangka.
Halaman Anda Akan Membuat Sense Bahkan Dengan Gaya-Gaya Dimatikan
Tidak semua orang dapat melihat atau menggunakan style sheet (dan ini kembali ke # 1 - search engine melihat konten (teks) halaman Anda, bukan style sheets). Jika Anda menggunakan tag heading, Anda membuat halaman Anda lebih mudah diakses karena headline memberikan informasi yang tidak akan memiliki tag DIV.
Ini Membantu Untuk Pembaca Layar Dan Aksesibilitas Situs Web
Penggunaan judul yang tepat menciptakan struktur logis untuk sebuah dokumen. Ini adalah apa yang pembaca layar akan gunakan untuk "membaca" situs untuk pengguna dengan gangguan penglihatan, membuat situs Anda dapat diakses oleh penyandang cacat.
Sesuaikan Teks dan Font Judul Anda
Cara termudah untuk menjauh dari masalah "besar, tebal, dan jelek" dari tag tajuk adalah memberi gaya teks seperti yang Anda inginkan. Bahkan, ketika saya sedang mengerjakan situs web baru, saya biasanya menulis paragraf, h1, h2, dan h3 gaya terlebih dahulu. Saya biasanya hanya menggunakan font family dan size / weight. Misalnya, ini mungkin merupakan lembar gaya awal untuk situs baru (ini hanya beberapa contoh gaya yang dapat digunakan):
badan, html {margin: 0; padding: 0; } p {font: 1em Arial, Geneva, Helvetica, sans-serif; } h1 {font: bold 2em "Times New Roman", Times, serif; } h2 {font: bold 1.5em "Times New Roman", Times, serif; } h3 {font: bold 1.2em Arial, Geneva, Helvetica, sans-serif; }Anda dapat memodifikasi font judul Anda atau mengubah gaya teks atau bahkan warna teks . Semua ini akan mengubah judul Anda yang "jelek" menjadi sesuatu yang lebih hidup dan sesuai dengan desain Anda.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; margin: 0; padding: 0; warna: # e7ce00; }Borders Can Dress Up Headlines
Perbatasan adalah cara yang bagus untuk meningkatkan tajuk berita Anda. Dan batas mudah untuk ditambahkan. Tapi jangan lupa untuk bereksperimen dengan perbatasan - Anda tidak perlu perbatasan di setiap sisi judul Anda. Dan Anda dapat menggunakan lebih dari sekadar batas membosankan.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; margin: 0; padding: 0; warna: # e7ce00; border-top: solid # e7ce00 medium; border-bottom: dotted # e7ce00 tipis; lebar: 600px; }Saya menambahkan batas atas dan bawah ke judul contoh saya untuk memperkenalkan beberapa gaya visual yang menarik. Anda dapat menambahkan batas dengan cara apa pun yang Anda inginkan untuk mencapai gaya desain yang Anda inginkan.
Tambahkan Gambar Latar Belakang ke Headline Anda Untuk Lebih Banyak Pizazz
Banyak situs web memiliki bagian header di bagian atas halaman yang mencakup judul - biasanya judul situs dan grafik. Kebanyakan desainer menganggap ini sebagai dua elemen terpisah, tetapi Anda tidak harus melakukannya. Jika grafiknya ada hanya untuk menghias judul, lalu mengapa tidak menambahkannya ke gaya tajuk?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif; latar belakang: #fff url ("fancyheadline.jpg") repeat-x bottom; padding: 0,5em 0 90px 0; text-align: center; margin: 0; pembatas bawah: padat # e7ce00 0,25em; warna: # e7ce00; }Trik untuk judul ini adalah bahwa saya tahu gambar saya adalah 90 piksel tinggi. Jadi saya menambahkan padding ke bagian bawah headline dari 90px (padding: 0,5 0 90px 0p;). Anda dapat bermain dengan margin, garis-tinggi, dan padding untuk mendapatkan teks dari judul untuk ditampilkan tepat di mana Anda menginginkannya.
Satu hal yang perlu diingat ketika menggunakan gambar adalah jika Anda memiliki situs web responsif (yang Anda harus) dengan tata letak yang berubah berdasarkan ukuran layar dan perangkat, judul Anda tidak akan selalu memiliki ukuran yang sama. Jika Anda perlu informasi utama untuk menjadi ukuran yang tepat, ini dapat menyebabkan masalah. Ini adalah salah satu alasan mengapa saya biasanya menghindari gambar latar belakang dalam judul, sedingin yang kadang-kadang terlihat.
Pengganti Gambar di Headline
Ini adalah teknik populer lain untuk desainer Web karena memungkinkan Anda membuat judul grafis dan mengganti teks tag heading dengan gambar itu. Ini benar-benar praktik antiqued dari web designer yang memiliki akses ke sangat sedikit font dan ingin menggunakan font lebih eksotis dalam pekerjaan mereka. Munculnya font web benar-benar telah mengubah cara pendekatan desainer situs. Headline sekarang dapat diatur dalam berbagai macam font dan gambar dengan font-font yang disematkan tidak lagi diperlukan. Dengan demikian, Anda hanya akan menemukan penggantian gambar CSS untuk berita utama di situs lama yang belum diperbarui untuk praktik yang lebih modern.
Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 9/6/17