The next thing we want to do is to create the header. To create this, follow these steps:
- First, we'll use the HTML5 <header> tag as shown here:
<!DOCTYPE html>
<html>
<head>
<title>PhotoGenik</title>
<link rel="stylesheet"
href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
</body>
</html>
Some of this HTML layout might change once we are actually building the WordPress theme, just to adapt to the WordPress conventions.
- Next, we'll give this header a class. If we take a look at the documentation page (https://www.w3schools.com/w3css/default.asp) for the framework and go to W3.CSS Containers, it should have headers class as shown here:
- Now to make the header a class, copy the header class syntax from the containers documentation page (https://www.w3schools.com/w3css/w3css_containers.asp) and paste it in our HTML header as shown here:
<body>
<header class="w3-container w3-teal">
<h1>Heading</h1>
</header>
</body>
- Let's make sure that everything is actually working so far. For this, we'll open the index.html file with Chrome, and as shown in the following screenshot, we'll find our Heading:
So we have our heading. In the next subsection, we will use the grid system.