Untuk membuat halaman WEB kami terlihat lebih rapi, kami akan membagi teks menjadi beberapa paragraf dan menyorot judulnya. HTML memiliki 6 level judul bagian dokumen, diberi nomor 1 sampai 6. Judul dideklarasikan dengan sepasang tag dengan nomor yang sesuai dengan levelnya, misalnya,
- judul bagian tingkat pertama, dan - judul bagian tingkat keenam. Judul berbeda dari teks biasa dalam ukuran dan lebar huruf. Heading tingkat pertama h1 biasanya ditampilkan dalam font yang sangat besar, sedangkan heading tingkat keenam h6 biasanya ditampilkan dalam font yang sangat kecil.Judul
Jangan bingung antara judul bagian dokumen dengan judul dokumen yang telah dibahas sebelumnya, yang ditentukan oleh elemen
.Kami menggunakan kalimat pertama sebagai judul teks - Untuk melakukan ini, cukup batasi dengan tag
Dan
.Masukkan tag ke dalam teks file other.html
Dan
sehingga membatasi kalimat pertama teks, dan potongan kode ini berbentuk sebagai berikut:Selamat datang di halaman perusahaan SD!
Mari kita lihat hasil yang diperoleh.
Simpan file dengan memilih perintah menu Notepad File - Simpan.
Operasi penyimpanan harus selalu dilakukan sebelum melihat dokumen, karena ini membuka file untuk dilihat dengan memuatnya ke dalam RAM komputer dari disk. Jika Anda tidak menyimpan file setelah mengedit kode HTML, Anda tidak akan melihat konfigurasi apa pun di browser.
Pulihkan jendela browser dengan mengklik tombolnya di Taskbar.
Tekan tombol F5 atau tombol Refresh pada toolbar jendela kerja program. File other.html akan dimuat ulang dan Anda akan melihat seperti apa header tingkat pertama di jendela browser Anda.
Lihat tampilan judul 5 level lainnya dengan mengubah angka di tag: h2, h3, dan seterusnya. Setelah setiap konfigurasi, jangan lupa untuk menyimpan file dan memperbarui gambar di jendela browser.
Saat Anda menyelesaikan eksperimen, pulihkan kembali tag di file other.html
.Dengan menggunakan 6 tingkat judul yang disediakan HTML, Anda dapat melakukannya dengan mudah dokumen yang dapat dibaca dengan struktur yang jelas secara intuitif. Ingatlah bahwa dokumen Anda akan selalu lebih baik dibaca jika dibagi dengan jelas menjadi beberapa bagian dan subbagian.
Penyelarasan Pos
Secara default, judul disejajarkan dengan tepi kiri halaman. Namun bisa juga disejajarkan ke kanan atau ke tengah. Untuk perataan yang tepat dalam sebuah tag
Atribut align="right" digunakan, dan untuk pemusatan - align="center". Indikasi jelas perataan sisi kiri juga diperbolehkan - align="left".
Tambahkan ke tanda
atribut align="center" untuk memusatkan judul. Elemen ini akan terlihat seperti ini:
Selamat datang di halaman perusahaan SD!
Di masa mendatang, kami tidak akan mengingatkan Anda tentang perlunya menyimpan file dengan kode awal dan menyegarkan gambar di browser sebelum melihatnya.
Cara membuat teks disorot (tebal) dalam HTML
Sekarang mari kita beralih ke teks lainnya. Mari kita perbesar ukurannya dan buat teks menjadi miring tebal. Untuk mengatur gaya tebal, tag berpasangan digunakan .
Masukkan yang pembuka ke file other.html dan penutupan tag sehingga membatasi teks. Di sini Anda akan mengetahuinya... Elemen ini harus berbentuk berikut:
Cara membuat teks menjadi miring di HTML
Gaya miring diatur menggunakan tag .
Masukkan tag HTML ke dalam kode awal Dan sehingga elemen yang diedit mengambil bentuk berikut:
Di sini Anda akan mempelajari tentang aktivitas kami, tentang produk perangkat lunak perusahaan kami, dan tentang peralatan yang kami produksi
Elemen markup dapat disarangkan, seperti dalam struktur ini, di mana elemen tersebut … bersarang di dalam sebuah elemen …. Browser modern mampu menangani tag bersarang dengan benar. Oleh karena itu, Anda perlu memastikan bahwa urutan investasi tidak dilanggar. Browser akan sulit dioperasikan jika nestingnya rusak. Misalnya, entri ini salah: …. Kepatuhan terhadap sarang adalah bagian yang sangat penting dari budaya umum penulisan kode HTML.
Cara membuat teks bergaris bawah pada HTML
Menggunakan beberapa tag Anda dapat mengatur gaya garis bawah pada potongan teks yang dibatasi oleh tag ini, dan menggunakan sepasang tag - tampilkan teks dalam font teletype.
Perlu dicatat bahwa baru-baru ini tag tersebut disederhanakan dan ditekankan menggunakan gaya. setara . Ya, analog baru terlihat lebih rumit, tapi sayangnya ini lebih benar. Hal utama yang mendukung hal ini adalah bahwa versi besarnya bersifat lintas-browser, dengan kata lain, cocok untuk semua browser, ketika Tidak semua browser mendukungnya.
Cara memperbesar teks dalam HTML
Sekarang mari kita tingkatkan ukuran font teks. Hal ini dapat dilakukan dengan menggunakan berbagai metode.
Tag menambah ukuran font teks yang diapit di antaranya.
Tambahkan tag masing-masing ke awal dan akhir potongan kode di atas Dan sehingga elemen tersebut berbentuk sebagai berikut:
Di sini Anda akan mempelajari tentang aktivitas kami, tentang produk perangkat lunak perusahaan kami, dan tentang peralatan yang kami produksi
Menggunakan tag Anda dapat memperkecil ukuran font teks dibandingkan dengan yang awal.
Metode lain untuk menentukan ukuran font adalah dengan menggunakan tag dengan atribut ukuran. Bilangan bulat dari 1 hingga 7 digunakan sebagai nilai untuk atribut ini, dalam hal ini, nilai 1 menunjukkan ukuran font terkecil, dan nilai 7 menunjukkan ukuran font terbesar.
Menggunakan alih-alih tag lihat tag , lihat bagaimana ukuran font teks berubah untuk nilai atribut ukuran yang berbeda - dari 1 menjadi 7.
Anda juga dapat menggunakan angka 1 sampai 7 dengan tanda + (plus) atau - (minus) sebagai nilai atribut size. Dalam hal ini, ukuran font bertambah atau berkurang, dibandingkan dengan ukuran awal, misalnya tag Ukuran font akan bertambah satu tingkat dibandingkan saat ini. Coba lihat.
Tetapkan 5 sebagai nilai atribut ukuran untuk potongan teks yang dimaksud: . Kode HTML untuk bagian ini harus seperti ini:
Di sini Anda akan mempelajari tentang aktivitas kami, tentang produk perangkat lunak perusahaan kami, dan tentang peralatan yang kami produksi.
Dalam tag Atribut warna juga dapat digunakan untuk menunjukkan warna font yang dibatasi oleh tag teks. Arti dari atribut ini sama dengan atribut yang telah dibahas sebelumnya yaitu menggambarkan warna background dan teks dokumen.
Secara default, paragraf dengan teks Di sini Anda akan mengetahui... disejajarkan ke kiri. Pusatkan secara horizontal menggunakan tag
Sisipkan tag
Harap dicatat bahwa kami menggunakan tag untuk memusatkan paragraf
Perhatian! Untuk tag 2010 ,
=
=
Ada juga sejumlah besar tag usang lainnya yang tidak dapat dijelaskan dalam artikel ini, jadi lebih baik segera membiasakan diri dengan situs WEB khusus mengenai masalah ini. Tapi saya memposting yang utama di sini sedikit lebih tinggi
Kode alokasi
Bahasa HTML memungkinkan dua pendekatan untuk pemilihan font pada fragmen teks. Di satu sisi, Anda dapat secara langsung menunjukkan bahwa font pada bagian tertentu dari teks dapat dicetak tebal atau miring; dengan kata lain, Anda dapat dengan jelas menunjukkan gaya font teks, seperti yang kami lakukan dalam percobaan ini. Di sisi lain, Anda dapat menandai bagian teks mana pun yang memiliki gaya logis yang berbeda dari biasanya, sehingga menyerahkan interpretasi gaya ini kepada browser. Dengan demikian, gaya logis menunjukkan peran sebuah potongan teks, misalnya, signifikansinya yang sangat besar dibandingkan dengan teks biasa, atau fakta bahwa potongan tersebut adalah kutipan. Dalam karya Anda sendiri, Anda dapat menggunakan tag berikutnya yang menentukan gaya logis. Periksa cara kerjanya browser yang berbeda.
- digunakan untuk mendefinisikan sebuah kata. Teks ditampilkan dalam huruf miring secara default.
- untuk menyorot kata-kata dan memperkuatnya. Teks ditampilkan dalam huruf miring secara default.
- untuk menyorot judul buku, film, pertunjukan, dan sebagainya, ditampilkan dalam huruf miring secara default.
- untuk potongan kode program. Ditampilkan di layar dalam font lebar tetap.
- digunakan untuk teks yang dimasukkan pengguna dari keyboard. Mungkin muncul dalam font berbeda di browser berbeda. Tag sudah usang.
- berfungsi untuk menampilkan pesan program. Ditampilkan dalam font dengan lebar tetap. Tag sudah usang.
- untuk fragmen yang sangat penting. Biasanya disorot dengan huruf tebal.
- digunakan untuk menunjukkan bahwa sepotong teks atau kata merupakan variabel simbolik, dengan kata lain teks yang dapat diganti dengan ekspresi berbeda. Ditampilkan dalam huruf miring secara default. Tag sudah usang.
Spesifikasi HTML 4.0 menawarkan metode yang lebih canggih dalam menentukan gaya untuk teks dan bagian lainnya - menggunakan bahasa khusus yang disebut CSS (Cascading Style Sheets). Style sheet adalah pencapaian besar di bidang desain WEB, memperluas kemampuan untuk meningkatkan tampilan halaman. Style sheet memudahkan untuk menentukan spasi baris, padding, warna yang digunakan untuk teks dan latar belakang, ukuran dan gaya font, dan sebagainya. Sebagian besar bagian HTML dapat ditata menggunakan atribut style, yang ditempatkan di dalam tag pembuka elemen. Pasangan bentuk “property: value” digunakan sebagai nilai atribut style. Misalnya, dalam sepotong kode yang mendeskripsikan header bagian,
atribut style="color: blue" menentukan bahwa properti warna memiliki nilai biru, dengan kata lain, teks judul tingkat pertama harus ditampilkan dengan warna biru.
Keselarasan dengan gaya
Mari kita lihat bagaimana menggunakan bahasa Cascading Style Sheets untuk menentukan gaya potongan teks yang dimulai dengan kata-kata. Di sini Anda akan belajar...
Untuk menentukan ketebalan font, gunakan properti font-weight dengan nilai lebih ringan (narrow), tebal (semi-bold), lebih tebal (bold), misalnya style="font-weight: bold".
Untuk menentukan gaya miring, gunakan properti font-style dengan nilai miring. Oleh karena itu, untuk memberikan teks gaya miring tebal, Anda harus mencari atribut style seperti ini: style="font-weight: bold; font-style: italic". Harap diperhatikan: karakteristik dapat ditempatkan dalam urutan apa pun dan harus dipisahkan dengan titik koma.
Jika Anda perlu menentukan ukuran font, Anda harus menggunakan properti font-size, yang nilainya dapat ditentukan dalam nilai relatif atau absolut. Nilai relatif adalah persentase, dan titik (pt), piksel (px), sentimeter (cm), milimeter (mm) digunakan sebagai nilai absolut. Misalnya:
style="ukuran font: 200%"
style="ukuran font: 16pt"
style="ukuran font: 100px"
Dengan menentukan ukuran absolut, bukan ukuran relatif, Anda menghilangkan kemampuan pengguna yang melihat halaman Anda untuk menambah atau mengurangi ukuran font menggunakan perintah menu browser sesuai dengan visi dan resolusi monitor mereka. Font hanya akan ditampilkan dalam ukuran yang Anda tentukan. Oleh karena itu, lebih baik menentukan ukuran font sebagai persentase. Dalam hal ini, ukuran font akan lebih kecil atau lebih besar dengan jumlah persen yang ditunjukkan dibandingkan saat dirancang bantuan HTML tanda bawaan.
Untuk menentukan metode perataan teks horizontal, gunakan properti perataan teks dengan nilai kiri (kiri), kanan (ke kanan), tengah (tengah), rata (lebar). Jadi, untuk menunjukkan bahwa teks Di sini Anda akan belajar... harus diformat dalam gaya miring tebal dengan ukuran 150% dari aslinya dan rata tengah, gayanya harus ditemukan sebagai berikut:
style="font-weight: bold; font-style: italic; ukuran font: 150%; perataan teks: tengah"
Kami akan menggunakan atribut ini dalam tag<р>, yang memungkinkan Anda menyajikan teks sebagai paragraf terpisah.
Sunting elemen HTML, termasuk teks Di sini Anda akan mengetahuinya... dengan menghapus tag
<р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">Di sini Anda akan mempelajari tentang aktivitas kami, tentang produk perangkat lunak perusahaan kami, dan tentang peralatan yang kami produksi
Soalnya, HTML memungkinkan Anda untuk menggunakannya berbagai metode desain penuh gaya. Pada saat yang sama, penggunaan bahasa tabel cascading gaya CSS lebih diinginkan.
Opsi penyelarasan dan gaya lainnya
Kami hanya melihat satu kasus penggunaan untuk bahasa stylesheet, di mana definisi gaya ditempatkan secara spesifik dalam tag elemen yang Anda jelaskan.
Hal ini dilakukan dengan menggunakan atribut style, yang digunakan dengan sebagian besar tag HTML standar. Namun ada kegunaan lain untuk CSS.
Dalam HTML standar, tanpa memperkenalkan style sheet, untuk menetapkan parameter tertentu ke elemen apa pun, seperti warna, ukuran, posisi pada halaman, dan sejenisnya, Anda harus menguraikan karakteristik ini untuk setiap elemen setiap saat, meskipun 10 halaman harus ditempatkan pada satu halaman. ki bagian-bagian yang tidak berbeda satu sama lain. Anda harus memasukkan potongan kode HTML yang sama ke dalam halaman puluhan kali, sehingga meningkatkan ukuran file dan waktu yang diperlukan untuk mendownloadnya dari Internet.
Style sheet bekerja dengan cara yang berbeda, lebih nyaman dan ekonomis. Untuk menetapkan karakteristik tertentu pada suatu elemen, Anda harus menguraikan elemen ini satu kali dan menemukan deskripsi ini sebagai gaya, lalu cukup tunjukkan bahwa elemen yang ingin Anda desain dengan tepat harus sesuai dengan karakteristik gaya yang Anda gambarkan. Nyaman, bukan?
Selain itu, Anda dapat menyimpan deskripsi gaya bukan di teks halaman WEB Anda, tetapi di berkas terpisah- ini memungkinkan Anda menggunakan deskripsi gaya pada sejumlah halaman WEB. Dan keuntungan terkait lainnya adalah kemampuan untuk mengubah desain sejumlah halaman, hanya mengoreksi deskripsi gaya dalam satu file terpisah.
Selain itu, bahasa style sheet memungkinkan Anda bekerja lebih banyak lagi dengan desain font halaman tingkat tertinggi daripada HTML standar.
DI DALAM waktu saat ini Bahasa CSS memiliki jumlah parameter yang cukup besar untuk bagian-bagian HTML yang dapat dikontrolnya. Dengan menggunakan “aman”, dengan kata lain kompatibel dengan jumlah terbesar browser elemen CSS- karakteristik font, warna bagian dan latar belakang, karakteristik teks dan batas - Anda dapat sangat memudahkan pekerjaan Anda dan membuat halaman WEB Anda lebih menarik dalam hal desain teks.
Halo, para pembaca blog yang budiman! Artikel ini akan membahasnya tag pemformatan teks. Contoh utama termasuk membuat teks menjadi tebal atau miring. Kami juga akan melihat dampak beberapa tag pada optimasi situs web internal dan aturan penulisannya. Anda dapat membacanya 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 inline. Saat menggunakan yang pertama, Anda dapat mengubah konten bagian teks (baris, fragmen atau kata individual), dan yang terakhir adalah . Tag pemformatan yang akan kita lihat di artikel ini sebagian besar menggunakan huruf kecil.
Aturan dan urutan penulisan tag
Anda pasti sudah tahu apa itu tag pembuka dan tag penutup. Jika belum, 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 pembuka dan penutup, dan sorotan harus ditempatkan di antara keduanya. Misalnya, pemilihan frasa yang benar akan terlihat seperti ini: Fragmen yang dipilih
Saat browser memproses fragmen ini, Anda akan melihat teks berikut: Fragmen yang dipilih. Ngomong-ngomong, di Umpan RSS semua tag tidak ditampilkan ().
Hal utama saat menulis tag adalah jangan lupa menutupnya. Jika tidak, semua teks pada halaman akan disorot dalam huruf tebal (dalam contoh dengan tag ). Namun ada kalanya Anda perlu menyorot bagian tertentu dalam huruf tebal dan miring secara bersamaan. Namun tidak ada tag yang melakukan tindakan ini. Hanya ada satu jalan keluar dari situasi ini: gunakan dua tag secara bersamaan. Tidak masalah dalam urutan apa Anda menggunakannya. Oleh karena itu, tulislah teks dengan tag seperti ini:
Fragmen yang dipilih
atau seperti ini:
Fragmen yang dipilih
Anda akan tetap menerima Fragmen yang dipilih miring dan tebal secara bersamaan. Namun, lebih baik menggunakan opsi pertama, karena pada awalnya itu adalah satu-satunya pilihan yang benar. Selain itu, jangan lupa bahwa setiap browser dapat memproses tag secara berbeda (), bergantung pada pengaturannya. Sekarang mari beralih ke tag pemformatan itu sendiri.
Teks tebal dan miring - tag , , Dan
Tag pemformatan teks paling populer adalah menyorotnya berani Dan huruf miring. Mereka biasanya digunakan untuk memberi arti penting pada sebuah fragmen. Kasus pertama berfungsi untuk memilih sebuah fragmen yang berisi informasi berguna atau kata kunci. Huruf miring memiliki tujuan yang sama dengan teks tebal, namun informasinya kurang penting karena huruf miring kurang terlihat di latar belakang teks isi dibandingkan teks tebal.Mari kita pertimbangkan dulu membuat teks menjadi tebal. Ada dua tag yang digunakan untuk tindakan ini - Dan . Perbedaan dalam penampilan TIDAK. Meskipun, mengingat setiap browser dapat menafsirkan setiap elemen secara berbeda, Anda mungkin dapat melihat perbedaannya. Seperti inilah tampilan teks dalam tag Dan dalam bentuk yang sudah diproses oleh browser:
Teks dalam tag kuat
Teks dalam tag b
Dan inilah tampilan kedua baris ini pada kode sumber halaman:
Teks dalam tag kuat Teks dalam tag b
Kita dapat mengamati situasi yang sama dalam kasus tag miring Dan . Coba temukan perbedaan antara kedua contoh tersebut:
Teks dalam tag em
Teks dalam tag I
Dan di sini sumber:
Teks dalam tag em Teks dalam tag I
Jadi, tag yang dianggap tebal dan miring sebenarnya tidak berbeda, tetapi mengapa kita membutuhkan, misalnya, tag tersebut jika ada ? Lagi pula, yang terakhir hanya berisi satu karakter (tidak termasuk tanda kurung) dan karenanya lebih mudah untuk ditulis. Dan intinya adalah tag itu Dan pengaruh . Jika Anda mengapit kata kunci dengan tag ini, ini akan memiliki efek menguntungkan pada promosi situs web, yang utama adalah jangan berlebihan - maksimal dalam teks harus 5%. teks tebal di tag , dan jumlah huruf miring yang sama pada tag .
Jika Anda hanya ingin menyorot suatu titik dalam teks, gunakan tag atau . Secara umum, menurut saya mesin pencari juga menganggap teks dalam tag ini lebih penting, tapi optimalisasi internal mereka masih memiliki pengaruh yang lebih kecil dibandingkan Dan .
Tag untuk menyorot teks dengan garis - , Dan
Sekarang mari kita lihat beberapa tag yang menggunakan tanda hubung dalam desain teks. Yang paling terkenal bagi Anda editor teks — menandai
atau garis bawah. Tag ini tidak berdampak pada peringkat (sejauh yang saya tahu), tetapi menyorot beberapa teks dan memusatkan perhatian padanya akan membantu. Saya memberikan contoh penggunaan tag ini tepat di atas. Dua tag lagi yang memiliki tujuan serupa - Dan . Keduanya menjalankan fungsi mencoret teks. Anda dapat menggunakan tag ini dalam situasi apa pun: jika Anda memperbarui dokumen (atau lebih tepatnya, sebagian darinya), Anda dapat mencoret dokumen lama dan menambahkan yang baru; jika Anda akan menulis sesuatu yang melenceng dari topik materi; sesuatu yang tidak sesuai dengan standar moral dan etika.
Perbedaan kedua tag ini hanya terletak pada keduanya menulis, oleh karena itu lebih baik menggunakan yang pertama, karena pertama, lebih nyaman untuk menulis, dan kedua, halaman Anda akan berisi lebih sedikit kode HTML, dan mesin pencari menyukainya.
Menandai dan atribut - parameter font teks
Sekarang perhatikan sebuah tag yang tidak digunakan tanpa atribut. Dengan menggunakannya, Anda dapat mengatur parameter untuk bagian teks tertentu. Secara umum, sekarang lebih baik menggunakan (cascading style sheet), karena... menggunakannya Anda dapat mengurangi keseluruhan kode HTML halaman. Jadi, mari kita lihat tag yang sama . Semuanya ada untuknya tiga atribut:
- menghadapi- font itu sendiri. Misalnya Arial, Kurir atau Verdana. Anda dapat membuat daftar beberapa, karena tidak semua pengguna memiliki kumpulan font yang banyak, dan dengan menulis beberapa font di atribut wajah, browser akan dapat memilih font mana yang akan digunakan, atau lebih tepatnya, font mana yang ada di sistem;
- ukuran— atribut yang menunjukkan ukuran teks. Dapat dinyatakan dalam satuan konvensional dan piksel;
- warna- warna teks. Atribut ini dapat digunakan baik dalam kode warna HTML maupun dalam kode kata. Yang pertama berbentuk #FFFFFF (di mana F adalah angka atau huruf apa saja dari A sampai F), dan yang kedua ditulis dengan kata-kata sederhana(misalnya merah - merah).
Seperti inilah teks di dalam tag menggunakan setiap atribut:
Teks ini berukuran 6px
Teks ini berwarna merah Teks ini dalam font Arial Teks ini berwarna merah dan berukuran 5pxDan inilah yang akan Anda lihat setelah memproses kode tertulis: 
Blokir elemen desain teks - judul -, gugus kalimat
, gugus kalimat
Terakhir, kita akan melihat elemen blok, yang digunakan di hampir setiap dokumen. Ini adalah tag judul dan paragraf. Mari kita pertimbangkan yang pertama. Ada 6 jenis heading dan masing-masing memiliki tag tersendiri. Setiap jenis hanya memiliki nomor serinya sendiri dan dicatat menggunakan tag
, ,..., . Berikut tampilan semua header saat diproses:
. Berikut tampilan semua header saat diproses:
Nomor setelah judul kata sesuai dengan nomor pada tag
Sekarang mari kita bicara tentang tag highlight paragraf
Fungsi dari tag ini adalah untuk memisahkan teks antara teks lain yang identik dan sebuah baris kosong. Jika Anda melihat kode sumber suatu dokumen, Anda dapat melihat yang berikut:
Persegi panjang hijau berisi satu paragraf, persegi panjang merah berisi paragraf lainnya. Dan inilah tampilan kode ini setelah diproses oleh browser (panah menunjuk ke baris kosong):
Hasilnya, kami mendapatkan pemisahan yang cukup mencolok antara satu paragraf dengan paragraf lainnya, yang bermanfaat - membaca menjadi lebih nyaman.
Ini adalah akhir dari artikel tentang tag pemformatan dokumen. Masih banyak lagi daripada yang saya jelaskan di materi ini. Hanya saja banyak hal yang perlu dikatakan tentang beberapa di antaranya, oleh karena itu artikel terpisah dengan ulasan lengkap akan dikhususkan untuk mereka!
Miring adalah salah satu cara paling populer untuk menyorot suatu teks dan memberinya arti penting. Ini ideal untuk kutipan, catatan kaki, judul, dan nama diri. Ada dua tag khusus dalam HTML untuk menampilkan gaya miring. Di CSS, huruf miring dikontrol oleh properti font-style.
Miring atau miring?
Font yang sama mungkin tampak berbeda dalam gaya miring.
Gambar menunjukkan tiga blok teks yang diketik dengan font Playfair Display yang sama. Yang pertama bergaya romawi biasa, sedangkan yang kedua dan ketiga bergaya miring. Mereka dibuka di browser yang sama Google Chrome, tapi tampilannya sangat berbeda.
Faktanya adalah beberapa font memiliki kumpulan karakter miringnya sendiri. Jika browser tidak memiliki akses ke kumpulan ini, tetapi menemukan teks yang seharusnya dicetak miring, browser akan mencoba mencetak miring sendiri.
Di blok kedua hanya ada versi yang diproses oleh browser, dan di blok ketiga ada versi miring asli dari font Playfair Display, yang memiliki gaya unik, lebih mirip tulisan tangan. Browser hanya memiringkan setiap karakter teks pada sudut tertentu, menirukan huruf miring.
Saat mengetahui cara membuat huruf miring dalam CSS atau HTML, penting untuk diingat bahwa dalam kasus font tertentu, Anda perlu memberi browser akses ke kumpulan huruf miringnya. Dalam beberapa kasus, hasil algoritma kemiringan browser mungkin tidak memuaskan.
HTML miring
Ada dua tag khusus untuk menampilkan teks miring dalam HTML: i (dari kata miring) dan em. Gaya fragmen teks yang diapit oleh salah satu deskriptor ini akan sama.
Perbedaannya terletak pada pemilihan logis. Tag em menunjukkan arti khusus dari fragmen tersebut. Hal ini penting bagi robot pencari dan pembaca layar, yang akan menyorot teks tertentu menggunakan intonasi.
properti gaya font
Di CSS, huruf miring dikontrol oleh pernyataan gaya font. Ini dapat mengambil salah satu dari tiga nilai dasar:
- biasa - font biasa;
- miring - gaya miring;
- miring - gaya miring.
Pada saat ini Sebagian besar browser modern memperlakukan nilai miring dan miring dengan cara yang sama, tetapi nilai miring awalnya dianggap sebagai hasil algoritme khusus browser yang memiringkan setiap karakter ke kanan.
Jika font yang dicari tidak ditemukan oleh browser, maka tampilan italic akan sama persis dengan oblique.
Berbeda dengan tag em, tag ini tidak terlalu mementingkan pemilihan; tag ini lebih sesuai dengan deskriptor i.
Contoh
Kutipan sering kali dicetak miring. Mari kita coba membuatnya terlihat bagus.
Kutipan ( gaya font: miring; batas kiri: 5px ungu solid; padding-kiri: 20px; )
Selain batas dekoratif di sebelah kanan dan indentasi, blok kutipan memiliki aturan gaya font dengan nilai miring.
Gunakan untuk mengatur huruf miring di CSS.
Dalam html, ukuran font memainkan peran penting. Ini memungkinkan Anda untuk menarik perhatian pengguna informasi penting, diposting di halaman situs. Meski tidak hanya ukuran huruf yang penting, tetapi juga warna, ketebalan, bahkan keluarganya.
Tag dan atribut saat bekerja dengan font html
Bahasa hypertext memiliki berbagai alat untuk bekerja dengan font. Bagaimanapun, pemformatan teks adalah tugas utama html.
Alasan penciptaan bahasa HTML Ada masalah dengan browser yang menampilkan aturan pemformatan teks.
Mari kita lihat tag yang digunakan untuk bekerja dengan font dalam HTML dan atributnya. Yang utama adalah tagnya . 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 jenis font teks yang akan digunakan di dalam tag . Beberapa nilai didukung, dipisahkan dengan koma.
Hanya teks yang terletak di antara bagian tag font berpasangan yang diformat. Teks lainnya ditampilkan font standar, diinstal secara default.
Juga di html ada sejumlah tag berpasangan yang hanya menentukan satu aturan pemformatan. Ini termasuk:
- — mengatur font tebal dalam html. Menandai tindakan serupa dengan yang sebelumnya;
- — ukurannya lebih besar dari standar;
- — ukuran lebih kecil huruf;
- — teks miring (miring). Label serupa ;
- — teks dengan garis bawah;
- dicoret;- - menampilkan teks hanya di huruf kecil;
- - dalam huruf besar.
Teks biasa
gambar kecil
gambar kecil
Lebih dari biasanya
Kurang dari biasanya
Huruf miring
Huruf miring
Dengan garis bawah
Dicoret
Kemampuan atribut gaya
Selain tag yang dijelaskan, masih ada beberapa cara lagi untuk mengubah font di html. Salah satunya adalah dengan menggunakan atribut style generik. Dengan menggunakan nilai propertinya, Anda dapat mengatur gaya tampilan font:
1) font-family – properti mengatur keluarga font. Dimungkinkan untuk membuat daftar beberapa nilai.
Mengubah font dalam html ke nilai berikutnya akan terjadi jika keluarga sebelumnya tidak disetel sistem operasi pengguna.
Sintaks penulisan:
keluarga font: nama font [, nama font[, ...]]
2) ukuran font – ukurannya diatur dari 1 hingga 7. Ini adalah salah satu cara utama Anda dapat memperbesar font dalam HTML.
Sintaks penulisan:
ukuran font: ukuran absolut | ukuran relatif | arti | minat | mewarisi
Anda juga dapat mengatur ukuran font:
- Dalam piksel;
- Secara absolut ( xx-kecil, x-kecil, kecil, sedang, besar);
- Dalam persentase;
- Dalam poin (pt).
Ukuran font:7
Ukuran font: 24 piksel
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 kapital menjadi huruf kapital. 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 mengatur ketebalan teks (saturasi). Sintaksis:
berat font: tebal|lebih tebal|lebih ringan|normal|100|200|300|400|500|600|700|800|900
Nilai:
- tebal – mengatur font html menjadi tebal;
- lebih berani – lebih berani dibandingkan normal;
- lebih ringan – kurang jenuh dibandingkan normal;
- normal – ejaan normal;
- 100-900 – mengatur ketebalan font dalam jumlah yang setara.
berat font: tebal
font-weight:lebih tebal
font-weight: lebih ringan
berat font: normal
berat font:900
berat font:100
Properti font HTML dan warna font
Font adalah properti kontainer lainnya. Di dalamnya, ia menggabungkan nilai beberapa properti yang dimaksudkan untuk mengubah font. sintaks font:
font: ukuran font font-keluarga | mewarisi
Selain itu, nilainya dapat diatur ke font yang digunakan oleh sistem dalam prasasti di berbagai elemen 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: bilah status
font: miring 50px tebal "Times New Roman", Times, serif
Untuk mengatur warna font pada HTML, Anda dapat menggunakan properti warna. Ini memungkinkan Anda untuk mengatur warna menggunakan kata kunci, dan masuk format RGB. Dan juga dalam kode heksadesimal.
Pada artikel ini kita akan berbicara tentang cara menyorot teks huruf miring HTML. Seperti halnya teks tebal, teks miring dapat dibuat dengan tiga cara:
- Menandai Saya HTML;
- Menandai em HTML;
- properti CSS gaya tulisan.
Mari kita lihat ketiga opsi cara membuat huruf miring di HTML, diskusikan seluk-beluk masalah ini dan metode mana yang lebih nyaman dan tepat untuk digunakan dalam situasi tertentu.
Teks miring: tag
Menandai Saya(miring), mirip dengan tag B untuk teks tebal, digunakan untuk penyorotan fisik teks miring(ini berarti hanya gaya teks yang diubah). Menerapkan tag Saya:
Pembuat situs web "Nubex"
Dengan demikian, bagian teks yang diperlukan ditempatkan di antara tag .
Teks miring: tag
Meskipun tagnya Saya tetap valid, dari sudut pandang optimasi situs lebih baik menggunakan tag em untuk menyorot bagian teks yang penting secara logis. Artinya robot pencari memperhitungkan pentingnya teks yang ditempatkan di antara tag :
Pembuat situs web "Nubeks"
Hasil:
Pembuat situs web "Nubeks"
Namun jangan lupa bahwa teks tersebut diapit tag Saya Dan em, meskipun ditampilkan hampir sama (secara keseluruhan browser modern), pada hakikatnya tidak sepenuhnya identik, sebagaimana disebutkan di atas. Oleh karena itu, Anda perlu menggunakan tag sesuai kebutuhan: tag em HTML membingkai bagian penting dari teks, dan huruf miring visual diterapkan menggunakan tag Saya atau gaya CSS. Sekarang mari kita lihat penggunaan gaya CSS untuk membuat teks miring.
Teks miring dengan CSS
Untuk mengatur gaya tampilan font di CSS, gunakan properti gaya tulisan, yang dapat mengambil nilai berikut: miring(teks miring), miring(miring) dan normal(font biasa).
Perlu diingat hal itu miring huruf dan cenderung, pada dasarnya, bukanlah hal yang sama. Huruf miring- ini adalah font khusus yang analog teks tulisan tangan, A cenderung dibentuk dengan memiringkan font biasa ke kanan.
Menerapkan atribut gaya tulisan saat latihan:
Situs kami memang langkah besar dalam pengembangan web.
Kami melakukannya dengan sungguh-sungguh kualitas situs.
Namun perlu Anda ingat bahwa beberapa browser memiliki teks dengan properti gaya font: miring; tidak boleh diartikan sebagai teks miring, melainkan sebagai teks miring.
