My first HTML5 page

My plan is to put together a page that looks a little like the iPhone home screen, with a grid/table/gallery of icons and icon names. This is the first time I’ve written anything in HTML since the ’90s, so this may not be of interest to anyone but me.

  • This post nicely explains three different ways to do it, although it is a few years old and I suspect that now with HTML5 only the “div” approach is recommended.
  • This O’Reilly online book, “Building iPhone Apps with HTML, CSS, and JavaScript”, is a great starting point for how to make it look good.
  • This css-tricks post explains how to make an iPhone “springboard” webpage nicely.
  • This css-tricks post explains how to set gradients for the background instead of using an image, which could take longer to load.
  • I have also found some helpful code in Pro jQuery Mobile, a book by Brad Broulik, using class=”ui-grid-a” and “ui-block-a”. I thought this requires you to keep track of which column you’re up to (so the first column is ui-block-a, the second ui-block-b, etc), but in fact you can just always use the last column’s block (e.g. for a 4-column grid, use ui-block-d).  However, you must decide beforehand how many columns to use. I’d prefer not to have to do this: if the user is on a phone, 3 columns may be all that can fit, but on a desktop, you may want 8 columns.

Here is what I have come up with – it’s actually quite straightforward (once you know how).  This nicely has two columns when viewed on my phone, and more columns on my desktop.  The magic is css’s “float:left” command. In the html file:

<div class="gallery">
  <a href="#">
    <div class="icon">
      <img height=72 width=72 src="images/icon.png">
      <div class="caption" style="width:108px">My icon</div>
    </div>
  </a>
<!--more icons here -->
<p>  <!--finish with a p so the next thing is shown below - see the css -->
</div>

And in the css file:

.icon  {
  text-align: center;
  float: left;
  margin: 10px 10px;
}

.caption {
  vertical-align: top;
}

.gallery p {
  clear: both;
}

.gallery a, .gallery a:link, .gallery a:visited, .gallery a:hover, 
            .gallery a:active {
  text-decoration: none;
  font-style: normal;
  font-weight: normal; 
  text-shadow: none;
  color: black;
}

I had some trouble working out how to reset the “floating” behaviour once the grid (gallery) of icons is finished.  The css command “.gallery:after” should have done the trick, but doesn’t seem to work as expected.  So instead I came up with making <p> clear the behaviour through the css.  It means that you have to put a <p> at the end of the gallery though.

A caveat – I have only tested this on Safari and Chrome so far.

As an aside, I found it hard to include code snippets here – WordPress interpreted the html code even though it was between pre markers… I solved this by typing <pre>x</pre> using the HTML display, then typing the code itself into the visual display to replace the “x”.

Thoughts?

  

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>