Ma u baahan tahay koodka si aad qoraalka ugu duubto sawir? Caadi ahaan markaad abuurto bogga HTML , wax walba waxay u socdaan si toos ah, taasoo la micno ah hal block si toos ah kan kale. ^(HTML)Dhammaan qoraaladaydii hore waxay tusaale u yihiin tan, tusaale ahaan qoraal, ka dibna sawir, ka dibna qoraal, iwm.

Mararka qaarkood waxaa laga yaabaa inaad rabto inaad ku darto qoraalka ku xiga sawirka halkii aad ka hoos ahaan lahayd. Tan waxa loo yaqaan qoraalka ku duubida sawirka. Runtii way fududahay in qoraalka lagu duubo HTML . Ogow inaadan u baahnayn inaad isticmaasho CSS si aad qoraalka u duubto.

Si kastaba ha ahaatee, maalmahan W3C waxay ku talinaysaa isticmaalka CSS halkii HTML ee hawlaha noocaan ah. Waxaan hoos ku xusi doonaa labada dariiqo, laakiin haddii aad awooddo, way fiicantahay inaad isticmaasho CSS maadaama ay aad ula qabsanayso naqshadaha shabakadaha.

Ku duub qoraalka ku wareegsan sawirka adoo isticmaalaya HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus iyo magnis dis parturient montes, nascetur ridiculus mus. Hoos ka akhriso qoraalkan. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

Si qoraalka loogu duubo dhinaca midig ee sawirka, waa inaad sawirka dhinaca bidix toosisaa:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

Haddii aad rabto in qoraalku ka soo muuqdo bidix, sawirkuna ka soo muuqdo midigta fog, kaliya u beddel cabbirka toosan oo u beddel “midig”.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus iyo magnis dis parturient montes, nascetur ridiculus mus. Hoos ka akhriso qoraalkan. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

Waa kaas! Aad^(Pretty) u fudud sax? Marka kaliya ee aad rabto inaad isticmaasho CSS waa haddii aad rabto inaad ku darto margin sawirada, si ay u jirto meel bannaan oo u dhaxaysa qoraalka iyo sawirka.

Waxaad ku dari kartaa margin sawirka adiga oo isticmaalaya koodka qaabaynta ee CSS ee soo socda:^(CSS)

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

Koodhka sare waxa uu isticmaalaa curiyaha MARGIN CSS^{(MARGIN CSS)} si uu ugu daro 10 pixels oo meel cad dhinaca midig ee sawirka. Mar haddii aan jaan-qaadnay sawirka bidix, waxaan rabnaa inaan ku darno goobta cad ee midigta.

Asal ahaan, afarta nambar waxay matalaan TOP MIDIG gunta hoose^{(TOP RIGHT BOTTOM LEFT)} ee Bidix . Markaa haddii aad rabto inaad booska cad ku darto sawir sax ah, waxaad samayn lahayd sidan:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

Markaa way fududahay in la isticmaalo HTML si loo qabto hawshan, laakiin mar labaad, waxa laga yaabaa inaanay si fiican ugu shaqaynayn goobaha jawaabaha leh.

Ku duub qoraalka ku wareegsan sawirka adoo isticmaalaya CSS

Sida ugu wanaagsan ee qoraalka loogu duubi karo sawirka waa in la isticmaalo CSS . Waxay ku siinaysaa kontorool dheeri ah oo hadhuudh ah oo ku saabsan meelaynta walxaha waxayna si fiican ugu shaqeysaa heerarka codaynta casriga ah.

<img src="IMAGE URL" alt="A photo" class="left" />

Inkasta oo aan CSS si toos ah ugu daray sawirka sawirka ee tusaalaha HTML , dhab ahaantii waa inaadan waligaa taas samayn. Taa beddelkeeda, waa inaad haysataa fayl gaar ah oo la yiraahdo stylesheet oo haya dhammaan koodka CSS kaaga.^(CSS)

Calaamadda IMG , waxaad si fudud ugu qoondaynaysaa fasalka sumadda oo waxaad siisaa magac. Tusaalahayga, waxaan magacaabay fasalka ka tagay^(left) . Xaashiyaha qaab-dhismeedka, waxa kaliya ee ay tahay in aan sameeyo waa in aan ku daro koodka soo socda:

.left {
 float: left;
 padding: 0 10px 0 0;}

Sida aad arki karto, waxaan ku daray 10px ee suufka dhinaca midig ee sawirka bidix ku toosan. Waxa kale oo aan u adeegsaday hantida sabayn si aan sawirka uga saaro socodka caadiga ah ee dukumeentiga oo aan dhigo dhinaca bidix ee weelka waalidka.

Sida aad arki karto, aad bay uga nadiifsan tahay in lagu daro dhammaan koodka sumadda IMG^(IMG) lafteeda. Sidoo kale way fududahay in la maareeyo oo waxaad isticmaali kartaa hanti badan oo CSS ah si aad u habayso muuqaalka boggaaga. Haddii aad wax su'aalo ah qabtid, xor u noqo inaad faallo ka bixiso. Ku raaxayso!

HTML Code to Wrap Text Around Image

Need the code to wrap text around an image? Normally when you create an HTML page, everything flows linearly, meaning one block directly after another. All of my prеvious posts are an example of thiѕ, i.e. text, then picture, then text, etc.

Sometimes you may want to include text next to an image instead of below it. This is called wrapping text around the image. It’s actually fairly easy to wrap text using HTML. Note that you don’t have to use CSS in order to wrap text.

However, these days the W3C recommends using CSS instead of HTML for these kinds of tasks. I’ll mention both methods below, but if you can, it’s better to use CSS since it’s more adaptable to responsive website designs.

Wrap Text Around Image using HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

In order to have the text wrap along the right side of the image, you have to align the picture to the left:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

If you want the text to appear on the left and the image to appear at the far right, just change the align parameter to “right”.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

That’s it! Pretty easy right? The only time you would want to use CSS is if you want to add margins to the pictures, so that there is some space between the text and the image.

You can add margins to a picture by using the following CSS styling code:

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

The above code uses the MARGIN CSS element to add 10 pixels of whitespace on the right side of the image. Since we have aligned the image left, we want to add the whitespace to the right.

Basically, the four numbers represent TOP RIGHT BOTTOM LEFT. So if you want to add the white space to a right-aligned image, you would do this:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

So it’s fairly simple to use HTML to perform this task, but once again, it may not work well for responsive sites.

Wrap Text Around Image using CSS

The better way to wrap text around an image is to use CSS. It’s gives you more fine grain control over the positioning of the elements and works better with modern coding standards.

<img src="IMAGE URL" alt="A photo" class="left" />

Even though I included CSS directly into the image tag in the HTML example, you really should never do that anymore either. Instead, you should have a separate file called a stylesheet that holds all of your CSS code.

In the IMG tag, you simply assign a class to the tag and give it a name. In my example, I named the class left. In my stylesheet, all I have to do is add the following code:

.left {
 float: left;
 padding: 0 10px 0 0;}

As you can see, I added 10px of padding to the right side of the left-aligned image. I also used the float property to move the image out of the normal flow of the document and put it to the left side of the parent container.

As you can see, it’s much cleaner than adding all that code to the IMG tag itself. It’s also easier to manage and you can use a lot more CSS properties to customize the look on your webpage. If you have any questions, feel free to comment. Enjoy!

Related posts

• Sida loo sawiro QR code iPhone iyo Android

• Sida loo daabaco fariimaha qoraalka ah ee Android

• Ku Keydi Liiska Habraacyada Socodka Faylka Qoraalka ee Daaqadaha

• Sida loo soo dejiyo faylasha oo loo eego Koodhka GitHub

• Ka dhex raadi faylal qoraal ah oo badan hal mar

• Isla markiiba ka saar asalka sawirada adoo isticmaalaya AI

• Sida hadh loogu daro qoraalka ama sawirka GIMP

• Sida qoraalka iyo sawirka loogu dhejiyo Taariikhda Boodhka gudaha Windows 11/10

• Sida Loo Akhriyo Qoraalka Kombayutarkaga

• Sida Loo Bedelo Disk Dynamic Disk-ga Aasaasiga ah

• Sida loo abuuro oo loo baadho Spotify Code

• Sida Looga Saaro Qoraalka Astaamaha ku jira Barta Taskbar ee Windows

• Sida Loo Qaado Screenshots on Nintendo Switch

• Sida loogu xidho sanduuqyada qoraalka ee Adobe InDesign

• Sida loo furo HTML File Google Chrome

• Sida Loo Eego Koodhka Isha ee Qaybka Furan ee Software-ka

• Sida loo soo dejiyo Google Chrome Offline (Standalone) Rakibaye

• Sida Loo Abuuro Koox Ka Mid Ah Kooxaha Microsoft

• Hagaaji Koodhka Cilada Cusboonaysiinta Windows 8E5E03FA

• Sidee si degdeg ah loogu duubaa qoraalka xaashida Google?