Итак, в прошлом выпуске мы создали первую HTML-страницу, которую мы будем дополнять по мере изучения нового материала. Сегодня поговорим о добавлении картинки на ваш сайт.
Есть два основных способа:
- Указать путь к картинке, которую вы скачали на свой компьютер.
- Указать URL картинки
Создадим папку img в папке, где находится наш html-документ: так будет очень просто в будущем указывать расположение картинки
Открываем кодовый редактор с html-документом, сделанным на прошлом занятии.
Ниже строчки Hello world печатаем img и нажимаем TAB на клавиатуре
<img src="" alt=""> должно получиться такое.
В кавычках после слова src вам нужно указать расположение файла, для первого случая этим станет: название вашей папки/название файла-картинки. Пример:
Для второго случая вам потребуется указать URL адрес картинки, найденной в интернете. Чтобы узнать URL сделайте двойной клик правой кнопки мыши. Должна открыться такая менюшка:
Нас интересует второй пункт снизу - "Копировать URL картинки". Делаем по нему клик - URL у нас!
Осталось только добавить скопированную ссылку в код. Для этого вставим ее в кавычки после слова src.
Теперь, чтобы насладится результатом, откроем HTML-документ, где вы всё это писали. Вот, что получилось у меня:
Наверняка вы заметили сокращение alt, стоящее после слова src- оно срабатывает если у пользователя не загрузилась картинка: такое достаточно часто срабатывает, если скорости интернета мала.
Чтобы не притеснять людей с плохим интернетом, и придумали эту функцию. Туда можно вписать всё что угодно - обычно пытаются передать смысл картинки словами. Пример использования:
В следующем выпуске я расскажу о редактирование текста в HTML, и мы немного затронем CSS. До завтра!