Introduction to Computer Code Elements

HTML provides specific elements for displaying computer code, keyboard input, program output, and variables. These elements help maintain code formatting and improve accessibility.

Basic Code Elements

1. <code> Element

Used to display inline code snippets within text content.

<!-- Inline code snippet -->
<p>Use the <code>console.log()</code> function to output messages to the console.</p>

<!-- Multiple code elements -->
<p>In JavaScript, <code>let</code> and <code>const</code> are used for variable declarations.</p>

<!-- Code with other elements -->
<p>HTML elements like <code>&lt;div&gt;</code>, <code>&lt;span&gt;</code>, and <code>&lt;p&gt;</code> are fundamental building blocks.</p>

<!-- Styled code element -->
<p>CSS properties such as <code style="background: #f4f4f4; padding: 2px 4px; border-radius: 3px;">color: red;</code> can be inline styled.</p>

2. <pre> Element

Used to display preformatted text, preserving whitespace and line breaks.

<!-- Basic preformatted text -->
<pre>
This text will
preserve all
whitespace and
line breaks exactly
as written.
</pre>

<!-- Preformatted code -->
<pre>
function greeting() {
  console.log("Hello, World!");
  return "Welcome!";
}
</pre>

<!-- Pre with code element -->
<pre><code>
// JavaScript function
function calculateSum(a, b) {
  return a + b;
}

// Function call
const result = calculateSum(5, 3);
console.log(result);
</code></pre>

This text will preserve all whitespace and line breaks exactly as written.

function greeting() {
  console.log("Hello, World!");
  return "Welcome!";
}

Specialized Code Elements

1. <var> Element

Used to represent variables in mathematical expressions or programming contexts.

<!-- Mathematical variable -->
<p>The quadratic formula: <var>x</var> = (-<var>b</var> ± √(<var>b</var>² - 4<var>a</var><var>c</var>)) / (2<var>a</var>)</p>

<!-- Programming variable -->
<p>In the equation <var>y</var> = <var>mx</var> + <var>b</var>, <var>m</var> represents the slope.</p>

<!-- Code with variables -->
<p>Declare a variable: <code>let <var>userName</var> = "John";</code></p>

<!-- Multiple variables -->
<p>Swap variables: <code><var>a</var>, <var>b</var> = <var>b</var>, <var>a</var></code></p>

2. <kbd> Element

Used to represent keyboard input or keys that users should press.

<!-- Single key -->
<p>Press <kbd>Enter</kbd> to continue.</p>

<!-- Key combination -->
<p>Use <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text.</p>

<!-- Multiple combinations -->
<p>Common shortcuts: 
  <kbd>Ctrl</kbd> + <kbd>S</kbd> to save,
  <kbd>Ctrl</kbd> + <kbd>V</kbd> to paste,
  <kbd>Ctrl</kbd> + <kbd>Z</kbd> to undo
</p>

<!-- Styled keyboard keys -->
<p>Press <kbd style="padding: 2px 6px; background: #333; color: white; border-radius: 3px;">F5</kbd> to refresh the page.</p>

3. <samp> Element

Used to represent sample output from a computer program or system.

<!-- Program output -->
<p>The program output: <samp>Hello, World!</samp></p>

<!-- Command line output -->
<p>Terminal output:</p>
<pre><samp>
$ node script.js
Hello from Node.js!
Process completed successfully.
</samp></pre>

<!-- Error message -->
<p>Error message: <samp>Error: File not found</samp></p>

<!-- Multiple outputs -->
<p>Compilation results:</p>
<pre><samp>
Compiling project...
✓ 15 files processed
✓ 0 errors
✓ 2 warnings
Build successful!
</samp></pre>

$ node script.jsHello from Node.js!Process completed successfully.

Advanced Code Examples

1. Combined Element Usage

Using multiple code elements together for comprehensive documentation.

<!-- Tutorial example -->
<article>
  <h3>JavaScript Function Example</h3>
  
  <p>To create a function that calculates the area of a circle:</p>
  
  <pre><code>
function calculateArea(<var>radius</var>) {
  return Math.PI * <var>radius</var> * <var>radius</var>;
}
  </code></pre>
  
  <p>To use this function, call it with a radius value:</p>
  
  <pre><code>
const area = calculateArea(5);
console.log(area);
  </code></pre>
  
  <p>Expected output:</p>
  
  <pre><samp>
78.53981633974483
  </samp></pre>
  
  <p>Press <kbd>F12</kbd> to open developer tools and see the output in the console.</p>
</article>

<!-- Command line tutorial -->
<article>
  <h3>Git Commands</h3>
  
  <p>To initialize a new Git repository:</p>
  
  <pre><code>
git init
  </code></pre>
  
  <p>To stage all files:</p>
  
  <pre><code>
git add .
  </code></pre>
  
  <p>To commit changes:</p>
  
  <pre><code>
git commit -m "Initial commit"
  </code></pre>
  
  <p>Expected output after commit:</p>
  
  <pre><samp>
[main (root-commit) a1b2c3d] Initial commit
 3 files changed, 45 insertions(+)
 create mode 100644 index.html
 create mode 100644 styles.css
 create mode 100644 script.js
  </samp></pre>
</article>

function calculateArea(radius) {  return Math.PI * radius * radius;}

const area = calculateArea(5);console.log(area);

78.53981633974483

2. <output> Element

Represents the result of a calculation or user action (often used with forms).

<!-- Basic output element -->
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" name="a" value="10"> +
  <input type="number" id="b" name="b" value="20"> =
  <output name="result" for="a b">30</output>
</form>

<!-- Calculation output -->
<form oninput="total.value = parseInt(price.value) * parseInt(quantity.value)">
  <label for="price">Price: $</label>
  <input type="number" id="price" name="price" value="25"><br>
  
  <label for="quantity">Quantity: </label>
  <input type="number" id="quantity" name="quantity" value="2"><br>
  
  <label for="total">Total: $</label>
  <output name="total" for="price quantity">50</output>
</form>

<!-- Range slider with output -->
<form oninput="volumeOutput.value = volume.value">
  <label for="volume">Volume: </label>
  <input type="range" id="volume" name="volume" min="0" max="100" value="50">
  <output name="volumeOutput" for="volume">50</output>
</form>

Styling Code Elements

1. CSS Styling Examples

Custom styles for code elements to improve readability and aesthetics.

/* Basic code element styling */
code {
  background-color: #f4f4f4;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #ddd;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  color: #d63384;
}

/* Preformatted text styling */
pre {
  background-color: #2d2d2d;
  color: #f8f8f2;
  padding: 1rem;
  border-radius: 5px;
  overflow-x: auto;
  border: 1px solid #444;
  font-family: 'Fira Code', 'Courier New', monospace;
  line-height: 1.5;
  margin: 1rem 0;
}

/* Keyboard input styling */
kbd {
  background-color: #333;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #555;
  font-family: inherit;
  font-size: 0.85em;
  box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}

/* Variable styling */
var {
  font-style: italic;
  color: #e83e8c;
  font-family: 'Courier New', monospace;
}

/* Sample output styling */
samp {
  background-color: #e9ecef;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  color: #495057;
}

/* Output element styling */
output {
  background-color: #d4edda;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid #c3e6cb;
  font-weight: bold;
  color: #155724;
  min-width: 50px;
  display: inline-block;
  text-align: center;
}

/* Syntax highlighting classes */
.code-keyword { color: #ff79c6; }
.code-string { color: #f1fa8c; }
.code-comment { color: #6272a4; }
.code-number { color: #bd93f9; }
.code-function { color: #50fa7b; }

/* Usage in HTML */
<pre><code>
<span class="code-keyword">function</span> <span class="code-function">greet</span>(name) {
  <span class="code-keyword">const</span> message = <span class="code-string">"Hello, "</span> + name;
  <span class="code-comment">// Return greeting message</span>
  <span class="code-keyword">return</span> message;
}
</code></pre>

function calculate() {  const result = 10 * 5;  return result;}