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

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

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

знакомство с языком 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

Задача #

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

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

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

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. Васильев, 2022, CC BY-SA 4.0, andrey@crafted.su