Basic html an-introduction-to-html-for-bloggers

‘Basic HTML: An Introduction to HTML for bloggers’

By Kevin Muldoon

© 2009 BloggingTips.com www.bloggingtips.com Page 2 of 63

About Blogging TipsAbout Blogging TipsAbout Blogging TipsAbout Blogging Tips

Blogging Tips is a daily blogging advice blog which specialises in helping bloggers create, develop, promote and make a living from their blogs.

Visit www.bloggingtips.com for more information about our blog, newsletter and discussion forums.

About The Author About The Author About The Author About The Author

Kevin Muldoon is the founder of Blogging Tips and oversees all site developments.

He currently lives in central Scotland and enjoys travelling, music, movies, keeping fit and reading. He continues to blog for Blogging Tips on a weekly basis as well as his personal blog KevinMuldoon.com.

CopyrightCopyrightCopyrightCopyright

All rights reserved. No part of this book can be reproduced, copied, stored in a retrieval system or transmitted over the web without prior approval of BloggingTips.com. Brief quotations embedded in reviews are permitted.


By Kevin Muldoon


Who is this book for?Who is this book for?Who is this book for?Who is this book for?

This book was written for bloggers with no prior knowledge of HTML. It is not meant, nor was ever intended to be, an extensive course on the HTML language.

However, should you want to develop your HTML skills further after reading this e-book, I encourage you to check out the further reading section at the end of the book for links to advanced HTML Tutorials.

I'm a blogger, why do I need to know HTML?I'm a blogger, why do I need to know HTML?I'm a blogger, why do I need to know HTML?I'm a blogger, why do I need to know HTML?

Due to free hosting solutions like Blogger and WordPress.com, it is possible to publish your thoughts on the internet without knowing HTML. However, if you want more control over how your blog posts are shown and how your blog design is displayed, you need to have a basic understanding of HTML. It will help also help you quickly identify basic coding errors on your blog.

Thankfully, HTML is an incredibly easy programming language to learn and once you know the basics you will be able to do basic customisations to your blog design without hiring a designer.

About This BooAbout This BooAbout This BooAbout This Bookkkk

I recommend those who want to learn HTML from this e-book to download the BloggingTips HTML Cheat Sheet. This handy one page pdf document has a list of most of the common HTML 4 tags and


By Kevin Muldoon


should be a useful reference when learning the HTML language.

Also, please note that this book was written in UK English. Therefore, those who are used to American English may notice some slight differences in spelling like colour instead of color and emphasise instead of emphasize.

AAAAcknowledgementscknowledgementscknowledgementscknowledgements

Last but not least, I would like to thank the following people who have helped me release this e-book:

• Sarah Anderson from Stuff By Sarah and David Anderson from Phoob for proofreading this e-book and giving some much needed feedback.

• The Blogging Tips Writing Team. If they were not writing great articles for the blog everyday, I wouldn’t have had the time to write this e-book!

• The Blogging Tips readers!! Yes I know, it’s cheesy; but seriously, I wouldn’t have had the passion or drive to write this e-book in the first place if it wasn’t for the great feedback from you all.

Table oTable oTable oTable of Contentsf Contentsf Contentsf Contents

CHAPTER 1: AN INTRODUCTION TO HTML............................................... 7

A BRIEF HISTORY OF HTML........................................................ 7

HTML FILE EXTENSIONS............................................................ 9

HTML EDITORS...................................................................... 9

THE WYSIWYG EDITOR.......................................................... 10

CHAPTER 2: TAGS, ELEMENTS & ATTRIBUTES ..................................... 12

TAGS ................................................................................ 13

ELEMENTS .......................................................................... 15

ATTRIBUTES ........................................................................ 17

NESTING TAGS ..................................................................... 17

CHAPTER 3: THE BASIC STRUCTURE OF AN HTML PAGE.................... 19

THE DOCTYPE .................................................................... 22

CHAPTER 4: BASIC STYLING WITH HTML ............................................... 24

COMMON ELEMENTS WHICH STYLE CONTENT ................................... 24

DEFINING COLOURS ............................................................... 28

CHAPTER 5: LISTS..................................................................................... 31

ORDERED AND UNORDERED LISTS ............................................... 32

DEFINITION LISTS ................................................................. 33

CHAPTER 6: HYPERLINKS........................................................................ 35

THE EMAIL LINK.................................................................... 36

LINKING WITHIN A PAGE OR DOCUMENT.......................................... 37

OPENING LINKS IN A NEW WINDOW OR TAB................................... 39

CHAPTER 7: IMAGES................................................................................. 40

LINKING WITH IMAGES............................................................ 41


By Kevin Muldoon


IMAGE TYPES ....................................................................... 42

CHAPTER 8: TABLES................................................................................. 43

SPANNING COLUMNS & ROWS.................................................... 47

CHAPTER 9: ADDITIONAL HTML INFORMATION..................................... 50

CHARACTER ENTITIES ............................................................. 50

COMMENTING....................................................................... 51

VALIDATION ........................................................................ 52

HTML VS XHTML ................................................................ 53

CHAPTER 10: A BRIEF NOTE ON CSS ..................................................... 54

A SIMPLE EXAMPLE OF CSS...................................................... 55

LINKING TO YOUR CSS STYLES.................................................. 55

DIFFERENCE BETWEEN IDS AND CLASSES ........................................ 57

CSS OVERVIEW.................................................................... 59

CHAPTER 11: OVERVIEW ......................................................................... 60

COMMUNITY SUPPORT ............................................................. 62

HTML REFERENCE & TUTORIAL WEBSITES ..................................... 63

Chapter 1: An Introduction to HTML

Hypertext Mark-up Language, more commonly known in its abbreviated form HTML, is the mark up language which is widely used to display web pages on the internet.

A Brief History of HTMLA Brief History of HTMLA Brief History of HTMLA Brief History of HTML

The first official document which showed users how to use HTML was called ‘HTML Tags’. It was released in 1991 by a physicist called Tim Berners-Lee and contained information about 22 HTML elements.


By Kevin Muldoon


The language was refined during the 1990’s. The rules for HTML 2.0 were published in 1995, for 3.2 in early in 1997 and for 4.0 later that same year. HTML 4.01 is the most up to date version of the language though there has been some slight changes since 1997, though nothing that is worth mentioning in this book.

In the early days of the web most internet users browsed the web with either Netscape Navigator or Internet Explorer. Unfortunately, the developers behind these browsers had different ideas on how to progress the language which resulted in some new tags working in Netscape Navigator and not on Internet Explorer (and vice versa). As a result, many web pages looked fine in one browser but completely messed up on another.

Over the years many HTML elements have been deprecated or removed completely. Deprecation means that although an element may work, it is best practice not to use it. Essentially, depreciation allows the language to progress but provides backwards compatibility for existing HTML based pages.

Using deprecated HTML tags usually results in a page not displaying correctly in some browsers.

Out of the 22 elements which were mentioned in the original ‘HTML

Tags’ document, only 13 remain in HTML 4.


By Kevin Muldoon


HTML File ExtensionsHTML File ExtensionsHTML File ExtensionsHTML File Extensions

Pure HTML pages have the file extension .html or .htm. Both extensions work exactly the same way in all browsers.

It is not common for a programming language to have two file extensions. Two file extensions for HTML arose because MS DOS, Microsoft’s’ original operating system, could only handle 3 character file extensions. Hence .html had to be shortened to .htm by those who used Microsoft operating systems.

UNIX and Linux based systems did not have this 3 character file extension limit therefore were able to use .html.

HTML EditorsHTML EditorsHTML EditorsHTML Editors

You can edit an HTML document in just about any editor. Most of my first websites were coded directly in notepad however I soon realised the limitations with using such basic editors.

HTML editors make editing much easier by colour coding your document into separate areas , adding line numbers for referencing specific lines of code and highlighting incorrect code and much much more.

Thankfully most HTML editors are free! For the last 8 years I have used TextPad to code and edit my websites though there are some great alternatives available like NotePad++, First Page, CoffeeCup and PageBreeze. There are literally hundreds of free HTML editors


By Kevin Muldoon


available so I recommend trying a few out until you find one which suits you.

The WYSIWYGThe WYSIWYGThe WYSIWYGThe WYSIWYG Editor Editor Editor Editor

Most bloggers write their blog post in what is known as a ‘What

You See Is What You Get’ text editor (WYSIWYG). This visual editor allows people with no knowledge of HTML to write and style their blog posts easily.

Using the WYSIWYG is very similar to using WordPad or Microsoft Word, and the addition of this editor to blogging scripts was no doubt a big factor in the growth in blogging itself as it allowed those with no programming knowledge to quickly and easy publish content on the web.

In the background the editor converts everything you type into HTML. Most WYSIWYG editors allow you to view your blog post visually or see the raw HTML code.

If you have been using the WYSIWYG editor to write your posts and a pre made template for your blog design, then you may not have had too much exposure to the HTML language.


By Kevin Muldoon


Therefore I encourage you all to view the source of your own blog to see the code which drives your website. In most browsers the ‘View

Source’ link is in the tools section of your browser menu.

No doubt the source code your blog generates looks foreign to you but don’t worry, you will soon see how it all breaks down and realise that HTML isn’t a difficult language to learn ☺

Chapter 2: Tags, Elements & Attributes

An HTML document consists of tags, elements and attributes. In this chapter I will explain what these are in detail.

If you have been blogging for a while and have a basic understanding of HTML already, feel free to skip this chapter and refer to it at a later date.

• Tags: Tags are used to mark-up certain information to be displayed in a browser. For the content to be marked-up it has to have an opening tag (<tag>) before the content and a closing tag (</tag>) afterwards.


By Kevin Muldoon


• Elements: An element consists of an opening tag, content and a closing tag. For example: <strong>Bold Text</strong> would be classed as an element (this HTML produces the output Bold Text).

• Attributes: An element can have one or several attributes. Attributes are placed within tags and are used to determine certain values of the HTML element.

TagsTagsTagsTags

In HTML you control text and information by wrapping tags around them. Tags begin with a less than symbol (<) and end with a more than symbol (>) i.e. <tagname>.

All elements in HTML must have an opening tag and a closing tag i.e. <tagname>content</tagname>. A closing HTML tag looks the same as an opening tag except it has a forward slash (/) directly before the tag name.

I will illustrate this with an example. In this example I have used the strong tag (<strong>), which changes the text font to bold; the emphasise tag (<em>), which changes the text font to italic; and the paragraph tag<p>, which aligns and spaces the content with the surrounding area.


By Kevin Muldoon


Code Example:

<p>I like to <em>emphasise</em> some words and

<strong>strongly emphasise</strong> others.</p>

Output:

I like to emphasise some words and strongly emphasise others.

If any of the tags were not properly closed, the output would not be correct. In the example below the emphasise tag was not closed therefore any text displayed after the opening <em> tag will be displayed in italic (in most browsers).

Code Example:

<p>I like to <em>emphasise some words and

<strong>strongly emphasise</strong> others.</p>

Output:

I like to emphasise some words and strongly emphasise others.

Forgetting to close a tag is a common mistake that beginners make so I encourage you all to get in a good habit from the start and always make sure you close your HTML tags.

There are several HTML tags which do not need to be closed. These are known as Empty Tags and do not need to be closed as they are not used to wrap around and control any content.

The most common ones used are the Break Line tag (<br>) and the


By Kevin Muldoon


Horizontal Reference tag (<hr>).

• The Break Line tag (<br>) ensures that any text/content which follows is started on the next line.

• The Horizontal Reference tag (<hr>) produces a line across your content area. It is commonly used to separate your content into different parts.

An example of the HR tag in action on BloggingTips

ElementsElementsElementsElements

In HTML, an element refers to a section of your page and includes the opening tag, the content which is being marked-up and the closing tag.

Although technically speaking an element can refer to any area of your page, the term is more commonly used to describe the structural elements of an HTML web page.

All of these elements are required to build a webpage on the internet.

* Note, technically you could write a valid HTML page with just the

<html> tag however it would have no title and no content, two things which

are essential to any webpage!!


By Kevin Muldoon


• The Document Declaration: The Doctype is defined at the top of an HTML page. It lets the browser know what version of HTML you are coding in.

• The <html> element: <html> is the first HTML tag of any HTML document. It tells the browser that all information contained within the opening <html> tag and the closing </html> is coded in HTML. As such, </html> is the last HTML tag in an HTML page.

• The <head> element: The <head> tag comes directly after the <html> tag and before the <body> tag. The tags used within this element are not displayed on your webpage. This element is used to explain to the browser what should happen before the page is loaded including meta description (meta tags etc), pre loading images, specifying the web page title, linking to the websites CSS stylesheet and much more.

• The <title> element: The title element is placed within the <head> element. The words between the opening <title> tag and closing </title> tag will be displayed at the top of the page in your browser.

• The <body> element: The <body> element comes after the <head> element and contains all your webpage content. The closing </body> tag comes directly before the closing </html> tag.


By Kevin Muldoon


AttributesAttributesAttributesAttributes

Attributes are placed within tags and give you more control over how your content is displayed. It allows you to align images, change the colour of fonts, set the width of a table and much more.

Most tags have different attributes which you can set to change though not all of them (for example, the tags <strong> and <em> do not have any attributes).

Many tags also have default attributes which are used if no attributes are set.

Here are some more examples of attributes:

<img src=”http://www.yourblog.com/logo.jpg” width=”300”

height=”75” border=”0”>

<a href=”http://www.yourblog.com”>Your Blog</a>

NestingNestingNestingNesting Tags Tags Tags Tags

HTML is a structured language and allows the use of multiple tags in order to control content. These tags have to be nested or the output will be a little messed up.

Here is a simple example of how nesting should be coded:

<tag2><tag1><tag3>example of nesting</tag3></tag1></tag2>


By Kevin Muldoon


Notice how <tag3> is closed first since it was the last tag opened, then <tag1> is closed, and finally <tag2> (the opening tag).

In the example below I have made the link to BloggingTips bold and italic. Notice how each tag is closed in the correct order.

Code Example:

<a href=”http://www.bloggingtips.com”>

<strong><em>BloggingTips</em></strong></a>

Output:

BloggingTips

Chapter 3: The Basic Structure of an HTML Page

As a blogger, you will probably never need to build a website from scratch as all blogging scripts automatically generate pages for you. However I think a basic understanding of the structure of an HTML page will help you understand the language better.

So let’s move on and create your first every HTML page! Here is what you need to do:

• Open up a blank document in your chosen text editor (notepad is sufficient for this task).

• Copy the code below into the document and save it somewhere on your computer as test.html (note: the .html file extension converts the document into an HTML file).

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

“http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>

<title>My very first web page!</title>


By Kevin Muldoon


</head>

<body>

<h1>Welcome to my very first web page</h1>

<p>Wow – HTML is so easy!!<p>

</body>

</html>

• Open test.html in your browser. You can do this by opening the file via your browser or by opening the test.html file directly.

You should now see something like this via your browser:

I encourage you all to play around with the test.html web page for a while. Change things up a little using some of the tags you have already learned and try not closing one of the tags or making a mistake just to see what is displayed.

It’s important that you see what happens when HTML is not coded correctly. Not only will it help you understand what an error looks like, it will remind you to write tags in the right order in future.

This headline on your test page is larger and bolder than the text below. This is because it is inside a header tag. Header tags come in 6 sizes, ranging from the largest and most important <h1> to the smallest <h6>. They are used to display important site headlines and titles on your page.

From a Search Engine Optimisation point of view, the <h1> tag is the


By Kevin Muldoon


most important tag in the body of your web page followed by the <h2> tag.

I encourage you all to edit your test.html file to display all 6 header tags to see the different in size between them. All you have to do is add something like this to the body element of your web page.

<h1>This highlights the size and weight of the H1

tag</h1>

<h2> This highlights the size and weight of the H2

tag</h2>


tag</h3>


tag</h4>


tag</h5>


tag</h6>

Your web page will now look something like this:


By Kevin Muldoon


The The The The DOCTYPEDOCTYPEDOCTYPEDOCTYPE

If you have read chapter 2, you should be familiar with all of the tags which were used to build our test.html page (except from the header tags which I just briefly spoke about).

Though you will have noticed this strange piece of code at the very top of our web page:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

“http://www.w3.org/TR/html4/strict.dtd”>

This is known as a Document Type Declaration. It is placed before any HTML code and tells an HTML Validator what version of HTML you are coding in. This allows the Validator to check your HTML code accordingly.

There are 3 types of Document Type Declarations for HTML 4.01:

Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01

Frameset//EN"


By Kevin Muldoon


"http://www.w3.org/TR/html4/frameset.dtd">

The strict DOCTYPE is specifically for HTML files which only have HTML 4 tags. No deprecated tags are permitted under this Document Type Declaration.

The DOCTYPE which most blogs use is Transitional. This declaration is less strict and allows deprecated tags and presentational attributes. The Frameset DOCTYPE is the same as Transitional except frames are permitted too. As a blogger, you don’t have to concern yourself with Document Type Declaration too much however it is something which I think is important to know about since all HTML pages have it.

If you remember anything from this section, remember that Document Type Declaration is something which is added to all HTML pages so that code can be validated.

Chapter 4: Basic Styling with HTML

Over the years the idea of separately style from content has come more into play, with CSS controlling the style and visual design of a site with HTML being used to structure the site. This is nearly always the case with blog designs, which is why it’s so easy to customise them!

Because of this development, many HTML tags which were previously used to mark-up text in a document have been deprecated (e.g. font <font>, underline <u>, centre alignment <center> etc) and developers are encouraged to use CSS to style their web pages instead.

However, there are some HTML tags which are used frequently in all web pages. In this chapter I will explain the most common HTML elements which you will find in your blog template.

Common Elements Which Style ContentCommon Elements Which Style ContentCommon Elements Which Style ContentCommon Elements Which Style Content


By Kevin Muldoon


There are a lot HTML tags which you can use to change the look of your text however from my experience the most common are Header tags, Paragraphs, Break Lines, Divisions, Spans, Strong and Emphasis tags.

Header Tags <h1> - <H6>

Header tags were discussed in the last chapter. They are used for headings and range in size greatly from the largest <h1>, to the smallest <h6>. Most web designers control the size, colour and font type of their header tags through their CSS Style Sheet to make their web pages more appealing.

Paragraphs <p>

Browsers do not interpret spaces from HTML pages. Therefore if you had to write:

I’m learning HTML

Isn’t it a fascinating language!

The output would like this:

I’m learning HTMLIsn’t it a fascinating language!

In order to display the text correctly, you would use the paragraph <p> tag and write something like this:

<p>I’m learning HTML</p>

<p>Isn’t it a fascinating language! </p>

This tells the browser that the two lines are separate from each other


By Kevin Muldoon


and would give the following output.

I’m learning HTML Isn’t it a fascinating language!

Through CSS, paragraphs can be used to control how the text appears and how much space is between each paragraph (amongst other things, the possibilities are endless!).

Break Lines <br>

I discussed break lines briefly in chapter 2. They are used to tell the browser to print the rest of the content on the next line. Generally speaking, paragraphs should always be used to format your main content area however break lines are very useful in certain situations.

Divisions <div> & Spans <spans>

Divisions and spans are mainly used to link to a class within a CSS Style Sheet. They work in the exactly the same way except that spans are an in-line element and divisions are a block-line element. A block element adds a line break so the information is displayed on the next line.

Most blog templates use divisions to design the structure of a blog page. Spans are mostly used within the body of a text. Divs and spans usually use an ID (Identifier)or a class.

The example below illustrates how divisions and spans work.

<div id=”example1”>

<p>I’m learning <span class=”class1”>HTML</span></p>

<p>Isn’t it a <span class=”class2”>fascinating</span>

language!</p>


By Kevin Muldoon


</div>

The division above links to an identifier in our style sheet which centres the text and changes the font. Within the text we are changing the colour of the word HTML to green using a class in our style sheet called class1 and the word fascinating to red using the class class2.

The code would produce something like this:

I’m learning HTML Isn’t it a fascinating language!

Strong <strong> and Emphasis <em>

The strong and emphasis tags are used to emphasise text. <em> is used to emphasise something and <strong> is used to strongly emphasise it.

In modern browsers, <strong> usually makes the content bold and <em> usually makes the content italic. Which is why so many people confuse <strong> with the older HTML tag bold <b> and <em> with the older HTML tag italic<i>. Both <b> and <i> are still valid in HTML 4 however most web designers recommend using <strong> and <em> instead.

So what is the difference between them?

• <b> and <i> are explicit, which is akin to telling the browser ‘Make this text italic and make this text bold’.

• <strong> and <em> are semantic, which is akin to telling the


By Kevin Muldoon


browser ‘This text should be emphasised and this text should be strongly emphasised’.

Because of the way styling is controlled through stylesheets nowadays and because of the different ways that information can be displayed, <strong> and <em> should be used instead of <b> and <i> (even though they are both valid HTML 4 tags).

For example, a program which reads text for the blind may change the tone of the voice for the listener when an emphasis tag is used, something which wouldn’t occur using the older tags.

Defining ColoursDefining ColoursDefining ColoursDefining Colours

Years ago, the colour of text was defined in numerous elements of HTML using the attribute color=”#HEXCODE” (the attribute bgcolor was also used for backgrounds). Nowadays colours are defined in the CSS stylesheet.

The World Wide Web Consortium (W3C) have defined 16 colours which are valid in HTML and CSS. These are the same colours which are valid with the Windows VGA Colour Palette.

The 16 colours are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Although you can use these names in your style sheet, to adhere to HTML and CSS


By Kevin Muldoon


validation rules you should link using the hexadecimal code.

Here is the full list:

Colour Hex Code Colour Hex Code

Aqua #00FFFF Navy #000080

Black #000000 Olive #808000

Blue #0000FF Purple #800080

Fuchsia #FF00FF Red #FF0000

Grey #808080 Silver #C0C0C0

Green #008000 Teal #008080

Lime #00FF00 White #FFFFFF

Maroon #800000 Yellow #FFFF00

Note, you can use any colour in your style sheet, the 16 colours which the W3C have defined just ensures that older browsers and operating systems display the colours in the same way. If you use a colour that is not recognised by an older computer or device with a limited colour palette, the closest colour will be used (well this is what is supposed to happen but in my experience it wasn’t always the case!)

W3C also recommend that you use hexadecimal code when referring to


By Kevin Muldoon


colours instead of the colour name.

Please refer to the BloggingTips HTML Cheat Sheet for a quick reference for all W3C valid colours and common HTML font and phrase elements.

Chapter 5: Lists

Lists are a useful way of presenting information to the reader in a more presentable and easy to read way.

There are 3 types of list in HTML:

• Ordered List (<ol>): Ordered lists allow you to list items in sequence.

• Unordered List (<ul>): Unordered lists are the same as ordered lists except the list items are not numbered.

• Definition List (<dl>): Definition lists are used for making lists


By Kevin Muldoon


of terms and their definitions. They are displayed in a slightly different way from ordered and unordered lists.

Many attributes of the ordered and unordered elements were deprecated in HTML 4 and it is now recommended that all list styling is done through the CSS Style Sheet.

You can list ordered list items by decimal numbers, lowercase and upper case alphabetic letters and lowercase and uppercase Roman numerals by using CSS. You can also change the value which the list starts from e.g. you could start your list at number 10 instead of 1.

Using CSS you can display unordered list items by discs, squares, circles, bullets and much more. It is also possible to list items using an image therefore how you display your list is limited only by your imagination.

Ordered and Unordered ListsOrdered and Unordered ListsOrdered and Unordered ListsOrdered and Unordered Lists

To list items in ordered and unordered lists you use the List Item (<li>) element.

Here is an example of an ordered list:

<ol>

<li>Apples</li>


By Kevin Muldoon


<li>Bananas</li>

<li>Grapes</li>

</ol>

This will display:

1. Apples 2. Bananas 3. Grapes

Apart from the containing element being <ul> instead of <ol>, unordered lists work in exactly the same way as ordered lists.

<ul>

<li>Apples</li>

<li>Bananas</li>

<li>Grapes</li>

</ul>

This will display:

• Apples

• Bananas

• Grapes

By using CSS, unordered lists can be so much more than just bullet points and squares. Most designers use lists to display information on sidebars, footers and the navigation menus.

Definition ListsDefinition ListsDefinition ListsDefinition Lists

Definition lists work slightly different from ordered and unordered lists. Instead of just listing an item, you have to define it and then describe it. You do this using the Definition Term (<dt>) and the Definition


By Kevin Muldoon


Description (<dd>).

Here is an example of a definition list:

<dl>

<dt>Apples</dt>

<dd>A tree fruit which originated from Central Asia.</dd>

<dt>Bananas</dt>

<dd>A popular fruit which are a great source of

potassium.</dd>

<dt>Grapes</dt>

<dd>A true berry and the main ingredient of wine.</dd>

</ul>

This will display:

Chapter 6: Hyperlinks

Linking is a very important aspect of blogging. You link to great articles you have found, you link to friends and families and you link to other pages on your own blog. It is very easy to link to someone in a blog post using the WYSIWYG editor but, as you will soon find out, it’s incredibly easy to do in HTML too ☺

The anchor <a> HTML tag allows you to create a hyperlink on your blog. It is always used with the attribute href. Any text or images which are placed between the opening and closing anchor tag will be hyperlinked to the destination defined by the href attribute.

A basic HTML link looks something like this:


By Kevin Muldoon


<a href=”http://www.yourblog.com”>Visit My Blog</a>

Not only can you link to websites, you can link to files, images, email addresses and to a section of the current page!

If your link text is not very descriptive then it can be useful to use the attribute title. The title attribute helps with accessibility and is worth using in your navigation menu links.

<a href=”http://www.bloggingtips.com” title=”Blogging

Tips Home Page”>Home</a>

The Email LinkThe Email LinkThe Email LinkThe Email Link

Most blogging scripts let you easily add a contact form because it reduces spambots from finding your email address. However, many bloggers still prefer to place a direct link to their email on their blog.

Creating an email link in HTML is incredibly easy, all you have to do is use mailto: before your email address.

A basic email link would look something like this:

<a href=”mailto:[email protected]”>Email Me</a>

If one of your blog readers clicks on the ‘Email Me’ link above their chosen email program would create a new email message with the ‘To:’ field already filled in.

It is also possible to email multiple people by separating recipients with a comma.


By Kevin Muldoon


<a href=”mailto:[email protected],

[email protected]”> Email Me</a>

We can extend this even further by placing a question mark (?) at the end of our email link.

• Cc: We would use cc=email address

• Bcc: We would use bcc=email address

• Subject: We would use subject=subject

• Body : We would use body=message body

Here is the code for copying in a blog partner in an email and pre specifying the email message title:

<a href=”mailto:[email protected]?cc=

[email protected]&subject=Blog Feedback”>Email

Me</a>

Note, the ampersand (&) is used to separate different sections after the question mark.

LinkLinkLinkLinkinginginging within a pag within a pag within a pag within a pageeee or document or document or document or document

It is sometimes necessary to link to a different part of a web page or document. This is particularly helpful with pages with large amounts of text. You can do this with HTML be using what is known as a named

anchor.

Websites like Wikipedia frequently use named anchors at the top of a


By Kevin Muldoon


page to link to different sections of the content. It is frequently used in blogs to link to the top of the page. You may have come across a ‘return to top’ link at the bottom of a blog page before which sends you back to the top of the page.

To use a name anchor you need to do two things:

• Define where you want the anchor to link to.

• Link to the anchor.

To define a name anchor you need to make use of the ID attribute:

<a ID=”name”></a>

This anchor link will not be shown anywhere on your web page, you are simply telling the browser that you would like to link to this area later. Therefore there is no need to place any text within the link.

To link to your anchor you need to place the hash tag (#) in front of the anchors name. So to link to the anchor which I defined before I would use:

<a href=”#name”>Link Name</a>

If you would like to place a link in your footer to the top of a page all you need to do is add <a ID=”top”></a> just after the <body> tag in your template and <a href=”#top”>Return To Top Of Page</a> in your footer somewhere. Alternatively, if you use a CSS identifier for the structure of your header, you can link to that.

You can also link to specific areas of a different page using anchors. For


By Kevin Muldoon


example, if your about page has a terms and conditions area you could link to it directly by placing <a ID=”terms”></a> at the top of the terms and conditions section. You could then link directly to this area using www.yourblog.com/about#terms.

Opening Links In A New Window Or TabOpening Links In A New Window Or TabOpening Links In A New Window Or TabOpening Links In A New Window Or Tab

You used to be able to set links to open in a new tab or window using the deprecated attribute target (eg. target=”_blank”, target=”new” etc). However, it is not advisable to use these tags anymore, not least because it removes control from the web visitor.

It is possible to open a link with a new tab using JavaScript but since many people turn this feature off, it’s not a great option.

The World Wide Web Consortium (W3C) doesn’t recommend popping up new windows for any link. In their Web Content Accessibility

Guidelines 1.0 article they state:

“Changing the current window or popping up new windows can be very disorienting to users who cannot see that this has happened.”

Forcing links to open in a new browser window can also be frustrating for those who browse the web using portable devices such as mobile phones. Since most modern browsers allow users to open links in a new tab or new window, I don’t believe there is any real need to force links to open in a new tab or window anyway.

Chapter 7: Images

Images are a quick and easy way to make our blogs easier to navigate, look more professional and improve our blog posts. You can add an image to a page with HTML by using the image tag <img>.

The basic code for displaying an image is:

<img src=”location of image” alt=”description of image or

link location”>

You will notice that the image tag does not require a closing tag.

The src and alt attributes are required in all images. SRC is the attribute which you use to link to the image location. Therefore you can link


By Kevin Muldoon


locally using <img src=”logo.gif” alt=”Welcome To My Blog!”> or <img src=”/images/logo. gif” alt=”Welcome To My Blog!”> or directly using <img src=”http://www. yourblog.com/images/logo. gif” alt=”Welcome To My Blog!”>.

Alt defines the alternate text of an image. It is the alt text you see when you hover over an image and it’s what is shown when you switch images off in a browser (and therefore is seen by search engines too). Make sure the alt text for your images are descriptive (excluding design images).

Popular attributes like border and align have been deprecated in HTML 4.01 in favour of CSS styling however the width and height of an image are still defined within the image element.

• width: Defines the image width in pixels.

• height: Defines the image height in pixels.

Here is another look at our basic HTML code for an image:

<img src=”logo.gif” width=”300” height=”75” alt=”Blog

Name”>

Linking With ImagesLinking With ImagesLinking With ImagesLinking With Images

Turning an image into a link is incredibly easy. All you have to do is place the image element within the anchor element. In effect, you are


By Kevin Muldoon


replacing the link text with your image details.

<a href=”http://www.yourblog.com”><img src=”logo.gif”

width=”300” height=”75” alt=”Blog Name”></a>

It is important to make sure that you nest the image inside of the anchor link correctly. Remember, things can get a little messed up when you close HTML tags in the wrong order!

Image TypesImage TypesImage TypesImage Types

The three most popular image formats are:

• GIF (Graphics Interchange Format): Gifs are suitable for drawings and blog template images. They are small in file size, allow transparency and can be animated too

• JPG / JPEG (Joint Photographic Experts Group): Jpegs are suitable for photographs. Images in jpeg format will be displayed in a higher quality than gifs but due to the larger file sizes, gifs should still be used in your blog design.

• PNG (Portable Network Graphics): Pngs (prounounced ‘pings’) is the newest image format around and offers a higher quality than gif files. They can be transparent however they cannot be animated.

Chapter 8: Tables

Tables are not widely used to construct the design of a website anymore due to the development and implementation of CSS (particularly the use of divisions) so it’s doubtful if you have come across tables before in a blog design. However, tables remain one of the most popular ways to display information on a page.

Have a look at a basic HTML table below:

<table>

<tr>

<td>1</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>4</td>

</tr>

</table>


By Kevin Muldoon


This produces the following table:

1 2

3 4

The tags used in our example are the most important tags used in the table element:

• <table>: This defines the table element.

• <tr>: This defines a table row.

• <td>: This defines a table cell.

The table element has several attributes which let you control how the table is displayed, the most common ones being:

• width: Defines the width of the table in pixels or as a percentage of the content area the table is placed in.

• border: Defines the border of a table in pixels.

• cellspacing: Defines the spacing between cells in pixels or as a percentage.

• cellpadding: Defines the spacing within cells in pixels or as a percentage.

• summary: Lets you define the purpose of the table.


By Kevin Muldoon


We can now use these attributes to improve our table:

<table width=”80%” border=”0” cellspacing=”5”

cellpadding=”5” summary=”An example table”>

<tr>

<td>Row 1 | Cell 1</td>


</tr>

<tr>



</tr>

</table>

You can define a header for a data cell using the th element. Most browsers align the contents of a th element to the centre of the cell and make the text bold.

Here is an example of the th element being used:

<table border=”0”>

<tr>

<th>Cell 1 Header</th>

<th>Cell 2 Header</th>

</tr>

<tr>



</tr>

<tr>



</tr>

</table>

This would output something like:


By Kevin Muldoon


Cell 1 Header Cell 2 Header

Row 1 | Cell 1 Row 1 | Cell 2

Row 2 | Cell 1 Row 2 | Cell 2

When using table headers, it is worth using the attribute scope. You use scope="col" for a column heading and scope="row" for a row heading. This is beneficial from an accessibility point of view as it tells the screen reader what the heading is for ie. a row or column.

The caption element is another useful HTML feature which lets us place an aligned caption at the top of a table. If you use it, it has to be the first element used after the opening table tag i.e. directly after <table> and before other elements like table rows.

<table>

<caption>A table to show where cell and row information

is placed</caption>

<tr>

<td>1</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>4</td>

</tr>

</table>


By Kevin Muldoon


Spanning Columns & RowsSpanning Columns & RowsSpanning Columns & RowsSpanning Columns & Rows

It is possible to make data span across 2 or more columns or rows. To span information across more than one column you use the colspan attribute. This can be used with cells and cell headers (i.e. <td> and <th>).

Here is an example of colspan being used in a table:

<table border=”0”>

<tr>

<th colspan=”2”>Cell Header</th>

</tr>

<tr>

<td>1</td>

<td>2</td>

</tr>

</table>

This would produce the following:

Cell Header

1 2

The rowspan element is the attribute which is used to span content over a number of rows. As with colspan, this can be used with cells and cell headers.

Colspan is frequently used with rowspan within templates in order to present information in a


By Kevin Muldoon


specific way.

The code below was used to design the table on the right. Copy the code into your test.html page and and change some values to get a better understanding of how tables work.

<table border="1">

<tr>

<th rowspan="3">Dogs</th>

<td>Greyhound</td>

</tr>

<tr>

<td>Collie</td>

</tr>

<tr>

<td>Spaniel</td>

</tr>

<tr>

<th colspan="2">Cats</th></tr>

<tr>

<td rowspan="2">Tabby</td>

<td>Siamese</td>

</tr>

<tr>

<td>Persian</td>

</tr>

</table>

I hope this chapter has given you a basic understanding of HTML tables and how they can be used to display information on a web page. Beginners sometimes make mistakes when they first start using tables however if you take the time to mess around with them in your test page, I have no doubt that they will become second nature to you.

If you would like to develop tables even more, I recommend doing some research on some of the lesser used table elements listed below:


By Kevin Muldoon


• colgroup: Defines a column group in a table.

• thead: Defines a group of header rows in a table

• tbody: defines a group of data rows in a table

• tfoot: defines a group of footer rows in a table.

If you would like to style your tables and present them in a more appealing way to your blog readers, you should look more into CSS since attributes like bgcolor have been deprecated (specifically how tables and CSS work together) ☺

Chapter 9: Additional HTML Information

In this chapter I will talk about some other HTML related topics which I have not discussed in detail up to this point.

Character EntitiesCharacter EntitiesCharacter EntitiesCharacter Entities

There are thousands of character entity references in HTML. These entities allow you to display thousands of letters, symbols, mathematical symbols, characters and much more.

The numeric HTML reference for all of these entities is &# followed by a number followed by ;. Each character/symbol also has a character


By Kevin Muldoon


entity reference. For example, to add a non-breaking space to a document you can use or .

Commonly used entities include $ ($),{(€), £ (£), © (©),< (<), > (>) and @ (@).

There are thousands of entities available for different languages and currencies. If you would like to see the main list (255 entities) for English speakers, please refer to http://www.w3.org/MarkUp/html3/latin1.html.

CommentingCommentingCommentingCommenting

Like most programming languages, HTML allows you to add comments in order to document your code. This can be very helpful when going back to HTML code at a later date or when you are designing for someone else.

To add a comment in HTML you use:



As per the official W3C documentation:

‘White space is not permitted between the markup declaration

open delimiter("<!") and the comment open delimiter ("--"),

but is permitted between the comment close delimiter ("--")

and the markup declaration close delimiter (">"). A common

error is to include a string of hyphens ("---") within a

comment. Authors should avoid putting two or more adjacent


By Kevin Muldoon


hyphens inside comments.’

Since you cannot use a string of hyphens within a comment, comments cannot be nested like other HTML elements.

It is good practice, particularly when first learning HTML, to document the major areas of your design (for example: ). Please be careful to open and close comment elements correctly. Failing to do so could result in large parts of your page not being interpreted by the browser because the code has been commented out.

ValidationValidationValidationValidation

Throughout this e-book I have spoke about code validation and deprecated HTML elements (i.e. elements which are not valid in HTML 4 but still work in most browsers).

I think it is very important for anyone learning HTML to be aware of what is valid as it will serve them well for the future as browsers stop supporting deprecated elements. You can validate any page on the web or uploaded file at http://validator.w3.org/. This official validator will tell you what errors are there and why.

Code validation is something that many purists want on the web so that web pages are displayed correctly on all browsers and devices. It also takes the right steps towards an accessible website and valid code will also ensure you don't put up any road blocks to search engine spiders as they read through your pages


By Kevin Muldoon


HTML VS XHTMLHTML VS XHTMLHTML VS XHTMLHTML VS XHTML

In January 2000 the World Wide Web Consortium (W3C) recommended the use of XHTML. XHTML 1.0 was, according to XHTML 1.0 specification, a ‘reformulation of HTML 4 as an XML 1.0 application’.

HTML 4.01 and XHTML are virtually the same except the latter is stricter. There's not a lot more that you can do with XHTML that you can't do with HTML. Code is case sensitive, you cannot leave out a closing tag and attributes always have to have values.

In July 2009 W3C announced that it was pulling support for XHTML 2 in favour of the upcoming HTML 5.

Many blog templates are coded in XHTML so you will probably see the differences that I mentioned above in your blog theme.

Please remember that HTML 4.01 is the current version of HTML.

Chapter 10: A Brief Note on CSS

In this chapter I will give you all a brief introduction to what CSS is and give you a look at how it integrates with HTML.

Cascading Style Sheets has taken on most of the design aspects that HTML used to take care of and has made web pages easier to navigate and easier to modify. Essentially, they allow designers to define style and formatting details and apply those details to HTML using what is known as selectors.

Styles can be defined inside the body element though they are usually defined in the head element, or more commonly, in an external style sheet.


By Kevin Muldoon


A SimpA SimpA SimpA Simple Example Of CSSle Example Of CSSle Example Of CSSle Example Of CSS

Lets look at the introduction of this chapter and see how we can change things with CSS. Here is the HTML code required to display this chapters introduction

<h1>A Brief Note On CSS</h1>

<p> In this chapter I will give you all a brief

introduction to what CSS is and give you a look at how it

integrates with HTML.</p>

There are two different HTML elements here: the header element and the paragraph element. We want to change how both areas are displayed.

We can style these elements with CSS within the body element (i.e. within the code itself).

<h1 style=”font-family:Verdana;font-

size:large;color:#ff0000;font-weight:bold;”>A Brief Note

On CSS</h1>

<p style=”font-family:Geneva;color:#000000;”> In this

chapter I will give you all a brief introduction to what

CSS is and give you a look at how it integrates with

HTML.</p>

In the above example I have used CSS to make the headline use the Verdana font, be large in size, red in colour and bold. The content within the paragraph will have the Geneva font instead and be printed in the colour black.

Linking To Your CSS StylesLinking To Your CSS StylesLinking To Your CSS StylesLinking To Your CSS Styles


By Kevin Muldoon


The beauty of CSS is the ability to save you time. It goes without saying that most people want the text in their main content area to look the same on every page. So instead of defining it each time you want to use it, you just need to define it once in the head element or in an external style sheet.

To embed your styles directly within the head element of your page, you would place this code between the opening and closing <head> tags.

<style type=”text/css”>

Place your css code here!

</style>

In our example, we would add the following to our head element:

<style type=”text/css”>

h1 {font-family:Verdana;font-

size:large;color:#ff0000;font-weight:bold}

p {font-family:Geneva,sans-serif;color:#000000;}

</style>

This means that whenever someone uses the H1 or paragraph tags, the text will be displayed according to what we specified in our style.

The number of CSS styles quickly grows when you are designing a web page or blog template. Therefore, it is advisable to place all of your CSS styles in what is known as an External Style Sheet. You simply save all of your styles in a file with the extension .css and then link to it using:

<link rel=”stylesheet” type=”text/css” href=”style.css”>

The CSS code may still look a little daunting but it is relatively easy to follow once you break it down.


By Kevin Muldoon


Each CSS definition has a selector and a declaration block. Within the declaration block are properties and their corresponding values.

Selector Property Value Property Value

p font-family geneva color #000000

Common HTML elements are styled using what is known as type selectors (body, h1, h2, p etc) and self created styles are known as class selectors.

In CSS it is also possible to assign 2 or more selectors to the same declaration block. All you need to do is separate the selectors with a comma. For example, we could have defined the style of all of our headers with:

h1, h2, h3, h4, h5, h6 {font-family:Verdana;font-

size:large;color:#ff0000;font-weight:bold}

Difference between ids and classesDifference between ids and classesDifference between ids and classesDifference between ids and classes

Class selectors (styles which you create yourself) are usually linked to in your blog template with divisions <div> (and occasionally spans <span>). I touched upon this briefly in chapter 4.

If you are look at your blog template then you will see lots of <div> elements. Some of which use classes and some of which use IDs e.g. <div class=”commentarea”> or <div id=”sidebar”>.


By Kevin Muldoon


Classes and IDs (known as identifiers) can be used with a type or a class selector however there are some small differences between them:

• An ID identifier is unique and can only be used once in a page whereas a class can be used as many times are needed.

• You can use multiple classes within the same element eg. <p class=”big” class=”green”> and you can also use an identifier and a class in the same element eg. <p id=”firstparagraph” class=”big” class=”green”>. However, an identifier can only be used once in one element on any page.

• Both selectors are defined slightly differently in CSS. Class selectors begin with a period (e.g. .green) and ID selectors begin with a hash tag (e.g. #firstparagraph).

• An identifier can be used as a name anchor link therefore they allow you to link to specific areas of a page. They work the same way as traditional HTML name anchors in this respect.

Blogging scripts use identifiers frequently to direct people to a certain area of a page. For example, WordPress uses identifiers to send visitors from the home page of a blog to the comment area.

Click on the comment link at the front of any WordPress powered blog and you will be taken to something like www.yourblog.com/blog-post#comments if there are comments and taken to the comment submission form at www.yourblog.com/blog-post#respond if there aren’t any.


By Kevin Muldoon


CSS OverviewCSS OverviewCSS OverviewCSS Overview

Just like any new language, CSS can seem a little daunting at first. Though once you understand the basics of how selectors and declaration blocks work, you will soon appreciate the beauty of Cascading Style Sheets.

As a blogger, it is not necessary to learn CSS to be successful. However, I strongly believe that all bloggers should learn the basics of HTML and develop a general understanding of what CSS is and how it works so that they can do simple modifications to their blog design.

It just isn’t practical to pay a designer for assistance every time you want to add a link to your sidebar or change an image in your blogs footer as these tasks only take seconds to do and are incredibly simple.

Chapter 11: Overview

I hope that you have enjoyed this e-book and it helps you understand the HTML language better. At the very least, I hope that you can now do basic modifications to your blog design without asking for help ☺

Although I have discussed most major aspects of HTML in this e-book, there are still a lot of things which I did not cover. For example, it just was not practical to list all of the attributes of every HTML tag or explain advanced tables in detail.

And although forms (<form>) are something you need to understand if you want to build a contact form for a website, it’s not something which I believe the average blogger needs to learn since most blogging scripts


By Kevin Muldoon


come with an integrated contact form already (or at the very least, a plugin is available to add a contact form).

If you haven’t done so already, I encourage you all to download and print off our HTML Cheat Sheet for easy reference of the most common HTML elements.

If there is a blogging related topic that you would like covered in another e-book, please let us know via our blog or forums. To see a full list of Blogging Tips books, please visit http://www.bloggingtips.com/books/.

I wish you all the best of luck with your blogging careers and I hope that this e-book will help you take your blog to the next level!

Kevin Muldoon

www.bloggingtips.com


By Kevin Muldoon


Community SupportCommunity SupportCommunity SupportCommunity Support

If you finding any aspect of HTML difficult then I encourage you to drop by the Blogging Tips Forums for hands on support from experienced bloggers, webmasters and designers.

It’s a great place to hang out with like minded bloggers and best of all, registration is free!!


By Kevin Muldoon


HTML Reference & Tutorial WebsitesHTML Reference & Tutorial WebsitesHTML Reference & Tutorial WebsitesHTML Reference & Tutorial Websites

Below you will find a list of good HTML reference and tutorial websites which will teach you more advanced HTML techniques and help you understand the language better.*

* In no particular order

http://www.w3.org/html/ - World Wide Web Consortium (W3C)

http://validator.w3.org/ - Official W3C validation page.

http://www.htmlcodetutorial.com/

http://www.htmlgoodies.com/

http://htmldog.com/

http://reference.sitepoint.com/html

http://www.w3schools.com/html/DEFAULT.asp

http://www.tizag.com/htmlT/

Release History

Initial Release : 20th July 2009

Technology

Basic html an-introduction-to-html-for-bloggers