Loading





Форекс с Альпари

eTXT




Анкетка


Публикация html-кода на странице сайта

Информация, представленная в этой статье ориентирована в первую очередь для начинающих web-мастеров.


На двух страницах.  Страница 1.  На следующую >>>

Сейчас рассмотрим вопрос, который волнует многих, кто занимается версткой сайтов. Это - демонстрация html-кода на своём сайте. Эта тема актуальна для многих web-мастеров, например, имеющих сайты обучающей тематики.

Вполне понятно, что данный код должен быть представлен в демонстрационных целях, не быть активным, то есть не читаться браузером и преподноситься читателям в красивом и удобном виде для восприятия и копирования.

Лично мне, на сегодняшний день, известны несколько способов демонстрации html-кода, о которых сейчас поговорим.


Способ 1. С использованием таблицы.

Необходимый участок html-кода размещается в обычной таблице, чтобы код не был активным, символы меньше (<) и больше (>) заменяются их мнемониками
(https://ru.wikipedia.org/wiki/Мнемоники_в_HTML), соответственно:  &lt; и &gt; и производится перенос строк посредством тега <br>.

Таблица используется любая, можно создать её специально для этой цели используя стили.

Выглядит это примерно таким образом (код в таблице случайный, только лишь для примера):

<html>
   <head>
      <title>Редирект</title>
      <META HTTP-EQUIV="Refresh" CONTENT="0; URL=/">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
   </head>
<body>
</body>
</html>

Как в любом мероприятии, так и в нашем случае, есть свои достоинства и недостатки.

Плюсы:

  • Простота создания и оформления (не нужны скрипты, плагины и т.д.);
  • Наглядность в восприятии (ничего лишнего);
  • Любого вида код отражается корректно, при условии замены определенных символов их мнемониками и переносе строк;
  • Для акцентирования внимания можно выделять нужные участки кода маркерами, окрашивать в любой цвет;
  • Есть возможность показывать табуляцию, используя имитатор пробела &nbsp;;
  • Копирование в буфер обмена и вставка в нужное место осуществляется привычным способом.

Минусы:

  • Использование мнемоник и переноса строк;
  • Таким образом можно оформить лишь небольшие участки кода. Более объёмный код требует затрат времени и определённого усердия, увеличивается вероятность совершения ошибок;
  • Невозможно сократить поле ввода для экономии места, т.к. простое обрамление не предполагает полосу прокрутки;
  • Метод сам по себе несложный, примитивный, поэтому не вызывает особого уважения у «приверженцев наворотов и любителей усложнения простых вопросов».

Способ 2. С помощью поля TEXTAREA.

Такой способ я увидел, когда копировал коды контекстной рекламы Гугла. Посмотрел исходный код на их сайте и взял этот метод «на вооружение».

На вашем сайте это будет смотреться так:

Для выделения текста сделайте щелчок мышью. Для увеличения окна, «подцепите» мышью правый нижний угол.

При вставке объёмного кода и при выставленной относительно небольшой высоте, появляется полоса прокрутки:

Для выделения текста сделайте щелчок мышью. Для увеличения окна, «подцепите» мышью правый нижний угол.

Плюсы:

  • Как и в первом варианте - простота и наглядность;
  • Для создания не нужны скрипты, плагины и т.д.;
  • Можно вставлять любой код, любого объёма, без переноса строк и боязни ошибок (если будет ругаться валидатор - применять мнемоники!);
  • Удобное копирование в буфер обмена. Это действие осуществляется одним щелчком левой кнопки мыши.

Минусы:

  • Нет возможности выделять нужные участки кода маркерами, менять цвет текста и, вообще, делать что-либо с кодом, кроме замены символов мнемониками.

Для осуществления такого метода подготовленный участок кода нужно просто вставить в поле между тегами TEXTAREA:

<textarea cols="65" rows="10" readonly onclick="this.focus(); this.select();">
Сюда вставляем код
</textarea>	   

Возможные настройки блока:

  1. cols="65" - ширина блока;
  2. rows="10" - высота блока.

Способ 3. С помощью блока PRE.

Публикуемый код вставляйте в блок между тегами PRE:

<pre></pre>	   

Здесь я привел пример стилей для блока:

pre 
{
background: #eee;
 border: 1px solid #ddd; 
 width: 700px;
 overflow: auto; 
 margin: 0 auto;
 text-align: left;
 }	   

В результате применения этого метода получаем такую картину:

<html>
 <head>
	<title>Редирект</title>
	<META HTTP-EQUIV="Refresh" CONTENT="0; URL=/">
 </head>
	<body>
        </body>
</html>

Здесь всё то же, что и в способе с таблицей, но не нужно имитировать табуляцию и делать перенос строк. Если в стилях Вы укажете небольшую высоту блока (height), например, для экономии места на странице при объёмном публикуемом тексте (коде) - появится полоса прокрутки:

	  
<html>
   <head>
      <title>Редирект</title>
      <META HTTP-EQUIV="Refresh" CONTENT="0; URL=/">
   </head>
<body>
</body>
</html>


На двух страницах.  Конец страницы 1.  На следующую >>>


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка