МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ
федеральное государственное автономное образовательное учреждение высшего образования
«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ АЭРОКОСМИЧЕСКОГО ПРИБОРОСТРОЕНИЯ»
ИНСТИТУТ НЕПРЕРЫВНОГО И ДИСТАНЦИОННОГО ОБРАЗОВАНИЯ
КАФЕДРА 41
|
ОЦЕНКА
ПРЕПОДАВАТЕЛЬ
старший преподаватель |
|
|
|
Н. А. Соловьева |
должность, уч. степень, звание |
|
подпись, дата |
|
инициалы, фамилия |
ПРАКТИЧЕСКАЯ РАБОТА №1
|
ЯЗЫК HTML. ПРИЕМЫ ВЕРСТКИ
|
по дисциплине: Основы профилизации |
РАБОТУ ВЫПОЛНИЛ
СТУДЕНТ ГР. № |
Z9411 |
|
|
|
Р. С. Кафка |
|
номер группы |
|
подпись, дата |
|
инициалы, фамилия |
Студенческий билет № |
2019/3603 |
|
|
|
|
Санкт-Петербург 2022
Цель работы: знакомство с языком разметки HTML, работа с основными тегами.
Задание:
Разработать две страницы сайта по теме, определенной вариантом. Тема сохраняется на все лабораторные семестра. Каждый информационный элемент сайта должен соответствовать теме.
Сайт должен обязательно содержать следующие элементы:
Заголовок в верхней части каждой страницы
Гиперссылки с одной страницы на другую
Таблицу со структурой по варианту
Список со структурой по варианту
Набор картинок
Текст
«подвал» внизу страницы
Элементы на странице следует располагать сверху вниз. Оформление не использовать.
Вариант №8.
Вид таблицы: Объединение строк.
Вид списка: 2 уровня, нумерованный.
Тема: Современная элементная база вычислительной техники
Ход работы:
Для выполнения практических работ была выбрана интегрированная среда разработки Visual Studio Code.
Visual Studio Code (VS Code) — редактор исходного кода, разработанный Microsoft для Windows, Linux и macOS. Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки веб- и облачных приложений. Включает в себя отладчик, инструменты для работы с Git, подсветку синтаксиса, IntelliSense и средства для рефакторинга. Имеет широкие возможности для кастомизации: пользовательские темы, сочетания клавиш и файлы конфигурации. Распространяется бесплатно, разрабатывается как программное обеспечение с открытым исходным кодом, но готовые сборки распространяются под проприетарной лицензией.
Внешний вид пустой вкладки для написания и редактирования кода представлена на рисунке1.
|
Рисунок 1 – Начало работы в редакторе Visual Studio Code |
Самой первой строкой объявляем тип создаваемого документа, чтобы браузер смог его прочитать. Для этого используется команда <!DOCTYPE HTML>.
Стандартная структура любого html-документа имеет следующий вид:
<!DOCTYPE HTML>
<html>
<head>
…
</head>
<body>
…
</body>
</html>
Элемент-контейнер <head> применяется для описания метаданных HTML-документа, таких как <title>, <meta>, <script>, <link>, <style>.
Чтобы у сайта было название, которое высвечивалось бы на вкладке браузера, а также в качестве заголовка на странице результатов поиска, прописывается тег <title>. Результат использования данной команды приведен на рисунке 2.
|
Рисунок 2 – Название сайта |
Вся основная информационная часть сайта содержится в разделе <body>.
Для добавления на страницу заголовка используется тег <h1>. Таким образом на сайте появляется строка, написанная крупным жирным шрифтом, которая сразу привлекает к себе внимание. Такой заголовок приведен на рисунке 3.
|
Рисунок 3 – Внешний вид основного заголовка |
В синтаксисе языка HTML существует 6 различных видов заголовков: среди них <h1> - самый крупный, <h6> - самый мелкий.
Весь текст на странице можно разделить на смысловые блоки с помощью тега <div>. Тогда при чтении программного кода просматривающему человеку будет легче ориентироваться и понимать, какая часть к чему относится.
Конкретный абзац текста окружается командой <p>. На рисунке 4 показан внешний вид параграфа, обособленного подобным образом.
|
Рисунок 4 – Параграф текста на странице сайта |
Сделать сайт более визуально интересным позволяют изображения. Тег <img> даёт возможность встраивать изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения. Если в редакторе кода прописать строку <img src="1.jpg">, то на сайте в конкретном месте появится выбранный элемент, как это показано на рисунке 5.
|
Рисунок 5 – Вставка изображения на сайт |
Для добавления на страницу маркированного списка используется команда <ul>. Каждый элемент выделяется с помощью тега <li>. На рисунке 6 приведен пример неупорядоченного списка.
|
Рисунок 6 – Создание неупорядоченного списка |
Для создания на сайте таблицы используется тег <table>. Каждая строка обособляется инструкцией <tr>. Шапка таблицы отмечается с помощью тега <th>, обычные же ячейки - <td>. В случае необходимости объединения нескольких столбцов внутри команд <th> или <td> указывается атрибут colspan. Внешний вид полностью оформленной таблицы приведен на рисунке 7.
|
Рисунок 7 – Добавление таблицы |
Внизу страницы расположилась ссылка для перехода на следующую страницу. Для добавления ссылок используется тег <a>, внутри которого прописывается атрибут href с самой ссылкой. Данный элемент необходимо привязать к какому-либо текстовому блоку или объекту. На рисунке 8 приведен пример ссылки, ведущей на следующую страницу сайта и привязанной к строке.
|
Рисунок 8 – Ссылка для перехода на следующую страницу сайта
|
