Drop Down Menu

Tuesday, November 26, 2013

No more boring fonts for your site!

Accommodating possible font options for every user has been a daunting task in years past.  True creativity in web design has suffered to make sites more usable.  The code for hosted fonts has been available but with a cost attached.  That is changing with HTML 5 and CSS 3, hosting fonts is becoming main stream.  Let’s dig into using specific fonts for our web designs.

Tasks involved:
  1. Acquire the font you wish to use on your site.  You can do a search to find an endless list of possible choices.  I downloaded a font I liked from http://www.fontsquirrel.com/ .
  2. Unzip the download, and remember to include the font file when you upload your site.
  3. Add a style linking to the font.
  4. Apply the font to the html page.

You should be able to handle the font download so let’s dig into the code to make the font work on your site.

link to the font: Add this in the style tags.

@font-face
{
font-family: HennyPenny;
src: url('HennyPenny-Regular.otf'),  url(' HennyPenny-Regular.eot'); /* IE9 */
}

CSS to apply the font: Works with other tags as well.

p {
font-family: HennyPenny;
font-size: 12px;
}


I added the font to the page created for earlier HTML 5 posts, check out the fancy font!



















Tuesday, November 19, 2013

HTML 5 Semantics = cleaner code!

In the past if you wanted to style generic tags like the paragraph tag you could use p for the selector and add properties that would affect every paragraph tag on the page or in the document.  Or you could have just created class selectors to apply to different paragraph tags.  All viable options but a  lot of extra coding is required and great organization is needed to apply the right class to where you needed it used.

Now with semantics you can format every paragraph in a specific section by using pseudo selectors.   If you need a review on how to use HTML 5 semantics please review previous posts explaining

Using our example of a paragraph tag let’s look at how we can now format text according to semantic element:

New Way
Old Way
CSS EXAMPLE:
header p {
font-family: helvetica, arial, sans-serif;
font-size; 2em;
color:#000000;
}

section p {
font-family: helvetica, arial, sans-serif;
font-size; 1em;
color:#336699;
}

HTML EXAMPLE:
<header>
<p> My company rocks content. </p>
</header>
<section>
<p> My company rocks content. </p>
</section>


CSS EXAMPLE:
Applies to every paragraph on the page
p {
font-family: helvetica, arial, sans-serif;
font-size; 1em;
color:#000000;
}

OR for formatting paragraphs differently

.class {
font-family: helvetica, arial, sans-serif;
font-size; 2em;
color:#000000;
}

.class2 {
font-family: helvetica, arial, sans-serif;
font-size; 1em;
color:#336699;
}


HTML CLASS EXAMPLE:
<p class=”class”> content for first class goes here </p>
<p class=”class2”> content for second class goes here </p>



Of course the less code I have to write the better! You can use this method for other semantic tags and with tags other than paragraph. More tips coming soon.

Tuesday, November 12, 2013

Formatting HTML 5 Semantic tags with CSS 3

Last week we got a taste of HTML 5 semantics, this week we will look at how to style them using CSS 3.  Really both html and css will work in tandem even more than they have in the past.  In addition the old html formatting tags are depreciating and will soon be obsolete.  So learning CSS is a must. 


Let’s build this diagramed layout. So you can see how to use the semantic tags.  First we need to look at the CSS.









header {
background-color:#EFCE16;
width: 100%;
height:90px;
clear:both;
}
We are specifying background color and width in percent so the screen will be adjustable.  There is a height added for the purpose of making it show in this example, but you can make it a percent or experiment more with that, the last style clears any possibility of this element to float.
nav {
background-color:#918F87;
width: 100%;
height:25px;
clear:both;
}
Just like the header we have background color, flexible width, height for showing the element in this example and we are clearing any floats.
section {
background-color:#EFE3A7;
width: 70%;
height:200px;
float:left;
}
The section is the main column so in addition to defining a themed background color and a float we need to make sure the width is smaller to accommodate a column on the left.
aside {
background-color: #1294C1;
width: 30%;
height:200px;
float: right;
}
Using aside for the right column means we need the width to add accommodate the design.  That means if section is 70% then aside can’t be larger than 30% or it will drop below its intended resting spot.  Of course since section floats left aside must float right.  Of course we have a coordinating height and added a background color.
article {
background-color:#0B6994;
width: 60%;
position: absolute;
left: 20px;
top:180px;
height:30px;
}
Since the article is dropped in absolute positioning was used, with top and left values defined.  This can be experimented with further to help it drop in just the right place.  Like other elements background color, height and width were added to the style.
footer {
background-color:#EFCE16;
width: 100%;
height:50px;
clear:both;
}
For this layout footer can be set up like the header.

So how could this code look on an actual html page?

<!DOCTYPE html>
<html>
<head><title> test </title>
<style type=”text/css”>
header {
background-color:#EFCE16;
width: 100%;
height:90px;
clear:both;
}

nav {
background-color:#918F87;
width: 100%;
height:25px;
clear:both;
}

section {
background-color:#EFE3A7;
width: 70%;
height:200px;
float:left;
}

article {
background-color:#0B6994;
width: 60%;
position: absolute;
left: 20px;
top:180px;
height:30px;
}

aside {
background-color: #1294C1;
width: 30%;
height:200px;
float: right;
}

footer {
background-color:#EFCE16;
width: 100%;
height:50px;
clear:both;
}

</style>
</head>

<body>
<header> Page header goes here. </header>
<nav> HOME | ABOUT US | CONTACT US </nav>
<section> Page content goes here.</section>
<aside> Right column content goes here. </aside>
<article> Special attention getter goes here. </article>
<footer>Copyright, legal, text links. </footer>
</body>

</html>

Check out how this code looks in a browser with two potentially different screen widths:



This is just a small taste of how HTML 5 and CSS 3 can work together.  More exploring and posts coming soon! If you missed the overview of semantics check out last weeks post!

Tuesday, November 5, 2013

HTML 5 Semantics

What are HTML 5 Semantics?

Semantic tags are tags with a special purpose.  Non-semantic tags like <div>  and <span> are generic in use since you could apply them pretty much anywhere in your code and style them  for use. There are tags that we are already familiar with that fall into the semantics category like <form>, <table>  and <img> but there are new tags with a very specific purpose that will make organizing a layout much easier to do.

Some of the new tags seem obvious  but others might need a little more explanation, so let’s talk about the most common semantic tags a little further.

<header> used to hold a banner, business logo or tagline sitting at the top of the page.  Don’t confuse this tag with head which is a structural tag and does a completely different job.


<nav> this tag should be easy, it holds navigation.

<footer> the bottom of most pages could have text links, copyright information, and maybe legal disclaimers.  This tag is meant to contain these elements.

<section> contains elements that are part of the site theme and in the main flow of content.

<article> used for blocks of copy that might pop out more taking on a contrasting color or element.

<aside> used for content that runs in a column next to the main content area.

Now that we have a taste of semantics for HTML 5 we need to dive into how we can use them, and that will take a little CSS 3 which we will tackle next week.