Posts Tagged ‘html’

Techie Tip of the Week: Making HTML5 Tags Work in Internet Explorer

Friday, August 24th, 2012

20120825-081442.jpg 20120825-080835.jpg


Internet Explorer 8 (and earlier) doesn’t understand the new HTML5 elements.

To use the HTML5 elements and have them work properly in IE, you need to “teach” IE to use them by writing a JavaScript that creates the new elements used in HTML5:

<script>
document.createElement("article");
document.createElement("section");
document.createElement("nav");
document.createElement("header");
document.createElement("footer");
</script>

If we put these JavaScript commands at the top of our web page, we can now use the ARTICLE, SECTION, NAV, HEADER, and FOOTER elements and know that IE will render them appropriately.

Techie Tip of the Week: Use “title” to add tooltips to web pages and web content!

Friday, May 25th, 2012

Ever wish you could add a tooltip to add more information on an object on your web page? This week’s tip will show you how!

Tooltips are those little boxes of information that pop up when your mouse hovers over a link, picture,niece of text, or other object.

To create a tooltip on a web page:

  1. In your web page editor, make sure you can see and edit the HTML code. (If you are using Drupal, WordPress, or other content management system, you’ll need to click the HTML or Source button.)
  2. Locate the object in which you wish the tooltip to occur.
  3. Add the following code:title="Tooltip Text"

So, for example, to add a tooltip saying “photo of our group” to a picture of our staff, the code would look like this:
<img src="ourstaff.jpg" title="photo of our group">
And here’s how it would look:

Or if I wanted to add a tooltip to a link sending the visitor to Stanford’s home page:
<a href="http://www.stanford.edu">Return to Stanford</a>

Or to add a title to a paragraph:

<p title="all about widgets">this paragraph is about the study of widgets</p>

Techie Tip of the Week: HTML5 Forms

Friday, January 27th, 2012

In earlier “dialects” of HTML (HTML 4.01, XHTML, etc.), you were stuck with only the following ways of accepting input from visitors:

- select (drop down-menus)
- textarea (large text boxes)
- button (to create a button)
- input type=button – to create a button
- input type=checkbox – for selecting multiple choice
- input type=file – to upload a file
- input type=hidden – to send hidden data like information stored in a cookie
- input type=image – to submit the form with a picture
- input type=password – a text field that displays dots or stars instead of the text
- input type=radio – for selecting one from a series
- input type=reset – to restore the form back to the original way it displayed
- input type=submit – to submit the form
- input type=text – for entering in text

Now, with the advent of HTML5, there are many, many new features and choices!

placeholder – <input placeholder=”text text text” type=”text”> will display text in the text box that will disappear when the visitor clicks, tabs, or taps into the field. As an example, Safari by default displays “Google” (or whatever your default search engine is) as placeholder text in the search box until you click into the search box.

autofocus – <input autofocus> will cause the form field to focus when the page loads. Without the need for JavaScript!

input type=email – a special kind of type=”text” specifically for email addresses. On the iOS devices, the keyboard dynamically changes to include the @ symbol and the . key. In addition, if the visitor doesn’t enter in a valid email address, the browser automatically validates, even if the form builder didn’t use JavaScript!

input type=url - a special kind of type=”text” specifically for web addresses. On the iOS devices, the keyboard dynamically changes to include the .com button, the . key and the / key (but no space bar, since spaces are illegal in web addresses). In addition, if the visitor doesn’t enter in a valid URL address, the browser automatically validates, even if the form builder didn’t use JavaScript!

input type=number – a special kind of type=”text” specifically for numbers. On browsers that support this, the text box becomes a spin box with up and down arrows to help the visitor pick the desired number.

input type=range - another special kind of type=”text” specifically for numbers. On browsers that support this, the text box becomes a slider to help the visitor pick the desired number.

input type=date/month/week/time/datetime - a special kind of type=”text” specifically for picking a date (currently only supported in the Opera web browser).

input type=search – a special kind of type=”text” specifically for search boxes. In Safari and Chrome, this will cause the normally rectangular shaped box have rounded corners! And, as a visitor starts to type, a little X appears in the right side of the box enabling the visitor to clear the search without deleting.

input type=color – a special kind of type=”text” specifically for picking a color. Currently, this feature only works in the Opera browser.

input required – adding the attribute “required” to an input tag causes the browser to validate the form and display notification to the visitor that the field cannot be empty.

form novalidate – if you don’t want the browser to validate, add the attribute novalidate to the form tag.

Enjoy!


Techie Tip of the Week: CSS Rules You Can Use in HTML Email Newletters

Friday, August 19th, 2011

When designing an HTML Email Newsletter, you need to be careful about using the newer web-creation techniques like HTML5 and Cascading Style Sheets (CSS).

Several popular email clients (in particular, Outlook and Google Mail) cannot understand or process the majority of CSS rules, so if you use them, the email will end up looking bland and ordinary.

Fortunately, Campaign Monitor (a commercial email newsletter service) has put together a Guide to CSS support in email — a web page version, a PDF version, and an Excel spreadsheet version to help you figure out which CSS rules you can use, and when you can use them!


For more information on creating HTML email newsletters, come to our Techie Festival Lecture Creating HTML Email Newsletters!

These days, email isn’t just plain text anymore. In this class, you’ll learn how to create state-of-the-art-looking emails with colors, fonts, and graphics, laid out into columns and sections. We’ll cover the tools and steps you need to take to create beautiful, professional emails, as well as some of the problems you might encounter (and how to fix them!).

Bring your laptop to play along with the presenter! (Demo files will be provided to participants.)