Saturasi adalah peningkatan ketebalan garis font dan, karenanya, kontras. Biasanya ada empat jenis saturasi: ringan, normal, tebal, dan tebal. Namun, Anda hanya dapat menyetel gaya normal dan tebal menggunakan HTML. Dua tag digunakan untuk mengatur teks tebal: dan .
Jenis huruf tebal Pemilihan teks yang kuat
Gaya miring
Cursive bukan hanya kemiringan karakter individual; untuk beberapa font, ini adalah perombakan total untuk gaya baru yang meniru tulisan tangan. Dua tag menentukan huruf miring untuk teks: dan .
Gaya font miring Pemilihan teks
Perlu dicatat bahwa tag dan , sebaik dan meskipun mereka serupa dalam tindakannya, mereka tidak sepenuhnya setara dan dapat diganti. Tag pertama - adalah tag markup fisik dan menyetel teks menjadi tebal dan tag - dengan tag markup logis dan menyoroti teks yang ditandai. Pemisahan tag ke dalam format logis dan fisik ini pada awalnya dimaksudkan untuk membuat HTML menjadi universal, termasuk tidak bergantung pada perangkat keluaran. Secara teoritis, jika Anda menggunakan, misalnya, browser ucapan, maka teks diformat menggunakan tag dan , akan diberi tanda berbeda. Namun, ternyata di browser populer hasil penggunaan tag ini setara.
Contoh 7.5 menunjukkan penggunaan tag dan untuk desain teks.
Contoh 7.5. Tag dan
Dan di mana cookie dan minuman keras?! - seru anak nakal itu.
Hasil dari contoh ini ditunjukkan pada Gambar. 7.5.
Dalam html, ukuran font memainkan peran penting. Ini memungkinkan Anda untuk menarik perhatian pengguna ke informasi penting yang diposting di halaman situs web. Meski tidak hanya ukuran huruf yang penting, tapi juga warna, ketebalan dan bahkan kekeluargaannya.
Tag dan atribut saat robot dengan font html
Bahasa hypertext memiliki seperangkat alat besar untuk bekerja dengan font. Bagaimanapun, itu adalah pemformatan teks yang merupakan tugas utama html.
Alasan pembuatan bahasa HTML adalah masalah menampilkan aturan pemformatan teks di browser.
Pertimbangkan tag yang digunakan untuk bekerja dengan font di html dan atributnya. Yang utama adalah tagnya ... Dengan menggunakan nilai atributnya, Anda dapat mengatur beberapa karakteristik font:
- color - mengatur warna teks;
- size - ukuran font dalam unit konvensional.
Nilai atribut positif dari 1 hingga 7 didukung.
- face - digunakan untuk mengatur jenis font teks yang akan digunakan di dalam tag ... Beberapa nilai didukung sekaligus, dipisahkan dengan koma.
Hanya teks di antara bagian-bagian dari tag font yang dipasangkan yang diformat. Teks lainnya ditampilkan dalam font default standar.
Juga di html ada sejumlah tag berpasangan yang menentukan hanya 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 bergaris bawah;
- dicoret;- - tampilkan 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. Menggunakan nilai propertinya, Anda dapat mengatur gaya tampilan font:
1) font-family - properti mengatur jenis font. Pencacahan beberapa nilai dimungkinkan.
Mengubah font dalam html ke nilai berikutnya akan terjadi jika keluarga sebelumnya tidak diinstal pada sistem operasi pengguna.
Penulisan sintaks:
font-family: nama font [, nama font [, ...]]
2) font-size - ukuran diatur dari 1 hingga 7. Ini adalah salah satu cara utama untuk meningkatkan font di html.
Penulisan sintaks:
font-size: ukuran mutlak | ukuran relatif | nilai | bunga | mewarisi
Anda juga dapat mengatur ukuran font:
- Dalam piksel;
- Dalam nilai absolut ( 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:
font-style: normal | miring | miring | mewarisi
Nilai:
- normal - ejaan normal;
- italic - italic;
- miring - font miring kanan;
- mewarisi - mewarisi ejaan elemen induk.
Contoh cara mengubah font di html menggunakan properti ini:
font-style: mewarisi
font-style: italic
font-style: normal
font-style: miring
4) font-variant - mengubah semua huruf besar menjadi huruf besar. Sintaksis:
font-variant: normal | topi kecil | mewarisi
Contoh cara mengubah font di html dengan properti ini:
font-variant: mewarisi
font-variant: normal
font-variant: huruf kecil
5) font-weight - memungkinkan Anda untuk mengatur ketebalan tulisan teks (saturasi). Sintaksis:
font-weight: bold | bolder | lebih ringan | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Nilai:
- tebal - mengatur huruf tebal html;
- lebih berani - lebih gemuk dibandingkan dengan normal;
- lebih ringan - kurang jenuh relatif terhadap normal;
- normal - ejaan normal;
- 100-900 - mengatur ketebalan font dalam padanan numerik.
font-weight: bold
font-weight: lebih berani
font-weight: lebih ringan
font-weight: normal
font-weight: 900
font-weight: 100
Properti font dan warna font html
Font adalah properti penampung lainnya. Secara internal, ini menggabungkan nilai dari beberapa properti yang dirancang untuk mengubah font. Sintaks font adalah:
font: font-size font-family | mewarisi
Selain itu, fonta yang digunakan oleh sistem dalam prasasti pada berbagai kontrol dapat disetel sebagai nilai:
- keterangan - untuk tombol;
- ikon - untuk ikon;
- menu - menu;
- message-box - untuk kotak dialog;
- teks kecil - untuk kontrol kecil
- status-bar - font bar status.
font: ikon
font: caption
font: menu
font: kotak pesan
teks kecil
font: status-bar
font: italic 50px bold "Times New Roman", Times, serif
Untuk menyetel warna font di html, Anda dapat menggunakan properti color. Ini memungkinkan Anda untuk mengatur warna menggunakan format kata kunci dan rgb. Dan juga dalam bentuk kode heksadesimal.
Salam, mereka yang suka membongkar sesuatu yang baru dan mengisi peti pengetahuan mereka dengan informasi baru! Setelah membaca artikel, Anda akan belajar bagaimana membuat teks tebal di html, jenis gaya apa yang ada dan elemen apa yang bertanggung jawab untuk ini. Hasilnya, situs Anda akan dapat membanggakan teks yang dapat dibaca dengan poin-poin utama yang disorot dengan benar.
Dalam artikel sebelumnya, saya berbicara banyak tentang atribut dan tag bahasa web, tentang metode mendesain tampilan dan, tetapi saya tidak pernah menyentuh beberapa objek, yang tanpanya tidak ada situs yang dapat hidup. Ini teksnya.
Selain itu, ini bukan hanya sekumpulan huruf yang berkelanjutan, tetapi secara kompeten dibagi menjadi beberapa paragraf, dengan menyoroti kata kunci, kutipan, tautan, dll. Untuk ini, bahasa css menyediakan alat jenis huruf khusus. Ayo mulai!
Opsi gaya dalam html
Font konten teks selalu dapat dimodifikasi. Misalnya, setel menjadi tebal atau miring, dan Anda juga bisa mendekorasinya. Untuk melakukan ini, ada tag sederhana yang sangat mudah diingat dan kemudian diterapkan. Di bawah ini adalah tabel elemen yang menjelaskan tujuannya.
Untuk memulai, mari kita berurusan dengan elemen teks tebal.
Untuk menambah ketebalan huruf, ada tag berpasangan seperti dan ... Saat digunakan, alat ini menampilkan cara yang sama, karena mereka memformat teks menjadi tebal. Namun, tujuannya berbeda. Oleh karena itu, keduanya tidak dapat disebut ekuivalen dan hanya satu yang dapat digunakan.
Jadi, tagnya dibuat dengan kondisi mengubah font standar menjadi kaya dan tebal. Ini mengacu pada tampilan fisik garis besar dan tidak membawa beban semantik apa pun. Jadi katakanlah itu hanya semacam tampilan uji.
DAN dimaksudkan untuk menekankan sebuah poin kunci. Ini adalah elemen logis yang akan menonjol dalam intonasi selama percakapan.
Sekarang mari kita lihat tag seperti dan .
Mereka memformat font standar menjadi miring. Saya pikir Anda akan mengajukan pertanyaan logis: “Dan elemen-elemen ini juga berbeda satu sama lain pada prinsip tag dan ? ". Pertanyaannya benar. Dan kamu benar!
Memang, unit bahasa markup dirancang untuk menekankan pada poin dan detail penting, sementara hanya variasi pada tampilan konten.
Alat untuk memodifikasi font di css
Css telah mengimbangi dan menawarkan pengembang alat pengeditan serupa. Ini adalah properti seperti dekorasi teks dan font.
- Ini adalah parameter universal yang melengkapi font dengan beberapa detail. Misalnya, teks bisa "berkedip", garis bawah atau baris-tayang, digambar di atas kata (overline), diwarisi dari objek induk (mewarisi), atau format font dapat dihapus dari semua tambahan (tidak ada).
Mekanisme kedua yang umum digunakan untuk mengedit konten teks adalah properti font. Dengan bantuannya, Anda dapat mengubah gaya font (font-style), ukurannya (font-size), mengatur huruf kecil, mis. menunjukkan jenis huruf kecil (font-variant), serta "mainkan" dengan font-weight.
Berikut contohnya
Mempertimbangkan semua informasi yang saya sampaikan di atas, kami akan mencoba membuat kode contoh di mana kami menggunakan pengetahuan yang diperoleh secara maksimal (saya ingatkan Anda bahwa Anda dapat mengetikkan kode).
Buat tajuk untuk baru gugus kalimat!
Kami menulis konten teks dari paragraf itu sendiri, yang berkedip .
Jalankan contoh di browser dan perhatikan gayanya. Jadi, tajuk disorot dalam tipe miring ringan dengan garis bawah di atas kalimat. Paragraf ditampilkan dengan huruf kapital kecil. Apalagi teks tersebut mengandung penekanan logis dan fisik pada kata-kata.
Sekarang Anda dapat mengedit konten teks sesuai dengan semua aturan. Berlangganan pembaruan blog saya dan undang teman. Sampai jumpa!
Hormat kami, Roman Chueshov
Salah satu cara termudah untuk menyorot kata atau frasa dalam teks adalah dengan menggunakan huruf yang berbeda. Agar Anda dapat menggarisbawahi kata atau frasa, menggunakan halaman tebal dengan mudah memungkinkan Anda menyorot kata menggunakan gaya yang berbeda - miring, bergaris bawah, tebal.
Jenis huruf tebal sebagai cara untuk menonjolkan hal utama
Kata-kata yang paling mencolok dan menarik tampak disorot dengan huruf tebal. Kata dan frasa seperti itu langsung menarik perhatian. Jadi, untuk mempelajari cara cepat memilih tempat yang diperlukan dalam teks, Anda harus mengingat kode HTML khusus. Tebal diatur menggunakan tag berpasangan.
Sebelum kata atau frase, kalimat yang akan disorot, tag pembuka ditempatkan ... Setelah huruf terakhir dalam teks yang akan dipilih, tag penutup ditempatkan... Segala sesuatu di antara kedua tag ini dicetak tebal saat ditampilkan di browser.
Pilihan pilihan lainnya
Jadi, kami menemukan bahwa Anda dapat memilih teks menggunakan gaya yang berbeda. Kami memutuskan yang paling sederhana dan pada saat yang sama efektif untuk menggunakan font HTML tebal. Sekarang mari kita bicara tentang opsi seleksi lainnya.
Jadi, Anda dapat menyorot teks dengan huruf miring menggunakan tag berpasangan , garis bawahi dengan ... Ini adalah cara termudah untuk memilih teks.
Ada juga tag yang kurang dikenal dan digunakan yang dapat digunakan untuk menyorot kata dan kalimat dalam teks. Jadi, untuk mencoret teks, gunakan saja ... Tag berpasangan akan membantu membuat teks menjadi monospasi ... Jika Anda perlu membuat superscript, gunakan , bawah - .
Dalam hal ini, seperti sebelumnya, teks yang Anda butuhkan harus berada di antara tag pembuka dan penutup. Seperti yang Anda lihat, tidak ada yang sulit, yang utama adalah mengingat kode-kode ini atau menuliskannya.
Menggunakan banyak font
Jika Anda ingin membuat teks lebih ekspresif, Anda dapat menggunakan lebih dari sekedar huruf tebal. Markup HTML memungkinkan Anda menyorot kata dengan banyak wajah secara bersamaan. Jadi, Anda dapat membuat kata tebal, coret, dan miring pada saat yang bersamaan.
Satu hal yang perlu diingat adalah bahwa semua tag harus ditutup secara berurutan. Misalnya, entri yang benar mungkin:
- teks yang dipilih.
Jika Anda menutup tag dalam urutan yang berbeda, teks akan dipilih dengan tidak benar. Contoh entri yang salah:
- teks yang dipilih.
Dalam hal ini, browser akan menjadi bingung dan tidak mengerti apa yang sebenarnya Anda inginkan darinya.
Omong-omong, di sini dapat dicatat bahwa tiga varian gaya - tebal, bergaris bawah, dan miring - mudah diingat jika Anda mengetahui tombol pintas di Word. Di sana gaya diatur menggunakan tombol huruf yang sama sambil menahan Ctrl.
Seperti yang Anda lihat, Anda dapat menggunakan lebih dari huruf miring atau tebal. Markup HTML memungkinkan Anda menyorot kata semudah Word biasa.
kesimpulan
Untuk menyorot teks, tidak hanya variasi warna dan corak, ukuran dan jenis font yang berbeda, tetapi juga gayanya yang banyak digunakan. Selain itu, dengan bantuan kerangka yang berbeda satu atau beberapa bagian teks dapat dibedakan dengan indah dan mudah.
Untuk mengubah gaya font, Anda harus menggunakan tag apa pun yang Anda ketahui. Font tebal dari halaman HTML adalah yang paling mencolok dan terlihat, dan oleh karena itu paling sering digunakan untuk penekanan.
Halo para pembaca blog yang budiman! 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. Ngomong-ngomong, Anda bisa menemukan elemen desain teks yang serupa di banyak editor teks, misalnya, di Word.
Tag dibagi menjadi 2 jenis: tag blok dan tag sebaris. Saat menggunakan yang pertama, Anda dapat mengubah konten 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, baca artikel di awal artikel ini. Singkatnya, ada dua jenis tag: tunggal (misalnya, membungkus ke baris 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 frase yang benar akan terlihat seperti ini: Cuplikan terpilih
Saat browser memproses fragmen ini, Anda akan melihat teks berikut: Cuplikan terpilih.Omong-omong, semua tag tidak ditampilkan di umpan RSS ().
Hal utama saat menulis tag adalah membuatnya tetap tertutup. Jika tidak, semua teks pada halaman akan dicetak tebal (dalam contoh dengan tag ). Namun ada kalanya Anda perlu menyorot fragmen tertentu dengan huruf tebal dan miring pada saat yang bersamaan. Namun tidak ada tag yang melakukan tindakan ini. Hanya ada satu jalan keluar dari situasi ini: gunakan dua tag pada saat yang bersamaan. Tidak masalah dalam urutan apa Anda menggunakannya. Oleh karena itu, penulisan teks dengan tag seperti ini:
Cuplikan terpilih
atau seperti ini:
Cuplikan terpilih
Anda masih akan mendapatkan Cuplikan terpilih dalam huruf miring dan tebal pada saat 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 (), bergantung pada pengaturannya. Sekarang mari beralih ke tag format itu sendiri.
Teks tebal dan miring - tag , , dan
Tag Pemformatan Teks Paling Populer - Menekankannya mencolok dan dalam huruf miring... Biasanya mereka digunakan untuk memberi arti penting pada sebuah fragmen. Kasus pertama berfungsi untuk menyorot sebuah fragmen yang berisi informasi atau kata kunci yang berguna. Huruf 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 ... Tidak ada perbedaan dalam penampilan. Meskipun, karena browser apa pun dapat menafsirkan setiap elemen secara berbeda, Anda mungkin dapat melihat perbedaan apa pun. 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 kedua baris ini di kode sumber halaman:
Teks dalam tag yang kuat Teks dalam tag b
Kita dapat mengamati situasi yang sama dalam kasus tag miring dan ... Cobalah untuk menemukan perbedaan antara kedua contoh tersebut:
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 kemudian 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 tag itu dan mempengaruhi. Jika Anda mengapit kata kunci dengan tag ini, ini akan memberi efek menguntungkan pada promosi situs web. Hal utama adalah jangan berlebihan - teks maksimum harus 5% teks tebal di tag , dan jumlah miring yang sama di tag .
Jika Anda hanya ingin menyorot beberapa momen di teks, gunakan tag atau ... Secara umum, menurut saya mesin telusur juga menganggap teks dalam tag ini lebih penting, tetapi aktif pengoptimalan internaldampaknya masih lebih kecil daripada dan .
Tag teks garis miring - , dan
Sekarang mari kita lihat beberapa tag yang menggunakan ciri dalam gaya teks. Editor teks paling terkenal yang Anda tahu adalah menandai
atau garis bawahi. Tag ini tidak memengaruhi peringkat (sejauh yang saya tahu), tetapi akan membantu untuk menyorot teks apa pun dan fokus padanya. Saya memberikan contoh penggunaan tag ini tepat di atas. Dua tag lagi yang memiliki tujuan serupa - dan ... Keduanya melayani fungsi teks coret. 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 terletak pada perbedaannya penulisan, 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. Dengannya Anda dapat mengatur parameter untuk bagian teks tertentu. Secara umum, sekarang lebih disukai untuk digunakan (cascading style sheets) karena mereka dapat sangat mempersingkat seluruh kode HTML halaman. Jadi, pertimbangkan tagnya sendiri . Semuanya ada untuknya tiga atribut:
- wajah - font itu sendiri. Misalnya Arial, Courier atau Verdana. Anda dapat mendaftar beberapa, karena tidak semua pengguna memiliki kumpulan font yang ekstensif, dan dengan menulis beberapa di atribut face, browser akan dapat memilih mana yang akan digunakan, atau lebih tepatnya, mana yang ada di sistem;
- ukuran - atribut yang menunjukkan ukuran teks. Ini dapat diekspresikan baik dalam unit arbitrer maupun dalam piksel;
- warna - warna teks. Atribut ini dapat digunakan baik dalam kode HTML warna, maupun dalam kata-kata. Yang pertama adalah dalam bentuk #FFFFFF (di mana F adalah angka atau huruf dari A ke F), dan yang terakhir ditulis dengan kata-kata sederhana (misalnya, merah adalah merah).
Seperti inilah tampilan teks dalam tag menggunakan setiap atribut:
Teks ini berukuran 6px
Teks ini berwarna merah Teks ini menggunakan font Arial Teks ini berwarna merah dan 5pxDan inilah yang akan Anda lihat setelah memproses kode tertulis: 
Elemen desain teks 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 sendiri. Setiap spesies hanya memiliki nomor serinya sendiri dan dicatat menggunakan tag
, ,..., ... Seperti inilah tampilan semua tajuk saat diproses:
... Seperti inilah tampilan semua tajuk saat diproses:
Nomor setelah judul kata cocok dengan nomor di tag
Sekarang mari kita bicara tentang tag sorotan paragraf
Fungsi dari tag ini adalah untuk memisahkan teks antara teks serupa lainnya dengan baris kosong. Jika Anda melihat kode sumber suatu dokumen, Anda dapat melihat yang berikut ini:
Kotak hijau memiliki satu paragraf, kotak merah memiliki paragraf lain. Dan beginilah tampilan kode ini setelah diproses oleh browser (panah menunjuk ke baris kosong):
Hasilnya, kami mendapatkan pemisahan yang cukup mencolok antara satu paragraf dari paragraf lain, yang bermanfaat - membaca menjadi lebih nyaman.
Demikian artikel tentang tag format dokumen... Ada lebih banyak dari yang saya jelaskan dalam materi ini. Hanya saja Anda perlu bercerita banyak tentang beberapa, akibatnya artikel terpisah dengan ulasan lengkap akan dikhususkan untuk mereka.
