Файл: Изучение основ программирования на языке HTML.pdf

В Atom легко настроить внешний вид интерфейса и добавить другие важные функции. Также можно создавать пакеты и темы с нуля. Или просто установить готовые пакеты и темы от сообщества.

Режим разработки. Возможность экспериментировать, добавляя функции в основную систему.
Интеграция с Git и GitHub.
Кроссплатформенное редактирование. Atom работает во всех операционных системах.

Доступен для: Windows, OS X и Linux (64-разрядная версия).

2. Notepad ++ – это редактор, разработанный для компьютеров под управлением Windows. Пользователи Linux также могут использовать его через Wine. Этот редактор распространяется как бесплатное программное обеспечение, и его хранилище также доступно в GitHub.

Notepad ++ отличается простотой и легкостью. Существует также мобильная версия. Особенностями редактора являются:

интерфейс Notepad ++ прост, легок и быстр (рис. 2.2) [11,12].

Рис. 2.2. Интерфейс HTML редактора Notepad ++

поддержка многоязычной среды кодирования, от ActionScript, CSS до Visual Basic;
100% совместимость с Windows, хотя другие ОС не поддерживаются без дополнительного программного обеспечения.

Разработчики выбирают Notepad ++ потому что:

он полностью бесплатный;
расширяемый – можно добавлять плагины из сообщества или создавать свои собственные;
настраиваемый – разработчики могут персонализировать функции и интерфейс по своему вкусу.

Интерфейс Notepad ++ минималистичен, но разработчики могут настроить его. Редактор доступен для: Windows и Linux (через Wine) [12-14].

3. Sublime Text – еще один отличный HTML-редактор. Это программное обеспечение, разработанное компанией из Сиднея, относится к категории freemium. Freemium означает, что можно использовать Sublime бесплатно, но нужно купить лицензию, чтобы пользоваться всеми функциями.

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

Ключевые особенности редактора [13,14]:

Sublime поддерживает Python API, который позволяет плагину расширять его исходную функциональность;
одновременное редактирование. Можно вносить изменения во многие выбранные области одновременно;
кросс-платформенность. Sublime доступно в Windows, OS X и Linux. Разработчикам нужна только одна лицензия для использования Sublime на любых принадлежащих им компьютерах.

Интерфейс редактора показан на рис. 2.3 [14].

Рис. 2.3. Интерфейс HTML редактора Sublime Text

Разработчики выбирают Sublime Text из-за [12,14]:

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

Интерфейс Sublime Text очень эстетичен. Редактор доступен для Windows, OS X и Linux (32/64 бит).

4. Adobe Dreamweaver CC

Adobe Dreamweaver CC, разработанный и управляемый технологическим гигантом Adobe Inc, является мощным и универсальным инструментом премиум-класса. Он обслуживает как back-end, так и front-end разработки. Dreamweaver, как программное обеспечение с закрытым исходным кодом, предназначено для работы в экосистеме Adobe. Adobe также предоставляет поддержку, плагины и функции, чтобы вы всегда могли без проблем писать код [14,15].

Dreamweaver – это один из редакторов, который поддерживают как текстовые, так и WYSIWYG методы. Таким образом, разработчик может выбирать способ написания кода. Интерфейс Adobe Dreamweaver CC приведен на рис. 2.4 [15].

Рис. 2.4. Интерфейс HTML редактора Adobe Dreamweaver CC

Основные особенности редактора [13,15]:

Dreamweaver позволяет писать код на любом основном языке программирования.
Поддерживает текстового и WYSIWYG режимов редактора.
Полностью интегрирован с программной экосистемой Adobe
Высокая производительность и поддержка от Adobe Inc.

Разработчики выбирают Adobe Dreamweaver CC потому что:

Код и предварительный просмотр. Таким образом, разработчики могут кодировать при предварительном просмотре конечного продукта [14].
Подтверждение кода и доступности страницы. Эта функция может помочь разработчикам следовать рекомендациям по доступности веб-контента (WCAG).
Доступ к облачным библиотекам. Премиум доступ к активам Adobe – цвета, слова, графики, слои, персонажи и другое.

Dreamweaver имеет отличный внешний вид, отличающийся эстетикой и дизайном. Редактор доступен для Windows и OS X.

Независимо от уровня разработчика – начинающий или опытный, HTML редактор может стать важным помощником. Опираясь только на функции, выбрать подходящий HTML-редактор, может быть сложно. В данной ситуации можно порекомендовать поэкспериментировать с различными редакторами и выбрать тот, который наилучшим образом соответствует стилю и рабочему процессу [14,15].

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

2.2. Создание абзацев и заголовков текста

Структурированный текст включает заголовки и абзацы, независимо от вида его источника – газета, учебник, журнал и т. д. Структурированное содержание страницы делает чтение более легким и приятным [15,16].

В HTML каждый абзац должен быть заключен в элемент <p>, например: <p> Это абзац. </ p>. Каждый заголовок должен быть заключен в элемент заголовка: <h1> Заголовок истории. </ h1>.

Существует шесть элементов для заголовков – <h1>, <h2>, <h3>, <h4>, <h5> и <h6>. Каждый элемент представляет различный уровень содержания в документе; <h1> представляет основной заголовок, <h2> представляет подзаголовки, <h3> представляет подзаголовки подзаголовков и так далее [16].

Например, в рассказе <h1> будет представлять заголовок истории, <h2> будет представлять заголовок каждой главы, а <h3> будет представлять подразделы каждой главы и так далее. Пример кода для реализации абзацев и заголовков уровней h1–h3 и результат его выполнения приведены на рис. 2.5 [15,16].

Рис. 2.5. Код для создания абзацев и заголовков уровней h1–h3 и

результат его выполнения

2.3. Создание списков

Кроме заголовков и абзацев важным элементом форматирования являются списки. Списки применяются на веб страницах повсеместно, и могут быть трех разных типов [13,16]:

1. Неупорядоченные списки. Используются при разметки списков, для которых порядок элементов не имеет значения. Рассмотрим список покупок в качестве примера. Каждый неупорядоченный список начинается с элемента <ul> – в него заключают все элементы списка. Последний шаг – заключить каждый элемент списка в элемент <li>, отделив, тем самым, их друг от друга. Пример кода для неупорядоченного списка и результат его создания показаны на рис. 2.6 [15,16].

Рис. 2.6. Код для создания неупорядоченного списка и

результат его выполнения

Упорядоченные списки – это списки, в которых порядок элементов имеет значение. Структура разметки такая же, как и для неупорядоченных списков, за исключением того, что нужно заключить все элементы списка в элемент <ol>, а не в <ul>. В качестве примера на рис. 2.7 рассмотрен порядок действий [14-16].

Рис. 2.7. Код для создания упорядоченного списка и

результат его выполнения

Вложенные списки также широко применяются на страницах. Рассмотрим пример вложенного списка для рецепта (рис. 2.8) [13-15].

Рис. 2.8. Код для создания вложенного списка и

результат его выполнения

2.4. Создание гиперссылок

Гиперссылки действительно важны – именно они превращают Интернет в сеть. Ссылки позволяют связывать документ с любым другим документом или необходимым ресурсом. Также можно ссылаться на определенные части документов, и делать приложения доступными по веб-адресу. Практически любой веб-контент может быть преобразован в ссылку, т.к. при нажатии на ссылку веб-браузер переходит на другой веб-адрес (URL) [14,16].

Базовая ссылка создается путем переноса текста или другого содержимого, который нужно превратить в ссылку внутри элемента <a>, и присвоения ему атрибута href (также известного как гипертекстовая ссылка или цель). href содержит веб-адрес, на который указывает ссылка. На рис. 2.9 рассмотрен пример создания простой ссылки [15,16]:

Рис. 2.9. Код для создания простой ссылки и

результат его выполнения

Другим атрибутом, который можно добавить к ссылкам, является заголовок. Он предназначен для того, чтобы сообщать дополнительную полезную информацию о ссылке, например, какую информацию содержит страница или что нужно знать (рис. 2.10) [16,17].

Рис. 2.10. Код для создания простой ссылки с заголовком

и результат его выполнения

Если необходимо превратить изображение в ссылку, то можно просто поместить его между тегами <a> и </a>.

При переходе по ссылкам на страницы сайта важно учитывать относительное местоположение страниц. Как правило, файл главной страницы называют index.html. Если необходимо включить гиперссылку в index.html, указывающую на страницу contacts.html, находящуюся в том же каталоге, что и файл index.html, то указывают только имя файла. Таким образом, ссылка с главной страницы на страницы contacts.html имеет вид [15,17]:

<p>Для детальной информации посетите страницу

<a href="contacts.html"> контакты </a></p>

Если необходимо включить в index.html гиперссылку, указывающую на страницу, расположенную в другой директории или на другом диске, то прописывают полный путь к ней:

<p>Посетите главную страницу моего<a href="projects/index.html"> проекта</a></p> [17].

2.5. Вставка изображений на страницу

Чтобы разместить простое изображение на веб-странице, используют элемент <img>. Это пустой элемент, для которого требуется минимум один атрибут – src. Атрибут src содержит путь к изображению, которое нужно встроить на страницу. Атрибут может быть относительным или абсолютным URL-адресом [15-17].

Например, если изображение называется dinosaur.jpg и оно находится в том же каталоге, что и HTML-страница, можно встроить изображение следующим образом: <img src="dinosaur.jpg">.

Если изображение находилось в подкаталоге images, который находился в том же каталоге, что и HTML-страница (Google рекомендует для целей SEO / индексации), его встраивают следующим образом: <img src="images/dinosaur.jpg">.

Также можно встроить изображение, используя его абсолютный URL, например: <img src="https://www.example.com/images/dinosaur.jpg">

Последнее бессмысленно, поскольку просто заставляет браузер выполнять больше работы, снова и снова искать IP-адрес DNS-сервера и т. д.

Приведенный выше код даст результат, показанный на рис. 2.11 [17].

Следующим атрибутом тега image является alt. Его значение представляет собой текстовое описание изображения для использования в ситуациях, когда изображение не может быть просмотрено/отображено или для его визуализации требуется много времени из-за медленного интернет-соединения [16,17].

<img src="images/dinosaur.jpg"

alt="The head and torso of a dinosaur skeleton;

it has a large head with long sharp teeth">

Самый простой способ проверить альтернативный текст – преднамеренно неправильно ввести имя файла. Например, если имя изображения написать dinosooooor.jpg, то браузер не отобразит изображение, а только альтернативный текст (рис. 2.12) [16,17].

Рис. 2.11. Встроенное изображение на странице

Рис. 2.12. Пример применения атрибута alt тега image

Наличие альтернативного текста может пригодиться по ряду причин [18]: