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.
