Page Title

HTML Computer Code Elements

HTML contains several elements for defining user input and computer code.

Example

HTML For Keyboard Input

The HTML element is used to define keyboard input. The content inside is displayed in the browser’s default monospace font.

Example

Define some text as keyboard input in a document:

Save the document by pressing Ctrl + S

HTML For Program Output

The HTML element is used to define sample output from a computer program. The content inside is displayed in the browser’s default monospace font.

Читайте также:  Counting occurrences in string java

Example

Define some text as sample output from a computer program in a document:

Message from my computer:

File not found.
Press F1 to continue

File not found.
Press F1 to continue

HTML For Computer Code

The HTML element is used to define a piece of computer code. The content inside is displayed in the browser’s default monospace font.

Example

Define some text as computer code in a document:

Notice that the element does not preserve extra whitespace and line-breaks.

To fix this, you can put the element inside a element:

Example

HTML For Variables

The HTML element is used to define a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.

Example

Define some text as variables in a document:

The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical height.

Chapter Summary

  • The element defines keyboard input
  • The element defines sample output from a computer program
  • The element defines a piece of computer code
  • The element defines a variable in programming or in a mathematical expression
  • The element defines preformatted text

HTML Exercises

HTML Computer Code Elements

Tag Description
Defines programming code
Defines keyboard input
Defines computer output
Defines a variable
Defines preformatted text

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник

HTML Computer Code Elements

The computer has a special formatting and text style for displaying the messages that are connected to codes. There exist different computer code elements in HTML.

The HTML tag

Example of the HTML tag:

html> html> head> title>Title of the document title> head> body> p>This is an ordinary text. p> code>This is a program code. code> p>This is the continuation of the ordinary text. p> body> html>

The HTML tag:

Example of the HTML tag:

html> html> head> title>Title of the document title> head> body> p>var>x var> = var>y var> + 5 p> body> html>

The HTML tag:

Example of the HTML tag:

html> html> head> title>Title of the document title> head> body> h2>The kbd example h2> p>You can paste the document by pressing kbd>Ctrl + V kbd>. p> body> html>

The HTML tag

Example of the HTML tag:

html> html> head> title>Title of the document title> head> body> p>This is an ordinary text. samp>But this is a sample text. samp> Here is another ordinary text. p> body> html>

Источник

HTML Tag

The tag is used to insert variables, fragments of program code, etc. into an HTML document. In the browser, the code is displayed in a monospaced font (a font in which all characters have the same width) of the smaller size.

The tag alone represents a single code line or code phrase. It should be wrapped within a element for representing several lines of code.

You can use CSS to achieve better effects.

Syntax

The tag comes in pairs. The content is written between the opening () and closing () tags.

Example of the HTML tag:

html> html> head> title>Title of the document title> head> body> p>Ordinary text. p> code>Line of program code. code> p>Continuation of the ordinary text. p> body> html>

Result

code exemple

Example of the HTML tag placed inside an HTML tag:

html> html> head> title>Title of the document title> head> body> pre> code> body < color: yellow; font-size: 16px; line-height: 1.5; >code> pre> body> html>

Example of the HTML tag with CSS properties:

html> html> head> title>Title of the document title> style> .code-style < font-size: 20px; line-height: 28px; background-color: lightblue; color: #ffffff; > style> head> body> p>Ordinary text. p> code class="code-style">Line of program code. code> p>Continuation of the ordinary text. p> body> html>

Attributes

How to style tag?

Common properties to alter the visual weight/emphasis/size of text in tag:

  • CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
  • CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
  • CSS font-size property sets the size of the font.
  • CSS font-weight property defines whether the font should be bold or thick.
  • CSS text-transform property controls text case and capitalization.
  • CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in tag:

  • CSS color property describes the color of the text content and text decorations.
  • CSS background-color property sets the background color of an element.

Text layout styles for tag:

  • CSS text-indent property specifies the indentation of the first line in a text block.
  • CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
  • CSS white-space property specifies how white-space inside an element is handled.
  • CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for tag:

  • CSS text-shadow property adds shadow to text.
  • CSS text-align-last property sets the alignment of the last line of the text.
  • CSS line-height property specifies the height of a line.
  • CSS letter-spacing property defines the spaces between letters/characters in a text.
  • CSS word-spacing property sets the spacing between words.

Источник

HTML Программный код

Надписи, выполненные моноширинными шрифтами, создаются с помощью тегов , и . Результаты применения этих тегов обычно идентичны: моноширинный шрифт с фиксированным размером символов и интервалов.

Тег

Тег — cтрочный элемент-контейнер, который применяется для вставки в него небольших фрагментов программного кода, например, в веб-документе, представляющем учебное пособие по программированию. Браузеры отображают такой код моноширинным шрифтом (например, Courier New). Если использовать ero совместно с элементом , то можно сохранить исходное форматирование кода.

Тег служит для ввода текста без форматирования, то есть с сохранением всех пробелов, табуляций и переносов строк. Внутри этого элемента можно применять большинство элементов форматирования текста.

Внимание: В языке HTML переносы строк, идущие подряд пробелы и табуляции игнорируются. Несколько пробелов подряд воспринимаются как один пробел.

Пример: использования элементов и

Внутри элемента браузер дублирует каждый встреченный пробел или перенос строки, сохраняя ваше исходное форматирование.

if (document.getElementsByClassName) < x = document.getElementsByClassName("pagination") if ( x.length>y)

Внутри элемента «pre» браузер дублирует каждый встреченный пробел или перенос строки, сохраняя ваше исходное форматирование.

 
 if (document.getElementsByClassName) < x = document.getElementsByClassName("pagination") if ( x.length>y)


Теги и

Тег отмечает фрагмент кода как вводимый пользователем с клавиатуры. Некоторые браузеры помечают такой текст дополнительным фоном.
Тег применяется для формирования компьютерного вывода, например, текста, отображаемого в консольном окне после ввода вами управляющего сценария. Этот редко используемый элемент просто выводит свое содержимое моноширинным шрифтом, как , , .

Пример: элементы и

Текст, который пользователь должен ввести с клавиатуры поместите
в элемент-контейнер «kbd».

Введите текст: Это — текст, вводимый с клавиатуры

Это — текст, который помещен в контейнер «samp»

 

Текст, который пользователь должен ввести с клавиатуры поместите в
элемент-контейнер «kbd».

Введите текст: Это — текст, вводимый с клавиатуры

Это — текст, который помещен в контейнер «samp»

Тег

Тег используется с целью дополнительного выделения переменных в программном коде. Он определяет переменную в математическом выражении или параметр программы и обычно отображается курсивом.

Пример: элементы

Кинетическая энергия тела:

Источник

HTML Program Examples with Output [Writing Your First HTML Page]

learn basic HTML tags

This is the first tutorial on HTML programming. If you want to learn HTML, you are in the right place.

In this tutorial, you will learn all the basics you require to write and run your first HTML code. I will also explain different HTML program examples with output.

Table of Contents

What is HTML?

HyperText Markup Language is popularly known as HTML. It is the language that the web browser understands. Every web developer should learn this language and it is the basic language to start with.

Every web page you see on the internet is written in the HTML language. Even the page you are reading now uses HTML.

So now it might be clear to you, that running HTML code you don’t require installing any software. You can execute the HTML file in any of your internet browsers.

HTML is the common language that is understood by all web browsers today.

Different Types of Tags in HTML

In HTML, everything is written using tags and elements. It is a markup language that means it is used to mark the content in the web document.

An HTML document provides structural and semantic information of a webpage to the browser.

HTML contains a set of tags and elements that together form markup content. An element defines the purpose of a tag.

Start and end tags are used at the beginning and ending of an element.

For example:

The above is an example of the complete element from starting

tag, the content ‘This is a paragraph’ to the ending tag

.

1. Root element tag

The HTML element represents the root of any HTML document thus, is the root element. The root element is present in all the documents and codes. The root element always contains a and a element.

2. Head element tag

element is like a container that contains the information about the document and how it must be perceived by the browser or search engines.

It includes meta, titles, style, link, script, NoScript, and base. How to include these tags in the head? – we will see that in the latter part of the HTML tutorial.

element is one mandatory element within the element. This title is displayed as the page title in the browser tab and also the search engines identify the page with the help of this title. So, each HTML document should compulsorily have a tag.

3. Body element tag

All the content that is visible in a browser is contained within the element. Each HTML document has a element under which all the content is written using different tags.

There can be only one element in a document.

What is Empty HTML element?

You might have wondered seeing some of the HTML tags do not have an ending tag.

Empty elements are those elements that have no content and can be used without a closing tag.

An example of such an element is
that is a break tag, it defines a break between lines. Empty HTML elements can be closed within the opening tag such as
.

Except for the empty elements, the rest all the elements needs a closing tag.

HTML Program Examples with Output using all the Basic Tags:

A cumulative example of all the elements we have described above is below.

     

Homepage Headline

This is before the break tag
and this after the break tag.

Note: DOCTYPE is used to identify the type of document as an HTML file.

Don’t bother about the tags inside the body tag. I will tell you about these tags in the next tutorial in detail (link given below the post).

How to Execute an HTML Program File?

There are two ways you can do that.

  1. Create a new file with an extension .html in Notepad (Windows) or Vim (Linux) or any of the text editors. Copy the above code and save it in the file. Open the file in any of the internet browsers.
  2. Copy the above code and run it in the online HTML code editor.

By executing HTML code, you can visualize and understand each of the HTML basic tags, in a better way.

In this HTML program examples with output, we have learned about the basic HTML elements and their uses. HTML elements define the structure of the web pages and contain a number of HTML tags.

HTML is a very simple language. And it is widely used to write web pages. HTML was developed in various versions and HTML5 is the latest version.

Источник

Оцените статью