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 Google Chrome yang sama, tetapi 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.
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; melainkan 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.
Sekarang kita akan mempelajari tag utama. Mari kita mulai dengan tag apa yang diperlukan pada halaman, membentuk strukturnya.
Memblokir. Struktur halaman sederhana
Halaman situs web adalah file teks biasa dengan ekstensi .html. Teks halaman HTML beserta tag disimpan di dalam file ini. File ini harus memiliki tag berikut: tag , yang harus berisi teks seluruh situs (semua yang ditulis di luar tag ini akan diabaikan oleh browser), dan di dalamnya harus ada dua tag lagi: tag
untuk konten dan tag halaman layanan - untuk teks utama yang terlihat di layar browser.Ke dalam konten layanan, yang terletak di dalam tag
, ada banyak hal berbeda yang disertakan, tetapi untuk saat ini kita hanya memerlukan dua di antaranya. Ini adalah sebuah tandaJuga, sebelum tag konstruksinya biasanya tertulis doctype, yang menunjukkan versi HTML tempat situs tersebut dibuat. Versi bahasa saat ini adalah nomor lima dan doctype-nya akan terlihat seperti ini - .
Jadi mari kita lihat struktur dasar halaman (untuk menjalankan contoh ini di browser, salin ke file teks dengan ekstensi .html dan buka di browser, jika Anda mengalami masalah, tonton video di bawah contoh):
Lihat tautan ini untuk melihat seperti apa contoh ini di browser.
Saya rasa setelah Anda membaca tentang struktur dasar sebuah halaman, Anda masih sedikit bingung tentang seperti apa praktiknya. Oleh karena itu, saya membuat video khusus di mana saya akan menunjukkan kepada Anda cara membuat halaman HTML pertama Anda dan menjalankannya di browser (di dalamnya saya juga akan berbicara tentang judul halaman, tentang pengkodean, tentang desain kode). Tonton dan baru kemudian lanjutkan ke bacaan lebih lanjut:
Nah, sekarang, setelah mempelajari cara membuat halaman paling sederhana, kita akan melanjutkan mempelajari tag berguna yang harus digunakan di dalam tag
. Ini akan menjadi tag untuk paragraf, judul, daftar, tautan, dan hal berguna lainnya. Jadi mari kita mulai.Memblokir. Paragraf
Salah satu elemen utama halaman adalah paragraf. Mereka dapat dibandingkan dengan paragraf dalam sebuah buku - setiap paragraf dimulai pada baris baru dan memiliki apa yang disebut garis merah (ini adalah ketika baris pertama teks paragraf sedikit menjorok ke kanan). Secara default, tidak ada garis merah, tetapi mudah untuk membuatnya (lebih lanjut tentang ini nanti).
Paragraf dibuat menggunakan tag
Dengan demikian:
Ini adalah sebuah paragraf.
Itu satu paragraf lagi.
Dan satu paragraf lagi.
Ini adalah sebuah paragraf.
Itu satu paragraf lagi.
Dan satu paragraf lagi.
Memblokir. Judul h1, h2, h3, h4, h5, h6
Selain paragraf, hal penting pada halaman tersebut adalah header. Mereka juga dapat dibandingkan dengan judul dari sebuah buku - setiap bab memiliki judulnya sendiri (judul bab tersebut) dan dibagi menjadi beberapa paragraf, yang juga memiliki judulnya sendiri. Nah, teks utama halaman itu terletak di paragraf.
Header dibuat menggunakan tag
,
,
,
,
,
. Mereka mempunyai tingkat kepentingan yang berbeda-beda. Dalam judul h1 harus ditempatkan judul seluruh halaman HTML, V h2- Nama blok halaman, masuk h3- nama subblok dan sebagainya.
,
,
,
. Mereka mempunyai tingkat kepentingan yang berbeda-beda. Dalam judul h1 harus ditempatkan judul seluruh halaman HTML, V h2- Nama blok halaman, masuk h3- nama subblok dan sebagainya.
,
. Mereka mempunyai tingkat kepentingan yang berbeda-beda. Dalam judul h1 harus ditempatkan judul seluruh halaman HTML, V h2- Nama blok halaman, masuk h3- nama subblok dan sebagainya.
Semua header dicetak tebal secara default dan memiliki ukuran berbeda (ini dapat diubah melalui CSS, tetapi akan dibahas lebih lanjut nanti). Lihat contoh:
Judul h1
Judul h2
Judul h3
Judul h4
Judul h5
Judul h6
Ini adalah paragraf pertama.
Ini adalah paragraf kedua.
Ini adalah paragraf ketiga.
Beginilah tampilan kode di browser:
Judul h1
Judul h2
Judul h3
Judul h4
Judul h5
Judul h6
Ini adalah paragraf pertama.
Ini adalah paragraf kedua.
Ini adalah paragraf ketiga.
Memblokir. Berlemak
Anda sudah tahu bahwa header secara default berlemak. Namun, Anda dapat membuat teks biasa menjadi tebal - cukup masukkan ke dalam tag . Lihat contoh:
Ini adalah teks normal, dan ini adalah berlemak teks.
Beginilah tampilan kode di browser:
Ini adalah teks normal, dan ini adalah berlemak teks.
harus digunakan di dalam beberapa tag lain, seperti paragraf. Dalam hal ini, paragraf membuat keseluruhan struktur halaman (paragraf dan judul), dan tag B membuat setiap bagian teks menjadi tebal.
Memblokir. Huruf miring
Selain berlemak, Anda juga bisa membuatnya huruf miring menggunakan tag :
Ini adalah teks normal, dan ini adalah miring teks.
Beginilah tampilan kode di browser:
Memblokir. Daftar
Selain paragraf dan judul, ada elemen penting lainnya pada halaman ini - ini daftar. Elemen seperti itu mungkin sudah tidak asing lagi bagi semua pengguna Internet. Mereka mewakili daftar sesuatu (daftar) poin demi poin. Di samping setiap item dalam daftar biasanya terdapat lingkaran berisi (disebut penanda daftar).
Daftar dibuat menggunakan tag
- , yang harus berisi tag
- . Menandai jalan menentukan daftar itu sendiri, dan tag li item daftar harus ditempatkan (yaitu, satu li berhubungan dengan satu penanda daftar). Harap dicatat bahwa tag li tidak dapat digunakan secara terpisah. Lihat contoh:
Ini adalah judul judulnya - Item pertama dalam daftar.
- Item kedua dalam daftar.
- Item ketiga dalam daftar.
Beginilah tampilan kode di browser:
- Item pertama dalam daftar.
- Item kedua dalam daftar.
- Item ketiga dalam daftar.
Daftar dibuat melalui tag jalan, disebut berantakan daftar. Nama ini diberikan kepada mereka karena ada juga dipesan daftar yang memiliki penanda angka, bukan penanda titik. Daftar seperti itu, alih-alih tag ul, memiliki tag
- , dan item dari daftar tersebut juga dibuat melalui tag li.
- Item pertama dalam daftar.
- Item kedua dalam daftar.
- Item ketiga dalam daftar.
- Item pertama dalam daftar.
- Item kedua dalam daftar.
- Item ketiga dalam daftar.
- 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).
- Menandai Saya HTML;
- Menandai em HTML;
- properti CSS gaya tulisan.
Mari kita membuat daftar terurut menggunakan tag o:
Ini adalah judul judulnya
Beginilah tampilan kode di browser:
Kenyamanan daftar yang diurutkan adalah saya dapat memasukkan item daftar baru di mana saja - dan penomorannya akan diatur ulang dengan sendirinya (yaitu, saya tidak perlu melacaknya jika ada perubahan, seperti yang akan terjadi jika saya mengaturnya itu secara manual).
Memblokir. Tautan
Tautan adalah elemen yang membuat Internet menjadi Internet. Dengan mengklik link, kita dapat berpindah dari satu halaman situs ke halaman lainnya. Jika tidak ada, Internet hanyalah kumpulan halaman yang tidak terhubung satu sama lain dengan cara apa pun.
Ini adalah judul judulnya Tautan ke situs phphtml.net.
Beginilah tampilan kode di browser:
Ada tautan mutlak Dan relatif, selain itu, mereka dapat mengarah ke situs Anda dan situs orang lain. Lebih baik menunjukkan momen-momen sulit ini daripada mendeskripsikannya dalam teks, jadi saya membuatkan video berikut untuk Anda. Tonton dan baru kemudian lanjutkan ke bacaan lebih lanjut:
Memblokir. Gambar-gambar
Sekarang mari kita cari tahu bagaimana menempatkannya gambar di halaman situs web Anda. Inilah gunanya tag tersebut memiliki atribut yang diperlukan src, yang menyimpan jalur ke file gambar.
Mari kita lihat cara kerjanya dalam contoh berikut:
Ini adalah judul judulnya
Beginilah tampilan kode di browser:
Harap dicatat bahwa tag tidak memerlukan tag penutup.
Memblokir. Tautan dalam bentuk gambar
Tautan mungkin tidak hanya ada teks, tetapi juga gambar- tag sudah cukup untuk ini masukkan ke dalam tag , seperti yang dilakukan pada contoh berikut. Klik pada gambar dan Anda akan mengikuti link ke situs web phphtml.net (untuk kemudian kembali ke buku, klik tombol “kembali” di browser):
Ini adalah judul judulnya
Beginilah tampilan kode di browser:
Memblokir. Istirahat baris
Ingat apa yang akan terjadi jika, misalnya, Anda membuat dua paragraf berdampingan - dalam hal ini, teks yang ada di masing-masing paragraf akan dimulai dengan baru garis.
Mari kita lihat dengan contoh berikut:
Ini adalah judul judulnya Ini adalah paragraf pertama.
Ini adalah paragraf kedua.
Beginilah tampilan kode di browser:
Ini adalah paragraf pertama.
Ini adalah paragraf kedua.
Namun, ada situasi di mana kita ingin memiliki satu paragraf, namun beberapa teks di dalamnya dimulai pada baris baru. Mengapa hal ini mungkin diperlukan? Misalnya, saya ingin mengetik puisi, tetapi saya tidak ingin membagi setiap baris menjadi paragraf terpisah, karena itu tidak logis.
Untuk melakukan ini, di tempat yang seharusnya ada jeda baris, Anda harus menulis tag
. Perlu diketahui bahwa tag ini bersifat khusus dan tidak memiliki tag penutup.Mari kita lihat cara kerjanya menggunakan contoh berikut:
Ini adalah judul judulnya Ini adalah baris teks pertama,
dan ini yang kedua.
Beginilah tampilan kode di browser:
Ini adalah baris teks pertama,
dan ini yang kedua.Memblokir. komentar HTML
Hampir semua bahasa pemrograman memiliki konsep seperti “komentar”.
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, baris 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 dipilihSaat browser memproses fragmen ini, Anda akan melihat teks berikut: Fragmen yang dipilih. Omong-omong, semua tag tidak ditampilkan di RSS feed().
Hal utama saat menulis tag adalah ingat untuk 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 menyorot sebuah fragmen yang berisi informasi atau kata kunci yang berguna. 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 . Tidak ada perbedaan dalam penampilan. 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 berikut ini source codenya:
Teks dalam tag em Teks dalam tag I
Jadi, tag yang dianggap tebal dan miring sebenarnya tidak ada bedanya, tapi 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 mengelilingi kata kunci dengan tag ini, ini akan memiliki efek menguntungkan pada promosi situs web. Hal utama adalah jangan berlebihan - teks harus mengandung maksimal 5% teks tebal di dalam 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 - ,
Sekarang mari kita lihat beberapa tag yang menggunakan tanda hubung dalam desain teks. Editor teks paling terkenal yang Anda tahu adalah menandai atau garis bawah. Tag ini tidak berdampak pada peringkat (sejauh yang saya tahu), tetapi menyorot beberapa teks dan memfokuskan perhatian padanya akan membantu. Saya memberikan contoh penggunaan tag ini tepat di atas.DanDua 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 nya saja 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:
Seperti inilah tampilan 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
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:
Nomor setelah judul kata sesuai dengan nomor pada tag
. Judul memiliki dampak besar pada pengoptimalan halaman, jadi gabungkan judul tersebut dengan tag kata kunci. Ada beberapa fitur dari kasus ini, yang akan saya bahas di artikel selanjutnya. 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!
Salam kenal teman.
Setelah istirahat panjang lagi, saya teringat bahwa saya sudah lama tidak menulis satu baris pun. Tentu saja ada alasannya, karena selalu ada alasan untuk mengemukakan alasan, bukan? Faktanya, saya melakukan Kursus Video setiap hari, yang telah saya sebutkan beberapa kali, tetapi untuk saat ini saya tidak akan mengatakan apa-apa lagi, Anda akan segera mengetahui semuanya.
Jadi, karena tidak ada yang terlintas dalam pikiran untuk ditulis. Saya memutuskan untuk melihat statistik untuk melihat minat pengguna RuNet mengenai HTML, WordPress, DLE, dan topik serupa. Dan coba tebak? Masih ada sesuatu untuk ditulis. Semua pertanyaan yang saya temukan sepertinya memiliki jawaban, namun tidak selalu dalam bentuk yang dapat dimengerti. Dan secara umum menjadi menarik untuk menulis hal seperti itu.
Hari ini kita akan berbicara tentang HTML. Yaitu, kita akan berbicara tentang cara menyorot teks dalam huruf tebal dan miring, dan kita juga akan berbicara tentang menyorot dengan warna.
Membuat teks menjadi tebal.
Untuk membuat teks tebal, Anda tidak perlu melakukan sesuatu yang mewah dengan gaya CSS atau membuat komplikasi lainnya. HTML sudah memiliki fitur ini. Pada saat yang sama, kita tidak hanya dapat menyorot teks yang dicetak tebal, tetapi juga memberi penekanan pada teks tersebut menggunakan penyorotan. Penekanannya dapat ditempatkan pada mesin pencari atau browser atau program khusus apa pun. Hal utama adalah jangan berlebihan dengan penekanan pada teks dalam artikel atau halaman dengan beberapa informasi, karena ini dapat berdampak buruk, setidaknya pada promosi halaman HTML ini.
Jadi, untuk sekadar membuat teks menjadi tebal, kita bisa menggunakan tag . Tag ini mengacu pada elemen markup fisik, sambil mengatur teks menjadi tebal tanpa memberikan penekanan apa pun padanya. Tag ini merupakan tag berpasangan yang artinya memiliki tag pembuka dan tag penutup. Selain itu, karena elemennya inline, elemen tersebut harus berada di beberapa elemen blok, misalnya
Kode sampel:
gambar kecil
Hasil:
gambar kecil
Dalam hal ini, kami cukup menyorot teks yang dicetak tebal dan selesai.
Tapi itu terjadi, jadi kita tidak hanya perlu menyorot teksnya, tapi fokus padanya. Untuk ini kita dapat menggunakan tag markup logis . Teks yang disorot dengan tag ini tidak hanya memiliki bobot lebih untuk mesin pencari. Namun secara teori seharusnya berbeda dengan tag di browser ucapan, misalnya dengan intonasi. Namun, saya tidak dapat mengkonfirmasi atau menyangkal informasi ini, apakah benar?
Dalam hal ini, semuanya sama persis seperti dalam kasus penyorotan sederhana yang dicetak tebal, hanya saja kita membuat penekanan, dan bukan hanya menyorot.
Kode sampel:
Hasil:
Semuanya cukup sederhana, bukan?
Cetak miring teks.
Dalam hal ini, semuanya tidak lebih rumit dari yang pertama. Dan situasi kita sama saja. Kita dapat menyorot teks dengan dua opsi dalam HTML. Sekali lagi, menggunakan tag markup fisik atau tag logis, yang dengannya kita kembali fokus pada teks yang dipilih.
Untuk membuat teks menjadi miring kita akan menggunakan tag . Elemen ini berpasangan dan sejajar, yang memberitahu kita bahwa kita harus menggunakan tag pembuka dan tag penutup. Mereka juga harus menggunakannya di dalam elemen blok. Dan dalam hal ini, elemen blok yang paling cocok adalah tag paragraf
Kode sampel:
teks dalam huruf miring
Hasil:
teks dalam huruf miring
Dan tentu saja, kita dapat sekaligus menekankan teks dengan menyorotnya dalam huruf miring menggunakan tag . Barang ini sama dengan , hanya saja teksnya dicetak miring dan tidak dicetak tebal.
Kode sampel:
teks yang kami fokuskan
Hasil:
teks yang kami fokuskan
Dan hal terakhir yang ingin saya bicarakan hari ini adalah menyorot teks dengan warna.
Sayangnya, kami tidak memiliki tag untuk menyorot teks dengan warna dalam HTML. Tapi tetap saja, tidak ada yang rumit dalam cara ini.
Jadi, untuk menyorot bagian teks tertentu dengan warna, kita bisa membungkus bagian teks yang diinginkan dengan tag , yang merupakan tag umum dan digunakan di dalam elemen blok. Dalam kasus kami, elemen blok adalah tag
Tapi tambahkan tidak cukup. Anda juga perlu menentukan parameter gaya, yang memungkinkan Anda menambahkan properti CSS ke teks yang diperlukan, dan menentukan properti itu sendiri (warna), yang akan membantu Anda mengatur warna tertentu. Terakhir, berikan nilai untuk properti warna. Namun mungkin timbul pertanyaan: “Apa yang harus saya tunjukkan?” Anda perlu menentukan kode HTML warna yang ingin kita "lukiskan" teksnya. Kode warna HTML dapat ditemukan.
Nah biar lebih jelas mari kita lihat contohnya.
Kode contoh.
teks untuk disorot warna
Dalam hal ini, kami menyorot satu kata: dengan warna. Saya juga ingin mencatat tag itu dipasangkan dan kita harus menutupnya di tempat properti harus berakhir.
Hasil:
teks yang akan disorot
Dengan cara sederhana ini kita dapat memanipulasi teks di halaman kita. Saya juga ingin mencatat bahwa semua yang baru saja kita bicarakan berfungsi di WordPress dan DLE, karena mesin apa pun menggunakan HTML untuk menampilkan halaman. Itulah sebabnya HTML dapat disebut sebagai dasar situs web mana pun, apa pun CMS yang Anda miliki.
Saya harap saya menjelaskan semuanya dengan jelas.
Semoga berhasil, Teman. Sebentar lagi... Akan ada kabar menarik...
Pada artikel ini kita akan berbicara tentang cara menyorot teks huruf miring HTML. Seperti halnya teks tebal, teks miring dapat dibuat dengan tiga cara:
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, berfungsi untuk menyorot teks miring secara fisik (artinya hanya gaya teks saja 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 (di semua browser modern), pada dasarnya keduanya tidak sepenuhnya identik, seperti 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 adalah font khusus yang dianalogikan dengan teks tulisan tangan, dan cenderung dibentuk dengan memiringkan font biasa ke kanan.
Menerapkan atribut gaya tulisan saat latihan:
Miring dengan CSS - "Nubex" Situs kami sungguh 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.