A couple of useful links

I’ve been working my way through HTML, XHTML & CSS for Dummies which is all very exciting. It’s early stages at the moment, so most of what it’s told me so far isn’t new (apart from the fact that in XTML, empty elements must end with a slash before the closing greater than symbol and there should be a space before the slash like this <tag />).

Anyway, the book has a habit of mentioning useful links without really explaining them or drawing any attention to them. One such link is http://validator.w3.org. This is a free markup validation service which will highlight any errors or issues with your markup. (You can get it to check any webpage and it’s actually quite fun putting some of your favourite sites in and seeing how many errors they come back with!).

The other link is nothing to do with the book, it’s just a site I’ve come across and thought was cool. The site is Dynamic Drive and contains loads of free and very useful HTML, CSS and Javascript for you to use on your own site. I used one of the free scripts for the image slideshow on my photography website. It’s a great place to go for calendars, galleries, scrollers, menus, tooltips, forms… the list goes on.

HTML cheat sheets

Well, I’ve had an enjoyable – if soggy – break in Paris and taken lots of photos of iconic landmarks. Now I’m back, I can return to the job of learning HTML. I’m excited that my “HTML, XHTML & CSS for Dummies” book has arrived. I’ll be working through that as well as the P2PU course in my bid to become an expert web developer!

I also found some useful HTML5 cheat sheets, so thought I’d share them with you:

HTML5 Cheat Sheets By InMotion Hosting – A Dedicated Server Provider

Researching tags

I have been using Mozilla Developer Network HTML reference to research a few common HTML tags and try and describe their functions. Here’s what I’ve come up with:

<div>
Defines a division or section in a document. It can group block-elements together making it easier to style them.

<blockquote>
This indicates an extended quotation, usually indented.

<p>
Defines a paragraph. Browsers add space before and after a paragraph.

<ol>
Ordered list where the ordering of the items is important (eg. Placings in a race)

<ul>
An unordered list of terms marked with bullet points (which can be defined using CSS).

<li>
Defines each item in a list (the list can be ordered or unordered).

<nav>
A section of a page which has navigational links to another page or parts of a page.

<menu>
An unordered list of menu choices or commands.

<span>
A generic container very like <div> used to group elements and define a section in a document. It differs from <div> in that it is an inline element.

<time>
Represents the time (in 24 hour clock) or the date.

<q>
A short inline quotation.

<img>
An image.

Text Editors

The next part of my challenge was to find a suitable text editor to replace the default Notepad the comes with Windows. I wanted something free so I tried 3 options:

• Notepad++
• ConTEXT
• SourceEdit

I typed out the code that I had previously learned (from memory – yey!) and then played around with the editor to see what it could do. I found Notepad++ to be pretty user-friendly and clear. One of the features I particularly liked is that it draws vertical lines to show you how your code lines up, which makes it easier to get an overview of the structure and spot any errors:

I then chose ‘Launch in Firefox’ from the ‘Run’ menu to see how my webpage looked – easy!

Notepad++ also seems to be very popular with lots of documentation and plugins.

As a newbie, I found ConTEXT a bit less intuitive than Notepad++, although I did like the fact that the developer was happy to be paid in beer!

SourceEdit has a built-in FTP manager and support for previewing the HTML code in the web browser directly from within SourceEdit. However, I didn’t like the interface very much and it didn’t have line numbers.

Verdict: I am going with Notepad++ for now but reserve the right to swap to a new editor as my skills develop and I learn what all the functions are!

I hate my handwriting!

The next task after setting up a blog for the Webmaking 101 course is to write out some code by hand. This is the first time I’ve done this and I have to say that, even though I hate my handwriting, I found it a pretty rewarding experience.

One of my frustrations with HTML is that I’ve got a pretty bad memory and it just doesn’t seem to stick in my brain, so I’m constantly referring to cheat sheets when I could work a lot faster by knowing the code off by heart.

It’s a well known fact that writing things down  – preferably lots of times – helps to embed them in the memory and I found that writing out the HTML by hand helped it to start to sink in. There’s a long way to go, but I feel like I’m starting to get to grips with the structure of an HTML document.

P2PU – The journey begins!

I decided that it was about time that I honed my HTML and CSS skills and I came across the excellent Peer 2 Peer University open education project to help me do just that. In this blog, I will chart my progress, hopefully connect with other learners and share experiences.

I have always been interested in web development and have my own website to showcase my photography. I also work in communications for Voluntary Arts England and my role involves developing the website and social networks. I have picked up bits and bobs of HTML and CSS on a need-to-know basis, but now I’m looking to take my skills to the next level.