Tag mana yang membuat paragraf dalam dokumen. Memformat teks dalam HTML
Baca juga
Setiap teks memiliki struktur uniknya sendiri: buku dibagi menjadi beberapa bagian, bagian dan bab, surat kabar dan majalah memiliki judul dan subjudul terpisah, yang pada gilirannya mencakup fragmen teks yang juga memiliki strukturnya sendiri: paragraf, indentasi, dll.
Teks yang diposting di halaman web tidak terkecuali; teks tersebut juga harus memiliki struktur logis yang dapat dimengerti oleh setiap pengguna. Lagi pula, banyak hal bergantung pada seberapa nyaman dan sederhana teks pada halaman tersebut dirasakan: pertama-tama, kesan apa yang akan didapat pengunjung tentang situs Anda.
Untuk membuat unit teks struktural seperti paragraf, dokumen HTML menggunakan tag
, yang memisahkan fragmen teks dengan indentasi vertikal (baris kosong ditambahkan sebelum dan sesudah paragraf).
Catatan: secara default, jarak antar paragraf adalah 1em (em adalah satuan ukuran yang sama dengan tinggi font), artinya jarak antar paragraf secara langsung bergantung pada ukuran font.
Untuk mengubah indentasi antar paragraf tanpa mengubah ukuran font, Anda dapat menggunakan properti CSS margin.
Jangan lupa tag penutupnya
Sebagian besar browser akan menampilkan dokumen HTML benar, meskipun Anda lupa tag penutupnya.
Ayat
Paragraf lain
Kode ini akan berfungsi di sebagian besar browser, tapi jangan bergantung padanya. Tag penutup yang terlupa dapat menyebabkan hasil yang tidak diharapkan atau kesalahan.
Garis merah
Apa itu garis merah? Menurut definisi, ini adalah baris awal paragraf, yang biasanya disorot dengan warna merah (sesuai dengan namanya). Sebelum percetakan ditemukan, buku ditulis dengan tangan - satu bab atau bagian teks, kata atau huruf pertama ditulis dengan cat merah. Dari sinilah muncul konsep “menulis dari garis merah” - yang berarti awal dari sebuah pemikiran, bab, atau bagian baru.
Namun, saat membuat halaman web, desain garis merah jarang digunakan, meskipun faktanya hal ini membuatnya lebih nyaman untuk melihat teks secara visual, yang cukup penting bagi pembaca tradisional - tidak semua orang merasa nyaman membaca elektronik. versi teks.
Untuk menambahkan garis merah ke paragraf, Anda perlu menggunakan properti CSS indentasi teks, yang memungkinkan Anda membuat indentasi kalimat pertama:
Mencoba "
Pada contoh di atas, baris pertama setiap paragraf pada halaman akan dimulai dengan indentasi 25px. Contoh di bawah ini menunjukkan bagaimana Anda dapat mengatur garis merah hanya untuk paragraf tertentu pada halaman.
Seperti dalam seni nyata lainnya, di teks yang bagus tidak ada hal-hal kecil yang ada yang mencantumkan garis merah karena menganggap kegunaannya tidak begitu penting.
Mencoba "Namun, kita harus memahami bahwa koma apa pun membawa muatan estetika dan semantik, dan bukan hanya sebagai penghormatan terhadap aturan tata bahasa - ini juga berlaku untuk pemformatan. Catatan: Tidak perlu mengatur margin menjadi 25px, Anda dapat memilih ukuran optimal
lekukan sendiri, juga menggunakan properti indentasi teks dimungkinkan untuk membuat garis menonjol di atas sisa teks; untuk melakukan ini, Anda perlu menetapkan nilai negatif untuk properti tersebut (misalnya: -30px). Dalam pelajaran terakhir tentang dokumen, kita melihat enam tingkat judul yang dapat disertakan pada halaman html, dan mempelajari aturan penggunaan tag “h1-h6”. Dalam tutorial ini kita akan melihat, tanda paragraf
, yang akan memberikan teks kita tampilan yang benar di halaman.
Pada postingan selanjutnya saya akan kasih tahu cara membuat website Anda semakin cantik (agar tidak ketinggalan). Kita akan belajar cara membuat latar belakang yang bergaya. Saya akan membagi gambar ini menjadi dua bagian, bagian pertama kita akan bekerja dengan Photoshop, dan bagian kedua kita akan bermain dengan cascading style sheet. Label paragraf
atau tag paragraf “p” memungkinkan Anda membuat paragraf dari teks pada halaman dokumen web. Jika Anda tidak menggunakan tag “p”, tetapi cukup memasukkan teks tanpa desain, Anda akan mendapatkan teks yang tidak terstruktur dan jelek.
Dengan menggunakan tag paragraf, teks menjadi lebih atau kurang mudah dibaca, sehingga halaman menjadi lebih menarik. Mari kita lihat dokumen yang tidak menggunakan tag paragraf:
Hari ini, aku bangun pagi seperti biasanya. Matahari pagi mulai menerobos tirai jendelaku. Meregangkan tubuh, aku pergi ke dapur. Aku membuat teh hijau untuk diriku sendiri, menaruh dua sendok gula dan duduk di kursi empuk di depan jendela dapur. Di luar saat itu musim gugur. Saya suka saat-saat seperti ini karena saya yakin musim gugur adalah saat yang paling... waktu romantis sepanjang tahun. Setelah menghabiskan teh, saya mengambil ponsel saya dan menelepon untuk kekasihmu, ucapkan selamat pagi padanya. Sudah kuduga, dia masih tidur. Kami lucu berbicara dan setuju untuk bertemu sore ini saat matahari bersinar dan Di luar hangat. Waktu berlalu. Dan sekarang kami bersama, makan siang di tempat setempat kafe: kami makan, ngobrol, main mata satu sama lain. Kami merasa nyaman bersama. Saya suka milik saya gadis itu dan aku juga. Kami sedang berpikir untuk memulai sebuah keluarga...
|
Inilah hasil akhir kami:
Teksnya diformat dengan buruk. Semuanya disatukan, tanpa struktur apa pun. Contoh berikut menunjukkan penggunaan tag paragraf "p". Tag ini adalah tag blok berpasangan, tetapi di dalamnya hanya dapat berisi tag baris. Tag blok di dalam tag "p" tidak diperbolehkan, termasuk tag "p" itu sendiri:
Dengan menggunakan tag paragraf, teks menjadi lebih atau kurang mudah dibaca, sehingga halaman menjadi lebih menarik. Mari kita lihat dokumen yang tidak menggunakan tag paragraf:
Paragraf satu. Untuk membuat teks di halaman Anda dapat dibaca, gunakan tag paragraf “p”. Teks ini dibingkai tanda berpasangan"p", yang memungkinkan browser mengenali teks sebagai paragraf.
Paragraf dua. Ini adalah paragraf kedua, setelah paragraf pertama. Paragraf ini akan menjorok ke dalam dari paragraf pertama. Contoh penggunaan paragraf dapat dilihat pada gambar di bawah ini.
Paragraf satu. Untuk membuat teks di halaman Anda dapat dibaca Tag paragraf "p" digunakan. Teks ini dibingkai dalam tag “p” berpasangan, yang memungkinkan Browser mengenali teks sebagai paragraf. Paragraf dua. Ini adalah paragraf kedua, setelah paragraf pertama. Paragraf ini akan memiliki lekukan dari paragraf pertama. Anda dapat melihat contoh penggunaan paragraf di gambar di bawah ini.
|
Inilah yang kami dapatkan saat mulai menggunakan paragraf:
Dua komponen halaman muncul - dua paragraf dipisahkan oleh sebuah indentasi. Dan masalah dengan setiap paragraf baru. Untuk contoh pertama kita, dimana tag paragraf tidak digunakan, kita dapat menerapkan format berikut menggunakan tag "p":
Dengan menggunakan tag paragraf, teks menjadi lebih atau kurang mudah dibaca, sehingga halaman menjadi lebih menarik. Mari kita lihat dokumen yang tidak menggunakan tag paragraf:
Pagi yang cerah
Hari ini, aku bangun pagi seperti biasanya. Matahari pagi bersinar melalui tirai jendelaku. Meregangkan tubuh, aku pergi ke dapur. Aku membuat teh hijau untuk diriku sendiri, menambahkan dua sendok gula dan duduk di kursi empuk di depan jendela dapur. Saat itu musim gugur di luar.
Saya suka saat ini karena menurut saya musim gugur adalah waktu paling romantis sepanjang tahun. Setelah menghabiskan teh, aku mengambil ponselku dan menelepon kekasihku untuk mengucapkan selamat pagi. Sudah kuduga, dia masih tidur.
Kami mengobrol menyenangkan dan sepakat untuk bertemu sore ini saat matahari bersinar dan di luar hangat. Waktu berlalu. Dan sekarang kami bersama, makan siang di kafe lokal: makan, mengobrol, saling menggoda. Kami merasa nyaman bersama. Saya mencintai pacar saya dan itu juga berlaku untuk saya. Kami sedang berpikir untuk memulai sebuah keluarga...
Pagi yang cerahHari ini, aku bangun pagi seperti biasanya. Matahari pagi bersinar melalui tirai jendelaku. Meregangkan tubuh, aku pergi ke dapur. Aku membuat teh hijau untuk diriku sendiri, menambahkan dua sendok gula dan duduk di kursi empuk di depan jendela dapur. Di luar sedang musim gugur. Saya suka saat ini karena menurut saya musim gugur adalah waktu paling romantis sepanjang tahun. Setelah menghabiskan teh, aku mengambil ponselku dan menelepon kekasihku untuk mengucapkan selamat pagi. Sudah kuduga, dia masih tidur. Kami mengobrol menyenangkan dan sepakat untuk bertemu sore ini saat matahari bersinar dan di luar hangat. Waktu berlalu. Dan sekarang kami bersama, makan siang di kafe lokal: makan, mengobrol, saling menggoda. Kami merasa nyaman bersama. Saya mencintai pacar saya dan itu juga berlaku untuk saya. Kami sedang berpikir untuk memulai sebuah keluarga...
|
Seperti yang sudah Anda ketahui, saya menambahkan judul pada teks. Saya hanya menggunakan tiga paragraf, dan versi ini, seperti biasa, ternyata lebih baik dari versi sebelumnya. Sekarang kita memiliki pembagian semantik teks (indentasi antar paragraf). Secara umum, yang benar adalah mengatakan bukan “paragraf”, tetapi “paragraf”, karena tag “p” yang diterjemahkan dari bahasa Inggris berarti “paragraf”. Selanjutnya saya akan ucapkan paragraf, jadi jangan bingung.
Kira-kira inilah yang harus Anda dapatkan setelah menggunakannya tanda paragraf:
Tag paragraf, seperti semua tag HTML lainnya, memiliki atribut. Sekarang kita akan melihat atribut terpenting dari tag “p”.
- id – mendefinisikan pengidentifikasi universal yang digunakan saat menulis properti dalam file style sheet berjenjang (biasanya style.css). Nama pengidentifikasi hanya digunakan sekali dalam dokumen yang sama
- class – sama dengan id, tetapi dapat digunakan beberapa kali dalam dokumen yang sama
- title – keterangan alat yang ditampilkan di jendela browser saat Anda mengarahkan mouse ke teks paragraf
- style – mendefinisikan sekumpulan properti untuk cascading style sheet
- align – menentukan perataan teks paragraf relatif terhadap jendela browser (kiri – kiri, kanan – kanan, tengah – tengah, rata – rata)
- dll. (elemen JavaScript)
Contoh penggunaan atribut:
Dengan menggunakan tag paragraf, teks menjadi lebih atau kurang mudah dibaca, sehingga halaman menjadi lebih menarik. Mari kita lihat dokumen yang tidak menggunakan tag paragraf:
Jika Anda mengarahkan mouse ke teks ini, sebuah petunjuk akan muncul!!!
Paragraf ini rata kiri
Paragraf ini rata kanan
Paragraf ini rata tengah
Paragraf ini memiliki pengenal universal yang mengacu pada properti yang ditulis dalam file CSS dan hanya dapat digunakan satu kali pada halaman
Paragraf ini memiliki kelas MAIN-P, dapat ditetapkan beberapa kali pada satu halaman, tidak seperti pengidentifikasi ID
Paragraf ini digarisbawahi semua karena... menggunakan gaya berjenjang yang ditetapkan langsung ke paragraf ini menggunakan atribut tag STYLE. Pada nilai atribut STYLE, saya tentukan bahwa seluruh paragraf harus digarisbawahi: UNDERLINE
S
Paragraf ini digarisbawahi semua karena... menggunakan gaya berjenjang yang ditetapkan langsung ke paragraf ini menggunakan atribut tag STYLE. Pada nilai atribut STYLE, saya tentukan bahwa seluruh paragraf harus digarisbawahi: UNDERLINE S |
Halo! Mari kita terus melihat dasar-dasar pemrograman website. Sulit membayangkan setidaknya satu di antaranya tidak mengandung tag paragraf dalam kodenya. Hari ini kita akan melihat cara menulisnya dengan benar dan menjelaskan beberapa tindakan tambahan dengan teks.
Contoh
Mari kita lihat contoh cara membuat paragraf dalam kode HTML.
Satu atau lebih kalimat.
Prasyaratnya adalah adanya tag pembuka dan penutup. Omong-omong, Anda bisa melakukan semuanya langsung di Notepad, Anda hanya perlu menyimpan file dalam format yang sesuai nanti.
Pemformatan
Tak jarang saya memperhatikan orang-orang tertarik dengan cara membuat garis merah. Untuk paragraf tertentu hal ini dilakukan dengan sangat sederhana.
Mengaktifkan opsi ini akan mengindentasi baris pertama 15 piksel dari tepi kiri. Jika perubahan tersebut harus diterapkan pada semua tag P, maka pada file CSS yang terhubung dengan halaman situs, Anda dapat menulis kode seperti di bawah ini.
Secara pribadi, saya biasanya tidak membuat garis merah saat mengedit kode di Notepad atau editor lainnya.
Saya hanya menyertakan padding di antara blok teks. Untuk melakukan ini, Anda perlu menulis dalam CSS parameter khusus.
p(margin-bawah:25px;)
Jika Anda menggunakan desain ini, maka setelah setiap paragraf akan muncul indentasi sebesar 25 piksel.
Faktanya, ada banyak pilihan untuk bekerja dengan HTML dan berbagai gaya. Saya hanya menjelaskan beberapa di antaranya; sangat sulit untuk membahas semuanya dalam satu artikel.
Ingin tahu lebih banyak? Anda mungkin menemukan publikasi saya sebelumnya tentang topik berikut berguna:
Di sinilah saya akan menyimpulkan artikel dan, menurut saya, sekarang tidak akan sulit membuat paragraf dalam HTML dan memformatnya dengan indah menggunakan tag khusus.
Saya berharap Anda sukses besar dalam menguasai pemrograman. Ngomong-ngomong, pernahkah Anda berpikir untuk menghasilkan uang di situs informasi nirlaba? Dia memberikan informasi yang luar biasa khusus untuk para pembacanya.
Pekerjaan online normal dan keuangan adalah topik utama blog ini. Anda dapat mengenal prospek individu secara online sekarang dari materi yang diterbitkan. Saya terus mempersiapkan dan menerbitkan konten baru, dan yang terpenting, konten yang sangat bermanfaat. Berlangganan pembaruan Workip di Anda e-mail. Sampai jumpa lagi.
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 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 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 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 memilih sebuah fragmen yang berisi informasi yang 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
Tetapi kode 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 memfokuskan 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 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:
- 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 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 -, paragraf
, paragraf
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 sejenis 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!