- HTML Computer Code Elements
- Example
- HTML For Keyboard Input
- Example
- HTML For Program Output
- Example
- HTML For Computer Code
- Example
- Example
- HTML For Variables
- Example
- Chapter Summary
- HTML Exercises
- HTML Computer Code Elements
- HTML Computer Code Elements
- The HTML tag
- Example of the HTML tag:
- The HTML tag:
- Example of the HTML tag:
- The HTML tag:
- Example of the HTML tag:
- The HTML tag
- Example of the HTML tag:
- HTML Tag
- Syntax
- Example of the HTML tag:
- Result
- Example of the HTML tag placed inside an HTML tag:
- Example of the HTML tag with CSS properties:
- Attributes
- How to style tag?
- Common properties to alter the visual weight/emphasis/size of text in tag:
- Coloring text in tag:
- Text layout styles for tag:
- Other properties worth looking at for tag:
- HTML Программный код
- HTML Program Examples with Output [Writing Your First HTML Page]
- What is HTML?
- Different Types of Tags in HTML
- 1. Root element tag
- 2. Head element tag
- 3. Body element tag
- What is Empty HTML element?
- HTML Program Examples with Output using all the Basic Tags:
- Homepage Headline
- How to Execute an HTML Program File?
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.
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
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]
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.
- 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.
- 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.