Awesome Intern Required
Good Lizard Media are looking for a new intern to come and work with us, one or two days a week.
Passionate about music and all things digital, the ideal person will understand the ins and outs of Twitter, Facebook and MySpace, and be familiar with the ups and downs of Soundcloud, HTML, and YouTube. A basic knowledge of foosball is essential. Does this sound like you? If it does – email your CV with a 140 character reason why you should come and work with us to jobs@goodlizardmedia.com
Basic HTML You Really Should Know
While you may not be interested in becoming the world’s best web designer, whether you’re an artist, a manager or a label, you or someone within your organisation should have some basic HTML skills. HTML (Hyper Text Markup Language) is what is known as a markup language. It consists of various ‘tags’ that are used to ‘describe’ the contents of a web page, which tell the web browser how to present that content to the user.
In this blog post, we’re going to look at some of the basic HTML tags that will allow you to create online content that you might otherwise need help to achieve.
Links
We’re all familiar with links. They are fundamental to the way the web works. They allow the users of a web site to navigate between pages, sections of pages or to external web sites. The markup for a link looks like this:
<a href="about-me.html">About Me</a>
Let’s break that down:
Firstly, we have the opening and closing ‘a’ tags:
<a> ... </a>
Secondly, we have the href attribute. This specifies the destination of the link. The word ‘attribute’ is important; It gives the browser information that is related to the <a> tag. For that reason, it sits within the <a> tag itself:
<a href="about-me.html"> ... </a>
Finally,we have the text between the opening and closing <a> tags. This is the text that is actually displayed on the page for the user to click on. That’s it! Simple, right?
<a href="about-me.html">About Me</a>
Images
Links are great and all, but the web would be a pretty dull place if it consisted only of pages and pages of text. Thankfully, the modern web browser is capable of displaying all kinds of rich media, the most common being the humble image. Images can be used in many, many ways, but the basics are always the same. The markup for an image looks like this:
<img src="my-image.jpg" alt="Photo of me" width="250" height="120" />Let’s take a closer look:
Firstly, we have our <img /> tag. You’ll notice that this differs slightly from the <a> tag in the previous example. With the <a> tag, we had an opening tag (<a>) and a closing tag (</a>). This was because we needed to display the link text (“About Me”) between the two tags. However, with the <img> tag, we don’t need to display any text, so we instead use a ‘self-closing’ tag:
<img />Next, we need to add some attributes to the <img /> tag to tell the browser what to display and how to display it. The first, and most important, attribute is the src attribute. This is where we put the URL/location of the image itself. This can either be relative or absolute. “What does that mean?”, I hear you ask. Well, a relative URL is the location of the image relative to the current web page. So if the image is in the same folder as the current web page, you would simply enter the filename of the image:
<img src="my-image.jpg" />If the image was stored in a sub-folder, it might look something like this:
<img src="images/my-image.jpg" />An absolute URL is the complete URL of the image. You would use this method if the image was hosted on some other server/website:
<img src="http://www.another-website.com/my-image.jpg" />The next attribute is the alt attribute. This is the text that you want to display if the image can’t be displayed for some reason (maybe the image file is missing or the user has decided to turn off images in their browser). This should be something meaningful that actually describes what the user would have seen if the image had loaded:
<img src="my-image.jpg" alt="Photo of me" />Finally,we need to tell the browser the width and height of the image (in pixels). While most browsers will display the image at the correct size even if the width and height attributes are omitted, it’s good practice to always include them:
<img src="my-image.jpg" alt="Photo of me" width="250" height="120" />Image Links
So we can create links and we can create images. What about creating images that are links themselves? If you’ve read and understood everything so far, this should be a walk in the park. Quite simply, all we need to do is replace the link text between the opening and closing <a> tags with our image tag:
<a href="about-me.html"> <img src="my-image.jpg" alt="Photo of me" width="250" height="120" /> </a>
When a user clicks on the image, they will be taken to the URL within the href attribute of the <a> tag.
Paragraphs and Line Breaks
Most web pages contain a fair amount of text. Just like with printed text, we need to present that text in a way that makes it easy for the user to read it. Among other things, this means breaking up the text into manageable blocks, or paragraphs. HTML makes it really easy to break our text into paragraphs:
<p>My Name is Pete and I like HTML</p> <p>I like HTML because it allows me to create attractive and user friendly web pages to show off my content</p>
By default, most web browsers will separate paragraphs by inserting a space between each of them equal to one line of text.
Sometimes, you may want to start a new line of text without ending the current paragraph and starting a new one. HTML has a tag for this too. It’s called a line break and it looks like this:
<br />You’ll notice that, just like the <img /> tag, the line break tag is a self-closing tag (because it doesn’t contain any content). A line break is similar to hitting the return key on your keyboard when typing in a standard desktop word processor. It will not create a paragraph space like the <p> … </p> tags.
The line break tag should be used sparingly. If you use line breaks to create all kinds of desired layout effects, your HTML markup will very quickly become messy and bloated. Layout effects should be created with CSS (Cascading Style Sheets), but that’s a tutorial for another time!
This is all great, but how can I try these tags out for real?
The great thing about HTML is that it is understood by your web browser. You don’t need a fancy web server to play around with it. So, I’ve included here a basic HTML template that you can use to create a web page for sharpening your HTML skills.
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML Practice</title> </head> <body> </body> </html>
Copy and paste this code into a plain text editor (e.g. Notepad on Windows or TextEdit on Mac OS X) and save the file as test.html (actually, you can call the file whatever you want, so long as it ends with .html). Then, experiment by adding your own HTML tags between the <body> … </body> tags.
To see what your creation looks like, simply open test.html and it should automatically open in your default web browser.
If you’d like to learn more about HTML, there are some great tutorials on the W3 Schools website.
5 Easy Ways for Musicians To Optimise Their Time Online
1 – Use time away from the internet to prepare content, ideas and updates.
One of the common complaints I hear from artists when asked to post more regularly online is that they can’t think of anything interesting to write. The truth is that nothing interesting really occurs when you are sitting at a computer. Instead take a notepad and pen, write yourself text messages, smart phone notes or use a dictaphone to get those interesting anecdotes/stories/ideas down as and when they happen. Then, when back at a computer, there will be lots of jumping off points for content.
2 – Get some help.
This may seem obvious but to speed up your time online delegate as much of your grunt work in updating as possible. This involves finding a friend, fan, manager or ‘web guy’ to take the responsibility of preparing content such as resizing photos, uploading tracks to Soundcloud, changing banners on MySpace etc. These sorts of tasks are simple but time-consuming and don’t need to be done by the artist. This frees up time online for you to use communicating.
3 – Use different media.
Visitors to an artist’s social networks and website are looking for new information and content. This is the main reason that they come back regularly to your pages. By using photos, video, drawings, blog posts, top 10s, interviews, press coverage, music recommendations, competitions and questions it’s much easier to keep excited and interested in the content you are making. Rather than sitting down and doing written blog post after blog post, consider mixing things up more and you’ll find it much more interesting and ultimately easier to do updates.
4 – Plan out content from bulk.
Getting time and access to a computer can be difficult for touring artists or musicians who also hold down jobs in amongst rehearsals and writing and all the other tasks that have to be done. As in points 1 and 3, there are various ways to come up with content and differing types to use. When you do have time to create content , try to plan out when it is going to be used rather than posting as soon as its created. Look at using a scheduling tool in a CMS (Content Management System) like WordPress or social network tools like Socialoomph to spread out the content you create over a period of a few weeks. This decreases the amount of times you need to access the internet and also reduces the stress of constantly coming up with and posting new content.
5 – Take tips from professional bloggers.
Blogging is a profession and income generator for many people across the world, spending their time creating engaging content that brings people to their site regularly. Namely but not limited to the following:
Guest Posts – Asking other musicians, members of your team, fans and journalists to write a guest post for your website or facebook page. This could be opinion pieces, fan history of your music, a ‘day in the life of’ your roadie or manager, the band you recently toured with’s memories of some gigs, etc.
Encourage readers to share – use a service like addthis.com to quickly add the ability to share the content on the reader’s own social network profile or blog.
Comment and engage with other blogs – Posting comments on other blogs and engaging within communities such as drownedinsound.com or last.fm to eventually generate interest in your own content.
