How to add tags on the website

How to add tags on the website

Sometimes it is required to place the tag on the web page so that it did not perform the function assigned to it, and itself it was displayed on the screen. It can be required, for example, by drawing up textbooks on the HTML language and also for reduction of examples of fragments of the code in this language. Instruction 1. The fastest way of reduction on the web page of a code sample in the HTML language consists in use of the tag. After it place text fragment which you want to show, and it will be displayed unchanged, together with the tags placed in it. Then arrange the closing tag </plaintext>. This way has two shortcomings: first, it is not standard, so, the page with it can not undergo validation, and secondly, it will not be perceived by the old browsers supporting the HTML specification lower than 4. In them tags will not be displayed on the screen, and to be executed. Consider that the <pre> tag, being standard and supported by a large number of browsers, it is impossible to use instead of <plaintext> as it does not turn off execution of commands. 2. Rather universal way of the placement on the web page of text fragment with tags is its insert in the form of the image. For this purpose start any raster graphics editor, create in it the new drawing of the sufficient size, and then turn on the tool for text typing (the button with the letter A or T usually is for this purpose used). Bring a mouse arrow to the image upper left corner, click the left key, and then enter text fragment or insert it from a clipboard the CTRL keys-V. Crop the image (as to make it, depends on what you use the editor, for example, in GIMP for this purpose it is necessary to select a fragment, and then to select a menu item "Image" - "Otkadrirovat selection"). Save the result in the file of the GIF, PNG or JPG format (the first is more preferable). 3. Place the created image in the same folder of the server, as the HTML-file into which you are going to insert it. Then in the right place of this file place the following tag: <img class="jch-lazyload" src=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 data-src=image-name.extension><noscript><img src=image-name.extension></noscript>, where image-name.extension - a name of the graphic file together with expansion. If for any reason you placed the image not in the same folder, as the HTML-file, instead of a name of the graphic file place a full path to it. Consider that the user will not be able to browse the HTML-code fragment inserted thus if in its browser the demonstration of images is turned off. 4. Even more universal is the way of the placement on the page of HTML tags which consists in use instead of signs <i> of their codes. For this purpose use the following codes: instead of <-&lt; and instead of> - &gt;. This reception works practically in all browsers no matter how they are configured. </div><p align="right">Author: <a href="/authors-and-team">«MirrorInfo» Dream Team</a></p><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3584792177621109" data-ad-slot="9052496385" data-ad-format="auto" data-full-width-responsive="true"></ins><hr><div class="article-print-email mt-3"> <a href="/digital/how-to-add-tags-on-the-website?tmpl=component&amp;print=1&amp;layout=default" title="Print article < How to add tags on the website >" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><span class="btn btn-outline-secondary btn-sm"> <span class="fa fa-print" aria-hidden="true"></span> Print</span> </a>&nbsp; </div><ul class="pager pagenav"> <li class="previous"> <a class="hasTooltip" title="As on the website to add statistics" aria-label="Previous article: As on the website to add statistics" href="/digital/as-on-the-website-to-add-statistics" rel="prev"> <span class="icon-chevron-left" aria-hidden="true"></span> <span aria-hidden="true">Prev</span> </a> </li> <li class="next"> <a class="hasTooltip" title="How to learn coding of the website" aria-label="Next article: How to learn coding of the website" href="/digital/how-to-learn-coding-of-the-website" rel="next"> <span aria-hidden="true">Next</span> <span class="icon-chevron-right" aria-hidden="true"></span> </a> </li> </ul> </div> </div></main><aside id="sp-right" class="col-lg-4 "><div class="sp-column "><div class="sp-module "><div class="sp-module-content"><div class="mod-sppagebuilder sp-page-builder" data-module_id="93"><div class="page-content"><div id="section-id-1602904569421" class="sppb-section" ><div class="sppb-container-inner"><div class="sppb-row"><div class="sppb-col-md-12" id="column-wrap-id-1602904569420"><div id="column-id-1602904569420" class="sppb-column" ><div class="sppb-column-addons"><div id="sppb-addon-wrapper-1602904580863" class="sppb-addon-wrapper"><div id="sppb-addon-1602904580863" class="clearfix " ><div class="sppb-addon sppb-addon-articles "><h3 class="sppb-addon-title">Recommended</h3><div class="sppb-addon-content"><div class="sppb-row"><div class="sppb-col-sm-12"><div class="sppb-addon-article"><a class="sppb-article-img-wrap" href="/food-and-drinks/how-to-make-of-rose-mastic" itemprop="url"><img class="sppb-img-responsive jch-lazyload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/images/2022/05/11/daac4d0e2f5a72dd31f52cbbc1ce0ded_thumbnail.jpg" alt="How to make of rose mastic" itemprop="thumbnailUrl" loading="lazy" width="340" height="230" /><noscript><img class="sppb-img-responsive" src="/images/2022/05/11/daac4d0e2f5a72dd31f52cbbc1ce0ded_thumbnail.jpg" alt="How to make of rose mastic" itemprop="thumbnailUrl" loading="lazy" width="340" height="230" /></noscript></a><div class="sppb-article-info-wrap"><h3><a href="/food-and-drinks/how-to-make-of-rose-mastic" itemprop="url">How to make of rose mastic</a></h3><div class="sppb-article-meta"><span class="sppb-meta-date" itemprop="datePublished">14 May 2022</span><span class="sppb-meta-category"><a href="/food-and-drinks" itemprop="genre">Food and Drinks</a></span><span class="sppb-meta-author" itemprop="name">Mirror Info</span></div></div></div></div><div class="sppb-col-sm-12"><div class="sppb-addon-article"><a class="sppb-article-img-wrap" href="/digital/how-to-make-a-reference-to-the-homepage" itemprop="url"><img class="sppb-img-responsive jch-lazyload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/images/2022/02/23/1TAr-CDzPbpdZ6TlXiAiTZA_thumbnail.jpg" alt="How to make a reference to the homepage" itemprop="thumbnailUrl" loading="lazy" width="340" height="230" /><noscript><img class="sppb-img-responsive" src="/images/2022/02/23/1TAr-CDzPbpdZ6TlXiAiTZA_thumbnail.jpg" alt="How to make a reference to the homepage" itemprop="thumbnailUrl" loading="lazy" width="340" height="230" /></noscript></a><div class="sppb-article-info-wrap"><h3><a href="/digital/how-to-make-a-reference-to-the-homepage" itemprop="url">How to make a reference to the homepage</a></h3><div class="sppb-article-meta"><span class="sppb-meta-date" itemprop="datePublished">01 March 2022</span><span class="sppb-meta-category"><a href="/digital" itemprop="genre">Digital</a></span><span class="sppb-meta-author" itemprop="name">Mirror Info</span></div></div></div></div><div class="sppb-col-sm-12"><div class="sppb-addon-article"><a class="sppb-article-img-wrap" href="/housekeeping/how-to-remove-bruises-and-hypostases" itemprop="url"><img class="sppb-img-responsive jch-lazyload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/images/2021/02/07/closeup-big-bruise-over-white-sk_thumbnail.jpg" alt="How to remove bruises and hypostases" itemprop="thumbnailUrl" loading="lazy" width="475" height="320" /><noscript><img class="sppb-img-responsive" src="/images/2021/02/07/closeup-big-bruise-over-white-sk_thumbnail.jpg" alt="How to remove bruises and hypostases" itemprop="thumbnailUrl" loading="lazy" width="475" height="320" /></noscript></a><div class="sppb-article-info-wrap"><h3><a href="/housekeeping/how-to-remove-bruises-and-hypostases" itemprop="url">How to remove bruises and hypostases</a></h3><div class="sppb-article-meta"><span class="sppb-meta-date" itemprop="datePublished">09 February 2021</span><span class="sppb-meta-category"><a href="/housekeeping" itemprop="genre">Housekeeping</a></span><span class="sppb-meta-author" itemprop="name">Mirror Info</span></div></div></div></div><div class="sppb-col-sm-12"><div class="sppb-addon-article"><a class="sppb-article-img-wrap" href="/childen/how-to-take-the-child-from-maternity-hospital" itemprop="url"><img class="sppb-img-responsive jch-lazyload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/images/2022/02/03/9e41b6c1241668dd47716a9dd8d74e60_thumbnail.jpg" alt="How to take the child from maternity hospital" itemprop="thumbnailUrl" loading="lazy" width="340" height="230" /><noscript><img class="sppb-img-responsive" src="/images/2022/02/03/9e41b6c1241668dd47716a9dd8d74e60_thumbnail.jpg" alt="How to take the child from maternity hospital" itemprop="thumbnailUrl" loading="lazy" width="340" height="230" /></noscript></a><div class="sppb-article-info-wrap"><h3><a href="/childen/how-to-take-the-child-from-maternity-hospital" itemprop="url">How to take the child from maternity hospital</a></h3><div class="sppb-article-meta"><span class="sppb-meta-date" itemprop="datePublished">03 February 2022</span><span class="sppb-meta-category"><a href="/childen" itemprop="genre">Children</a></span><span class="sppb-meta-author" itemprop="name">Mirror Info</span></div></div></div></div><div class="sppb-col-sm-12"><div class="sppb-addon-article"><a class="sppb-article-img-wrap" href="/housekeeping/how-to-choose-sweet-pepper-seeds-in-shop" itemprop="url"><img class="sppb-img-responsive jch-lazyload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/images/2021/03/01/ChilesHotApple6-2018-1_thumbnail.jpg" alt="How to choose sweet pepper seeds in shop" itemprop="thumbnailUrl" loading="lazy" width="475" height="320" /><noscript><img class="sppb-img-responsive" src="/images/2021/03/01/ChilesHotApple6-2018-1_thumbnail.jpg" alt="How to choose sweet pepper seeds in shop" itemprop="thumbnailUrl" loading="lazy" width="475" height="320" /></noscript></a><div class="sppb-article-info-wrap"><h3><a href="/housekeeping/how-to-choose-sweet-pepper-seeds-in-shop" itemprop="url">How to choose sweet pepper seeds in shop</a></h3><div class="sppb-article-meta"><span class="sppb-meta-date" itemprop="datePublished">29 November -0001</span><span class="sppb-meta-category"><a href="/housekeeping" itemprop="genre">Housekeeping</a></span><span class="sppb-meta-author" itemprop="name">Mirror Info</span></div></div></div></div><div class="sppb-col-sm-12"><div class="sppb-addon-article"><a class="sppb-article-img-wrap" href="/housekeeping/how-to-grow-up-castor-bean-tree" itemprop="url"><img class="sppb-img-responsive jch-lazyload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/images/2021/02/28/Ricinus_communis_04_thumbnail.jpg" alt="How to grow up castor-bean tree" itemprop="thumbnailUrl" loading="lazy" width="475" height="320" /><noscript><img class="sppb-img-responsive" src="/images/2021/02/28/Ricinus_communis_04_thumbnail.jpg" alt="How to grow up castor-bean tree" itemprop="thumbnailUrl" loading="lazy" width="475" height="320" /></noscript></a><div class="sppb-article-info-wrap"><h3><a href="/housekeeping/how-to-grow-up-castor-bean-tree" itemprop="url">How to grow up castor-bean tree</a></h3><div class="sppb-article-meta"><span class="sppb-meta-date" itemprop="datePublished">28 February 2021</span><span class="sppb-meta-category"><a href="/housekeeping" itemprop="genre">Housekeeping</a></span><span class="sppb-meta-author" itemprop="name">Mirror Info</span></div></div></div></div><div class="sppb-col-sm-12"><div class="sppb-addon-article"><a class="sppb-article-img-wrap" href="/knowledge-base/how-to-find-hardness-of-water" itemprop="url"><img class="sppb-img-responsive jch-lazyload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/images/2022/03/29/maxresdefault_thumbnail.jpg" alt="How to find hardness of water" itemprop="thumbnailUrl" loading="lazy" width="340" height="230" /><noscript><img class="sppb-img-responsive" src="/images/2022/03/29/maxresdefault_thumbnail.jpg" alt="How to find hardness of water" itemprop="thumbnailUrl" loading="lazy" width="340" height="230" /></noscript></a><div class="sppb-article-info-wrap"><h3><a href="/knowledge-base/how-to-find-hardness-of-water" itemprop="url">How to find hardness of water</a></h3><div class="sppb-article-meta"><span class="sppb-meta-date" itemprop="datePublished">01 April 2022</span><span class="sppb-meta-category"><a href="/knowledge-base" itemprop="genre">Knowledge Base</a></span><span class="sppb-meta-author" itemprop="name">Mirror Info</span></div></div></div></div><div class="sppb-col-sm-12"><div class="sppb-addon-article"><a class="sppb-article-img-wrap" href="/housekeeping/how-to-make-birthmark" itemprop="url"><img class="sppb-img-responsive jch-lazyload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/images/2020/11/23/birthmark-skin-macro-black-51469826_thumbnail.jpg" alt="How to make birthmark" itemprop="thumbnailUrl" loading="lazy" width="475" height="320" /><noscript><img class="sppb-img-responsive" src="/images/2020/11/23/birthmark-skin-macro-black-51469826_thumbnail.jpg" alt="How to make birthmark" itemprop="thumbnailUrl" loading="lazy" width="475" height="320" /></noscript></a><div class="sppb-article-info-wrap"><h3><a href="/housekeeping/how-to-make-birthmark" itemprop="url">How to make birthmark</a></h3><div class="sppb-article-meta"><span class="sppb-meta-date" itemprop="datePublished">27 November 2020</span><span class="sppb-meta-category"><a href="/housekeeping" itemprop="genre">Housekeeping</a></span><span class="sppb-meta-author" itemprop="name">Mirror Info</span></div></div></div></div></div></div></div><style type="text/css"></style></div></div></div></div></div></div></div></div></div></div></div></div></div></aside></div></div></div></section><footer id="sp-footer"><div class="container"><div class="container-inner"><div class="row"><div id="sp-footer1" class="col-lg-6 "><div class="sp-column "><span class="sp-copyright">© 2020 - 2022 Mirror Info <br> <a href="/contacts">Contacts</a> <br> <a href="/privacy-policy">Privacy Policy</a> <br> <a href="/authors-and-team">Authors and Team</a><br> <a href="/archive">Archive</a></span></div></div><div id="sp-footer2" class="col-lg-6 "><div class="sp-column "><ul class="social-icons"><li class="social-icon-facebook"><a target="_blank" href="#" aria-label="facebook"><span class="fa fa-facebook" aria-hidden="true"></span></a></li><li class="social-icon-twitter"><a target="_blank" href="#" aria-label="twitter"><span class="fa fa-twitter" aria-hidden="true"></span></a></li><li><a target="_blank" href="#" aria-label="Youtube"><span class="fa fa-youtube" aria-hidden="true"></span></a></li><li class="social-icon-linkedin"><a target="_blank" href="#" aria-label="LinkedIn"><span class="fa fa-linkedin" aria-hidden="true"></span></a></li></ul></div></div></div></div></div></footer></div></div><div class="offcanvas-overlay"></div><div class="offcanvas-menu"> <a href="#" class="close-offcanvas"><span class="fa fa-remove"></span></a> <div class="offcanvas-inner"><div class="sp-module _menu"><h3 class="sp-module-title">Main Menu</h3><div class="sp-module-content"><ul class="menu"> <li class="item-110"><a href="/business" >Business</a></li><li class="item-114"><a href="/knowledge-base" >Knowledge Base</a></li><li class="item-115"><a href="/society" >Society</a></li><li class="item-116"><a href="/childen" >Childen</a></li><li class="item-117"><a href="/food-and-drinks" >Food and Drinks</a></li><li class="item-119"><a href="/sport" >Sport</a></li><li class="item-120"><a href="/health" >Health</a></li><li class="item-121"><a href="/travel" >Travel</a></li><li class="item-122"><a href="/beauty" >Beauty</a></li><li class="item-129"><a href="/housekeeping" >Housekeeping</a></li><li class="item-136"><a href="/archive" >Archive</a></li><li class="item-138 current active"><a href="/digital" >Digital</a></li><li class="item-139"><a href="/animals" >Animals</a></li><li class="item-149"><a href="/interesting" >Interesting</a></li></ul></div></div></div></div> <a href="#" class="sp-scroll-up" aria-label="Scroll Up"><span class="fa fa-chevron-up" aria-hidden="true"></span></a> <div data-position="top" class="sp-reading-progress-bar"></div> <script type="application/javascript" src="/media/plg_jchoptimize/assets2/jscss.php?f=2e334da502ae8e0e149d6380139e4838&amp;type=js&amp;gz=gz"></script> <script src="/components/com_sppagebuilder/assets/js/sppagebuilder.js?0808dd08ad62f5774e5f045e2ce6d08b" defer="defer" type="text/javascript"></script> </body> </html>