Gunakake Fonts, Borders, lan Images kanggo Dekorasi Headlines
Headline umum ing pirang-pirang kaca web. Nyatane, kabeh dokumen teks cenderung duwe paling sethithik salah siji judhul supaya sampeyan ngerti judhul apa sing sampeyan maca. Judhul iki dicithak nganggo kode HTML - h1, h2, h3, h4, h5, lan h6.
Ing sawetara situs, sampeyan bisa nemokake kode utama sing dikodheki tanpa nggunakake unsur kasebut. Nanging, headline bisa nggunakake paragraf kanthi atribut kelas tartamtu sing ditambahake, utawa divisi karo unsur kelas. Alesan aku kerep krungu bab praktik ora bener iki yaiku sing desainer "ora kaya tampilan helikopter". Secara default, headings ditampilake kanthi huruf kandel lan ukurane luwih gedhe, utamane unsur h1 lan h2 sing nampilake ukuran font luwih gedhe tinimbang sisa teks kaca. Elinga, iki mung tampilan gawan unsur-unsur iki! Kanthi CSS, sampeyan bisa ndelok judhul nanging sampeyan pengin! Sampeyan bisa ngganti ukuran font, mbusak kandel, lan luwih akeh. Headings minangka cara sing bener kanggo ngode berita utama. Kene sawetara alasane.
Apa Gunakake Heading Tags Tinimbang DIVs lan Styling
Search Engines Like Heading Tags
Iki minangka alesan sing paling apik kanggo nggunakake judhul, lan digunakake ing urutan sing bener (ie h1, banjur h2, banjur h3, lan sapiturute). Mesin panelusur menehi bobot paling dhuwur ing teks sing disedhiyakake ing tag judhul amarga ana nilai semantik kanggo teks kasebut. Ing tembung liyane, kanthi label label kaca H1, sampeyan nemokake laba-laba search engine sing dadi fokus # 1 kaca. Headline H2 duwe penekanan # 2, lan liya-liyane.
Sampeyan Ora Ngelingi Kelas-kelas Sampeyan Digunakake Kanggo Netepake Headlines Panjenengan
Yen sampeyan ngerti manawa kabeh kaca web bakal duwe H1 sing kandel, 2em, lan kuning, sampeyan bisa nemtokake manawa ing gaya gaya sampeyan lan bakal rampung. 6 wulan mengko, nalika sampeyan nambahake kaca liya, sampeyan mung nambah tag H1 ing bagian ndhuwur kaca, sampeyan ora kudu bali menyang kaca liya kanggo nemtokake apa gaya ID utawa kelas sing digunakake kanggo netepake utama judhul lan sub-kepala.
Padha Nyedhiyani Garis Besar Struktur
Garis besar nggawe teks gampang diwaca. Mulane, paling akeh sekolah AS ngidini siswa nulis garis gedhe sadurunge nulis koran kasebut. Nalika sampeyan nggunakake tag judhul ing format garis besar, teks sampeyan duwe struktur sing jelas sing katon kanthi cepet. Liyane, ana alat sing bisa nampilake outline kaca kanggo nyedhiyakake synopsis, lan iki gumantung marang tag judhul kanggo struktur outline.
Halaman Sampeyan Nggawe Pikiran Malah Nganti Gaya Nguripake
Ora saben wong bisa ndeleng utawa nggunakake sheet style (lan iki bali menyang # 1 - mesin telusur ndeleng isi (teks) saka kaca, dudu sheet style). Yen sampeyan nggunakake tag judhul, sampeyan bakal nggawe kaca luwih gampang amarga headline nyedhiyakake informasi yen tag DIV ora bakal.
Iku Mbiyantu Kanggo Maca Layar Lan Website Aksesibilitas
Gunakake langsung judhul nggawe struktur logis menyang dokumen. Iki minangka layar maca sing bakal digunakake kanggo "maca" situs menyang pangguna karo gangguan gambaran, nggawe situs sampeyan bisa diakses menyang wong sing ora duwe kabisan.
Gaya Teks lan Fon kepala berita Sampeyan
Cara paling gampang kanggo ngalih saka masalah "gedhe, kandel, lan ala" saka tag judhul yaiku ngganti teks kanthi cara sing pengin ditemokake. Ing kasunyatan, nalika aku nggarap situs web anyar, aku biasa nulis gaya paragraf, h1, h2, lan h3. Aku biasane melu karo mung kulawarga font lan ukuran / bobot. Contone, iki bisa dadi sheet style wiwitan kanggo situs anyar (iki mung conto gaya sing bisa digunakake):
body, 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; }Sampeyan bisa ngowahi fonts saka judhul utawa ngowahi gaya teks utawa malah werna teks . Kabeh iki bakal ngowahi judhul "elek" dadi luwih sregep lan tetep karo rancanganmu.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; margin: 0; padding: 0; werna: # e7ce00; }Borders Can Dress Up Headlines
Bates minangka cara sing apik kanggo nambah headline. Lan wates gampang ditambah. Nanging aja lali coba eksperimen karo wates - sampeyan ora perlu wates ing saben sisih judhul. Lan sampeyan bisa nggunakake luwih saka mung wates mboseni.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; margin: 0; padding: 0; werna: # e7ce00; wates-top: medium padat # e7ce00; border-bottom: dotted # e7ce00 thin; ambane: 600px; }Aku nambahake wates ndhuwur lan ngisor kanggo judhul ngarepku kanggo ngenalake sawetara gaya visual sing menarik. Sampeyan bisa nambah wates apa wae sing pengin sampeyan entuk gaya desain sing dikarepake.
Nambahake Latar Belakang Gambar menyang Headline Sampeyan Kanggo Pizazz liyane
Akeh situs web duwe bagean header ing ndhuwur kaca sing kalebu judhul - biasane judhul situs lan grafis. Paling desainer mikir babagan iki minangka loro unsur sing misah, nanging sampeyan ora perlu. Yen grafis ana mung kanggo dekorasi headline, banjur ngapa ora nambah menyang gaya judhul?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif; latar mburi: #fff url ("fancyheadline.jpg") ngisor-x ngisor; padding: 0.5em 0 90px 0; teks-align: center; margin: 0; border-bottom: solid # e7ce00 0.25em; werna: # e7ce00; }Trik kanggo judhul iki yaiku aku ngerti gambarku 90 piksel dhuwur. Dadi aku nambahake padding menyang dhasar headline 90px (padding: 0,5 0 90px 0p;). Sampeyan bisa muter karo pinggir garis, dhuwur, lan padding kanggo njupuk teks judhul kanggo nampilake persis ing ngendi sampeyan pengin.
Siji bab sing perlu dingerteni nalika nggunakake gambar yaiku menawa sampeyan duwe situs web sing responsif (sing kudu) karo tata letak sing diganti adhedhasar ukuran lan piranti layar, sampeyan ora bakal dadi ukuran sing padha. Yen sampeyan butuh judhul dadi ukuran sing bener, iki bisa nyebabake masalah. Iki minangka salah sawijining alesan kenapa aku umumake supaya gambar latar ing judhul, kaya sing kerep bisa uga katon.
Penggantian gambar ing Headlines
Iki minangka teknik populer liyane kanggo perancang Web amarga ngidini sampeyan nggawe judhul grafis lan ngganti teks tag judhul karo gambar kasebut. Iki bener-bener laku antiqued saka perancang web duwe akses menyang banget sawetara fonts lan pengin nggunakake fonts luwih eksotis ing karya. Peningkatan font web wis ngalami owah-owahan cara desainer ngunjungi situs. Headline saiki bisa disetel ing macem-macem fonts lan gambar karo sing fonts ditempelake ora perlu maneh. Dadi, sampeyan mung nemokake panggantos gambar CSS kanggo judhul ing situs-situs lawas sing durung dianyari kanggo praktik-praktik luwih modern.
Artikel asli dening Jennifer Krynin. Diedit dening Jeremy Girard ing 9/6/17