Auto-matic Link Icons

Now, you may have seen similar things on a few websites already, wikipedia certainly makes use of the technique to highlight external links. The astute of you may notice that the ‘external’ link isn’t actually external – think of it more as ‘absolute’. How do we achieve these results automatically? Well, that’s with the power of the new CSS selectors. 456BereaSt. has a nice article on them, but the stuff we’re concerned with is the attribute selectors.

Attribute selectors are done with [square brackets], and can include simple conditional statements, with some options for wildcards thrown in to boot. The easiest way for me to explain is to show you…

Here’s a simple ‘absolute’ link selector – a[href=”http:”] – this will target all the ‘a’ tags, with the attribute ‘href’ which is equal to “http:”. Interesting, but its not very useful, because the attribute would need to be exactly “http:” for it to work. So, we add the ^ operator, which means ’starts with’. So ( a[href^=”http:”] ) means any link with a href attribute that starts with ‘http:’ – thus, every external link.

Another operator we can use is $, which means ‘ends with’. So a[href$=’.pdf’] is any links that end with .pdf. Now we know how to automatically treat different links differently. Oh, and it works fine in all the most recent browsers (IE7, Firefox) And won’t have any effect on browsers that don’t understand the selectors, so its safe to use.

Now, styling the links is really a matter of personal preference, (and your design), but I the infamous famfamfam silk icon set will help you out here. Once you’ve got your icons, a little clever implimentation of styles will enable you to indent your link slightly to add you icon in as a background image. Thus;

    a[href$=’.pdf’] {
    display:inline-block;
    padding-left:20px;
    line-height:18px;
    background:transparent url(Images/PDFIcon.gif) center left no-repeat;
    }

And you’re away – limited only by your icon supply, and the volume of conditional statements you want to make! Here’s mine – covering external links, mailto links, and common document formats…

    a[href^=”http:”] {
    display:inline-block;
    padding-right:14px;
    background:transparent url(/Images/ExternalLink.gif) center right no-repeat;
    }

    a[href^=”mailto:”] {
    display:inline-block;
    padding-left:20px;
    line-height:18px;
    background:transparent url(/Images/MailTo.gif) center left no-repeat;
    }

    a[href$=’.pdf’] {
    display:inline-block;
    padding-left:20px;
    line-height:18px;
    background:transparent url(/Images/PDFIcon.gif) center left no-repeat;
    }

    a[href$=’.swf’], a[href$=’.fla’], a[href$=’.swd’] {
    display:inline-block;
    padding-left:20px;
    line-height:18px;
    background:transparent url(/Images/FlashIcon.gif) center left no-repeat;
    }

    a[href$=’.xls’], a[href$=’.csv’], a[href$=’.xlt’], a[href$=’.xlw’] {
    display:inline-block;
    padding-left:20px;
    line-height:18px;
    background:transparent url(/Images/ExcelIcon.gif) center left no-repeat;
    }

    a[href$=’.ppt’], a[href$=’.pps’] {
    display:inline-block;
    padding-left:20px;
    line-height:18px;
    background:transparent url(/Images/PowerPointIcon.gif) center left no-repeat;
    }

    a[href$=’.doc’], a[href$=’.rtf’], a[href$=’.txt’], a[href$=’.wps’] {
    display:inline-block;
    padding-left:20px;
    line-height:18px;
    background:transparent url(/Images/WordDocIcon.gif) center left no-repeat;
    }

    a[href$=’.zip’], a[href$=’.gzip’], a[href$=’.rar’] {
    display:inline-block;
    padding-left:20px;
    line-height:18px;
    background:transparent url(/Images/ZIPIcon.gif) center left no-repeat;
    }

Advertisements

Visited links strike

Visited Links strike can done siply by using the following type by applying the following CSS to the Text.

a:hover
{
color:#222C39;
text-decoration:none;
}
a:visited {
text-decoration: line-through;
opacity: .25;
filter: alpha(opacity=25);
}

If you visit any news link after page refresh the title should be strike-out. It’s a very basic CSS tips using element a:visited. Just take a look at live demo in the site,OurSignal.com

CSS Convention

With the popularity of CSS, the Div tag has been painfully overused. Here is a list of HTML tags that will help you use HTML the way it was intended.

<abbr>

This HTML tag defines an abbreviated phrase.
The <abbr title=”Abbreviation”>Abbr.</abbr> HTML tag gives the full definition of  abbreviated text.
 
<acronym>

This HTML tag defines an acronym. The difference between an acronym and an abbreviation is that it can be spoken as if it was a word. Can I get this

<acronym title=”as soon as possible”>ASAP</acronym>
 
<address>

This HTML tag defines user contact information

<address>
        <a href=”
mailto:us@example.org”>Email us</a>
        Address: Box 564, NoWheresville
        Phone: 123-555-1234
</address>

<base>

This HTML tag specifies the default target for links or default address.

<head>
        <!– default address for images –>
        <base href=”
http://www.example.com/images/” />
      
        <!– default target for links –>
        <base target=”_blank” />
</head>

<body>
        <!–Actual address is
http://www.example.com/images/logo.gif –>
        <img src=”logo.gif” />
      
        <!– Target for link will be _blank –>
        <a href=”
http://www.example.com”>Link</a>
</body>

<blockquote>

This HTML tag defines a long quotation.

<blockquote>
        Lorem ipsum dolor sit amet,
        consectetur adipiscing elit.
        Morbi pellentesque vehicula porttitor.
        Nam turpis ante, volutpat id blandit eget.
</blockquote>
 
<cite>

This HTML tag defines a citation.

<cite>This is a citation.</cite> 
 
<del>

This HTML tag defines deleted text, default style is a strike through.

<del>This text is no longer relevant.</del>
 
<fieldset>

This HTML tag defines a border around elements in a form.
<form>
        <fieldset>
                Name: <input type=”text” size=”30″ />

                <p><input type=”submit” value=”Submit”></p>
        </fieldset>
</form>
 
<ins>

This HTML tag defines newly added content.The default style is an underline.

<ins>Recently updated content</ins>
  
<legend>

This HTML tag defines a caption for a form’s fieldset.
<form>
        <fieldset>
                <legend>This is a caption</legend>
                Name: <input type=”text” size=”30″ />

                <p><input type=”submit” value=”Submit”></p>
        </fieldset>
</form>
 

Hopefully these will help. Using the proper tags for the proper content makes sense of your content, and you can style them just as well as a Div. Start using these and make the web a more beautiful place for developers.

5 HTML Pitfalls, Tips, and Tricks

1. The importance of DOCTYPES
DocType

DocType

Believe it or not, there are many kinds of HTML that you can write. There is HTML5 (still experimental and not final), HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset, and the same for XHTML. The DOCTYPE specifies which kind of HTML that you’re writing. For example, if your using frames in your document (although that’s not the greatest idea), then you should use the HTML/XHTML “Frameset” Specification. What is the difference between Strict and Transitional Doctypes? In a Transitional Doctype, there are more deprecated tags than HTML Strict. A few of these being things that you would normally specify in CSS (e.g. background color, border, etc.).

2. Comment Your Code

One of the best ways to keep track of your code is to comment it. This is how you insert comments in HTML :

<!–this is my HTML comment–>

You might need to use comments for a variety of reasons. I use comments most whenever I need to close a div. Usually if you have a lot of nested divs in an HTML page, it’ll become hard to keep track of which div closes which div tag. This way it keeps it simple and it increases my productivity. Another way you could possibly use comments are to debug your code. If you want to test something that you feel might not work, or you want to see what would happen if you remove it, you could simply encapsulate the code with comments. If you want to ever get it back, just remove the comment tags.

3. Don’t use HTML for style attributes

If you’re a beginning HTMLer (yes – I know, great use of words), and you are following an old reference, you might be putting style elements using HTML. Don’t EVER do this. an example is here –

<body bgcolor=”#FFF”> {HTML code here}

Here, what you are doing is using HTML to create a background color. This is deprecated. The “good way” replicate the same function here would be to use CSS. CSS is just a way to style different objects in your page. If you wanted to add the background color, here is one way you could do it.

Use the “style” attribute

<body style=”background-color:#FFF;”>
Instead of using the “bgcolor” attribute, this uses the css background-color property. Ideally you would put this in an external css file, but that is out of the scope of this article. I may do another article about CSS later 🙂 .

4. Indent your HTML

Whenever you write HTML code, you should always have some way of organizing it and making sure that you can read it properly without making your eyes fall out. Every single time I haven’t bothered to indent and organize my code I’ve either indented it properly (which took out a good chunk out of my time), or I’ve just went on with it, but it took double as long to find necessary things. Indent indent indent! The picture below shows a good example of indenting (courtesy of themeforest).

Proper Indentation

Proper Indentation

5. ALWAYS validate your code

There is a great HTML validator @ http://validator.w3.org. I highly recommend that you ALWAYS use it when you create HTML. Don’t care about how big or small of a project it is. Why? Because you should always get in the practice of validating your HTML. Even if you don’t fix the mistakes, identify what you are doing wrong generally, and where your strengths and weaknesses are. Also, if your page is behaving weirdly, you may have neglected to close a div or a quote, etc,. and the validator will help you fix that.

Another Tip for validation – if you’re serious about getting a page exactly right, then validate while you’re developing the code. This way you are not faced with a mountain of errors when you are done with coding.

Hidden Link Display

In a paragraph showing the hidden links () by hovering the paragraph can done using the following CSS example,

CSS control for the paragrah and a tags,

CSS:

p { margin-top:10px; color:#888888; text-align:justify; }
a { color:#718374; text-decoration:underline; }
.colorhover:hover a { color:#718374; text-decoration:underline; }
.colorhover:hover a:hover { color:#EEEEEE; }

Example:

<h2>Colorized links on hover paragraph</h2>
<p class=”colorhover”>Aenean non sem vel velit posuere laoreet. <a href=”
http://twitter.com/rafeektwt” title=”Follow me on Twitter”>In hac habitasse</a> platea dictumst. Suspendisse posuere volutpat leo. <a href=”http://feeds2.feedburner.com/marcofolio” title=”Subscribe to the feed”>Donec dictum</a>, ligula</p>

HTML & CSS Cheat Seet

HTML and CSS Cheat Sheet  on the html entities and Character and other main CSS defination can find here,

HTML HELP Sheet

Html Character Entities Cheat Sheet

Html Cheat Sheet

CSS Cheat Sheet

CSS 3 Tips

While applying CSS to the web page, these 3 steps will might be useful,

css-example
css-example

1. On any given div, if you specify a width, do NOT specify padding or margins (and vice versa). Specify padding and margins on the elements contained in that div instead. Ex: leftcolumn {width:200px} lefcolumn p {padding:10px;width:20px;}

2. Use Firebug and Web Developer Toolbar together. In Firebug, use the inspect button to see element names, styles, and inheritances. Then use Wed Developer’s CSS > Edit CSS panel to change the properties in real time. If anyone wants I can probably make a video screencast and show you some examples of what I mean.

3. Don’t obsess about validation or having perfect code. I know some coding Nazis might hang me for this one, but if you need to stick a clearing div here or use a IE6 hack for a specific issue there, do it. I used to have CSS OCD once too, it’s ok. But if I can save myself an hour of tearing my hair out trying to fix one small issue just in the name of perfect semantic markup – it’s not worth it (especially if your users will never notice or know about it). Life is short. Don’t spend it obsessing about CSS.

CSS : Page Break

For printing the 10 to 1000 web page content at a time with page break   with the some limited content per page can done using the breakhere CSS control all any HTML tag.

The format is,

P.breakhere {page-break-before: always}

Here i am using page break  in  <P class=”breakhere”> tag the content are get page breaked to take print out. When viewing the page content using Print Preview will see the effects of this CSS.