Создание HTML-документов

Создание HTML-документов #

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

  • Структуру HTML-документов.
  • Ключевые теги для формирования гипертекста: html, head, body, a, div, span, p, h1, h2, h3, title.

Теоретический материал #

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

  1. Создание проекта сайта, набора файлов https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files
  2. Начало работы с HTML https://developer.mozilla.org/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started

Также можете прослушать лекцию, посвящённую языку HTML.

Задача #

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

Список знаний и умений #

В создаваемом документе можно отразить знание следующих технологий. Данный список можно расширить.

  • Знание стека сетевых технологий TCP/IP.
    • Знание деталей работы протоколов TCP и UDP.
    • Знание структур пакетов протоколов.
    • Знание деталей маршрутизации IP-пакетов.
  • Знание протокола HTTP:
    • Структура HTTP-запроса.
    • Типы HTTP-запросов.
    • Структура HTTP-ответа.
    • Коды ответа сервера.
  • Знание языка разметки HTML-документов:
    • Знание структуры HTML-документов.
    • Знание ключевых элементов HTML-документов.
    • Различие между HTML-элементами и тегами.
    • Разные варианты формирования гипертекстовых ссылок между документами.
  • Знание языка программирования JavaScript.
  • Знание языка каскадных таблиц стилей CSS.
  • Знание языка программирования Java.
  • Умение написания серверных HTTP-приложений.

Подход к решению задачи #

Данный подход является только одним из возможных вариантов решения задачи.

  1. Создайте каталог для проекта. Каталог можно назвать 01-practice.
  2. В созданном каталоге создайте файл tech-knowledge.html.
  3. Откройте данный файл и добавьте ключевые элементы структуры документа:
    • Добавьте doctype-комментарий, чтобы обозначит версию HTML-документа.
    • Добавьте корневой тег html.
    • Внутри данного тега разместите теги head и body.
  4. Добавьте в тело документа, внутрь тега body тег h1, внутри которого разместите текст «Профессиональные навыки». Сохраните изменения в файле.
  5. Откройте файл tech-knowledge.html в вашем веб-браузере и убедитесь, что добавленный текст успешно отображается браузером.
  6. Добавьте блок описания студента.
    1. Создайте контейнер для хранения данных о студенте. Для этих целей используйте тег div.
    2. Добавьте заголовок h3, в котором поместите текст «Студент ФИО» или «Студентка ФИО», где вместо ФИО укажите свои данные.
    3. После заголовка разместите параграф, тег p, внутри которого разместите текст «Группа ГУППА», где вместо ГРУППА разместите название группы.
  7. Для каждого элемента из списка знаний и умений добавьте следующий блок:
    1. Создайте контейнер для хранения данных о навыке. Для этих целей используйте тег div.
    2. Внутри контейнера разместите заголовок h3, внутри которого поместите название навыка или умения, которое хотите описать.
    3. После заголовка разметите параграф, тег p, внутри которого опишите уровень ваших знаний.
    4. Сохраните документ и посмотрите на отображение информации в веб-браузере.
  8. Добавьте заглавие страницы в набор мета-информации о документе. Внутри заголовка, тег head, расположите тег title. Внутри тега разместите текст «Профессиональные навыки ФИО», где вместо ФИО укажите свои данные.
  9. Укажите язык, на котором написан данный документ. В рамках тега html установите значение атрибута lang равным ru.
  10. Укажите кодировку символов, в которой был написан документ. Для написания документов рекомендуется использовать кодировки семейства Unicode, так как они позволяют описать любой набор символов естественных языков. Для этого необходимо добавить тег, meta, содержащий атрибут charset со значением utf-8.

© A. M. Васильев, 2022, CC BY-SA 4.0, andrey@crafted.su