Building the HTML body
As you can see in the following screenshot, we have an empty folder called advanced-wp-html, and we'll create a couple of files here. First, we'll create an index.html file, and then we'll create our style sheet, which will just be style.css.
Let's open both the files with Sublime editor. In the index.html file, add in our core html markup, as shown in the following code block:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
We'll update the code, as shown here:
<!DOCTYPE html>
<html>
<head>
<title>Advanced WP Theme</title>
</head>
<body>
<header>
<p class="container">
<h1>Advanced Wordpress Theme</h1>
</p>
</header>
</body>
</html>
Here, we have Advanced WP Theme as the title and added a link to our style sheet, and put an href attribute that's going to go to style.css. Then down in the body, we created our markup with the header. Since we're using HTML5 syntax, we used a <header> tag, and created a <p> with the container class. Inside the container class, we have a <h1> tag, which says Advanced Wordpress Theme; of course, when we actually create the WordPress theme, this will be dynamic and you'll be able to change it from within the admin area, but for now we'll just going to stick some static text in here.
Now, after the <h1> tag, we'll have another p class and we'll give this an h_right class for a header right. And this is where our search form is going to go, so for now we'll just put a <form> tag and an <input> tag as shown in the following code block. We'll give it a placeholder, and just say Search...:
<p class="h_right">
<form>
<input type="text" placeholder="Search...">
</form>
</p>
Now, let's go underneath </header> and create our navigation, as shown in the following code block:
<nav class="nav main-nav">
<p class="container">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#">Services</a></li>
</ul>
</p>
</nav>
As you can see, we have used a <nav> tag with nav class and added main-nav to it. Next we added <p> with class="container" just to move everything towards the center. Then, inside, we have placed <ul> with some <li> tags and some links. We have added Home, About, and Services. However, since we're not actually going to have a Services page, we will have an About page so that we have some perspective on using on an inner page. So, index page will be the blog post, About will be just a regular page.
Next, let's add the following code after the </nav> tag:
<p class="container content">
<p class="main block">
<article class="post">
<p class="meta">Posted at 11:00 on May 9 by admin</p>
</article>
</p>
Here, we have added a p element, with a container class, and a content class. Then, inside, we have added another p element, with a class="main block". Here, block is a class that we can use all around the site, we can use it for widgets as well; it's just going to have some padding and also a border.
Now inside this p, we have our main post; so each post has an <article> tag with a post class. We have added a paragraph that has a meta class. This is where things such as the date of the posts and the author name will go. This might change a little bit as far as the format goes when we actually build the WordPress theme; for now we're just going to say Posted at 11:00 on May 9 by admin. So it'll look something like that.
We also need a title. For that, put an <h2> tag and say Blog Post 1, as shown in the following code:
<article class="post">
<h2>Blog Post 1</h2>
<p class="meta">Posted at 11:00 on May 9 by admin</p>
</article>
Now let's just add some content real quick. We will go to the www.lipsum.com and click on Generate Lorem Ipsum.
We will copy and paste some content and then we will add some paragraph tags. The next thing we need after that is a Read More button. We'll add a link; we'll give it a class of button, as shown in the following code block:
<a class="button" href="#">Read More</a>
</article>
Then we'll copy the entire article post and paste it two more times. If we want to take a look at it, open the index.html file.
You can see in the preceding screenshot that it does not look pretty yet. So, now we'll add a footer. To do this, let's go to the last <p> tag and enter the following code:
<footer class="main-footer">
<p class="container">
<p class="f_left">
<p>&copy; 2017 - Advanced WP Theme</p>
</p>
<p class="f_right">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#">Services</a></li>
</ul>
</p>
</p>
</footer>
Here, we have added a <footer> tag with a "main-footer" class; we also have a container for it. In the container, we have a left side and a right side of the footer; so we have added <p class="f_left"> and f_right. So, on the left-hand side, we will have a paragraph that will have a copyright, and then on the right-hand side, we will have another menu. For that, we have then copied the <ul> from above and pasted it. This is enough for the markup for the HTML. Now let's reload the file:
We have a footer down here; It looks pretty horrible, that's because we have no styling. Next, we will see how to add CSS.