text()

Free Pretty Web Fonts in 5 Minutes with Google Font API

26 November 2010 / 7 Comments

For years, us web designers and coders were stuck with a pretty poor range of fonts that we could use across all platforms: Times, Arial, Verdana, and a handful more. If you wanted anything more original then you had to create your text as an image in Photoshop.

Well, times they are a-changin’, in the form of web fonts. These are online font files that you link to from within your page. The browser downloads the font you linked to, and you can then use that font for text within your web pages, just as if it was a regular system font. Lovely!

Web fonts are really starting to take off now, with services such as Typekit, Font Squirrel and Ascender giving you access to a range of free and paid web fonts.

In this tutorial I’ll show you how to use the Google Font API to add nice-looking web fonts to your pages. This service is a relative newcomer to the scene, but it has a couple of big strengths:

All the fonts are free
It’s very easy to use

So, let’s see how we can use the Google Font API to add pretty fonts to our web pages — in less than 5 minutes!

Accessing Element Content with jQuery

26 March 2010 / Leave a Comment

Now that you know how to select HTML page elements in jQuery, you can start to do useful things with those elements. In this tutorial you’ll look at how to work with the contents of an element.

jQuery lets you work with HTML elements and element content in many different ways. For example, you can add new elements inside, around, before, or after existing elements; you can replace an element with another element (or elements); and you can read or change an element’s contents. Often the line between working with elements and element content is blurred — for example, when you add new elements inside an existing element, you’re effectively adding to that element’s contents.

You’ll look at adding, removing and replacing elements in a later tutorial. In this tutorial you’ll learn about 3 jQuery methods designed for working directly with the contents of an element:

html() for reading and changing the HTML contents of an element
text() for reading and changing the text contents of an element
val() for reading and changing form field values

As you’ll see, these methods make it very easy to read or change the raw contents or value of any HTML element.

Introducing the JavaScript DOM

3 October 2008 / Leave a Comment

The Document Object Model lets you access and manipulate the contents of Web pages using JavaScript. By using the DOM, you can do wonderful things like:

Create tabbed Web pages
Create expandable/collapsible (“accordion”-style) Web page elements
Generate Web page content dynamically (on the fly)

In this introductory article, you learn about the concept of the DOM, and how it’s used to access Web page elements from within JavaScript.

The HTML Alt and Title Attributes

17 March 2008 / 7 Comments

HTML provides two main ways to add descriptive text to page elements: the alt attribute, and the title attribute. While these two attributes may appear to work in a similar way, they have quite different purposes. This article takes a look at these two attributes, explores their similarities and differences, and shows how to use both attributes correctly.

Sharpen Your Photoshop Skills with Our New Book

11 December 2007 / Leave a Comment

From shape layers and adjustment layers through to layer comps, Smart Objects and layer masks, there’s a lot more to Photoshop layers than meets the eye. To really get the most out of Photoshop, you need to know these features inside-out, and that’s where the Photoshop CS3 Layers Bible comes in.

Written by Matt and Simon, ELATED’s in-house Photoshop experts, this book covers everything you need to know about layer techniques in Photoshop.

The book is published by Wiley, and is available online from Amazon.com and Amazon.co.uk, as well as from all good book stores worldwide. To whet your appetite, here’s a chapter-by-chapter summary of what you’ll learn when you read the book.

HTML Text and Textarea Form Fields

6 November 2001 / 3 Comments

In this tutorial you explore two HTML form fields that allow visitors to enter text: text fields, suitable for short, single-line text, and textarea fields, which are suited to longer paragraphs of text.

CSS Font Properties

2 October 2001 / Leave a Comment

In this reference we will look at how to control font properties using style sheets. This is a really useful feature of CSS because it means that you can avoid having all those <font> tags in your Web pages, and it allows you to easily control all your fonts simply by editing one style sheet file.

We’ll look at the different font properties that can be used with CSS, and explain each property with the aid of some real-life examples. Each example is shown as it renders in your browser.

There are six properties that can be used to control fonts – font-family, font-style, font-variant, font-weight, font-size and font. Let’s look at each of these in turn.

[Read more…] about CSS Font Properties

text()

Footer

Contact Matt

Follow Matt