• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Articles tagged: html

html

Build Responsive Sites Quickly with Foundation

31 July 2012 / 5 Comments

Build Responsive Sites Quickly with Foundation

Responsive design is a big topic these days. A website with a responsive layout adapts to different devices — from widescreen desktops down to mobile phones — by resizing and rearranging the content in the page, as well as showing or hiding content.

While a basic responsive layout isn’t too hard to create, things can get fiddly once your layout starts getting more complex. On top of that, there are cross-browser issues to deal with, as well as setting up nice defaults for typography, colours, buttons, forms, menus, and so on.

This is where frameworks like Foundation come in. Foundation takes care of a lot of the “grunt work” involved in setting up a new site, with a responsive grid, cross-browser CSS, and good-looking default settings for all sorts of page elements.

In this introduction to Foundation, you’ll get an overview of Foundation’s features, and see how you can use the framework to rapidly prototype and build your next website. Enjoy!

[Read more…] about Build Responsive Sites Quickly with Foundation

Easy HTML Templates with Mustache

27 April 2012 / 13 Comments

Easy HTML Templates with Mustache

Templates are a great way to separate your website’s code from its design. There are many great web template systems available for different languages and platforms, including Smarty for PHP and the Django template language for Python.

In this tutorial you’ll explore Mustache, a relatively new and very simple template system that you can easily use to create HTML templates. You’ll look at various topics, including:

  • The advantages of using Mustache
  • How to install and use the Mustache processor
  • How Mustache tags, variables, and data objects work
  • Using sections to create conditions and loops
  • Including one Mustache template inside another
  • …and lots more!

Along the way, you’ll see plenty of code examples that show you how Mustache works. At the end of the tutorial, there’s a complete example that uses Mustache, along with jQuery, to create a simple Ajax-based product list page.

[Read more…] about Easy HTML Templates with Mustache

7 Lovely Things About HTML5 Markup

12 July 2011 / 6 Comments

7 Lovely Things About HTML5 Markup

HTML5 — the latest generation of the Web’s markup language — has been creating quite a stir over the last couple of years, as more and more browsers implement the latest and greatest HTML5 features. HTML5 really hit the mainstream in 2010, in part driven by Steve Jobs’ open letter, Thoughts on Flash.

HTML5 is quite a broad term, encompassing everything from the revised markup specification through to new API features such as audio, video, canvas and geolocation.

In this article I’m going to focus on the markup language itself, and look at seven reasons why I love HTML5’s markup more than HTML4’s. We’ll look at:

  • Doctypes
  • data- attributes
  • Some new and improved elements and attributes
  • More flexible linking
  • Simpler markup, and
  • Enhancements to web forms.

Ready to upgrade your markup? Let’s go!

[Read more…] about 7 Lovely Things About HTML5 Markup

The Top 30 Websites, Viewed in IE6

12 November 2010 / 10 Comments

The Top 30 Websites, Viewed in IE6

Internet Explorer 6. Nine years on, it’s still a headache for web designers and developers across the globe!

Most of us would like to forget about this horrid old browser — first launched in 2001, for crying out loud — but there’s always that client or user who insists on using it (or is forced to by their employer). Even among the audience of W3Schools — a web-savvy crowd if ever there was one — there are still around 5% of visitors using IE6 at the time of writing.

The result of all this is that we are forced to spend hours of extra coding time, just to make our sites work in this outdated browser.

How many big sites these days actually bother supporting IE6?

But how many big sites these days actually bother supporting IE6? One might think that they all would, considering their huge user bases. But is this the case?

[Read more…] about The Top 30 Websites, Viewed in IE6

Your First 10 HTML Tags

13 July 2010 / 19 Comments

Your First 10 HTML Tags

Just starting out with HTML? Here are 10 essential HTML tags that you’ll need to know when building your web pages. If you learn how these 10 tags work then you’ll have enough knowledge to put together a basic page.

At the end of the tutorial you’ll find code for an example web page that includes all 10 tags, so that you can see how to use them.

[Read more…] about Your First 10 HTML Tags

Accessing Element Content with jQuery

26 March 2010 / Leave a Comment

jQuery logoNow 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.

[Read more…] about Accessing Element Content with jQuery

How to Make a Website

7 July 2009 / Leave a Comment

So you want to know how to make a website. Where do you begin? This article walks you through the basic steps:

  1. Making your Web pages
  2. Designing your website, and
  3. Getting your website online.

[Read more…] about How to Make a Website

Getting Started with Your Web Hosting Service

14 January 2008 / Leave a Comment

You’ve done your research, you’ve picked a good hosting plan, and you’ve signed up. What’s the next step? You’ll need to orient yourself to the contents of your Web space, and learn how to upload Web pages. This tutorial shows you how.

[Read more…] about Getting Started with Your Web Hosting Service

Creating Accessible Forms

22 November 2006 / Leave a Comment

In HTML forms we looked at the basics of creating HTML forms: GET vs POST, text fields, checkboxes, radio buttons and so on. In this tutorial we’re going to go a step further and look at some of the ways you can make forms more accessible and usable for your visitors.

Web accessibility is important because it makes it easier for users to visit and use your site. This means happier visitors and more traffic!

We’ll cover the following topics:

  • Using the fieldset and legend elements to group form fields in a logical way
  • Adding labels to form fields with the label element
  • Controlling the tabbing order of the elements in a form
  • Speeding up form access and improving accessibility through the use of access keys

By the end of this tutorial you’ll be well on your way to designing wonderfully accessible forms. Read on…

[Read more…] about Creating Accessible Forms

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.

[Read more…] about HTML Text and Textarea Form Fields

  • Go to page 1
  • Go to page 2
  • Go to Next Page »

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits