/
Как привлечь посетителей на сайт. Несколько простых советов Bootstrap или Grid - что лучше использовать для адаптивности сайта? Что такое доменное имя сайта и как выбрать доменное имя для сайта ? Анализ страниц поисковыми машинами Какую выбрать тематику сайта ?

Как привлечь посетителей на сайт. Несколько простых советов


Доступны многочисленные ресурсы, в которых подробно рассказывается, как привлечь трафик на свой веб-сайт. Однако одной лишь возможности привлечь трафик на сайт недостаточно. 25 дней назад
Как привлечь посетителей на сайт. Несколько простых советов
Как привлечь посетителей на сайт. Несколько простых советов
Bootstrap или Grid - что лучше использовать для адаптивности сайта?
Bootstrap или Grid - что лучше использовать для адаптивности сайта?
Что такое доменное имя сайта и как выбрать доменное имя для сайта ?
Что такое доменное имя сайта и как выбрать доменное имя для сайта ?
Анализ страниц поисковыми машинами
Анализ страниц поисковыми машинами
Какую выбрать тематику сайта ?
Какую выбрать тематику сайта ?

Урок 6. Изображения в HTML

Урок 6. Изображения в HTML

Тег <img/>

Чтобы вставить изображение в нашу HTML страницу необходимо использовать тег <img/>Тег <img/> содержит атрибуты и не имеет закрывающего тега.

Ссылка на изображение добавляется при помощи атрибута scr (source-источник).

<img src="image.png" />

Давайте немного потренируемся:

  1. Создайте папку на вашем компьютере и скопируйте внутрь свою HTML страницу, у меня это к примеру first.html.
  2. Загрузите в папку любое изображение и назовите его image.
  3. Вставим изображение с помощью тега <img/> в нашу HTML страницу.
<html>
 <head>
  <title>Название сайта</title>
 </head>
 <body>
  <h1 align="center">Заголовок первого уровня по центру</h1>
  <hr/> <!--Линия после заголовка -->
  <img src="image.png" />
 </body>
</html> 
 

Атрибут alt

Атрибут alt создает альтернативный текст для изображения. В случае, если изображение не может быть отображено, атрибут alt в качестве альтернативы должен указать текст со словесным описанием. Атрибут alt обязателен.

<html>
 <head>
  <title>Название сайта</title>
 </head>
 <body>
  <h1 align="center">Заголовок первого уровня по центру</h1>
  <hr/> <!--Линия после заголовка -->
  <!--Испортим ссылку на изображение с помощью / -->
  <img src="/image.png" alt="Альтернативный текст"/>
 </body>
</html> 
 

Размер изображения

Чтобы указать размер изображения используются атрибутыwidth(ширина) и heigth(высота).

Размер может быть указан в процентах(%) или же в пикселях(px).

По умолчанию размер моего изображения 800(ШИРИНА)х600(ВЫСОТА)px, уменьшим его.

<html>
 <head>
  <title>Название сайта</title>
 </head>
 <body>
  <h1 align="center">Заголовок первого уровня по центру</h1>
  <hr/> <!--Линия после заголовка -->
  <!--Не забудьте убрать / для корректного отображения изображения -->
  <img src="image.png" width="400px" heigth="300px" 
   alt="Альтернативный текст"/>
  <!--Или -->
  <img src="image.png" width="%" heigth="10%" alt="Альтернативный текст"/>
 </body>
</html> 

Не старайтесь загружать изображения больших размеров, так как это замедляет загрузку сайта и негативно сказывается на его продвижении.

Рамка вокруг изображения

По умолчанию вокруг изображения нет рамки. Рамку можно добавить с помощью атрибута border.

Размер рамки указываем в px(пикселях).

<html>
 <head>
  <title>Название сайта</title>
 </head>
 <body>
  <h1 align="center">Заголовок первого уровня по центру</h1>
  <hr/> <!--Линия после заголовка -->
  <img src="image.png" width="400px" heigth="300px" border="2px"
   alt="Альтернативный текст"/>
 </body>
</html> 
 

В уроке мы не станем затрагивать такие атрибуты как align, hspace(атрибут отвечающий за отступ от изображения по горизонтали), vspace (атрибут отвечающий за отступ от изображения по вертикали).

Некоторые из них устарели и используются вСss.

Урок 7. Ссылки в HTML

22:49
436
RSS
Нет комментариев. Ваш будет первым!
Загрузка...