Связывание 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. Проверьте, что все ссылки между страницами в сайте функционируют корректно.