HTML: A Brief History

Long ago in the far off land of Switzerland something very interesting began, and Al Gore wasn’t there.

1989 Tim Berners-Lee proposes an Internet based hypertext system for sharing documents between disparate operating systems while working as a contractor at CERN (European Organization for Nuclear Research). If you’re interested CERN is derived from Conseil Européen pour la Recherche Nucléaire.
1991 The first publicly available description of HTML. It consisted of 18 elements greatly influenced by SGML (Standard Generalized Markup Language).
1993 First proposal of HTML as a specification to the IETF (Internet Engineering Task Force). At the same time Dave Raggett was working on what he referred to as HTML+ (Hypertext Markup Format) while working for HP (Hewlett-Packard) in Bristol, England.
1994 IETF creates the HTML Working Group.

World Wide Web Consortium (W3C) was also formed by Berners-Lee at the Massachusetts Institute of Technology Laboratory for Computer Science (MIT/LCS).

1995, November 24 HTML 2.0 published as the first specification of the language.

1995, November 25 Form-based file upload
1996, May Tables
1996, August Client-side image maps
1997, January Internationalization
1996, December 16 CSS Level 1 published as W3C Recommendation
1997, January 14 HTML 3.2 published as W3C Recommendation.

The HTML Working Group had been closed in September of 1996 and all future development fell under the auspices of the W3C.

1997, December 18 HTML 4.0 published as W3C Recommendation.

There were three variations:

Strict

Transitional

Frameset

1998, May 12 CSS Level 2 published as W3C Recommendation
1999, December 24 HTML 4.01 published as a W3C Recommendation.
2011, June 7 CSS3 Color Module Recommendation
2011, September 29 CSS3 Selector Level 3 Module Recommendation
2011, September 29 CSS3 Namespaces Module Recommendation
2012, September 19 CSS3 Media Query Module Recommendation
2014, October 14 HTML5 published as a W3C Recommendation.

The large gap between HTML 4.01 and HTML5 saw the W3C strike off in a new direction incorporating elements of XML with HTML thus creating XHTML. They continued to work in this direction until a fissure arose in 2004 and members from Apple Computers, Mozilla Foundation, and Opera Software formed the Web Hypertext Application Technology Working Group (WHATWG). They pursued a specification they referred to as HTML5. On April 10, 2007 WHATWG proposed that the W3C adopt their HTML5 specification as the starting point for the newest recommendation. On May 9, 2007 the W3C’s new working group accepted the proposal.

2016, November 1 HTML 5.1 published as a W3C Recommendation.

The HTML q Tag

Somewhere in the neighborhood of 18 to 20 years ago I sat down one weekend with a book, a computer, and a few images and put together my first basic website. It was about artists from the Impressionist movement and was not anything to brag about with one exception, I built it myself, using Notepad.

That was the era of HTML 3.2 moving toward HTML 4.0. Netscape was my browser of choice and most pages used tables for layout.

A lot has changed in the following years but one thing remains…most people don’t know that HTML has a q tag to wrap things in quotes. If something is supposed to be in quotes most people will just type them in their code editor, or allow their visual design application to insert the entity characters to put quotes in place. Like this:

entity-quote

Which results in this page.

quote-entity-browser

One of the main reasons I didn’t use the q tag early on was lack of browser support. Netscape supported it but IE didn’t, and IE was on the rise. The next group of browsers (Firefox, Chrome) weren’t any better. When you don’t use something for an extended period of time you tend to forget about it. That’s what happened to the q tag in my brain.

Another reason may be the fact that it is a specialized tag. It serves one purpose, wrapping text in quotation marks as part of a citation. Why learn about a tag that does one job? Mostly for SEO (search engine optimization). Giving credit where credit is due.

Using the q tag is simple and straight forward. Whatever you want quoted…wrap that text within a pair of q tags.

quote-tag

quote-ie

As for browser support in 2016; all current browsers support the q tag. IE 9 forward offers full support. So maybe it’s time to look at the small but useful q tag and give credit where credit is due.

 

HTML5 Form Date Attribute

Getting corporate America to make the move to HTML5 seemed to take longer than any other transition we’ve seen in the past. In part I’m sure due to the long development process. From first working draft in January of 2008 to stable recommendation in October of 2014, that’s almost 7 years.

There are many compelling reasons to make the change but the one we will focus on today deals with forms and an easier way of inputting a date.

Early on the primary means of capturing a date was supplying a simple textbox and a visual example of the formatting.

text-element-browser

text-element

It was simple but had to have validation to guarantee its formatting.

Another approach would have been using select menus. A lot more code, both to build the lists and to concatenate the values on the server.

dob-select-list

dob-select-list-code

Another option would be to use a JavaScript library like jQuery and plug in their Datepicker UI component.

dob-jquery-datepicker

It would all be so much easier if date were just on option for a form element. Well it is in HTML5!

date-element-code

That simple input type results in a UI structure that looks like the Datepicker from jQuery.

date-element-chrome

This screen capture is using Chrome but it looks exactly the same in Opera. If you use Edge on Windows 10 it looks like this.

date-element-edge

On an iPhone using Chrome within iOS 10 it looks like this.

date-element-chrome-iphone

That’s all the good news, now for the downside. It doesn’t work in any version of IE, Firefox or Safari and doesn’t look promising for the last two in the foreseeable future.

But don’t let that stop you. Remember, if the browser doesn’t recognize the input type it defaults to a textbox, our old standard method. The benefits to the remaining users and all those on mobile devices are all in the plus column.

Styling the Humble Checkbox Using CSS

The checkbox has been a staple in the world of HTML forms since day one and for the most part has remained unchanged. HTML 4 introduced the label tag which can be associated with a checkbox using an id attribute in the checkbox and the for attribute within the label. That way you don’t have to click directly on the checkbox, simply clicking the label will select or deselect it.

If the checkbox looks any different today compared to 20+ years ago it’s only because the browser renders it that way.

A typical form with several checkboxes would look like this:

plain-checkbox

And the code to generate the page looks like this:

plain-checkbox-code

Four simple checkboxes with labels. Nothing fancy but they could be simply by applying a little style using CSS.

Take a look at the same four checkboxes after a CSS makeover:

styled-checkbox

The HTML to generate the page has changed a little, but not all that much:

styled-checkbox-code

You’ll notice the label is still there but it has been emptied and moved after the input tag. We’re using it to create the circles and it is an easy task because the id associates the label with the checkbox. In place of the standard label we’re using a span tag to tell us what the checkbox represents.

All the heavy lifting is being done by an external stylesheet using one class selector, one element selector, and a few attribute selectors.

styled-checkbox-css1

First up we shape the div tag that contains each checkbox. We size it, color it, round off the corners, and position it. The relative positioning is necessary because items within it will be absolutely positioned and need a point of reference.

Next up we create the narrow gray line the circles move along. It’s nothing more than empty content that has been sized, absolutely positioned, and colored.

Now we can start working on the circles, both outer and inner, and we will use our empty labels to accomplish this. They will be positioned, sized, stacked and shaped. Oh yeah, and one last item, a CSS3 transition that will allow the circles to shift when they are clicked.

styled-checkbox-css2

The :after pseudo class will be the vehicle used to create the inner circle.

styled-checkbox-css3

The last three selectors are all attribute selectors aimed at the [type=checkbox]. The first one hides the regular checkbox. The second one moves the label (our circles) 34 pixels from its current position when the checkbox is clicked. The last selector changes the inner circle color when clicked.

A pretty amazing change and all done with a little CSS slight-of-hand.

Using a CSS Reset

One of the frustrations designers have been feeling for some time now stems from web design by committee, or design via theme. Many web sites today are WordPress sites with a theme and some content. Just add words and you have an instant site. Then comes the task of modifying the site and trying to make heads or tails of the built-in CSS. Have fun! And we won’t talk about accidently removing content that hoses the database that breaks the site…Arg! But I digress. Sometimes that frustration can come from the browser itself. Did you know that your browser, user-agent, has its own stylesheet and it is first in line to style everything until you step in?

CSS reset to the rescue.

At least that is the way many people feel. Let me, the designer, decide what things should look like and you, the browser, step aside so I can do my job.

To demonstrate we will be using the first chapter of Mary Shelly’s Frankenstein and three different interpretations of a CSS reset. Here is what the page looks like as rendered by Google Chrome and its stylesheet.

screenCapture-nostylesheet

The HTML is simple and straightforward. A couple of headings and a series of paragraphs. Everything about the page, font, text color, background color, line height, heading size and weight are all set by the browser stylesheet.

frankenstein

The first reset we will use was designed by Vladimir Carrer back in 2010 and is a minimal approach to resetting the user-agent styles. It contains 5 declarations and modifies 18 elements, barely. Two of the declarations deal with tables and we aren’t using any tables.

mini-reset

The end result looks like this:

screenCapture-mini-reset

The primary things you will notice include the weight of the two headings has been returned to normal and the document margins and padding are set to zero. So little change it’s almost not noticeable. “I wanted to make Mini CSS Reset who will focus on the main CSS features like Divs , Tables and Forms who are also the most used CSS(HTML) elements.”  – Vladimir Carrer

The next reset was created by Russ Weakly back in 2010. It is a little more involved but still changes little within our document.

simple-reset

The end result looks like this:

screenCapture-simple-reset

The largest benefit to our document using this stylesheet is the elimination of margins from the top of headings and paragraphs. In essence what is left is “space-below” which makes it easier to control these elements.

The last reset we will investigate today is the shortest but involves the largest changes. It is mentioned in Jason Cranford Teague’s book CSS3. The premise is to reset the most important styles using the universal selector. It changes 10 properties on everything.

reset-simple

The end result looks like this:

screenCapture-cssreset-simple

It almost resembles a document with no tags, therefore, no styles. The thing to keep in mind here are the 10 properties that have been altered and what we want those new settings to be. A reset returns design control to our hands and that is generally what a designer wants.

This reset works well for small to mid-sized sites but can create a lot of work for large sites.

Is It Time for a New Browser?

viv_icon_256Microsoft_Edge_logo_256    logo256

 

When it comes to the topic of web browsers one phrase comes to mind, oh how the mighty have fallen. In the 23 years since the release of Mosaic, “the world’s first popular browser”, we have seen several major contenders rise to the top.

In 1994 the same people that developed Mosaic started a company named Netscape and released Netscape Navigator. Its growth was phenomenal as the popularity of the web was just taking off. Microsoft jumped on the band wagon in 1995 with Internet Explorer. During these early years Netscape dominated with as much as 90% of the market. Then and before you knew it the first browser war was being waged.

Microsoft bundled Internet Explorer with their Windows 98 operating system and said it was free which forced Netscape to stop charging for their browser. Within a matter of a couple of years the numbers were completely reversed and Internet Explorer had a 90+% market share.

Meanwhile in Norway a small browser named Opera was released in 1996. You’ve heard of it…right?

The two major players continued to battle it out when Apple decided it was time to introduce their own browser for their operating system. Safari made its debut in 2003 and was available for both Apple and Windows computers from 2007 until support for Windows was dropped in 2012.

Unfortunately neither Opera nor Safari seemed to be offering much competition to the now reigning browser, Internet Explorer. Quietly behind the scenes, Netscape had launched the Mozilla Foundation in order to introduce the open-source model to the world of browsers. It resulted in the release of Firefox in 2004. From the time of its release until its peak at about 28% in 2011 Firefox chipped away at Internet Explorer’s dominance.

Google, I assume you’ve heard of it, released Chrome in September of 2008. With chinks in its armor already showing from battling Firefox, Chrome piled on Internet Explorer as well. It probably didn’t help that Internet Explorer had been sitting on its browser duff and most web developers considered it to be a pain to work with. Oh yeah, and there were at least 4 different versions still being used.

Somewhere along in May of 2012 Chrome passed Internet Explorer as the top dog browser and as it continues to rise…Internet Explorer continues to fall.

So, the title of this article said something about a new browser. Truth be told we have several new choices.

If you have moved over to Windows 10 Internet Explorer is no longer installed by default. Microsoft’s new browser is called Edge and is a light-weight standards compliant application built on a new engine that has removed support for legacy technologies like ActiveX.

Pale Moon is an open source browser for usage on a Windows or Linux operating system.

“Pale Moon offers you a browsing experience in a browser completely built from its own, independently developed source that has been forked off from Firefox/Mozilla code, with carefully selected features and optimizations to improve the browser’s speed*, resource use, stability and user experience, while offering full customization and a growing collection of extensions and themes to make the browser truly your own.”

http://www.palemoon.org/

The newest of the new would be Vivaldi, released on April 6, 2016. Started by former Opera CEO Jon Stephenson von Tetzchner, it exists due to dissatisfaction with the direction Opera has chosen to move.

“Fast forward to 2015. The browser we once loved has changed its direction. Sadly, it is no longer serving its community of users and contributors — who helped build the browser in the first place.

So we came to a natural conclusion: we must make a new browser. A browser for ourselves and for our friends. A browser that is fast, but also a browser that is rich in functionality, highly flexible and puts the user first. A browser that is made for you.” – Jon Stephenson von Tetzchner

https://vivaldi.com

Exciting times are upon us again. Change is something we fight yet we fail to remember that change in inevitable. It was Netscape. It was Internet Explorer. It is Chrome. What’s next?

CSS3 Multiple Columns

Doing a basic web page text layout using more than one column has been much more of a chore than it ever should have been. In the early days of web design almost everything was built using tables. Actually tables inside tables inside tables. Along comes HTML 4.0 with its companion CSS but we still continued using tables. Why, because our browsers weren’t compliant.

It should have been easy because CSS introduced the float property. Take two div tags and float them side by side and we have the basic design concept of two columns. Eventually browsers did embrace CSS and what it offered but it still could have been easier.

Finally CSS3 has addressed the problem with a breakthrough simple solution. We now have a series of column properties that will allow us to divide our content into as many columns as we need.

Columns have been used in printing for a variety of reasons one of which is keeping text lines short enough to make reading easier. No long lines so you need your finger to trace down to the beginning of the next line. Lines of a length that we can read as a thought and not just a group of words.

That line length is generally considered to be between 65 and 90 characters. Taking that into consideration we can look at the first chapter of Mary Shelly’s Frankenstein laid out in full screen.

full-screen-width-text

The html is simple and straight forward.

chapter-one

By adding just a few lines of code to our CSS file (still using the necessary browser prefixes) we can ask the browser to flow the text into as many columns as we need.

css-column-propeties

I have chosen to set the column width property but we could also have used column-count and set its value to 2, 3, 4 or however many columns necessary.

two-column-text

In a commented area about our section settings you can see the list of CSS3 column properties. Count, gap, rule, and width are the primary choices. Column-span would allow us to span the title across multiple columns. Time will tell how much longer we need to use the browser prefixes but as long as they are included multiple columns are finally easy to implement.

Cropping Images with CSS

There are times when you want to focus on a specific area of a photograph but don’t need a separate, cropped version of the picture. CSS offers an approach that will maintain the complete, original image but allow you to crop, mask, or clip your picture.

Let’s begin with a simple example. This page includes a full-size image of a young lady sipping a cold beverage on a beautiful spring day.

(more…)

Using CSS3 Instead of JavaScript

CSS3 has been in development since 1998, that’s right, 1998. Both CSS1 and CSS2 became standards in quick succession, December of 1996 for CSS1, and May of 1998 for CSS2. One of the main differences between CSS3 and its predecessors is the use of documents or “modules” to contain different components of the specification. Some examples would include media queries, level 3 selectors, level 3 color, and multi-column layout. These modules progress at different rates and are largely dependent on browser support.

There are two specific modules we are going to take a look at today: transforms and transitions.

Transforms can be 2D or 3D and allow you to scale, rotate, move, or skew an object.

Transitions allow you to change properties smoothly from one value to another, over a measured duration.

These two modules in combination allow us to perform basic hover effects that in the past were only doable using JavaScript. The advantage of using CSS is twofold: less code, and slightly better performance since animating a transform occurs in the GPU.

If you are concerned about browser support we have included screen captures from caniuse.com. All is well as long as your users/clients have progressed beyond IE9.

caniuse-transform

caniuse-transitions

Our demonstration will begin with a simple list that will be styled to look like a couple of sticky notes.

html-step-1

To make our sticky notes appear to be hand written we would like to use a font that looks that way, hand written. CSS3 makes that easier now because of the addition of web-fonts. For years we were stuck using the same fonts over and over again. Now it’s as easy as going to Google Fonts, selecting something from their list of over 700 fonts, clicking the quick use button, copying a link and pasting it into the head of your web page. Just use the name of the font supplied by Google in your stylesheet and you are good to go.

css-step-2

We’ll also add a drop shadow to give a sense of dimension to our notes. You’ll notice a prefix being used for this code. With 5 browsers vying for your attention and each of them progressing at a different pace they have taken to using slightly different syntax. This prefix is necessary for a given browser in order for your style to work. Eventually all browsers will use a standardized syntax, but for the time being we will include the prefix to guarantee success.

css-step-3

With some basic styles in place our page should look like this.

screen-shot-2

Now we want our sticky notes to appear randomly placed which means they shouldn’t look straight or level. That’s where transform comes into play. We’ll take each note and rotate it and use relative positioning from CSS2 to move them up or down. We are also using the CSS3 pseudo class nth-child to select which list item we are styling.

css-step-4

Our page now looks like this.

screen-shot-3

The over-all effect we are looking for is a zoomed in, straightened view of our sticky note. To accomplish this we will use the CSS2 pseudo-class hover. It will allow us to scale our note using transform and then time and smooth that transformation using transition.

css-step-5

css-step-6

(more…)

10 Web Resources for Front End Developers

Things on the web move so fast they make the idea of “time flies” seem slow. The World Wide Web has been available to the public since 1991, 25 years this fall. Most people today couldn’t imagine life without the web.

Developers are faced with a tremendous challenge today. The web is a moving target. So much so that WHATWG (Web Hypertext Application Technology Working Group) has chosen to refer to HTML as a “living document”, meaning it is constantly being edited and updated.

This means the tools we use and the items we refer to change constantly as well. This list of 10 web resources includes sites I have used for years, and a couple I’ve just discovered. They range from color references to HTML references to best practices. Are they perfect…no. Are they all inclusive…no. But you gotta start somewhere!

caniuse.com

caniuse

If you’re designing for the web today you’re using HTML5. And if you’re using HTML5 you are still faced with browser compatibility issues. This site is a great location to determine what features are compatible with your users most commonly used browser(s).

paletton.com

paletton

Originally known as ColorSchemeDesigner.com, paletton.com is the one tool in this list I have used and referred people to the longest. It is a great color planning and utilization site. Others have come along but it is still my go-to color scheme planner.

color.adobe.com

color-adobe

This is one of those “others have come along” sites I just mentioned. It began as kuler.adobe.com and has changed the kuler part to color (kuler is a Mauritian Creole word that means color). One of the benefits of this site are the thousands of color themes available.

HTML5 Cheat Sheet

html5-cheat-sheet

The one page, downloadable reference to HTML5 tags. It is available as a PDF file or a .png file. Grab a copy and throw it in a centrally located folder so it’s there when you need it.

typewolf.com

typewolf

If content is king, typographic characters and correct grammar are important! A great reference for those who “get it” and for those who don’t. After all, according to Oliver Reichenstein, web design is 95% typography (please feel free to discuss among yourselves).

javascripting.com

javascripting

There seems to be a never ending array of JavaScript libraries and frameworks to deal with. As this site tells us it is the “definitive source of the best JavaScript libraries, frameworks, and plugins”. Check it out and put that statement to the test.

youmightnotneedjquery.com

might-not-need-jquery

As browser compatibility improves there are times we can accomplish a lot with a little. A little JavaScript more specifically. There are times we don’t need to load an external resource to do something we can do in our own code. This site demonstrates many examples, from effects to events, proving that less can be more.

regxlib.com

reg-ex-lib

Since we were just talking about JavaScript, how ‘bout them regular expressions? Almost since day one, JavaScript has been used for form validation. IMHO it’s hard to beat the RegExp object for verifying the information supplied in a form is correct. This site has thousands of prebuilt expressions ready to use.

regular-expressions.info

regular-expressions-info

In case you didn’t get the concept I think regular expressions are powerful validation tools, here’s another resource. The last site had lots of code to use, this site has more information on the how-to part of things.

github.com/bendc/frontend-guidelines

frontline-guidelines

I mentioned best practices at the beginning of this post and this is one person’s interpretation. A series of recommendations dealing with content, presentation, and behaviors. (more…)