#PHPFED – Variables

Before you continue – make sure you understand the story.

The next thing is that php lines always need to end with a semi-colon (;). This tells php that the line has finished and to run it. Without this you will experience ‘Unexpected’ errors.

So lets get started. In a line – Variables let you store data, or a value, in a word. Its that simple.

e.g.

$m = 'mikestreety';

Now I can freely use

$m

anywhere else on the page and it would mean ‘mikestreety’.

You use this variable, you need to echo, or print out, the result. The are two basic ways to achieve this. You can do it the classic way:

<?php
 echo $m;
?>

Or use the shorthand way:

<?=$m?>

The second method is shorthand for opening php tags and echoing out the result and is a lot cleaner if you’re using it inline, in html. But if you are already inside PHP tags, it makes sense to echo it.

Admittedly, this is a poor example of why you would use a variable, after all, why store a single word?

That is because variables are a lot more powerful than this, they can stores lists, they can help you connect to a database, loop through things, if statements – the list goes on. Variables are the very base of PHP and without them, PHP would be impossible.

So, lets look a practical example of a variable.

Say you have a link you regularly update on a homepage, but this link is in 4 different places. Rather than find and replace, or hunt around for them, you could declare them as a variable at the top, then use that throughout the document.

<?php
$link = "http://mikestreety.co.uk";
?>
<a href="<?=$link?>">my blog</a>

Variables can, on the simple level, store strings and numbers. A string is a piece of text and is put in either speech marks or inverted commas to mark the start and the end. (see the previous examples). With a string, you may find that it features an inverted comma, or a speech mark which is ending your string early, and then throwing an error. This can be avoided by whats known as escaping the character. The escape character immediately proceeds the troublesome character, to tell php to take it as a literal punctuation.

The escape character is simply the backslash. So say I have this as my code:

<?php
 $m = '<div class="element">don't go that way</div>';
?>

As you can see (thanks to the syntax highlighting plugin) it doesn’t fair well – as the single quote in the word don’t, is ending my string early.

The escaped version would look like this:

<?php
 $m = '<div class="element">don\'t go that way</div>';
?>

or if you use double quotes to encapsulate your sting:

<?php
 $m = "<div class=\"element\">don't go that way</div>";
?>

PHP can also do maths and store numerical values:

$figure = 6;
$figuretwo = $figure * 2;
echo $figuretwo //will echo 12

Numerical values do not need to be stored as a string – hence the reason there is no single or double quotes.

That’s it for the very basics of the variable. It may seem a little odd on its own, but i’ll be covering more things it can do. Once you’ve understood the variable and that it can store things, PHP is wide open

18. May 2012 by Mike
Categories: PHP, PHPFED, Websites | Tags: , , , , | 1 comment

I bloody love twitter

I bloody love twitter. It’s great.

Now, I’m not some twitter addict or nerd, well I am, but that’s by the by.

Some people just don’t get twitter and its those people that I don’t get. I’ve recently returned from future of web design conference and without twitter, it don’t think it would exist.

Twitter is one of those things that it’s hard to explain, and it’s hard to see the benefits when you are an an outsider, but when you come inside, to the warmth of followers and the glowing fire of your mates it’s amazing.

You can ask for help, and people will help, you can ask for advice, and people will advise, you can ask for attendance and people will attend – the list goes on and it’s bloody brilliant.

Still not convinced?

A case study:

I run an event called points. You may know of this event, you may not. But it’s a mini-conference. It was held last Tuesday, 8th may. I only promoted it on twitter and 25 people came. That’s 25 people whom I may or may not know, who found out about the event on twitter. It was raising money for a charity, Tia’s trees, set up by Remy sharp, who I met through twitter. How is that for a case study?

At the fowd conf, I met up with people who I know on twitter, and I met people who I now follow on twitter, because emailing them is too formal and the conversation is forced if you email. But with twitter, you can tell them what you’re up to, or show off you latest projects without looking like a dick.

Twitter also allows you to realise that people are just that, people. That amazing web guy, or celebrity you love? Follow them on twitter and you realise that they get cramp, or spots, or colds and it makes you love the more, because they’re human. Its also a portal to start a conversation with said mega-star and who knows, you might become friends.

So love twitter, and I would love to hear your twitter experiences. In fact, croydon creatives is perfect example of some good twitters.

16. May 2012 by Mike
Categories: General, The Internet | Tags: , , | 5 comments

#PHPFED – Includes

Before you continue – make sure you understand the story.

When developing static sites (i.e. sites without any sort of CMS – be it WordPress, Drupal etc.) the PHP I find the most valuable  is the include.

This allows you to simply include one file into another file. The file that you include can be anything, from txt to HTML. However, generally for constancy the most popular file type is PHP.

To do an include:

  • Make sure the file you are working on is saved as .php extension
  • Make sure the file you are going to include is saved
  • Use the following code:
<?php include 'file.php'; ?>

Its as simple as that! The include path needs to be relative. normal convention is to store the includes in a folder called ‘includes’ in the root.

At first you might wonder what this is useful for? The main use would be to include the header, or the footer, of a website. This enables you to change 1 file and it update on all your pages, without having to do a mass find and replace.

You can also use it to help divide up a page – for easmple if you had a one page website with 5 sections, you could put each of those sections in its own include to help the one page becoming a big mess.

A small example page set up can be found on github. Feel free to fork the blog post or code if you can thing of a better way to explain!

10. May 2012 by Mike
Categories: PHP, PHPFED, Websites | Tags: , , , , | 1 comment

Points Brighton – The Aftermath

Last night was the second of my mini-conferences, Points Brighton. It featured speakers and keynotes of all different varieties, and the infamous Points Bazaar (the raffle) was, once more, a hit. If you want to see how good it looked, the photos can be found on flickr.

As it was my event, I’m not really in a position to give an impartial view about it (despite it being a huge success and amazingly brilliant). So instead, i’ll leave it to others to review:

If you have a blog post of your own – let me know!

All that is left is the thanks yous and the credits – so bear with me.

Speakers

Firstly, the reason everyone was there. The speakers. The presentations were fantastic, diverse and informative. Perfect really!

  • Amber Weinberg  stepped up first talking about ‘Mobile Development‘ (she kindly stepped in for the afflicted Paul Mist )
  • Next was James Seymour-Lock  discussing ‘How To Achieve Your Clients Goals Through Effective Design‘ (Slides)
  • After, Krystian Szastok, stepped up to the plate to show off his knowledge on ‘The Principle Of Factor Sparsity And Seo‘ (Slides)
  • and finally finishing off the evening was David Pomfret  who told us all about ‘Making Type Right’ (Slides)

They all did brilliantly and based on the tweets, were all well recieved.

Sponsors

The amount of generous people out there is phenominal and there was no exception when it came to Points. We had books and t-shirts from No Starch Press, books from A Book Apart, t-shirts from Belong, several copies of Introducing HTML5 by Remy Sharp and Bruce Lawson, a book on mobile development from Tipsy & Tumbler and books and t-shirts from 5 Simple Steps.

We also had some beautiful postcards designed and printed by Hatched and T/OD. The alcohol and drinks were provided by Bozboz and the venue kindly donated by The Skiff.

Massive thanks to anyone who sponsored the event.

People Who Made It Happen

As with any event, there are always the unsung heroes. The people who really make the event happen and help ease the pressure.

  • Toby Howarth – who designed the beautiful site.
  • Adam Onishi – who made Toby’s dreams a reality
  • Clive Walker – who helped set up and lock up
  • The clickers – who wlciked for our wonderful presenters
  • The attendees. Without whom, I could not have raised over £300 for Tia’s Trees. Thank you.

Keep an eye out for the next one!

09. May 2012 by Mike
Categories: General, Points Brighton, The Internet | Tags: , , , , , , , , , , | 4 comments

PHP for Front-End Devs: The Story

Recently, a few friends of mine have been asking questions about PHP and want to learn the basics. I am a front-end developer for a web design agency. i.e. I mainly stick to HTML/CSS and have colleagues who do the heavy PHP stuff. However, I think its handy for a front end dev to know the basics of PHP, as it speeds up development time and mean, for me, that i don’t have to annoy the other guys every time i need a loop or something.

For that reason I am going to write a small series of Blog posts  - #PHPFED. If you have any suggestions or any questions, email or tweet me.

I am trying to combat the cliched tutorials that are out there and I’m going to try and provide code that is actually useful. I remember looking back for PHP tutorials and finding:

$a = 'Hello World';
echo $a; //Returns 'Hello World'

Its all well and good, but it makes you think ‘Why do I need that?’. The next step is normally database integration with some sort of complex code.

This series is aimed at beginners, who just want some really simple functions and instructions to make their lives happier, easier and simpler. I am by no means a PHP expert, but I know the basics enough to show someone else the basics.

With this series of tutorials, i assume you know basic HTML, CSS and have at least heard of PHP.

All code examples can be found on Github and if you ever notice errors in the code, please let me know (or fork it) and I will correct it. Thanks.


			

06. May 2012 by Mike
Categories: Websites | Tags: , , , , , | 4 comments

Github for PC and setting up a local testing environment

github-logo

The Quick Way

  • Install XAMPP
    • If on Winows Vista or 7, install it in your user folder
    • Install MySQL and Apache as a Service
    • If after installation Ports 80 and 443 are busy open Skype, Options -> Advanced -> Connection -> Uncheck the box
  • Download and install Git for Windows
  • Download and install Tortoise Git
  • Open up PuTTY Gen and generate a key
  • Go to Github -> Options -> SSH Key -> Add New and paste the long key from PuTTYGen into the box in Github. Name it something that represents your computer
  • Save the Private key somewhere as key.ppk
  • Navigate to folder where you want the repository, right click and select Git create repository here…
  • Right click again and go to TortoisGit -> options
  • Select Git on the right hand side, fill in your name and email
  • Select Remote from the lef thand side
  • Fill in a name, the git URL (found at the top of the repository on Github) and browse for the private key you saved, Save.
  • Right click in the folder, tortoisegit -> pull. Click ok
  • Edit Files.
  • Right click -> commit to master
  • Click push on the bottom left of the screen once completed. Click ok.

The Long Way

Unlike mac – there isn’t a simple ‘Github for Windows’ application (at time of writing). However, setting up Github to work on your pc is fairly simple. More complicated than the mac app, but you do get more of an understanding about what git is.

This tutorial is not about what git is, its simply some instructions on how to get things working.Oh. and also – people do use windows machines for development. Deal with it.

With this tutorial, I’m going to go from start to finish – from setting up a local testing environment, right through to the github stage. If you already have something like xampp or wamp installed on your PC, you can skip the first bits.

Setting Up A Local Environment

HTML files work fine on a local machine, however, when you come to running PHP files, normal windows can’t handle it. For that reason you need to set up a local environment, or sever. This allows you to run PHP to your hearts content and even build databases if you want!

To do this, my recommendation is XAMPP. (Believe me – I tried them all. XAMPP is simple and easy but horrible looking).

Download the windows installer and follow the steps. If you are on Vista/Win 7 – i suggest installing it in C:\Users\YOUR USER\xampp as it sometimes struggles to install it on the C:\

Make sure both Apache and MySQL are installed as services. It makes life easier.

It takes a while to install. Go make a cup of tea or something.

When its installed and you start Apache, you may get a windows firewall message. Accept that.

You might find that after installation, it says it can’t start Apache bacause something is using the port. The main cause I’ve found is Skype. If you have it installed, open up the options, then advanced and then connection and uncheck the box that says about using port 80.

All things being well you should be albe to navigate to http://localhost in your browser and view the files. The files are located in C:\Users\YOUR USER\xampp\htdocs

Setting Up Git

The next thing you need to do is download and install git.

Head over and download Git for Windows

The only thing to note is to set the option to ‘Run Git from the Windows Command Prompt’

The next step is to download and install Tortoise Git

When installing. make sure you tick ‘Tortoise Plink’ on the option

Once the installation has finished, you won’t notice any change, except when you’re on a windows explorer window, there is some new options to the right click menu.

Pulling, Committing and Pushing

For this next bit i’m going to be pulling, editing, committing and pushing to my Foundation.less repository.

Firstly, we need to generate some random keys, a public and a private one. These are used so that Github knows its you. The public key is used by Github to check against the private key you pass it when pushing.

To start go to Start -> Programs -> TortoiseGit -> PuTTYGen

On the right hand side, click Generate and wiggle your mouse around under the status bar to generate the two keys. Once done, don’t close the window!

Head to Github, log in and then click account settings and SSH Keys on the left. Click the Add SSH Key. Give the SSH key a name (i.e. the name of your computer) and then paste the big long key that the puttygen generated. (The ‘Public key for pasting into OpenSSH authorized_keys file:)

Once pasted in, hit save.

Head back to PuttyGen. You need to save the private key and feed it into TortoiseGit.You do this by entering a passphase if you want (makes it more secure), then clicking ‘Save Private Key‘. Make sure you choose a good location, as you’ll need this everytime you want to make a new repository for Github. Save it as key.ppk

Close PuTTYGen and head to the folder where your repository is going to be.

Creating the Repository (Repeat for each repository)

Navigate to a folder where you want the repository to reside. I’m all about neatness and want to keep all my repositories in one place, so have chosen C:\Users\mike\xampp\htdocs (The XAMPP location). That way I can run any PHP files that have been pulled. In there make a folder for the repository. It can be called anything but for constancy I’m naming it Foundation.less.

This folder can be anywhere on your machine.

Once inside the folder, right click and select the option Git Create repository here…

Click OK on the first box without checking the box and you should then get an alert:

If you have ‘show hidden files‘ turned on, you’ll see a hidden .git folder. If you want the folder to stop being a repository, just delete that.

Right click and go to TortoiseGit -> Settings and then click ‘Git‘ on the left hand side. Fill in your name and your email – these are the credentials that will be used when pushing.

Next, click Remote (on the left, branching off of the selected ‘Git’ option). Fill in the fields as follows:

Remote: this is the name of your repository (can be anything)
URL: This is the github URL provided at the top of your repository starting git@github.com…
Putty Key: Navigate to you key.ppk file.

Click Add New/Save and then OK at the bottom.

You should now be faced with the empty folder. Right click go to TortoiseGit and then click Pull (should be near the top). The Remote should be what you called it in the options. After clicking OK you might get a putty security alert, click yes and you can watch the tortoise do some acrobatics.

Once he’s done, you should see all your files in the folder, as they appear on Github.

Editing and Pushing

Once you’ve finished editing the files, Right click and select ‘Git Commit -> “master“‘.  A dialogue box will appear where you fill in what you’ve changed and you select the files to commit.

Once you’ve clicked OK, you’ll get another box showing the progress. Upon completion, click the Push button located in the bottom left of the box.

Click OK on the following dialogue and this pushes your changes to Github.

Success!

If you have any problems, or can suggest any changes to this blog, tweet meemail me or leave a comment!

05. May 2012 by Mike
Categories: PHP, Websites, Windows | Tags: , , , , , , | Leave a comment

Points mean Pixels

points logo

Points. A simple, barely-a-conference conference.

For ease of reading, this post will follow a traditional approach with a modern twist: Who, What, How Much, Where, When, Speakers, Sponsors Why.

Who?

Points, is me. I am Points.

What?

For those that know of me and my ventures,  you will be familiar with the event I put on near the end of last year (13th October to be precise) at the Brighton Media Centre. This event was an informal, free ‘conference’. It allowed people who had never spoken before to speak and was aimed at all web related folk. To be honest, it was open to everyone, but non-web people would have been bored.

Last time Paul DavisAlex SextonKris Noble and Anthony Killeen all spoke. Several people were kind enough to blog about the event, and you can read the opinions of Kris Noble, Anthony Killeen and Mr Clive Walker on the event.

So, now that you are all clued up on what Points is all about, let me show you why I am blogging about this age-old event.


So there we have it – Points returns in the springiest month of the year.

How Much?

As I mentioned, the last Points was free. However, I learnt my lesson and because of the basic human instinct, the natural emotion of getting free things the last event sold out. Now I bet your wondering 2 things:

a) how can a free event sell out and
b) whats wrong with that?

A free event can sell out if I say I have 50 seats and 50 people say that they’re coming. The problem with that is that 20 people turned up. They were 20 wonderful people who made the event spectacular, but the sponsor providing the drinks catered for 50 people unnecessarily.

This was because of the freeness – nature educates us to get free things, so people booked a place and then could decide later if they’re coming.

So, because of this, the next points will be a small amount of £5. £5, I feel, is enough for people to make sure they want to come and means I can pay the speakers their bus fare home.

To make you feel a bit better, when all the money is in, costs will be covered and the profits will got to a charity. Maybe that will convince you to spend that £5, if not, a little more.

Where?

This is the first question I cannot answer. I am after a small space, preferably with Wifi and a projector. It also, really, needs to be in Brighton. If you know of a suitable place, please let me know! I am open to any suggestions and will consider anything

When?

At the moment I am considering mid/end of April, but this is completely down to the venue. I will keep you posted though!

Speakers

Speakers are the easiest to find. Everyone wants to talk and would love the opportunity to give it ago. I’ve (hopefully) already got the speakers lined up. The subjects i’ve got in store for you are range from SEO to Typography and a couple of other winners!

Sponsors

Where speakers are the easiest to find, sponsors are the hardest. All you have to do is ask, but a lot of people say no. So if you would like to be kind and sponsor Points, then please email me. 

I will also be running a raffle, so if you have any prizes (big or small), then please drop me an email.

Why?

The hardest question out of this list to answer. There are not enough cheap conferences, there are not enough reasons to meet up and learn. Meet ups are great and this is just another reason to talk face-to-face about anything nerdy without feeling guilty. The thing I love about this industry is that everyone wants to share. You spend weeks developing something and the next day give it out for free. I love it and I want to give something back. Because of that, Points was born.

29. February 2012 by Mike
Categories: General, Points Brighton, The Internet, Websites | Tags: , , , , , , , , | 1 comment

Dahon Vitesse speed d7

Whenever I am thinking about making a significant purchase, I always hunt around for reviews, check out blogs and generally search the web for word, be it good or bad.

So as I have this blog platform, I thought it the perfect opportunity to bore you all with my thoughts and feelings about this bike I have owned for 9 months – the Dahon Vitesse Speed d7. Naturally, this bike will often be compared to the top-end Brompton bikes, as they are what every fold up bike strives to be.

I obtained this bike through a cycle to work scheme as I was living in Croydon and my office was moving from central Brighton to Hove. To walk to the new office would have involved getting a ridiculously early train – whereas cycling enabled me to get up at the same time.

I decided upon a fold up bike because there was not much room at my flat to store a full framed one. Also, Southern Rail have a bike restriction and thus will only allow fold-up bikes during rush hour. Despite signs everywhere informing me of this I have only ever seen this enforcement put into practice 3 or 4 times. However, during these times I have been able to stroll past full framed cyclists with a smug look on my face as they’ve been turned away.

So I chose this fold up bike online and headed to my local Evans to pick it up. I was able to give it a test ride before accepting it into my family, however, I was pretty sure it would be accepted with open arms.

The first impression you get is it’s size and weight. It’s not like those expensive, super fold up Brompton bikes, nor is it as light. However, it was two thirds of the price. With the Dahon, you get sturdiness. Granted, it doesn’t fold down as small, or its a bit heavier, but you get what you pay for.

I was allowed to take it out for a spin, and soon discovered the the gear ratio is quite well spread out. The lower gears are perfect for tackling those hills and the higher ones allowed you to get a bit of pace up. If you are going for a fold up bike I highly recommend you go for one with gears if you are cycling for anymore than 2 minutes.

The gear changes were smooth and the riding position is brilliantly comfortable. Whereas on a standard bike, the lowest saddle position is level with the handlebars, the Speed D7 allows you to sit in a more vertical position, one which is comfortable and one that I will miss when I head back to a full framed bike.

When it comes to the fold up bit – its simple but not small. There are 5 steps compared to the bromptons seemingly 3. The fold up size is awkward and struggles to fit in the boot of my Ford Fiesta. Width wise (in comparison to the car) it is fine, but depth of the boot compared to the height of the bike is a squeeze. However, when hopping on and off the trains, I very rarely fold it up the whole way – just snapping it in half keeps it out of the way and allows quick deployment at the other end.

I chose the Vitesse version of the D7 as it has internal hub gears, chain guard, nicer style &  more comfortable grips, and a general upgrade from the standard Speed D7.

One thing I would say – if you are looking at getting a fold up bike, make sure it has mud guards and a rack at the back. I cannot tell you how useful these two simple things have been.

So after 9 months of daily use, how has the Dahon fared?

It’s squeaky. It rattles. It now chirps. It’s dirty. It’s heavy. It’s clumpy. Brakes wear down quickly. Bits move. Quick release mechanisms grind. I’ve lost the bell. And one of the magnets.

Sounds horrific. It sounds like a death trap. But it’s brilliant. The squeaks are minor and can be sorted with a bit of love; A spray here and a clean there. I lived in a first floor flat and thus had no access to a hose. So that first line is my doing. (I have since cleaned and lubed my bike and it is back to its non-squeaky self!)

One thing I didn’t bare in mind when I started cycling every day is how quickly the brakes wear down. I was on my second set and should have changed them, but I no longer use it anymore as I have my hybritane bike I have created. (blog coming on that later). But be warned – pay that little extra for better brake pads and it’ll pay off in the long run!

The bell and magnet losing was partly my fault. The handle bars swing down to fold the bike up and the slipped out my hand, crashing down and snapping the bell off.

So would I buy one again? I think so. If I could afford a Brompton I would go for a Brompton, but the Dahon has served me brilliantly and I look forward to using it again.

26. February 2012 by Mike
Categories: General | Tags: , , , , , | Leave a comment

My Favourite 5 Books – A smashing story

Recently I’ve been going through a fad of buying web related books. I love the feel of books, I love reading books. I love sitting on the train reading about web design and development. With a book you’re forced to read, rather than skim. With a book you can slide in a bit of paper and bookmark your favourite snippet of code. With a book you can have them sitting pretty on a book shelf. With a book you can pass it to your neighbour, or have it sitting on your desk, giving you something to flick through when you want to rest your eyes from the screen.

With books come magazines. The .net magazine is my bible. I will sit and read it from cover to cover, soaking in the news, the stories, the interviews and the hints and tips. I just love being able to open a page and turn it to my developer. My .net mag gets whored around like a lady of the night in my office and thats because its easy to read and easy to digest. Its not like sitting in front of a computer reading a long article. Web articles never look pretty. Books and magazines look stunning.

The irony is not lost on me that I am writing a blog post about how good books are. I have not lost the fact that I am writing a long piece of ugly text for you to sit and read. The fact i’m merely typing is because I cannot afford to publish my blog posts.

Anyway, I digress. The purpose of my boast was not to ramble on about the greatness of books, but to recommend a few. I would like to start some sort of #bookstobuy club. The idea being that you list your favourite 5 books, or recent web related book or magazine purchases and you explain in a few words why its a good book. Write a blog about it and put the link in the comments. Hopefully this will be good to the world. So onto my list:

Just a note – you’ll find the title of the book and a link, followed by the [publisher] and the {topics} of the book. All I ask is that you follow suit.

  1. .net magazine {HTML, CSS, PHP, General Knowledge} - It goes without saying that this magazine has taught me an astonishing amount of things. The greatness it brings to life is good.
  2. jQuery – Novice to Ninja [Sitepoint] {Javascript, jQuery} – this book, on its own, got me into jQuery. Made me realise the most complex of animations and effects are just a .animate() away.
  3. The CSS Anthology [Sitepoint] {CSS} – A brilliant book that gives you the low down on all the CSS selectors and what they do and cover. An amazing reference book
  4. HTML5 and CSS3 for the real world [Sitepoint] {HTML5, CSS3, Semantics} – (seeing a trend here?) This book educated me into the wonders of HTML5. It is what I have built this site and written this blog post. The things I learnt from the book have put me in good stead for the next few years.
  5. The Smashing Magazine Books [Smashing Magazine] {Everything} – (I know strictly this is numbers 5 & 6, but they were a bundle!) I bought the bundle (books one and two) and they are absolutely fantastic. Brilliant. They cover tons of topics and give you a good overview of so many topics. I have, in fact, just ordered the third book despite not even being halfway through the first. They are just teasers of topics, which allows you to gauge what that subject is and what you’re interests are.

They are my favourite 5 books – what are yours?

16. February 2012 by Mike
Categories: General, The Internet | Tags: , , , , , , | 4 comments

HTML5 – Explained. Briefly

After reading the aforementioned HTML5 & CSS3 for the Real World book, I have come to realise that there are loads of changes included with HTML5. I have the book in front of me for me to reference, but I find it laborious to keep opening it to check on the semantic meaning behind

&lt;small&gt;

or

&lt;section&gt;

elements.

So this post is not ground breaking, its not amazing. Its just a summary of changes to the HTML spec in English I understand and can refer back to. Its also to pass to my back end developer so he knows what’s what. [I'm also posting it incomplete - post a comment if you have an additions/suggestions].

Before you can use any of these elements – you should really use the HTML5 Shiv – found in  my basic HTML5 Template.

If you get stuck – HTML5 Doctor created this simply amazing flowchart

&lt;header&gt;

,

&lt;nav&gt;

&

&lt;footer&gt;

are all self explanatory

&lt;section&gt;

- This is content which is related to one another. I.e. a ‘section’ of quotes, sections of a tabbed interface.

&lt;article&gt;

- Should be a self contained piece of content

&lt;aside&gt;

 - Should be something that is tangible to the content, or something like a sidebar or ad space. It should not contain main content.

&lt;h1&gt;

- These can appear more than once on a page and should be within context of where it is. I.e. you should be able to remove the parent and everything to still be correctly titled. Each

&lt;article&gt;

should have one.

&lt;figure&gt;

&

&lt;figcaption&gt;

- perfect for an image and caption. Would be marked up like:

<figure>
<figcaption> An image</figcaption>
<img src="" alt="">
</figure>
&lt;b&gt;

- can be used to make something bold, without it being significant – e.g. showing a change in a lump of code

&lt;i&gt;

- for use in the case that you want italics, but not for emphasis – e.g. “Hello” he said

&lt;small&gt;

can still be used to show text that is smaller, than the rest – e.g.

&lt;small&gt;Copyright Mike Street&lt;/small&gt;
&lt;a&gt;

- can now be around block elements!

07. February 2012 by Mike
Categories: HTML/CSS, The Internet | Tags: | 3 comments

← Older posts