Saya rasa semua orang memahami hal ini, tidak sulit. Selanjutnya
Jenis huruf (type) dan warna font

Ada dua cara di sini. Yang kedua akan dijelaskan nanti. Pertama - tag digunakan

Dengan atribut menghadapi Dan warna, masing-masing:

Fonta Verdana

Fonta Verdana

huruf merah

huruf merah

Font warna MidnightBlue

Font warna MidnightBlue

Font warna MidnightBlue

Font warna MidnightBlue

Suatu warna memiliki nama dan nilai numerik, seperti yang terlihat pada contoh ini
(Biru Tengah Malam=#191970). Anda bisa menulis banyak tentang bunga, tapi saya
Saya akan fokus pada satu tautan:

Pemilihan warna. Warna yang aman untuk web dan cerdas web cocok untuk digunakan.

Memformat Teks: Menggunakan Tag dan atribut gaya (1)

Menandai mengacu pada sepotong teks yang dipilih (diformat):
teks. Izinkan saya segera mencatat atributnya
(properti) bekerja dengan tag , juga dapat digunakan dengan
tag

DAN

. Namun, tagnya

Berlaku untuk
paragraf, yang tidak selalu cocok untuk kita (walaupun saat memformat paragraf
rasional untuk menggunakannya). Menandai

dapat digunakan
sama seperti - ini lebih soal selera. Dia memiliki lebih banyak
berbagai macam aplikasi dan memiliki sejumlah fitur tambahan.
Namun hal ini tidak lagi berlaku untuk pemformatan teks. Oleh karena itu untuk
mari fokus pada kepastian .

Catatan
Teks itu sendiri tidak memiliki makna apa pun.
Menandai dimaksudkan untuk dikaitkan dengan teks
properti apa pun. Inilah yang sekarang akan saya coba daftarkan
dalam urutan yang kurang lebih logis.

Warna huruf

Warna font dapat diatur menggunakan tag , seperti yang dibahas di atas. Sekarang mari kita gunakan tagnya dan atribut gaya:

huruf merah - huruf merah

Dengan cara yang sama, Anda dapat mengatur nilai warna digital (untuk lebih jelasnya lihat di atas.

Jenis huruf (tipe) font

Tentang cara mengatur jenis huruf (type) suatu font dengan menggunakan tag Hal ini juga telah dibahas terakhir kali.

Sekarang mari kita lihat metode kedua - menggunakan konstruksi

font

Di tempat ***
perlu mengganti jenis huruf (type) font tersebut. Sebagai aturan, mereka menggantikannya
namanya bukan font tertentu, tetapi seluruh jenis font, misalnya, Verdana, Waktu dll. Kita mendapatkan:

Font Verdana Font Times

Ukuran huruf

Untuk menentukan ukuran font, konstruksi digunakan

font

Ukuran
font dapat ditentukan dalam berbagai cara. Mungkin yang paling jelas dan
sederhana - gantikan salah satu dari tujuh nilai berikut alih-alih ***:

xx-besar, x-besar, besar, sedang, kecil, x-kecil, xx-kecil.

Hasil:

font yang sangat sangat besar
huruf yang sangat besar
huruf besar
huruf sedang
huruf kecil
huruf yang sangat kecil
font yang sangat sangat kecil

Anda dapat menentukan ukuran font dengan cara yang familiar dari Word - dalam poin (pt). 1 poin sama dengan 1⁄72 inci. Contoh:

12pt

36pt

Nilai 12pt, 36pt dalam contoh ini diganti dengan *** in rumus umum font . Anda juga dapat menggunakan piksel:

font 12 piksel
font 36 piksel

Dimensi di atas adalah mutlak. Namun ukuran font juga dapat diatur secara relatif - sebagai persentase:
ukuran font 150% dari aslinya

ukuran font 150% dari aslinya

atau sehubungan dengan lebar huruf "m" pada font aslinya (disebut satuan pengukuran yang sesuai em):
ukuran font 1,5em dari aslinya

ukuran font 1,5em dari aslinya

Berat font (saturasi)

Ini adalah sesuatu yang dapat ditentukan dengan menggunakan tag sederhana
teks tebal

teks tebal

Dengan menggunakan itu dilakukan seperti ini: huruf tebal

tipe tebal

Keuntungan dari metode ini adalah, beserta nilai bobot font berani nilai juga dapat digunakan lebih berani dan ringan, mendapatkan font dengan "bobot berbeda" (in dalam hal ini kita berbicara tentang nilai relatif). Dan nilai defaultnya adalah normal- font biasa.

Gaya font

Huruf miring dapat diperoleh dengan menggunakan tag , dan dengan cara berikut:
huruf miring

huruf miring

Alih-alih gaya font: miring kamu bisa menulis gaya font: miring, dan hasilnya tidak boleh miring, melainkan font miring (“sudut”). Tapi ini tidak selalu berhasil.

Modal

Menyajikan informasi melalui gagasan modern tentang hiperteks pada dasarnya tidak masuk akal, tetapi begitulah adanya dan cara kerjanya. Anda tidak dapat membantah hal ini dan Anda harus memperhitungkannya.

Dari sudut pandang bahasa modern pemrograman, tidak peduli bagaimana data direpresentasikan: tipe ketat dan wajib deskripsi awal atau tidak ada tipe dan deskripsi yang diperlukan bahasa akan “memikirkannya” sendiri saat algoritma dijalankan.

Penting untuk diperhatikan: apa pun yang tidak “dipahami” oleh browser, JavaScript, atau bahasa sisi server tidak akan dieksekusi. Tag blok dalam keadaan saat ini dapat “berubah” menjadi tag sebaris, tetapi tag huruf kecil tidak dapat berubah menjadi tag blok.

Logika halaman HTML

Contoh sejarah adalah tag font HTML. Sudah “tidak disarankan” untuk digunakan selama beberapa waktu. Motivasi “tidak disarankan” merupakan ciri khasnya pemrograman modern. Kurangnya kompatibilitas kode “ke atas” di seluruh versi dan tidak ada stabilitas dalam pengembangan versi secara berurutan komponen perangkat lunak dan konsep juga.

Memang, tag span dalam HTML jauh lebih praktis: tidak hanya merujuk pada font saja. Span dapat mengubah banyak atribut tampilan dan penggunaan konten tertentu.

String selalu menjadi representasi utama untuk data apa pun, tetapi bahasa pemrograman tidak selalu mendefinisikannya dalam sintaksis, dan pemrogram telah menyadari bahwa angka atau nilai Boolean yang digunakan selalu berupa string.

Absurditas dan objektivitas hypertext di Implementasi HTML: layout adalah penggunaan sekumpulan tag (berpasangan atau tunggal) untuk mendeskripsikan konten (data) secara formal. Baik deskripsi maupun isinya tidak dapat digambarkan sebagai informasi. Yang pertama adalah kerangka tertentu di mana beberapa konten - data - cocok.

Rangkanya dibuat dari batu bata (tag) yang dipasang secara kaku, yang ditempatkan secara ketat tempat-tempat tertentu dalam desain, dan elemen relatif yang disusun “saat kartu jatuh”.

Anda dapat membagi halaman menjadi beberapa bagian untuk menampilkan data menggunakan tabel atau elemen blok, dan Anda dapat “mengisi” struktur yang dihasilkan dengan data dengan tag lain. Mereka biasanya disebut huruf kecil, yaitu diposisikan sedemikian rupa sehingga menentukan peluang saat ini dan konten saat ini.

Contoh span HTML: apa itu dan bagaimana mendeskripsikannya

Kotak hijau menunjukkan contoh kode yang ditampilkan browser latar belakang abu-abu. kotak-kotak elemen div berakhir di tengah teks yang mengikutinya dalam kode. Elemen pertama adalah tag dengan kelas scSpanLine. Kemudian teks tersebut ditempatkan di mana dua bagian teks ini disorot menggunakan tag span dengan kelas scSimpleSpan.

Elemen baris kedua dan ketiga diposisikan persis seperti yang tertulis dalam kode.

Contoh ini menunjukkan cara kerja span dalam HTML. Jelas sekali bahwa ini hanyalah rangkaian data. Ada hal lain yang tidak jelas: pengembang dapat menjelaskannya tanda ini apa pun yang Anda suka, Anda bahkan dapat menerapkan aturan:

• POSISI: mutlak;

Tidak akan ada efeknya. Menentukan koordinat dan dimensi juga tidak memainkan peran apa pun. Memusatkan atau menyelaraskan rentang dalam HTML adalah sia-sia. Sedangkan tagnya sangat praktis dan laris dalam praktiknya. Ini adalah pembungkus yang sangat nyaman untuk highlight momen penting dalam aliran data umum.

Yang utama adalah memahami bahwa span HTML adalah cara untuk mengubah tampilan suatu garis atau memperjelas aturan untuk menampilkan bagian dari suatu garis.

Logika untuk menyediakan informasi garis

Menggunakan bahasa deskripsi data HTML untuk tujuan yang dimaksudkan, yaitu untuk mendeskripsikan data, sudah ketinggalan zaman. Menggunakan bahasa sisi server untuk membentuk badan halaman adalah hal yang modern dan “semua” pengembang melakukannya. Sistem manajemen konten (CMS) sangat tertarik pada hal ini.

Praktik nyata dan kebutuhan untuk membuat situs web aktif adalah pengelolaan dinamis bingkai halaman dan kontennya. Dalam pengertian ini, tag span dalam HTML (yang bersifat dinamis), sebagai hasilnya JavaScript berfungsi, memungkinkan Anda membuat konten dinamis dengan cepat.

JavaScript berfungsi sebagai pengubah dari teks sumber ke teks berformat dan penggantinya tag yang diperlukan dengan yang diperlukan aturan CSS ke dalam aliran keluar, yang didistribusikan ke seluruh frame elemen blok halaman.

Semakin tinggi profesionalisme pengembang, semakin banyak blok (atau tabel) tata letak halaman dan semakin sedikit keberadaan tag rentang statis dalam HTML. Apa manfaatnya? Dinamika. JavaScript adalah algoritme yang dapat mengerjakan aliran string yang masuk dan merendernya sesuai keinginan pengembang. Tag span akan muncul di di tempat yang tepat dan pada waktu yang tepat.

Elemen dari bab sebelumnya ditampilkan secara berurutan pada satu garis horizontal. Mereka berperilaku seperti teks biasa dan hanya muncul bersebelahan, meskipun memang demikian ukuran tertentu dan properti lain yang tidak berhubungan dengan teks. Hal ini seharusnya tidak mengherankan , Dan - elemen yang termasuk dalam satu grup yang disebut inline-block. Elemen seperti itu mungkin ada <a href="https://danykom.ru/id/kak-izmenit-razmer-fotografii-na-kompyutere-onlain/">ukuran yang berbeda</a>, namun browser selalu menampilkannya secara horizontal seperti teks. Dalam bab ini kita akan belajar tentang <a href="https://danykom.ru/id/pereimenovat-rasshirenie-gruppy-failov-razlichnye-parametry-v-imenah/">berbagai kelompok</a> elemen sesuai dengan tata letaknya pada halaman.</p><p>Pertama, mari kita lihat cara menampilkan satu elemen secara vertikal di bawah elemen lainnya. Pada dasarnya kita harus memberi tahu browser, "Hei, kami ingin sebuah container yang dapat ditumpuk secara vertikal." Untungnya, tag penampung ini dikenal sebagai <div>dan ini adalah semacam "membungkus" konten ke baris baru (seperti hentian halaman atau hentian baris di editor teks).</p><p>Untuk melihat cara kerja elemen <div>Mari gunakan ketiganya dan atur lebar, tinggi, dan latar belakangnya.</p><p>Sesuai dengan kondisi di atas maka HTML-nya akan terlihat seperti ini.</p><p> <div class="container"></div> <div class="container"></div> <div class="container"></div> </p><p>Di CSS kita menulis kelas .container yang dikaitkan dengan sebuah tag <div> .</p><p>Wadah ( lebar: 200 piksel; tinggi: 200 piksel; warna latar: biru; )</p><p>Mari kita lihat ini di browser.</p><p>Itu tampak seperti satu persegi panjang besar. Bagaimana kalau memisahkan tagnya? <div>dari satu sama lain?</p><p>Wadah ( lebar: 200 piksel; tinggi: 200 piksel; warna latar: biru; margin-bawah: 10 piksel; )</p><p>Besar! Browser menampilkan “blok” ini satu di bawah yang lain, tidak seperti contoh formulir kita sebelumnya, di mana elemen ditampilkan dalam satu baris.</p><p>Apa bedanya? Saat menampilkan tag, browser mengenali tiga kelompok elemen:</p><ul><li>sebaris (huruf kecil);</li><li>blok (blok);</li><li>blok sebaris (blok baris).</li> </ul><p>Elemen sebaris tidak menyebabkan baris baru dan menampilkan satu elemen bersebelahan secara horizontal. Elemen blok diatur sebagai blok yang bertumpuk satu sama lain dan tidak pernah muncul berdampingan secara horizontal kecuali kita menggunakan trik sulap CSS (yang akan kita pelajari di bab berikutnya). Elemen blok sebaris bertindak seperti elemen sebaris (ditampilkan bersebelahan), tetapi berbeda satu sama lain karena ukurannya dapat disesuaikan. Misalnya saja lapangan <textarea>mungkin tampak sebagai persegi panjang besar, namun masih memakan ruang lebih dari satu baris teks.</p><ul><li>Huruf kecil - , <span><em> , <strong> </li><li>Memblokir - <div> , <p> , <article> </li><li>Blok garis - <input> , <textarea> </li> </ul><p>Secara default, elemen sebaris memiliki gaya <a href="https://danykom.ru/id/chto-znachit-display-block-v-css-svoistvo-css-display-block-inline-none-sposoby/">properti tampilan</a> diatur ke sebaris. Untuk elemen blok nilainya adalah block , dan untuk elemen blok inline inline-block . Sekarang Anda dapat menjelaskan mengapa tag tersebut <span>tidak membungkus teks ke baris baru. Karena itu <a href="https://danykom.ru/id/otstupy-mezhdu-blokami-div-doloi-otstupy-mezhdu-strochnymi-elementami-i/">elemen sebaris</a>, yang berarti dalam CSS properti tampilannya disetel ke inline . Dengan mengingat hal ini, kodenya di bawah ini:</p><p>Satu dua tiga</p><p>Browser akan menampilkan dalam satu baris:</p><p>satu dua tiga</p><p>Namun, Anda dapat mengubah perilaku ini dengan menambahkan satu baris CSS:</p><p>Rentang ( tampilan: blok; )</p><p>Sekarang tag kita <span>ditampilkan secara berbeda, masing-masing dimulai dengan <a href="https://danykom.ru/id/kak-dobavit-itogovuyu-stroku-v-excel-dobavlenie-novoi-stroki-v-programme/">baris baru</a> karena kami menyetel properti tampilan ke block .</p><p>Untuk contoh ini kami menggunakan <div>. Anda mungkin bertanya-tanya apa yang dijelaskan tag ini dalam dokumen. Jawaban singkatnya: tidak ada. Kami menggunakan tagnya <div>dalam kasus di mana semua tag lainnya tidak sesuai untuk menggunakan apa yang telah kami masukkan ke dalam dokumen. Secara umum, tag <div>(dalam kombinasi dengan <a href="https://danykom.ru/id/zarabotat-1000-rublei-za-chas-v-internete-bolshim-sprosom-polzuyutsya/">kelas yang berbeda</a>) digunakan untuk mendapatkan berbagai <a href="https://danykom.ru/id/kogda-nuzhno-menyat-batareyu-na-aifone-5s-doloi-vizualnye/">efek visual</a>, akibatnya, tidak memiliki fungsi untuk mendeskripsikan konten. Misalnya, jika Anda ingin memiliki tiga kolom vertikal di situs Anda, Anda mungkin memerlukan elemen yang dapat memisahkan beberapa elemen sebaris atau blok sebaris.</p><p>Secara umum, sebaiknya jangan menggunakan tag secara berlebihan <div>, jika memungkinkan.</p><p>Dengan pengetahuan baru kita tentang blok, mari kita kerjakan ulang kode formulir kita sehingga bidang formulir dan deskripsinya muncul dengan baik di bawah satu sama lain.</p><p> <form> <div> <label for="nickname">Nama Anda:</label> </div> <div> <input type="text" id="nickname" name="nickname"> </div> <div> <label for="user-email">Email Anda:</label> </div> <div> <input type="email" id="user-email" name="user-email"> </div> <div> <label for="content">Isi:</label> </div> <div> <textarea rows="10" cols="50" id="content" name="content">

Kelihatannya sedikit lebih rumit, tapi satu-satunya hal yang kami lakukan adalah menambahkan tag

untuk mengelilingi setiap elemen bentuk.

Sekali lagi, mari kita bandingkan kode baru (kanan) dan kode lama (kiri).

Sekarang mari kita lihat caranya kode baru ditampilkan di browser!