HTML – язык программирования, который пользуется огромной популярностью при веб-разработке. Он активно применяется как новичками, так и уже более опытными специалистами. Далее будут изучены азы HTML для начинающих.
Информация, представленная в статье, пригодится преимущественно тем, кто ранее не был знаком с упомянутым языком разработки. С ее помощью программисты смогут познакомиться со структурой HTML-документа, его тегами и другими компонентами.
Определение
HTML или HyperText Markup Language – язык гипертекстовой разметки. Это средство программирования, которое используется для формирования веб-страниц. При помощи HTML создаются различные интернет-магазины, информационные порталы и им подобные.
Гипертекст – это текст, который связан с другим при помощи гиперссылок или ссылок. Открываются документы соответствующего типа непосредственно в браузерах.
Выучить упомянутый язык программирования – задача не из простых, потому что он поддерживает множество функций, возможностей и тегов. Имеет тесную связь с CSS. Далее будут представлены лишь азы (основы) разработки на HTML.
Структура и основные составляющие
Основной компонент гипертекста – это тег. Так называется текст, который заключается в угловые скобки <…>.
Теги могут быть:
- одиночными;
- парными.
Основная масса тегов являются парными. Они имеют открывающие и закрывающие компоненты. Для начинающих помнить соответствующие азы – это «база», без которой дальнейшая разработка станет невозможна.
Открывающие теги – это просто запись в угловых скобках: <html>, закрывающие помечаются символом слеша: </html>. Все, что написано между соответствующими элементами, будет рассматриваться системой как отдельная «команда».
Теги в HTML могут быть вложенными друг в друга, а также обладать атрибутами (свойствами). При вложенности необходимо соблюдать последовательность «закрытия» каждой команды.
Одиночный тег просто заключается в кавычки. Он не требует от разработчика закрытия. Соответствующие компоненты для начинающих – редкость, поэтому на них заострять внимание на первых порах нет необходимости.
Где писать код
Если пользователь решил изучать язык гипертекста, ему необходимо выучить, где правильно писать соответствующий код. Большинство ЯП предлагают собственные среды разработки. в случае с гипертекстом ситуация несколько меняется.
HTML элементы преобразуются в рабочий код при написании в любом текстовом редакторе. Им может послужить:
- Microsoft Word;
- Notepad++;
- служба «Блокнот» в Windows.
Это – наиболее распространенные варианты. Запоминать все существующие редакторы не обязательно. Новичкам достаточно воспользоваться «Блокнотом» или Notepad++. Второе приложение более функциональное. Оно имеет подсветку синтаксиса, благодаря чему исходный код станет читабельным.
Базовая структура
Изучение HTML рекомендуется начать с базовой структуры сформированного документа. Ниже – наглядный пример того, как выглядит HTML-документ:
«Базовая» веб-страница имеет в своем составе такие компоненты как:
- html – тег, который указывает на то, что используемый документ написан на языке гипертекста;
- head – «голова», в которой содержится техническая информация;
- title – заголовок файла, который будет отображаться во вкладке интернет-обозревателя при переходе по URL;
- body – «тело»: все, написанное здесь, является основным содержимым файла.
Выше – пример HTML-файла и результат его обработки.
Атрибуты
Рассматривая основы разработки на языке гипертекста, пользователи должны помнить – у тегов могут быть атрибуты. Это свойства, которыми обладает та или иная «команда». Каждый тег имеет свой собственный спектр атрибутов. Соответствующие компоненты бывают:
- локальными;
- глобальными.
Первый тип устанавливается каждому конкретному элементу страницы. Второй встречается у большинства тегов в HTML.
Наиболее распространенный вариант глобального параметра – style. Значение атрибута – задание стиля текста в теге <p>.
Отношения
Чтобы выучить основы разработки веб-страниц, необходимо помнить об отношениях между тегами. Они бывают нескольких типов:
- Предок. Сюда относится компонент, который содержит в себе другие.
- Потоком. Элемент, вложенный в другой.
- Родительский компонент. Тег, связанный с другими тегами более низкого уровня. Он обязательно находится выше уровнем.
- Дочерний элемент. Тег, вложенный в элемент более высокого уровня.
- Сестринский компонент. Тег в HTML, которым имеет с другими составляющими кодами одного и того же «родителя».
Предложенная информация – это азы, о которых должен знать каждый новичок, работающий с гипертекстовым языком.
Элемент Doctype
Doctype HTML – компонент, который задает тип документа. По умолчанию он является html. Соответствующий элемент должен быть написан в самом начале исходного кода.
С его помощью браузер понимает, какой именно исходный код обрабатывать. В зависимости от этого будет меняться результат отображения «картинки».
Кроме стандартного HTML могут встречаться другие «форматы» кода. Пример – XML. Его, как и ключевые слова языка, пока рассматривать нет необходимости. Достаточно запомнить, что doctype задает компоненты, которые будут использоваться в исходном коде. Существуют три типа синтаксиса:
- переходный
;
- фреймы
;
- строгий
.
В HTML5, который используется чаще всего, поддерживаются все основные элементы языка. Более старые его версии почти не встречаются. Поэтому достаточно в начале документа с кодом вставить запись <!Doctype html>.
Быстрее разобраться в азах разработки помогут компьютерные дистанционные курсы.
Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus!
