Веб программирование

Изучение HTML и CSS. Урок 4. Ссылки и изображения.

 
 

Всем привет! В этом уроке мы научимся создавать ссылки и изображения в HTML, а также научимся их оформлять.
Итак для того чтобы создать простейшую ссылку, нужно добавить в код тег a с атрибутом href. Текст внутри тега a - заголовок вашей ссылки, а значение атрибута href - адрес ссылки. 
Вот небольшой пример:


Сайт для программистов

Также можно вместо адреса сайта ввести имя файла в той же папке, где наш HTML файл, а также сделать якорь.
Якорные ссылки позволяют быстро переходить к нужному обьекту на сайте. Для того, чтобы "зацепить" якорь на объекте, нужно добавить ему атрибут id с любым уникальным значением. А чтобы схватить якорь через ссылку, нужно в адрес ссылки ввести # и идентификатор. 
Вот пример:

Объект с якорем


Ссылка на якорь

Также можно указать способ открытия ссылки через атрибут target:  в текущем окне(_self) или в новом(_blank).


Сайт программистов
Сайт программистов(откроется в новом окне

По умолчанию ссылка синего цвета и подчёркнута, но внешний вид ссылки можно изменить с помощью CSS. Чтобы убрать подчёркивание, нужно добавить свойство text-decoration со значением none. Чтобы поменять цвет текста ссылки, нужно добавить свойство color с нужным цветом.


a{
text-decoration: none;
color: red;
}

Изображения:
Изображения на сайте улучшают дизайн, а также могут быть в качестве ссылки. Для изображений есть специальный тег img. Этот тег одиночный, так что ему не нужен закрывающий тег. Атрибут src отвечает за ссылку на картинку, а атрибут alt за описание картинки - оно нужно, если браузер не отображает картинки(вместо картинки будет этот текст), а также полезным для поисковиков. Атрибут title - это всплывающая подсказка.



Милый котёнок

Также картинку можно использовать как ссылку, поместив в тег a картинку img.



Всё! Спасибо за внимание! Ожидаем следующих уроков!


Есть вопросы? Спроси на нашем форуме!!
Нет комментариев

Оставлять комментарии можно только зарегистрированным




Предупреждение: Вся информация представлена исключительно в образовательных целях.
Ни авторы, ни администрация не несут ответственности в случае ее использования в противозаконных целях.