Sekarang kita akan menangani studi tentang tag utama. Mari kita mulai dengan tag apa yang wajib di halaman yang membentuk strukturnya.
Blok. Struktur halaman paling sederhana
Halaman Situs - Ini adalah file teks biasa dengan ekstensi .html.. Di dalam file ini dan menyimpan halaman teks HTML bersama dengan tag. File ini harus memiliki tag berikut: TAG yang harus berisi teks seluruh situs (semua yang ditulis di luar tag ini, browser akan diabaikan), dan harus ada dua tag di dalamnya: TAG
Untuk konten dan tag layanan - Untuk teks dasar, yang terlihat pada layar browser.Dalam konten layanan, yang terletak di dalam tag
, Ada banyak hal yang berbeda, tetapi sementara kita hanya membutuhkan dua dari mereka. Ini tagSeperti apa contoh ini di browser, lihat tautan ini.
Saya pikir setelah Anda membaca tentang struktur halaman dasar, Anda masih memiliki beberapa kesalahpahaman, karena semuanya terlihat dalam praktik. Oleh karena itu, saya menghapus video khusus di mana saya akan menunjukkan kepada Anda bagaimana membuat halaman HTML pertama Anda dan menjalankannya di browser (di dalamnya saya juga akan menceritakan tentang halaman judul, tentang pengkodean, tentang desain kode). Lihat dia dan baru kemudian pergi ke bacaan lebih lanjut:
Nah, sekarang, belajar cara membuat halaman paling sederhana, kami akan melanjutkan ke studi tag yang berguna yang harus digunakan di dalam tag
. Ini akan menjadi tag untuk paragraf, tajuk utama, daftar, tautan dan hal-hal berguna lainnya. Jadi, lanjutkan.Blok. Paragraf.
Salah satu elemen utama halaman adalah paragraf. Mereka dapat dibandingkan dengan paragraf dalam buku - setiap paragraf dimulai dengan baris baru dan memiliki apa yang disebut string merah (ini adalah saat baris pertama dari teks paragraf sedikit mundur ke kanan). Secara default, tidak ada baris merah, tetapi mudah dilakukan (sedikit kemudian).
Paragraf dibuat menggunakan tag
Jadi:
Ini adalah paragraf.
Ini adalah paragraf lain.
Dan paragraf lainnya.
Ini adalah paragraf.
Ini adalah paragraf lain.
Dan paragraf lainnya.
Blok. Header H1, H2, H3, H4, H5, H6
Selain paragraf, penting pada halaman berita utama. Mereka juga dapat dibandingkan dengan tajuk utama dari buku - setiap bab memiliki pos (nama bab ini) dan dibagi menjadi paragraf yang juga memiliki berita utama mereka. Nah, teks utama halaman ini terletak di paragraf.
Header dibuat. Dengan tagov.
,
,
,
,
,
. Mereka memiliki derajat yang berbeda. Dalam judul h1. Itu harus ditempatkan nama Semua Halaman HTML, di h2. - Judul blok Halaman, B. h3. - Nama sub-blok dan sebagainya.
,
,
,
. Mereka memiliki derajat yang berbeda. Dalam judul h1. Itu harus ditempatkan nama Semua Halaman HTML, di h2. - Judul blok Halaman, B. h3. - Nama sub-blok dan sebagainya.
,
. Mereka memiliki derajat yang berbeda. Dalam judul h1. Itu harus ditempatkan nama Semua Halaman HTML, di h2. - Judul blok Halaman, B. h3. - Nama sub-blok dan sebagainya.
Semua header default adalah lemak dan memiliki ukuran yang berbeda (dapat diubah melalui CSS, tetapi ini nanti). Lihat contoh:
Judul H1.
Header H2.
Header H3.
Header H4.
Header H5.
H6 title.
Ini adalah paragraf pertama.
Ini adalah paragraf kedua.
Ini adalah paragraf ketiga.
Jadi kode akan terlihat di browser:
Judul H1.
Header H2.
Header H3.
Header H4.
Header H5.
H6 title.
Ini adalah paragraf pertama.
Ini adalah paragraf kedua.
Ini adalah paragraf ketiga.
Blok. Berlemak
Anda sudah tahu bahwa tajuk utama default berlemak. Namun, dimungkinkan untuk membuat teks lemak dan biasa - ambil saja ke tag . Lihat contoh:
Ini adalah teks yang biasa, dan ini berlemak teks.
Jadi kode akan terlihat di browser:
Ini adalah teks yang biasa, dan ini berlemak teks.
Anda harus menggunakan dalam tag lain, misalnya paragraf. Dalam hal ini, paragraf menciptakan struktur umum halaman (paragraf dan tajuk utama), dan tag dgn B. Membuat lemak memisahkan teks.
Blok. Huruf miring
Selain lemak yang juga bisa Anda lakukan huruf miring Menggunakan tag :
Ini adalah teks yang biasa, dan ini italic. teks.
Jadi kode akan terlihat di browser:
Blok. Daftar
Bersama dengan paragraf dan berita utama ada elemen penting lain dari halaman - ini daftar. Elemen-elemen seperti itu mungkin akrab bagi semua pengguna Internet. Mereka mewakili daftar sesuatu (daftar) pada poin. Dekat setiap item daftar, biasanya lingkaran dicat (disebut penanda. Daftar).
Daftar dibuat menggunakan tag
- di dalamnya Anda harus pergi tag
- . Menandai ule Menentukan daftar itu sendiri, dan tag li. Item daftar harus ditempatkan (yaitu, satu LI sesuai dengan satu marker daftar). Ingatlah bahwa tag Li individu tidak dapat digunakan. Lihat contoh:
Ini adalah judul Tistle - Daftar poin pertama.
- Daftar kedua.
- Daftar daftar ketiga.
Jadi kode akan terlihat di browser:
- Daftar poin pertama.
- Daftar kedua.
- Daftar daftar ketiga.
Daftar yang dibuat melalui tag uleDipanggil berantakan daftar. Nama ini diberikan karena ada juga dipesan Daftar itu, alih-alih penanda-titik ada angka-marker. Daftar seperti itu alih-alih tag UL memiliki tag
- , dan item dari daftar tersebut juga dibuat melalui tag li..
- Daftar poin pertama.
- Daftar kedua.
- Daftar daftar ketiga.
- Daftar poin pertama.
- Daftar kedua.
- Daftar daftar ketiga.
- wajah. - Font itu sendiri. Misalnya, Arial, Courier atau Verdana. Anda dapat membuat daftar beberapa, karena Tidak semua pengguna memiliki set font yang luas, dan menulis beberapa di atribut wajah, browser akan dapat memilih yang untuk digunakan, atau lebih tepatnya - yang ada dalam sistem;
- ukuran - Atribut yang menunjukkan ukuran teks. Itu dapat dinyatakan dalam unit konvensional dan dalam piksel;
- warna - warna teks. Atribut ini dapat digunakan baik dalam kode HTML warna dan verbal. Yang pertama memiliki formulir #ffffff (di mana F adalah angka atau huruf dari A ke F), dan yang kedua ditulis dengan kata-kata sederhana (misalnya, merah - merah).
Mari kita buat daftar pesanan menggunakan tag ol.:
Ini adalah judul Tistle
Jadi kode akan terlihat di browser:
Kenyamanan daftar yang dipesan adalah bahwa saya dapat memasukkan item daftar baru di mana saja - dan penomoran itu sendiri akan merestrukturisasi (yaitu, saya tidak harus mengikutinya jika ada perubahan, seperti yang akan terjadi jika saya membangkitkannya secara manual. ).
Blok. Tautan
Tautan Ini adalah elemen-elemen yang membuat Internet dari Internet. Menekan tautan, kita dapat pindah dari satu halaman situs ke teman. Jika tidak ada - internet hanya akan satu set halaman, sama sekali tidak terhubung satu sama lain.
Ini adalah judul Tistle Tautan ke phphtml.net.
Jadi kode akan terlihat di browser:
Tautan adalah mutlak dan relatifSelain itu, mereka dapat memimpin situs Anda dan orang lain. Momen kompleks ini lebih baik untuk ditampilkan, dan tidak menggambarkan teks, jadi saya mengambil video berikut untuk Anda. Lihat dia dan baru kemudian pergi ke bacaan lebih lanjut:
Blok. Gambar-gambar
Mari kita lihat cara menempatkan gambar Di halaman situs Anda. Untuk tag tujuan ini
Memiliki atribut wajib srcdi mana jalur ke file gambar disimpan.
Cara kerjanya, lihat contoh berikut:
Ini adalah judul Tistle 
Jadi kode akan terlihat di browser:
Perhatikan bahwa tag
Tidak memerlukan tag penutupan.
Blok. Tautan dalam bentuk gambar
Referensi mungkin tidak hanya teks, tetapi juga gambar - Untuk ini, tag sudah cukup
Investasikan dengan tag Bagaimana ini dilakukan dalam contoh berikut. Klik pada gambar - dan Anda akan mengikuti tautan ke situs web Phphtml.net (untuk kembali ke buku - klik tombol "Kembali" di browser):
Ini adalah judul Tistle
Jadi kode akan terlihat di browser:
Blok. Aturan String.
Ingat apa yang akan terjadi jika Anda melakukannya, misalnya, dua paragraf di dekatnya - dalam hal ini, teks yang terletak di masing-masing dari mereka akan dimulai dengan baru Garis.
Mari kita pastikan ini adalah contoh berikut:
Ini adalah judul Tistle Ini adalah paragraf pertama.
Ini adalah paragraf kedua.
Jadi kode akan terlihat di browser:
Ini adalah paragraf pertama.
Ini adalah paragraf kedua.
Namun, ada situasi ketika kita ingin menjadi satu paragraf, tetapi beberapa teks di dalamnya dimulai dengan baris baru. Mengapa ini bisa dibutuhkan? Misalnya, saya ingin memanggil puisi, tetapi saya tidak ingin mematahkan setiap baris dalam paragraf terpisah, karena itu tidak akan sangat logis.
Untuk membuatnya, di tempat di mana baris harus celah, Anda harus menulis tag
. Harap dicatat bahwa tag ini spesial dan tidak memiliki penutupan.Mari kita lihat karyanya pada contoh berikut:
Ini adalah judul Tistle Ini adalah baris teks pertama,
Dan ini yang kedua.
Jadi kode akan terlihat di browser:
Ini adalah baris teks pertama,
Dan ini yang kedua.Blok. Html komentar
Dalam hampir semua bahasa pemrograman ada hal seperti "komentar".
HTML memberi kami sesuatu dalam hal desain teks. Hari ini saya akan memberi tahu Anda cara membuat font kursif dalam HTML, dan baik dalam font standar dan non-standar. Dalam kasus kedua, perlu memperhitungkan semuanya bekerja.
Bagaimana cara menulis di HTML Italics?
Saya akan mulai dengan fakta bahwa dalam HTML itu sendiri ada dua tag yang memberikan teks ke teks. Ini em dan I. By the way, yang kedua tertanam di editor HTML dari mesin WordPress, di mana saya sekarang dan menulis artikel ini. Apa yang berbeda tag ini? Bahkan, hari ini saya tidak ingin dengan keras menyatakan bahwa mereka berbeda sesuatu.
Secara umum, EM digunakan untuk menyoroti kata-kata yang perlu diucapkan dengan intonasi khusus, dan saya cukup menyoroti teks. Tapi kita tidak akan repot di atasnya, karena tidak diketahui, ini benar.
Apa sifat CSS untuk teks persimpangan?
Ini adalah properti gaya font dan nilai italicnya. Masih ada nilai miring dan memutar teks ke cenderung. Apakah ada perbedaan antara nilai-nilai ini? Praktis tidak. By the way, secara rinci tentang ini dan properti CSS lainnya untuk teks, baca di artikel yang sesuai, di mana semuanya terurai di rak.
Bagaimana cara menghadirkan font non-standar dalam huruf miring?
Faktanya adalah bahwa jika Anda menghubungkan font non-standar melalui font Google, maka dalam hal ini Anda harus menandai kotak centang ketika Anda menghubungkan setidaknya 1 gaya font. Jika ini tidak dilakukan, maka ketika Anda mencoba membuat item font seperti itu, itu akan menjadi salah satu font standar. By the way, Anda dapat membaca tentang menghubungkan font non-standar dalam artikel ini.
Dalam tangkapan layar ini Anda dapat melihat koneksi fragmen font melalui layanan font Google.
Seperti yang bisa dilihat, ada centang dekat setidaknya satu tulisan 10. Sekarang, ketika menggunakan tag atau properti gaya yang diperlukan, benar-benar font ini akan menjadi bermakna, dan bukan yang lain.
Dengan demikian, kami membongkar semua momen yang bekerja dengan persimpangan. Tidak lagi berani Anda menahan.
Sehingga halaman web kami tampak lebih rapi, kami membagi teks pada paragraf dan meletakkan judulnya. HTML memiliki 6 level header dari bagian nomor nomor dokumen dari 1 hingga 6. Judul dinyatakan sepasang tag dengan angka, level yang tepat, misalnya,
- Bagian header dari level pertama, dan - Bagian judul level keenam. Dari judul teks biasa berbeda dalam ukuran dan lebar huruf. Header H1 tingkat pertama biasanya ditampilkan dengan font yang sangat besar, sedangkan headline Tingkat keenam H6 sangat kecil.Judul
Melakukan untuk tidak membingungkan judul partisi dokumen dengan header dokumen yang dibahas sebelumnya ditentukan oleh elemen
.Sebagai header teks, kami menggunakan kalimat pertama - untuk ini cukup terbatas pada tagnya
dan
.Tetap ke dalam teks dari tag file lainnya.html
dan
Sehingga mereka membatasi kalimat teks pertama, dan potongan kode ini menerima tipe berikut:Selamat datang di SD!
Saya akan melihat hasil yang didapat.
Simpan file dengan memilih perintah menu Program Notepad (notepad) File - Simpan (Simpan File).
Operasi tabungan harus selalu dilakukan sebelum melihat dokumen, karena membuka file untuk melihat, mengunduhnya ke komputer gulir dari disk. Jika setelah mengedit kode HTML, Anda tidak menyimpan file, Anda tidak akan melihat konfigurasi di browser.
Kembalikan jendela browser dengan menekan tombol pada taskbar (taskbar).
Tekan tombol F5 atau tombol UPDRESH (Refresh) pada bilah alat jendela kerja program. File.html lainnya akan di-boot ulang, dan Anda akan melihat di jendela browser, sebagai tajuk level pertama terlihat.
Lihatlah bagaimana judul 5 level lainnya akan terlihat, mengubah angka dalam tag: H2, H3 dan sebagainya setelah setiap konfigurasi, jangan lupa untuk menyimpan file dan memperbarui gambar di jendela browser.
Saat Anda menyelesaikan eksperimen, pulihkan tag di file lain.html
.Dengan menggunakan 6 level header, yang menyediakan untuk bahasa HTML yang Anda inginkan, Anda dapat membuat dokumen yang cukup mudah dibaca dengan struktur intuitif. Ingat bahwa dokumen Anda akan selalu secara signifikan lebih baik jika memiliki pembagian yang akurat ke dalam bagian dan subbagian.
Menyelaraskan berita utama
Secara default, judulnya diselaraskan ke tepi kiri halaman. Tapi itu juga bisa diselaraskan di tepi kanan atau centen. Untuk penyelarasan kanan dalam tag
Align \u003d atribut "kanan" digunakan, dan untuk centering - align \u003d "center". Indikasi yang jelas dari penyelarasan sisi kiri juga diizinkan - align \u003d "kiri".
Tambahkan ke tag
Atribut align \u003d "center" untuk mencapai judul. Elemen ini harus mengambil tipe selanjutnya:
Selamat datang di SD!
Dalam hal mendatang, kami tidak akan diingat untuk Anda tentang kebutuhan sebelum melihat untuk menyimpan file dengan kode awal dan memperbarui gambar di browser.
Cara membuat teks dipilih dalam HTML
Sekarang kita akan berurusan dengan teks lainnya. Saya akan menambah ukurannya dan meletakkan teks dengan prasasti pertanyaan berani. Tag berpasangan digunakan untuk memasang stroke tebal .
Tongkat di file lain.html dan menutup Tag sehingga mereka membatasi teks di sini Anda akan belajar ... Elemen ini harus mengambil tipe selanjutnya:
Bagaimana dalam HTML Make Text Italics
Prasasti keriting diinstal menggunakan tag .
Tetap pada tag kode HTML awal dan Sehingga elemen yang diedit menerima jenis berikut:
Di sini Anda akan belajar tentang bisnis kami, tentang produk perangkat lunak perusahaan kami dan peralatan yang kami hasilkan
Elemen penandaan dapat diinvestasikan, seperti dalam struktur ini, di mana elemen … Diinvestasikan dalam elemen. …. Browser modern mampu membagikan tag bersarang. Karena Anda harus melihat urutan keterikatan. Pekerjaan browser akan sulit jika bersarang rusak. Misalnya, catatan seperti itu akan salah: …. Kepatuhan dengan bersarang adalah bagian yang sangat mendasar dari penulisan keseluruhan kode HTML.
Cara membuat teks digarisbawahi dalam HTML
Dengan sepasang tag Anda dapat membuat gambar yang digarisbawahi dari potongan teks, dibatasi oleh tag, dan dengan bantuan sepasang tag - Tampilkan teks dengan font teletype.
Perlu dicatat bahwa dengan tag baru-baru ini Memperbesar dan menggarisbawahi dilakukan dengan gaya. setara . Ya, analog baru terlihat lebih rumit, tetapi itu agak chagrin. Hal utama dalam manfaat ini mengatakan, fakta bahwa krim besar adalah crosbbromezer, dengan kata lain yang cocok untuk semua browser ketika Tidak semua browser didukung.
Cara mengambil teks dalam html
Sekarang tingkatkan ukuran font teks. Ini dapat dilakukan dengan berbagai metode.
Tag Tingkatkan ukuran font teks yang disimpulkan di antara mereka.
Tambahkan ke awal dan akhir dari potongan kode di atas, tag dan Sehingga elemen menerima jenis berikut:
Di sini Anda akan belajar tentang bisnis kami, tentang produk perangkat lunak perusahaan kami dan peralatan yang kami hasilkan
Dengan tagov. Anda dapat mengurangi ukuran font teks pada perbandingan dengan inisial.
Metode lain untuk menunjukkan ukuran font - dengan tag Dengan atribut ukuran. Sebagai nilai atribut ini, bilangan bulat digunakan dari 1 hingga 7. Nilai 1 sesuai dengan ukuran font terkecil, dan nilai 7 adalah yang terbesar.
Menggunakan alih-alih Tagov Tag Lihat , Lihat bagaimana ukuran font teks berubah pada nilai yang berbeda dari atribut ukuran - dari 1 hingga 7.
Sebagai nilai atribut ukuran, Anda juga dapat menggunakan angka dari 1 hingga 7 dengan + (plus) atau - (minus). Dalam hal ini, ukuran font yang sesuai meningkatkan miniatur, dengan perbandingan dengan inisial, misalnya, tag Buat ukuran font, dengan perbandingan dengan satu tingkat saat ini. Periksa.
Tetapkan 5 sebagai nilai atribut ukuran untuk potongan teks yang dimaksud: . Kode HTML bagian ini harus seperti ini:
Di sini Anda akan belajar tentang bisnis kami, tentang produk perangkat lunak perusahaan kami dan peralatan yang kami hasilkan.
Dalam tag Atribut Warna juga dapat digunakan untuk menunjukkan warna font yang terbatas pada tag teks. Nilai-nilai atribut ini sama dengan atribut yang dibahas sebelumnya menggambarkan warna latar belakang dan teks dokumen.
Secara default, paragraf dengan teks di sini Anda akan belajar ... selaras kiri. Pusatkan horizontal dengan tag
. Anda juga dapat menyelaraskan paragraf di tepi kanan halaman dengan tag baik di sebelah kiri - dengan bantuan tag . Tag tongkat
Dibatasi oleh paragraf yang ditunjuk. Mengarahkan perhatian bahwa untuk paragraf centracing kami menggunakan tag
Berbeda dengan atribut align \u003d "Center", yang diterapkan oleh kami dalam tag . Perhatian! Untuk tag 2010. ,
, , Ini usang dan karena itu Anda perlu menggunakan analog gaya. Ini tidak berarti bahwa tidak mungkin untuk menggunakannya, tetapi ketika Anda dapat menyingkirkannya. =
= = = =
Ada juga sejumlah besar tag usang lainnya yang tidak menguraikan dalam artikel ini, oleh karena itu lebih baik berkenalan dengan situs web khusus pada masalah ini. Tetapi utama yang saya letakkan di sini sedikit lebih tinggi
Kode seleksi
Bahasa HTML mengakui dua pendekatan untuk memilih font fragmen teks. Di satu sisi, dimungkinkan untuk secara langsung menunjukkan bahwa font pada bagian tertentu dari teks dapat dicetak tebal atau rata-rata, dengan kata lain, jelas untuk menentukan font dalam font ini, seperti yang kami lakukan dalam pengalaman ini. Di sisi lain, Anda dapat menandai setidaknya beberapa teks, memiliki beberapa, baik dari gaya logis yang biasa, memberikan interpretasi gaya ini ke browser. Jadi Makar, gaya logis menunjukkan peran bagian teks, misalnya, signifikansi besar pada perbandingan dengan teks sehari-hari atau fakta bahwa bagian ini adalah kutipan. Dalam pekerjaan Anda sendiri, Anda dapat menggunakan tag selanjutnya yang menentukan gaya logis. Periksa bagaimana mereka bekerja di berbagai browser.
- Digunakan untuk menentukan kata. Teks sedang mengantisipasi secara default.
- Untuk menyoroti kata-kata dan memperkuat. Teks ditampilkan dalam huruf miring secara default.
- Untuk menyoroti judul buku, film, pertunjukan, dan sebagainya dengan miring default.
- Untuk fragmen kode kode. Ini ditampilkan pada tampilan font lebar tetap.- Digunakan untuk teks yang dimasuki pengguna dari keyboard. Di berbagai browser dapat ditampilkan di berbagai font. Tandai usang.
- Digunakan untuk menampilkan program. Menampilkan font lebar tetap. Tandai usang.
- Untuk fragmen fundamental terutama. Biasanya dialokasikan oleh huruf tebal.
- Ini digunakan untuk menunjukkan bagian dari teks atau kata adalah variabel simbolis, dengan kata lain, teks yang dapat diganti dengan ekspresi yang berbeda. Ditampilkan oleh huruf miring secara default. Tandai usang.
Spesifikasi HTML 4.0 menawarkan metode yang lebih progresif untuk menentukan gaya teks dan bagian lain - menggunakan bahasa khusus Cascading CSS Styles (Cascading Style Sheets). Tabel Gaya adalah prestasi besar di area desain desain, memperluas kemampuan untuk meningkatkan tampilan halaman. Tabel gaya menyederhanakan definisi interval antara garis, indentasi, warna yang digunakan untuk teks dan latar belakang, ukuran dan gaya font dan sebagainya, gaya sebagian besar bagian HTML dapat dijelaskan menggunakan atribut gaya, yang ditempatkan di dalam elemen tag pembuka. Sebagai nilai atribut gaya, pasang tipe "Properti: Nilai" digunakan. Misalnya, dalam sepotong kode yang menggambarkan judul bagian,
Atribut gaya \u003d "Warna: Blue" menentukan bahwa properti warna (warna) berwarna biru (biru), dengan kata lain, teks header tingkat pertama harus ditampilkan dengan warna biru.
Alignment gaya ..
Mari kita lihat bagaimana dengan bahasa tabel gaya cascading, tentukan gaya potongan teks, yang memulai kata-kata di sini Anda akan belajar ...
Untuk menunjukkan ketebalan font, properti berbobot font digunakan dengan nilai-nilai yang lebih ringan (sempit), tebal (tebal), lebih berani, misalnya, gaya \u003d "Berat font: Bold".
Properti gaya font dengan nilai italic digunakan untuk mendefinisikan apropriasi. Oleh karena itu, untuk memberikan inspeksi tubuh gelandangan teks, atribut gaya diikuti oleh: style \u003d "Font-Weight: Bold; Font-Style: italic". Perhatian langsung: Karakteristik dapat ditampung dalam urutan apa pun dan tentu saja diperlukan untuk berbagi titik koma.
Jika Anda ingin menentukan ukuran font, Anda harus menggunakan properti ukuran font, nilai yang dapat ditentukan dalam nilai relatif atau absolut. Nilai relatif adalah persentase, dan item (PT), piksel (PC), sentimeter (cm), milimeter (mm) digunakan sebagai nilai absolut. Contohnya:
gaya \u003d "ukuran font: 200%"
gaya \u003d "ukuran font: 16pt"
style \u003d "Ukuran font: 100px"
Menunjukkan ukuran absolut, bukan relatif, Anda merampas pengguna yang melihat halaman Anda, kemampuan untuk menambah atau mengurangi ukuran font menggunakan perintah menu browser dalam koordinasi dengan visi dan resolusi monitor mereka. Font hanya akan ditampilkan ukuran yang Anda tentukan. Oleh karena itu, lebih baik menentukan ukuran font dalam persen. Dalam hal ini, ukuran font akan kurang atau lebih pada jumlah persen persen daripada ketika dibersihkan menggunakan tag HTML default.
Untuk menentukan metode menyelaraskan teks secara horizontal, properti yang menyelaraskan teks dengan nilai kiri (kiri), kanan (per kanan), pusat (terpusat), membenarkan (lebar) digunakan. Jadi Makar, untuk menunjukkan bahwa teks di sini Anda akan belajar ... harus didekorasi dengan pertanyaan berani dalam ukuran dengan ukuran 150% dari awal dan selaras di tengah, ia mengikuti gayanya diikuti:
style \u003d "Font-Weight: Bold; Font-Style: Italic; Font-size: 150%; Text-align: Center"
Kami menerapkan atribut ini dalam tag<р>yang memungkinkan Anda untuk mengirimkan teks sebagai paragraf terpisah.
Edit elemen HTML, termasuk teks di sini Anda akan belajar ... menghapus tag
, , , Dan menyisipkan tag<р> dan Dengan atribut gaya sehingga elemen ini telah mengambil tampilan selanjutnya: <р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">Di sini Anda akan belajar tentang bisnis kami, tentang produk perangkat lunak perusahaan kami dan peralatan yang kami hasilkan
Anda lihat, bahasa HTML memungkinkan Anda menggunakan berbagai desain gaya. Bersama-sama, penerapan gaya CSS tabel cascading lebih diinginkan.
Opsi penyelarasan lainnya dan penggunaan gaya
Kami hanya melihat satu opsi untuk menggunakan gaya tabel gaya ketika definisi gaya ditempatkan secara khusus di dalam tag elemen yang Anda gambarkan.
Ini dilakukan dengan menggunakan atribut gaya yang digunakan dengan sebagian besar tag HTML standar. Tetapi ada opsi lain untuk menggunakan CSS.
Dalam html standar, tanpa diperkenalkannya tabel gaya, untuk menetapkan elemen apa pun dari parameter tertentu, seperti warna, ukuran, posisi pada halaman, dan karenanya, perlu untuk mengaburkan karakteristik ini untuk setiap elemen setiap kali, bahkan jika Satu halaman diperlukan untuk ditempatkan 10- ki bagian-bagian seperti itu tidak berbeda satu sama lain. Anda harus memasukkan satu dan potongan kode HTML yang sama ke halaman, meningkatkan ukuran file dan waktu pemuatan dari jaringan.
Tabel gaya bertindak lain, metode yang lebih nyaman dan ekonomis. Untuk menetapkan elemen fitur tertentu, Anda harus menguraikan elemen ini sekali dan menemukan deskripsi ini sebagai gaya, dan dalam kedatangan hanya menunjukkan bahwa elemen yang Anda ingin mengeluarkan cara yang sesuai harus mengambil karakteristik gaya yang dijelaskan oleh Anda. Nyaman, bukan?
Selain itu, Anda dapat menyimpan deskripsi gaya yang tidak ada dalam teks halaman web Anda, dan dalam file terpisah - ini akan memungkinkan Anda untuk menggunakan deskripsi gaya pada sejumlah halaman web. Dan keunggulan terkait berikutnya - kemampuan untuk mengubah desain setidaknya sejumlah halaman dengan mengoreksi gaya gaya dalam satu file terpisah.
Terlepas dari bahasa tabel gaya memungkinkan Anda untuk bekerja dengan desain font halaman pada level yang lebih tinggi daripada HTML standar.
Pada waktu saat ini, bahasa CSS memiliki sejumlah besar bagian HTML, yang dapat dikontrol. Menggunakan "aman", dengan kata lain yang kompatibel dengan jumlah terbesar browser elemen CSS - karakteristik font, bagian dari bagian dan latar belakang, karakteristik teks dan perbatasan - Anda dapat meredakan pekerjaan Anda secara signifikan dan membuat halaman web Anda lebih lucu dalam desain teks.
Halo, pembaca blog yang terhormat! Artikel ini akan dibicarakan tag pemformatan teks. Contoh cerah adalah pilihan teks dalam huruf tebal atau miring. Kami juga mempertimbangkan pengaruh beberapa tag pada optimasi internal situs dan aturan untuk menulisnya. Sekitar itu Anda dapat membaca dalam artikel di atas. By the way, Anda dapat memenuhi elemen desain teks yang serupa di banyak editor teks, misalnya, dalam Word.
Tag dibagi menjadi 2 jenis: blok dan huruf kecil. Saat menggunakan yang pertama, Anda dapat mengubah konten teks teks (garis, fragmen terpisah, atau kata-kata), dan yang kedua adalah. Memformat tag yang kami pertimbangkan dalam artikel ini terutama lebih rendah dari.
Aturan dan Prosedur untuk Menulis Tag
Anda sudah tahu apa yang dibuka dan menutup tag. Jika tidak, baca artikel di awal materi ini. Jika singkat, maka tag adalah dua jenis: tunggal (misalnya, transfer ke string baru
) dan wadah (pasangan). Jadi, semua tag pemformatan teks parn.. Ini berarti bahwa elemen apa pun memiliki tag pembukaan dan penutup, dan fragmen yang terpisah harus ditempatkan di antara mereka. Misalnya, pemilihan frasa yang tepat akan terlihat seperti ini: Fragmen khususKetika browser memproses fragmen ini, Anda akan melihat teks ini: Fragmen khusus.By the way, dalam RSS Ribbon Semua tag tidak ditampilkan ().
Hal utama saat menulis tag - jangan lupa untuk menutupnya. Jika tidak, seluruh teks pada halaman akan disorot lemak (dalam contoh dengan tag ). Tetapi ada kasus seperti itu ketika Anda perlu menyoroti fragmen dan huruf tebal dan miring tertentu pada saat yang sama. Tetapi tag yang melakukan tindakan ini tidak ada. Keluar situasi ini adalah satu: Gunakan dua tag pada saat yang sama. Dalam urutan penggunaannya tidak ada. Oleh karena itu, menulis teks dengan tag seperti ini:
Fragmen khusus
atau seperti ini:
Fragmen khusus
Anda masih mendapatkannya Fragmen khusus miring dan lemak pada saat yang sama. Namun, lebih disukai untuk menggunakan opsi pertama karena awalnya adalah satu-satunya dan benar. Juga, jangan lupa bahwa setiap browser dapat memproses tag dengan cara yang berbeda (), tergantung pada pengaturan. Dan sekarang kita beralih ke tag itu sendiri
Memilih teks dalam berminyak dan miring - tag , , dan
Tag pemformatan teks yang paling populer disorot. lemak dan italic.. Biasanya mereka digunakan untuk memberikan kepentingan untuk setiap fragmen. Kasus pertama digunakan untuk menyoroti sebuah fragmen yang berisi informasi atau kata kunci yang berguna. Italia berlaku untuk tujuan yang sama dengan teks berlemak, tetapi informasi kurang penting, karena itu menyiratkan pada latar belakang teks utama yang kurang terlihat daripada teks lemak.Pertimbangkan untuk Mulai memilih teks berminat. Untuk tindakan ini menggunakan dua tag - dan . Tidak ada perbedaan penampilan. Meskipun, mengingat fakta bahwa browser mana pun dapat menafsirkan setiap elemen dengan caranya sendiri, Anda dapat melihat perbedaan. Inilah tampilan teks dalam tag dan Dalam bentuk browser yang sudah diproses:
Teks dalam tag kuat
Teks dalam tag b
Tapi apa dua baris di halaman sumber tampilan halaman:
Teks dalam tag kuat Teks dalam tag b
Situasi yang sama kita dapat mengamati dalam kasus tag miring seleksi dan . Cobalah untuk menemukan perbedaan antara dua contoh:
Teks dalam tag em
Teks dalam tag i
Tetapi kode sumber:
Teks dalam tag em Teks dalam tag i
Jadi, tag debit yang dibahas dalam huruf tebal dan itali sebenarnya tidak berbeda, tetapi kemudian kita, misalnya, kita, misalnya, tag jika ada ? Lagi pula, yang terakhir hanya berisi satu karakter (bukan tanda kurung) dan, oleh karena itu, lebih mudah untuk ditulis. Dan masalahnya adalah tag itu dan Pengaruh pada. Jika Anda akan mengelilingi kata kunci tag ini, itu akan bermanfaat pada promosi situs. Seharusnya tidak berlebihan - maksimum dalam teks harus 5% dari teks Fatte dalam tag , dan sama dan kursif di tag .
Jika Anda ingin menyorot setiap saat dalam teks, maka gunakan tag atau . Secara umum, saya pikir mesin pencari juga mempertimbangkan teks dalam tag ini lebih penting, tetapi pada optimalisasi Internal.mereka masih memiliki dampak yang lebih kecil daripada dan .
Tag pemilihan teks - ,
Sekarang pertimbangkan beberapa tag yang menggunakan garis dalam desain teks. Yang paling terkenal dengan Anda dari editor teks - menandai atau garis bawah. Pengaruh pada peringkat tag ini tidak (sejauh yang saya tahu), tetapi untuk mengalokasikan teks apa pun dan fokus pada itu akan membantu. Contoh menggunakan tag ini saya membawa sedikit lebih tinggi.danDua lebih mirip dengan tujuan tag -
dan. Keduanya melakukan fungsi overclocking teks. Anda dapat menggunakan tag ini dalam situasi apa pun: Jika Anda memperbarui dokumen (atau lebih tepatnya), Anda dapat melewati yang lama dan menambahkan yang baru; Jika Anda akan menulis sesuatu yang meninggalkan topik material; Sesuatu yang tidak sesuai dengan standar moral dan etika.Perbedaan dari dua tag ini hanya di mereka penulisan, sebagai hasilnya, lebih disukai untuk menggunakan yang pertama, karena Pertama, lebih mudah untuk menulis, dan kedua, halaman Anda akan kurang dari kode HTML, dan mesin pencari menyukainya.
Menandai dan atribut - parameter font teks
Sekarang pertimbangkan tag yang tidak digunakan tanpa atribut. Dengan itu Anda dapat menentukan parameter untuk fragmen teks tertentu. Secara umum, sekarang lebih disukai untuk digunakan (cascading style sheets), karena Dengan bantuan mereka, Anda dapat mengurangi seluruh kode halaman HTML. Jadi pertimbangkan tagnya . Untuk itu hanya ada tiga atribut:
Jadi terlihat seperti teks dalam tag Menggunakan setiap atribut:
Teks ini memiliki ukuran 6px
Teks ini merah Teks ini memiliki font arial Teks ini merah dan ukuran 5px 5pxTetapi apa yang akan Anda lihat, setelah memproses kode tertulis:
Blokir Elemen Desain Teks - Headline
-
, gugus kalimat
Akhirnya, kita akan melihat elemen blok yang digunakan dalam hampir setiap dokumen. Ini adalah tag utama dan paragraf. Pertimbangkan yang pertama. Header adalah 6 spesies dan masing-masing memiliki tagnya sendiri. Setiap jenis hanya memakai nomor urutannya sendiri dan direkam dengan tag.
,
,...,
. Inilah yang terlihat seperti header dalam bentuk yang dirawat:
Digit setelah header kata sesuai dengan nomor di tag
Dan sekarang mari kita bicara tentang tag alokasi paragraf
Fungsi tag ini adalah untuk memisahkan teks antara teks lain dengan string kosong. Jika Anda melihat kode sumber dokumen apa pun, Anda dapat melihat yang berikut:
Dalam persegi panjang hijau, satu paragraf, merah - yang lain. Tetapi bagaimana kode ini terlihat setelah memproses browser (panah menunjukkan string kosong):
Akibatnya, kami mendapatkan pemisahan satu paragraf yang cukup nyata dari yang lain, yang bagus - membaca menjadi lebih nyaman.
Yang sampai pada akhir artikel tentang tag pemformatan dokumen. Mereka jauh lebih dari, daripada yang saya jelaskan dalam materi ini. Hanya beberapa kebutuhan untuk menceritakan banyak tentang beberapa, sebagai hasilnya, mereka akan dikhususkan untuk masing-masing artikel dengan ikhtisar lengkap.!
Semua orang tahu tag itu , ,
, adalah presentasi, dan karenanya, berdasarkan "struktur, representasi, perilaku" paradigma, penggunaannya tidak diterima. Elemen yang jauh lebih akrab muncul , ,. Jadi selama bertahun-tahun mengembangkan praktik. Namun, banyak yang berubah dalam semantik elemen-elemen ini dengan kedatangan HTML5. Sekarang kami memiliki 4 tag baru dengan makna dan bubur di kepala Anda.vs.
Jika sebelumnya semua buku teks pada pemotretan ditembak oleh frasa seperti "gunakan sebagai gantinya "Dan itu setengah benar, hari ini kebiasaan seperti itu bisa memainkan lelucon semantik jahat. Dan masalahnya adalah penulis HTML5 menawarkan untuk digunakan Untuk menyorot kutipan teks untuk menarik perhatian pembaca, namun, tanpa implisit penguatan teks atau intonasi. Spesifikasi menyebabkan contoh penggunaan untuk markup kata kunci dalam dokumenMereka frobonitor Dan. barbinator. Komponen digoreng.
Dan memimpin (paragraf pertama dari artikel dalam jurnalisme)
Kittens "Diadopsi" oleh Pet Rabbit
Enam anak kucing yang ditinggalkan telah menemukan tokoh ibu baru yang tak terduga - kelinci hewan peliharaan.
Perawat veteriner Melanie Humble mengambil anak kucing berusia tiga minggu ke rumahnya yang aberdeen.
Pada gilirannya , seperti sebelumnya, berarti peningkatan pentingnya isinya.
vs.
Dari sekarang Berisi teks yang tersingkir dari lingkungan secara keseluruhan, tetapi tidak memiliki warna emosional. Menurutku, Adalah logis untuk digunakan di mana tradisi tipografi menyiratkan huruf miring (misalnya, kata-kata dalam bahasa asing, istilah, dll.)Per aspera ad astra - Diterjemahkan dari bahasa Latin, pepatah berarti "melalui duri ke bintang-bintang."
Hal yang sama berarti penekanan tegas, fokus emosional pada teks kutipan ini. Ini adalah kasus ketika dalam pidato kami mengalokasikan kata-kata dengan suara (intonasi, volume, dll.)
Untuk mengeksekusi itu tidak mungkin, pengampunan.
Baca kontrak dengan cermat!
"Teks Font Kecil" (informasi yang merupakan formalitas hukum, seperti lisensi perusahaan atau alamat hukum, dll.) Kami, sebagai aturan, ditempatkan dengan kelas dengan font yang lebih kecil dalam visual. Sekarang di Arsenal kami yang baru semantik Elemen - .Holyvar O.
SebelumnyaTidak ada yang lain sebagai teks referensi. Sekarang
Kami juga memiliki item, hasil pemrosesan yang secara default dalam paes visual adalah teks. Ini berarti perubahan dalam dokumen, dan pada pandangan pertama, tugas mereka mungkin tampak sama. Namun, ada momen halus. Pertimbangkan contoh halaman produk di toko online.
Ini mungkin menunjukkan dua harga, salah satunya ditenggelamkan. Kami menempatkan elemen TI. Ini berarti bahwa harga lama telah kehilangan relevansinya (tidak peduli kapan itu, fakta itu sendiri penting). Cara Memeriksa Itu Tidak?Semantik baru dan dokter lama
Jika untuk beberapa alasan yang tidak dapat dipahami, Anda tidak dapat mengganti penggantian untuk yang baru dan secara formal menambatkan di HTML 4.01 - jangan putus asa. Gunakan item baru yang lama dengan makna baru dan dengan waktu Anda akan memberi tahu Anda "Terima kasih". Mungkin seseorang akan mengatakan bahwa itu salah, tetapi elemen-elemen ini kecualiBahkan tidak nyali. Selain itu, HTML5 dikembangkan dengan perhitungan kompatibilitas mundur, yang sama berlaku untuk semantik baru dari elemen lama. Radikal tidak berubah, tetapi hanya padaian semantik yang ditambahkan.
