Добрый день!
Меня зовут Николай и это канал HTML/CSS-курсы.
На предыдущих занятиях мы с вами разобрали возможности редактирования текста через CSS и познакомились поближе с инструментами разработчика в браузере.
Сегодня мы будем знакомиться с тегами и атрибутами, предназначенными для вставки на страницу ссылок и изображений.
Итак, вернёмся в наш HTML-документ. В теге <body> создадим абзац <p>, а внутри него создадим тег <a> с атрибутом href, который и будет обозначать путь ссылки:
<p>
<a href="...">...</a>
</p>
В теле тега <a> указывается текст или изображение, которое будет являться самой ссылкой, а в значении атрибута href указывается путь ссылки (адрес страницы или файла к которому будет вести ссылка).
Если, к примеру, в нашей папке есть ещё одна страница с названием about_us.html, на которой располагается информация о нашем сайте, о нас или о компании, которую мы представляем, то эту ссылку можно оформить следующим образом:
<p>
<a href="about_us.html">О компании</a>
</p>
Создадим ещё одну небольшую страницу, чтобы увидеть, как работает эта ссылка. При нажатии на эту ссылку мы будем переходить на указанную страницу в этой же вкладке.
А на странице about_us.html создадим такую же ссылку, только на главную страницу index.html.
Так же можно прописывать пути ссылок на внешние источники, к примеру, на официальные страницы в социальных сетях ВК, Одноклассниках, Instagram и т. д. Только в таких случаях в атрибут href нужно будет вставить URL-адрес нужной страницы.
Чтобы при нажатии на ссылку она открывалась в новой вкладке (чтобы ваш сайт оставался открытым), достаточно дописать в этом же теге <a> атрибут target со значением "_blank".
Помимо обычной ссылки на какую-либо страницу, мы можем сделать ссылку для набора номера. Для этого в значении атрибута href необходимо указать номер телефона в международном формате без пробелов следующим образом:
<p>
<a href="tel:+71234567890">Заказы по телефону:+7 123 456 78 90<a/>
</p>
При нажатии на такую ссылку с телефона у нас сработает дозвон на указанный в атрибуте href номер телефона. Для сайта какого-нибудь интернет-магазина или просто для обратной связи это очень удобно.
Можно использовать ссылки и для отправки электронной почты. Создаётся эта ссылка через тот же атрибут href, но уже со значением "mailto:..." с указанием адреса электронной почты, на которую будет производиться отправка письма.
Итак, мы с вами разобрались с основными видами ссылок, и сейчас самое время перейти к вставке изображений на страницу.
Давайте создадим в нашей папке web1 ещё одну папку images, где мы будем хранить изображения для нашего сайта, и поместим туда какую-нибудь фотографию или иллюстрацию. Назовём её picture_1.
Теперь нам нужно добавить это изображение на нашу страницу.
Для этого создадим новый абзац <p>. Внутри этого тега создаём одинарный тег <img>, у которого будет несколько атрибутов. src="..." - атрибут, в котором указывается путь к используемому изображению. width="..." - ширина изображения. height="..." - высота изображения. alt="..." - текст, который будет отображаться, если изображение не прогрузилось.
В конечном счёте блок с фотографией у нас будет выглядеть следующим образом:
<p>
<img src="images/picture_1.jpg" width="200" height="300" alt="фото не загрузилось">
</p>
При этом, если вы указываете из размеров только один параметр, или высоту, или ширину, то второй параметр будет присваиваться согласно пропорциям изображения.
Итак, сегодня мы с вами разобрали, как на сайт можно поставить ссылки и изображения, разобрали протоколы ссылок, такие как tel: и mailto: и разобрали, как задавать параметры изображения внутри тега.
На сегодня на этом всё. Подписывайтесь на канал, чтобы не пропустить новые выпуски.