Elemente pentru cod de calculator în HTML

Elemente HTML pentru Cod de Calculator

HTML are mai multe elemente pentru afișarea input-ului utilizatorului și a codului de calculator, precum <kbd>, <samp>, <code> și <var>.

HTML <kbd> Pentru Input de Tastatură

Elementul <kbd> marchează input-ul de tastatură. Conținutul său este afișat cu fontul monospațiat implicit al browserului.

Exemplu

O scurtătură de tastatură marcată cu <kbd>.

O pagină care folosește elementul kbd pentru a marca intrarea de la tastatură: „Save the document by pressing Ctrl + S” cu Ctrl + S ca intrare de la tastatură.

> Rezultat: pagină HTML completă

Prompt

O pagină care folosește elementul kbd pentru a marca intrarea de la tastatură: „Save the document by pressing Ctrl + S” cu Ctrl + S ca intrare de la tastatură.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kbd</title>
</head>
<body>

<p>Salvați documentul apăsând <kbd>Ctrl + S</kbd></p>

</body>
</html>

HTML <samp> Pentru Ieșirea unui Program

Elementul <samp> marchează un exemplu de ieșire dintr-un program de calculator. Conținutul său este afișat cu fontul monospațiat implicit al browserului.

Exemplu

Un exemplu de ieșire de program marcat cu <samp>.

O pagină care folosește elementul samp pentru a marca ieșirea eșantion a unui program: un mesaj care spune „File not found.” apoi „Press F1 to continue” cu o întrerupere de linie.

> Rezultat: pagină HTML completă

Prompt

O pagină care folosește elementul samp pentru a marca ieșirea eșantion a unui program: un mesaj care spune „File not found.” apoi „Press F1 to continue” cu o întrerupere de linie.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Samp</title>
</head>
<body>

<p>Mesaj de la calculatorul meu:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>

</body>
</html>

HTML <code> Pentru Cod de Calculator

Elementul <code> marchează o bucată de cod de calculator. Conținutul său este afișat cu fontul monospațiat implicit al browserului.

Exemplu

O bucată de cod marcată cu <code>.

O pagină care folosește elementul code pentru a afișa o bucată de cod de calculator: x = 5; y = 6; z = x + y;

> Rezultat: pagină HTML completă

Prompt

O pagină care folosește elementul code pentru a afișa o bucată de cod de calculator: x = 5; y = 6; z = x + y;

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elementul Code</title>
</head>
<body>

<code>
x = 5;
y = 6;
z = x + y;
</code>

</body>
</html>

Păstrarea Întreruperilor de Linie

Elementul <code> nu păstrează spațiile suplimentare și întreruperile de linie. Pentru a le păstra, pune elementul <code> în interiorul unui element <pre>.

Exemplu

Cod în interiorul unui <pre> pentru a-i păstra întreruperile de linie.

O pagină care pune un element code în interiorul unui element pre, astfel încât spațiile suplimentare și întreruperile de linie sunt păstrate, afișând x = 5; y = 6; z = x + y; pe linii separate.

> Rezultat: pagină HTML completă

Prompt

O pagină care pune un element code în interiorul unui element pre, astfel încât spațiile suplimentare și întreruperile de linie sunt păstrate, afișând x = 5; y = 6; z = x + y; pe linii separate.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code în Pre</title>
</head>
<body>

<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>

</body>
</html>

HTML <var> Pentru Variabile

Elementul <var> marchează o variabilă în programare sau într-o expresie matematică. Conținutul său este de obicei afișat cursiv.

Exemplu

Variabile marcate cu <var> într-o propoziție.

O pagină care folosește elementul var pentru a marca variabile într-o propoziție: aria unui triunghi este 1/2 x b x h, unde b este baza, iar h este înălțimea verticală.

> Rezultat: pagină HTML completă

Prompt

O pagină care folosește elementul var pentru a marca variabile într-o propoziție: aria unui triunghi este 1/2 x b x h, unde b este baza, iar h este înălțimea verticală.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elementul Var</title>
</head>
<body>

<p>Aria unui triunghi este: 1/2 x <var>b</var> x <var>h</var>, unde <var>b</var> este baza, iar <var>h</var> este înălțimea.</p>

</body>
</html>

Rezumatul Capitolului

Pe scurt: elementul <kbd> marchează input-ul de tastatură, <samp> marchează un exemplu de ieșire a unui program, <code> marchează o bucată de cod, <var> marchează o variabilă, iar <pre> marchează text preformatat.