Inserting an html fragment on a separate page
Posted: Tue Jan 28, 2025 3:20 am
Inserting html code into a page, for example, into any content, is even easier - through the control panel, find the article you need to edit and open it. Then go to the editing mode and simply place the html code in the desired sector.
Insert html fragment
The visual editor can interfere with your changes and delete them, because it does not read the insert as html code. Such an action is meant to exclude malicious codes. Therefore, when graphic design email list saving, it is necessary to disable the visual editor.
Recommended articles on this topic:
Examples of USP to make yours even cooler
Selling price list: 5 marketing tricks + 10 tips for design
Cross-marketing: 5 examples and 8 mistakes
How to Show HTML Code Examples on a Page in WordPress
Usually, program html code is not output in WordPress. The exception is specialized resources where programming, website promotion, web design, etc. are discussed.
Advanced authors, instead of simply adding code or its individual fragments to the site, make syntax highlighting or implement a simple action in other ways. For visitors to such resources, highlighting supposedly makes perception easier.
If you insert HTML code into the text, WordPress distorts it. To avoid interpreting the code, processing is used - ready-made plugins are used or the necessary tags are written manually using the option in the editor.
Case: VT-metall
Find out how we reduced the cost of attracting an application by 13 times for a metalworking company in Moscow
Find out how
How to add code to an article without a plugin
In WordPress, the resource administrator is provided with a special assistant built into the content management system. If the user adds one or more code snippets in visual mode, then switching to the WordPress text editor changes the characters in the tags from <text> to < text >.
In order for the content management system (CMS) to understand that this block should be reflected on the page in the same form, it is processed in text mode - highlighted and framed on both sides with the <code> tag. There is a button of the same name on the toolbar for this operation.
Code button
On the page we will see the following picture:
<tableborder="1">
<tr>
<th>Name 1</th>
<th>Title 2</th>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
The <pre> tag helps insert HTML code with certain indents into a WordPress page. When switching from a visual editor to a text editor, it preserves all the spaces that are used to form the desired indent. Browsers by default use a monospace font to display the contents of the <code> and <pre> tags.
An example of how to correctly insert html code into a page in WordPress without plugins using the <pre> tag:
<tableborder="1">
<tr>
<th>Name 1</th>
<th>Title 2</th>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
You can extend the functionality of the <pre> tag with universal attributes, for example, for text alignment (align) or defining a style (style).
Let's look at an example of how to use the style attribute values to assign the text and background color of a block, the thickness, color, and radius of the block's border:
<pre style="color: #006600; background-color: #DAF0FF; border: 1px solid #C7C3C3; border-radius: 5px;">
Attributes are widely used to format blocks that appear on a page, but their potential also has its limits.
If you insert small blocks of HTML code or a single line into a page as examples, the tags discussed earlier are perfect for this. As a result, the insertion looks unpretentious, as does the entire design, but for some purposes this is enough.
Complex formatting, such as syntax highlighting, requires plugins, which will be discussed later.
Insert html fragment
The visual editor can interfere with your changes and delete them, because it does not read the insert as html code. Such an action is meant to exclude malicious codes. Therefore, when graphic design email list saving, it is necessary to disable the visual editor.
Recommended articles on this topic:
Examples of USP to make yours even cooler
Selling price list: 5 marketing tricks + 10 tips for design
Cross-marketing: 5 examples and 8 mistakes
How to Show HTML Code Examples on a Page in WordPress
Usually, program html code is not output in WordPress. The exception is specialized resources where programming, website promotion, web design, etc. are discussed.
Advanced authors, instead of simply adding code or its individual fragments to the site, make syntax highlighting or implement a simple action in other ways. For visitors to such resources, highlighting supposedly makes perception easier.
If you insert HTML code into the text, WordPress distorts it. To avoid interpreting the code, processing is used - ready-made plugins are used or the necessary tags are written manually using the option in the editor.
Case: VT-metall
Find out how we reduced the cost of attracting an application by 13 times for a metalworking company in Moscow
Find out how
How to add code to an article without a plugin
In WordPress, the resource administrator is provided with a special assistant built into the content management system. If the user adds one or more code snippets in visual mode, then switching to the WordPress text editor changes the characters in the tags from <text> to < text >.
In order for the content management system (CMS) to understand that this block should be reflected on the page in the same form, it is processed in text mode - highlighted and framed on both sides with the <code> tag. There is a button of the same name on the toolbar for this operation.
Code button
On the page we will see the following picture:
<tableborder="1">
<tr>
<th>Name 1</th>
<th>Title 2</th>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
The <pre> tag helps insert HTML code with certain indents into a WordPress page. When switching from a visual editor to a text editor, it preserves all the spaces that are used to form the desired indent. Browsers by default use a monospace font to display the contents of the <code> and <pre> tags.
An example of how to correctly insert html code into a page in WordPress without plugins using the <pre> tag:
<tableborder="1">
<tr>
<th>Name 1</th>
<th>Title 2</th>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
You can extend the functionality of the <pre> tag with universal attributes, for example, for text alignment (align) or defining a style (style).
Let's look at an example of how to use the style attribute values to assign the text and background color of a block, the thickness, color, and radius of the block's border:
<pre style="color: #006600; background-color: #DAF0FF; border: 1px solid #C7C3C3; border-radius: 5px;">
Attributes are widely used to format blocks that appear on a page, but their potential also has its limits.
If you insert small blocks of HTML code or a single line into a page as examples, the tags discussed earlier are perfect for this. As a result, the insertion looks unpretentious, as does the entire design, but for some purposes this is enough.
Complex formatting, such as syntax highlighting, requires plugins, which will be discussed later.