Интернет и сайт

Изображения

Модальные окна (7)

Увеличение картинки (8)

Слайд-галереи (24)

Редактирование (4)

Фишки-мульки (17)

Разное

Электронные книги (3)

Нужности-полезности (3)

Сборник (7)

Главная » Создание сайта... » Публикация html-кода...

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

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

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

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

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

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

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

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

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

Плюсы:

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

Минусы:

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

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

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

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

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

body 
{
font-family: Arial, Tahoma, sans-serif; 
}

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

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

body 
{
font-family: Arial, Tahoma, sans-serif;
}
#contact-wrapper 
{
width: 330px;
border: 1px solid #e2e2e2;
background: #FAEBD7;
padding: 20px;
margin: 0 auto; 
}
#contact-wrapper div 
{
clear: both;
margin: 1em 0;
}
#contact-wrapper label 
{
display: block;
float: none;
font-size: 16px;
width: auto;
}
form#contactform input 
{
border-color: #B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
border-style: solid;
border-width: 1px;
padding: 5px;
font-size: 16px;
color: #333;
}
form#contactform textarea 
{
font-family: Arial, Tahoma, Helvetica, sans-serif;
font-size: 100%;
padding: 0.6em 0.5em 0.7em;
border-color: #B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
border-style: solid;
border-width: 1px;
}

Плюсы:

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

Минусы:

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

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

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

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

cols="65" - ширина блока;
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. На следующую >>>

Ваше мнение по материалу, изложенному на сайте

Служба поддержки