Modifikasi terperinci dari berbagai format font halaman web HTML

Penulis：Eve Cole Waktu Pembaruan：2025-06-07 00:48:02

Bagian ini dimulai dengan modifikasi rinci teks, memungkinkan pembaca untuk memahami perubahan dalam berbagai format font HTML dan membuat halaman web yang lebih profesional.

4.2 Modifikasi Teks yang Diversifikasi

Pada bagian sebelumnya, saya mempelajari berbagai pengaturan paragraf besar, yang tampaknya lebih menarik bagi teks itu sendiri. Bagian ini dimulai dengan modifikasi rinci teks, memungkinkan pembaca untuk memahami perubahan dalam berbagai format font HTML dan membuat halaman web yang lebih profesional.

4.2.1 Label Dasar untuk Pengaturan Gaya Teks— 

Tag dasar untuk mengatur gaya font adalah , dan teks yang terkandung di dalamnya adalah area aksi gaya. Dalam penulisan kode HTML untuk pemula, mudah bersarang oleh beberapa sumber, seperti <atribut font 2 = nilai 2> teks . Situasi lain adalah label misalignment bersarang, seperti teks . Untuk menstandarkan penulisan kode dan menghindari kesalahan yang tidak perlu, pembaca harus berhati -hati saat belajar.

4.2.2 Atur warna teks

Warna adalah salah satu atribut dari tag , yang digunakan untuk mengatur warna teks. Buat file halaman web di d:/ web/ direktori, bernama font_color.htm, dan tulis kode seperti yang ditunjukkan pada kode 4.7.

Kode 4.7 Pengaturan Warna Font: font_color.htm

<Html>

<head>

<title> Pengaturan Warna Font </iteme>

</head>

<body>

Teks merah muda: esensi pembelajaran html adalah menggunakan apa pun yang seharusnya <r />

Teks Crimson: esensi pembelajaran html adalah menggunakan apa pun yang seharusnya <r />

Teks hijau muda: esensi pembelajaran html adalah menggunakan apa pun yang seharusnya <r />

Teks Hijau Gelap: Esensi pembelajaran HTML adalah menggunakan apa pun yang seharusnya <r />

Teks biru muda: esensi pembelajaran html adalah menggunakan apa pun yang seharusnya <r />

Teks biru tua: esensi pembelajaran html adalah menggunakan apa pun yang seharusnya <r />

Teks kuning muda: esensi pembelajaran html adalah menggunakan apa pun yang seharusnya <r />

Teks kuning gelap: esensi pembelajaran html adalah menggunakan apa pun yang seharusnya <r />

Teks cyan ringan: esensi pembelajaran html adalah menggunakan apa pun yang seharusnya <r />

Teks biru gelap: esensi pembelajaran html adalah menggunakan apa pun yang seharusnya <r />

Teks ungu muda: esensi pembelajaran html adalah menggunakan apa pun yang seharusnya

Teks ungu tua: esensi pembelajaran html adalah menggunakan apa pun yang seharusnya

</body>

</html>

Masukkan http: //localhost/font_color.htm di bilah alamat browser, dan efek penelusuran ditunjukkan pada Gambar 4.7.

Gambar 4.7 Pengaturan Warna Font

Pembaca tidak hanya dapat mempelajari bagaimana atribut warna digunakan dalam tag font dari kode 4.7, tetapi juga terbiasa dengan metode representasi dari berbagai warna.

4.2.3 Atur ukuran teks

Ukuran juga merupakan properti dari tag , yang digunakan untuk mengatur ukuran teks. Nilai ukuran adalah 1-7, dan standarnya adalah 3. Kita dapat menambahkan + dan - karakter sebelum nilai atribut ukuran untuk menentukan kenaikan atau penurunan relatif terhadap nilai awal ukuran font. Buat file halaman web di d:/ web/ direktori, bernama font_size.htm, dan tulis kode seperti yang ditunjukkan pada kode 4.8.

Kode 4.8 Pengaturan Ukuran Font: font_size.htm

<Html>

<head>

<title> Pengaturan ukuran font </iteme>

</head>

<body>

Ukuran 1: html learning <r />

Ukuran adalah 2: html learning <r />

Ukuran adalah 3: html learning <r />

Ukuran adalah 4: html learning <r />

Ukuran adalah 5: html learning <r />

Ukuran adalah 6: html learning <r />

Ukuran adalah 7: html learning <r />

</body>

</html>

Masukkan http: //localhost/font_size.htm di bilah alamat browser, dan efek penelusuran ditunjukkan pada Gambar 4.8.

Gambar 4.8 Pengaturan Ukuran Font

Pembaca dapat mencoba menambahkan + dan - karakter sebelum nilai ukuran untuk mengatur ukuran teks lebih fleksibel.

4.2.4 Atur font teks

Wajah juga merupakan properti dari tag , yang digunakan untuk mengatur font teks (font). Font yang ditampilkan di halaman web HTML dipanggil dari sistem penelusuran, jadi untuk menjaga font konsisten, disarankan untuk menggunakan font lagu, dan halaman HTML juga menggunakan font lagu secara default. Buat file halaman web di d:/ web/ direktori, bernama font_face.htm, dan tulis kode seperti yang ditunjukkan pada kode 4.9.

Kode 4.9 Pengaturan Font Font: font_face.htm

<Html>

<head>

<Title> Pengaturan Font Font </iteme>

</head>

<body>

Font IS Song Font: qinyUanchun · Changsha-mao Zedong <r />

Font ada di Kaishi: qinyUanchun · changsha-mao zedong <r />

Font tebal: qinyUanchun · changsha-mao zedong <r />

Font adalah lishu: qinyuanchun · changsha-mao zedong

</body>

</html>

Masukkan http: //localhost/font_face.htm di bilah alamat browser, dan efek penelusuran ditunjukkan pada Gambar 4.9.

Gambar 4.9 Pengaturan Font

Penulis menetapkan ukuran teks dari font yang dimodifikasi ke No. 5 untuk dilihat pembaca.

4.2.5 Buat teks miring

Menggunakan tag ganda dapat memiringkan teks yang akan diterapkan, mencapai efek khusus, seperti tanggal artikel. disebut tag penekanan, dan dicetak miring. Saat ini digunakan lebih sering daripada tag . Metode penulisan adalah sebagai berikut:

Ini teks miring

ini juga miring

4.2.6 membuat teks berani

Menggunakan tag ganda dapat membuat teks yang diterapkan tebal, membuat teks lebih menarik, seperti bagian judul artikel. disebut penekanan khusus pada label, dan juga berani dalam teks. Saat ini digunakan lebih sering daripada tag . Metode penulisan adalah sebagai berikut:

Ini adalah teks tebal

ini juga teks tebal

4.2.7 Garis bawahi teks

Gunakan tag ganda untuk menambahkan garis bawah ke teks yang diterapkan. Berikut ini adalah contoh komprehensif dari kemiringan teks, tebal dan digarisbawahi. Buat file halaman web di d:/ web/ direktori, bernama font_style.htm, dan tulis kode seperti yang ditunjukkan pada kode 4.10.

Kode 4.10 Pengaturan Modifikasi Teks: font_style.htm

<Html>

<head>

<Title> Pengaturan Modifikasi Font </iteme>

</head>

<body>

huruf miring: qinyuanchun · changsha-mao zedong

Bolded: qinyuaranchun · changsha-mao zedong

Garis bawah: qinyuanchun · Changsha-mao Zedong

ITALIC BOLD Underline: qinyuanchun · changsha-mao zedong

</body>

</html>

Masukkan http: //localhost/font_style.htm di bilah alamat browser, dan efek penelusuran ditunjukkan pada Gambar 4.10.

Gambar 4.10 Pengaturan Modifikasi Font

Penulis menetapkan semua ukuran teks di <body> </body> ke No. 5 untuk dilihat pembaca.

- Catatan: Ketika banyak tag berisi teks yang sama, urutan inklusi mereka tidak dapat disejajarkan.

4.2.8 Penggunaan beberapa gaya judul

Dalam artikel web, untuk menyoroti pentingnya judul, gaya judulnya relatif istimewa. Teknologi HTML melindungi serangkaian tag gaya untuk judul, yaitu tag ganda <h1> hingga <h6>, dan ukuran teks mewakili berbagai tingkat judul dari besar hingga kecil. Tag judul memiliki fitur, yang eksklusif untuk satu baris, tebal dalam teks, dan tengah dalam teks. Dengan cara ini, mudah untuk mengatur judul dan dapat mengatur judul multi-level. Buat file halaman web di d:/ web/ direktori, bernama font_h.htm, dan tulis kode seperti yang ditunjukkan pada kode 4.11.

Kode 4.11 Pengaturan Judul: font_h.htm

<Html>

<head>

<Title> Pengaturan Judul </iteme>

</head>

<body>

<h1> Judul No. 1 </h1>

<h2> Judul No. 2 </h2>

<h3> Judul No. 3 </h3>

<h4> Judul No. 4 </h4>

<h5> Judul No. 5 </h5>

<h6> Judul No. 6 </h6>

<H1> majalah Fortune: Mengapa Google tidak jatuh setelah kemakmurannya? </h1>

<h3> Menghadapi masalah potensial </h3>

& nbsp; & nbsp; & nbsp; & nbsp; Beberapa orang dalam industri percaya bahwa Google dapat menurun setelah monopoli jangka panjang di pasar pencarian dan iklan Internet. ... Pada saat yang sama, rencana baru Google baru -baru ini, seperti Open Mobile Alliance, platform universal situs web jejaring sosial OpenSocial, dan kemungkinan investasi miliaran dolar dalam penawaran untuk pita frekuensi nirkabel, juga telah dipertanyakan secara luas.

<h3> akan terus memonopoli pencarian </h3>

& nbsp; & nbsp; & nbsp; & nbsp; Artikel terbaru mengatakan bahwa jika mesin pencari yang lebih baik muncul, orang akan menyerah di Google tanpa ragu -ragu. Tetapi bahkan jika ada mesin pencari yang benar -benar lebih baik, Google masih bisa berdiri teguh untuk sementara waktu. ... Dalam hal ini, kecepatan situs web sering menjadi kunci hasil.

</body>

</html>

Masukkan http: //localhost/font_h.htm di bilah alamat browser, dan efek penelusuran ditunjukkan pada Gambar 4.11.

Gambar 4.11 Pengaturan Judul

4.2.9 Belajar menangani karakter khusus di halaman web

Dalam HTML, beberapa karakter memiliki makna khusus, seperti <dan> adalah kurung kiri dan dekat tag, sedangkan tag mengontrol tampilan HTML. Tag itu sendiri hanya dapat diuraikan oleh browser dan tidak dapat ditampilkan pada halaman. Jadi, bagaimana cara menampilkan <ngt> di html? HTML menentukan cara untuk menulis beberapa karakter khusus yang akan ditampilkan di halaman web, seperti yang ditunjukkan pada Tabel 4.1.

Tabel 4.1 Karakter Khusus dalam HTML

Simbol Khusus

Kode HTML

Simbol Khusus

Kode HTML

& lt;

™ (simbol merek dagang)

&berdagang;

& gt;

® (Simbol Daftar)

& Reg;

(Setengah lebar dalam bahasa Inggris)

& quot;

& waktu;

&sekte;

&menyalin;

Buat file halaman web di d:/ web/ direktori, bernama string.htm, dan tulis kode string.htm seperti yang ditunjukkan pada kode 4.12.

Kode 4.12 Pengaturan Karakter Khusus: String.htm

<Html>

<head>

<title> Pengaturan Karakter Khusus </iteme>

</head>

<body>

Cara menampilkan tag: & lt; html & gt;

Cara Menampilkan Kutipan: "Kutipan Double Setengah Bahasa Inggris"

Metode Tampilan Merek Dagang: & Perdagangan;

Cara menampilkan simbol pendaftaran: & reg;

Cara Menampilkan Simbol Hak Cipta: & Salin;

Show & sect;

Tampilkan & Waktu;

</body>

</html>

Masukkan http: //localhost/string.htm di bilah alamat browser, dan efek penelusuran ditunjukkan pada Gambar 4.12.

Gambar 4.12 Pengaturan karakter khusus

- Deskripsi: Simbol harus ditampilkan secara terpisah & harus digunakan dengan kode & amp;.

4.2.10 Bagaimana cara mengabaikan browser yang lebih nyaman dari beberapa html

Jika Anda membuat contoh kode HTML yang mirip dengan buku ini di halaman web, Anda mungkin harus mengonversi semua <dan> menjadi & lt; Dan itu akan tampak lebih merepotkan. <Plaintext> dan <xmp> </xmp> dalam kode HTML dapat dengan mudah menyelesaikan masalah ini.

<Plaintext> adalah tag tunggal. Ketika dimasukkan ke dalam kode HTML, semua tag HTML setelah tidak valid. Artinya, browser tidak mengurai semua tag HTML setelah <Plaintext> dan menampilkannya langsung di halaman.

<xmp> </xmp> adalah tag ganda, yang hanya membatalkan tag dalam konten yang dikandungnya, dan penggunaan <xmp> </xmp> lebih umum. Buat file halaman web di d:/ web/ direktori, bernama html.htm, dan tulis kode seperti yang ditunjukkan pada kode 4.13.

Kode 4.13 Abaikan Pengaturan Tag: html.htm

<Html>

<head>

<title> abaikan pengaturan tag </iteme>

</head>

<body>

<H2> qinyUanchun · Changsha </h2>

<xmp> independen dari musim gugur yang dingin, pergi ke utara Sungai Xiangjiang , kepala Pulau Orange. Lihatlah Pegunungan Merah dan hutan dicelup; Sungai itu hijau dan jernih, dan ratusan kapal bersaing untuk arus. </xmp>

Elang menyerang langit, berenang ikan di dasar yang dangkal, dan semua jenis spesies bersaing untuk kebebasan di langit es. Ketika saya sedih tentang tanah yang luas, siapa yang bertanggung jawab atas pasang surut?

Saya membawa ratusan pasangan untuk bepergian, dan saya ingat masa lalu yang mulia. teman sekelasnya masih muda, di masa jayanya; Cendekiawan penuh dengan antusiasme dan keberanian. Beri tahu negara itu dan menginspirasi kata -kata, pupuk kotoran adalah sepuluh ribu rumah tangga saat itu. Pernahkah Anda ingat bahwa ketika Anda menabrak air di tengah, ombak akan berhenti terbang dengan perahu!

</body>

</html>

Masukkan http: //localhost/string.htm di bilah alamat browser, dan efek penelusuran ditunjukkan pada Gambar 4.13.

Gambar 4.13 Abaikan pengaturan tag

4.2.11 Metode modifikasi teks lainnya

Untuk memenuhi kebutuhan berbagai bidang, HTML memiliki tag lain yang memodifikasi teks. Yang paling umum digunakan adalah label format superscript dan label format subskrip. Dalam beberapa kasus, Anda bahkan perlu menggunakan efek penghapusan, dan Anda dapat menggunakan tag HTML Mid-Roce.

- Tag format superscript adalah tag ganda , yang sebagian besar digunakan untuk mewakili eksponen matematika, seperti meter kuadrat atau kubik dari angka tertentu.

- Label format subskrip adalah label ganda , yang sebagian besar digunakan untuk anotasi dan representasi dasar matematika.

-Label mid-score adalah label ganda <sembut> </pringing>, yang sebagian besar digunakan untuk efek penghapusan.

Buat file halaman web di D:/ Web/ Direktori, bernama Other.htm, dan tulis kode seperti yang ditunjukkan pada kode 4.14.

Kode 4.14 Pengaturan Tag Modifikasi Lainnya: Other.htm

<Html>

<head>

<iteme> Pengaturan lain untuk memodifikasi tag </iteme>

</head>

<body>

QinyUanchun Changsha !

Representasi indeks matematika: 2 3 = 8, 100 2 = 10000 <hr />

QinyUanchun Changsha !

Representasi Nomor Dasar Matematika: Log 3 81 = 4, log 5 125 = 3 <hr />

Efek Penghapusan: <sendang> Saya dihapus </sgring>

</body>

</html>

Masukkan http: //localhost/other.htm di bilah alamat browser, dan efek penelusuran ditunjukkan pada Gambar 4.14.

Gambar 4.14 Pengaturan tag modifikasi lainnya