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

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

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

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

В этом мануале мы покажем, как поместить на вашей домашней странице заголовок и подзаголовок и стилизовать их. Для примера мы поместим условный заголовок «My First Site» и подзаголовок «I did it!», но вы можете легко заменить их необходимыми вам данными. Мы будем использовать здесь элементы <h1> (для заголовка), <p> (абзац) и <em> (для акцентирования).

Вставьте выделенные строки в ваш файл после элемента <img> и перед закрывающим тегом </div>:

...
<img src="https://www.8host.com/blog/wp-content/themes/wp-8host-new/img/logo.svg" style="height:150px; border-radius: 50%; border: 10px solid #FEDE00; padding-top:80px;">
<h1>My First Site</h1>

<p><em>I did it!</em></p>
</div>

Если хотите, укажите свой собственный заголовок и подзаголовок.

Сохраните файл и откройте его в браузере. Вы увидите:

My First Site

I did it!

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

Чтобы внести эти изменения, мы добавим к этим элементам атрибут style и установим его дополнительные свойства. Добавьте выделенные атрибуты в элементы <h1> и <p>, как показано в следующем фрагменте кода:

<h1 style="font-size:100px; color:white; margin:10px;">My First Site</h1>
<p style="font-size:30px; color: white;"><em>I did it!</em></p>

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

My First Site

I did it!

Эти свойства стиля регулируют размер шрифта (30 пикселей) и изменяют цвет шрифта на белый. Мы также добавили отступ в 10 пикселей к элементу <h1>.

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