Tag Archives: html

Tutorials Web

Getting to grips with Emmet – part two

Emmet is a useful bit of kit that allows you to quickly create HTML markup by using CSS-style abbreviations.  A couple of days ago I posted an introduction to the syntax of Emmet and asked you what the basic Emmet code would be for the following:-

<div>
  <h1></h1>
  <p></p>
  <h2></h2>
  <p></p>
</div>

Did you get it in the end? The answer I came up with is this:-

div>h1+p+h2+p

Try it now in codepen, jsbin or jsfiddle and after typing press the tab key and the HTML markup should appear as shown earlier.

In today’s post I want to cover a couple more handy hints on using Emmet to speed up your HTML coding.  The first thing I want to cover is producing code like this:-

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Fairly straightforward using what we know already, isn’t it?

ul>li+li+li+li+li+li

BUT, it’s still a bit of a pain to type in, and counting those li elements is a bugger, too.  What if we had twenty list items, or thirty, or even more?  Turns out Emmet lets you do things in a much simpler way.  You just tell it how many elements you want using the multiplication symbol (*):-

ul>li*6

How simple is that?  Amazing, I say.  Using this technique you can easily create as many elements as you like!  Brilliant..

So, to make something like this:-

<div>
  <p></p>
  <p></p>
  <p></p>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

You can now write this:-

div>p*3+ul>li*3

Not too complicated at all, is it?

One more hint for today before I sign off.  How do you think you would do this?

<div>
  <p></p>
  <p></p>
</div>
<div>
  <p></p>
  <p></p>
</div>
<div>
  <p></p>
  <p></p>
</div>

It’s quite a tricky one and (as far as I’m aware) isn’t possible with the basics I’ve taught you so far, because all we really know at the moment is to nest items or make them siblings of each other.  What we can see from the example is that we are looking at three adjacent divs, each with two paragraphs in it.  To pull of something like this we need to group things together, and we do that using parentheses (brackets to you and I).

Grouping items means you can apply the same kind of syntax, but have things together as one.  Consider this:-

<div>
  <p></p>
</div>
<div>
  <p></p>
</div>

Using parentheses, you could do this:-

(div>p)+(div>p)

Try it now.  Magic eh?  This has said that we want the div>p to be grouped together and then made into a sibling of div>p.  The brackets bring the elements together so that Emmet treats them as individual.  Now, given that we know how to specify how many times an element is created, we can combine what we know into this to get the result we need:-

(div>p)*3

Again, magic!  Parentheses can be used to group items together, and can even be nested to make much more complex structures than we could at the start of this article.  Try the example below for size (after you’ve tried to figure out what the outcome will be):-

(div>p)+(div>ul>li*5)+((div>h2>p)*2)*3

(Ok, it’s overcomplicated, but you get the idea).  In part three of this series of articles I’ll be looking at some more hints, including adding id and class attributes to your elements.  Come back soon!

Tutorials Web

Getting to grips with Emmet – part one

Quicker (and clever) ways of doing things always impress me.

HTML can be a bit of a pain to write out, especially if you’re building the skeleton for a webpage or website.  Emmet is a very handy tool that makes building the basic framework of HTML an easier, quicker task.  This is the first of a number of tutorials the basics of what it is and how to use it.  There’s actually quite a lot to Emmet and how it works, so I’m going to start with the basics.

emmetlogo

Emmet is ‘a web-developer’s toolkit that can greatly improve your HTML & CSS workflow’, to quote the developers website.  It exists as a plugin to text editors, and can also be found on some of the online web editors (such as jsfiddle, codepen and jsbin).  In the examples that follow I’m going to use codepen, but it’s up to you which you want to use.  You could use your own IDE, but installing, configuring and using can differ, so for now if you’re new I’d suggest following along in one of the web-based editors so that the series makes sense.  I’ll cover using it as a plugin at some point in the future.

So, how does it work?

Take the following HTML structure as a simple example:-

  <body>
    <div>
      <p></p>
    </div>
  </body>

Emmet lets you specify HTML structure in an quick, abbreviated and simplified way,  and automatically expands to the full HTML structure. It’s kind of like using code snippets if you’ve used them before, only very quick and very cool.

Using Emmet abbreviations, the code above would look like this:-

body>div>p

Let’s try it now.  Open up codepen and in the HTML section type the code directly above and press the tab key.  As if by magic your HTML structure will appear, indented and everything.  Isn’t it cool?

Now, try this:-

body>div>ul>li+li+li+li

Once again, press the tab key directly after.  You should now get this:-

<body>
    <div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
</body>

Great, isn’t it?  But what exactly is going on?  Let me explain.  If you know advanced CSS selectors, you might already have figured it out, but here goes.

The examples so far use two symbols, > and +.  The greater than symbol denotes nesting (and the parent/child relationship), so in this example:-

div>p

We are saying we want a paragraph element within a div.  This:-

div>ul>li

says we would like a div, which contains a unordered list, which in turn contains a list item.

Simple so far?  Now for the plus symbol, which asks that the elements surrounding it are adjacent to (or siblings of) each other, so:-

li+li+li+li

would give you

<li></li>
<li></li>
<li></li>
<li></li>

And the following:-

div>h1+p+div>ul>li

Would give you:

<div>
  <h1></h1>
  <p></p>
  <div>
    <ul>
      <li></li>
    </ul>
  </div>
</div>

Does that make sense?  This is the most basic of Emmet syntax, and that’s where I’m going to leave you for today.  Try it out in codepen and see what you can come up with.

Next time around I’ll go into more detail on more advanced markup you can create with this handy little tool.  Until then, as a challenge try and come up with the Emmet syntax for the structure below:

<div>
  <h1></h1>
  <p></p>
  <h2></h2>
  <p></p>
</div>
CSS

CSS: Creating a polaroid-style image using CSS

Polaroid is quite an iconic brand, and instantly recognisable for its retro look.  In this simple tutorial, I will explain how to create a polaroid-style effect for photographs on your pages.

First of all, let’s create a simple html page which contains a header and the image we want to use.  My starting html looks like this:-

<!DOCTYPE html>
<html>
   <head>
      <title>Polaroid effect in CSS</title>
      <link rel="stylesheet" href="pol-style.css" />
   </head>
<body>
      <h1>Polaroid-style border effect using CSS</h1>
      <div class="polaroid">
          <img src="polaroid-images/doggie.jpg" />
          <h2>This is my dog</h2>
      </div>
</body>
</html>

It’s a fairly simple html file, with a link to a stylesheet and an image in separate folders for the project.  I’ve created a div with class name of ‘polaroid’, which will be used to style the image to make it look like a polaroid.  As far as HTML goes, that’s it.  The rest of the work will be done with the CSS.

So far then, we have this:-

polaroid-initial

Nothing much to get excited about, really, apart from the dog (which isn’t mine, by the way – I got the image from here).

Right, then.  So, how do we make the image look like a polaroid?  Here’s the CSS I used:-

body {
    background-image: url(polaroid-images/dark-noise-1.png);
    font-family: arial;
}

h1{
    color: white;
}

h2 {
    color: black;
    text-align: center;
    margin: 10px;
    font-weight: normal;
}

.polaroid {
    background-color: white;
    display: inline-block;
    padding: 20px 20px 0 20px;
    box-shadow: 10px 10px 5px Black;
    transform:rotate(4deg);
    -ms-transform:rotate(4deg);
    -webkit-transform:rotate(4deg);
    -moz-transform:rotate(4deg);
}

And the page now looks like this:-

polaroid-finished

There’s a lot more we could do to this, but I wanted to keep things simple.
The finished product can also be viewed here.

Web

Linking to external files in web development

This one seems to trip people up quite a lot, especially when linking to js files or extrernal stylesheets, but it’s actually quite simple once you get your head around it.

Let’s say you have a page, ‘index.html’ that is linking to an external stylesheet (‘style.css’) which is contained in the same folder.

references-simple

Linking your file in this case is so simple you probably already do it:-

<link href="style.css" />

Because the css file is at the same level as the one requesting it, nothing more complicated is needed.  Simple so far?

Ok, now let’s say you have a separate directory in your folder structure where you want to keep your external files, such as ‘styles’, seen below:-

references-1

In this case you need to change the link so that it points to the correct file and in the correct folder.  Your link would look like this:-

<link href="styles/style.css" />

As you can see we’ve specified the folder name and the file, making sure that we use a forward slash (/) to separate the folder name from the file name.  With me so far?

Ok, now here’s a more complicated  scenario.  In this scenario, the page we are looking at ‘index.html’ is inside another folder, but the stylesheet we want to use is in a parent, or containing folder instead:-

references-1a

Neither of the solutions we’ve used so far will get us anywhere.  Instead, we have to tell the html to move up a folder and then link to the file.  We do that by using two dots, like this ‘..’

So, in this case, we would link to our stylesheet like this:-

<link href="../style.css" />

What this is telling the browser is that the stylesheet is a folder up from where we are.

Now, finally, let’s look at a more complicated example, where the stylesheet is in a completely different folder from the html.

references-2

So, how you you think we get to our stylesheet?  The best way of figuring this out is to work out how we would tell the html where the css is located, and translate that into the correct notation:-

So, we need to move up a folder (../), and then select the styles folder (styles/) followed by the stylesheet file we want to link to (style.css).

Putting this all together will look like this:-

<link href="../styles/style.css" />

And the link should work perfectly.

This method of using ‘relative’ references to files in html is not only useful for linking to css files, you can use it for any resource that is linked to in your html, from js files, to images and more.  You can even use the same relative referencing for links to other pages in your website.  If you can get it around your head how this stuff works, it will make your life much easier.

One thing worth mentioning should be commonsense to you.  If you move any of the files you are linking to, then the hard-coded relative references will break, so make sure you always update the location in your html as well when you start moving files around.  Some IDEs do this for you automatically, but don’t take this for granted.