Связывание HTML-документов #
Целью данной практической работы является формирование навыка формирования ссылок между документами. В первую очередь будет рассмотрен навык формирования ссылок на документы внутри одного веб-сайта.
знакомство с языком HTML для описания гипертекстовых документов и знакомство с техникой формирования ссылок между документами. По окончании данной работы вы должны знать:
Теоретический материал #
Прочитайте следующий теоретический материал и выполните практические задания внутри данных документов:
- Заголовок: https://developer.mozilla.org/ru/docs/Learn/HTML/Introduction_to_HTML
- Основы редактирования текста в HTML: https://developer.mozilla.org/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
- Создание гиперссылок: 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
. - В данных подкаталогах располагаются файлы, описывающие ваши компетенции в соответствующих языках.
Требования к содержимому #
- На каждой из страниц должен располагаться общий навигационный блок, включающий ссылки к стартовой странице и к страницам-спискам о языках программирования и об естественных языках.
- Для формирования содержимого необходимо его логично разделять на части: использовать заголовки, текст помещать в теги параграфа, для списков использовать элементы ненумерованных списков.
Подход к реализации #
Вы можете использовать любой подход к достижению финального результата, не обязательно тот подход, который описан в данной части.
- Создайте файл
template.html
. В данном файле должна содержаться общая структура для сайта:- Навигационная панель, включающая ссылки к файлам
index.html
,natural-languages.html
,programming-languages.html
. Для формирования ссылок используйте относительные пути. Пока следует считать, что файлtemplate.html
находится в корне сайта. - Заголовок текущей страницы.
- Навигационная панель, включающая ссылки к файлам
- Скопируйте файл
template.html
в файлindex.html
. Заполните его нужным содержимым:- ФИО студента.
- Навыки студента.
- Скопируйте файл
template.html
в файлprogramming-languages.html
. Заполните его содержимым:- Сформируйте список языков программирования, с которыми знакомы.
- Сформируйте ссылки на файлы с описанием знания каждого из языков.
- Создайте каталог
programming
. - Для каждого языка программирования:
- Скопируйте файл
template.html
в файл с названием нужного языка в каталогprogramming
. - Исправьте относительные пути к файлам в корневом каталоге. Необходимо добавить префикс
../
ко всем таким ссылкам. - Добавьте информацию об уровне знания данного языка программирования.
- Скопируйте файл
- Скопируйте файл
template.html
в файлnatural-languages.html
. Заполните его содержимым:- Сформируйте список естественных языков, с которыми знакомы.
- Сформируйте ссылки на файлы с описанием знания каждого из языков.
- Создайте каталог
natural
. - Для каждого языка программирования:
- Скопируйте файл
template.html
в файл с названием языка в каталогnatural
. - Исправьте относительные пути к файлам в корневом каталоге. Необходимо добавить префикс
../
ко всем таким ссылкам. - Добавьте информацию об уровне владения данным языком.
- Скопируйте файл
- Удалите файл
template.html
. - Проверьте, что все ссылки между страницами в сайте функционируют корректно.