Categories
CSS & HTML Tips

How to prevent or stop my website and pages from being indexed by search engines?

It’s really weird that one would like to do this but perhaps you are running some private website dedicated to just an intimate group. Anyway, you can stop search engines indexing your web pages by putting a meta tag in the header section of them:

<meta name="robots" content="noindex" />

That’s it. Any search engines abiding by the rules especially Google will never index this page or exclude all the pages with this meta tag out of their index database. You can also prevent search engines from requesting and reading your website or pages in the first place by the help of a robots.txt which specifies to what areas of your site are they not welcome.

Adding a rel="nofollow" tag helps too in that search engines will not follow this link to the destination page, let alone indexing it:

<a href="http://www.example.com" rel="nofollow">example site</a>
Categories
CSS & HTML Tips JavaScript Tips & Tutorials PHP Tips & Tutorials

How to redirect the visitor to another page or website?

This is one of the most common tasks in website development and also one of the most frequently asked question according to some of the keyword research tools. Well, you have 3 ways to achieve a web page redirection.

  1. Use PHP header() function to modify and send a HTTP Location header:

    header("Location: /thankyou.html"); // redirect the visitor to the /thankyou.html page on the same website

    header("Location: http://www.microsoft.com"); // redirect the visitor to Microsoft

    You will need to make sure there’s no output at all before the calling of the header function to avoid any headers already sent errors.

  2. Use the meta tag of HTML:

    <meta http-equiv="refresh" content="3;url=http://www.example.com/hi.html">

    Which will simply refresh the visitor’s browser window and redirect to http://www.example.com/hi.html in 3 seconds.

  3. Use JavaScript to manipulate the browser window location object:

    <body onload="document.location='http://www.example.com/'">

Categories
CSS & HTML Tips

CSS: How to align HTML input checkbox and radio with text on the same line?

The common HTML form input controls of checkbox (<input type=”checkbox”>) and radio (<input type=”radio”>) can be tricky to be aligned correctly in the same line with the text or image across all modern browsers. Without any CSS styling, they usually place themselves 3 or more pixels above or below the normal text flow which look anything but nice.

Setting margin or padding won’t help, the whole line would be shifted either downward or upward. So what can be done to align the stubborn input controls nicely with the texts? You can take one of the 3 approaches to achieve this.

  1. Float the checkbox or radio to the left.
  2. Using vertical-align:middle to align the checkbox and radio in the middle with the rest of the text. It’d look much better after you have vertically aligned the controls in the middle by this, but sometimes it also helps with 1px or 2 margin manipulation.
  3. Relatively position the input tags of checkboxes and radios 1 or 2 pixels above or below its original position with
    position:relative;
    top:1px; /* or bottom:1px; */

    Which would move the control 1px downward.

Generally, the 2nd is the best of the 3 approaches.

Categories
CSS & HTML Tips Web Design Tips and Insights

Please, by all means, don’t use overflow:hidden for content!

No matter how fairy or pretty your design / template is, never use overflow:hidden for content containers.

Content comes a thousand times more important than any design or layout. I don’t care how much you hold proud your artistic work and how you think accommodating the content in any way possible would ruin the holy sweet layout, when an image or a table with indispensable content that the readers / visitors are ultimately concerned about expands across the content areas and messing up with your fucking design, using overflow:hidden to restrict them is just plain STUPID and ANNOYING.

Please by all means, DO NOT use overflow:hidden for content containers! What really matters is the idea / content the design is trying to convey rather than the design itself.

Categories
CSS & HTML Tips

CSS: Set width on inline elements with inline-block

With display:block elements we can freely set the hard width of them. However for inline elements, width:200px simply won’t work at all. One approach is to float the element which usually causes other problems and isn’t handy at all.

So how to set width to inline elements without floating them in CSS?

The answer is to use this to the CSS rule:

display:inline-block;

Now you can set a width to the inline-ly displayed element and it will extend to the specified width with blank space filling the extra length.

Categories
CSS & HTML Tips

CSS: Curved or Rounded Corner Boxes and Images Using border-radius

In CSS3, border-radius is the rule you would use to achieve curved corner borderlines, but for now, IE and Opera doesn’t support this trick. With a little script help in the form of a .htc, you can make a cross browser compatible rounded corner box such as a <div> or an <img>.

-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;

The above CSS rules set bends all 4 corners of any box, but only in FF, Chrome and Safari. To make it work in IE, you have to refer to this trick by Remiz.

Categories
CSS & HTML Tips

How to make IE6 to style HTML 5 tags?

HTML 5 comes with a bunch of new tags that IE6 cries that it doesn’t know them, thus refusing to style them according to the CSS. To baby-sit this stupid browser one last time, adding these JavaScript lines in the <head> of your web page that utilizes HTML 5 tags:

<script>
  document.createElement('header');
  document.createElement('nav');
  document.createElement('section');
  document.createElement('article');
  document.createElement('aside');
  document.createElement('footer');
</script>

Will make IE6 *know* these tags and style them correctly by CSS.

Categories
CSS & HTML Tips

New Tags of HTML 5 (A New Features Tutorial)

Firefox 3.5 has been released with full support for the current stage of HTML 5. Although the rest of the browsers haven’t explicitly adopted the new tags and new features of HTML 5 yet, you can safely use HTML 5 tags in your web page and style them in CSS just as if they are a traditional HTML 4 tag, no problem.

Below is a list of the new tags introduced in HTML 5 which are subject to change in future, especially after the official recommendation release of HTML 5.

  1. <article> – intended for the content section of the web page, can be seen as <div class=”article> or <div class=”content”> or something.
  2. <aside> – for content aside from the primary content stream such as a flyover or a sidebar.
  3. <audio> – including audio files in the web page as an element.
    <audio src="audiofile.wav">
    <p>Your browser doesn’t support audio playback.</p>
    </audio>
  4. <bb> – tag to indicate browser commands.
  5. <canvas> – tag containing graphic information to for browsers to render vector images in real-time after loading the canvas data, much like SVG.
  6. <command> – definition of a specific action the user can invoke via the interface controls such as a push button or clickable link.
  7. <datagrid> – used to define a datagrid which is just a representation of tree, list or tabular data that is interactive. Basically, a behavioral structural data container.
  8. <datalist> – specifies a pre-entered list of options that can be used as an autocomplete feature of your form. For example, when the visitor enters something in the text field, the browser tries to guess and create an autocomplete dropdown from the datalist you have provided.
  9. <details> – containing extra information that can be shown or hidden upon user demand.
  10. <dialog> – HTML tag specifically designed for dialog content between several entities such as people.
  11. <eventsource> – representing a target for events generated by the remote server.
  12. <figure> – used mainly for illustrative content such as a diagram, a graph, a photo or other forms of annotations.
  13. <footer> – semantic tag specifically designed for the page footer, can be seen as something like <div id=”footer”>.
  14. <header> – much like the <footer> tag, it lives as the the header section of the web page.
  15. <mark> – used to emphasize, mark or highlight content such as a string of text for reference purposes.
  16. <meter> – intended for measurable numeric results:
    <meter>3.14159</meter>
    <meter>77.1%</meter>
    <meter>1/3</meter>
  17. <nav> – semantic tag for the navigational section of a web page such as a menu.
  18. <output> – representing the output part of something such as a script, a programming function or a calculation.
  19. <progress> – semantic tag for the representation of progress of a task, for example, in the form of a progress bar.
  20. <section> – semantic representation of section of the content. For instance, an <article> can contain a <header> and can be divided into several <section>s. A full example of an article:
    <section>
       <section>
          <article>
             <header>
                <h1>Div Soup Demonstration</h1>
                <p>Posted on July 11th, 2009</p>
             </header>
             <section>
                <p>Lorem ipsum text blah blah blah.</p>
                <p>Lorem ipsum text blah blah blah.</p>
                <p>Lorem ipsum text blah blah blah.</p>
             </section>
             <footer>
                <p>Tags: HMTL, code, demo</p>
             </footer>
          </article>
          <aside>
             <header>
                <h1>Tangential Information</h1>
             </header>
             <section>
                <p>Lorem ipsum text blah blah blah.</p>
                <p>Lorem ipsum text blah blah blah.</p>
                <p>Lorem ipsum text blah blah blah.</p>
             </section>
             <footer>
                <p>Tags: HMTL, code, demo</p>
             </footer>
          </aside>
       </section>
    </section>
  21. <source> – used to specify the source of various media types for either <audio> or <video>.
    <audio>
    <source src="mediafile.wma" type="audio/x-ms-wma">
    <source src="mediafile.mp3" type="audio/mpeg">
    …
  22. <time> – containing the date or time information in the web page.
  23. <video> – just like <audio>, it represents a video in the HTML page.

For a full example of a HTML 5 web page using all HTML 5 tags, come here.

You can also pre-order these 3 books being released near the end of 2009 for more serious coverage of the new web markup language, HTML 5:

  1. Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day: Including HTML 5 Preliminary Coverage (6th Edition)
  2. Sams Teach Yourself HTML and CSS in 24 Hours (Includes New HTML 5 Coverage) (8th Edition)
  3. HTML & XHTML Pocket Reference
Categories
CSS & HTML Tips Web Design Tips and Insights

HTML Tags Design for Template / Theme Creation

There are in total nearly a hundred HTML tags with good ones as well as bad ones in terms of XHTML. In the creation of a template or theme, after designing for the overall layout, artistic feel as well as the entire set of visual elements, the designer will be preparing the ready-to-use styles needed for common content tags such as the headings <h1>, <h2>, <h3> and <blockquote> and so forth, even though they may not have been used yet in the design. This article tries to be a rough guide on what tags to be styled before hand.

Here’s a shortened list for the most common scenario:

  1. <a>, the hyperlink, of course.
  2. <acronym>, usually for acronyms and abbreviations such as HTML. Industry standard is to style it with a dotted border at the bottom. However, <acronym> tag has fallen out of favor of HTML5, use <abbr> instead.
  3. <cite>, author, <q>, inline quotations, <blockquote>, large paragraphs of quoting which is one of the most necessary tags that need to be styled before hand.
  4. <button>, you may or may not prescribe a global visual style for all button tags across the template
  5. <caption>, table caption / title, centered and bold by default, come out with a better one in case the content contains a lot of tables. <table>, <tr>, <th>, <td>, <thead>, <tfoot>, <tbody>, … for table styles
  6. <code>, for templates dealing with code samples.
  7. <dfn>, for definition terms, frequently used with a lot of inline terms and definitions.
  8. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, content headings.
  9. <img>, content image styles.
  10. <fieldset>, form fieldsets. <legend>, form fieldset title.
  11. <form>, forms.
  12. <input type=”text”>, <input type=”checkbox”>, <input type=”radio”>, <input type=”file”>, <input type=”password”>, <textarea>, input controls of forms.
  13. <label>, form field labels.
  14. <li>, <ol>, <ul>, ordered list styles and unordered list styles.
  15. <p>, paragraph styles.
  16. <select>, <option>, <optgroup>, select list styles.
Categories
CSS & HTML Tips

How to use the HTML cite tag and the cite attribute?

There are at the same time a <cite> tag and a cite attribute in HTML. How does one correctly use them?

<q> is for inline quotations, such as when you need to quote a few words, half a sentence or a phrase from someone.

<blockquote> is for large chunks of text quotations, usually displayed as a block in CSS.

<cite>, doesn’t contain any quoted content but the quote author. For example,

<p>According to <cite>Einstein</cite>, <q>space can be bent</q>.</p>

Yep, that’s the correct use of the cite tag.

The cite attribute or property for <q> and <blockquote>, as in,

<blockquote cite="https://www.kavoir.com/">
<p><cite>, doesn’t contain any quoted content but the quote author.</p>
</blockquote>

Is for listing the source of the citation.