Inserting html code into a page. How to add your own HTML code? How to disable the visual editor

The ability to place your own HTML code is present only on . This functionality is intended for those who are professionally versed in the web, need advanced features and know exactly what they will do with them.

Attention!

Working with this widget requires knowledge of HTML, CSS and JavaScript. Writing code with errors can lead to incorrect operation and display of the site.

You can place your HTML code:

Important:

The site must be published for the changes to take effect.

Working with jQuery scripts

If you want to use jQuery scripts on your site, then this must be done in a special way, since jQuery library connects to uKit in a non-standard way. All jQuery scripts should be placed in the control panel of your site in the “Custom Code” section. In this case, the code must be placed “At the end”. All your scripts should be wrapped with the require.js library like this:

require(["jquery"], function ($) (
Your code written in jQuery
})

Moreover, I would like to immediately clarify that we will insert the code into the article itself, so that our readers can copy it without wasting time typing the text itself. Thus, we will increase the convenience () of our resource - this time. And the articles will look more professional and complete - that's two.

I would also like to note that the information in this article will be useful to people who either, as we tell you, how to make various kinds of additions to the site, or users who simply like to share useful information. And it doesn’t matter that this information is code :) By the way, I’ll tell you a little secret; in this project we display it using the Wp-Syntex plugin.

You may ask: “Why do we use it?” The answer is simple - there are no comrades according to taste and color. Joke. In fact, we chose this plugin because it is easy to use, it perfectly adds visual style to various types of programming languages ​​(css, html, java, javascript, perl, sql, etc.), and does not overload our server.

Well, since I let it slip about Wp-Syntex, let’s use its example to show how to insert code into articles on WordPress.

First you need to install this plugin. We talked about how to do this in the article about. Therefore, describe this action I won't stand here.

As a result, you will see the following:

The code you want to be output

Also, instead of php in this code, you can insert another programming language, for example css or java. At the same time, the design style appearance will change.

Additional features of Wp-Syntex

If you add a line attribute to the opening "pre" tag, the code you need to insert will start like this:

The code you want to be output

Hope you notice the difference?

There is one more small attribute you may need - escaped . It allows you to convert html codes of characters directly into the characters themselves. For example, it converts ">" to ">". In order to make money this function, in the opening “pre” tag, insert the following attribute:

escaped="true"

Accordingly, the tag will begin like this:

< pre lang= "php" line= "1" escaped= "true" >

I also found information on the Internet that you can install another plugin (WP-Syntax Button), which works in conjunction with our plugin and adds a code insertion button to the WP editor. I wasn't too lazy and decided to test it.

Immediately when installing it, I was alarmed by the fact that it had not been updated for quite a long time and had not been tested with our version of WordPress. Well, what can I say, my fears were justified.

After activating the WP-Syntax Button, I decided to try inserting a java script into one of our articles. I did everything as indicated in the mountain of instructions and recommendations. I inserted the script into the article, selected it and pressed the “code” button.

Then he indicated the programming language and the line number from which the script output should begin.

You may be asking why I wrote about this experiment in this article? By this I wanted to say that when you are looking for some information on the Internet, pay attention to the date of publication. After all, there is a very high probability that the information in the old article was relevant several years ago, and this moment it simply doesn't work, and its use or implementation may leave your project vulnerable.

On our blog, I try to keep all the material up to date, constantly monitor updates and, if necessary, make adjustments to already written articles.

If you would like to receive up-to-date information on your email, then I recommend it.

Video “How to insert HTML code into an article”

Friends, if someone prefers to see how this is done, then I recorded a video for you. And I remind you that we also have a YouTube channel, which you can also subscribe to.

Related articles:

Well, I hope the article was not complicated, and I was able to tell you in detail about how you can insert html code into a website without unnecessary hassles.

Don't neglect the aesthetics of your blog. After all, our reader, as in life, meets you by his clothes and sees you off by his mind.

That's all for me!

Bye bye!

Sincerely, Kalmykov Anton

Do you want to post code with some kind of solution or instruction on your website, but are you having problems with it? Find out how to do everything correctly and display the code as it appears in the code editor.

It would seem not a difficult task to insert the code, but difficulties may arise if you do not know about some of the rules that will be discussed.

Paste code as code

To insert code into a website, it is wrapped in AND tags. This results in the following construction:

Here's the code

To explain briefly and to the point, in this design the code tag tells the browser what is inside it program code, and the pre tag preserves line breaks, line tabs (indents), and spaces.

It seems that everything is clear and there is nothing complicated, but the problem is that if you want to insert html code or code containing characters< , >, & , " , ` , then problems may arise - the browser will process your code as HTML. For example, if you want to show the code of a form with a button, input fields, etc. in the code, the browser will display the form, and not its code.

Escaping code

To prevent this from happening, they do so-called code escaping - this is when the characters mentioned above are replaced with their UTF codes.

Scheme for replacing characters with UTF codes

Below are the symbols and codes that replace them:

Of course, no one is replacing symbols manually - this is done programmatically. The most accessible tool for this is online code escaping, where in an instant all characters will be replaced, and the code will retain all spaces and hyphens and will be completely ready for insertion into tag construction

As a result, after escaping, you can insert any piece of code. You can see an example of such an insert after escaping the code below:

Heading

Related posts

The method for inserting the html code varies slightly depending on where exactly you need to insert it. In accordance with this, we will consider different options.

To insert html code into the site, and in particular into the text of an article on one of the site pages, go to the administrative panel, select and open the desired article for editing. Next, the visual editor mode must be changed to editing mode. When working with a CMS system, simply click to change mode. Then copy and paste the html code into the planned location.

Often, after inserting, you want to format the code a little, for example, set the text to wrap around the code on the other side. There is a simple way to do this using CSS properties.

Using the ... tag, wrap your code in a container. This can also be done using table form tags. And inside this container, use the “style” property to set all the desired attributes.

So that when saving an article visual editor did not cut out changes that, in his opinion, are not html code; when inserting code, it is better to disable it. The editor's cutting of changes is designed to prevent the threat of possible malicious code.

How to disable the visual editor?

In the administrative panel, click “Site” - “General Settings” - “Site” and in the “Visual Editor” line select “No Editor”. Now it will be possible to edit and insert html code in html code mode. After you paste the code and save your changes, the visual editor can be turned back on.

If you want to re-edit the article, the html code will also need to be re-inserted. Sometimes it is required that the html code be displayed on each of the pages of the site. Inserting HTML code so that it appears on each page of the site.

To solve this problem, use Notepad or another editor to enter the main site file (by default this is index.php or index.html). IN open file select your preferred location to paste the code. For convenience, you can set a phrase in the search located in the place where you need to insert the code, so you will find it faster. Then copy the code and paste it to the desired location. If necessary, the code can be formatted in the same way that was described for formatting the code in the article.

The Internet has firmly entered our lives, and we can no longer imagine our existence without it. When we wake up, the first thing we do is open our beloved social network to read the latest news. And throughout the day we post new photos and stories from our lives on our blogs. Every day thousands of websites are born, and the same number die. But few people think about what is on the other side of the monitor. Few people know what the site consists of and by what principles it works. Today we want to tell you how to insert PHP code into HTML and why it is needed.

What is HTML

In order to get directly to the topic, you need to find out what the site consists of and how it is structured. If you open any page in your browser, you will see that it contains text, pictures, and sometimes videos. And there is no code there. But he's there! What we see in front of us is the display of the code. Just press the key combination CTRL+U, and in the next window we will find it. This is HTML.

But HTML is not a programming language, it is just hypertext markup. He cannot perform any logical operations how programming languages ​​do it. In other words, HTML is responsible for the arrangement of content on the page: text, pictures, media, video, tables. Once upon a time, back at the dawn of the Internet, all sites consisted of solid HTML, but this turned out to be not entirely convenient. Such sites are called static, and to change the content on the page it was necessary to edit all the code. This is how server-side programming languages ​​were invented, and one of such languages ​​is PHP. After this, the need arose to insert PHP code into HTML. We will describe how to do this below.

What is PHP

The PHP language code is not displayed in the browser. This is a server-side programming language. How to understand this? The server is remote computer. When a user performs some action on the page: fills out a registration form, presses buttons, writes a message - all the results of his actions are sent to the server. There they are processed and output back to the screen. This is how the user sees the result of his actions.

When server-side programming languages ​​began to be used, it became necessary to insert PHP code into an HTML page. How to do this correctly will be described below. The PHP language can interact not only with HTML, it also acts as an intermediary when working with databases. There are special functions that make queries to databases: select data from them, change, delete, update, and so on.

Why you can’t create a website using HTML alone

As mentioned above, sites based on HTML alone are static sites. You cannot change the content on them without editing the code itself. The PHP language provides great opportunities for managing websites. In particular, manage content from the administrative panel directly in the browser, without going to the server to change the code. This turned out to be a very convenient solution: the site administrator can edit or add content independently, without turning to a programmer for help.

Thanks to PHP language Content management systems appeared. The most famous of them are Wordpress, Joomla, DLE. There are a lot of such CMCs, and more and more of them appear every day. But every self-respecting webmaster should be able to edit the code if the need arises. He should know how to insert PHP code into HTML without having to contact a programmer every time for such a small thing.

What is it for? PHP insert

When designing templates in HTML, dynamic insertion is almost always used. For what? Modern websites are multi-page portals, and the number of pages they contain can vary depending on the task. That's why all modern websites use templates. The same template is displayed on all pages. This simplifies the work of programmers and makes it easy to change the display of the site in the browser.

To ensure this, in HTML template A special PHP code is implemented, which ensures dynamic replacement of the entire interface. Without such inclusion it is impossible to create a modern website. We will look further at how to insert html code into a php file.

Insert options

Depending on how the site template is written, the insertion options may be different. If the template is written in HTML, then PHP code is embedded in it, and if it is written in PHP, on the contrary, HTML is included in PHP. Both methods will be discussed here, and at the same time you can learn how to insert html code in php into a script.

In the first option everything is quite simple. The required PHP function is inserted into the HTML break. IN in the right place they open the tag with which PHP begins, after it the necessary function is written, then the tag is closed. This is the most common insertion option, although it is not the only one.

Another way is to include the file in the desired location. All necessary content is placed in separate file and connect it to the template using the include directive. Now if you change the file you are looking for, the contents of the template will change. There is another unconventional method, but you can learn more about how to insert html code into php in eof in the next article.

In the second option, consider a template written in PHP. In this example, the insertion will be a little more complicated. In such cases, the ECHO function is used, which contains HTML code. This design is also common, although it is not the only one. The HTML construct can be inserted directly into a PHP break: then the function must be closed and, having inserted the HTML, write the PHP code again, starting with the opening parenthesis.

Conclusion

From this article we learned how to insert php code into html. It's not difficult at all. There are many options, and everyone chooses what they think is simpler and more acceptable in their situation. It is important to know that programming is a complex science, and you cannot become a real programmer by reading just one article. There is a long way to go. Mistakes are inevitable at all stages, and this must be tolerated. Only acquired experience can give the result you are striving for.