Hari ini saya akan memberi tahu Anda cara membuat kata-kata dalam huruf tebal di situs dengan menggunakan HTML dan CSS. Desain ini digunakan ketika Anda perlu menyorot informasi tertentu pada suatu halaman. Selain itu, kita tidak hanya berbicara tentang judul, tetapi juga tentang kata-kata sederhana, frasa dalam teks. Ini diimplementasikan dengan cukup sederhana.
Untuk menyorot teks tertentu dalam huruf tebal, khusus tag HTML — dan ... Misalnya kode berikut:
| Teks biasa. Gambar kecil. Teks tebal yang kuat. |
Teks biasa.
Gambar kecil.
Teks tebal yang kuat.
Outputnya memberikan gambar berikut:
Dua opsi terakhir secara visual terlihat sama, tetapi mereka sedikit berbeda satu sama lain. Menandai menentukan keberanian gaya sederhana dari sebuah kata, sementara menambahkan arti "ditingkatkan" (penting) semantik tertentu. Artinya, baris terakhir bukan hanya teks tebal, tetapi beberapa informasi penting. Pada prinsipnya, untuk mesin pencari disarankan untuk menggunakan dengan tepat .
Anda juga dapat melihatnya ditulis dalam HTML Huruf tebal menggunakan gaya:
Contoh teks tebal.
Contoh teks dengan berani kata.
Situs menampilkannya seperti ini:
Sementara kode HTML tebal berfungsi dengan benar, seharusnya tidak. Semua gaya desain harus dirender dalam file CSS... Oleh karena itu, pada contoh di atas, Anda harus menggunakan tag
DAN tentukan kelas yang sesuai, lalu tulis tampilannya di lembar gaya. Ini adalah aturan untuk pengkodean. Jadi untuk huruf tebal dalam HTML, gunakan tag .
Teks CSS tebal
Untuk membuat CSS tebal, properti font-weight digunakan. Dengan bantuannya, "kejenuhan" fragmen teks ditunjukkan. Nilai dapat berkisar dari 100 hingga 900, tetapi yang paling umum digunakan adalah:
- tebal (tebal) - 700 secara default;
- normal - 400 secara default.
Ada juga opsi untuk nilai yang lebih tebal dan lebih ringan, yang mengubah font tergantung pada induknya menjadi lebih atau kurang tebal, masing-masing.
Untuk mengatur teks tebal di CSS, Anda perlu mengatur beberapa gaya untuk elemen ini atau itu, misalnya:
Teks biasa dengan keputihan berminyak berada di tengah.
kuat (berat font: tebal;)
Di sini saya ingin mencatat satu nuansa kecil yang diberitahukan kepada saya - jika Anda membuat kelas baru untuk beberapa elemen, maka disarankan untuk menggunakan "nama yang dapat dimengerti" yang kurang lebih. Misalnya, pada contoh di atas, gaya class = "my-bold-font" terlihat lebih logis daripada class = "new-font", karena Anda dapat memahami sebagian tujuannya. Ini merupakan nilai tambah bagi mereka yang akan melihat dan menggunakan tata letak Anda di masa mendatang.
Pada artikel selanjutnya, saya akan memberi tahu Anda tentang beberapa font tebal menarik yang berhasil saya temukan.
Dalam html, ukuran font memainkan peran penting. Ini memungkinkan Anda untuk menarik perhatian pengguna ke informasi penting diposting di halaman situs. Meskipun tidak hanya ukuran huruf yang penting, tetapi juga warna, ketebalan, dan bahkan keluarga.
Tag dan atribut saat merangkak dengan font html
Bahasa hypertext memiliki seperangkat besar alat untuk bekerja dengan font. Bagaimanapun, itu adalah pemformatan teks yang merupakan tugas utama html.
Alasan untuk membuat bahasa HTML menjadi masalah dalam menampilkan aturan pemformatan teks oleh browser.
Pertimbangkan tag yang digunakan untuk bekerja dengan font di html dan atributnya. Yang utama adalah tag ... Dengan menggunakan nilai atributnya, Anda dapat mengatur beberapa karakteristik font:
- warna - mengatur warna teks;
- size - ukuran font dalam satuan konvensional.
Nilai atribut positif dari 1 hingga 7 didukung.
- face - digunakan untuk mengatur keluarga font teks yang akan digunakan di dalam tag ... Beberapa nilai didukung sekaligus, dipisahkan dengan koma.
Hanya teks di antara bagian tag font yang dipasangkan yang diformat. Sisa teks ditampilkan dalam font default standar.
Juga di html ada sejumlah tag berpasangan yang hanya menentukan satu aturan pemformatan. Ini termasuk:
- - mengatur font tebal dalam html. Menandai tindakannya mirip dengan yang sebelumnya;
- - ukurannya lebih besar dari default;
- - ukuran font yang lebih kecil;
- - teks miring. Tag serupa ;
- - teks yang digarisbawahi;
- dicoret;- - menampilkan teks hanya dalam huruf kecil;
- - dalam huruf besar.
Teks biasa
Gambar kecil
Gambar kecil
Lebih dari biasanya
Kurang dari biasanya
Huruf miring
Huruf miring
Digarisbawahi
Dicoret
Kemampuan Atribut Gaya
Selain tag yang dijelaskan, ada beberapa cara lagi untuk mengubah font di html. Salah satunya adalah penggunaan atribut gaya generik. Dengan menggunakan nilai propertinya, Anda dapat mengatur gaya tampilan font:
1) font-family - properti mengatur keluarga font. Pencacahan beberapa nilai dimungkinkan.
Mengubah font dalam html ke nilai berikutnya akan terjadi jika keluarga sebelumnya tidak disetel ke sistem operasi pengguna.
Sintaks penulisan:
font-family: nama font [, nama font [, ...]]
2) ukuran font - ukuran diatur dari 1 hingga 7. Ini adalah salah satu cara utama bagaimana Anda dapat meningkatkan font di html.
Sintaks penulisan:
ukuran font: ukuran absolut | ukuran relatif | nilai | bunga | mewarisi
Ukuran font juga dapat diatur:
- Dalam piksel;
- Dalam nilai mutlak ( xx-kecil, x-kecil, kecil, sedang, besar);
- Dalam persen;
- Dalam poin (pt).
Ukuran font: 7
Ukuran font: 24px
Ukuran font: x-besar
Ukuran font: 200%
Ukuran font: 24pt
3) font-style - mengatur gaya penulisan font. Sintaksis:
gaya font: normal | miring | miring | mewarisi
Nilai:
- normal - ejaan normal;
- miring - miring
- miring - font miring ke kanan;
- mewarisi - mewarisi ejaan elemen induk.
Contoh cara mengubah font di html menggunakan properti ini:
gaya font: mewarisi
gaya font: miring
gaya font: normal
gaya font: miring
4) font-variant - mengubah semua huruf besar menjadi huruf besar. Sintaksis:
varian font: normal | topi kecil | mewarisi
Contoh cara mengubah font di html dengan properti ini:
varian font: mewarisi
varian font: normal
varian font: huruf kecil
5) font-weight - memungkinkan Anda untuk mengatur ketebalan penulisan teks (saturasi). Sintaksis:
font-weight: tebal | lebih tebal | lebih ringan | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Nilai:
- bold - mengatur font tebal html;
- lebih berani - lebih gemuk relatif terhadap normal;
- lebih ringan - kurang jenuh relatif terhadap normal;
- normal - ejaan normal;
- 100-900 - mengatur ketebalan font dalam ekuivalen numerik.
berat font: tebal
berat font: lebih tebal
berat font: lebih ringan
berat font: normal
berat font: 900
berat font: 100
Properti font dan warna font html
Font adalah properti kontainer lain. Secara internal, ia telah menggabungkan nilai beberapa properti yang dirancang untuk mengubah font. Sintaks fontnya adalah:
font: font-size font-family | mewarisi
Juga, nilainya dapat diatur ke font yang digunakan oleh sistem dalam prasasti pada berbagai kontrol:
- keterangan - untuk tombol;
- ikon - untuk ikon;
- menu - menu;
- kotak pesan - untuk kotak dialog;
- teks kecil - untuk kontrol kecil
- bilah status - font bilah status.
font: ikon
font: keterangan
font: menu
font: kotak pesan
teks kecil
font: status-bar
font: italic 50px bold "Times New Roman", Times, serif
Untuk mengatur warna font dalam html, Anda dapat menggunakan properti warna. Ini memungkinkan Anda untuk mengatur warna menggunakan kata kunci dan format rgb. Dan juga dalam bentuk kode heksadesimal.
Halo pembaca blog yang terkasih! Artikel ini akan fokus pada tag pemformatan teks... Teks tebal atau miring adalah contoh utama. Kami juga akan mempertimbangkan pengaruh beberapa tag pada pengoptimalan internal situs dan aturan penulisannya. Anda dapat membaca tentang itu di artikel yang diberikan. Omong-omong, Anda dapat menemukan elemen desain teks serupa di banyak editor teks, misalnya, di Word.
Tag dibagi menjadi 2 jenis: blok dan tag inline. Saat menggunakan yang pertama, Anda dapat mengubah konten dari bagian teks (baris, fragmen individu atau kata), sedangkan yang terakhir adalah. Tag pemformatan yang akan kita lihat di artikel ini sebagian besar menggunakan huruf kecil.
Aturan dan urutan penulisan tag
Anda sudah tahu apa itu tag awal dan akhir. Jika tidak, maka bacalah artikel di awal materi ini. Singkatnya, ada dua jenis tag: tunggal (misalnya, transfer ke garis baru) dan wadah (berpasangan). Jadi, semua tag pemformatan teks adalah berpasangan... Ini berarti bahwa setiap elemen memiliki tag awal dan akhir, dan pemilihan harus ditempatkan di antara mereka. Misalnya, pemilihan frasa yang benar akan terlihat seperti ini: Cuplikan yang dipilih
Saat browser memproses fragmen ini, Anda akan melihat teks berikut: Cuplikan yang dipilih. Ngomong-ngomong, di umpan RSS semua tag tidak ditampilkan ().
Hal utama saat menulis tag adalah menjaganya tetap tertutup. Jika tidak, semua teks pada halaman akan dicetak tebal (dalam contoh dengan tag ). Tetapi ada kalanya Anda perlu menyorot fragmen tertentu dan miring dan tebal pada saat yang bersamaan. Tetapi tidak ada tag yang melakukan tindakan ini. Hanya ada satu jalan keluar dari situasi ini: gunakan dua tag secara bersamaan. Dalam rangka apa menggunakannya tidak masalah. Oleh karena itu, dengan menulis teks dengan tag seperti ini:
Cuplikan yang dipilih
atau seperti ini:
Cuplikan yang dipilih
Anda masih akan mendapatkan Cuplikan yang dipilih dicetak miring dan dicetak tebal secara bersamaan. Namun, lebih baik menggunakan opsi pertama, karena pada awalnya itu adalah satu-satunya dan benar. Juga, jangan lupa bahwa setiap browser dapat menangani tag secara berbeda (), tergantung pada pengaturannya. Sekarang mari kita beralih ke tag pemformatan itu sendiri.
Teks tebal dan miring - tag , , dan
Tag Pemformatan Teks Paling Populer - Menekankannya berani dan dalam huruf miring... Mereka biasanya digunakan untuk memberi arti penting pada sebuah karya. Kasus pertama berfungsi untuk memilih fragmen yang mengandung informasi berguna atau kata kunci... Miring digunakan untuk tujuan yang sama seperti teks tebal, tetapi informasinya kurang penting karena huruf miring kurang terlihat di latar belakang teks isi daripada teks tebal.Pertimbangkan dulu teks tebal... Ada dua tag yang digunakan untuk tindakan ini - dan ... Perbedaan dalam penampilan tidak. Meskipun, mengingat browser apa pun dapat menafsirkan setiap elemen secara berbeda, Anda harus dapat melihat perbedaannya. Seperti inilah tampilan teks dalam tag dan dalam bentuk yang sudah diproses oleh browser:
Teks dalam tag yang kuat
Teks dalam tag b
Dan inilah tampilan dua baris ini dalam kode sumber halaman:
Teks dalam tag yang kuat Teks dalam tag b
Kita dapat mengamati situasi yang sama dalam kasus tag miring dan ... Coba temukan perbedaan antara dua contoh:
Teks dalam tag em
Teks dalam tag I
Dan inilah kode sumbernya:
Teks dalam tag em Teks dalam tag I
Jadi, tag yang dianggap tebal dan miring sebenarnya tidak berbeda, tetapi mengapa kita, misalnya, memberi tag jika ada ? Bagaimanapun, yang terakhir hanya berisi satu karakter (tidak termasuk tanda kurung) dan, oleh karena itu, lebih mudah untuk ditulis. Dan masalahnya adalah bahwa tag dan memengaruhi. Jika Anda mengelilingi kata kunci dengan tag ini, itu akan memiliki efek menguntungkan pada promosi situs web Hal utama adalah tidak berlebihan - teks maksimum harus 5% teks tebal dalam tag. , dan jumlah huruf miring yang sama pada tag .
Jika Anda hanya ingin menyorot beberapa momen dalam teks, gunakan tag atau ... Secara umum, saya pikir mesin pencari juga menganggap teks dalam tag ini lebih penting, tetapi pada optimasi internal mereka masih memiliki dampak yang lebih kecil daripada dan .
Tag teks garis miring - , dan
Sekarang mari kita lihat beberapa tag yang menggunakan ciri dalam penataan teks. Yang paling dikenal oleh Anda dari editor teks — menandai
atau garis bawahi. Tag ini tidak mempengaruhi peringkat (sejauh yang saya tahu), tetapi akan membantu untuk menyorot beberapa teks dan fokus padanya. Saya memberi contoh penggunaan tag ini tepat di atas. Ada dua tag lagi yang memiliki tujuan serupa - dan ... Keduanya melayani fungsi teks yang dicoret. Anda dapat menggunakan tag ini dalam situasi apa pun: jika Anda memperbarui dokumen (atau lebih tepatnya sebagian), Anda dapat mencoret yang lama dan menambahkan yang baru; jika Anda akan menulis sesuatu yang menyimpang dari topik materi; sesuatu yang tidak sesuai dengan standar moral dan etika.
Perbedaan antara kedua tag ini hanya di menulis, sebagai akibatnya lebih baik menggunakan yang pertama, karena pertama, lebih mudah untuk menulis, dan kedua, akan ada lebih sedikit kode HTML di halaman Anda, dan mesin pencari menyukainya.
Menandai dan atribut - parameter font teks
Sekarang mari kita lihat tag yang tidak digunakan tanpa atribut. Dengan itu, Anda dapat mengatur parameter untuk bagian teks tertentu. Secara umum, sekarang lebih disukai untuk menggunakan (cascading style sheets) karena mereka dapat sangat mempersingkat seluruh kode HTML halaman. Jadi, mari kita lihat tag yang sama . Baginya ada segalanya tiga atribut:
- wajah- font itu sendiri. Misalnya, Arial, Kurir atau Verdana. Anda dapat membuat daftar beberapa, tk. tidak semua pengguna memiliki kumpulan font yang luas, dan dengan menulis beberapa di atribut face, browser akan dapat memilih mana yang akan digunakan, atau lebih tepatnya, mana yang ada dalam sistem;
- ukuran- atribut yang menunjukkan ukuran teks. Itu dapat diekspresikan baik dalam unit arbitrer dan dalam piksel;
- warna- warna teks. Atribut ini dapat digunakan baik dalam kode warna HTML maupun dalam kata-kata. Yang pertama berbentuk #FFFFFF (di mana F adalah angka atau huruf dari A ke F), dan yang terakhir ditulis dengan kata sederhana(misalnya, merah adalah merah).
Seperti inilah tampilan teks dalam tag menggunakan setiap atribut:
Teks ini memiliki ukuran 6px
Teks ini berwarna merah Teks ini dalam font Arial Teks ini berwarna merah dan 5pxDan inilah yang akan Anda lihat setelah memproses kode tertulis: 
Elemen desain teks kotak-kotak - header -, gugus kalimat
, gugus kalimat
Terakhir, kita akan melihat elemen blok yang digunakan di hampir setiap dokumen. Ini adalah tag heading dan paragraf. Mari kita pertimbangkan yang pertama. Ada 6 jenis heading dan masing-masing memiliki tag tersendiri. Setiap spesies hanya memiliki nomor seri sendiri dan dicatat menggunakan tag
, ,..., ... Ini adalah tampilan semua header saat diproses:
... Ini adalah tampilan semua header saat diproses:
Nomor setelah kata judul cocok dengan nomor di tag
Sekarang mari kita bicara tentang tag highlight paragraf.
Fungsi dari tag ini adalah untuk memisahkan teks antara teks lain yang sejenis dengan baris kosong. Jika Anda melihat kode sumber dokumen, Anda dapat melihat yang berikut ini:
Kotak hijau memiliki satu paragraf, kotak merah memiliki paragraf lainnya. Dan beginilah tampilan kode ini setelah diproses oleh browser (panah menunjuk ke baris kosong):
Akibatnya, kami mendapatkan pemisahan yang agak mencolok dari satu paragraf dari yang lain, yang bermanfaat - membaca menjadi lebih nyaman.
Demikian artikel tentang tag pemformatan dokumen... Ada lebih banyak dari mereka daripada yang saya jelaskan dalam materi ini. Hanya saja Anda perlu memberi tahu cukup banyak tentang beberapa, akibatnya artikel terpisah dengan ulasan lengkap akan dikhususkan untuk mereka.!
Berat font ditentukan menggunakan atribut CSS font-berat, yang dapat mengambil nilai berikut:
- lebih ringan- lebih ringan
- normal- biasa
- berani- berani
- lebih berani- lebih gemuk
- 100..900 - 100 sesuai dengan font tertipis; 900 - yang paling gemuk
Atribut gaya tulisan(gaya font) digunakan untuk menulis dalam huruf miring dan dapat memiliki arti sebagai berikut:
- miring- miring, tepi teks dibulatkan
- normal- biasa
- miring- miring
Atribut font-varian(jenis font) digunakan untuk menulis dengan huruf kapital kecil dan dapat diartikan sebagai berikut:
- normal- biasa
- smaoo-caps- huruf kapital kecil
Selain huruf tebal, miring, dan huruf kecil, ada beberapa gaya populer lainnya: garis bawah dan poin-poin.
Atribut dekorasi teks(teks dekorasi) berfungsi untuk menggarisbawahi teks dan dapat mengambil nilai-nilai berikut:
- berkedip- teks berkedip (tidak didukung oleh IE)
- garis-melalui- teks yang dicoret
- tidak ada- tanpa perubahan
- garis besar- garis di atas teks
- menggarisbawahi- teks yang digarisbawahi
Atribut transformasi teks(transformasi teks) digunakan untuk bekerja dengan huruf kapital kecil dan dapat mengambil nilai berikut:
- menggunakan huruf besar- semua kata dimulai dengan huruf kapital
- huruf kecil- semua teks ditulis dengan huruf kecil
- tidak ada- tanpa perubahan
- huruf besar- semua teks ditulis dengan huruf kapital
Contoh penggunaan font-berat, gaya tulisan, dekorasi teks, transformasi teks: Contoh #9
Kode HTML halaman:
Tanpa Judul
"cincin emas Rusia"(di zaman kuno Zalesye), rute wisata yang mencakup jaringan kota-kota Rusia kuno: Sergiev Posad, Pereslavl-Zalessky, Rostov yang Agung, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy, Uglich. Nama Zalesye terutama bersifat geografis, itu berarti segala sesuatu yang "di luar hutan" dalam kaitannya dengan Kievan Rus.
Rute wisata (beroperasi sejak awal 1970), diletakkan melalui kota-kota bersejarah, melewati wilayah lima wilayah - Moskow, Yaroslavl, Kostroma, Ivanovskaya, Vladimirskaya. Kota-kota kuno di tanah ini memiliki takdir mereka sendiri, masa lalu mereka sendiri. Mereka telah selesai jalan yang sulit dalam dirinya perkembangan sejarah dari hari-hari pertama kelahiran sampai hari ini. Banyak yang telah hilang dalam perjalanan panjang ini. Ketidakpedulian dan kelalaian menyebabkan kehancuran sebagian atau seluruhnya bangunan unik, seperti kota Kalyazin, Mologa, Uglich. Selama pembangunan pembangkit listrik tenaga air Uglich, Biara Pokrovsky kuno dengan monumen unik abad ke-15-17 diledakkan dan tenggelam. Setengah dari gereja di Uglich dihancurkan, pagar biara dibongkar, yang menghancurkan integritas ansambel mereka. Melalui upaya para pemulih, lusinan objek arsitektur kuno, yang tampaknya hilang tanpa dapat diperbaiki, diselamatkan dari keadaan darurat dan diselamatkan dari kehancuran. Dipulihkan ke kehidupan dalam bentuk aslinya: ansambel arsitektur Biara Kebangkitan (1674-77) di Uglich, Gereja Syafaat di Nerl (abad ke-12), Katedral Dmitrievsky (abad ke-12) dan Gerbang Emas Vladimir, St. George Katedral (abad ke-12) Yuryev-Polsky, monumen Suzdal kuno, tempat pekerjaan komprehensif dilakukan untuk memulihkan bangunan bersejarah di seluruh kota, museum kota. Seluruh kompleks arsitektur Museum Arsitektur Kayu di Kostroma dan Suzdal diciptakan kembali. Semua ini adalah ciptaan tangan manusia yang telah menyentuh wilayah lindung Tanah Rusia.
