CrazyEngineers Logo

how the html code was placed

hi friends,
when we open the site like friends18.com we find some html code for some images but any one khow how the html code was placed there is they are in image form.
.
or there is any html code for creating thats like box in which html is placed.
.
😁

Replies

  • gaurav.bhorkar
    gaurav.bhorkar
    I guess its just preformatted text enclosed in 
     ......
    or in ....... tags.
  • Morningdot Hablu
    Morningdot Hablu
    gaurav.bhorkar
    I guess its just preformatted text enclosed in 
     ......
    or in ....... tags.
    isn,t working gaurav it will display the picture for which i writen the html code.
    .
    i just want to display the html code like displayed in friends18.com like sites.

    😁
  • gaurav.bhorkar
    gaurav.bhorkar
    Wops...not working.
    The tag is only for computer code (like C++).

    As a workaround you can use < for < and > for > signs. But I guess, that wont solve your problem.

    Any CEan to address this issue?
  • gaurav.bhorkar
    gaurav.bhorkar
    UPDATE:

    I checked the source of the friends18.com site and found out that they also have used < and > for < and > respectively.

    So, I guess, this is the only solution for your problem.

    One more suggestion from me, also wrap your code in 
     tag so that the indention is also preserved.
  • Manish Goyal
    Manish Goyal
    yes gaurav is right you can use < and & gt;

    For more knowledge you can refer this site

    W3Schools Online Web Tutorials
  • Morningdot Hablu
    Morningdot Hablu
    gaurav.bhorkar
    UPDATE:

    I checked the source of the friends18.com site and found out that they also have used < and > for < and > respectively.

    So, I guess, this is the only solution for your problem.

    One more suggestion from me, also wrap your code in 
     tag so that the indention is also preserved.
    thanks gaurav,
    finally i will got the solution in simple way i think insert code here that will do this but it will print my code in just one line can u help me to print my code in many different lines.
    😁
  • gaurav.bhorkar
    gaurav.bhorkar
    mohit007kumar00
    thanks gaurav,
    finally i will got the solution in simple way i think insert code here that will do this but it will print my code in just one line can u help me to print my code in many different lines.
    Well, tag is deprecated, I'd suggest not to use it.<br /> <br /> I found one solution to your problem. Use the <textarea> tag with wrap attribute to display html code. It will also wrap the text.<br /> <br /> Following is an example code:<br /> <br /> <pre style="margin: 1em auto" title="Code"><html> <head> <title>Hello</title> </head> <body> [COLOR=DarkRed][B]<textarea rows=15 cols=30 wrap=hard>[/B][/COLOR] [url=https://www.crazyengineers.com][img]https://farm4.static.flickr.com/3199/2962311462_cd81b8f8ff_o.png[/img][/url] Wassap <i>Hello world</i> [COLOR=DarkRed][B]</textarea>[/B][/COLOR] </body> </html></pre>Checkout the output, and I'm sure you'll appreciate the use of <textarea> tag. </div> </div> </div> </li> <li> <div class="flex space-x-3"> <div class="flex-shrink-0"> <img class="h-10 w-10 rounded-full" src="https://www.crazyengineers.com/img/avatar.jpg" alt="Manish Goyal"> </div> <div> <div class="text-sm"> <span class="text-gray-900 font-bold">Manish Goyal</span> </div> <div class="mt-1 prose prose-sm text-gray-700"> Check this also <br /> <pre style="margin: 1em auto" title="Code"><html> <head> <title> How Html COde placed </title> </head> <body> <table border="1"> <tr> <td> &lt html &gt;<br/> &lt head &gt;<br/> &lt title &gt;<br/> How Html COde placed<br/> &lt /title &gt;<br/> &lt /head &gt;<br/> </td> </tr> </body> </html></td> </tr> </body> </html></pre> </div> </div> </div> </li> </ul> </div> </div> <div class="bg-gray-200"> <div class="bg-gray-200 prose prose-sm text-center"> <p>You are reading an archived discussion.</p> </div> </div> </div> </section> </div> <h2 class="text-2xl font-bold my-4">Related Posts</h2> <div class="post bg-gradient-to-r from-orange-50 to-rose-50 border-gray-200 p-6 rounded-md mb-3"> <div class="space-y-4 pb-6"> <div class="text-2xl leading-8 font-bold text-gray-800"> <h2><a href="/threads/how-do-document-converters-work.32739">How do document converters work?</a></h2> </div> <div class="sm:col-span-2"> <div class="space-y-2"> <div class="prose prose-sm"> <div class="text-gray-800"> how do converters work? how does our program come to know what data is there in the document? [like what is there in each cell of an excel file?] </div> </div> </div> </div> </div> </div> <div class="post bg-gradient-to-r from-orange-50 to-rose-50 border-gray-200 p-6 rounded-md mb-3"> <div class="space-y-4 pb-6"> <div class="text-2xl leading-8 font-bold text-gray-800"> <h2><a href="/threads/notepad-the-small-wonder.32740">Notepad - The Small Wonder</a></h2> </div> <div class="sm:col-span-2"> <div class="space-y-2"> <div class="prose prose-sm"> <div class="text-gray-800"> 10 Amazing things you can do with NOTEPAD😁 Source: Internet </div> </div> </div> </div> </div> </div> <div class="post bg-gradient-to-r from-orange-50 to-rose-50 border-gray-200 p-6 rounded-md mb-3"> <div class="space-y-4 pb-6"> <div class="text-2xl leading-8 font-bold text-gray-800"> <h2><a href="/threads/exhaust-gas-pressure.32741">exhaust gas pressure</a></h2> </div> <div class="sm:col-span-2"> <div class="space-y-2"> <div class="prose prose-sm"> <div class="text-gray-800"> how much pressure(approx.) does the exhaust gas of a bike have? </div> </div> </div> </div> </div> </div> <div class="post bg-gradient-to-r from-orange-50 to-rose-50 border-gray-200 p-6 rounded-md mb-3"> <div class="space-y-4 pb-6"> <div class="text-2xl leading-8 font-bold text-gray-800"> <h2><a href="/threads/hockey-world-cup.32742">Hockey World Cup</a></h2> </div> <div class="sm:col-span-2"> <div class="space-y-2"> <div class="prose prose-sm"> <div class="text-gray-800"> India beats Pakistan 4-1 😁 Hockey World Cup taking place in Delhi, India World Class newly built stadium playing as host Australia lost today in its first match </div> </div> </div> </div> </div> </div> <div class="post bg-gradient-to-r from-orange-50 to-rose-50 border-gray-200 p-6 rounded-md mb-3"> <div class="space-y-4 pb-6"> <div class="text-2xl leading-8 font-bold text-gray-800"> <h2><a href="/threads/c-compiler-64-bit.32743">C++ compiler(64 bit)</a></h2> </div> <div class="sm:col-span-2"> <div class="space-y-2"> <div class="prose prose-sm"> <div class="text-gray-800"> i wanna have 64 bit C++ compiler for win. 7,if anyone can help me out to get that,i would b realy thank full to him. thanking you </div> </div> </div> </div> </div> </div> </main> <aside class="hidden xl:col-span-3 xl:block"> <aside class="hidden xl:block xl:col-span-3 sticky top-20"> <div class="prose prose-sm space-y-2 mt-4 rounded-lg p-4 bg-gray-50"> <div> <h3>About CrazyEngineers</h3> <p>CrazyEngineers is on a mission to unite engineers around the world. Network with the best engineers around the world who exchange ideas, share knowledge and have fun together.</p> </div> </div> <div class="my-4"> <div class="flex items-center" aria-hidden="true"> <div class="w-full border-t border-gray-300"></div> </div> </div> <div class="mt-3 leading-loose text-xs text-gray-800"> <a href="/about" class="text-xs text-gray-800 hover:text-gray-900 ">About ·</a> <a href="/privacy" class="text-xs text-gray-800 hover:text-gray-900 ">Privacy ·</a> <a href="/terms" class="text-xs text-gray-800 hover:text-gray-900 ">Terms of Service ·</a> <a href="/contact" class="text-xs text-gray-800 hover:text-gray-900 ">Contact Us ·</a> © 2005 - 2024 CrazyEngineers. All rights reserved. </div> </aside> </aside> </div> </div> <div id="emptyModal"></div> <div id="flashMessage" hidden></div> <script> function dataController(isPanelOpen, liked, likesCount) { return { isPanelOpen : isPanelOpen, liked: liked, likesCount : likesCount, replyBtnText : "Submit", replyBtnDisabled: false, updateLikes(uid) { this.likesCount = "Awesome!"; fetch('/likes/update', { method: "POST", headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content }, body: JSON.stringify({ id: uid, type: 'post' }) }).then(response => response.json()).then(response => { this.likesCount = response.likes_count; this.liked = response.has_user_liked; }); }, addReply(pid,reply) { this.replyBtnText = "Posting..."; this.replyBtnDisabled = true; fetch('/replies/store', { method: "POST", headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content }, body: JSON.stringify({ pid: pid, reply: reply, }) }).then(response => response.json()).then(response => { location.reload(); this.replyBtnText = "Submit"; this.replyBtnDisabled = false }); }, } } </script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-HKB432NPFQ"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-HKB432NPFQ'); </script> </body> </html>