stuff.co.nz Logo by HTML+CSS

It's Friday afternoon, I am feeling bored, so spent half hour to built stuff.co.nz logo by pure html+css. It was heaps of fun. Here is the preview and my code, guess left one or right one? From you memory,  don't look at stuff.co.nz!

HTML

<div id="logo">
 <span id="text">stuff<span class="dot first">.</span><span class="domain">co</span><span class="dot">.</span><span class="domain">nz</span></span>
 <ul><li id="r"></li><li id="y"></li><li id="g"></li><li id="b"></li><li id="p"></li></ul>
 </div>

CSS

#logo{font-family:tahoma;font-weight:bold; width:235px;}
 #text{font-size:62px;}
 .dot{font-family:Georgia; font-size:36px; letter-spacing:-2px;}
 .first{margin-left:-7px;}
 .domain{font-size:32px; letter-spacing:-1px;}
 ul{margin: -6px 0 0; list-style:none; padding:0}
 li{float:left; width:45px; height:10px;}
 #r{background-color:#C7221F}
 #y{background-color:#F59900}
 #g{background-color:#007C47}
 #b{background-color:#007DCD}
 #p{background-color:#9C1A87}

How to use HTML Label Tag

One of our readers who enjoys the stuff.co.nz "Opinion Polls", pointing out there's one thing that he find inconsistent - the HTML we are using to provide the poll options does not use the LABEL tag. This is a useful tag that allows a user to click on the text associated with a radio button, with the same effect as if they had clicked on the actual button itself.

First of all, I should say thank you to this user, he is awesome.

It's a usability issue, I actually noticed this issue the other day. But I thought like 99% users would click on the radio button or check box rather than the text, so I didn't bring up this issue. This is something minor but we should do to keep Stuff.co.nz a cutting edge website impression for our users.

Now, I want to detail the mystery of label tag

Continue...

How to use HTML dl, dt, dd tags

Many web developers would love to create web design using table tags. In fact, by using HTML dl, dt, dd tags, you will save on writing more codes and add more semantic value to the content. Whereas table are best use for tabular data, and should not be use in listing data, web form or web layout.

If you are still creating list data using table, look below and compare on how to make your life easier with HTML dl, dt, dd tags.

It may both look identical, but look closely behind the codes.

Continue...

HTML Character set and special characters

Table of printable Latin-1 Character codes

© Copyright W3C

Special characters

If you need a to use a special character, like an accented character or a currency sign, you have to use a special notation. There are two ways to use these special characters:

1. Use the decimal representation, in the format &#nnn;, where nnn is the decimal code of the character.
2. Use a character entity, in the format &ccc;, where ccc is the character string that represents the specific character.

HTML 4.0 supports three sets of special characters:

ISO 8859-1 (Latin-1) characters

Decimal	Character	Example	Explanation
 	 		no-break space
¡	¡	¡	inverted exclamation mark
¢	¢	¢	cent sign
£	£	£	pound sign
¤	¤	¤	currency sign
¥	¥	¥	yen sign = yuan sign
¦	¦	¦	broken bar = brolen vertical bar
§	§	§	section sign
¨	¨	¨	diaeresis = spacing diaeresis
©	©	©	copyright sign
ª	ª	ª	feminine ordinal indicator
«	«	«	left-pointing double angle quotation mark = left pointing guillemet
¬	¬	¬	not sign = discretionary hyphen
­	­	­	soft hyphen = discretionary hyphen
®	®	®	registered sign = registered trade mark sign
¯	¯	¯	macron = spacing macron = overline = APL overbar
°	°	°	degree sign
±	±	±	plus-minus sign = plus-or-minus sign
²	²	²	superscript two = superscript digit two = squared
³	³	³	superscript three = superscript digit three = cubed
´	´	´	acute accent = spacing acute
µ	µ	µ	micro sign
¶	¶	¶	pilcrow sign = paragraph sign
·	·	·	middle dot = Georgian comma = Greek middle dot
¸	ç	¸	cedilla = spacing cedilla
¹	¹	¹	superscript one = superscript digit one
º	º	º	masculine ordinal indicator
»	»	»	right-pointing double angle quotation mark = right pointing guillemet
¼	¼	¼	vulgar fraction one quarter = fraction one quarter
½	½	½	vulgar fraction one half = fraction one half
¾	¾	¾	vulgar fraction three quarters = fraction three quarters
¿	¿	¿	inverted question mark = turned question mark
À	À	À	latin capital letter A with grave = latin capital letter A grave
Á	Á	Á	latin capital letter A with acute
Â	Â	Â	latin capital letter A with circumflex
Ã	Ã	Ã	latin capital letter A with tilde
Ä	Ä	Ä	latin capital letter A with diaeresis
Å	Å	Å	latin capital letter A with ring above = latin capital letter A ring
Æ	Æ	Æ	latin capital letter AE = latin capital ligature AE
Ç	Ç	Ç	latin capital letter C with cedilla
È	È	È	latin capital letter E with grave
É	É	É	latin capital letter E with acute
Ê	Ê	Ê	latin capital letter E with circumflex
Ë	Ë	Ë	latin capital letter E with diaeresis
Ì	Ì	Ì	latin capital letter I with grave
Í	Í	Í	latin capital letter I with acute
Î	Î	Î	latin capital letter I with circumflex
Ï	Ï	Ï	latin capital letter I with diaeresis
Ð	Ð	Ð	latin capital letter ETH
Ñ	Ñ	Ñ	latin capital letter N with tilde
Ò	Ò	Ò	latin capital letter O with grave
Ó	Ó	Ó	latin capital letter O with acute
Ô	Ô	Ô	latin capital letter O with circumflex
Õ	Õ	Õ	latin capital letter O with tilde
Ö	Ö	Ö	latin capital letter O with diaeresis
×	×	×	multiplication sign
Ø	Ø	Ø	latin capital letter O with stroke = latin capital letter O slash
Ù	Ù	Ù	latin capital letter U with grave
Ú	Ú	Ú	latin capital letter U with acute
Û	Û	Û	latin capital letter U with circumflex
Ü	Ü	Ü	latin capital letter U with diaeresis
Ý	Ý	Ý	latin capital letter Y with acute
Þ	Þ	Þ	latin capital letter THORN
ß	ß	ß	latin small letter sharp s = ess-zed
à	à	à	latin small letter a with grave = latin small letter a grave
á	á	á	latin small letter a with acute
â	â	â	latin small letter a with circumflex
ã	ã	ã	latin small letter a with tilde
ä	ä	ä	latin small letter a with diaeresis
å	å	å	latin small letter a with ring above = latin small letter a ring
æ	æ	æ	latin small letter ae = latin small ligature ae
ç	ç	ç	latin small letter c with cedilla
è	è	è	latin small letter e with grave
é	é	é	latin small letter e with acute
ê	ê	ê	latin small letter e with circumflex
ë	ë	ë	latin small letter e with diaeresis
ì	ì	ì	latin small letter i with grave
í	í	í	latin small letter i with acute
î	î	î	latin small letter i with circumflex
ï	ï	ï	latin small letter i with diaeresis
ð	ð	ð	latin small letter eth
ñ	ñ	ñ	latin small letter n with tilde
ò	ò	ò	latin small letter o with grave
ó	ó	ó	latin small letter o with acute
ô	ô	ô	latin small letter o with circumflex
õ	õ	õ	latin small letter o with tilde
ö	ö	ö	latin small letter o with diaeresis
÷	÷	÷	division sign
ø	ø	ø	latin small letter o with stroke = latin small letter o slash
ù	ù	ù	latin small letter u with grave
ú	ú	ú	latin small letter u with acute
û	û	û	latin small letter u with circumflex
ü	ü	ü	latin small letter u with diaeresis
ý	ý	ý	latin small letter y with acute
þ	þ	þ	latin small letter thorn with
ÿ	ÿ	ÿ	latin small letter y with diaeresis

Symbols, mathematical symbols, and Greek letters

The character entity references in this section produce characters that may be represented by glyphs in the widely available Adobe Symbol font, including Greek characters, various bracketing symbols, and a selection of mathematical operators such as gradient, product, and summation symbols.
Note from HTML 4.0 :

This entity set contains all the letters used in modern Greek. However, it does not include Greek punctuation, precomposed accented characters nor the non-spacing accents (tonos, dialytika) required to compose them. There are no archaic letters, Coptic-unique letters, or precomposed letters for Polytonic Greek. The entities defined here are not intended for the representation of modern Greek text and would not be an efficient representation; rather, they are intended for occasional Greek letters used in technical and mathematical works.

Symbols, mathematical symbols, and Greek letters

Decimal	Character	Example	Explanation
ƒ	ƒ	ƒ	latin small f with hook = function = florin
Α	Α	Α	greek capital letter alpha
Β	Β	Β	greek capital letter beta
Γ	Γ	Γ	greek capital letter gamma
Δ	Δ	Δ	greek capital letter delta
Ε	Ε	Ε	greek capital letter epsilon
Ζ	Ζ	Ζ	greek capital letter zeta
Η	Η	Η	greek capital letter eta
Θ	Θ	Θ	greek capital letter theta
Ι	Ι	Ι	greek capital letter iota
Κ	Κ	Κ	greek capital letter kappa
Λ	Λ	Λ	greek capital letter lambda
Μ	Μ	Μ	greek capital letter mu
Ν	Ν	Ν	greek capital letter nu
Ξ	Ξ	Ξ	greek capital letter xi
Ο	Ο	Ο	greek capital letter omicron
Π	Π	Π	greek capital letter pi
Ρ	Ρ	Ρ	greek capital letter rho
Σ	Σ	Σ	greek capital letter sigma
Τ	Τ	Τ	greek capital letter tau
Υ	Υ	Υ	greek capital letter upsilon
Φ	Φ	Φ	greek capital letter phi
Χ	Χ	Χ	greek capital letter chi
Ψ	Ψ	Ψ	greek capital letter psi
Ω	Ω	Ω	greek capital letter omega
α	α	α	greek small letter alpha
β	β	β	greek small letter beta
γ	γ	γ	greek small letter gamma
δ	δ	δ	greek small letter delta
ε	ε	ε	greek small letter epsilon
ζ	ζ	ζ	greek small letter zeta
η	η	η	greek small letter eta
θ	θ	θ	greek small letter theta
ι	ι	ι	greek small letter iota
κ	κ	κ	greek small letter kappa
λ	λ	λ	greek small letter lambda
μ	μ	μ	greek small letter mu
ν	ν	ν	greek small letter nu
ξ	ξ	ξ	greek small letter xi
ο	ο	ο	greek small letter omicron
π	π	π	greek small letter pi
ρ	ρ	ρ	greek small letter rho
ς	ς	ς	greek small letter final sigma
σ	σ	σ	greek small letter sigma
τ	τ	τ	greek small letter tau
υ	υ	υ	greek small letter upsilon
φ	φ	φ	greek small letter phi
χ	χ	χ	greek small letter chi
ψ	ψ	ψ	greek small letter psi
ω	ω	ω	greek small letter omega
ϑ	ϑ	ϑ	greek small letter theta symbol
ϒ	ϒ	ϒ	greek upsilon with hook symbol
ϖ	ϖ	ϖ	greek pi symbol
•	•	•	bullet = black small circle
…	…	…	horizontal ellipsis = three dot leader
′	′	′	prime = minutes = feet
″	″	″	double prime = seconds = inches
‾	‾	‾	overline = spacing overscore
⁄	⁄	⁄	fraction slash
℘	℘	℘	script capital P = power set = Weierstrass p
ℑ	ℑ	ℑ	blackletter capital I = imaginary part
ℜ	ℜ	ℜ	blackletter capital R = real part symbol
™	™	™	trade mark sign
ℵ	ℵ	ℵ	alef symbol = first transfinite cardinal
←	←	←	leftwards arrow
↑	↑	↑	upwards arrow
→	→	→	rightwards arrow
↓	↓	↓	downwards arrow
↔	↔	↔	left right arrow
↵	↵	↵	downwards arrow with corner leftwards = carriage return
⇐	⇐	⇐	leftwards double arrow
⇑	⇑	⇑	upwards double arrow
⇒	⇒	⇒	rightwards double arrow
⇓	⇓	⇓	downwards double arrow
⇔	⇔	⇔	left right double arrow
∀	∀	∀	for all
∂	∂	∂	partial differential
∃	∃	∃	there exists
∅	∅	∅	empty set = null set = diameter
∇	∇	∇	nabla = backward difference
∈	∈	∈	element of
∉	∉	∉	not an element of
∋	∋	∋	contains as member
∏	∏	∏	n-ary product = product sign
∑	∑	∑	n-ary sumation
−	−	−	minus sign
∗	∗	∗	asterisk operator
√	√	√	square root = radical sign
∝	∝	∝	proportional to
∞	∞	∞	infinity
∠	∠	∠	angle
∧	∧	∧	logical and = wedge
∨	∨	∨	logical or = vee
∩	∩	∩	intersection = cap
∪	∪	∪	union = cup
∫	∫	∫	integral
∴	∴	∴	therefore
∼	∼	∼	tilde operator = varies with = similar to
≅	≅	≅	approximately equal to
≈	≈	≈	almost equal to = asymptotic to
≠	≠	≠	not equal to
≡	≡	≡	identical to
≤	≤	≤	less-than or equal to
≥	≥	≥	greater-than or equal to
⊂	⊂	⊂	subset of
⊃	⊃	⊃	superset of
⊄	⊄	⊄	not a subset of
⊆	⊆	⊆	subset of or equal to
⊇	⊇	⊇	superset of or equal to
⊕	⊕	⊕	circled plus = direct sum
⊗	⊗	⊗	circled times = vector product
⊥	⊥	⊥	up tack = orthogonal to = perpendicular
⋅	⋅	⋅	dot operator
⌈	⌈	⌈	left ceiling = apl upstile
⌉	⌉	⌉	right ceiling
⌊	⌊	⌊	left floor = apl downstile
⌋	⌋	⌋	right floor
〈	⟨	〈	left-pointing angle bracket = bra
〉	⟩	〉	right-pointing angle bracket = ket
◊	◊	◊	lozenge
♠	♠	♠	black spade suit
♣	♣	♣	black club suit = shamrock
♥	♥	♥	black heart suit = valentine
♦	♦	♦	black diamond suit

Markup-significant and internationalization characters

The character entity references in this section are for escaping markup-significant characters, for denoting spaces and dashes. Other characters in this section apply to internationalization issues such as the disambiguation of bidirectional text.

Markup-significant and internationalization characters

Decimal	Character	Example	Explanation
"	"	"	quotation mark = APL quote
&	&	&	ampersand
&#60;	&lt;	<	less-than sign
&#62;	&gt;	>	greater-than sign
&#338;	&OElig;	Œ	latin capital ligature OE
&#339;	&oelig;	œ	latin small ligature oe
&#352;	&Scaron;	Š	latin capital letter S with caron
&#353;	&scaron;	š	latin small letter s with caron
&#376;	&Yuml;	Ÿ	latin capital letter Y with diaeresis
&#710;	&circ;	ˆ	modifier letter circumflex accent
&#732;	&tilde;	˜	small tilde
&#8194;	&ensp;		en space
&#8195;	&emsp;		em space
&#8201;	&thinsp;		thin space
&#8204;	&zwnj;	‌	zero width non-joiner
&#8205;	&zwj;	‍	zero width joiner
&#8206;	&lrm;	‎	left-to-right mark
&#8207;	&rlm;	‏	right-to-left mark
&#8211;	&ndash;	–	en dash
&#8212;	&mdash;	—	em dash
&#8216;	&lsquo;	‘	left single quotation mark
&#8217;	&rsquo;	’	right single quotation mark
&#8218;	&sbquo;	‚	single low-9 quotation mark
&#8220;	&ldquo;	“	left double quotation mark
&#8221;	&rdquo;	”	right double quotation mark
&#8222;	&bdquo;	„	double low-9 quotation mark
&#8224;	&dagger;	†	dagger
&#8225;	&Dagger;	‡	double dagger
&#8240;	&permil;	‰	per mille sign
&#8249;	&lsaquo;	‹	single left-pointing angle quotation mark
&#8250;	&rsaquo;	›	single right-pointing angle quotation mark
&#8364;	&euro;	€	euro sign

SEO Tips: Effective HEADING tags H1 H2 H3

Similar to how newspapers and magazines use headings and sub-headings to help readers, websites can use special tags in their HTML. These tags not only help human readers read the content, they also help search engine spiders better understand the content on a page and what is most important. It is generally a good idea to use heading tags to help signal to the search engines, what the web page is about. If you are concerned about SEO, then you will want your headings to be as descriptive… within reason.

Search engines such as Google pay special attention to your page’s tag and how much it relates to your content - remember SEO rule number one: if you don’t write it, Google can’t find it! <h1> <h2> <h3> they're held in high regard for SE.

I run through www.stuff.co.nz with website.grader.com, the report tells me all the second level headers H2 and third level headers H3 found by search engines. Obviously, some of the titles within H2 H3 are not the related content which we want to provide to readers, some of the headlines we want to provide to readers are not found by search engine. see the example below:




From the examples we can see, the content in red boxes should be stripped from heading tags, the titles in yellow boxes should be wrapped by heading tags.

I did the same task to www.nytimes.com/, they are doing extremely well.

IE family does not support display: none on span in ul li

I just discover that IE 6 & 7 are not following the display: none; rule in the span inside the li. I wonder where else has the same problem.

Here is the code example:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> new document </title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

ul {
list-style: none;
width: 100px;
background: blue;
}

ul li {
width: 100px;
height: 20px;
background: green;
border: 1px solid red;
Vertical-align: top
}

ul li span {
display: none;
}
</style>
</head>

<body>
<div id="pagewrap">
<ul><li><span>one</span></li>
<li><span>two</span></li>
<li><span>three</span></li>
<li><span>four</span></li>
<li><span>five</span></li>
</ul>
</div>
</body>
</html>

So as you can see in IE it adds a gap between the li tags even thought its told to ignore the span and its content. I have found ways to make it work all listed below

1. Set ul li to float: left; <-- but maybe you dont want the ul li to be floated so that doesnt work -->

2. Set the ul li span to display: inline;margin:-500px; <--- but then you have to add overflow: hidden for ie6 to be truelly happy, and just doesnt seem right

3. Similar to 2 with the same issues but using text-indent: -5000px; on the ul li a tag again just doesnt seem right.

4. This seems to be the best solution that I have found and going to look into why a little more is to set the ul li to Vertical-align: top; or Vertical-align: bottom;