Pelajaran 5.
Dalam pelajaran ini kita:
1. Kita belajar bagaimana membuat kode html lebih nyaman dan mudah dibaca untuk kita.
2. Mari kita cari tahu cara membungkus string teks dengan benar.
Kami membuat kode html nyaman.
Sekarang kode kami jelas dan mudah dibaca, karena memiliki sedikit teks dan hampir tidak ada tag. Ketika kita membuat halaman yang lebih kompleks, akan ada banyak tag di sana, jadi menemukan yang tepat akan sulit.
Untuk menghindari kekacauan tag, Anda harus mengatur tag dan garis pada awalnya agar lebih mudah dilihat secara visual. Ketika browser membaca informasi dari halaman html, tidak masalah berapa banyak spasi dan berapa banyak baris kosong dalam kode.
Saya mengubah teks dalam kode halaman relatif terhadap yang kami buat, tetapi itu tidak masalah. Kode yang sama digambarkan dalam gambar kiri dan kanan. Kedua opsi tersebut akan ditampilkan oleh browser pada layar monitor yang sama persis. Setuju, bekerja dengan kode yang ditunjukkan di sebelah kanan akan jauh lebih mudah daripada dengan yang di sebelah kiri.
Kode yang kami pertimbangkan sangat sederhana, tetapi bahkan sekarang, perbedaan dalam persepsi visual terlihat. Tidak ada aturan khusus untuk "memulihkan ketertiban", masing-masing master sendiri memutuskan bagaimana lebih nyaman baginya untuk bekerja.
Pemecah baris html. Beri tag & ltbr & gt.
Perhatikan gambarnya. Dalam versi pertama, teks ditulis dalam satu baris, dalam versi kedua dalam dua baris.
Browser akan menampilkan kedua opsi secara merata. Teks akan ditulis dalam satu baris:
Anda bertanya mengapa demikian? Memang, di salah satu kode bagian dari teks ditransfer ke baris lain. Akan logis jika bagian dari teks di browser juga ditransfer ke baris lain, tetapi html memiliki logikanya sendiri dalam hal ini. Jika kita melakukan pembungkus baris dalam kode html, maka untuk browser ini setara dengan satu spasi (seperti ruang reguler antara kata dalam teks). Jika kita mentransfer sebagian teks bukan satu baris ke bawah, tetapi 2 atau 3 (angka apa saja), browser akan tetap menganggap jarak ini sebagai satu ruang reguler antara kata-kata dan ketika ditampilkan di layar, teks akan ditulis dalam satu baris.
Beri tag & ltbr & gt
Ketika kami berkenalan dengan tag di pelajaran ketiga, saya menyebutkan bahwa ada tag yang tidak perlu ditutup. Tag & ltbr & gt salah satunya, berfungsi untuk memutus garis.
Mari kita terapkan dalam kode:
Kami telah memasukkan tag & ltbr & gt dalam kode html kami dan sekarang ketika Anda menjalankan file melalui browser, bagian dari teks akan ditransfer ke stok berikutnya.
* Jangan lupa untuk menyimpan perubahan di Notepad (Ctrl + S) dan tampilkan halaman di browser (F5).
Anda tidak mengerti sesuatu dari pelajaran ini? Tanya!
- [dilindungi email]
Halo, dalam pelajaran singkat ini saya akan menunjukkan kepada Anda bagaimana membungkus teks dan bagaimana mencegah teks dari membungkus ke baris baru.
Kebetulan ada kebutuhan untuk melanggar garis tanpa menutup paragraf, misalnya, dalam epigraf yang sama atau untuk menulis ayat.
Masuk HTMLdimungkinkan untuk mentransfer teks ke baris baru tanpa mengakhiri paragraf. Biasanya, browser mentransfer kata-kata tergantung pada ukuran jendela, dan kemampuan untuk secara independen menentukan lokasi transfer dapat berguna ketika menulis ayat atau untuk memisahkan berbagai elemen dari satu sama lain.
Untuk mentransfer teks ke baris baru, gunakan elemen BR, tidak memerlukan tag penutup, namun Anda disarankan untuk menulis tag pembuka sebagai < br/> .
Saat menggunakan item BRbaris kosong tidak ditambahkan setelah transfer.
Item lain BRdigunakan ketika Anda perlu mengatur aliran teks di sekitar tabel, gambar, atau elemen apung lainnya dari halaman, yaitu elemen yang atributnya ditentukan sejajarkan.
Untuk melakukan ini, gunakan atribut jelaselemen BR.
Ini dapat mengambil nilai-nilai berikut:
semua- Melarang aliran di sekitar elemen dari dua sisi.
kiri- melarang aliran di sekitar sisi kiri objek mengambang.
benar- melarang aliran di sekitar sisi kanan objek mengambang.
tidak ada - Membatalkan properti.
Jika aliran dilarang, maka teks mengikuti elemen BRakan ditampilkan pada baris setelah objek mengambang
Malam, jalan, lentera, apotek,
Cahaya tidak berarti dan redup.
Hidup seperempat abad lagi
Memang akan begitu. Tidak ada hasil.
Jika Anda mati, Anda akan memulai dari awal lagi
Dan semuanya akan diulangi, seperti yang sudah tua:
Malam, riak es dari kanal,
Farmasi, jalan, lentera.
Hasil:
Selain jeda baris wajib, kadang-kadang Anda perlu menggunakan tindakan yang berlawanan, yaitu, untuk menjamin bahwa teks tidak akan ditransfer ke baris baru dalam hal apa pun.
Jeda baris, jeda baris, jeda baris adalah satu hal. Dalam HTML, jeda baris sering digunakan. Ada beberapa cara: gunakan tag
untuk menerjemahkan ke baris baru, tetapi Anda dapat menggunakan properti CSS untuk membungkus baris. Pertimbangkan contoh menggunakan tag pemisah baris:
Dalam CSS, pembungkusan garis dapat dilakukan dengan berbagai cara, misalnya seperti ini:
Br (float: left; width: 100%; margin: 0 0 20px 0; / * indent setelah garis 20 piksel * /)
Membagi garis menggunakan HTML atau CSS
Dalam HTML, membuat garis pemisah sangat sederhana. Tag yang tidak berpasangan juga digunakan.
- ini adalah garis pemisah. Garis pemisah dimulai dengan garis baru dan ada lekukan setelahnya. Anda dapat mengontrol gaya garis horizontal, dan Anda juga bisa membuat alternatif untuk itu. Berikut ini adalah contoh garis pemisah menggunakan tag:
Sekarang mari kita gaya (ubah gaya, ubah penampilan) garis pemisah kami:
jam (lebar: 80%; / * lebar garis * / tinggi: 4px; / * tinggi / tebal garis * / latar belakang: # 333; / * latar belakang / warna garis * / batas: 0; / * bingkai di sekitar garis pemisah (hapus her) * / margin: 5px 0 5px 0; / * indentasi di atas dan di bawah garis 5 piksel * /)
Dan buat alternatif untuk garis pemisah kami menggunakan tag
Garis (lebar: 80%; / * lebar garis * / tinggi: 4px; / * tinggi / tebal garis * / latar belakang: # 333; / * latar belakang / warna garis * / batas: 0; / * bingkai di sekitar garis pemisah (hapus her) * / margin: 5px 0 5px 0; / * indentasi di atas dan di bawah garis 5 piksel * /)
Saya menyapa anda Tentu saja, dalam pembungkus baris html dapat dilakukan dengan dua cara. Jika Anda menggunakan editor visual dari WordPress, maka secara otomatis menambahkan jeda baris, seperti yang terjadi di program Microsoft Word atau editor teks lainnya. Tetapi kadang-kadang Anda perlu bekerja dengan teks dalam kode. Bagaimana cara membuat baris dalam kode html?
Bungkus garis
Ada satu tag pendek untuk ini dalam html -
(kependekan dari istirahat) Apa yang dia lakukan Semua teks yang ditulis setelah tag ini akan ditampilkan pada baris baru. Bahkan jika masih ada ruang pada jalur saat ini untuk outputnya, itu masih akan terbawa.
Menggunakan br
Anda perlu menggunakan tag hanya ketika Anda tidak perlu memulai paragraf baru, tetapi menampilkan teks hanya pada baris baru. Misalnya, Anda perlu menulis puisi. Agar tidak melampirkan setiap baris ayat dalam tag paragraf, Anda bisa menulis tag di akhir setiap baris
dan kemudian baris berikutnya turun. Ini sesederhana itu.
Tag tidak boleh digunakan sebagai alternatif untuk paragraf. Patut diingat bahwa indentasi terbentuk antara paragraf, tingginya sama dengan satu baris kosong. Saat mentransfer menggunakan br, indentasi kurang.
Bagaimana cara melakukan banyak transfer?
Dan bagaimana jika Anda perlu melakukan setelah beberapa teks untuk membuat indentasi besar dari konten lebih lanjut. Ada dua opsi untuk bagaimana melakukan ini. Anda dapat menulis banyak tag. Jadi, Anda dapat melakukan transfer dalam jumlah tak terbatas.
Tetapi lebih baik melakukannya dengan lebih benar. Anda dapat mengatur paragraf yang diinginkan ke kelas gaya, dan kemudian melalui css mengatur indentasi besar dari bawah.
Paragraf
Abzac (
Margin-bottom: 100px;
}
Dalam hal ini, indentasi bawah akan diatur ke 100 piksel. Dengan demikian, Anda dapat mendaftarkan indentasi apa pun.
Desain HTML untuk posting dan halaman sangat penting - membantu mendesain konten sedemikian rupa sehingga nyaman bagi pengguna untuk membacanya.
Saya akan memberi tahu Anda tentang tag br - ini membuat garis terpecah dalam HTML, yaitu, memecah baris menjadi dua bagian - dan melakukannya dengan paksa, mengakhiri garis saat ini di tempat di mana ia dimasukkan dan memindahkan bagian keduanya ke baris baru.
Di mana tag ini digunakan, kapan tepatnya kebutuhan mendesak muncul untuk menyisipkan pemisah baris dalam teks tanpa membuat paragraf baru? Misalnya, ini dapat berguna dalam desain konten - jika Anda memiliki situs dengan puisi dan ekstrak sajak, lirik, atau sesuatu seperti itu.
Semua tentang tag untuk pemecah baris br
Tag br melakukan pembungkus satu baris dalam HTML (seperti yang dijelaskan) dan didefinisikan oleh semua browser. Ya, saya hampir lupa - jika Anda menggunakan tag br, maka tidak seperti tag paragraf p, Anda tidak menambahkan indentasi kosong (sebelum baris).
Tag br kosong (artinya kosong tanpa konten, tidak mengandung apa pun), yang artinya tidak perlu ditutup. Dan karena itu tidak perlu ditutup, deskripsi singkat diciptakan - itu awalnya menyiratkan bahwa tag itu sendiri tidak memiliki tag penutup.
Bayangkan sejenak bahwa tidak akan ada deskripsi singkat. Lalu apa? Maka setiap kali kita harus "menutup dan membuka" garis memecah sesuatu seperti ini:
. Ini setidaknya tidak nyaman. Tetapi, bagaimanapun, dalam XHTML ketat Anda harus menutupnya dengan tag
.
Jika ada tugas untuk meningkatkan jarak vertikal - di antara garis-garis tempat Anda memasukkan tanda hubung - tanda hubung ganda dengan memasukkan tag
dua kali berturut-turut.
<br\u003e
Hasil:
Untuk mentransfer kalimat berikutnya ke baris baru, gunakan tag br.
Hore, kalimat kedua di baris baru.
Contoh nyata:
A. Blok
Malam, jalan, lentera, apotek,
Cahaya tidak berarti dan redup.
Hidup seperempat abad lagi
Semuanya akan jadi begitu. Tidak ada hasil.
Dan semuanya akan diulangi, seperti yang sudah tua:
Malam, riak es dari kanal,
Farmasi, jalan, lentera.
Hasil:
Malam, jalan, lentera, apotek,
Cahaya tidak berarti dan redup.
Hidup seperempat abad lagi
Semuanya akan jadi begitu. Tidak ada hasil.
Jika Anda mati, Anda akan memulai dari awal lagi
Dan semuanya akan diulangi, seperti yang sudah tua:
Malam, riak es dari kanal,
Farmasi, jalan, lentera.
Seperti apa:
Kenapa muncul dengan br br?
Kebutuhan akan tag ini ada, jika hanya karena memindahkan baris “like in Word” (seperti yang dilakukan oleh pengguna yang tidak berpengalaman), dengan menulis lusinan ruang dalam satu baris, tidak akan berfungsi.
Mengapa itu tidak berhasil? Karena sejumlah ruang akan dianggap oleh browser sebagai satu ruang, dan bukan satu baris - browser secara otomatis menghapus ruang ekstra. Untuk melakukan ini, Anda perlu jeda baris.
Tapi jangan menyalahgunakan tag
untuk meningkatkan penspasian baris semakin banyak - yang terbaik adalah menggunakan alat HTML + CSS dasar. Membuat paragraf baru atau “paragraf seperti” tidak dapat diterima (ini dianggap pendekatan yang buruk) - hanya istirahat baris!
Untuk membuat dan menandai paragraf Anda harus menggunakan tag p, dan untuk meningkatkan jarak yang tersedia antara paragraf, ubah style sheet cascading, misalnya, tambahkan:
margin-top: 40 px;
Bonus - jelas
Tetapi bagaimana memastikan bahwa teks tempat Anda meletakkan jeda baris tidak membungkus elemen mengambang (apakah ini adalah gambar dengan setel align atau elemen dengan properti float), tetapi mulai di bawah elemen? Anda dapat menggunakan atribut hapus untuk ini.
Misalkan kita memiliki gambar yang lurus ke kiri (align \u003d "left"). Jika kami menginstal
atau
lalu teks setelah tag
(baris berikutnya, yang kami bawa) akan ditampilkan sebagaimana mestinya, di bawah gambar. Nilai lain untuk atribut tag yang jelas
buat teks mengalir di sekitar gambar, terletak di sebelah kanan itu.
Penggunaan atribut khusus ini tidak didorong oleh spesifikasi HTML - kode tersebut tidak valid.
BONUS - tag jam
Tag
juga lajang, tetapi tidak seperti
, digunakan untuk membuat pemisah garis horizontal. Selain itu, kita dapat mendefinisikan tampilan garis ini menggunakan atribut. Tapi, tentu saja, lebih baik melakukan ini dengan metode yang terbukti melalui CSS (apa itu, baca).
BONUS - larangan membungkus baris baru dengan tag nobr
Kami juga ingin melarang jeda baris dan menghindari menerjemahkan teks ke baris baru: antara dua kata tertentu, atau sebagai keseluruhan paragraf. Apa yang harus dilakukan Gunakan tag
Apa yang dilakukan tag
Seperti yang kita pahami, ini sangat merepotkan. Tapi ada sebuah tag!
Ringkasan - Menggunakan br, nobr, hr, p dalam HTML
Untuk meringkas, saya meringkas isi artikel:
- tag
Untuk memisahkan paragraf
- tag
- untuk membungkus baris di dalam paragraf (“membuat paragraf” menggunakan tag ini atau menyalahgunakannya tidak dapat diterima) - tag
- untuk membuat garis pemisah horizontal - tag
- untuk mencegah jeda baris dalam HTML
