Basic html/css

This tutorial demonstrates how to place two background images behind the HTML <blockquote> tag. The first image will be positioned at the top left of our blockquote and will be our opening quote mark, and the other at the bottom right which will be our closing quote mark. The apporach I'm going to demonstrate appears to work in all of the modern browsers, although some of the older browsers might struggle.

The reason for this tutorial is the inability of CSS to allow more than one background on a single page element, so in the case of the blockquote I, like many other template designers, have resorted to creating borders and background colors to separate blockquotes from the surrounding text. We do this because many blog and forum scripts provide a quote button that simply wraps the quote in <blockquote> </blockquote> tags.

Using CSS and the :first-letter pseudo class, we are able to assign two background images to our HTML <blockquote>, and all we need to do is position them so that they work correctly. The image below shows you what I mean.

The opening quote mark and larger first letter are defined by blockquote:first-letter, and the border, background and closing quote mark are defined by the blockquote style.
Read More

Regular visitors to my site will know I often include code snippets in my posts. To refresh your memory on html in your entries be sure to read adding html code to your blog entries

Including html in your posts isn't something you need to do very often, and certainly can't damage your blog, so please feel free to experiment. If you're familiar with HTML basics you would know that the <code> tag is available to be used for code snippets within webpages, and this is equally true of blog posts.

Where it gets interesting is that actually putting any html into your post will automatically be interpreted by your browser. So lets say for example you wanted to include a code snippet that your site visitors could use to link to your website. If you actually place the direct html into your post you'll notice that your browser makes this into a link, and not into a code snippet. Read More

If you're a blogger or webmaster its fairly certain you'll need to edit stylesheets at some point.

If you're editing an html template, or perhaps a Wordpress or Serendipity theme, you'll be looking for a file that has a .css extension, in Serendipity and Wordpress you're looking for style.css

In many stylesheets the first line you see might begin '/*', for example,

/* Theme by Carl */

which tells you this is a comment and isn't used by your browser. Comments are handy for making notes in stylesheets and are never seen on your webpage. Read More

When you use the default text editor that ships with serendipity you are only given a few different styling options, italic, bold, underline, and quote.

These are great but sometimes you need more. Some users opt to use the WYSIWYG option, others download tinymce or another editor, but I prefer to stick with the basic approach.

If you're like me, yet still want a bit more customisation of your posts, spare a thought to regular html tags such as the following; <acronym>,<code>, <strike>, <sub>, <sup> which can spruce up your entry nicely. Read More