In this tutorial, we will delve into the concept of the HTML header image.
HTML Header
The header of a webpage is the uppermost part that typically includes elements like the website logo, menu, or introductory text.
The header section in HTML can be specified using the <header> tag.
Syntax:
<header>content…</header>
The <header> serves as the initial tag, while the <header> acts as the concluding tag. Any content is contained within these two tags.
Uses of Header
- It can be utilized to display the logo or banner of the website.
- It can be utilized to display the slogan related to the brand.
- It can be utilized to place the search bar.
- It can be utilized to place the navigation bar to put the links to various sections of the website.
- It can be utilized to introduce the main content of the web page.
- It can be utilized to display the contact information.
- It can be utilized to display information on upcoming events.
Header Image
A graphic positioned at the beginning of a webpage within the designated <header> segment is referred to as a header graphic.
To incorporate an image into the header section, we utilize the <img> tag.
<img> element
The inclusion of an image in the header can be achieved by employing the <img> component.
Syntax:
<img src="https://placehold.co/800x200/1abc9c/ffffff?text=Banner" alt="image-name">
The <img> tag is known as a self-closing tag in HTML. The attribute "src" is used to specify the URL of the image to be included, while the attribute "alt" is used to specify the name of the image.
To incorporate a background image into the header section, we can utilize the background-image property.
background-image property
You can incorporate a background image into the header by using the background-image attribute.
Syntax:
background-image: url("image.location")
The background image is a CSS property that requires a URL value specifying the image's location.
Illustrations of the HTML Header Image
We will understand how to work with the HTML header image by following the provided examples.
Illustration 1:
In this demonstration, we will include the image within the header section.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Image</title>
<style>
body {
background-color: bisque;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Header Image</h1>
<img src="https://placehold.co/800x200/1abc9c/ffffff?text=Banner" alt="Header Image" width="100%" height="300px">
</header>
<div>
<p>Main body content......</p>
</div>
</body>
</html>
Output:
The image located in the header section can be observed in the output displayed below.
Illustration 2:
In this example, we will demonstrate how to create a navigation bar within the header and enhance it by incorporating an image in the header area to embellish the navigation bar.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Constructing a navigation bar and adding the image in the header</title>
<style>
nav {
background-color: palegreen;
}
</style>
</head>
<body>
<header>
<img src="https://placehold.co/800x200/1abc9c/ffffff?text=Banner" alt="Header Design" width="100%" height="50px">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<img src="https://placehold.co/800x200/1abc9c/ffffff?text=Banner" alt="Header Design" width="100%" height="50px">
</header>
</body>
</html>
Output:
The following output showcases images positioned at the top and bottom of the navigation bar within the header section.
Illustration 3:
In this example, we will insert the contact details within the header and place the background picture in the header area.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adding contact information and background image in the header</title>
<style>
header {
background-image: url("backgrounddesign.png");
width: 100%;
height: 100px;
}
</style>
</head>
<body>
<header>
<div>
<p>
Contact us at: <a href="mailto: info@example.com">info@example.com</a>
</p>
</div>
</header>
</body>
</html>
Output:
The contact details are displayed within the header along with the background image.
Illustration 4:
The background image will be placed within the header element, which includes a form.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Putting background image in the header consisting of a form</title>
<style>
header {
background-image: url("headerbackground.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<header>
<h3>Student Registration Form</h3>
<form>
<label for="Full Name">Full Name:</label> <br> <br>
<input type="text" name="full-name" value="Full Name"> <br> <br>
<label for="address">Address:</label> <br> <br>
<input type="text" name="address" value="Type your address"> <br> <br>
<label for="dob">Date of Birth:</label> <br> <br>
<input type="date" name="dob" value="Date of Birth"> <br> <br>
<label for="course">Course Name:</label> <br> <br>
<input type="text" name="Course" value="Course"> <br> <br>
<button>Submit</button>
</form>
</div>
</header>
</body>
</html>
Output:
In this demonstration, we can clearly observe a form featuring a background image within the header section.
Illustration 5:
The crucial forthcoming event will be inserted into the <header> element within this diagram, while the picture will be placed in the header part.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adding header image in the header containing the upcoming event</title>
<style>
header {
display: flex;
margin-left: 10px;
}
div {
margin-left: 20px;
}
img {
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<img src="https://placehold.co/800x200/1abc9c/ffffff?text=Banner" alt="Breaking News" width="300px" height="100px">
<div>
<h2>Breaking news: upcoming event</h2>
<p>Stay updated with our upcoming event</p>
<small>published on January, 2024</small>
</div>
</header>
</body>
</html>
Output:
Below, we can observe key occurrences accompanied by a picture in the header section.
Illustration 6:
In this example, we will incorporate the slogan into the header section and include an image in the header as well.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Presenting a slogan and adding an image in the header section</title>
<style>
header {
display: flex;
}
img {
width: 350px;
height: 250px;
}
h2, p {
text-align: center;
color: green;
font-size: 24px;
font-weight: bold;
margin-left: 24px;
margin-top: 55px;
}
</style>
</head>
<body>
<header>
<img src="https://placehold.co/800x200/1abc9c/ffffff?text=Banner" alt="Education">
<div>
<h2>Tutorial Website</h2>
<p>Learn Easy, Empower Mind!</p>
</div>
</header>
</body>
</html>
Output:
In this result, we can observe a motto accompanied by a picture in the top section.
Illustration 7:
In this example, we will insert the logo into the header element using the <img> tag.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Putting a website logo in the header</title>
<style>
header {
display: flex;
}
img {
width: 120px;
height: 45px;
margin-left: 15px;
margin-top: 15px;
}
h1 {
color: red;
margin-top: 0;
margin-left: 45px;
margin-top: 15px;
}
</style>
</head>
<body>
<header>
<img src="https://placehold.co/800x200/34495e/ffffff?text=Logo" alt="JTP Logo">
<h1>WELCOME TO C# Tutorial</h1>
</header>
</body>
</html>
Output:
The output showcases a website logo located in the header section.
Illustration 8:
The image will be shown within the header element, which includes a search bar.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Adding an image in the header which consists of a search bar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
header {
background-color: peachpuff;
width: 100%;
height: 140px;
display: flex;
}
img {
width: 250px;
height: 100px;
margin-left: 15px;
margin-top: 15px;
}
input {
margin-left: 24px;
margin-top: 36px;
width: 250px;
height: 50px;
border: 2px solid peru;
}
button {
margin-left: 6px;
margin-top: 36px;
width: 50px;
height: 54px;
border: 2px solid peru;
background-color: pink;
}
</style>
</head>
<body>
<header>
<img src="https://placehold.co/800x200/3498db/ffffff?text=Banner" alt="Search">
<input type="text" placeholder="Search here!" name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</header>
</body>
</html>
Output:
In the following result below, you will observe a search bar accompanied by an image located in the header section.
Conclusion
In this tutorial, we have explored the concept of the HTML header image. By using the <img> tag, we can effectively incorporate an image within the header section. Additionally, the background-image property can be employed to include a background image specifically in the header of a webpage.