Практическая работа 2 «Списки, изображения и гиперссылки в HTML»

Используемое программное обеспечение: любой браузер, блокнот.

Задание 1.1. «Ознакомьтесь с теорией»

Маркированный список

Для создания маркированного (неупорядоченного) списка используется тег <ul>. Каждый элемент в маркированном списке должен быть вложен в тег <li>.

Содержимое элемента заключается между открывающим <ul> и закрывающим </ul> тегами.

Изменить тип маркеров можно с помощью атрибута «type». Доступны следующие значения:

disc - закрашенный кружок;
circle - не закрашенный кружок;
square - закрашенный квадрат.

Пример использование тега <ul> и атрибута «type»:

    <ul type="square">
      <li> Элемент списка </li>
      <li> Элемент списка </li>
      <li> Элемент списка </li>
    </ul>

Как выглядит в браузере:

Практикум 7-9 класс. Создание Web-сайта. Информатика. ПР_2. Маркированный список

Нумерованный список

Нумерованный список содержит элементы в определенной последовательности. Список помещается в тег <ol>. Каждый элемент нумерованного списка начинается с открывающего тега <li> и заканчивается закрывающим тегом </li>. Пункты списка автоматически нумеруются.

Содержимое элемента заключается между открывающим <ol> и закрывающим </ol> тегами.

Для указания типа нумерованного списка применяется атрибут «type». Доступны следующие значения:

1 - арабские числа;
A - английские прописные буквы;
a - английские строчные буквы;
I - римские цифры.

Пример использование тега <ol> и атрибута «type»:

   <ol type="I">
      <li>Кока-кола</li>
      <li>Чай со льдом</li>
      <li>Фанта</li>
  </ol>

Как выглядит в браузере:

Практикум 7-9 класс. Создание Web-сайта. Информатика. ПР_2. Нумерованный список

Изображения

Тег <img> используется для включения изображений в HTML документ. Само изображение не вставляется напрямую в документ, браузер загружает его из источника, указанного в теге . Для указания источника используется атрибут «src». Тег <img> одиночный, закрывающий тег не требуется.

Доступные атрибуты и их значения:

align (выравнивание по отношению к тексту): left, right, top, bottom, middle;
src (ссылка на изображение) - обязательный атрибут (пример, src=«путь к картинке»);
alt (текст, который появится в случае, если изображение не загрузится) - обязательный атрибут;
border (рамка вокруг изображения) - принимает значение в пикселях;
width (ширина изображения) - принимает значение в пикселях;
height (высота изображения) - принимает значение в пикселях.

Пример использование тега <img>:

<p>Ординатор</p>   
<img src="ordinator.jpg" alt="Ординатор" align="left" width="100" />

Как выглядит в браузере:

Практикум 7-9 класс. Создание Web-сайта. Информатика. ПР_2. Ординатор

Гиперссылки

Тег <a> используется для вставки ссылок, которые в HTML называются гиперссылками. В качестве гиперссылки можно использовать как текст, так и изображение. В браузере гиперссылки отличаются своим видом и цветом. По умолчанию HTML ссылки отображаются как подчеркнутый текст синего цвета. При наведении курсора мыши на ссылку, она становится красной (активная ссылка). Ссылки, по которым уже кликали (посещенные ссылки), становятся фиолетовыми. Тег <a> парный, закрывающий тег </a> обязателен.

Для того, чтобы указать адрес ссылки нужно использовать обязательный атрибут «href» (пример, href=«адрес ссылки»).

Пример использование тега <a>:

<a href="https://yandex.ru"> Поиск Яндекс </a>

Как выглядит в браузере:

Поиск Яндекс

Создание интерактивного изображения. При нажатии на изображение, оно развернётся на весь экран.

<a href="ordinator.jpg"> <img src="ordinator.jpg" alt="Ординатор" align="left" width="100" /> </a>

Как выглядит в браузере:

Задание 1.2. «Создание шаблона веб-страницы»

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

Практикум 7-9 класс. Создание Web-сайта. Информатика. ПР_1. Запуск блокнота

Выберите в меню раздел «Формат» и убедитесь, что напротив пункта «Перенос по словам» стоит галочка.

Практикум 7-9 класс. Создание Web-сайта. Информатика. ПР_1. Перенос по словам

Наберите или скопируйте шаблон HTML документа.

<html>
<head>
  <title> Заголовок документа </title>
</head>
<body>
  Здесь находится тело документа. 
</body>
</html>

Сохраните документ с расширением .html, для этого:
- перейдите в раздел меню «Файл» ⇒ выберите пункт «Сохранить как...»;
- укажите путь в личную папку;
- впишите index.html в поле «Имя файла»;
- кодировка - UTF-8;
- нажмите кнопку «Сохранить»;
- закройте текстовый документ.

Практикум 7-9 класс. Создание Web-сайта. Информатика. ПР_1. Сохранение документа

Если всё выполнено верно, то в вашей папке появится веб-документ «index». Закройте текстовый документ.
Откройте документ «index». Посмотрите как отображается в браузере оформленный вами гипертекст.
Временно сверните браузер.
Теперь откройте веб-документ «index» для редактирования, выполнив следующее:
- нажмите правой кнопкой мыши (далее ПКМ) по веб-документу «index»;
- наведите на пункт «Открыть с помощью» ⇒ «Блокнот»;
- если приложения «Блокнот» нет в списке, тогда делаем следующее:
  - выбираем пункт «Открыть с помощью» ⇒ «Выбрать другое приложение»;
  - появится окно «Каким образом вы хотите открыть файл?». Листаем в самый низ и нажимаем по ссылке «Ещё приложения»;
  - выбираем приложение «Блокнот».
- нажимаем кнопку «ОК».

Задание 1.3. «Списки, изображения и гиперссылки»

Создайте маркированный (<ul>, <li>, </li>, </ul>) и нумерованный (<ol>, <li>, </li>, </ol>) списки.

Практикум 7-9 класс. Создание Web-сайта. Информатика. ПР_2. Некоторые языки программирования

Информатика. КП 7-9 класс. Веб-сайт. ПР_2. Виды операционных систем_

Вставьте гипертекстовую ссылку (<a href="https://www.ruby-lang.org/ru/">Ruby</a> ) на последний элемент маркированного списка.
Скачайте картинку «Ординатор» и перенесите её в папку с файлом index.

Поместите изображение на страницу с помощью тега <img>. В атрибуте scr укажите имя изображения и расширение (ordinator.jpg).
Сделайте изображение ссылкой, в качестве адреса укажите http://kandid-pk.com.ru.
Сохраните файл.

09.05.202329.09.2023

kandid