Posts Tagged ‘Html Document’

10
Jan
2010

How to center a header, with HTML and CSS

3 Comments

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
06
Oct
2008

Five Techniques to Increase Web Traffic

1 Comment

Getting people to your website is critical but those people have to be the right people, so how do we increase website traffic while also ensuring the people that we’re attracting are the right people? Let’s start by assuming that honesty, integrity and quality are the three most important parts of a website and building from there.

Titles – Proper Labels Help Increase Traffic

Page titles are often overlooked in our zeal to build web traffic but by most reports they are the most important single piece of the puzzle. Your page title in located within the section of your HTML document, between the <TITLE></TITLE> tags and is piece of text displayed at the top of your web browser, within the chrome. Remember, search engines (such as Google) are robots, they use a series of math formulas to calculate the importance of your page, one of the factors they look at is the title of your page.

Make sure your page title is related to the content that you’re displaying and that the words you’ve used to display your content is key word rich. My title for example is Five Techniques to Increase Web Traffic, this is both descriptive for the article that I’ve written as well as a common search phrase in Google.

PermaLinks – Your Document Path

The second part of the puzzle for increasing your page traffic is a little known trick called PermaLinks. Usually when people write a post they save the file in HTML as something like traffic.html and store it on their website. Even my favorite publishing tool WordPress saves (by default) a document with the URL ?p=## to represent the article but what search engines are looking for is help to understand your post and what it really is.

PermaLinks come to the rescue by converting your page title Five Techniques to Increase Web Traffic to an effective path used by web browsers to display your article. In this case, my PermaLink slug is five-techniques-to-increase-web-traffic which clearly demonstrates to Google what my page is about. By using PermaLinks, Google (and other search engines) now know that my web page is located at http://www.thisismyurl.com/five-techniques-to-increase-web-traffic/ and as such, this page must have something to do with Five Techniques to Increase Web Traffic.

Headers – Using HTML for what it was made to do

A few weeks back I was in a meeting with some web designers and one young designer mentioned using the <center> tag. After I finished bludgeoning him with an available laptop, I got to thinking how amazing it is that 15 years after the rise of the Internet people still use the wrong tags. Headers are the same, they have intrinsic value but most people have no idea how (or why) to use them.

Again, let’s remember that Google is a computer and that computers are only as clever as the people who made them, then it stands to reason that the people who programmed Google followed some fairly basic rules. One such rule was the purpose of header tags in developing pages. According to that logic then, <H1>-<H6> must have a hierarchal value structure, determining the importance of content on a document.

Simply put, something in the <H1> tag must, according to HTML publishing structure be more valuable in determining what a document is about that an <H2> or <H3>. So, if you want traffic sniffing robots to know what your page is about, use the power of heading tags to help determine it.

File Tags – From Names to ALT’s

We’ve already covered the fact that the actual name (or path) of your document is important but what about the rest of your page content? Surprisingly, it’s equally critical.

Images for example should have filenames that describe the content. For example, instead of uploading an image and calling it P0234234.jpg, calling it one-tree-in-winter.jpg will assist robots in understanding and indexing your filename. Should you page be about One Tree In Winter, these robots will truly understand the relevance of the image. To add to this, placing an ALT tag in the image tag “One Tree In Winter” will further help and ensure your website is accessible to the blind.

Anchor tags are another source of information for search engines, include a title in your hyperlink which describes the target page and you’ll increase the value of the link for robots.

Content – The true king of SEO

With all this said and done, what is the best way to increase traffic to your website? Quality content.

Tags: , , , , , , , , , , , , , , , , , , ,
Posted in Web Site Advice

read more