Memformat paragraf HTML. Perataan teks dalam HTML

Saat menata halaman, sering kali perlu melakukan perataan tengah menggunakan metode CSS: misalnya, memusatkan blok utama. Ada beberapa opsi untuk memecahkan masalah ini, yang masing-masing cepat atau lambat harus digunakan oleh perancang tata letak mana pun.

Perataan teks tengah

Seringkali, untuk tujuan dekoratif, perlu mengatur perataan teks ke tengah; CSS dalam hal ini memungkinkan Anda mengurangi waktu tata letak. Sebelumnya hal ini dilakukan dengan menggunakan atribut HTML, namun sekarang standar tersebut memerlukan perataan teks menggunakan style sheet. Tidak seperti blok, yang marginnya perlu diubah, dalam CSS, pemusatan teks dilakukan menggunakan satu baris:

  • perataan teks:tengah;

Harta ini diwariskan dan diwariskan dari orang tua kepada seluruh keturunannya. Mempengaruhi tidak hanya teks, tetapi juga elemen lainnya. Untuk melakukan ini, mereka harus inline (misalnya, span) atau inline-block (blok apa pun yang memiliki kumpulan properti display: block). Opsi terakhir juga memungkinkan Anda mengubah lebar dan tinggi elemen, serta menyesuaikan indentasi dengan lebih fleksibel.

Seringkali di halaman, penyelarasan ditetapkan ke tag itu sendiri. Hal ini segera membuat kode menjadi tidak valid, karena W3C telah menyatakan atribut align menjadi usang. Tidak disarankan menggunakannya pada halaman.

Menyelaraskan blok ke tengah

Jika Anda perlu memusatkan div, CSS menawarkan cara yang cukup mudah: menggunakan margin. Indentasi dapat diatur untuk elemen blok dan elemen blok sebaris. Nilai properti harus 0 (padding vertikal) dan auto (padding horizontal otomatis):

  • margin:0 otomatis;

Sekarang opsi ini diakui benar-benar valid. Menggunakan padding eksternal juga memungkinkan Anda mengatur gambar agar berada di tengah: ini memungkinkan Anda menyelesaikan banyak masalah terkait posisi elemen pada halaman.

Sejajarkan blok ke kiri atau ke kanan

Terkadang perataan tengah CSS tidak diperlukan, tetapi Anda perlu menempatkan dua blok berdampingan: satu di tepi kiri, yang lain di kanan. Untuk tujuan ini, terdapat properti float, yang dapat mengambil salah satu dari tiga nilai: kiri, kanan, atau tidak sama sekali. Katakanlah Anda memiliki dua balok yang perlu ditempatkan berdampingan. Maka kodenya akan menjadi seperti ini:

  • .kiri (mengapung:kiri;)
  • .kanan(mengambang:kanan)

Jika ada juga blok ketiga, yang seharusnya ditempatkan di bawah dua blok pertama (misalnya footer), maka blok tersebut perlu diberi properti clear:

  • .kiri (mengapung:kiri;)
  • .kanan(mengambang:kanan)
  • footer (hapus: keduanya)

Faktanya adalah bahwa blok dengan kelas kiri dan kanan keluar dari aliran umum, yaitu semua elemen lainnya mengabaikan keberadaan elemen yang selaras. Properti clear:both memungkinkan footer atau blok lainnya melihat elemen yang keluar dari aliran dan melarang float di kiri dan kanan. Oleh karena itu, dalam contoh kita, footer akan bergerak ke bawah.

Penjajaran vertikal

Ada kalanya mengatur perataan tengah menggunakan metode CSS saja tidak cukup; Anda juga perlu mengubah posisi vertikal blok anak. Elemen inline atau inline-block apa pun dapat disarangkan di tepi atas atau bawah, di tengah elemen induk, atau di lokasi mana pun. Paling sering, blok perlu disejajarkan ke tengah; untuk ini, atribut perataan vertikal digunakan. Katakanlah ada dua blok, yang satu bersarang di dalam blok yang lain. Dalam hal ini, blok dalam adalah elemen blok sebaris (tampilan: blok sebaris). Anda perlu menyelaraskan blok anak secara vertikal:

  • perataan atas - .child(vertical-align:top);
  • perataan tengah - .child(vertical-align:middle);
  • perataan bawah - .child(vertical-align:bottom);

Baik perataan teks maupun perataan vertikal tidak memengaruhi elemen blok.

Kemungkinan masalah dengan blok yang selaras

Terkadang memusatkan div menggunakan CSS dapat menimbulkan sedikit masalah. Misalnya, saat menggunakan float: misalkan ada tiga blok: .first, .second, dan .third. Blok kedua dan ketiga terletak di blok pertama. Elemen dengan kelas kedua diratakan ke kiri, dan blok terakhir diratakan ke kanan. Setelah mendatar, keduanya terjatuh dari arus. Jika elemen induk tidak memiliki ketinggian yang ditetapkan (misalnya, 30em), maka elemen tersebut tidak akan lagi meregang setinggi blok turunannya. Untuk menghindari kesalahan ini, gunakan "spacer" - blok khusus yang melihat .second dan .third. Kode CSS:

  • .detik(mengambang:kiri)
  • .ketiga(mengambang:kanan)
  • .clearfix(tinggi:0; hapus: keduanya;)

Pseudo-class:after sering digunakan, yang juga memungkinkan Anda mengembalikan blok ke tempatnya dengan membuat pseudo-spacer (dalam contoh, div dengan kelas container terletak di dalam.pertama dan berisi.kiri dan.kanan) :

  • .kiri(mengambang:kiri)
  • .kanan(mengambang:kanan)
  • .container:after(content:""; tampilan:tabel; jelas:keduanya;)

Opsi di atas adalah yang paling umum, meski ada beberapa variasi. Anda selalu dapat menemukan cara paling sederhana dan nyaman untuk membuat pseudo-spacer melalui eksperimen.

Masalah lain yang sering dihadapi oleh desainer tata letak adalah penyelarasan elemen blok sebaris. Sebuah spasi secara otomatis ditambahkan setelah masing-masingnya. Properti margin, yang disetel ke indentasi negatif, membantu mengatasi hal ini. Ada metode lain yang lebih jarang digunakan: misalnya, zeroing. Dalam hal ini, font-size: 0 ditulis di properti elemen induk. Jika ada teks di dalam blok, maka ukuran font yang diperlukan sudah dikembalikan di properti elemen blok sebaris. Misalnya, ukuran font:1em. Metode ini tidak selalu nyaman, jadi opsi dengan indentasi eksternal lebih sering digunakan.

Menyelaraskan blok memungkinkan Anda membuat halaman yang indah dan fungsional: ini termasuk tata letak keseluruhan, penataan produk di toko online, dan foto di situs web kartu nama.

Seringkali, orang hanya malas atau tidak punya waktu untuk mempelajari antarmuka program Microsoft Word, itulah sebabnya muncul pertanyaan seperti “Bagaimana cara menyelaraskan teks di Word?” - baiklah, mari kita cari tahu. Saat Anda mengetik teks dalam program ini, teks tersebut secara otomatis disejajarkan ke kiri. Apakah bisa dipindah ke tengah? Atau di sisi kanan? Tentu saja ya. Selain itu, Anda dapat menempatkan judul (header dokumen) di tengah halaman, dan meratakan teksnya ke kiri.

Belajar menyelaraskan teks di MS Word

Pada bagian “Home” terdapat tombol-tombol khusus yang beberapa di antaranya bertugas untuk meratakan teks ke tengah, tepi kiri dan kanan, serta lebar dokumen.

Kami akan kembali ke sana nanti, pertama-tama mari kita cari tahu bagaimana cara tidak menyelaraskan teks.

Perataan teks salah di Word

Pengguna yang tidak berpengalaman sering kali mulai menyelaraskan teks sesuai kebutuhan mereka, menggunakan cara improvisasi - yaitu, menambahkan spasi tambahan atau mengetuk tombol "Tab". Perataan ini dianggap salah, karena jarak dari batas kiri dihitung dengan mata, sehingga sangat merepotkan untuk pengetikan atau pengeditan teks lebih lanjut. Selain itu, hampir tidak mungkin membuat lekukan yang diperlukan dengan mata, itulah sebabnya beberapa dokumen mungkin tidak diterima. Khususnya, ini berlaku untuk ijazah - tidak ada satu guru pun yang akan menerima teks yang dicetak dengan cara ini - semua persyaratan harus dipatuhi dengan ketat, hingga lekukan dan penyelarasan. Selain itu, metodenya sendiri tidak bisa disebut nyaman - Anda harus terlalu banyak mengetuk tombol dan Tab yang bermasalah.

Itu satu hal jika menyangkut ijazah. Bagaimana jika ini adalah dokumen resmi? Dengan pendekatan ini, Anda dapat dengan mudah kehilangan reputasi bisnis Anda. Itu sebabnya, untuk menyelaraskan teks, Anda harus menggunakan alat standar MS Word - tombol yang terletak di bagian "Beranda".

Untuk memeriksa kebenaran dokumen, ada juga tombol khusus; dengan mengkliknya, Anda akan melihat tanda-tanda tersembunyi, itulah sebabnya lebih baik mendekati masalah pemformatan teks dengan benar sejak awal.

Setelah mengklik, karakter aneh, banyak titik dan panah akan muncul di teks.

Titik-titik adalah ruang yang Anda masukkan. Panah – menekan tombol Tab, sisanya tidak memiliki arti praktis bagi kami pada tahap ini. Jadi, jika Anda meletakkan terlalu banyak spasi dalam satu baris untuk menyelaraskan teks sesuai kebutuhan, saat Anda mengklik tombol "Tampilkan semua karakter", kesalahan Anda akan segera terlihat - banyak titik dan panah.

Untuk mengembalikan dokumen ke bentuk sebelumnya, klik lagi tombol yang sama.

Sejajarkan teks menggunakan alat standar Microsoft Word

Jadi, mari kembali ke empat tombol yang sama yang disajikan sebelumnya.
  • Yang pertama bertanggung jawab untuk perataan kiri, yaitu teks akan “dimagnetisasi” ke tepi kiri;
  • Yang kedua bertanggung jawab atas penyelarasan pusat;
  • Yang ketiga bertanggung jawab atas keselarasan yang benar;
  • Yang keempat menyelaraskannya dengan lebar dokumen, yaitu mendistribusikan teks secara merata antara tepi kiri dan kanan, yang memungkinkan untuk mencapai tepi yang jelas dan rata.

    Seperti yang Anda lihat, semuanya sangat sederhana. Kami segera menyenangkan Anda, Anda tidak perlu menulis ulang teks - Anda dapat menyelaraskannya bahkan setelah dicetak. Pilih area yang diperlukan dengan mouse dan klik salah satu tombol.

    • Hingga saat ini, kami hanya menyelaraskan elemen ke kiri. Lebih tepatnya, Anda dan saya tidak melakukan ini sama sekali, dan browser itu sendiri menyelaraskan elemen ke kiri secara default. Tentu saja akan terlalu membosankan jika semuanya disejajarkan ke kiri. Oleh karena itu, ada berbagai cara untuk menyelaraskan ke tengah dan ke kanan.

    Penyelarasan elemen adalah sesuatu yang perlu Anda ketahui saat melakukan ini. Hal pertama yang perlu Anda lakukan adalah mengetik halaman sederhana.

    Alkisah ada sebuah tag

    Saya tidak menyarankan Anda untuk menggunakannya sekarang, karena tersedianya metode yang lebih modern, tetapi saya tidak bisa tidak menyebutkannya. Ini sangat, sangat mudah digunakan. Semua yang Anda perlukan untuk terpusat, Anda tempatkan di dalam tag ini. Misalnya disini kita menyelaraskan level 1 menuju ke tengah.



    Anda bisa menambahkan gambar, juga rata tengah, ayo pindah juga ke baris berikutnya menggunakan tag
    :


    Judul tingkat 1, rata tengah




    Itu adalah sebuah tanda

    , yang sudah usang, dan bertentangan dengan ekspektasi Anda terhadap tag Dan tidak ada. Katakanlah rata kiri secara default, rata tengah menggunakan tag
    , tapi bagaimana dengan yang benar?

    Untuk mengatasi masalah ini, para pengembang menemukan cara universal untuk menyelaraskan elemen HTML. Metodenya adalah dengan menggunakan apa yang disebut container, yang dibuat menggunakan tag

    . Artinya, segala sesuatu yang perlu ditempatkan dalam wadah tertentu ditempatkan di dalam tag
    . Dan tag ini sudah memiliki atribut " meluruskan", yang nilainya menentukan posisi wadah ini. Ada tiga nilai: " kiri", "tengah", "Kanan". Secara default, ini adalah " kiri“Namun, menurutku ini tidak mengejutkanmu.

    Mari kita menulis hal yang sama sekarang kode HTML, tapi dengan menggunakan container, mari kita sejajarkan bukan ke tengah, tapi ke kanan.





    Seperti yang Anda lihat, semuanya berfungsi. Saya menyarankan Anda untuk juga mengubah nilai atribut " meluruskan" untuk melihat jenis penyelarasan konten penampung lainnya.

    Cara lain untuk menyelaraskan elemen HTML- ini adalah tabel, tetapi topik ini perlu dibahas secara terpisah, jadi kita akan membicarakannya di salah satu artikel berikut.

    Untuk saat ini, halaman Anda akan terlihat seperti ini:






    Judul tingkat 1, rata tengah






    Judul tingkat 1, rata kanan






    Hormat kami, Mikhail Rusakov.

    P.S. Jika Anda ingin tahu lebih banyak tentang HTML, lalu lihat kursus gratis saya dengan contoh membuat situs web di HTML:

    jendela: Internet Explorer 3.0+, Firefox 1.0+, Google Chrome, Opera 3.51 - 6.xx dan 9.0+, Safari 3.1+, SeaMonkey 1.0+ [1].

    Linux: Firefox 1.0+, Chromium, Opera 5.0 - 6.xx dan 9.0+, SeaMonkey 1.0+ [2].

    Memusatkan konten halaman di area tampilan jendela browser menggunakan HTML - tanpa CSS. Wadah di mana konten halaman web akan ditempatkan disejajarkan di tengah - lebar dan tinggi: [Buka halaman contoh].

    Dan juga di Netscape 2.02 - 4.80 dan Offbyone. Di Netscape 2.02 - 4.80, ada beberapa pergeseran konten halaman ke sudut kiri atas area tampilan jendela browser karena cara program ini menyediakan ruang untuk bilah gulir.

    Dan juga di Netscape 2.02 - 4.80. Di Netscape 2.02 - 4.80, ada beberapa pergeseran konten halaman ke sudut kiri atas area tampilan jendela browser karena cara program ini menyediakan ruang untuk bilah gulir.

    Subdito dan tema yang mirip

    Netsurf: Hv3: Dillo: Links2 Saat ini, browser web yang benar-benar ringan adalah browser yang tidak bekerja atau bekerja sangat terbatas dengan JavaScript dan Flash. Karena browser web, bahkan dengan antarmuka paling ringan sekalipun, akan menjadi berat ketika bekerja dengan Internet modern, dipenuhi dengan skrip dan multimedia. Hanya ada sedikit browser seperti itu dan beberapa di antaranya sedang bergerak menuju kemampuan JavaScript - mis. sampai-sampai keluar dari kategori "Peramban Web Ringan". Browser web yang ringan bisa lebih canggih - bekerja dengan CSS. Atau kurang - tidak bekerja dengan CSS atau bekerja sangat lemah. Netsurf - / beranda / Saat ini browser web ringan tercanggih untuk Linux. Dukungan CSS yang sangat menyeluruh. Kerja bagus dengan HTML. Dukungan JavaScript sangat lemah, yang dapat dinonaktifkan. Untuk sistem *nix ada versi yang dapat bekerja tanpa X, menggunakan framebuffer kartu grafis. Awalnya dibuat untuk OS RISC dan baru kemudian di-porting ke Linux. Ada juga versi untuk sistem *nix lainnya, untuk AmigaOS, AmigaOS 4, Atari OS, BeOS/Haiku, Mac OS X, MorphOS. (Lebih lanjut tentang karakteristik teknis Netsurf) NetSurf 3.0 di PuppyLinux 5.2.8: netsurf-browser.org NetSurf 3.0 di PuppyLinux 5.2.8: w3schools.com/browsers/browsers_stats.asp NetSurf 3.0 di PuppyLinux 5.2.8: en.wikipedia .org /wiki/Netsurf NetSurf 3.0 di PuppyLinux 5.2.8: ebay.com NetSurf 3.0 di PuppyLinux 5.2..htm NetSurf 3.0 di PuppyLinux 5.2.8: twitter.com Hv3 - / halaman beranda / Browser web ringan yang kurang canggih untuk Linux, tapi itu juga memiliki dukungan CSS yang signifikan. Dukungan JavaScript/ECMAScript yang lemah. Kerja bagus dengan HTML.

    Ada banyak layanan online untuk membuat sitemap.xml. Namun, Anda dapat melakukannya sendiri di komputer menggunakan browser lynx dan beberapa utilitas baris perintah Linux. Berikut ini adalah contoh skrip bash bernama "sitemap.sh" yang menggunakannya. Skrip Bash yang membuat file sitemap.xml: #!/bin/bash cd /home/me/sitemap/www/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://www.compmiscellanea.com/ > / dev /null cd /home/me/sitemap/www2/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://compmiscellanea.com/ > /dev/null cat /home/me/sitemap/www2/traverse.dat > > /home/me/sitemap/www/traverse.dat cat /home/me/sitemap/www/traverse.dat | sed -e "s/\ \.//g" | sortir | uniq > /home/me/sitemap/sitemap/sitemap.xml sed -i "s/\&/\&\;/g" /home/me/sitemap/sitemap/sitemap. xml sed -i "s/"/\&apos\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/"/\"\;/g" /home/me/sitemap/ peta situs/peta situs.xml sed -i "s/>/\>\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s//" /home/me/sitemap/sitemap/sitemap.xml sed -i -e "s/$/<\/loc><\/url>/" /home/me/sitemap/sitemap/sitemap.xml sed -i -e "1 saya\r\r \r\r\r\r" /home/me/sitemap/sitemap/sitemap.xml sed -i -e "$ a \\r" /home/me/sitemap/sitemap/sitemap.xml sed -i "/static/d" /home/me/sitemap/sitemap/sitemap.xml echo "...Done" Setelah file skrip bash siap: "chmod +x sitemap.sh" agar dapat dieksekusi. Unduh sitemap.sh di arsip sitemap.sh.tar.gz (Setelah arsip diunduh dan dibongkar, ganti http://www.compmiscellanea di file .com/ ke nama domain situs yang diinginkan dengan "www" dan ganti http://compmiscellanea.com/ dengan nama domain situs yang diinginkan tanpa "www". Alih-alih "statis" di baris terakhir file, letakkan baris itu tautannya harus berisi. mereka dihapus dari daftar. Kemudian "chmod +x sitemap.sh". Kemudian jalankan sitemap.sh) Unduh sitemap2.sh dengan komentar baris demi baris di arsip sitemap2.sh.tar.gz. Anda perlu membuat tiga folder. Karena browser lynx dalam beberapa kasus mungkin melewatkan beberapa tautan jika nama domain situs ditentukan dengan atau tanpa "www", skrip bash menjalankan lynx dua kali, memproses situs dengan nama domain dengan "www" dan memproses situs menggunakan nama domain tanpa "www". Dua file yang dihasilkan ditempatkan di dua folder berbeda, ini adalah "/home/me/sitemap/www/" dan "/home/me/sitemap/www2/". Dan direktori "/home/me/sitemap/sitemap/" ditujukan untuk sitemap.xml yang dibuat. 1. Jalur ke bash #!/bin/bash 2. Buka folder - browser lynx akan menempatkan di sana file yang diterima saat memproses situs dengan nama domain dengan "www" cd /home/me/sitemap/www/ 3.

    Tampaknya tidak ada yang sulit untuk memasang gambar atau teks di tengah jendela browser. Kami menggunakan tag CENTER dan semuanya berjalan ke tempat yang kami inginkan. Namun, tidak semuanya sesederhana itu. Ada tiga cara untuk melakukan center align, masing-masing memiliki karakteristik dan perbedaan tersendiri pada browser yang berbeda.

    Salah satu tag paling sederhana dan nyaman, CENTER, dirancang untuk menyelaraskan blok teks. Tag ini juga dapat digunakan untuk memusatkan gambar dan tabel. Pengecualian adalah elemennya atau yang perataannya ditentukan oleh properti tag IMG. Jadi, jika Anda menempatkan sebuah elemen di dalam tag CENTER, gambar akan rata kanan.

    Contoh 4.1. Memusatkan dengan tag CENTER


    Teks ini akan disejajarkan dengan bagian tengah jendela browser, dan di bawahnya
    menggambar di tepi kanan.

    Secara formal, CENTER hanya boleh digunakan sebagai parameter tag blok lainnya (P, PRE, dan lainnya). Namun, di browser Netscape Navigator 2.0, CENTER diperkenalkan sebagai tag terpisah. Penambahan ini dirancang untuk menghilangkan ruang vertikal ekstra yang muncul saat menggunakan tag blok. Jika alih-alih tag CENTER, teks ditempatkan di dalam paragraf (

    ) , ada tambahan spasi vertikal antara garis horizontal dan teks ini.

    CENTER bukan bagian dari spesifikasi HTML. Dalam HTML "resmi", pemformatan seperti perataan teks harus dilakukan melalui atribut tag (mis.

    ) atau menggunakan gaya. Namun, tag ini telah memperoleh hak untuk hidup. Namun, setelah spesifikasi HTML 4 W3 dipublikasikan, Konsorsium merekomendasikan untuk tidak menggunakan tag CENTER dan sebagai gantinya menggunakan elemen

    ...
    , seperti yang ditunjukkan pada contoh 4.2.

    Contoh 4.2. Memusatkan dengan Tag DIV



    Memusatkan teks menggunakan tag DIV

    Cara lain untuk memusatkan adalah dengan menggunakan gaya. Gaya adalah instruksi yang memungkinkan Anda mengontrol atribut pemformatan seperti font, warna, perataan, dll. Contoh penggantian tag P untuk memusatkan teks.

    Contoh 4.3. Pemusatan dengan Gaya






    Sekarang kapan Anda akan menggunakan tag P dengan yang di atas
    gaya, teks paragraf akan disejajarkan dengan bagian tengah jendela browser



    • Sergei Savenkov

      semacam ulasan "pendek"... seolah-olah mereka sedang terburu-buru di suatu tempat