Tags die zijn ontworpen om delen van de programmacode weer te geven. HTML-programmacode. Toon html-code op de pagina als tekst. Label

laat een reactie achter 6,950

Bijschriften gemaakt in monospace-lettertypen worden gemaakt met behulp van tags , en . De resultaten van het toepassen van deze tags zijn meestal identiek: een monospace-lettertype met een vaste tekengrootte en spatiëring.

Label

Label — een inline containerelement dat wordt gebruikt om kleine fragmenten van programmacode erin in te voegen, bijvoorbeeld in een webdocument dat een programmeerhandleiding vertegenwoordigt. Browsers geven dergelijke code weer in een monospaced lettertype (bijvoorbeeld Courier New). Als je ero met een element gebruikt

Label 

 wordt gebruikt om tekst in te voeren zonder opmaak, dat wil zeggen met behoud van alle spaties, tabs en regeleinden.  Binnen dit element kunnen de meeste tekstopmaakelementen worden toegepast.


Aandacht: In HTML worden regeleinden, opeenvolgende spaties en tabs genegeerd.  Meerdere spaties op een rij worden als één spatie behandeld.


Voorbeeld: Elementen gebruiken 
 en 


 
  • Probeer het zelf "
    • 

Binnen een element 
De browser dupliceert elke spatie of regeleinde die het tegenkomt, met behoud van uw originele opmaak.
If (document.getElementsByClassName) ( x = document.getElementsByClassName("paginering") if (x.length>y) ( x.style.visibility = "hidden"; )


Binnen het "pre"-element dupliceert de browser elke spatie of regeleinde die het tegenkomt, met behoud van uw originele opmaak.

 
if (document.getElementsByClassName) ( x = document.getElementsByClassName("paginering") if (x.length>y) ( x.style.visibility = "hidden"; )



tags 
 en 




Label 
 markeert een codefragment als gebruikersinvoer.  Sommige browsers markeren dergelijke tekst met een extra achtergrond. 
Label 
 gebruikt om computeruitvoer te genereren, zoals de tekst die wordt weergegeven in een consolevenster nadat u een besturingsscript hebt ingevoerd.  Dit zelden gebruikte element geeft de inhoud eenvoudig weer in een monospace-lettertype zoals 
, 
, 
.


Voorbeeld: elementen 
 en 


 
  • Probeer het zelf "
    • 

 
De tekst die de gebruiker moet invoeren vanaf het toetsenbord moet worden ingevoerd 
containerelement "kbd".


Tekst invoeren: Dit is de tekst die met het toetsenbord is ingevoerd


Dit is de tekst die in de "samp" container wordt geplaatst


Label 




Label 
 wordt gebruikt voor aanvullende selectie van variabelen in de programmacode.  Het definieert een variabele in een wiskundige uitdrukking of programmaparameter en wordt meestal cursief weergegeven.

 
Voorbeeld: elementen 


 
  • Probeer het zelf "
    • 

Kinetische energie van het lichaam:


 
Kinetische energie van het lichaam:


WNaar = mv2/2



 Taken

 
Laatste taak


In deze les heb je geleerd over tags die hun inhoud weergeven in een monospaced lettertype, variabelen in code markeren en de preformatting-tag.  Ze zijn allemaal belangrijk bij het werken met wiskundige uitdrukkingen en programmacode.


Het is tijd om te bekijken wat je hebt geleerd en drie eenvoudige taken uit te voeren:

 
Variabele

 
  • Beslis voor jezelf "
    • 

Gebruik html-elementen om de letter y aan te duiden als een variabele in de bovenstaande vergelijking.

 

 
 
 Variabele
 
 
 
Paraboolvergelijking y = Nx 2

 







 

 
 
 Variabele
 
 
 
Paraboolvergelijking ja= Nx 2

 







Vooraf opgemaakte tekst

 
  • Beslis voor jezelf "
    • 

Zorg er met behulp van het HTML-element voor dat de tekst die in het code-element is geplaatst, door de browser wordt weergegeven, waarbij alle spaties en regeleinden behouden blijven zoals ze zijn.




Invoering


bbCode — Bulletin Board-code, of opmaaktaal, die wordt gebruikt om berichten op veel bulletinboards (BBS) en forums op te maken.  Tekstopmaak maakt gebruik van tags die vergelijkbaar zijn met HTML-tags.  In tegenstelling tot HTML-tags staan ​​bbCode-tags tussen vierkante haken.  Voordat de pagina wordt weergegeven, parseert de forum-engine de tekst en zet de bbCode om in HTML-code.


Op veel forums wordt de mogelijkheid om BB-codes te gebruiken door de beheerder individueel geconfigureerd voor elke sectie van het forum.  Voordat u BB-codes in berichten gebruikt, moet u er daarom voor zorgen dat ze zijn toegestaan.


Opmaak van lettertype


Basistags voor het werken met tekst:


[p] Regelmatig ingesprongen alinea.


Een alinea die kan worden opgemaakt. 
* Hierna is "stijl" de analogie van stijl in HTML. 
tekst is vergelijkbaar in HTML 
tekst


** Met [p]-tags kunt u andere tags gebruiken, zoals [b], [i], [s], enz.


Tekst waarvan de eigenschappen kunnen worden gewijzigd met behulp van de stijl.


Een begrensd gebied dat kan worden gestileerd om de eigenschappen ervan te wijzigen (positie, rand, opvulling, inhoudseigenschappen, enz.). 
* Standaard zijn gebiedsranden niet zichtbaar.  Er kunnen meerdere gebieden tegelijk op één pagina zijn.


Tekstopmaak:


[B] Belangrijke tekst, vet 



[I] Belangrijke tekst, cursief 




gewoon vet 




gewoon cursief 



[u] Onderstreepte tekst 



[s] Doorgestreepte tekst - vergelijkbaar met optie


Verkleind lettertype


Voetnootteken boven of index onder de tekst



verwijderde tekst


Lettergroottes:



13 punts lettertype 




15 punts lettertype 




Lettergrootte 9 pixels 




Lettergrootte 12px 




Lettergrootte 15px 



Maat 0


Maat +1


Maat +2


Mogelijke lettergroottes (visuele evaluatie) zijn beschikbaar.


Titels:



Niveau 1 kop
 




Niveau 2 kop
 




Niveau 3 kop
 




Niveau 4 rubriek
 




Niveau 5 rubriek
 




Niveau 6 rubriek
 



Tekst opmaken met lettertypen:


Lettertype Comic Sans Ms


Monotype Corsiva-lettertype


Tahoma-lettertype


Mogelijke lettertype-opties (namen en visuele evaluatie) zijn beschikbaar.


Tekst verfraaien met kleur:


rode tekst 
* U kunt de standaard verbale aanduidingen voor kleuren gebruiken: rood, groen, blauw, enz.


Blauwe tekst 
* Nummer #0000ff betekent blauwe kleur in RGB-palet.


blauwe achtergrond 
* De achtergrondkleur kan ook worden veranderd.



 
 Blauwe tekst, grijze achtergrond 
 



Enkele voorgedefinieerde kleuren:


Zwart Wit Rood Groen Blauw Paars Vuursteen Kastanjebruin OranjeRood MiddernachtBlauw KorenbloemBlauw 
Cyaan Geel Magenta DonkerGroen DonkerGoldenrod Gouden Orchidee BlauwViolet Burlywood PeachPuff




Enkele kleuren in hexadecimale code - intensiteit van rood, groen en blauw (RR GG BB):


#000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF #DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #990000 #FF3030 #000080 #000066 #0000CD #AFEEEE #0060080 #DAA520 #FFCC33 #FFA500 #C71585 #8B008B #CC33FF




Mogelijke varianten van het kleurenpalet en hun codes/namen zijn beschikbaar.


Tekstuitlijning en alinea-opmaak


Tekstuitlijning:


Tekst links uitlijnen


Links uitlijnen met stijl


Uitlijning in een alinea naar links


Tekstuitlijning centreren


Uitlijning in het midden met stijl


Gecentreerde uitlijning in een alinea


Tekst rechts uitlijnen


Rechts uitlijnen met stijl


Uitlijning van alinea rechts


Tekst aan beide kanten uitvullen


Aan beide kanten in stijl uitlijnen


Alinea-uitlijning aan beide zijden 
* Uitleg van teksten aan beide zijden wordt weergegeven voor teksten langer dan één regel.


Voetnoten (opmerkingen) opmaken met een alinea-inspringing:


[q] Offerte inline




Offerte in lijn met eigenschappen






Geciteerde tekst in een apart blok, die zal hebben 
een klein streepje aan de linkerkant en een speciaal ontwerp (forumstijl). 






Voorbeelden: 
Lorem ipsum dolor sit amet 
Lorem ipsum dolor sit amet 
Lorem ipsum dolor sit amet



Opmaak van alinea's en gebieden:



Hallo!  In deze paragraaf komt de eerste zin van de "rode" regel, d.w.z.  ingesprongen.  Net als in typografie.  Toegegeven, dit is een zeldzame praktijk op internet.  Alinea's moeten worden gescheiden door slechts een spatie.



 Vooraf opgemaakte tekst behoudt de inspringing naar links en tussen woorden, en stelt de inspringing in op wat u opgeeft als spaties.  Waarschuwing!  De tag breekt niet automatisch de regel!


Lijstopmaak


Gebruik de tag of voor lijsten met opsommingstekens:


  • Een van de lijstitems
    • 

  • Nog zo'n item
    • 

  • Nog een punt.
    • 




[*] Nog zo'n item 
[*] Nog een punt. 




Gebruik voor genummerde lijsten de tag:


  1. Een van de lijstitems
    2. 

  2. Nog zo'n item
    3. 

  3. Nog een punt.
    4. 



[*] Een van de lijstitems 
[*] Nog zo'n item 
[*] Nog een punt. 




De afsluitende tag is optioneel:


  • Een van de lijstitems
    • 

  • Nog zo'n item
    • 

  • Nog een punt.
    • 



[*] Een van de lijstitems 
[*] Nog zo'n item 
[*] Nog een punt. 




Het is ook mogelijk om het lijsttype direct te specificeren: 
- genummerde lijst 
- alfabetische lijst 
- een lijst genummerd met Romeinse cijfers


Afbeeldingen


Http://img.cx/img/primer.jpg - een voorbeeld van het invoegen van een afbeelding.


Http://img.cx/img/primer.jpg - afbeelding aan de linkerkant. 





Http://img.cx/img/primer.jpg - afbeelding aan de rechterkant. 
* Deze code is vergelijkbaar met de code in HTML: 




Http://img.cx/img/primer.jpg - afbeelding in het midden. 
* Deze code is vergelijkbaar met de code in HTML: 




Vergelijkbare tags met namen en tooltips:


Belangrijk!  Je mag geen aanhalingstekens gebruiken in de titel van de foto!


Http://img.cx/img/primer.jpg - een voorbeeld van het invoegen van een afbeelding.


Http://img.cx/img/primer.jpg - afbeelding aan de linkerkant.


Http://img.cx/img/primer.jpg - afbeelding aan de rechterkant.


Http://img.cx/img/primer.jpg - afbeelding in het midden.


Afbeeldingen met aangegeven maten:


Http://img.cx/img/primer.jpg - een voorbeeld van een afbeelding met een grootte. 
* Deze code is vergelijkbaar met de code in HTML: 




Http://img.cx/img/primer.jpg - afbeelding aan de linkerkant, met grootte.


Http://img.cx/img/primer.jpg - afbeelding rechts, met grootte.


Grote afbeeldingen invoegen met schuifbalken:


Http://www..jpg — een afbeelding in het geselecteerde gebied als deze groter is dan de beschikbare weergavegrootte op het forum.



Adres - open de afbeelding in een nieuw venster. 
* Deze code is vergelijkbaar met de code in HTML: 




Adres - open de afbeelding in hetzelfde venster. 
* Deze code is vergelijkbaar met de code in HTML: 






In verband met het onderhoud van deze blog moet ik af en toe stukjes html- en css-code in de site plaatsen.  Tijdens het implementeren van een normale oplossing bleek het om de een of andere reden niet mogelijk te zijn om een ​​adequate beschrijving van kant-en-klare oplossingen in het Russisch te vinden, dus u zult het gat zelf moeten opvullen.


Laten we simpel beginnen:


Hoe html-code in tekst invoegen?


Om een ​​of twee tags in de tekst op de site in te voegen, kunt u html-symbolen gebruiken< для вставки < и символ >invoegen > dus tag 
In html-code wordt het geschreven als 
Grote stukjes code invoegen op de site.


Om de html-code zelf in de site in te voegen, zijn er drie tags:


EN en 
Label 
Geeft een blok vooraf opgemaakte tekst aan.  Dat wil zeggen, de tekst waarin alle spaties en koppeltekens al zijn geplaatst.  Standaard wordt in de browser de inhoud van de tag 
Weergegeven in monospace-lettertype en met alle spaties tussen woorden.  In tag 
Alle spaties worden weergegeven en er wordt rekening gehouden met alle regeleinden (standaard html negeert meerdere spaties en converteert ze naar één).  In de container 
U kunt alle tags gebruiken, behalve de volgende:  ,  ,  ,  , en  .


De volgende tag is speciaal ontworpen voor gescreende weergave van programmacode.  Standaard wordt in de browser de inhoud van de tag weergegeven in kleine monospace-tekst.  De tag houdt geen rekening met extra spaties en tekstafbrekingen, waardoor tags moeten worden gebruikt om de regel af te breken 
en 
Label 
Het is niet geldig vanuit het oogpunt van de html-standaard, maar wordt momenteel door alle browsers ondersteund.  De tag geeft de inhoud van de container weer als platte tekst met alle spaties en koppeltekens.  Totdat de tag heilig is verklaard, wordt het gebruik ervan als niet-koosjer en ketters beschouwd.</p>
<p>De juiste oplossing op dit moment is om de tag te gebruiken <pre>Met geneste tags <code>op plaatsen waar het nodig is.  Technisch gezien is de tag <code>we moeten codefragmenten ontsnappen die om de een of andere reden uit de tag vallen <h3>Hoe html-code mooi opmaken met jQuery?</h3>
<p>We gebruiken het Snippet-script op onze site.  Het fragment is bedoeld om het visuele ontwerp van codevoorbeelden te vereenvoudigen.  Het script werkt als volgt:</p><p>Div.blog_right h2 ( font-size: 24px; color: #ff9933; margin-bottom: 9px; line-height: 44px; font-family: "arial", "verdana", sans-serif, "Lucida Sans"; font -gewicht: 100; marge-top: 0.83em; )</p><h3><b>Het codeontwerpscript verbinden:</b></h3>
<p>2) Voeg js- en css-bestanden toe.  Je hebt ook de meegeleverde JQuery-bibliotheek nodig.</p><p>
 <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.snippet.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.snippet.css" />
</p><p>3) Stel het script in:</p><p>$(document).ready(function()( $("pre.htmlCode").snippet("html",(style:"acid")); // Zoek naar tags <pre>Met de klasse "htmlCode" // en voeg de acid-stijl en html-verwerking toe aan deze elementen $("pre.styles").snippet("css",(style:"acid"));  // Op zoek naar tags <pre>Met de "styles" class // en voeg de acid-stijl en CSS-verwerking toe aan deze elementen $("pre.js").snippet("javascript",(style:"acid"));  // Op zoek naar tags <pre>Met de klasse "js" // en verbind met deze elementen de acid-stijl en verwerking voor ));</p><p>4) Meer geavanceerde documentatie voor het script staat op de website van de ontwikkelaar.  Het script kan het ontwerp on-the-fly veranderen, de benodigde stukjes code in frames markeren, de prullenbak buiten zetten en eten koken.</p>
<p>Speciale HTML-tekens</span> zijn korte stukjes code die karakterentiteiten worden genoemd.  Ze worden gebruikt om tekens weer te geven die een speciale betekenis hebben in HTML, evenals tekens die niet beschikbaar zijn op het toetsenbord.</p>
<p>Speciale tekens in HTML worden gereserveerde tekens genoemd.  Bijvoorbeeld de linker<) и правые (>) punthaken zijn gereserveerd in HTML om openings- en sluitingstags te definiëren.</p>
<p>Symbolen die niet beschikbaar zijn op het toetsenbord zijn symbolen zoals het copyright-symbool (©) en de wiskundige waarde pi.</p>
<p>Als we ze in het document willen gebruiken en in de browser willen weergeven, moeten we HTML-tekenreferenties gebruiken.</p>
 <h2>praktijkvoorbeeld</h2>
<p>Stel dat u een HTML-blok op een webpagina wilt weergeven zodat elementtags worden weergegeven.  U kunt dit doen door simpelweg een HTML-blok in de tags te plaatsen <code>.  Maar dat vind je zelfs <code>, wordt het blok nog steeds als HTML-code behandeld en overeenkomstig weergegeven door de browser.  In dit geval kunt u alle speciale HTML-tekens vervangen door de bijbehorende symbolische links, zodat de browser de code niet ontleden:</p>
<p><!--Тег <code> не делает так, чтобы блок не обрабатывался, как HTML-код-->
<code>
 <p>Dit is een lijst met items.</p>
 <ul>
 <li>Lijstitem A</li>
 <li>Lijstitem B</li>
 <li>Lijstitem C</li>
 </ul>
 </code>
<!--Замените специальные символы ссылками на символы->
<code>
 <p>This is a list of items.<&sol;p>
 <ul>
 <li>List Item A<&sol;li>
 <li>List Item B<&sol;li>
 <li>List Item C<&sol;li>
 <&sol;ul>
</code></p>
<p>Посмотрим, как этот код отображается в браузере:</p>
<p>This is a list of items.
 List Item A
 List Item B
 List Item C
<p>This is a list of items.<&sol;p>
<ul>
<li>List Item A<&sol;li>
<li>List Item B<&sol;li>
<li>List Item C<&sol;li>
<&sol;ul></p>
<p>Коды вокруг первого блока не помешали браузеру обработать HTML-код
. Но заменив некоторые символы во втором блоке знаками из таблицы специальных символов HTML
, можно отобразить блок кода как разметку.</p>
<h3>Формат символов</h3>
<p>В HTML
 существует три способа форматирования символьных объектов. Можно использовать имя символа, значение Юникод или число. Например, амперсанд может отображаться с использованием любого из следующих: &, &
 или &
.</p>
<p>Во всех трех случаях формат выглядит схоже. Каждый объект начинается с амперсанда (&
), за которым следует имя символа, Юникод или номер ссылки и заканчивается точкой с запятой. Когда используется номер, ему должен предшествовать символ фунта (<span>& число

</span>), а когда используется значение Юникод, ему должен предшествовать символ фунта и буква x
 (<span>&число; x

</span>).</p>
<p>Большинство людей при добавлении спецсимволов используют в HTML-документах
 имена, а не значения или номера Unicode
. Их гораздо легче запомнить.</p>
<h3>Диакритические знаки</h3>
<p>Существует один специальный подтип специальных символов HTML
, который заслуживает особого упоминания — диакритические знаки. Это метки, которые выводятся непосредственно над предшествующей буквой, и к ним относятся знаки ударения и тильды. Вот три наиболее распространенных диакритических символа:</p>
<br>
В настоящее время поддержка имен символов диакритической метки ограничена, и результаты будут более согласованными между браузерами, если придерживаться числовых кодов.
<h3>Наиболее распространенные коды символов</h3>
<p>Вот краткая справочная таблица с несколькими наиболее часто использующимися спецсимволами:</p>
<table border="1"><tr><td>Символ

</td>
<td>Имя символа

</td>
<td>Номер

</td>
<td>Юникод

</td>
<td>Пример

</td>
</tr><tr><td>Меньше
</td>
<td><
</td>
<td><
</td>
<td><
</td>
<td><
</td>
</tr><tr><td>Больше
</td>
<td>>
</td>
<td>>
</td>
<td>>
</td>
<td>>
</td>
</tr><tr><td>Слэш
</td>
<td>&sol;
</td>
<td>/
</td>
<td>/
</td>
<td>&sol;
</td>
</tr><tr><td>Кавычки
</td>
<td>"
</td>
<td>«
</td>
<td>«
</td>
<td>«
</td>
</tr><tr><td>Апостроф
</td>
<td>"
</td>
<td>‘
</td>
<td>‘
</td>
<td>‘
</td>
</tr><tr><td>Амперсанд
</td>
<td>&
</td>
<td>&
</td>
<td>&
</td>
<td>&
</td>
</tr><tr><td>Копирайт
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr><tr><td>Торговая марка
</td>
<td>®
</td>
<td>®
</td>
<td>®
</td>
<td>®
</td>
</tr><tr><td>Градус
</td>
<td>°
</td>
<td>°
</td>
<td>°
</td>
<td>°
</td>
</tr><tr><td>Левые угловые кавычки
</td>
<td>«
</td>
<td>«
</td>
<td>«
</td>
<td>«
</td>
</tr><tr><td>Правые угловые кавычки
</td>
<td>»
</td>
<td>»
</td>
<td>»
</td>
<td>»
</td>
</tr></table><h3>Полный список зарезервированных кодов символов</h3>
<p>Полная таблица специальных символов HTML
, поддерживаемых консорциумом World Wide Web
, является частью официальной спецификации гипертекста.</p>
<p>Дорогие друзья! Сегодня мы поговорим о <b>HTML теге code
</b>. При написании конкретно этой статьи или любых других обучающих материалов, периодически необходимо вставлять куски <b>HTML
</b>, <b>CSS
</b> кода и вообще любого программного кода.</p>
<p>Думаю, вы уже догадались для чего нужен <b>HTML тег code
</b>. Через него мы сообщаем браузеру: "Все что будет помещено внутри контейнера <b>"code"
</b>, просим отобразить как текст."</p><p>
 <code>… </code>
</p><p>В противном случае браузер не поймет где настоящий код, а где демонстрационный и не покажет ничего. Поскольку все теги на странице браузер воспринимает как команды для вывода контента. Иными словами с помощью <b>HTML тега code
</b> в окне браузера выводятся именно сами теги для демонстрации <b>HTML
</b>-кода.</p>
<p>Рассмотрим ниже пример вывода тегов на странице:</p><p>
<!DOCTYPE HTML><br>
<html><br>
<head><br>
 <meta charset="utf-8"><br>
 <title>Вывод тегов на странице</title><br>
</head><br>
<body><br>
 <p>Фрагмент HTML-кода</p><br>
 <p>
 <code><br>
 <h1 style="font-size:200%;">Это заголовок.</h1><br>
 <p style="font-size:100%;">Это параграф.</p><br>
 </code><br>
 </p><br>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
</body><br>
</html><br></p><p>Смотрим на результат данного примера:</p>
<p><img src='https://i2.wp.com/myrusakov.ru/images/articles/html-tag-code-01.png' height="137" width="340" loading=lazy loading=lazy></p>
<p>Угловые скобки <b>< >
</b> следует заменить на специальные символы <b>&..
</b> и делать перенос каждой строки тегами <b>br
</b> или <b>p
</b>.</p>
<p>По умолчанию браузеры показывают содержимое <b>HTML тега code
</b> моноширинным шрифтом. Это уменьшенный шрифт с фиксированным размером.</p><p>
<!DOCTYPE html><br>
<html><br>
<head><br>
 <style><br>
 code {<br>
 font-family: monospace;<br>
 }<br>
 </style><br>
</head><br>
<body><br>
<p>Это обычный текст:</p><br>
<code>Это часть программного кода</code><br>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
</body><br>
</html><br></p><p>Так выглядет в браузере по умолчанию:</p>
 <p><img src='https://i2.wp.com/myrusakov.ru/images/articles/html-tag-code-02.png' height="91" width="260" loading=lazy loading=lazy></p>
<p>Теперь переопределим внешний вид кода внутри тега <b>code
</b>. Зададим для элемента <b>font-family: verdana;
</b> или любой другой шрифт.</p><p>
<!DOCTYPE html><br>
<html><br>
<head><br>
<style><br>
code {<br>
 font-family: verdana;<br>
}<br>
</style><br>
</head><br>
<body><br>
<p>Это обычный текст:</p><br>
<code>Это часть программного кода</code><br>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
</body><br>
</html><br></p><p>Заданный стиль в браузере.</p>

<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
	escape(document.referrer)+((typeof(screen)=="undefined")?"":
	";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
	screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
	";"+Math.random()+
	"border='0' width='1' height='1' loading=lazy loading=lazy>");</script>
</div>
                                
                                <div class="clear"></div>
                            </div>
                        </article>
                        
                        
                        
                        <div class='yarpp-related'>
                            <section id="related_posts">
    <div class="block-head"> <span>Meer informatie over het onderwerp</span>
        <div class="stripe-line"></div>
    </div>
    <div class="post-listing">
                     <div class="related-item">
                <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/de2a64b2b4c1f5dab2b239077f798c50.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Handmatig een Windows Virtual PC Virtual Machine installeren met behulp van alternatieve virtuele machines" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/nl/kak-sozdat-virtualnyi-kompyuter-v-virtual-pc-ustanovka-virtualnoi/">Handmatig een Windows Virtual PC Virtual Machine installeren met behulp van alternatieve virtuele machines</a></div>
                     <div class="related-item">
                <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/605112af0715af64e55e16e856aeab1f.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Een virtuele Windows Virtual PC-machine handmatig installeren Een virtuele machine afsluiten" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/nl/kak-delaetsya-ustanovka-microsoft-virtual-pc-na-kompyuter-ustanovka/">Een virtuele Windows Virtual PC-machine handmatig installeren Een virtuele machine afsluiten</a></div>
                     <div class="related-item">
                <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/f48be614893fa14b92244d9846f68abc.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="PC-softwareconcept" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/nl/ponyatie-programmnogo-obespecheniya-klassifikaciya-programmnogo-obespecheniya-ponyatie-programmnogo-obesp/">PC-softwareconcept</a></div>
                     <div class="related-item">
                <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/8300ef1f665fe37270f9b618d85c38f7.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Tijd van de Conferentie van Potsdam" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/nl/vremya-provedeniya-potsdamskoi-konferencii-berlinskaya-konferenciya/">Tijd van de Conferentie van Potsdam</a></div>
                     <div class="related-item">
                <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/9bfc418e20ccad9c5c6f41c73895cd5b.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Hoe de weergave van verborgen mappen in te schakelen: tips en trucs" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/nl/kak-vklyuchit-otobrazhenie-kak-vklyuchit-otobrazhenie-skrytyh-papok-sovety-i/">Hoe de weergave van verborgen mappen in te schakelen: tips en trucs</a></div>
                     <div class="related-item">
                <div class="post-thumbnail tie-appear replacemy" data="post_7839"> <img width="195" height="110" src="/uploads/05b4ebc921bf1bc6747dd91ef956c41c.jpg" class="attachment-tie-related size-tie-related wp-post-image" alt="Belangrijkste software- en hardwarecomponenten van het netwerk Software- en hardwarecomponenten van het netwerk" / loading=lazy loading=lazy></div> <a class="post_7839" href="https://qzoreteam.ru/nl/programmnye-i-apparatnye-komponenty-kompyuternyh-setei/">Belangrijkste software- en hardwarecomponenten van het netwerk Software- en hardwarecomponenten van het netwerk</a></div>
        
        
        
        
    </div>
</section>
            </div> 
            <div id="comments">
                <ol class="commentlist">
                    <div class='rreekk' rel='15'>
                        <div id="smartrotator_ad_4" onclick="yaCounter40492595.reachGoal ('tizercommentbefore1'); return true;"></div>
                    </div>
                </ol>
                <div class="clear"></div>
                
                <div id="respond" class="comment-respond"> 
                    
                </div>
                
            </div>
        </div>
        

<aside id="sidebar">
    <div class="theiaStickySidebar">
        <div class="execphpwidget">
            <div id="text-4" class="widget widget_text">
                <div class="widget-top"> <span>Bruikbaar</span>
                    <div class="stripe-line"></div>
                </div>
                <div class="widget-container">
                    <div class="textwidget">
                        <style>
                        .wpp-list li img {
                                -webkit-border-radius: 65px;
                                -moz-border-radius: 65px;
                                border-radius: 65px;
                            }

                            .wpp-list li .post-views {
                                display: block;
                                margin-left: 70px;
                                color: #828283;
                                font-size: 12px;
                            }

                            .wpp-list li .post-views i {
                                font-size: 13px;
                            }

                            .wpp-list li {
                                line-height: 22px !important;
                            }

                            .replacemy {
                                cursor: pointer;
                            }
                        }
                        </style>
                        <ul class="wpp-list">
                                                             <li>
                                    <div class="replacemy"><img src="/uploads/65fc0df91f8fb03fa4c3fcd5545333c8.jpg" width="65" height="65" title="Preventief onderhoud van de harde schijf" alt="Preventief onderhoud van de harde schijf" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/nl/profilaktika-zhestkogo-diska-profilakticheskie-raboty-zhestkogo/" class=""><br>Preventief onderhoud van de harde schijf</a></li>
                                                             <li>
                                    <div class="replacemy"><img src="/uploads/a5f35979bb455fa110dee657a8c9cb20.jpg" width="65" height="65" title="Kenmerken van de uitvoering van het magnetische circuit van de transformator Effectieve waarde van de emf van de primaire wikkeling van de transformator" alt="Kenmerken van de uitvoering van het magnetische circuit van de transformator Effectieve waarde van de emf van de primaire wikkeling van de transformator" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/nl/shpargalka-po-obshchei-elektronike-i-elektrotehnike-osobennosti-ispolneniya/" class=""><br>Kenmerken van de uitvoering van het magnetische circuit van de transformator Effectieve waarde van de emf van de primaire wikkeling van de transformator</a></li>
                                                             <li>
                                    <div class="replacemy"><img src="/uploads/35ad6806ce02898e69043e67935ca454.jpg" width="65" height="65" title="Veldeffecttransistor Ingangskarakteristiek veldeffecttransistor" alt="Veldeffecttransistor Ingangskarakteristiek veldeffecttransistor" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/nl/osnovnye-parametry-polevogo-tranzistora-polevoi-tranzistor-vhodnaya-harakteristika-polevogo-tranzist/" class=""><br>Veldeffecttransistor Ingangskarakteristiek veldeffecttransistor</a></li>
                                                             <li>
                                    <div class="replacemy"><img src="/uploads/c71a0b7ad3cbf0e4eb4ce447d5755615.jpg" width="65" height="65" title="Virale ziekten biologie" alt="Virale ziekten biologie" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/nl/virusnye-zabolevaniya-biologiya-virusy-obshchie-harakteristiki/" class=""><br>Virale ziekten biologie</a></li>
                                                             <li>
                                    <div class="replacemy"><img src="/uploads/231a8db3aacfd9b6f471f9dd9ba9b05a.jpg" width="65" height="65" title="Informatie verwerken in een computer Informatie verwerken in een computer" alt="Informatie verwerken in een computer Informatie verwerken in een computer" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></div><a href="https://qzoreteam.ru/nl/osnovnye-ustroistva-kompyutera-obrabotka-informacii-v-kompyutere/" class=""><br>Informatie verwerken in een computer Informatie verwerken in een computer</a></li>
                            

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
  <div>
    
    </div>
</aside>


        <div class="clear"></div>
    </div>
    

<footer id="theme-footer"> <div id="footer-widget-area" class="wide-narrow-2c"><div id="footer-first" class="footer-widgets-box"><div id="text-2" class="footer-widget widget_text"><div class="footer-widget-top"></div><div class="footer-widget-container"><div class="textwidget">
<p>Alles over moderne technologie.  fouten.  Spellen.  Storingen.  Techniek.  internet <p></p>
</div></div></div></div><div id="footer-second" class="footer-widgets-box"><div id="text-3" class="footer-widget widget_text">
    <div class="footer-widget-top"></div>
    <div class="footer-widget-container">
        <div class="textwidget"><a href="https://qzoreteam.ru/nl/sitemap.xml">site`s kaart</a></div>
    </div>
</div><div id="text-7" class="footer-widget widget_text"><div class="footer-widget-top"></div><div class="footer-widget-container"><div class="textwidget"><br> <a href="">Feedback</a> </div></div></div></div></div><div class="clear"></div>  </footer>


    <div class="clear"></div>
    
    <div class="footer-bottom">
        <div class="container">
            <div class="alignright"></div>
            <div class="alignleft">© Copyright 2017, https://qzoreteam.ru</div>
            <div class="clear"></div>
        </div>
    </div>
    
    </div>
    </div>
    </div>
    <div id="topcontrol" class="fa fa-angle-up" title="Terug naar boven"></div>
    <div id="fb-root"></div>
    <script type="text/javascript">
        jQuery(function($) {
            $(document).on("click", ".pseudo-link", function() {
                window.open($(this).data("uri"));
            });
        });
    </script>
    <script type='text/javascript'>
        /*  */
        var tocplus = {
            "smooth_scroll": "1",
            "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c",
            "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c",
            "width": "310px"
        };
        /*  */
    </script>
    <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/table-of-contents-plus/front.min.js'></script>
    <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/wp-polls/polls-js.js'></script>
    <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/wp-postratings/js/postratings-js.js'></script>
    <script type='text/javascript'>
        /*  */
        var tie = {
            "mobile_menu_active": "true",
            "mobile_menu_top": "",
            "lightbox_all": "",
            "lightbox_gallery": "",
            "woocommerce_lightbox": "",
            "lightbox_skin": "dark",
            "lightbox_thumb": "vertical",
            "lightbox_arrows": "true",
            "sticky_sidebar": "",
            "is_singular": "1",
            "SmothScroll": "true",
            "reading_indicator": "",
            "lang_no_results": "\u041d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u0448\u043b\u043e\u0441\u044c",
            "lang_results_found": "\u041d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b"
        };
        /*  */
    </script>
    <script type='text/javascript' src='https://qzoreteam.ru/wp-content/themes/pochk/js/tie-scripts.js'></script>
    <script type='text/javascript' src='https://qzoreteam.ru/wp-content/themes/pochk/js/ilightbox.packed.js'></script>
    <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js'></script>
    <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js'></script>
    <script type='text/javascript'>
        /*  */
        var gglcptch_pre = {
            "messages": {
                "in_progress": "\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0434\u043e\u0436\u0434\u0438\u0442\u0435\u0441\u044c \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 Google reCAPTCHA.",
                "timeout": "\u041d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c Google reCAPTCHA. \u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0412\u0430\u0448\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a \u0441\u0435\u0442\u0438 \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443."
            }
        };
        /*  */
    </script>
    <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/google-captcha/js/pre-api-script.js'></script>
    <script type='text/javascript' data-cfasync="false" async="async" defer="defer" src='https://www.google.com/recaptcha/api.js?onload=gglcptch_onload_callback&#038;render=explicit'></script>
    <script type='text/javascript' src='https://qzoreteam.ru/wp-content/plugins/google-captcha/js/script.js'></script>
    <script type="text/javascript" src="https://qzoreteam.ru/wp-content/themes/pochk/my/my.js"></script>
    <script type="text/javascript" src="https://qzoreteam.ru/wp-content/themes/pochk/my/etimer.js"></script>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
</body>

</html>