Списки, изображения и гиперссылки в HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Изображения

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

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

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

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

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

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

Гиперссылки

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

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

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

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

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

Поиск Яндекс

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

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

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

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

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

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

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