HTML5 pagination

Question

I've been making an extremely simple blog page to record my progress in learning HTML5 and CSS3. So far, I have 2 very basic posts. What I want to create is a limit of 10 posts per page, then it will create a new page with the most recent post on top, like some Tumblr blogs I've seen. At the bottom of the page it will have "older posts" and "newer posts" buttons which will cycle back or forwards 10 blog posts.Whenever I create a new post, it will push the 10th post onto the previous page. Eventually, I will also create a Blog Archive that will sort my posts by month. A user will be able to look at all the posts in a month on 1 page. I'm very new to HTML5 and CSS3 and am willing to learn javascript, php, or whatever else it will take to do this. Any help, even links will be appreciated. Here is what I have so far:

<head>
    <meta charset="utf-8">
    <title>SmithSite:Blog</title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
    <link href='http://fonts.googleapis.com/css?family=Share' rel='stylesheet' type='text/css'>
    <!–[if lte IE 9]>
    <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
    <![endif]–>
</head>
<body>
  <header>
    <h1>SmithSite</h1>
  </header>
  <nav>
    <div id="menu">
    <ul id="menu">
      <li><a href="index.html" title="Home">Home</a></li>
      <li><a href="about.html" title="About">About</a></li>
      <li><a href="blog.html" title="Blog" class="active">Blog</a></li>
    </ul>
    </div>
  </nav>
    <article>
      <header><h2>Adventures in HTML5 (Mon Mar  5 23:02:05 EST 2012)</h2></header>
      <p>So far, I've learned a little bit about HTML5 and CSS3. I've been using emacs as my editor. It has some very strance, but efficient keyboard shortcuts. It takes a little while to get used to, but I'm sure I'll get the hang of it. So far, I've created 3 buttons as you'll notice above. Next time, I'll try working on how to get this blog to span over multiple pages, or try to work out how to archive it.</p>
    </article>
    <article>
      <header><h2>My First Entry (02.24.12)</h2></header>
    <p>This is the contents of the article element. I can't tell if this will extend past the end of the page or not, but I'll just keep on typing until I see the result. I guess this is my first blog entry. I'm messing around with a little HTML and some CSS. I hope I can make a kickass webpage soon. Hey look, it automatically sets borders based on the style tag above! HTML5 is so smart!</p>
    </article>
</body>

have you considered a database backend? – Randy Mar 08 '12 at 03:44 — Randy, Mar 08 '12 at 03:44

score 0 · Answer 1 · answered Mar 08 '12 at 03:56

Pure HTML can do what you want, but you're going to be doing a lot of tedious moving posts around, or generating the html with a script of some sort.

A blog engine is what you're looking for here. There are some out there that generate a bunch of static pages from a list of posts, or there are those that need a database backend.

With the former, you have to worry much less about security, since all you're serving up is static pages. The only thing you need to worry about is your basic webserver's security.

With a dynamic, solution, you get all the benefits of real-time comments and posting, search, and other things like that, but the trade-off is potential security risks and a lot more load on the server for the blog software and database.

The most common software package for blogging is probably Wordpress, which is database-backed, dynamic, and written in php. Many of the themes for it are probably html5 or have at least some forward-looking elements. I would say start there and see where that leads.

I wanted to try doing it without a blog engine. I knew it would be fairly easy with something like Tumblr, or Wordpress engine, but I wanted to see if I could do it on my own. I should have specified that in the question. I'll look into the Javascript that @Duncan Bayne recommended. Any other recommendations? — honestemu3, Mar 19 '12 at 04:13

HTML5 pagination

1 Answers1