Bagaimana cara membuat teks html yang membungkus gambar? Membungkus teks di sekitar gambar menggunakan html dan css

Dengan menggunakan properti float, Anda dapat meratakan gambar ke kiri (img (float: left; margin: 0 [x] [y] 0;)) atau kanan (img (float: right; margin: 0 0 [x] [y] ; )) tepi halaman web atau blok penampung.

Untuk mencegah gambar menyatu dengan teks, nilai properti margin yang sesuai ditambahkan ke dalamnya.

Membuka blok berikutnya teks atau judul menggunakan konstruksi h2, p (jelas: kiri;) atau h2, p (jelas: kanan;).

Anda juga dapat menempatkan gambar di tengah halaman img (display: block; margin: 0 auto;), atau membuat teks membungkus gambar di kedua sisi, membungkus setiap blok teks dalam paragraf terpisah.

markup HTML

Daftar kota di Inggris

Amersham

Amersham adalah ....jpg">Buxton adalah ...

Chesterfield

Chesterfield adalah ....jpg">

Ini memiliki ....jpg">Dartmouth adalah ...

gaya CSS

Isi ( margin: 0; latar belakang: #FFF8E8; padding: 0 20px; ukuran font: 90%; counter-reset: h2; /*buat penghitung untuk judul apa pun h2*/ ) h1 (font-family: "Lora" , serif; color: #564C4A; font-weight: 300; ) h2 ( font-family: "Lora", serif; color: #B00D22; font-weight: 300; clear: keduanya; /* batalkan pembungkusan pada kedua sisi */ padding: 1em 0 0.25em; border-bottom: 2px solid; counter-inrice: h2; /* atur penomoran heading h2 menjadi satu */ ) h2:before ( content: " " counter(h2) ". "; /* tambahkan di awal setiap header nilai penghitung saat ini dan titik dengan spasi */ ) p ( font-family: arial; color: #785F5B; line-height: 1.3; ) /***** ***** gambar di sebelah kiri ** ********/ .left ( float: kiri; margin: 0 1em 1em 0; ) /********** gambar di sebelah kanan **********/ .right ( float: right; margin: 0 0 1em 1em; ) /********* gambar di antara teks **********/ .columns ( float: kiri; lebar maksimal: 30%; margin: 0; ) .img-center ( float: kiri; margin: 0 1,5% 0 1,5%; lebar maksimal: 37%; ) /********* gambar di tengah********* */ .center ( tampilan: blok; margin: 0 otomatis 1,5%; )

Bungkus gambar di kedua sisi

Tekniknya, teks diletakkan dalam dua blok yang lebarnya sama dengan celah kecil di tengahnya. Menggunakan elemen semu:sebelum dan:sebelum, placeholder setengah lebar gambar dan tinggi ditambahkan ke setiap blok, tinggi yang sama gambar. Gambar benar-benar diposisikan sedemikian rupa sehingga menutupi blok-blok kosong ini, sehingga menghasilkan efek sampul di kedua sisi.

markup HTML

Morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Ada apa dengan est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim dalam fasilitasi turpis pulvinar. Tentu saja. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, porttitor accumsan, facilisis luctus, metus

Pada artikel ini kita akan melihat opsi untuk membungkus teks di sekitar gambar. Ada beberapa cara. Mari kita lihat masing-masingnya. Untuk memulai, saya menyarankan Anda untuk membaca artikel tag html untuk memiliki pengetahuan dasar dari gambar di halaman html.

1. Membungkus dengan Gaya Tag

Gambar hanya dapat diselaraskan dengan mengoperasikan gaya tanda CSS . Seperti yang Anda ketahui, sintaks tag memungkinkan Anda mengatur perataan gambar dalam atribut:

di mana VALUE dapat mengambil nilai

kiri - perataan kiri
perataan kanan - kanan
bawah - perataan ke baris teks pertama (ini adalah default)
atas - penyelarasan oleh baris teratas teks
tengah - perataan ke baris dasar teks

Misalnya

Teks teks teks teks teks teks teks teks teks teks teks teks

Gambarnya sepertinya menyatu dengan teks, jadi kita akan membuat beberapa indentasi. Selain itu, ada dua pilihan bagaimana hal ini dapat dilakukan.

Opsi 1.1. Melalui properti CSS - hspace dan vspace
Untuk melakukan ini, di atribut tag tambahkan dua nilai:

Inilah yang akan terlihat pada halaman tersebut:

Atribut hspace menentukan padding horizontal dalam piksel, dan vspace – masing-masing padding vertikal.

Opsi 1.2. Melalui properti CSS - padding dan margin
Untuk melakukan ini, di atribut tag tambahkan dua nilai:

Inilah yang akan terlihat pada halaman tersebut:

Ini terlihat lebih baik karena kami tidak membuat lekukan di sebelah kiri. Alih-alih margin, Anda bisa menggunakan padding, efeknya akan serupa.

Menggunakan properti float alih-alih menyelaraskan

Selain properti align pada atribut tag gaya mengandung CSS properti mengapung, yang juga bertanggung jawab untuk penyelarasan. Sintaksnya adalah sebagai berikut:

mengapung :kanan; // Penjajaran yang benar Perataan kiri

Misalnya jika Anda menulis output gambar pada contoh sebelumnya sebagai berikut:

Kemudian berubah menjadi berikut ini.

Memiliki gambar di halaman web akan meningkatkannya penampilan, menarik perhatian dan juga mempromosikan persepsi yang lebih baik teks. Bungkus di sekitar gambar teks html memungkinkan Anda menghubungkan konten dengan ilustrasi dan menempatkan materi secara rasional. Cara-cara baru dalam menciptakan gambar terus dikembangkan untuk mewujudkannya ide-ide kreatif. Pada saat yang sama, gaya tata letak baru didasarkan pada metode yang sama, menciptakan ruang lingkup imajinasi yang tidak terbatas.

Pemosisian gambar relatif terhadap teks dapat dilakukan dalam html atau menggunakan properti CSS.

Tag HTML: teks yang membungkus gambar

Gambar disusun pada halaman dengan tiga cara:

posisi sentral;
pembungkusan teks;
masukkan ke dalam lapangan.

Pada ukuran besar gambarnya diletakkan di tengah halaman, terlebih dahulu ditempatkan dalam sebuah wadah< p > tag gambar, setelah itu atribut align="center" disetel untuknya. Jika gambar tersebut sering digunakan, sebaiknya gunakan gaya CSS untuk menandai< p >.

Jika gambarnya kecil, teks ditempatkan di sebelahnya. Caranya adalah yang paling umum. Pembungkusan teks dilakukan dengan beberapa cara. Tapi pertama-tama gambar itu perlu ditampilkan di layar. Jika jalur ke sana diketahui, misalnya "foto1.jpg", maka akan dimasukkan ke dalamnya halaman html menggunakan entri berikut:

< p>< img src =" foto1.jpg ">< /p>

Contohnya sesuai dengan kasus kapan file html dan gambar ada di folder yang sama.

Jika gambar diikuti dengan teks maka akan muncul di bawah. Ini tidak selalu nyaman, karena akan ada kursi kosong Oleh karena itu, halaman tersebut didesain sedemikian rupa untuk membuat teks html yang membungkus gambar. Untuk melakukan ini, tag img memiliki atribut align, yang menentukan lokasi foto atau gambar relatif terhadap teks. Parameter ini menentukan di tepi halaman mana materi grafis berada dan bagaimana teks mengalir di sekitarnya.

Atribut dapat diatur ke nilai berikut:

kiri - memindahkan gambar ke kiri saat teks mengalir ke kanan;
kanan - membungkus gambar di sebelah kiri saat ditempatkan di sebelah kanan;
bawah - nilai default, ketika gambar terletak di sebelah kiri, baris teks pertama dimulai di bagian bawahnya;
atas - gambar ditempatkan serupa dengan nilai sebelumnya, tetapi baris pertama terletak di tingkat atasnya;
tengah - baris teks awal berlawanan dengan bagian tengah gambar.

Tag img memiliki parameter yang dapat digunakan untuk mengatur jarak teks ke gambar (hspace dan vspace). Tanpa menggunakannya, teks akan ditempatkan dekat dengan gambar. Selain itu, mereka memilih dimensi keseluruhan lebar dan tinggi gambar. Dalam hal ini proporsi antara lebar dan tinggi harus diperhatikan. Jika Anda tidak menentukan dimensinya, secara default gambar ditransfer dengan dimensi sumbernya, yang tidak selalu nyaman.

Memindahkan gambar ke kiri yang dikelilingi teks dapat dilakukan dengan menulis:

< p>< img src =" foto1.jpg " align="left" width=150 height=100 hspace=5 vspace=5>Teks< /p>

Menggunakan tabel

Membungkus teks html di sekitar gambar mudah dilakukan menggunakan tabel dengan gambar di dalam sel. Di sini properti align diterapkan ke tag tabel. Tabel memiliki parameter yang lebih dapat dikontrol, sehingga memberikan keuntungan bagi tabel:

< table width=170 height=120 border=0 align=left cellpadding=0 cellspacing=0 >
< img src= "foto2.jpg" width=150 height=100>

< /table >

Batas tabel dibuat tidak terlihat dan mencegah teks mendekat ke gambar. Ruang antara dan di dalam sel dapat disesuaikan.

Menggunakan Gaya

Dari contoh sebelumnya Anda dapat melihat betapa mudahnya membungkus teks html di sekitar gambar. CSS memungkinkan Anda mencapai hasil serupa. Pembungkusan dibuat menggunakan properti float. Di sini juga, penyelarasan disediakan oleh nilai kiri dan kanan.

Untuk melakukan ini, buat kelas dan tetapkan gaya CSS ke dalamnya:

margin: 5px 12px 3px 0px;

Properti gaya float kemudian ditambahkan ke pemilih img:

< img src= "foto1.jpg" class="fotoleft" >

Selain menyelaraskan gambar menggunakan nilai kiri, di sini Anda juga dapat mengatur indentasi teks dari gambar properti margin. Teks dibungkus di sebelah kiri dengan cara yang sama jika Anda menerapkan properti kanan.

Gaya memungkinkan Anda untuk melapisi teks langsung ke gambar. Untuk melakukan ini, teks dimasukkan ke dalam blok dengan latar belakang tembus cahaya, yang ditumpangkan pada gambar.

Membungkus teks dan melapisinya pada gambar secara efektif tidaklah terlalu sulit, karena hal ini dicapai melalui eksperimen yang konsisten.

Bungkus gambar bulat dengan teks html

Halaman web terutama terdiri dari bidang persegi panjang. Semua orang tahu cara membungkus teks di sekitar gambar dalam HTML. Gaya digunakan untuk membuat bentuk geometris, tetapi tidak terkait dengan meletakkan konten di dalam atau di luar elemen. Anda dapat membagi gambar menjadi 2 bagian dan menempatkan blok indentasi dengan lebar berbeda di kedua sisi. Ada teks tepat di belakang mereka.

Proses pembuatan bungkus seperti itu memakan waktu dan harus dilakukan secara terpisah untuk setiap gambar baru.

Bungkus teks di sekitar bentuk kompleks

Dengan mengembangkan spesifikasi Bentuk CSS baru, kami dapat memberikan pengaruh desain yang ada dan memberinya perspektif baru. Konten sekarang dapat dibungkus angka yang kompleks dan daerah melengkung.

Spesifikasi didukung peramban Chrome Canary, dan sekarang mencoba menerapkannya pada sisanya. Ini memungkinkan Anda membuat desain yang rumit tanpa bantuan editor grafis.

Mengalir gambar bulat teks html disediakan menggunakan entri berikut:

bentuk-luar: lingkaran(-300px,-300px,300px); /* (x, y, radius) */

< p>Contoh teks< /p>

Kode tersebut membuat lingkaran yang melingkari teks dengan sempurna.

Bentuk tidak beraturan apa pun akan tercipta dengan cara yang sama, berkat dukungan Photoshop, yang memungkinkan Anda mendapatkan kode CSS dari bentuk tersebut.

Kesimpulan

Saat membuat tata letak halaman menggunakan cara yang berbeda Dengan menempatkan gambar dan teks di atasnya, Anda dapat membuat desain yang unik. Untuk melakukan ini, Anda perlu menguasai aturan tata letak dasar yang memastikan teks html membungkus gambar.

Halo semuanya. Pada pelajaran sebelumnya kita telah mempelajari cara menyisipkan gambar dan . Namun, ada satu masalah yang belum terselesaikan. Agar halaman terlihat cantik dan menarik, gambar harus dikelilingi teks. Hari ini kita akan mencoba menyelesaikan masalah ini menggunakan html dan css.

Cara mengatur teks yang membungkus gambar menggunakan html.

Seingat kita, sebuah gambar disisipkan ke dalam teks sebagai berikut:

Untuk mendorongnya ke tepi kiri halaman dan memaksa teks mengalir di sekelilingnya ke kanan, kita menambahkan parameter berikut ke kode:

Seperti yang Anda lihat, atribut bertanggung jawab atas posisi gambar pada halaman dan “pembungkusan” teks yang sesuai di sekitarnya. meluruskan. Untuk menekan gambar ke tepi kanan dan membuat teks mengalir di sekitarnya di sebelah kiri, Anda perlu menyetel nilai atribut ini:

Cara menyesuaikan teks yang membungkus gambar menggunakan css.

Properti ini jarang disetel langsung melalui html. Lebih sering, posisi gambar dan teks di sekitarnya ditentukan dalam file style.css. Hal ini dapat dilakukan dengan memberikan kelas pada gambar dan mendeskripsikan kelas ini dalam css.

Kami mendefinisikan kelas sebagai berikut.

kelas="gambar" />

Pengidentifikasi kelas "gambar" bisa berupa apa saja. Yang penting cocok dokumen html dan lembar gaya. Faktanya, dalam style sheet (yaitu file style.css) Anda perlu menentukan properti berikut

Gambar(

mengapung:kiri; /* Rata kiri */

Untuk menyelaraskan ke kanan: