Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.
В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.
Примечание: Найти все мануалы этой серии можно по тегу html-practice.
В этом мануале мы создадим тело (или среднюю часть) нашего веб-сайта, используя HTML элементы <div> и свойства style.
Тело нашего сайта содержит большое изображение и короткий текст, расположенный с ним рядом. Чтобы собрать такой макет, можно использовать контейнеры <div>, с которыми вы ознакомились ранее в этой серии мануалов. Обратите внимание, если после ознакомления с HTML вы хотите продолжить изучать фронтенды (такие как CSS), в них вы можете встретить улучшенные методы размещения контента на веб-странице, основанные на методах, которые мы будем использовать в этом руководстве.
Добавление большого изображения профиля на страницу
Сначала мы добавим большое изображение профиля. Прежде чем приступить к работе, выберите большое изображение профиля. Мы будем отображать наше изображение с разрешением 1000х1500 (убедитесь, что размер вашего изображения соответствует этим параметрам). Выбрав картинку, сохраните ее в папке images.
Читайте также: Добавление изображения на веб-страницу с помощью HTML
Затем скопируйте следующий фрагмент кода и вставьте его в файл index.html после последнего закрывающего тега </div> и перед закрывающим тегом <body>:
...
<!--Second section-->
<img src="https://images.unsplash.com/photo-1517639493569-5666a7b2f494?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" style="height:300px; margin:50px; float: left;" alt="Big fluffy clouds high in the sky.">
...
Давайте рассмотрим каждую часть этого фрагмента кода:
<!--Second section-->– это комментарий, который не читается браузером; он помогает организовать html-файл удобным для чтения образом.- Тег <img> сообщает браузеру, что на веб-страницу вставляется изображение.
src="https://images.unsplash.com/photo-1517639493569-5666a7b2f494?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"сообщает браузеру, где найти это изображение. Мы используем изображение из интернета, потому указываем ссылку на него. Если бы мы использовали изображение large-profile.jpg из каталога images, мы бы указали путь так:src="images/large-profile.jpg"- Атрибут style позволяет определять свойства height, margin и float. Свойство margin задает размер пустого пространства вокруг элемента HTML. Свойство float выравнивает изображение с правой и левой стороны экрана, позволяя тексту обтекать его по краю.
- Атрибут alt добавляет к изображению альтернативный текст, чтобы сделать сайт доступнее для посетителей, использующих скринридеры. Не забудьте заменить наш текст в этом фрагменте кода описанием, которое соответствует вашему изображению.
Сохраните файл index.html и перезагрузите его в браузере. Тело вашей веб-страницы будет помещено под первым разделом сайта и будет выглядеть так:
Если у вас возникли ошибки, убедитесь, что вы добавили весь HTML-код в правильную область файла index.html и что вы указали правильный путь к изображению в атрибуте src.
Добавление текста в тело сайта
Давайте добавим абзац текста справа от изображения. Мы используем Lorem ipsum, а вы можете заменить наш фиктивный текст в этом примере любым другим текстом.
Чтобы создать этот раздел, используйте контейнер <div> и вставьте в него текстовое содержимое.
Добавьте в файл index.html следующий фрагмент кода после изображения, которое вы вставили на предыдущем этапе, и перед закрывающим тегом </body>:
...
<div style="height:300px; margin:50px;">
<h2>Hello </h2>
<p style="line-height: 1.0; font-size:15px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p style="line-height: 1.0; font-size:15px;">Email me at <a
href="mailto:8host@SampleSite.com">8host@SampleSite.com </a></p>
</div>
Давайте посмотрим на каждую часть этого кода:
- Элемент
<div style="height:300px; margin:50px;">создает контейнер <div> высотой 600 пикселей и с отступом в 100 пикселей. - Элемент <h1> добавляет заголовок к нашему тексту.
- Два тега
<p style="line-height: 1.0; font-size:15px;">создают два абзаца, высота строки которых установлена до 1.0, а шрифт – до 20 пикселей. <a href="mailto:8host@SampleSite.com">8host@SampleSite.com </a>добавляет ссылку на электронную почту.- Закрывающий тег </div> завершает контейнер <div>.
Сохраните файл index.html и перезагрузите его в браузере. После этого тело веб-страницы будет выглядеть так:
Hello
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Email me at 8host@SampleSite.com
Ваше изображение и текст теперь должны отображаться так, как показано выше. Вы можете откорректировать свойства стиля в коде: изменить высоту, поля, размер шрифта или другие свойства вашего контента.
Обратите внимание: если область просмотра браузера сильно уменьшится, текст в конечном итоге перетечет на другие элементы страницы. Чтобы макеты страниц могли подстраиваться под экран устройства, вам необходимо изучить CSS (серия руководств скоро появится) и Flexbox.
Теперь вы знаете, как расположить изображения и текст рядом друг с другом с помощью контейнеров <div>, атрибута style и свойств стиля. В следующем руководстве этой серии мы расскажем, как создать футер веб-сайта с помощью HTML-элемента <footer>.