Добавление стилизованного изображения профиля на HTML-страницу

Development | Amber | Комментировать запись

Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.

В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.

Примечание: Найти все мануалы этой серии можно по тегу html-practice.

В этом мануале мы расскажем, как добавить и стилизовать картинку профиля на вашем HTML-сайте.

Прежде чем приступить к работе, вы должны подготовить изображение, которое будете использовать в качестве картинки профиля. Для обучения вам подойдет абсолютно любое изображение; если вы хотите создать аватарку самостоятельно, вы можете воспользоваться Getavataaars.com. Если хотите, используйте в этих целях наш логотип.

Читайте также: Добавление изображения на веб-страницу с помощью HTML

Выбранное изображение сохраните в папку image под названием small-profile.jpg.

Вставьте следующий элемент <img> между открывающим и закрывающим тегом <div>, который вы добавили в предыдущем мануале.

...
<div style="background-image: url('ImageLocation');background-size: cover; height:480px; padding-top:80px;">
<img src="ImageFilePath;" style="height:150px;">
</div>
...

Не забудьте заменить выделенный src адрес путем к файлу изображения вашего профиля. Обратите внимание, мы используем атрибут style, чтобы задать высоту изображения в 150 пикселей. Элемент <img> не требует закрывающего тега.

Сохраните и перезагрузите страницу в браузере, чтобы проверить результаты. Вы должны получить следующее:

Изображение вашего профиля должно иметь высоту 150 пикселей с учетом атрибута style. Оно также должно располагаться на 80 пикселей ниже верхней границы контейнера <div>, учитывая свойство top-padding, которое мы указали для контейнера <div> в предыдущем мануале.

Теперь давайте добавим к нашему атрибуту style свойства, которые придадут нашему изображению круглую форму и поместят его в желтую рамку. Также мы добавим альтернативный текст, чтобы сделать изображение было доступно для посетителей сайта, использующих скринридеры.

Добавьте выделенные свойства в элемент <img>:

<img src="ImageFilePath" style="height:150px; border-radius: 50%; border: 10px solid #FFFFFF;" alt="This is an 8host logo, which consists of black 8 character and the word host in front of a blue cloud.">

Убедитесь, что вы указали правильный путь к файлу изображения. Сохраните файл и перезагрузите его в браузере. Вы должны получить что-то вроде этого:

Прежде чем двигаться дальше, давайте ненадолго остановимся и изучим только что внесенные нами изменения кода. Установка в border-radius значения 50% придает изображению круглую форму. Устанавливая границы в 10px solid #FFFFFF, вы помещаете изображение профиля в сплошную рамку шириной 10 пикселей, которая имеет шестнадцатеричное значение цвета #FFFFFF.

Теперь вы умеете добавлять и стилизовать изображение профиля с помощью HTML. Пора добавить на нашу страницу заголовок и подзаголовок, о чем мы поговорим в следующем уроке.