Полезное

HTML и его основные элементы

HTML и его основные элементы

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

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

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

Определение

HTML-документ – текстовый файл, который сохраняется на устройстве с расширением .html или /htm. Он считывается браузером и преобразовывается в сайт или онлайн-сервис. Состоит из так называемого набора тегов.

Теги – это элементы HTML. Они помогают представлять информацию на экране устройства и отображать страницу/сервис. Благодаря тегам браузер понимает, что он имеет дело не просто с текстом, а со структурированной информацией, которая разбивается разработчиком на блоки.

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

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

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

Парные теги – это теги, которые имеют открывающие и закрывающие «элементы». В противном случае такой компонент не будет считываться HTML. Одиночные элементы не требуют указания закрывающего тега.

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

Основной состав HTML-документа

HTML-тег – это ключевой элемент рассматриваемого языка гипертекста. Без него не получится написать ни одну страницу.

Теги бывают разными. Они отвечают за формирование структуры HTML-файла. В качестве ключевых компонентов для этого используются:

  1. <!Doctype html> – используется для указания типа документа. Это связано с тем, что браузер может интерпретировать разные HTML-версии различными способами. По умолчанию соответствующий элемент включается в самое начало исходного кода. Он является одиночным.
  2. <!…> – тег, используемый для добавления комментариев. Относится к одиночным элементам. Все, что написано внутри него, не интерпретируется браузером. Обычно такой элемент в исходном коде помогает сделать проект более читаемым и понятным для сторонних разработчиков.
  3. <html> </html> – Используется, чтобы сообщить браузеру, с каким HTML-документом планируется дальнейшая работа. Данный тег включает в себя все остальные теги проекта.
  4. <head> </head> – Рассматривается в качестве контейнера, в котором размещаются метаданные документа, не видимые пользователями, но считываемые роботами и поисковыми системами. В качестве примера можно привести теги HTML: title и style. Позволяет хранить в исходном файле другие элементы.
  5. <body> </body> – тело документа. В нем будут размещаться все элементы, которые видны пользователям. Все, что указывается внутри соответствующего контейнера, отображается в исходном проекте. Данный тег имеет несколько атрибутов, которые позволяют управлять цветами. О них будет рассказано позже.
  6. <title> </title> – заголовок веб-сервиса. Именно он грузится браузером в качестве названия. При сохранении ресурса в избранное, соответствующий заголовок будет использовать задействованную фразу в качестве описания закладки.
  7. <header> </header> – тег HTML, который определяет содержимое блока с вводной информацией сайта или группой ссылок.

Все это – основные компоненты HTML-документа. Данная структура позволяет размещать в своем онлайн-проекте другие элементы и теги. С ними предстоит познакомиться далее.

Элементы форматирования текста

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

В качестве HTML-тегов форматирования текста можно выделить следующие составляющие:

  1. <body bgcolor=?> – используется для задания цвета фона документа. Предусматривает работу с RGB-палитрой.
  2. <body text=?> – используется для указания цвета текста, который будет напечатан на странице.
  3. <body vlink=?> – используется для указания цвета гиперссылок, по которым пользователь уже переходил. Данный элемент позволяет понять, какие страницы уже были просмотрены клиентом ранее.
  4. <body link=?> – цвет обозначения гиперссылок. Подразумевается начальная гамма, используемая для демонстрации элемента на странице.
  5. <body alink=?> – используется для обозначения цвета гиперссылок при нажатии.
  6. <h1> </h1> – основной заголовок. На странице обычно такой элемент используется всего лишь один раз.
  7. <h2> </h2> – заголовок второго уровня. Рассматривается в качестве подзаголовка в тексте. Напоминает обозначение упомянутого элемента в MS Word или любом другом текстовом редакторе.
  8. <h3…h6> </h3…h6> – заголовки 3-6 уровней. Используются в качестве подразделов в заголовках. Такие элементы могут вовсе отсутствовать в исходном документе.
  9. <b> </b> – выделение жирным. То, что написано с этим тегом, будет отображаться жирным. Соответствующий элемент позволяет придать важности выделенному фрагменту текста.
  10. <strong> </strong> – полужирное выделение.
  11. <i> </i> – выделение текста курсивом. Важность в этом случае написанному тексту не придается.
  12. <del> </del> – элемент для зачеркивания текста. При использовании данного компонента перечеркнутая запись помечается удаленной.
  13. <s> </s> – отображение ранее перечеркнутого текста.
  14. <ins> </ins> – используется для перечеркивания текста. При его использовании визуально выделяются внесенные ранее корректировки.
  15. <u> – используется для подчеркивания буквы/слова/фразы. Курсив и другие способы выделения в этом случае не задействуется.
  16. <em> </em> – тег HTML, используемый для выделения акцентов. Данный элемент позволяет выделять текстовые фрагменты курсивом.
  17. <p> </p> – тег, используемый разработчиками для обозначения абзаца. Позволяет делить текст по смыслу на разнообразные блоки.
  18. <br> – перенос текста на другую строку. При применении соответствующего элемента система просто переносит данные. Новый абзац не начинается.
  19. <q> </q> – тег, используемый для оформления цитат. Позволяет вставлять в текст краткие цитаты.
  20. <dl> </dl> – тег, который используется системой для формирования терминов и их определений.
  21. <cite> </cite> – оформление цитат.
  22. <sup> </sup> – тег, который позволяет задать тип начертания символов. В соответствующем случае элементы текста будут написаны надстрочным типом.
  23. <sub> </sub> – подстрочное начертание символов на экране.
  24. <small> </small> – тег, дающий возможность отобразить тот или иной текстовый фрагмент с меньшим кеглем шрифта, чем у всего остального текста на экране.
  25. <tt> </tt> – тег, используемый на практике не слишком часто. Этот элемент позволяет имитировать текст, написанный на печатной машинке.
  26. <mark> </mark> – элемент верстки, используемый для выделения текста. Он дает возможность использовать «желтый маркер» в качестве выделения. Это своеобразный способ определения значимых компонентов в исходном тексте.
  27. <address> – не самый распространенный на практике тег, но он может пригодиться в отдельных ситуациях. Позволяет добавить на страницу контакты и подписи автора. При открытии в веб-браузере этот элемент будет выделен курсивом.
  28. <blockquote> </blockquote> – оформление отступов с обеих сторон. Используется для оформления цитат или врезок.
  29. <dt> – одиночный тег. Применяется для внедрения нового термина.
  30. <dd> – еще один одиночный тег. Применяется для добавления определения термина.
  31. <dfn> – выделение термина курсивом. Текст, который пишется после, должен в полной мере раскрыть используемое понятие.
  32. <abbr> – одиночный тег, используемый для ссылки на то, что написанный текст представляет собой акроним или аббревиатуру. Чтобы добавить появление, нужно использовать атрибут title.
  33. <a> </a> – гиперссылка в тексте. Предусматривает в своем составе обязательный атрибут – href. В нем прописывается «якорь» или ссылка. Внутри данного контейнера публикуется текст, при нажатии на который осуществляется переход на другую страницу.
  34. <code> </code> – выделение фрагмента текста с помощью шрифта monospace.
  35. <ol> </ol> – нумерованный список.
  36. <ul> </ul> – маркированный список.
  37. <li> – отметка каждого элемента списка.

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

Встраивание компонентов

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

  1. <img> </img> – позволяет разместить на странице то или иное изображение. Обычно используется вместе с атрибутом src. С помощью него задается путь к используемой картинке. При помощи атрибутов width и height предлагается определить ширину и высоту изображения. Параметры задаются в пикселях.
  2. <img src=«name» align=?> – выравнивание по одной из сторон документа. Для перемещения картинки в правый угол используется значение right, в левый – left.
  3. <img src=«name» border=?> – настройка толщины рамки вокруг картинки. Параметр задается в пикселях.
  4. <picture> </picture> – блок, который позволяет расположить img без source, позволяющий браузеру самостоятельно выбрать подходящее изображение.
  5. <audio> </audio> – вставка аудио на страницу.
  6. <video> </video> – размещение видеороликов. Работать можно с форматами WebM, MP4, Ogg.
  7. <source> </source> – используется для указания местоположения файла для видео, аудио или картинки.
  8. <track> – применяется для формирования субтитров. Встречается вместе с audio или video.
  9. <object> </object> – элемент, с помощью которого на сервис встраиваются мультимедийные документы. Чтобы передать тот или иной параметр, нужно задействовать param.
  10. <hr> – используется для размещения горизонтальной линии. Можно при помощи разных атрибутов задавать высоту (size), ширину (width), цвет (color) компонента. Также предлагается убрать тень за счет параметра noshade.
  11. <script> </script> – используется для выполнения сценария на клиентской стороне. Может включать в себя сам скрипт или ссылку на внешние источники.
  12. <noscript> </noscript> – ограничение фрагмента документа. Указывает, где задействованный ранее скрипт не будет работать.

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

Таблицы и формы

Для лучшего понимания работы с HTML-тегами, рекомендуется запомнить следующие компоненты:

  1. <form> </form> – создание форм. С помощью HTML получится описать только внешний вид. Для выполнения функций придется запускать скрипты на серверной части модели.
  2. <button> </button> – интерактивная кнопка. Внутри нее разрешено размещать не только текстовые данные, но и изображения.
  3. <input> </input> – поле добавления пользовательских данных.
  4. <output> </output> – результаты расчетов, проведенных по заданному скрипту.
  5. <label> – оформление пометки для поля, созданного через input.
  6. <textarea> </textarea> – создание больших полей для ввода текстовой информации.
  7. <table> </table> – размещение таблицы. Все остальные теги этого компонента размещаются внутри.
  8. <thead> <thead> – табличный заголовок.
  9. <tbody> </tbody> – тело таблицы.
  10. <td> </td> – формирование одной ячейки.
  11. <th> </th> – создание заголовка ячейки.
  12. <tr> </tr> – формирование одной строки.

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

Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus! 

Читать ещё