MrJazsohanisharma

Html code for program block

Ads

Html code for program block

In HTML, there is no specific "program block" element. However, you can use the <code> and <pre> tags to create a block of code that is displayed exactly as it is written, without any formatting applied. Here's an example:

<pre>

<code>

// This is a JavaScript program

let greeting = "Hello, world!";

console.log(greeting);

</code>

</pre>

<pre><code></code></pre>

In the above code, the <pre> tag creates a block-level element that preserves all whitespace and line breaks inside it. The <code> tag is nested inside the <pre> tag and contains the actual code. By using both tags together, we can display the code in a block format while preserving its formatting.


Alternatively, you can also use <div> or <section> tags to create a program block and then use CSS styling to format it accordingly. Here's an example:


<section class="program-block">

  <h2>JavaScript Program</h2>

  <pre>

    <code>

      let greeting = "Hello, world!";

      console.log(greeting);

    </code>

  </pre>

</section>

<style>

  .program-block {

    background-color: #f5f5f5;

    padding: 10px;

    border-radius: 5px;

    font-family: monospace;

  }

  .program-block h2 {

    font-size: 1.2em;

    margin-bottom: 10px;

  }

</style>

In the above code, we've created a <section> element with a class of "program-block" to contain our program. We've also added some CSS styles to give it a gray background, padding, and a monospace font. The <h2> tag is used to give the block a title, and we've styled it to make it slightly larger and add some margin at the bottom. Inside the <section> tag, we've used the <pre> and <code> tags to contain our code, just like before.

Ad

Post a Comment

Previous Post Next Post