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

2.1 Редакторы кода HTML.

HTML код можно писать в простом блокноте или текстовом файле. Важно только указать правильное расширение файла - .html. Традиционно, такой фаил называют Index.html (англ. Index «указатель» + .html— расширение, индексный файл, файл-индекс). [10]

Сейчас существуют специальные программы для разработки HTML кода или IDE. Интегрированная среда разработки (англ. Integrated Development Environment) — система программных средств, используемая программистами для разработки программного обеспечения.

За написанием и редактированием кода, программисты проводят обычно очень много времени. Конечно, код можно писать и в обычном блокноте, но это долго, сложно и в процессе разработки допускается множество ошибок, которые впоследствии тяжело найти. Современные редакторы помогают ускорить процесс разработки и повысить качество кода.[11] Существуют как платные редакторы, так и бесплатные. На сегодняшний день наиболее популярные из них:

• Sublime Text 3;
• Atom;
• VS Code;
• WebStorm

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

Большинство редакторов имеют ряд особенностей, которые облегчают работу разработчикам, рассмотрим каждую из них чуть подробнее:

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

- Автоматические отступы. При переносе строки программа автоматически выставит уровень вложенности. Файл в котором корректно выставлена вложенность, легко читается, также это дает программе возможности скрывать блоки кода. Например, чтобы лучше видеть границы участка и случайно не затронуть соседние, можно удобно сгруппировать блоки кода и оставить видимым только тот, который нужен.

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

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

- Система контроля версий (от англ. Version Control System) – программное обеспечение для облегчения работы с изменяющейся информацией. Система контроля версиями позволяет хранить несколько версий одного и того же документа, при необходимости возвращаться к более ранним версиям, определять, когда были сделаны те или иные изменения. Облегчает командную работу над проектом. [12]

Рассмотрим самые популярные современные редакторы кода.

- Atom. Atom был выпущен в 2014 году командой GitHub и на данный момент является одним из самых популярных редакторов и имеет быстро растущее сообщество. Эта популярность может быть обусловлена, по крайней мере частично, тем фактом, что Atom с открытым исходным кодом и полностью управляется сообществом. Atom также имеет огромную дополнительную библиотеку. Регулярно выпускаются обновления, однако пользователи жалуются, что при редактировании наблюдается медленная загрузка, особенно при работе с большими файлами. [11]

- Sublime Text 3. Спустя много лет он стал мощным и очень быстрым пользовательским редактором. Он также хорошо известен как чрезвычайно стабильный и может легко обрабатывать очень большие файлы. Интересно, что Sublime Text 3 не видел крупного релиза уже несколько лет. Несмотря на то, что он регулярно обновляется, обновления в основном содержат исправления ошибок наряду с незначительными улучшениями и новыми функциями. Sublime Text 3 по-прежнему находится в стадии бета-тестирования, не смотря на то, что он был выпущен как бета-версия еще в 2013 году. И в настоящее время новостей о новом крупном выпуске нет. Sublime Text 3 очень быстро запускается. Фактически, это происходит почти мгновенно. Он работает очень быстро, без задержек или сбоев, что обеспечивает плавное и эффективное редактирование кода. Как упоминалось выше, он обрабатывает файлы больших размеров очень хорошо. Существует огромное количество мощных надстроек (называемых пакетами), которые делают Sublime Text очень гибким и универсальным. Так же существует достаточно много руководств и видео уроков по Sublime Text 3.[11]

- Webstorm. Продукт JetBrains, является полноценно интегрированной средой для разработки. При минимальной настройке редакторы обладают большим количеством возможностей, на изучение которых нужно время. Базово имеет интеграцию с системами контроля версий, есть отладчик кода, анализирует содержимое проекта и в случае ошибок указывает на них. Продукт платный и доступен к использованию по подписке. Каждый из продуктов отвечает за определённую сферу. WebStorm, к примеру, больше подходит для фронтенд-разработки, а PHPStorm — для написания серверного кода на языке PHP.[11]

Резюмируя все вышесказанное, можно отметить, что у всех редакторов есть свои особенности, минусы и плюсы. Важно понимать, что при выборе редактора стоит учитывать задачу. Если для работы важна скорость редактора, то тут лучшим выбором будет Sublime Text. Он легкий и мало тратит ресурсов компьютера, то есть достаточно быстрый. Если приоритетно удобство или вы совсем новичок в разработке, то тут хорошо подойдёт Atom. Для опытных разработчиков отличным решением будет WebStorm. Так как он требует минимальных настроек для комфортной разработки и обладает большим функционалом.

Я для своей работы остановлюсь на Sublime Text 3, так как он достаточно прост в освоении, и отвечает параметрам, которые мне понадобятся в работе. Он бесплатный, есть много видео уроков, быстро загружается, не перегружен функционалом.

2.2 Структура HTML – документа.

Итак, HTML-документ — это обычный текстовый документ, который может быть создан как в обычном текстовом редакторе (Блокнот), так и в специализированном, (Notepad++, Sublime Text 3)

Если открыть любую веб-страницу, то она будет содержать в себе основные элементы, которые не меняются от вида и направленности сайта. HTML-документ состоит из дерева HTML-элементов и текста. Элементы, как правило, состоят из двух тегов: открывающего и закрывающего. Закрывающий тег образуется путем добавления слэша / перед именем тега: <имя тега> … </имя тега>. [6]

Каждый НТМL-элемент сообщает браузеру какую-либо информацию о тексте, помещенном между открывающим и закрывающим тегами. Эти элементы аналогичны контейнерам, внутри которых помещено содержимое - контент.

Ниже показан код простого документа, содержащего основные теги.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Пример веб-страницы</title>

</head>

<body>

<h1>Заголовок</h1>

<p>Первый абзац.</p>

<p>Второй абзац.</p>

</body>

</html>

А вот так этот код отобразится в браузере (Рис. 1).

Рис. 1. Пример простого документа

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу. Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы [13]

Теги в языке html могут вкладываться друг в друга, например, <p><i>Текст</i></p>. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки»), например, следующая запись будет неверной: <p><i>Текст</p> </i>. HTML-элементы так же могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение". Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы. Общее количество атрибутов достаточно велико, но их значения, как правило, можно сгруппировать по разным типам, например, задающих цвет, размер, адрес и др. Каждый тег HTML принадлежит к определенной группе тегов, например, табличные теги направлены на формирование таблиц и не могут применяться для других целей.[14]

Условно теги делятся на следующие типы:

• теги верхнего уровня;
• теги заголовка документа;
• блочные элементы;
• строчные элементы;
• списки;
• таблицы;

Как мы уже рассмотрели, теги <html><head><body> являются тегами верхнего уровня и формируют структуру документа. К тегам заголовка документа относятся элементы, которые располагаются в контейнере <head>. Это теги <title> и<meta>. Все эти теги напрямую не отображаются в окне браузера, за исключением тега <title>. Блочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.

Элемент <html>. Является корневым элементом документа. Элементы, находящиеся внутри тега <html>, образуют дерево документа, так называемую объектную модель документа, DOM (document object model). Все, что находится за пределами тегов, не воспринимается браузером как код HTML и никак им не обрабатывается. [14]

Если представить простой HTML документ в виде дерева, то схематично, оно будет выглядеть вот так. ( Рис. 2)

Рис. 2. Дерево HTML.

Элемент <head>. Раздел <head>...</head> содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.

Элемент <title>. Обязательным тегом раздела <head> является тег <title>. Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.[14]

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

<meta name="description" content="Описание содержимого страницы">

<meta name="keywords" content="Ключевые слова через запятую">

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

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

<style type="text/css">

.paper {

width: 200px;

height: 300px;

background-color: #ef4444;

color: #666666;

}

Чтобы подключить к элементу заданный стиль, необходимо через атрибут class присвоить элементу соответствующее название:

<div class="paper">

...

</div>

CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style, например:

<p style="color: #666666; background-color: #ef4444; padding: 20px;">

Элемент <body>. Элемент <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.

Тег <body> также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Тем не менее, большинство атрибутов до сих пор поддерживается разными браузерами.

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

Рассмотрим так же теги, которые часто используются в верстке.

<blockquote>

Предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с пустым пространством сверху и снизу.

<div>

Тег <div> относится к универсальным блочным контейнерам и применяется в тех случаях, где нужны блочные элементы без дополнительных свойств. Также с помощью тега <div> можно выравнивать текст внутри этого контейнера с помощью атрибута align.

<h1>,...,<h6>

Эта группа тегов определяет текстовые заголовки разного уровня, которые показывают относительную важность секции, расположенной после заголовка.

<hr>

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

<p>

Определяет параграф (абзац) текста.

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