Как вставить картинку в шапку сайта html
Course Navigation
So far, we have created the navigation bar for the header of our website. The next thing to complete the header is to include the image and text above the image as shown in below screenshot:
Let’s again look at the part of the code for the header in our index.html file. The highlighted part of the code shows the image menu of the header:
To complete the image menu, we first need to add the image and text inside the div tag with id “header-image-menu” as shown in the above code.
Adding Image:
-
to download the given image.
- Add it to the images folder of your project.
- Include it inside the div with id = “header-image-menu”.
Adding Text: Add the text inside an <h2> tag and give the tag an which will be used for adding styles.
Below is the final HTML code for the header menu after adding the images and text:
Our webpage will now look like as in the below screenshot:
Can you point out what is wrong with the above image? The answer is that the text is below the image and not at its correct position as shown in the template.
We will have to use CSS to add styles to the text and image in order to place the text over the image. Let’s begin with adding CSS.
Добавление фонового изображения в верхнюю часть HTML-страницы
Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.
В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.
Примечание: Найти все мануалы этой серии можно по тегу html-practice.
В этом мануале мы покажем, как с помощью контейнера <div> структурировать верхнюю часть веб-страницы. Мы будем использовать атрибут style, чтобы задать высоту контейнера <div>, применить фоновое изображение и указать, что оно должно покрывать всю область контейнера.
Прежде чем мы начнем, нам нужно выбрать фоновое изображение.
Выбранную картинку сохраните в папке images как background-image.jpg.
Затем вставьте выделенный фрагмент кода в файл index.html между открывающим и закрывающим тегом </body>:
Не забудьте заменить Image_Location расположением вашей фоновой картинки и добавить закрывающий тег </div>. У нас получилось вот что:
Обратите внимание, мы добавили комментарий <!–First section–>, чтобы упорядочить наш HTML-код. Комментарий – это фрагмент кода, который игнорируется браузерами. Комментарии помогают разработчикам объяснить или упорядочить код. Они создаются с помощью открывающего тега <!– и закрывающего тега –>.
Мы задали высоту (height) в 480 пикселей и padding-top в 80 пикселей, благодаря чему между верхней частью элемента <div> и любым контентом внутри останется 80 пикселей пространства. Обратите внимание: вы не сможете увидеть padding-top в действии, пока мы не разместим контент внутри элемента <div>.
Сохраните файл и перезагрузите его в браузере.
В качестве фона вместо изображения можно использовать цвет. Чтобы задать цвет фона, замените только что добавленный фрагмент кода в <div> следующим кодом:
Сохраните файл и перезагрузите его в браузере, чтобы проверить результат. Фоновое изображение исчезнет, вместо него будет контейнер того же размера, но сплошного синего цвета. Остановимся на этом варианте.
Возможно, вы заметили, что контейнер <div> на вашей веб-странице окружен небольшим промежутком белого пространства. Такое небольшое поле устанавливается автоматически для всех HTML-страниц.
Чтобы удалить его, нужно добавить атрибут style к открывающему тегу <body>, который устанавливает поле элемента <body> в 0 пикселей. Найдите открывающий <body> в файле index.html и замените его строкой:
<body style = «margin: 0;»>
Сохраните и перезагрузите файл в браузере. Теперь вокруг верхнего контейнера <div> не должно быть белого поля.
Теперь вы умеете добавлять контейнер <div> с фоновым изображением в верхнюю часть веб-страницы.