Содержание

Онлайн сервис форматирования HTML кода

Приветствую вас, друзья. Отдельный привет тем, кто увлекается веб-разработкой потому, что этот пост посвящен именно вам. С этого момента в разделе: Инструменты будет работать сервис форматирования HTML кода онлайн. Все мы прекрасно понимает, что такое правильная структура HTML документа, но не у всех получается ее создать. Или же по долгу службы вам приходится ковыряться в чужом коде, а написан он так, что только от одного взгляда на него может пойти кровь из глаз. Логическое форматирование HTML кода онлайн поможет легко превратить кашу из кода в красивый структурированный, удобочитаемый.

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

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

Пример онлайн форматирования HTML кода

Я открыл исходный код своего блога и выделил и скопировал архив записей. Вот  так выглядит он в сжатом виде:

А вот так уже после форматирования:

Разница, как говорится, на лицо или — найдите 10 отличий. Данный инструмент будет полезен хотя бы для того, чтобы посмотреть исходный код какой-либо страницы в более читаемом виде. Попробуйте открыть главную страницу яндекса и посмотреть исходный код. А потом его отформатируйте. Чтобы не потерять, добавьте страницу в закладки. Пишите в комментариях, как вы форматируете HTML код и какими сайтами пользуетесь.

Перейти в сервис

Создание простого веб-приложения, использующего базу данных MySQL

Автор: Трой Джуниперо (Troy Giunipero)

В этом документе описана процедура создания простого веб-приложения, которое подключается к серверу базы данных MySQL. Здесь также рассмотрены основные идеи и технологии веб-разработки, такие какJavaServer Pages (JSP), библиотека стандартных тегов JavaServer Pages (JSTL), интерфейс API связи с базами данных Java (JDBC) и двухуровневая архитектура между клиентом и сервером. Этот учебный курс разработан для начинающих разработчиков, обладающих базовыми знаниями в области веб-разработок и желающих применить свои знания к базе данных MySQL.

MySQL является популярной системой управления базами данных с открытым кодом, которая обычно используется в веб-приложениях благодаря своей скорости, гибкости и надежности. MySQL использует SQL (язык структурированных запросов) для доступа к данным в базе данных и их обработки.

Этот учебный курс является продолжением учебного курса Подключение к базе данных MySQL и в нем предполагается, что уже создана база данных MySQL с именем

MyNewDatabase, для которой зарегистрировано подключение в IDE NetBeans. Табличные данные, используемые в этом учебном курсе, содержатся в ifpwafcad. sql и также необходимы для работы с этим учебным курсом. Этот файл SQL создает две таблицы Subject и Counselor и затем заполняет их данными для примера. При необходимости сохраните этот файл на компьютер, затем откройте его в IDE NetBeans и запустите его в базе данных MySQL с именем MyNewDatabase
.

Содержание

Для работы с этим учебным курсом требуется следующее программное обеспечение и ресурсы.

Примечания:

  • Комплект загрузки Java среды IDE NetBeans позволяет пользователям установить сервер GlassFish. Для работы с данным учебным курсом требуется сервер GlassFish.
  • MySQL Connector/J JDBC Driver, необходимый для взаимодействия между платформами и протоколом баз данных MySQL, включен в IDE NetBeans.
  • Если необходимо сравнить проект с работающим решением, можно загрузить демонстрационное приложение.

Планирование структуры

С помощью двухуровневой архитектуры, в которой клиент взаимодействует с сервером напрямую, можно создать простое веб-приложение. В рамках данного учебного курса веб-приложение Java взаимодействует напрямую с базой данных MySQL с использованием API связи с базами данных Java. В сущности, именно драйвер MySQL Connector/J JDBC обеспечивает обмен данными между кодом Java, распознанным сервером приложения (GlassFish), и любым содержимым на SQL, языке, понятном для сервера базы данных (MySQL).

Приложение, создаваемое в этом учебном курсе, предполагает создание двух страниц JSP. На каждой такой странице с помощью HTML и CSS реализован простой интерфейс, и применяется технология JSTL для выполнения логики, напрямую запрашивающей базу данных с вставкой извлеченных данных на двух страницах. В базе данных MySQL

MyNewDatabase содержатся две таблицы базы данных Subject и Counselor, которые были созданы при работе с учебным курсом Подключение базы данных MySQL. Рассмотрим следующий двухуровневый сценарий.

Страница приветствия index.jsp представляется пользователю с помощью простой формы HTML. При запросе браузером

index.jsp код JSTL на странице инициирует запрос в MyNewDatabase. Выполняется извлечение данных из таблицы Subject со вставкой их на страницу перед ее передачей в браузер. При передаче данных о выборе пользователя в форме HTML на странице приветствия инициируется запрос страницы ответов (response.jsp). И снова код JSTL на странице инициирует запрос в MyNewDatabase. На этот раз данные извлекаются из обеих таблиц — Subject и Counselor. После чего выполняется их вставка на страницу, что позволяет пользователю просматривать данные в зависимости от вариантов выбора при возврате страницы в браузер.

Для реализации описанного выше сценария необходимо разработать простое приложение для организации IFPWAFCAD Международной ассоциации по консультированию и развитию для бывших профессиональных борцов.

index.jsp
response.jsp

Создание нового проекта

Сначала необходимо создать новый веб-проект в среде IDE:

  1. Выберите «Файл > Новый проект» (CTRL+SHIFT+N; &#8984+SHIFT+N в Mac ОС) в главном меню. Выберите категорию «Java Web», а затем выберите «Веб-приложение». Нажмите кнопку «Далее».

    С помощью этого мастера можно создать пустое веб-приложение в стандартном проекте IDE. В стандартном проекте для компиляции, развертывания и выполнения приложения используется созданный в среде IDE сценарий сборки проекта Ant.

  2. В поле «Имя проекта» введите «IFPWAFCAD». Также укажите местоположение проекта на компьютере. По умолчанию проекты в среде IDE помещаются в папку NetBeansProjects в домашнем каталоге. Нажмите кнопку «Далее».
  3. В панели «Сервер и параметры» укажите сервер GlassFish в качестве сервера, на котором будет запускаться приложение.

    Примечание.Сервер GlassFish отображается в раскрывающемся списке ‘Сервер’, если установлена версия Java IDE NetBeans. Поскольку сервер GlassFish включен в загрузку, он регистрируется в среде IDE автоматически. Для использования в проекте другого сервера нажмите кнопку «Добавить» рядом с полем с раскрывающимся списком «Сервер» и зарегистрируйте другой сервер в среде IDE. Работа с другими серверами, помимо GlassFish в рамках данного учебного курса не рассматривается.

  4. В поле «Версия Java EE» выберите Java EE 5.

    Для веб-проектов Java EE 6 и Java EE 7 использование дескриптора развертывания

    web.xml не требуется. Шаблон проекта NetBeans не содержит файл web.xml в проектах Java EE 6 и Java EE 7. Однако в данном учебном курсе рассматривается процесс объявления источника данных в дескрипторе развертывания. Функции, характерные только для Java EE 6 или Java EE 7, не требуются, поэтому в качестве версии проекта можно указать Java EE 5.

    Примечание. Точно так же можно указать в качестве версии проекта Java EE 6 или Java EE 7, а затем создать дескриптор развертывания web.xml

    . В мастере создания файла выберите категорию «Web», а затем выберите «Стандартный дескриптор развертывания».

  5. Нажмите кнопку «Завершить». Создается шаблон проекта для всего приложения и в редакторе открывается пустая страница JSP (index.jsp). Файл index.jspслужит в приложении страницей приветствия.

Подготовка веб-интерфейса

Начните с подготовки страницы приветствия (index.jsp) и страницы ответов (response.jsp). На странице приветствия реализована форма HTML для сбора пользовательских данных. На обеих страницах для просмотра структурированных данных используется таблица HTML. В этом разделе также рассматривается процесс создания таблицы стилей, которая расширяет внешний вид обеих страниц.

Настройка страницы приветствия

Убедитесь, что страница index.jsp открыта в редакторе. Если файл еще не открыт, дважды щелкните index.jsp под узлом «Веб-страницы» проекта IFPWAFCAD в окне «Проекты».

  1. В редакторе измените текст между тегами <title> на Домашняя страница IFPWAFCAD.
  2. Измените текст между тегами <h2> на Добро пожаловать в IFPWAFCAD, Международную ассоциацию по консультированию и развитию для бывших профессиональных борцов!
  3. Откройте палитру среды IDE, выбрав в главном меню «Окно» > «Палитра» (CTRL+SHIFT+8; &#8984+SHIFT+8 в ОС Mac). Наведите курсор на значок «Таблица» в категории «HTML» и обратите внимание на то, что отображается фрагмент кода для элемента по умолчанию.

    Палитру можно настроить в соответствии с существующими требованиями — щелкните правой кнопкой мыши палитру и выберите ‘Показать крупные значки’ и ‘Скрыть имена элементов’, чтобы палитра выглядела как на рисунке выше.
  4. Установите курсор сразу же после тегов <h2>. (Именно в этом месте будет внедрена новая таблица HTML). Далее в окне «Палитра» дважды щелкните значок «Таблица».
  5. В появившемся диалоговом окне «Вставка таблицы» укажите следующие значения и затем нажмите кнопку «ОК»:
    • Рядов: 2
    • Столбцов: 1
    • Размер границы: 0
    Код таблицы HTML создан и добавлен на страницу.
  6. Добавьте следующее содержимое в заголовок таблицы и ячейку первой строки таблицы (новое содержимое выделено полужирным шрифтом):
    <table border="0">
        <thead>
            <tr>
                <th>IFPWAFCAD offers expert counseling in a wide range of fields.</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>To view the contact details of an IFPWAFCAD certified former
                    professional wrestler in your area, select a subject below:</td>
            </tr>
  7. Для нижней строки таблицы вставьте форму HTML. Для этого поместите курсор между второй парой тегов <td> и дважды щелкните значок формы HTML ( ) на палитре. В диалоговом окне «Вставка формы» введите response.jsp в текстовом поле «Действие» и нажмите кнопку «ОК».
  8. Между тегами <form> введите следующее содержимое (новое содержимое выделено полужирным шрифтом):
    <tr>
        <td>
            <form action="response.jsp">
                <strong>Select a subject:</strong>
            </form>
        </td>
    </tr>
  9. Нажмите клавишу Enter, чтобы добавить пустую строку после добавленного содержимого, затем дважды щелкните «Список» в палитре, чтобы открыть диалоговое окно «Вставить список».
  10. В диалоговом окне «Вставить список» ведите subject_id для текстового поля «Имя» и нажмите «OK». Обратите внимание на то, что к форме добавляется фрагмент кода для раскрывающегося списка.

    Количество параметров для раскрывающегося списка не имеет значения. Позже в этом учебном курсе будет показано добавление тегов JSTL для динамического создания на основе данных, полученных из таблицы базы данных «Subject».

  11. Добавьте элемент кнопки ‘Отправить’ ( ) в точку, расположенную непосредственно после только что добавленного раскрывающегося списка. Для этого можно использовать окно «Палитра» или вызвать дополнение кода в редакторе, как показано в предыдущем шаге. В диалоговом окне «Вставка кнопки» в текстовых полях «Подпись» и «Имя» введите Отправить и нажмите кнопку ОК.
  12. Для форматирования кода щелкните правой кнопкой мыши в редакторе и выберите ‘Формат’ (Alt-Shift-F; Ctrl-Shift-F в Mac). Код автоматически форматируется и должен теперь выглядеть следующим образом:
    <body>
        <h3>Welcome to <strong>IFPWAFCAD</strong>, the International Former
            Professional Wrestlers' Association for Counseling and Development!
        </h3>
    
        <table border="0">
            <thead>
                <tr>
                    <th>IFPWAFCAD offers expert counseling in a wide range of fields. </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>To view the contact details of an IFPWAFCAD certified former
                        professional wrestler in your area, select a subject below:</td>
                </tr>
                <tr>
                    <td>
                        <form action="response.jsp">
                            <strong>Select a subject:</strong>
                            <select name="subject_id">
                                <option></option>
                            </select>
                            <input type="submit" value="submit" name="submit" />
                        </form>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>

    Для просмотра этой страницы в браузере щелкните правой кнопкой мыши в редакторе и выберите ‘Запустить файл’ (Shift-F6; Fn-Shift-F6 в Mac). После этого страница JSP будет автоматически скомпилирована и развернута на сервере. Открывается браузер по умолчанию, и в нем выводится страница из местоположения, где она развернута.

Создание страницы ответов

Для подготовки интерфейса для страницы response.jsp сначала необходимо создать файл в проекте. Обратите внимание на то, что большая часть содержимого, отображаемого на странице, создана динамически с помощью технологии JSP. Поэтому в следующих шагах будет необходимо добавить метки-заполнители, которые позже будут заменены кодом JSP.

  1. Щелкните правой кнопкой мыши узел проекта «IFPWAFCAD» в окне «Проекты» и выберите «Создать > JSP». Откроется диалоговое окно «Новый файл JSP».
  2. В поле «Имя файла JSP» введите response. Обратите внимание на то, что в настоящий момент для поля «Расположение» выбран каталог «Веб-страницы», это означает, что файл будет создан в каталоге проекта web. Это то же местоположение, что и для страницы приветствия index.jsp.
  3. Примите остальные значения по умолчанию и нажмите кнопку «Готово». В редакторе выполняется создание и открытие шаблона новой страницы response.jsp. Новый узел JSP также отображается в каталоге «Веб-страницы» в окне «Проекты».
  4. В редакторе измените заголовок на IFPWAFCAD - {местозаполнитель}
  5. Удалите строку <h2>Hello World!</h2> строка между тегами <body>. Скопируйте и вставьте в тело страницы следующую таблицу HTML:
    <table border="0">
        <thead>
            <tr>
                <th colspan="2">{placeholder}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><strong>Description: </strong></td>
                <td><span>{placeholder}</span></td>
            </tr>
            <tr>
                <td><strong>Counselor: </strong></td>
                <td>{placeholder}
                    <br>
                    <span>
                    member since: {placeholder}</span>
                </td>
            </tr>
            <tr>
                <td><strong>Contact Details: </strong></td>
                <td><strong>email: </strong>
                    <a href="mailto:{placeholder}">{placeholder}</a>
                    <br><strong>phone: </strong>{placeholder}
                </td>
            </tr>
        </tbody>
    </table>

    Для просмотра этой страницы в браузере щелкните правой кнопкой мыши в редакторе и выберите ‘Запустить файл’ (Shift-F6; Fn-Shift-F6 в Mac). Выполняется компиляция и развертывание страницы на сервере GlassFish с последующим открытием в браузере по умолчанию.

Создание таблицы стилей

Создайте простую таблицу стилей для расширения просмотра в веб-интерфейсе. При работе с данным учебным курсом предполагается, что пользователь обладает знаниями о правилах стилей и их влиянии на соответствующие элементы HTML на страницах index.jsp и response.jsp.

  1. Откройте мастер создания файлов, нажав кнопку ‘Создать файл’ ( ) на главной панели инструментов IDE. Выберите категорию «Web», а затем выберите «Каскадная таблица стилей» и нажмите кнопку «Далее».
  2. Введите style в поле «Имя файла CSS» и нажмите кнопку «Готово». Среда IDE создает пустой файл CSS и располагает его в том же местоположении проекта, что и index.jsp и response.jsp. Обратите внимание на то, что узел для style. css отображается теперь внутри проекта в окне «Проекты», а файл открывается в редакторе.
  3. В редакторе добавьте следующее содержимое к файлу style.css:
    body {
        font-family: Verdana, Arial, sans-serif;
        font-size: smaller;
        padding: 50px;
        color: #555;
    }
    
    h2 {
        text-align: left;
        letter-spacing: 6px;
        font-size: 1.4em;
        color: #be7429;
        font-weight: normal;
        width: 450px;
    }
    
    table {
        width: 580px;
        padding: 10px;
        background-color: #c5e7e0;
    }
    
    th {
        text-align: left;
        border-bottom: 1px solid;
    }
    
    td {
        padding: 10px;
    }
    
    a:link {
       color: #be7429;
       font-weight: normal;
       text-decoration: none;
    }
    
    a:link:hover {
       color: #be7429;
       font-weight: normal;
       text-decoration: underline;
    }
  4. Подключите таблицу стилей к index.jsp и response.jsp. На обеих страницах добавьте следующую строку между тегами <head>:
    <link rel="stylesheet" type="text/css" href="style. css">
    Для быстрого перехода между открытыми в редакторе файлами нажмите CTRL+TAB, а затем выберите требуемый файл.

Подготовка средств обмена данными между приложениями и базой данных

Наиболее эффективным способом реализации соединения между сервером и базой данных является настройка пула подключений базы данных. Создание нового подключения для каждого запроса клиента может занимать много времени, особенно для приложений, постоянно получающих огромное количество запросов. Во избежание этого создается и поддерживается множество подключений, организованных в виде пула подключений. Входящие запросы, требующие доступа к данным приложения, используют уже созданное подключение из пула. Аналогичным образом, когда запрос завершен, подключение не закрывается, а возвращается в пул.

После подготовки источника данных и пула подключений для сервера необходимо определить в приложении необходимость использования источника данных. Как правило, для этого создается запись в дескрипторе развертывания приложения web.xml. Наконец, необходимо проверить доступность для сервера драйвера базы данных (JDBC MySQL Connector/J).

Примечание. Для дальнейшей работы необходимо убедиться в том, что база данных MySQL с именем MyNewDatabase настроена корректно и содержит данные примера из ifpwafcad.sql. Этот файл SQL создает две таблицы Subject и Counselor и затем заполняет их данными для примера. Если это не было выполнено ранее, или с этим заданием возникли сложности, то прежде чем продолжить учебный курс, обратитесь к разделу Подключение к базе данных MySQL.

Помимо этого для создания источника данных и работы с сервером GlassFish в рамках данного учебного курса необходимо защитить базу данных паролем. При использовании учетной записи MySQL root по умолчанию с пустым паролем с помощью командной строки можно установить другой пароль.

В качестве пароля в этом учебном курсе используется nbuser. Для установки пароля nbuser в командной строке откройте в системе MySQL каталог bin и введите следующие данные:

shell> mysql -u root
mysql> UPDATE mysql.user SET Password = PASSWORD('nbuser')
    ->     WHERE User = 'root';
mysql> FLUSH PRIVILEGES;

Дополнительные сведения приведены в официальном справочном руководстве по работе с MySQL: Защита исходных учетных записей MySQL.


  1. Настройка источника данных JDBC и пула подключений
  2. Обращение к источнику данных из приложения
  3. Добавление файла JAR драйвера базы данных к серверу

Настройка источника данных JDBC и пула подключений

Сервер GlassFish Server Open Source Edition содержит библиотеку формирования пула подключений к базе данных (DBCP) с функцией формирования пула подключений в прозрачном для разработчика режиме. Для этого необходимо настроить для сервера источник данных JDBC (связь с базами данных Java) для использования в приложении при формировании пула подключений.

Дополнительные сведения о технологии JDBC приведены в документе Учебные курсы Java: основы JDBC.

Источник данных можно настроить непосредственно в консоли администратора сервера GlassFish или объявить необходимые для приложения ресурсы в файле glassfish-resources.xml, как описано ниже. При развертывании приложения сервер считывает объявления ресурсов и создает требуемые ресурсы.

Далее рассматривается процесс объявления пула подключений и источника данных, использующего этот пул. Оба действия можно выполнить с помощью мастера ресурсов JDBC NetBeans.

  1. Откройте мастер создания файлов, нажав кнопку ‘Создать файл’ ( ) на главной панели инструментов IDE. Выберите категорию сервера GlassFish, затем выберите «Ресурс JDBC» и нажмите кнопку «Далее».
  2. В шаге 2, в области «Общие атрибуты» выберите параметр «Создать новый пул соединений JDBC», а затем в текстовом поле «Имя JNDI» введите jdbc/IFPWAFCAD.

    Источник данных JDBC использует JNDI. В интерфейсе API JNDI предоставляется единый для всех приложений способ поиска источников данных и получения доступа к ним. Дополнительные сведения приведены в Учебном курсе по JND.
  3. Дополнительно можно добавить описание источника данных. Например, укажите Обеспечивает доступ к базам данных, поставляющим данные для приложения IFPWAFCAD.
  4. Нажмите кнопку «Далее». После этого еще раз нажмите кнопку «Далее» и пропустите шаг 3, «Дополнительные свойства».
  5. В шаге 4 укажите имя пула подключений JDBC IfpwafcadPool. Убедитесь, что выбран параметр «Извлечь из существующего соединения» и выберите jdbc:mysql://localhost:3306/MyNewDatabase из раскрывающегося списка. Нажмите кнопку «Далее».

    Примечание. Мастер обнаруживает все соединения с базой данных, настроенные в IDE. Поэтому на этот момент должно существовать созданное подключение к базе данных MyNewDatabase. Можно проверить, какие подключения были созданы, открыв окно ‘Службы’ (Ctrl-5; ⌘-5 в Mac) и выполнив поиск узлов подключения ( ) в категории ‘Базы данных’.

  6. На этапе 5 выберите файл javax.sql.ConnectionPoolDataSource в списке «Тип ресурса».

    Обратите внимание на то, что среда IDE извлекает информацию из подключенной базы данных, указанной на предыдущем этапе, и задает свойства «имя-значение» для нового пула подключений.

  7. Нажмите кнопку «Завершить». Мастер ресурсов создает файл glassfish-resources.xml, который содержит записи для источника данных и указанный пул подключения.

В окне «Проекты» можно открыть glassfish-resources. xml, созданный в дереве узла «Серверные ресурсы». Обратите внимание, что в тегах <resources> источник данных и пул соединений объявлены как содержащие ранее указанные значения.

Для подтверждения регистрации нового источника данных и пула подключения на сервере GlassFish, можно развернуть проект на сервере, затем расположить ресурсы в окне «Службы» среды IDE.

  1. В окне ‘Проекты’, щелкните правой кнопкой мыши узел проекта IFPWAFCAD и выберите ‘Развернуть’. Запустится сервер, если это не было выполнено ранее, и проект будет скомпилирован и развернут на этом сервере.
  2. Откройте окно «Службы» (CTRL+5; &#8984+5 в системе Mac OS) и разверните узлы «Серверы» > «GlassFish» > «Ресурсы» > «JDBC» > «Ресурсы и пулы подключения JDBC». Проверьте, что теперь отображаются новый источник данных и пул подключений:

Обращение к источнику данных из приложения

Необходимо создать ссылку на только что созданный в веб-приложении ресурс JDBC. Для этого можно создать запись в дескрипторе развертывания приложения web.xml.

Дескрипторы развертывания являются текстовыми файлами на основе XML, содержащими информацию о развертывании приложения в определенной среде. Например, они обычно используются для указания параметров контекста приложения и поведенческих шаблонов, настроек безопасности, а также отображений для сервлетов, фильтров и прослушивающих процессов.

Примечание. Если в качестве версии Java при создании проекта указана Java EE 6 или Java EE 7, необходимо создать файл дескриптора развертывания. Для этого выберите «Веб > Стандартный дескриптор развертывания» в мастере создания файлов.

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

  1. В окне «Проекты» разверните структуру папки «Файлы конфигурации» и дважды щелкните web.xml, чтобы открыть файл в редакторе.
  2. Откройте вкладку «Ссылки» в верхней области экрана редактора.
  3. Разверните заголовок «Ссылки на ресурсы» и нажмите кнопку «Добавить», чтобы открыть диалог «Добавление ссылки на ресурс».
  4. В поле «Имя ресурса» введите имя ресурса, указанное выше при настройке источника данных для сервера (jdbc/IFPWAFCAD).
  5. Укажите javax.sql.ConnectionPoolDataSource в поле «Тип ресурса». Нажмите кнопку «ОК».

    Поле «Описание» является необязательным, но можно добавить удобочитаемое описание ресурса, например, База данных для приложения "IFPWAFCAD".

    Новый ресурс теперь перечислен в списке под заголовком ‘Ссылки на ресурсы’.

  6. Чтобы убедиться, что ресурс добавлен в файл web.xml, перейдите на вкладку «Исходный код» в верхней части экрана редактора. Заметим, что теперь в код включены следующие теги <resource-ref>.
    <resource-ref>
        <description>Database for IFPWAFCAD application</description>
        <res-ref-name>jdbc/IFPWAFCAD</res-ref-name>
        <res-type>javax.sql.ConnectionPoolDataSource</res-type>
        <res-auth>Container</res-auth>
        <res-sharing-scope>Shareable</res-sharing-scope>
    </resource-ref>

Добавление файла JAR драйвера базы данных к серверу

Добавление файла JAR драйвера базы данных является следующим шагом, необходимым для обеспечения взаимодействия сервера с базой данных. Необходимо поместить каталог установки драйвера базы данных и скопировать файл mysql-connector-java-5.1.6.x-bin.jar из корневого каталога драйвера в папку библиотеки на используемом сервере. Управление сервером в среде IDE при развертывании может обнаружить, добавлен ли файл JAR, и если нет, выполняет это автоматически.

Чтобы продемонстрировать это, откройте Диспетчер серверов (выберите «Сервис > Серверы»). В среде IDE предоставляется параметр «Развертывание драйвера JDBC». Если параметр включен, он запускает проверку для определения, требуются ли драйверы для развернутых на сервере приложений. В случае MySQL, если драйвер требуется, но он отсутствует, включенный драйвер среды IDE развертывается в соответствующем месте на сервере.

  1. Выберите «Сервис > Серверы», чтобы открыть Диспетчер серверов. На левой панели выберите «GlassFish».
  2. В главном окне выберите параметр «Включить развертывание драйвера JDBC».
  3. Прежде чем закрыть Диспетчер серверов, запишите путь, указанный в текстовом поле «Папка доменов». При подключении к серверу GlassFish в среде IDE фактически подключение выполняется к экземпляру сервера приложений. Каждый экземпляр запускает приложения в уникальном домене, а в поле «Имя домена» указано имя используемого сервером домена. Как видно на рисунке выше, файл JAR драйвера должен находиться в domain1. Это домен по умолчанию, созданный при установке сервера GlassFish.
  4. Нажмите кнопку «Закрыть», чтобы выйти из Диспетчера серверов.
  5. На компьютере перейдите к каталогу установки GlassFish и войдите в подпапку domains > domain1 > lib. Поскольку проект IFPWAFCAD уже должен быть развернут на сервере, должен отображаться файл mysql-connector-java-5.1.6-bin.jar. Если файл JAR драйвера не отображается, выполните следующий шаг.
  6. Разверните проект на сервере. В окне ‘Проекты’ среды IDE выберите ‘Развернуть’ в контекстном меню узла проекта. Ход выполнения можно видеть в окне «Вывод» среды IDE (CTRL+4; &#8984+4 для Mac). В окне «Вывод» указывается, что драйвер MySQL развернут в местоположении на сервере GlassFish.

    При возврате в подпапку domain1/lib на компьютере видно, что файл mysql-connector-java-5. 1.6.x-bin.jar добавлен автоматически.

Добавление динамической логики

Вернемся к местозаполнителям index.jsp и response.jsp, созданным выше при работе с учебным курсом. Теперь можно реализовать код JSTL для динамического (т. е. на основе пользовательского ввода) создания содержимого на страницах. Для этого выполните следующие три задания.

  1. Добавление библиотеки JSTL к пути к классам проекта
  2. Реализация кода JSTL

Добавление библиотеки JSTL к пути к классам проекта

Для доступа к данным из базы данных и их просмотра используйте Библиотеку стандартных тегов JavaServer Pages (JSTL). Сервер GlassFish по умолчанию содержит библиотеку JSTL. Для проверки разверните узел сервера GlassFish под узлом «Библиотеки» в окне «Проекты» и найдите библиотеку javax.servlet.jsp.jstl.jar. (В более ранних версиях сервера GlassFish используется библиотека jstl-impl. jar.) Поскольку библиотеки сервера GlassFish по умолчанию добавляются в путь классов проекта, на данном этапе никаких действий не требуется.

JSTL имеет четыре основных раздела функциональности.

  • core: базовые, структурные задачи, такие как итерации и условные выражения для контроля потока операций
  • fmt: форматирование сообщений интернационализации и локализации
  • sql: простой доступ к базе данных
  • xml: обработка содержимого XML

Основное внимание в данном учебном курсе уделяется библиотекам тегов core и sql.

Реализация кода JSTL

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

В среде IDE предоставляется несколько специфичных для базы данных фрагментов JSTL, доступных для выбора в окне «Палитра» (CTRL+SHIFT+8; &#8984+SHIFT+8 для Mac).

index.jsp

Для динамического отображения содержимого формы на странице index.jsp необходимо получить доступ ко всем именам из таблицы базы данных «Subject»:

  1. Наведите курсор мыши на элемент «Отчет БД» в окне «Палитра».

    Для элемента «Отчет БД» при создании запроса SQL используется тег <sql:query>, после чего с помощью тега <c:forEach> обрабатывается resultset запроса, а затем выполняется вывод извлеченных данных.

  2. Установите курсор над объявлением <%@page ... %> (строка 7) и дважды щелкните элемент «Отчет БД» в окне «Палитра». В открывшемся диалоговом окне введите следующие подробные сведения:
    • Имя переменной: subjects
    • Контекст: страница
    • Источник данных: jdbc/IFPWAFCAD
    • Оператор запроса: SELECT subject_id, name FROM Subject
  3. Нажмите кнопку «ОК». В файле index.jsp создается следующее содержимое. Новое содержимое выделено полужирным шрифтом.
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
    <%--
        Document   : index
        Author     : nbuser
    --%>
    
    <sql:query var="subjects" dataSource="jdbc/IFPWAFCAD">
        SELECT subject_id, name FROM Subject
    </sql:query>
    
    <table border="1">
        <!-- column headers -->
        <tr>
        <c:forEach var="columnName" items="${subjects.columnNames}">
            <th><c:out value="${columnName}"/></th>
        </c:forEach>
    </tr>
    <!-- column data -->
    <c:forEach var="row" items="${subjects.rowsByIndex}">
        <tr>
        <c:forEach var="column" items="${row}">
            <td><c:out value="${column}"/></td>
        </c:forEach>
        </tr>
    </c:forEach>
    </table>
    
    <%@page contentType="text/html" pageEncoding="UTF-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. 01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    Обратите внимание на то, что в среде IDE автоматически добавлены директивы taglib, необходимые для тегов JSTL, используемых в созданном содержимом, (<sql:query> и <c:forEach>). Директива taglib объявляет, что на странице JSP используются пользовательские теги (JSTL), указывает библиотеку тегов, которая их определяет, а также префикс тега.
  4. Запустите проект, чтобы проверить его отображение в браузере. Щелкните правой кнопкой мыши узел проекта в окне «Проекты» и выберите «Выполнить».

    При выборе «Выполнить», IDE развертывает проект на сервере GlassFish, страница индексов компилируется в сервлет, а страница приветствия открывается в браузере по умолчанию. Код, созданный на основе элемента «Отчет БД», определяет следующую таблицу на странице приветствия.

    Как видно, с помощью элемента «Отчет БД» можно быстро протестировать подключение к базе данных и просмотреть табличные данные из базы данных в браузере. Это особенно рекомендуется при создании прототипов.

    В следующих шагах рассматривается интеграция созданного кода в раскрывающийся список HTML, созданный выше при работе с данным учебным курсом.

  5. Проверьте данные столбцов в созданном коде. Используется два тега <c:forEach>, причем один из них вставляется в другой. В результате контейнер JSP (сервер GlassFish) выполняет цикл по всем строкам таблицы с циклическим прохождением всех столбцов. Аналогично отображаются данные для всей таблицы.
  6. Интегрируйте теги <c:forEach> в форму HTML следующим образом. Значение каждого элемента изменяется на subject_id, а текст вывода — на name, как записано в базе данных. (Изменения выделяются полужирным шрифтом).
    <form action="response.jsp">
        <strong>Select a subject:</strong>
        <select name="subject_id">
            <c:forEach var="row" items="${subjects. rowsByIndex}">
                <c:forEach var="column" items="${row}">
                    <option value="<c:out value="${column}"/>"><c:out value="${column}"/></option>
                </c:forEach>
            </c:forEach>
        </select>
        <input type="submit" value="submit" name="submit" />
    </form>
    Ниже показан более простой способ интеграции тегов <c:forEach> в форму HTML.
    <form action="response.jsp">
        <strong>Select a subject:</strong>
        <select name="subject_id">
            <c:forEach var="row" items="${subjects.rows}">
                <option value="${row.subject_id}">${row.name}</option>
            </c:forEach>
        </select>
        <input type="submit" value="submit" name="submit" />
    </form>

    Во всех случаях теги <c:forEach> циклически обрабатывает значения subject_id и name из запроса SQL со вставкой каждой пары в теги HTML <option>. Таким образом раскрывающийся список формы заполняется данными.

  7. Удалите таблицу, созданную из элемента «Отчет БД». (Удаление показано ниже перечеркнутым текстом.)
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
    <%--
        Document   : index
        Created on : Dec 22, 2009, 7:39:49 PM
        Author     : nbuser
    --%>
    
    <sql:query var="subjects" dataSource="jdbc/IFPWAFCAD">
        SELECT subject_id, name FROM Subject
    </sql:query>
    
    <table border="1">
        <!-- column headers -->
        <tr>
        <c:forEach var="columnName" items="${subjects.columnNames}">
            <th><c:out value="${columnName}"/></th>
        </c:forEach>
    </tr>
    <!-- column data -->
    <c:forEach var="row" items="${subjects.rowsByIndex}">
        <tr>
        <c:forEach var="column" items="${row}">
            <td><c:out value="${column}"/></td>
        </c:forEach>
        </tr>
    </c:forEach>
    </table>
    
    <%@page contentType="text/html" pageEncoding="UTF-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. 01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
  8. Сохраните изменения (CTRK+S; &#8984+S в Mac OS).
  9. Обновите страницу приветствия проекта в браузере.

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

    Повторно развертывать проект не нужно, так как функция «Компилировать при сохранении» (compile-on-save) включена для вашего проекта по умолчанию. Это означает, что при изменении и сохранении файла он автоматически компилируется и развёртывается, и нет необходимости перекомпилировать весь проект. Функцию компиляции при сохранении можно отключать в категории «Компиляция» в окне проекта «Свойства».

response.jsp

На странице ответов предоставляются подробные сведения о консультанте по теме, выбранной на странице приветствия. Созданный запрос должен содержать запись консультанта, идентификатор которого counselor_id соответствует значению counselor_idfk из выбранной записи темы.

  1. Наведите указатель мыши на объявление <%@page ... %> (строка 7) и дважды щелкните «Запрос к БД» в палитре, чтобы открыть диалоговое окно «Вставить запрос к БД».
  2. В диалоговом окне «Вставить запрос к БД» введите следующие данные.
    • Имя переменной: counselorQuery
    • Контекст: страница
    • Источник данных: jdbc/IFPWAFCAD
    • Оператор запроса: SELECT * FROM Subject, Counselor WHERE Counselor.counselor_id = Subject.counselor_idfk AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/>
  3. Нажмите кнопку «ОК». В файле response.jsp создается следующее содержимое. Новое содержимое выделено полужирным шрифтом.
    <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
    <%--
        Document   : response
        Created on : Dec 22, 2009, 8:52:57 PM
        Author     : nbuser
    --%>
    
    <sql:query var="counselorQuery" dataSource="jdbc/IFPWAFCAD">
        SELECT * FROM Subject, Counselor
        WHERE Counselor.counselor_id = Subject.counselor_idfk
        AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/>
    </sql:query>
    
    <%@page contentType="text/html" pageEncoding="UTF-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    Обратите внимание на то, что в среде IDE автоматически добавлена директива taglib для тега <sql:query>. Также отметьте, что непосредственно в запросе использовался тег <sql:param>. Поскольку для этого запроса используется значение subject_id, отправленное с index.jsp, извлечь это значение можно с помощью оператора EL (язык выражений) в форме ${param.subject_id}, а затем передать его для тега <sql:param>. В этом случае его можно использовать вместо вопросительного знака SQL (?) во время выполнения.
  4. Используйте тег <c:set> для установки переменной, соответствующей первой записи (строке) resultset, возвращенного из запроса. Новое содержимое выделено полужирным шрифтом.
    <sql:query var="counselorQuery" dataSource="jdbc/IFPWAFCAD">
        SELECT * FROM Subject, Counselor
        WHERE Counselor.counselor_id = Subject.counselor_idfk
        AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/>
    </sql:query>
    
    <c:set var="counselorDetails" value="${counselorQuery.rows[0]}"/>
    Несмотря на то, что возвращенный из запроса resultset должен содержать только одну запись, этот шаг является обязательным, поскольку для страницы необходимо обеспечить доступ к значениям в записи с помощью операторов EL (язык выражений). Вспомните, что на странице index.jsp можно было получить доступ к значениям из resultset просто посредством тега <c:forEach>. Однако тег <c:forEach> функционирует путем настройки переменной для строк из запроса, что позволяет извлекать значения путем включения переменной строки в операторы EL.
  5. Добавьте директиву taglib для базовой библиотеки JSTL файла. Это обеспечит распознавание тега <c:set>. Новое содержимое выделено полужирным шрифтом.
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
  6. В разметке HTML замените все местозаполнители кодом операторов EL с отображением данных из переменной counselorDetails. (Изменения выделены ниже полужирным шрифтом):
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <link rel="stylesheet" type="text/css" href="style. css">
            <title>${counselorDetails.name}</title>
        </head>
    
        <body>
            <table>
                <tr>
                    <th colspan="2">${counselorDetails.name}</th>
                </tr>
                <tr>
                    <td><strong>Description: </strong></td>
                    <td><span>${counselorDetails.description}</span></td>
                </tr>
                <tr>
                    <td><strong>Counselor: </strong></td>
                    <td><strong>${counselorDetails.first_name} ${counselorDetails.nick_name} ${counselorDetails.last_name}</strong>
                        <br><span>
                        <em>member since: ${counselorDetails.member_since}</em></span></td>
                </tr>
                <tr>
                    <td><strong>Contact Details: </strong></td>
                    <td><strong>email: </strong>
                        <a href="mailto:${counselorDetails. email}">${counselorDetails.email}</a>
                        <br><strong>phone: </strong>${counselorDetails.telephone}</td>
                </tr>
            </table>
        </body>
    </html>

Запуск готового приложения

Процесс создания приложения завершен. Попробуйте снова запустить его для просмотра результата в браузере. Обратите внимание на то, что благодаря функции NetBeans «Компиляция при сохранении» специально выполнять компиляцию или повторное развертывание приложения не требуется. При выполнении проекта развертывание гарантированно содержит самые последние изменения.

Нажмите кнопку ‘Запустить проект’ () на главной панели инструментов. В браузере по умолчанию среды IDE открывается страница index.jsp..

Когда в браузере отображена страница index.jsp, выберите тему из раскрывающегося списка и нажмите кнопку submit. Выполняется переадресация на страницу response.jsp, отображающую подробные сведения в соответствии с выбором.

Это заключительный раздел учебного курса «Создание простого веб-приложения, использующего базу данных MySQL» В этом документе описана процедура создания простого веб-приложения с подключением к базе данных MySQL. Здесь также рассматривается процесс создания приложения с помощью базовой двухуровневой архитектуры при использовании технологий JSTL и JSP для доступа к данным с динамическим просмотром.


Устранение проблем

Большинство проблем в приложении из учебного курса возникают по причине сложностей процесса обмена данными между сервером GlassFish Server Open Source Edition и сервером базы данных MySQL. В случае некорректного отображения приложения или генерации ошибки сервера рекомендуется выполнить следующие проверки.

Существуют ли ресурсы базы данных?

В среде IDE в окне «Службы» (CTRL+5; &#8984+5 для Mac) проверьте функционирование сервера MySQL, а также доступность MyNewDatabase и наличие в ней соответствующих табличных данных.

Существуют ли на сервере пул подключений и источник данных?

После развертывания приложения на сервере GlassFish файл проекта glassfish-resources.xml должен содержать инструкции для сервера по созданию ресурсов и пула подключения JDBC. Их наличие можно проверить в узле «Серверы» в окне «Службы».

  • Разверните узел «Серверы» > «Сервер GlassFish» > «Ресурсы». Разверните узел «JDBC Resources» (Ресурсы JDBC), чтобы увидеть источник данных jdbc/IFPWAFCAD, созданный из файла glassfish-resources.xml. Разверните узел «Пул подключения», чтобы увидеть пул подключения IfpwafcadPool, созданный из файла glassfish-resources.xml. Подробное описание приведено выше.

Доступен ли MySQL Connector/драйвер J для сервера GlassFish?

Проверьте, что на сервере GlassFish выполнено развертывание драйвера MySQL Connector/J. Соответствующее описание приведено в разделе Добавление файла JAR драйвера базы данных на сервер.

  • Найдите на компьютере папку установки сервера GlassFish и откройте подпапку GlassFish domains/domain1/lib. В ней должен находиться файл mysql-connector-java-5.1.6-bin.jar.

Защищена ли база данных паролем?

Необходимо защитить базу данных паролем, чтобы при выполнении упражнений данного учебного курса источник данных сервера GlassFish работал корректно. При использовании учетной записи MySQL root по умолчанию с пустым паролем с помощью командной строки можно установить другой пароль.

Корректно ли установлены значения свойств пула подключений?

Проверьте правильность работы пула подключений для сервера.

  1. Откройте окно «Службы» (CTRL+5; &#8984+5 для Mac) и разверните узел «Серверы.
  2. В контекстном меню узла «Сервер GlassFish» выберите «Просмотр консоли администратора».
  3. При отображении соответствующего запроса введите имя пользователя и пароль. Имя пользователя и пароль можно посмотреть в Диспетчере серверов.
  4. В дереве в левой части консоли разверните узел «Ресурсы > JDBC > Пулы подключений > IfpwafcadPool«. В главном окне отображаются подробные сведения о пуле подключений IfpwafcadPool.
  5. Нажмите кнопку «Ping». Если пул подключений настроен правильно, отображается сообщение Ping Succeeded.
  6. Если выполнение ping-тестирования завершается неуспешно, откройте вкладку «Дополнительные свойства» для проверки правильности настройки указанных значений свойств.


Дополнительные сведения

Дополнительные сведения о развертывании веб-приложений Java приведены в следующих материалах.

  • Статьи и руководства по NetBeans
  • Связь с базами данных Java (JDBC)
  • Библиотека стандартных тегов JavaServer Pages (JSTL)
  • Имена Java и интерфейс каталогов (JNDI)

More

Contribute Documentation! Docs for Earlier Releases

HTML документ.

Структура html документа. Что тестировать?

Очень важно протестировать HTML код, проверить его на отсутствие ошибок валидации на страницах сайта, убедиться, что веб-сайт работает во всех браузерах, так как это является основным требованием почти для всех веб-разработчиков. После проверки и в случае обнаружения явных ошибок нужно внести в код соответствующие изменения. Существует множество онлайн-инструментов, которые помогут убедиться, что HTML код генерирует желаемый результат, а веб-сайт работает в упрощенном режиме. Можно пойти традиционным путем и использовать Chrome Developer Tools, но доступно много других онлайн-инструментов, с которыми проще работать. 

Предлагаем шесть инструментов тестирования HTML кода в браузере:

  1. CodePen

Этот онлайн-инструмент скорее онлайн-сообщество разработчиков, которые используют различные интерфейсные инструменты, такие как HTML, CSS, JavaScript и множество библиотек для написания кода. Инструмент функционирует как онлайн-редактор кода в браузере. Таким образом, это один из самых популярных инструментов для проверки HTML кода, а также одно из крупнейших сообществ разработчиков, где можно многое узнать о HTML, CSS, веб-разработке в целом и о тестировании кода.

  1. Использование текстового редактора

Это еще один способ запустить файл HTML. При работе в текстовом редакторе в автономном режиме, таком как Sublime Text или Notepad ++, просто нужно сохранить файл с расширением .html и запустить его, дважды щелкнув по нему. По умолчанию он запускается в браузере, установленном на локальном компьютере. Также можно перейти в раздел «Настройки» своего устройства и изменить браузер по умолчанию, чтобы проанализировать вывод в разных браузерах. 

  1. JSFiddle

JSFiddle – это онлайн-сообщество разработчиков, которое также предоставляет платформу для тестирования HTML кода онлайн в браузере. Он был запущен как приложение в 2009 году, но позже приобрел огромную популярность. JSFiddle в основном используется для тестирования кода JavaScript в режиме онлайн, но также можно тестировать HTML, CSS и код, написанный с помощью некоторых других интерфейсных библиотек. Он имеет собственный онлайн-редактор и одновременно показывает вывод. Это буквально лучший инструмент для работы с JavaScript. Единственным недостатком является то, что нужно нажать кнопку «Выполнить», чтобы обновить панель предварительного просмотра.

  1. JSBin

Многие новички считают интерфейс JSFiddle сложным для работы. JSBin является альтернативой JSFiddle и сравнительно проще в использовании. Он имеет два типа доступа: бесплатный и профессиональный. Оба типа позволяют неограниченное бесплатное тестирование кода HTML, CSS и JavaScript в браузере, однако количество библиотек JavaScript, которые можно включить, является фиксированным. Если необходимо получить доступ к дополнительным функциям, таким как частные корзины и хостинг активов, нужно зарегистрировать профессиональную учетную запись.

  1. Liveweave

Liveweave предлагает предварительный просмотр HTML кода в режиме реального времени и является одним из самых красивых и приятных инструментов для работы. Интерфейс действительно прост и понятен благодаря наличию изменяемых размеров панелей. При наборе кода во встроенном редакторе он постоянно делает подсказки, чем значительно облегчает работу. Кроме того, можно легко сохранить код в облаке и даже загрузить его в виде файла .zip для дальнейшего использования. Он также позволяет работать с библиотеками JavaScript, такими как jQuery, и имеет линейку, позволяющую отслеживать отзывчивость продукта.

  1. HTMLhouse

Это лучший вариант, если HTML это все, с чем имеете дело. Интерфейс чистый и минимальный, без дополнительных функций и поддержки. Он был разработан исключительно для HTML. Можно опубликовать HTML и поделиться им публично/в частном порядке. Для каждого фрагмента кода, который будет написан, есть возможность поделиться ссылкой на тот случай, если нужно переслать ее.

Также существует бесплатный сервис для проверки Markup Validation Service W3C, с помощью которого можно осуществить поиск ошибок валидации на страницах сайта. Этот сервис проверяет указанные данные на ошибки, а также формирует отчет с их перечнем и рекомендациями по исправлению. 

Для новичков, помимо вышеприведенных инструментов, могут пригодиться некоторые другие HTML-ресурсы, такие как HTML Goodies. Также можно работать с инструментами разработчика Chrome. Для этого нужно запустить HTML документ в Google Chrome и щелкнуть правой кнопкой мыши элемент HTML, который необходимо проверить. Нажав «Проверить» можно получить инструменты для запуска, анализа и даже отладки кода.

Однако основным недостатком всех вышеперечисленных инструментов является то, что они показывают, как выглядит код только в одном браузере. Если необходимо тестировать в разных браузерах, нужно установить их все. Это также иногда невозможно. Например, если тестировщик работает в среде Mac, он не может напрямую тестировать в IE. Одним из способов протестировать сайт в разных браузерах является использование онлайн-кроссбраузерных инструментов тестирования, таких как LambdaTest. Это один из самых удивительных инструментов кроссбраузерного тестирования, позволяющий тестировать свой код на кроссбраузерную совместимость. Результаты теста основаны на результатах более 2000 браузеров. Это обеспечивает бесперебойную работу кода в различных десктопных и мобильных браузерах и избавляет от многих проблем.

HTML Cleaner — онлайн-украситель и конвертер слов

Варианты очистки

Удалить атрибуты тега

Удалить встроенные стили

Удалить классы и идентификаторы

Удалить все теги

Удалить последовательные & nbsp; s

Преобразовать в , в

Удалить пустые теги

Удалите теги одним & nbsp;

Удалить теги диапазона

Удалить изображения

Удалить ссылки

Удалить столы

Заменить теги таблицы на структурированные

s

Удалить комментарии

Кодировать специальные символы

Установить новые строки и отступы текста

Избавьтесь от грязной разметки с помощью бесплатного онлайн-средства очистки HTML. С помощью этого онлайн-инструмента очень легко составлять, редактировать, форматировать и минимизировать веб-код. Преобразуйте документы Word в аккуратный HTML и любые другие визуальные документы, такие как Excel, PDF, Google Docs и т. Д. Работать с двумя прикрепленными визуальным редактором и редактором исходного кода, которые мгновенно реагируют на ваши действия, чрезвычайно просто и эффективно.

HTML Cleaner оснащен множеством полезных функций, которые максимально упрощают очистку и редактирование HTML. Просто вставьте свой код в текстовую область, настройте параметры очистки и нажмите кнопку Clean HTML .Он может обрабатывать любой документ, созданный с помощью Microsoft Excel, PowerPoint, Google docs или любого другого композитора. Это поможет вам легко избавиться от всех встроенных стилей и ненужных кодов, добавленных Microsoft Word или другими редакторами WYSIWYG. Этот инструмент HTML-редактора полезен, когда вы переносите контент с одного веб-сайта на другой и хотите очистить все чужие классы и идентификаторы, применяемые исходным сайтом. Используйте инструмент поиска и замены для своих пользовательских команд. Генератор бессмысленного текста позволяет легко добавлять в редактор фиктивный текст.

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

Наши спонсоры

Посетите Omnipapers, чтобы узнать обо всех лучших услугах по написанию эссе.
Посетите Myhomeworkdone.com для получения отличной помощи в программировании.
Посетите Ewritingservice.com, если вам понадобится помощь в написании.
Essaysmatch — лучший сервис по написанию статей
Если у вас возникли проблемы с написанием эссе, попробуйте сервис Rapidessay Writing.
Посетите OrderEssay.net, чтобы получить квалифицированную помощь в написании эссе.
Goread предлагает отличные варианты для всех, кто хочет купить подписчиков в Instagram. Получайте мгновенных и быстрых последователей с автоматическим пополнением, если происходит какое-либо падение.

Преобразование документов Word в чистый HTML

Для публикации в Интернете PDF-файлов, Microsoft Word, Excel, PowerPoint или любых других документов, составленных с помощью различных программ текстовых редакторов, или просто для копирования содержимого, скопированного с другого веб-сайта, вставьте форматированный контент в визуальный редактор. Исходный HTML-код документа также будет немедленно виден в редакторе исходного кода. Панель управления над редактором WYSIWYG управляет этим полем, в то время как все остальные параметры очистки источника предназначены для редактирования исходного кода.Нажмите кнопку Clean HTML после настройки параметров очистки. Скопируйте очищенный код и опубликуйте его на своем сайте.

Нет гарантии, что программа исправит все ошибки в вашем коде именно так, как вы хотите, поэтому попробуйте ввести синтаксически правильный HTML.

Преобразуйте таблицы HTML в структурированные элементы div, установив соответствующий флажок. Раньше веб-дизайнеры создавали свои веб-сайты, используя таблицы для организации макета страницы, но в эпоху адаптивного веб-дизайна таблицы устарели, и их место заняли DIV.Этот онлайн-инструмент поможет вам превратить ваши таблицы в структурированные элементы div с помощью нескольких простых щелчков мышью.

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

Стать участником

Этот веб-сайт представляет собой полнофункциональный инструмент для очистки и составления HTML-кода, но у вас есть возможность приобрести членство в HTML G и получить доступ к еще более профессиональным функциям. Используя бесплатную версию HTML Cleaner, вы соглашаетесь на включение ссылок в редактируемые документы. Этот инструмент очистки может добавить рекламную ссылку третьей стороны в конец очищенных документов, и вам нужно оставить этот код без изменений, пока вы используете бесплатную версию.

Создайте свою карту сайта Google в Интернете

Настоятельно рекомендую это веб-мастерам, которые управляют несколькими веб-сайтами. Этот инструмент буквально сократил наше рабочее время примерно на 30 минут для каждого сайта. Умножьте это на количество сайтов, которыми мы управляем, это много часов!

Это также значительно упростило нашу работу по обновлению карты сайта.Спасибо, что оставили этот инструмент бесплатным.

Адриан

Я использую Xml Sitemap в течение многих лет, единственный надежный генератор карты сайта, с простыми параметрами, который может использовать даже пользователь, не имеющий большого опыта.

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

Trip_Kashmir
www. kashmirtrip.info

Привет, небольшая заметка, чтобы поблагодарить вас за отличный онлайн-генератор карты сайта Google & Ror в формате XML. Его так легко использовать и реализовать.Еще раз спасибо за такой отличный бесплатный сервис.

Веб-мастер,
Студия веб-дизайна Micrositez
http://www.micrositez-seo.co.uk/

Отличный ресурс для вебмастеров! Честно говоря, другого сервиса для сравнения нет.

Точное, быстрое и простое решение для производства Карты сайта во всех форматах, с первоклассным клиентом обслуживание и решение проблем на месте Форум. Настоятельно рекомендуется.

С уважением

Богатые

Отличный инструмент, идеально подходящий для добавления карты сайта в Инструменты Google для веб-мастеров.Это было просто в использовании и очень быстро, я буду продолжать пользоваться вашим отличным сервисом. Я пробовал много других, но лично считаю, что это лучший вариант, не только из-за хорошо продуманного сценария, но и из-за того, что сайт выглядит красиво.

Сэм Паркинсон,
Бесплатный хостинг

Спасибо за ваш вклад в Интернет! Я использовал ваш бесплатный генератор карт сайта xml. Я пробовал много других, но это мой личный фаворит. Он делает свою работу и делает это хорошо.

Это в моем окончательном списке покупок для бюджета сайта на следующие месяцы.

Али Нил
вебмастер

Какой замечательный ресурс вы нам дали. Помимо созданных карт сайта, проверка вашей ссылки на неработающие ссылки сэкономила мне много часов.

Спасибо вам

Джон В. Чепмен,
www.firstclassmoving.com

Не сомневайтесь, воспользуйтесь этой отличной службой генератора карт сайта.

Вы не пожалеете о потраченном времени или деньгах!

Уинстон Бэйн
аренда квартир новорк.com

Мне нравится ваш онлайн-генератор сайтов. Поиск своего веб-сайта положил конец долгим часам борьбы за понимание карт сайта. Его так легко использовать, а функция битых ссылок чрезвычайно полезна.

Еще раз спасибо.

Никки,
FunkyCoverz
http://www.funkycoverz.com.au/

Я использую Xml Sitemap в течение многих лет, единственный надежный генератор карты сайта, с простыми параметрами, который может использовать даже пользователь, не имеющий большого опыта.

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

Trip_Kashmir
www.kashmirtrip.info

Снова и снова я возвращаюсь, чтобы воспользоваться вашим отличным сервисом это, безусловно, самый простой генератор карты сайта, доступный в Интернете.

Марк Рашворт,
Креативный директор
Xrio Limited
http://www.xrio.com/

Так легко найти и использовать — мне все время интересно: «В чем прикол?».

Забудьте о попытках найти инструмент или расширение в Dreamweaver — XML ​​Sitemaps быстро, легко и абсолютно бесплатно.Я ТАК впечатлен.

Элизабет Джонсон
Арт-директор
www. compusoftaus.com.au

Большое спасибо за такой простой в использовании продукт. Я не могу поверить наконец-то нашел продукт, который выполняет все обещания. у меня есть рекомендовал это многим своим сотрудникам, которые управляют веб-сайтами. Это того стоит.

Холли Шульц
http://www.babygizmo.com/

Мне нравится ваш онлайн-генератор сайтов. Поиск своего веб-сайта положил конец долгим часам борьбы за понимание карт сайта.Его так легко использовать, а функция битых ссылок чрезвычайно полезна.

Еще раз спасибо.

Никки,
FunkyCoverz
http://www.funkycoverz.com.au/

Это потрясающий сервис! Он не только превосходит всех конкурентов, но и прост в использовании и бесплатен! Это обязательный атрибут для всех веб-мастеров.

Крис Льюис
Альпака Преимущество
http://www.alpacaadvantage.com/

Добавить HTML-код на веб-страницу

Важно: По состоянию на 31 марта 2018 г. функция общедоступного веб-сайта SharePoint Online больше не поддерживается.Ссылки, указывающие на прекращенные темы, были удалены.

Если вы использовали редактор веб-страниц для изменения общего макета и внешнего вида веб-страницы, но все еще не получили желаемого внешнего вида, ответом может быть добавление собственного HTML-кода. Добавление или редактирование HTML-кода, лежащего в основе веб-страницы, поможет вам дополнительно настроить ваш общедоступный сайт в соответствии с вашими вкусами и требованиями, чтобы вы могли создать интересный сайт, который вы имели в виду. Например, вы можете:

  • Измените дизайн страницы, добавив рамку вокруг блока текста.

  • Сделайте так, чтобы нижний колонтитул на каждой странице работал на вас, добавив особый стиль или размер шрифта.

  1. Перед добавлением в источник проверьте свой код, чтобы убедиться, что он действителен и полон.

  2. Войдите на свой общедоступный веб-сайт и перейдите на страницу, которую хотите отредактировать.

  3. Щелкните Page > Edit , а затем на вкладке Format Text щелкните Edit Source .

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

  5. Введите HTML-код.

    Важно: HTML-код не проверяется, когда вы добавляете его на свою веб-страницу.Ошибки в коде HTML могут привести к неправильному отображению веб-страницы.

  6. Нажмите ОК .

  7. После вставки HTML-кода убедитесь, что все отображается так, как вы ожидаете.

    • Если страница выглядит правильно, нажмите Page > Сохранить > Сохранить , а затем откройте страницу в новом окне браузера для подтверждения.

    • Если у вас возникли проблемы, которые вы не можете решить, не сохраняйте страницу. Вместо этого нажмите Page > Сохранить > Остановить редактирование > Отменить .

Изучать и редактировать HTML — Инструменты разработчика Firefox

Вы можете просматривать и редактировать HTML-код страницы на панели HTML.

Навигационные цепочки HTML

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

При наведении курсора на хлебную крошку этот элемент на странице выделяется.

Панель хлебных крошек имеет собственные сочетания клавиш.

Поиск

Поле поиска Инспектора страниц соответствует всей разметке в текущем документе и во всех фреймах.

Чтобы начать поиск по разметке, щелкните поле поиска, чтобы развернуть его, или нажмите Ctrl + F или Cmd + F на Mac.Существует три типа поиска, которые выполняются автоматически в зависимости от того, что вы вводите: полнотекстовый поиск, поиск с помощью селектора CSS и поиск XPath.

Полнотекстовый поиск

Полнотекстовый поиск будет выполняться всегда, независимо от того, что вы вводите. Это позволяет вам находить селекторы CSS и выражения XPath, встречающиеся в тексте.

Поиск селектора CSS

Вы можете искать элементы, вводя селектор CSS.

По мере ввода во всплывающем окне автозаполнения отображаются все атрибуты класса или идентификатора, соответствующие текущему поисковому запросу:

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

Чтобы просмотреть совпадения, нажмите Введите . Вы можете переключаться между совпадениями назад, используя Shift + Введите .

Поиск XPath

Также возможен поиск через XPath. Это позволяет вам искать определенные элементы без конфликта совпадающих слов в тексте. Например, // a соответствует всем элементам , но не букве «a» в текстовом содержимом. Кроме того, он позволяет выполнять более сложный поиск, например, находить элементы, начинающиеся с определенного текста.

HTML-дерево

Остальная часть панели показывает HTML-код страницы в виде дерева (этот интерфейс также называется представлением разметки). Слева от каждого узла есть стрелка: щелкните стрелку, чтобы развернуть узел. Если вы удерживаете клавишу Alt при нажатии на стрелку, он расширяет узел и все узлы под ним.

При наведении указателя мыши на узел в дереве этот элемент выделяется на странице.

Невидимые узлы отображаются блеклыми / ненасыщенными. Это может происходить по разным причинам, например, при использовании дисплея : нет или из-за того, что элемент не имеет размеров.

Между открывающим и закрывающим тегами элемента отображается многоточие, когда узел свернут, если он имеет большее содержимое. Теперь дети обозначены в дереве значком:

Маркеры («значки») отображаются справа от некоторых узлов. В таблице ниже поясняется значение каждого значка:

событие К элементу прикреплен один или несколько прослушивателей событий. Щелчок по маркеру открывает всплывающую подсказку со списком слушателей событий и позволяет каждому слушателю переключиться на строку кода JavaScript в отладчике, в которой определен слушатель.
прокрутка Элемент является контейнером прокрутки, то есть имеет либо overflow: scroll application, либо overflow: auto и достаточный контент, чтобы вызвать переполнение с возможностью прокрутки.

Если предпочтение devtools.overflow.debugging.enabled равно true , переключение значка scroll выделит любые элементы, вызывающие переполнение, и эти узлы будут дополнительно отображать значок overflow .

перелив Элемент вызывает прокручиваемое переполнение в контейнере прокрутки (текущий узел или родительский узел — затронутый узел отобразит значок scroll ).

Примечание : Значок переполнения введен в Firefox 83. В более ранних версиях его можно было включить с помощью предпочтения devtools.overflow.debugging.enabled true .

сетка Элемент представляет собой контейнер-сетку, т.е.е. он имеет отображение : к нему применена сетка . Щелчок по маркеру включает маркер сетки.
гибкий Элемент является гибким контейнером, то есть к нему применен display: flex . Щелчок по маркеру включает маркер flexbox.
встроенная сетка Элемент представляет собой контейнер встроенной сетки, то есть к нему применено display: inline-grid или display: inline grid .Щелчок по маркеру включает маркер сетки.
рядный гибкий Элемент представляет собой встроенный гибкий контейнер, то есть к нему применен display: inline-flex или display: inline flex . Щелчок по маркеру включает маркер flexbox.
на заказ… Элемент является настраиваемым элементом. Щелчок по маркеру переключает на строку кода JavaScript в отладчике, где был определен настраиваемый элемент.

:: до и :: после

Определение настраиваемого элемента

Когда вы открываете Инспектор на странице, которая включает настраиваемые элементы, вы можете просмотреть определение класса для настраиваемого элемента в отладчике:

  1. Осмотрите элемент
  2. Нажмите на слово custom

Источник класса элемента будет отображаться в отладчике.

Текстовые узлы, содержащие только пробелы

Веб-разработчики не пишут весь свой код в одной строке текста.Они используют пробелы, такие как пробелы, символы возврата или табуляции между своими HTML-элементами, потому что это делает разметку более читаемой.

Обычно кажется, что это пустое пространство не имеет никакого эффекта и не имеет визуального вывода, но на самом деле, когда браузер анализирует HTML, он автоматически генерирует анонимные текстовые узлы для элементов, не содержащихся в узле. Это включает пробелы (которые, в конце концов, являются типом текста).

Если эти автоматически сгенерированные текстовые узлы являются встроенными, браузеры присваивают им ненулевые ширину и высоту.Тогда вы обнаружите странные промежутки между элементами, даже если вы не установили для них поля или отступы.

Начиная с Firefox 52, инспектор отображает эти пробельные узлы, поэтому вы можете видеть, откуда берутся пробелы в вашей разметке. Узлы с пробелами обозначаются точкой: и при наведении курсора на них появляется пояснительная подсказка:

Чтобы увидеть это в действии, см. Демонстрацию по адресу https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html.

Теневые корни

Любые теневые корни, присутствующие в модели DOM, отображаются на странице HTML так же, как и в обычной модели DOM.Теневой корень обозначается узлом с именем # shadow-root — вы можете щелкнуть его стрелку раскрытия, чтобы увидеть полное содержимое теневой DOM, а затем манипулировать содержащимися узлами аналогично другой части DOM страницы ( хотя и с ограниченным набором функций — вы не можете, например, перетаскивать или удалять теневые узлы DOM).

Если теневой DOM содержит элемент с «слотами» (элемент с атрибутом слот после того, как он был вставлен в элемент — см. «Добавление гибкости со слотами» для объяснения того, как они используются) Элемент с «слотом» будет показан внутри соответствующего ему элемента , со ссылкой «раскрыть» рядом с ним. Щелчок по ссылке «показать» выделит элемент с атрибутом slot , поскольку он существует за пределами теневого DOM

.

Это очень полезно, когда у вас есть элемент и вы не можете найти источник его содержимого.

Примечание : Теневой осмотр DOM был реализован в Firefox 61, но был скрыт за dom.webcomponents.shadowdom.enabled pref до Firefox 63. Теперь он включен по умолчанию.

Вы можете выполнять определенные общие задачи на определенном узле, используя всплывающее контекстное меню.Чтобы активировать это меню, щелкните элемент контекстным щелчком. Меню содержит следующие элементы — щелкните ссылки, чтобы найти описание каждой команды в Справке по контекстному меню:

* Эти параметры появляются только в определенных контекстах, например, параметр «Открыть файл в редакторе стилей» появляется только при контекстном щелчке поверх ссылки на файл CSS.

Изменить как HTML Отредактируйте HTML-код элемента.
(Копия) Внутренний HTML Скопируйте внутренний HTML-код элемента.
(Копия) Внешний HTML

Скопируйте внешний HTML для элемента.

Нажатие Ctrl + C (или Cmd + C на Mac) также выполняет это действие.

(Копировать) Уникальный селектор / CSS-селектор Скопируйте селектор CSS, который однозначно выбирает элемент.
(Копировать) Путь CSS Скопируйте селектор CSS, представляющий полный путь к элементу.
(Копия) Данные изображения-URL Скопировать изображение как URL-адрес data: //, если выбранный элемент является изображением.
(Копия) Атрибут Скопируйте атрибут элемента.
Показать свойства DOM Откройте разделенную консоль и введите консольную команду « inspect ($ 0) », чтобы проверить текущий выбранный элемент.
Использование в консоли Назначает текущий выбранный узел переменной с именем temp0 (или temp1 , если temp0 уже занят, и так далее), затем открывает разделенную консоль, позволяя вам взаимодействовать с этим узлом с помощью командной строки консоли.
Развернуть все В представлении в виде дерева разверните текущий элемент и все элементы под ним. Это эквивалентно удерживанию клавиши Alt и щелчку треугольника раскрытия рядом с элементом.
Свернуть В представлении в виде дерева сверните текущий элемент. Это эквивалентно щелчку стрелки раскрытия рядом с развернутым элементом.
(Вставить) Внутренний HTML Вставьте содержимое буфера обмена в узел как его innerHTML.
(Вставить) Внешний HTML Вставьте содержимое буфера обмена в узел как его внешний HTML.
(Вставить) Перед Вставьте содержимое буфера обмена в документ непосредственно перед этим узлом.
(Вставить) после Вставьте содержимое буфера обмена в документ сразу после этого узла.
(Вставить) как первый ребенок Вставьте содержимое буфера обмена в документ как первого дочернего элемента этого узла.
(Вставить) как последний дочерний элемент Вставьте содержимое буфера обмена в документ как последний дочерний элемент этого узла.
Прокрутить до просмотра

Прокручивает веб-страницу, чтобы выбранный узел был виден.

В Firefox 44 нажатие сочетания клавиш S также прокручивает выбранный узел в поле зрения.

Узел снимка экрана Делает снимок экрана выбранного узла, сохраненного в вашем каталоге загрузок.См. Раздел Создание снимков экрана.
Создать новый узел Создайте новый пустой
как последний дочерний элемент текущего выбранного элемента. См. Вставка новых узлов.
Дублирующий узел Создайте копию этого элемента и вставьте копию сразу после этого элемента.
Удалить узел Удалить элемент из модели DOM.
Атрибут / Добавить атрибут Добавьте атрибут к элементу.
Атрибут / Изменить атрибут (только при вызове атрибута) Отредактируйте атрибут.
Атрибут / Удалить атрибут (только при вызове атрибута) Удалите атрибут.
Открыть ссылку в новой вкладке (только при вызове по ссылке, такой как атрибут href) Открывает связанный элемент в новой вкладке.
Открыть файл в отладчике (только при вызове по ссылке на источник JS) Открывает связанный источник в отладчике.
Открыть файл в редакторе стилей (только при вызове по ссылке на источник CSS) Открывает связанный источник в редакторе стилей.
Копировать адрес ссылки (только при вызове по URL) Скопируйте URL.
(Изменить псевдокласс) hover Установите псевдокласс CSS: hover.
(Изменить псевдокласс) активен Установите псевдокласс: active CSS.
(Изменить псевдокласс) фокус Задайте псевдокласс CSS: focus.
(Изменить псевдокласс) видимость в фокусе Установите псевдокласс CSS: focus-visible.
(Изменить псевдокласс) фокус — в пределах Установите псевдокласс CSS: focus-within.
(Изменить псевдокласс) посетили Установите псевдокласс CSS: visit.

Вы можете редактировать HTML — теги, атрибуты и содержимое — прямо на панели HTML: дважды щелкните текст, который хотите отредактировать, измените его и нажмите Enter, чтобы сразу увидеть изменения.

Чтобы отредактировать outerHTML элемента, активируйте всплывающее меню элемента и выберите «Редактировать как HTML». Вы увидите текстовое поле на панели HTML:

Вы можете добавить сюда любой HTML: изменить тег элемента, изменить существующие элементы или добавить новые. Как только вы щелкнете мышью за пределами поля, изменения будут применены к странице.

Когда вы редактируете HTML, контекстное меню, которое вы видите, является обычным для работы с редактируемым текстом:

Копировать и вставить

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

Перетаскивание

Вы можете реорганизовать содержимое HTML страницы, перемещая узлы в дереве HTML. Просто нажмите и удерживайте любой элемент и перетащите его вверх или вниз по дереву. Когда вы отпустите кнопку мыши, элемент будет вставлен в соответствующую позицию:

Вы можете отменить перетаскивание, нажав клавишу Esc .

Вставка новых узлов

В верхней части представления разметки есть значок «+»:

Щелкните этот значок, чтобы вставить в документ пустой

как последний дочерний элемент текущего выбранного элемента.Затем вы можете редактировать содержимое и стиль нового узла так же, как и любой другой узел в документе.

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

Обратите внимание, что эта кнопка неактивна, если тип выбранного элемента таков, что добавление последнего дочернего элемента не будет иметь никакого эффекта (например, если это элемент или