tag (html)

archive

getting the browser to detect rss and atom feeds Aug
17 1
0

When writing sections that has periodic updates, like a blog, it's commonly requested to create an rss or an atom syndication feed for the section.

I develop with Django, and fortunately it comes with a great and easy to use syndication feed framework out-of-the-box to automate much of this process. However, the documentation doesn't talk about how to get browsers to automatically detect that a feed is available so that the syndication feed icon automatically shows up in the user's browser.

The technical term for this is "autodiscovery", and not surprisingly it's easy to implement.

All that needs to be done is to add something similar to this into the <head>  of your HTML page for RSS:

<link href="http://www.example.com/blog.rss" rel="alternate" type="application/rss+xml" title="<title>"/>

or for ATOM:

<link href="http://www.example.com/blog.atom" rel="alternate" type="application/atom+xml" title="<title>"/>

comments

auto-populate subject and body line in mailto link May
21 1
0

Sometimes I need to auto-populate the subject and body lines inside a mailto link. All you need to do is attach the <subject> and <body> as GET variables.

<a href="mailto:test@example.com?subject=Your subject goes here.&body=Place the body text here.">Send me an email</a>

You can omit the email address if you want the user to be able to choose who she wants to send this to.

<a href="mailto:?subject=Your subject goes here.&body=Place the body text here.">Send me an email</a>

comments

anchoring a footer to the bottom of the html page using css Apr
03 1
0

It's a common need to anchor a footer to the bottom of your web page. It's a tricky problem because you need to account for both large and small content. I've seen people suggest ass-backward ways of doing this with JavaScript. You can achieve this strictly with HTML and CSS with minimal bloat to your markup. All you need is a container div.

Set the height of html and body to 100%, insert a container div with min-height 100% and relative position, and nest the footer with position: absolute, bottom: 0;

/* css */
html, body {
    height: 100%;
}

#container {
    position: relative;
    min-height: 100%;
}

#footer {
    position: absolute;
    bottom: 0;
}


<!-- html -->
<html>
<head></head>

<body>
  <div id="container">
    <div id="footer"></div>
  </div>
</body>
</html>

You might want to add some padding to the bottom of the container so that your content won't run under the footer.

comments