Posts Tagged ‘h1’

10
Jan
2010

How to center a header, with HTML and CSS

1 Comment

Here’s a quick tip that’ll help you centre a heading using nothing more than a little bit of HTML and CSS.

First, in a new HTML document (which you can create using something as simple as NotePad or Textedit simply by saving your text document with the .html extension), you’ll want to create a new heading. You can do it by including the following code in your document:

<h1>Hello World</h1>

This text adds a standard heading to your website but what if you want to centre the heading on the page? Easy! Let’s modify the standard <h1> tag to apply a style sheet directly to it:

<h1 style=’text-align:center;’>Hello World</h1>

You’ll notice that I don’t need to setup an individual style sheet to accomplish this task, simply adding the style attribute will allow me to make the changes to this one specific item. If I want to be able to centre multiple items, I could use a style sheet class to accomplish the task:

<style>
.center {text-align: center;}
</style>
<h1 class=’center’>Hello World</h1>

Note the class is represented in the style sheet as a period (.) plus the name of the class. Similarly, if I wanted to assign the centre to all occorances of the <h1> tag I could use:

<style>
h1{text-align: center;}
</style>
<h1>Hello World</h1>

Tags: , , , , , , , , , , , , , , , ,
Posted in HTML Programming

read more
17
Jul
2009

What is HTML?

No Comments

HTML is an acronym for HyperText Markup Language, the basic publishing language of the Internet.

Every computer document needs a way to be read and understood by a computer program, for example Excel spreadsheets are stored in a special file with the extension XLS which  stores all the rows, columns, headers, footers, special cells, math equations etc for Excel to read and understand. Likewise, the HTML file format stores everything an Internet capable device needs to know to read and interpret a web document such as a web page.

There are actually a number of types of HTML, the first was created by Tim Berners-Lee in 1980 and composed of 22 tags, these special tags allowed users to define the paragraphs and other structural elements of their document as well as some basic elements for leaving comments and document items such as the title.

Although it’s been almost 30 years since the first standard was published, most of the basic elements of HTML are still used. For example, to give your document a title we still use the <title>My Title</title> tag combination and to form a paragraph, the <p>This is my paragraph</p> tags are used. In a lot of ways, the simplicity of HTML is what has allowed it to be so expandable.

You may have noticed that the examples above use an opening <p> and closing </p> tag to designate objects in the HTML code, this is fairly common and easy to understand principle. Essentially every element on a page should have both an opening and a closing tag to show where it begins and ends.

Common examples of HTML block tags are:

  1. The paragraph – <p>
  2. Unordered (Bullet) Lists – <ul>
  3. Ordered (Numbered) Lists – <ol>
  4. Headings (there are several) – <h1> … <h6>

While the above tags allow us to layout a basic HTML document such as a resume, it’s important to note that there are some additional basic formating tags needed as well. For example, if you would like to bold a word, you will need to use the <b>bold</b> tags.

Speaking of which, since HTML has evolved a long way we can sometimes achieve the same effect with different tags. For example, <b>bold</b> and <strong>strong</strong> have the same effect in most web browsers. Why the difference? The word bold refers to a method of formating, which implies the purpose of HTML is to affect appearance, while strong implies that the selected text be more significant than the surrounding text without assuming design elements.

Let’s look at another example, the HTML formating tag <i>italics</i> forces a web browser to display text as italics but <em>emphasis</em> has the same default effect. While they both force the document to appear the same (with italic text) this is not always the desired effect. Perhaps we would like a word to appear darker or lighter than the words around it when it requires emphasis. So a word that we would assume to be italics is in fact displayed as bold, depending on the formating instructions of the designer.

To format HTML text, we have several possibilities:

  1. bold / strong – <b> <strong>
  2. italics / emphasis – <i> <em>
  3. pre formatted – <pre>

As time moved forward, many additional tags and functions became supported by HTML as some tags became depreciated, others found themselves being introduced.

Tags: , , , , , , , , , , , , , , , , , , ,
Posted in HTML Programming

read more
14
Jun
2009

The Basics of Hotel Website Marketing

No Comments

Fresh Post at Getaway Graphics: The Basics of Hotel Website Marketing

These days every hotel needs to be keenly aware of how to market themselves online and the first rule is keywords. If you don’t know the first thing about keywords, don’t worry you’re not alone and that’s your key strength because very few people in the hospitality industry are taking the time to use effective keywords in their online marketing.

Read More

Tags: , , , , , , , , , , , , , , , , , , , , , , , ,
Posted in getawaygraphics.com

read more
30
May
2009

What’s the biggest mistake you’re making on your website?

3 Comments

We all make mistakes but when it comes to our online web businesses, it’s important that we fix our mistakes before they become crippling.

Keywords

A keyword (or Tag in WordPress lingo) is a word or phrase intended to help support the content that you’re reading on a specific page, not the entire website. People often overload pages with keywords which have no relevancy to the page they’re designing with the hopes that Google will fall for the trick. Google will not fall for it. In fact, there’s plenty of evidence to show that Google will punish you for using unrelated keywords, which is mistake #1 on most websites.

Boring Content

Content matters, it’s a silly reality but you have to stop thinking about your visitors as a funny little line in an analytics program and begin caring about them as people. Every person who comes to your website should feel they are better off after reading your content. If they don’t you’re wasting their time and they will not come back, so write better content and watch your website traffic increase dramatically.

Failing to Reach Your Market

The old days of building a website and assuming people will find it are over (if they ever existed at all), website owners  need to tell people about their website and promote it everywhere. Make sure your site address is on your business cards, marketing materials, the side of your building, company vehicles, all of your online profiles and in prominent newsletters, magazines etc. Remember, if you don’t tell people about your website they won’t know it’s there.

Poor Titles

Writing for websites is easy, make sure you have a catchy title that will help people determine if they want to read your piece and then make sure it’s been properly placed in your HTML code. A great title needs to be in two places on a website, first it has to be in the <title></title> tags of your page but it should also be reflected in your <h1></h1> tags in the body of your content. This helps search engines know that your page is about your title by labeling the document but also by placing the title in an easy to read and powerful tag within your text.

Poor Structure

Web pages are a lot like books, they need structure for people to be able to read them. In this case, you want computer software such as FireFox, Safari and IE to read your pages as well as Google, MSN and Yahoo right? Well then, you’d better make sure your page is coded to their standards! Luckily, the W3C has a wonderful tool to help you ensure your page can be properly read.

Stale Content

If you’ve follow my advice, you know that your visitors are people not mindless data points on a graph so you have to respect that they simple won’t come back to your website if you don’t take the time to post anything new there. Work out a schedule that you can keep and write a blog posting at least once each week (more if you can) to provide your audience with fresh content.

Be Organic

While it’s acceptable and even encouraged to buy ads on services such as Google be careful that you’re building your client base through organic methods, not paid advertising. Google looks very poorly on paid link placement and has a reputation for punishing people excessively for buying links. If you really want to build your websites online reputation, do it honestly and take a little more time, in the end it’ll get you where you need to be.

Be Original

The web is a very big place and people have a lot of choice when it comes to content, so try to be original and write content people want to read. Ask yourself why you read specific websites and learn to improve your content to ensure people have a reason to come back. Once you have unique, original content others will start linking to your content because you’re an authority.

SEO is Irrelevant

Would you rather optimize your store for the local newspaper or for your customer? Stop looking to optimize your content for search engines, they’re irrelevant. Don’t get me wrong you have to make sure your content can be read by them and that your website is compatible with Google but stop treating your website content like it needs to be written to appeal to the big search engines and instead, write your content to appeal to people like your mother, your father, your kids and your neighbors. After all, they’re the ones who are reading your content … not a robot. 

Learn to be co-operative

The biggest mistake people make? Failing to ask other website owners to link to them. Search engines rankings work on a system called PageRank, the way PageRank works is by counting the number of links from other websites to your website, the more links you have coming into your website … the higher you rank on Google. If you want to be successful on the web, ask your friends and family as well as other related businesses to link to you.

Tags: , , , , , , , , , , , , , , , , , , , ,
Posted in Search Engine Optimization

read more
23
Apr
2009

How to center a header in HTML without using the center tag

5 Comments

The HTML <center> tag is one of those funny little tags left over from the early days of websites when designers often mixed the publishing of web content with design. These days, it’s much easier to separate content and design by using effective style sheets.

To center any text in HTML and CSS, we can simply add a couple of lines of code to our stylesheet file as follows:

[source lang="css"].center {
text-align:center;
}[/source]
This little code snippet will center the content within a block tag (such as a <p> or <h1>) but only if it already knows the width of the object you’re centering too! To get around this, we can simply add the display:block tag to our CSS:

[source lang="css"].center {
text-align:center;
display: block; 
}[/source]
Now our code knows to center text.

To apply it to our HTML code, you need to simply apply the code to an object as a class. For example let’s turn a heading into a centered heading by applying the new class like so:

[source lang="html"]
<h1 class=’center’>This is my header.</h1>
[/source]

 

It is of course also possible to simply align all <h1> tags to the center by using the code:

[source lang="css"]h1 {
text-align:center;
display: block;
}[/source]

What about converting existing pages?

Luckily if you already have a bunch of documents which use <center> tags there’s fairly simple fix for you to clean up those files. Using a tool like Adobe Dreamweaver you can do bulk search and replace functions across multiple files.

The replace is a two step process. (please backup your site before doing this)

First, let’s replace the phrase </center> with </div> across the entire site. This will change the closing tag (remember all tags come in pairs right?) to be a normal div tag.

Now, let’s replace the phrase <center> with <div class=’center’> to turn the opening tag into a div tag with the center class assigned.

You can now add the .center details to your CSS file and presto, your website is now using the proper center formating!

Tags: , , , , , , , , , , , , , , , , , , , , , ,
Posted in HTML Programming

read more
03
Dec
2008

What is the most important part of your web page?

2 Comments

In the Cider House Rules, Author Rose challenges Homer with the simple question “And you know what your business is, boy?”, actually it was as much a statement as a question but the point was that Author Rose (played brilliantly by Delroy Lindo) knew what his business was and that Homer did not. 

Most web pages are like young Homer, they don’t know what their business is, which gets them into trouble.

Yesterday I let you look under the hood of my website and see how I used the <h1> and <h2> title tags to tell Google what was important, while using Cascading Style Sheets to control how it appeared to my audience. This allowed me to show my readers a well structured technical document while ensuring that the marketing value of my page was also respected. Today, I want to spend a few paragraphs enforcing the importance of document hierarchy in online marketing and explain why structuring your document is important for making money on the web.

A web page is made up of two primary parts, the <head> and the <body>. These two areas have specific purposes and can most easily be understood by common users by explaining that the <head> is read by the browser but not displayed to the site visitor while the <body> is what we see on a web page. More accurately, the <head> of the document stores information relevant to computers, while the <body> is for people.

Within the <head> of the document is stored a <title> tag which contains the phrase displayed at the very top of a web browser, it is literally the <title> of the document which has significant implications with regards to your website and brings us back to the original question: What is the most important part of your web page? Both from a structural and a marketing perspective your title must not simply reflect the content of your web page but must broadcast it like a triumphant banner in moral war.

Your <title> tag is your business. It is what Google and all incoming links believe your web page is about. If your web page had a Facebook status, it would be it’s <title>. It would Twitter about the title, it’s RSS feed? The title. I hope my point is clear, whatever you have between your <title></title> tags is your most important message on your entire web page, it’s your business. Homer? His <title> was empty.

As for your page <body> there’s an equally important tag in the content displayed to your users. The <h1> tag is by default the biggest, boldest tag in the HTML arsenal for a reason, it commands respect. In the old days, when the web was young and mostly used by academics the <h1> tag was used properly by people. It embodied the very essence of the page because university types used it to encapsulate the most important part of the page, the title. That’s right … the where the <title> tag was used to tell web browsers, robots and search engines what your website was about the <h1> tag was used to tell readers, through document structure what the most critical part of your web page was.

Today, it’s often forgotten that we can use basic document structure to build better web pages. Building web pages to properly reflect the structure of your page content will both help decrease marketing losses and lower the technology budget of companies. Want to know how? Sign up for my RSS feed, or check back next week.

Tags: , , , ,
Posted in Marketing Advice

read more