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

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

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

  • Уметь формировать HTML-документы.
    • Уметь формировать корректную структуру HTML-документов.
    • Уметь формировать HTML-теги.
    • Уметь формировать аттрибуты HTML-документов.
  • Уметь формировать корректные ссылки между HTML-документами.

Написание HTML-документов #

Прочитайте статьи, представленные ниже, для знакомства с языком 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
  3. Что внутри “head”? Метаданные в HTML https://developer.mozilla.org/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML

Задача № 1 #

Вам необходимо разработать 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.

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

Прочитайте следующий теоретический материал и выполните практические задания внутри данных документов:

  1. Заголовок: https://developer.mozilla.org/ru/docs/Learn/HTML/Introduction_to_HTML
  2. Основы редактирования текста в HTML: https://developer.mozilla.org/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
  3. Создание гиперссылок: https://developer.mozilla.org/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
  4. Отладка HTML: https://developer.mozilla.org/ru/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML
  5. Изучение HTML: https://developer.mozilla.org/ru/docs/Learn/HTML

Задача № 2 #

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

Логическая структура #

Сайт должен иметь следующую логическую структуру:

flowchart TB index("index.html\nСтартовая страница") prog-langs("programming-languages.html\nЯзыки програмирования") c-lang("programming/c-lang.html\nЯзык Си") java-lang("programming/java-lang.html\nЯзык Java") natu-langs("natural-languages.html\nЕстественные языки") rus-lang("natural/rus-lang.html\nРусский язык") eng-lang("natural/eng-lang.html\nАнглийский язык") index --- prog-langs index --- natu-langs prog-langs --- c-lang prog-langs --- java-lang natu-langs --- rus-lang natu-langs --- eng-lang

  • На стартовой странице находится описание студента: ФИО, важная информация о навыках.
  • На странице «Языки програмирования» находится список языков, с которыми знаком студент. После названия языка должна находится ссылка к соответствующей странице, описывающие детали знания о конкретном языке программирования.
  • На странице конкретного языка программирования должна находится следующая информация:
    • Название языка.
    • Уровень знания синтаксиса: базовое знакомство с синтаксисом, знание синтаксиса со справочником, полноценное знание.
    • Уровень приложений, реализованных на языке: учебные приложения, лабораторные работы, небольшие промышленные приложения, большие промышленные приложения.
    • Список приложений, реализованных на данном языке с кратким описанием в 2-3.
  • На странице «Естественные языки» находится список языков, с которыми знаком студент. После названия языка должна находится ссылка к соответствующей странице, описывающей уровень владения данным языком.
  • На странице описания естественного языка должна находиться следующая информация:
    • Название языка.
    • Уровень аудирования.
    • Уровень чтения.
    • Уровень диалога.
    • Уровень монолога.
    • Уровень письма.

Файловая система #

С точки зрения файловой системы HTML-файлы должны быть расположены следующим образом:

./
├── index.html
├── natural/
│   ├── eng-lang.html
│   └── rus-lang.html
├── natural-languages.html
├── programming/
│   ├── c-lang.html
│   └── java-lang.html
└── programming-languages.html
  • В корневом каталоге располагаются файлы index.html, natural-languages.html и pgramming-languages.html.
  • В корневом каталоге есть подкаталоги natural и programming.
  • В данных подкаталогах располагаются файлы, описывающие ваши компетенции в соответствующих языках.

Требования к содержимому #

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

Подход к реализации #

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

  1. Создайте файл template.html. В данном файле должна содержаться общая структура для сайта:
    • Навигационная панель, включающая ссылки к файлам index.html, natural-languages.html, programming-languages.html. Для формирования ссылок используйте относительные пути. Пока следует считать, что файл template.html находится в корне сайта.
    • Заголовок текущей страницы.
  2. Скопируйте файл template.html в файл index.html. Заполните его нужным содержимым:
    • ФИО студента.
    • Навыки студента.
  3. Скопируйте файл template.html в файл programming-languages.html. Заполните его содержимым:
    • Сформируйте список языков программирования, с которыми знакомы.
    • Сформируйте ссылки на файлы с описанием знания каждого из языков.
  4. Создайте каталог programming.
  5. Для каждого языка программирования:
    1. Скопируйте файл template.html в файл с названием нужного языка в каталог programming.
    2. Исправьте относительные пути к файлам в корневом каталоге. Необходимо добавить префикс ../ ко всем таким ссылкам.
    3. Добавьте информацию об уровне знания данного языка программирования.
  6. Скопируйте файл template.html в файл natural-languages.html. Заполните его содержимым:
    • Сформируйте список естественных языков, с которыми знакомы.
    • Сформируйте ссылки на файлы с описанием знания каждого из языков.
  7. Создайте каталог natural.
  8. Для каждого естественного языка:
    1. Скопируйте файл template.html в файл с названием языка в каталог natural.
    2. Исправьте относительные пути к файлам в корневом каталоге. Необходимо добавить префикс ../ ко всем таким ссылкам.
    3. Добавьте информацию об уровне владения данным языком.
  9. Удалите файл template.html.
  10. Проверьте, что все ссылки между страницами в сайте функционируют корректно.

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