HTML - The Structure: 2011

http://www.webvanta.com/ebooks/Webvanta-5tips-for-better-sites.pdf

The Visible Headline
Next most important is the visible headline on the page, which should be in an <h1> tag.
We see a number of common mistakes here:
• Pages that have no headline
• Headlines that are in <p> tags, or other tags, which are then styled to look like
headlines, or in images
• Headlines that aren’t explicit enough
Make sure that your page begins with a headline in an <h1> tag. You'll help the search
engines and the human readers. You can style the h1 to look however you want; it doesn’t
need to be visually huge.
Sometimes you want the main headline to be something clever, or cute, that lacks the
keywords you’d like to have in the headline for SEO. In this case, you may want to put the
actual headline in a <p> tag, styled to look like a headline, and then have the SEOoptimized headline below it in an <h1> tag, styled to look like a subhead or an introductory
paragraph.

In writing that headline, keep the site visitor in mind, but make it more explicit than you
might naturally do. This is much the same as for the metadata page title, except that you
may want something shorter on the page.
For example, while you might use "Experienced dog grooming services for Sonoma
County, in Santa Rosa, CA" for the metadata page title, but use "Expert Dog Grooming"
for the h1 tag (the page title that appears on the page).

Now Fill In the Meta Description
The metadata description tag is important not for getting your page listed on the search
results page, but for getting users to click on the result if they do see it.
The search engine will show your description as the two lines of text below the headline; if
you don’t provide a meta description, it will grab something from the body of your page,
which may or may not be what you want.
The description should be about 150 characters long, since that is what fits in a typical
search listing. Think of it as a teaser that promotes your page. Write it for humans, not for
search engines. But it is helpful to include your targeted keywords, because the search
engine will highlight them, drawing users to your listing.

Don’t Worry About Meta Keywords
The keyword metadata field is not worth worrying about, at least on your first pass. Google
ignores the keywords in this field, because they are too easily abused. (Too many people put
“Britney Spears” in the keywords, for example, not because their page had anything to do
with Britney but because it is one of the highest-volume search terms.) Other search
engines may use them, but you won’t sacrifice much by ignoring them.
This does not mean you can ignore knowing what keywords you are targeting; that is an
entirely different matter. But the place to use keywords is in your page titles, headlines, and
body copy — not in the keywords meta tag.

Links on Webpages:

• The anchor text (the text to which the link is applied) is important. If the link says
“click here”, then that link text tells the search engine nothing about the site being
linked to. But if the link says “San Francisco Hotels”, the text tells the search
engines a great deal.

• Links from many sources have a special attribute applied, “rel=nofollow”. This tells
search engines not to take that link into account. Nofollow was invented to reduce
the link spam on Wikipedia and soon spread to many other sites. So while links
anywhere are good for driving traffic to your site, many links in blog comments and
forums do not help your search rankings

• One-way links (a site that links to you but that you do not link to) are thought to
be more valuable than reciprocal links.

• Google is thought to penalize sites if large quantities of links to your site show up
in a short period of time, especially if the links are identical. This is presumably an
attempt to defeat people with a large network of sites that exist just to provide
backlinks, as well as other “black hat” SEO techniques

You need to solicit links, but you should do so carefully, choosing sites that relate to your
topic and have good search ranking themselves. It is helpful to suggest link text, but vary it
from time to time.
You will get solicitations from random sites asking for reciprocal links. These links are of
little value, and may even hurt your rankings, so just ignore these requests unless the site is
one you would want to point people to anyway.
Getting good links is a slow and time consuming task, but it is one that is essential if you
are going to get sites to rank well on competitive terms. If you have great content that
people share with their friends and blog about, then incoming links may happen on their
own.
If you want to be more proactive, do searches on the terms on which you hope to rank.
Look at what sites rank well, and look for ones that might link to you. If there are
influential blogs, add your comments to their posts regularly. This may not give you useful
links back, but it helps to build a relationship and a reputation.

Wednesday, February 23, 2011

HTML5 & CSS3: Take Your Design to Another Level

http://webdesignledger.com/tips/html5-css3-take-your-design-to-another-level

Monday, February 14, 2011

Progressive Enhancement 101: Overview and Best Practices

http://sixrevisions.com/web-development/progressive-enhancement/#more-4883

Thursday, February 10, 2011

Meta Tags - On Google Webmasters

http://www.google.com/support/webmasters/bin/answer.py?answer=79812

Thursday, January 20, 2011

Notes from HTML Dog - HTML Beginner Tutorial

HTML Tags:

<html>
Is the opening tag that kicks things off and tells the browser that everything between that and the </html> closing tag is an HTML document.

<body>
The stuff between <body> and </body> is the main content of the document that will appear in the browser window.

Attributes
Tags can also have attributes, which are extra bits of information. They look something like <tag attribute="value">Margarine</tag>.

Elements
Everything that is in-between and includes the <body> and </body> tags is the body element.
Evertything that is in-between and includes <title> and </title> is a title element.

head
The head element (that which starts with the <head> opening tag and ends with the </head> tag) appears before the body element (starting with <body> and ending with </body>) and contains information about the page. The information in the head element does not appear in the browser window.

<title>

<p>
The p tag is for paragraph.
Eg: <p>This is my first web page</p>
<p>How exciting</p>
This will create a new paragraph, just like in books.

comment
Eg: 

Emphasis:
You can emphasise text in a paragraph using em (emphasis (italic)) and strong (strong emphasis (bold)). These are two ways of doing pretty much the same thing, although traditionally, browsers display em in italics and strong in bold.
<p>Yes, that <em>is</em> what I said. How <strong>very</strong> exciting.</p>

Line breaks:
Eg: This is my first web page <br />
How exciting

However, this method is over-used and shouldn't be used if two blocks of text are intended to be separate from one another (because if that's what you want to do you probably want the p tag).

Note that because there's no content involved with the line-break tag, there is no closing tag and it closes itself with a "/" after the "br".

Headings:
They are h1, h2, h3, h4, h5 and h6, h1 being the almighty emperor of headings and h6 being the lowest pleb.
(my explanation: space above and below, and text in bold)
Note that the h1 tag is only used once - it is supposed to be the main heading of the page and shouldn't be used multiple times.

h2 to h6 however, can be used as often as you desire, but they should always be used in order, as they were intended. For example, an h4 should be a sub-heading of an h3, which should be a sub-heading of an h2.

Lists:
There are three types of list; unordered lists, ordered lists and definition lists.
ul
The ul tag is used to define unordered lists
Ol
and the ol tag is used to define ordered lists. li
Inside the lists, the li tag is used to define each list item.

Eg: Of a list withing a list
<ul>
<li>To learn HTML</li>
<li>
To show off
<ol>
<li>To my boss</li>
<li>To my friends</li>
<li>To my cat</li>
<li>To the little talking duck in my brain</li>
</ol>
</li>
<li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
</ul>

Links:
An anchor tag (a) is used to define a link, but you also need to add something to the anchor tag - the destination of the link.
The destination of the link is defined in the href attribute of the tag. The link can be absolute, such as "http://www.htmldog.com", or it can be relative to the current page.

So if, for example, you had another file called "flyingmoss.html" then the line of code would simply be <a href="flyingmoss.html">The miracle </a> or something like this.

id (attribute)
A link can also send a user to another part of the same page they are on. You can add an id attribute to just about any tag, for example <h2 id="moss">Moss</h2>, and then link to it by using something like this: <a href="#moss">Go to moss</a>. Selecting this link will scroll the page straight to the element with that id.
The a tag allows you to open the link in a newly spawned window, new tab, same page etc.

<img>
The img tag is used to put an image in an HTML document and it looks like this:
<img src="http://www.htmldog.com/images/logo.gif" width="157" height="70" alt="HTML Dog logo" />
Note that, like the br tag, because the img tag does not have a closing tag, it closes itself, ending with "/>"

src (attribute)
The src attribute tells the browser where to find the image. Like the a tag, this can be absolute, as the above example demonstrates, but is usually relative. For example, if you create your own image and save it as "alienpie.jpg" in a directory called "images" then the code would be <img src="images/alienpie.jpg"...

Width & Height (attribute)
The width and height attributes are necessary because if they are excluded, the browser will tend to calculate the size as the image loads, instead of when the page loads, which means that the layout of the document may jump around while the page is loading.

alt (attribute)
The alt attribute is the alternative description. This is used for people who cannot or choose not to view images. This is a requirement in the latest versions of HTML.

Tables
<table>
Across the worldwide web, HTML tables are used and abused to layout pages. The correct use for tables is to do exactly what you would expect a table to do - to structure tabular data.

The table element defines the table.
The tr element defines a table row.
The td element defines a data cell.

border (attribute)
Eg: <table border="1">

Eg: <table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>

</table>

Forms
The basic tags used in the actual HTML of forms are <form>, <input>, <textarea>, <select> and <option>.

<form>
<form> defines the form

action (attribute)
action attribute tells the form where its contents will be sent to when it is submitted.

method (attribute)
The optional method attribute tells the form how the data in it is going to be sent and it can have the value get (which is default) or post. This is commonly used, and often set to post which hides the information (get latches the information onto the URL).
Eg: <form action="processingscript.php" method="post">

<input>
The input tag is the daddy of the form world. It can take ten forms, outlined below:

1. <input type="text" /> is a standard textbox. This can also have a value attribute, which sets the initial text in the textbox.

2. <input type="password" /> is similar to the textbox, but the characters typed in by the user will be hidden.

3. <input type="checkbox" /> is a checkbox, which can be toggled on and off by the user. This can also have a checked attribute, which would be used in the format <input type="checkbox" checked="checked" />, and makes the initial state of the check box to be switched on, as it were.

4. <input type="radio" /> is similar to a checkbox, but the user can only select one radio button in a group. This can also have a checked attribute, used in the same way as the checkbox.

5. <input type="file" /> is an area that shows the files on your computer, like you see when you open or save a document in most programs, and is used to enable users to upload files.

6. <input type="submit" /> is a button that when selected will submit the form. You can control the text that appears on the submit button (as you can with button and reset types - see below) with the value attribute, for example <input type="submit" value="Ooo. Look. Text on a button. Wow" />.

7. <input type="image" /> is an image that will submit the coordinates of where the user clicked on it. This also requires a src attribute, like the img tag.

8. <input type="button" /> is a button that will not do anything without extra code added.
<input type="reset" /> is a button that when
9. selected will reset the form fields to their default values.

10. <input type="hidden" /> is a field that will not be displayed and is used to pass information such as the page name that the user is on or the email address that the form should be posted to.

Note that the input tag closes itself with a "/>" at the end.

<textarea>
A textarea is, basically, a large textbox.
<textarea rows="10" cols="20" name="comments">Your comments</textarea>

rows & cols (attribute)
It requires a rows and cols attribute and is used like this:
Eg: <textarea rows="5" cols="20">A big load of text here</textarea>

<select>
<option>
The select tag works with the option tag to make drop-down select boxes.

selected (attribute)
Similar to the checked attribute of checkboxes and radio buttons, an option tag can also have a selected attribute, which would be used in the format <option value="mouse" selected="selected">Rodent</option>.

name (attribute)
the form fields need names. So to all of the fields, the attribute name needs to be added, for example <input type="text" name="name" value="Your name" />