html, css, jQuery, PHP, mySQL
Monday, August 29th, 2011
TweetThis post is for all those confused about the use of radians when drawing circles, and arcs of circles, using the new html5 canvas element. I hope to shed some light on the subject, and give you the knowledge that you need to make use of this exciting new capability. Radians The radian is a [...]
Tags: angles, arc of a circle, arcs, canvas, capability, circumference of a circle, drawing circles, element, equivalents, increments, light on the subject, measurement, north directions, parameters, proportion, radian, radians to degrees, radius, simple matter, vertex
Posted in HTML, JavaScript, Tutorials | 2 Comments »
Wednesday, August 10th, 2011
TweetHow do web designers manage to get those cool effects, like overlapping boxes, shadows and rounded corners? Well, it used to be fairly tricky to do, using extra <span> elements with background images (for rounded corners) and extra divs with darker backgrounds (for box shadows). Don’t even mention drop shadows on text: the only browser [...]
Tags: axis, background images, blur, boxes, css2, dimensional space, divs, drop shadows, element, elements, inset, internet explorer, negative integer, rounded corners, span, stacking order, text shadow, web designers, whole number
Posted in Tutorials | No Comments »
Wednesday, August 10th, 2011
TweetMany experts agree that it is best to include images in your web page using CSS. This makes it easier to edit them later, and maintains the separation of concerns (CSS used only for appearance, HTML used only for semantic markup). Others disagree, and say that it is better for accessibility to use HTML <img> [...]
Tags: accessibility, appearance, attribute, background color, background colour, background image url, color hex, colour name, colour value, decorative features, element, level elements, repeat repeat, rgba, screen readers, semantic markup, shorthand, span, transparency
Posted in Tutorials | No Comments »
Sunday, August 7th, 2011
TweetIt is useful not to need to position each element separately when the intended effect is to place elements side by side. This is especially true when creating a horizontal list, for example for navigation links. Perhaps the final number of links is unknown, as more pages may be added later. You can achieve this [...]
Tags: block level elements, div class, document flow, element, line elements, scratch, sibling elements, span
Posted in Tutorials | No Comments »
Sunday, August 7th, 2011
TweetWhen positioning elements with CSS it is useful to understand that nested elements have relationships with each other. The terms used to describe the various nesting relationships are borrowed from family descriptions. Thus, there are parents, children, siblings, grandparents and grandchildren. These are not words that you need to use in the CSS itself, but [...]
Tags: asterisk, comma separated list, css elements, css properties, div, element, family descriptions, family relationships, grandparents and grandchildren, internet explorer 7, p paragraph, parents, scratch, sibling elements, siblings, span, ul, wildcard character
Posted in Tutorials | No Comments »
Saturday, August 6th, 2011
TweetThe important thing to be aware of is that all of the elements on your page are boxes. When we used the star selector, we put a red border around all of the elements. You can use the same CSS to put a border around any element on your page. Practice putting a border around [...]
Tags: additional properties, blank area, box model, boxes, element, elements, ems, font properties, measurement, measurements, percentages, printers, px, scratch, shorthand, text sizes
Posted in Tutorials | No Comments »
Saturday, August 6th, 2011
TweetBefore looking further at CSS here are some useful examples of CSS properties. Notice how when we set a border before we used a shorthand which combined declarations for the border width, style and colour into one line: * {border: 1px solid red;} If we wrote these out as separate declarations the CSS would look [...]
Tags: background colour, border color, border width, comma separated list, css properties, declarations, element, font families, font family names, fonts, hyphen, line border, sans serif, serif font, shorthand, source of information, style font, text colour, times new roman, w3schools
Posted in Tutorials | No Comments »
Saturday, August 6th, 2011
TweetIn the previous lesson we learned how to link a CSS file to an HTML document and how to use the Star Selector or Wildcard to put a border around every element on the page. You should have a file named stlye.css saved in the same folder as index.html. If you do not, please consult [...]
Tags: attributes, cascading style sheets, css file, css syntax, curly braces, declarations, div, element, elements, grammar, headings, html document, paragraphs, semantics, semi colon, value pairs, wildcard
Posted in Tutorials | 1 Comment »
Friday, August 5th, 2011
TweetAlthough it is considered best practice to use CSS to place images in a web page, it is still very useful to know how to do this with HTML. Here is the basic code to include a picture called mycat.jpg in your HTML document: <img src=”mycat.jpg” alt=”my cat Fluffy” /> Notice this is another self-closing [...]
Tags: advantages and disadvantages, attribute, bad idea, element, html document, image file, images, img src, lt, mycat, own website, photographs, png, savin, short description, value pairs, web page
Posted in Tutorials | No Comments »