Design « Christopher Ross

Archive for the ‘Design’ Category

10
Jan
2010

How to center a header, with HTML and CSS

Welcome to my blog, please feel free to subscribe to my RSS feed, join me on Twitter or leave a comment.

Here’s a quick tip that’ll help you centre a heading using nothing more than a little bit of HTML and CSS.

First, in a new HTML document (which you can create using something as simple as NotePad or Textedit simply by saving your text document with the .html extension), you’ll want to create a new heading. You can do it by including the following code in your document:

<h1>Hello World</h1>

This text adds a standard heading to your website but what if you want to centre the heading on the page? Easy! Let’s modify the standard <h1> tag to apply a style sheet directly to it:

<h1 style=’text-align:center;’>Hello World</h1>

You’ll notice that I don’t need to setup an individual style sheet to accomplish this task, simply adding the style attribute will allow me to make the changes to this one specific item. If I want to be able to centre multiple items, I could use a style sheet class to accomplish the task:

Note the class is represented in the style sheet as a period (.) plus the name of the class. Similarly, if I wanted to assign the centre to all occorances of the <h1> tag I could use:

Tags: Attribute, Class Center, Css Html, h1, Heading, Hello World, Html Css, Html Document, Html Extension, little bit, lt, Notepad, Style Sheet, Style Text, tag, Text Document, Text Html
Posted in HTML Programming

03
Nov
2009

How do I add the date to my blog?

1 Comment

There are a lot of times when we want to add something as simple as the date to our blog but coding (especially in PHP) can be a bit difficult. Let me walk you through the steps to adding a date to your blog, assuming of course you use WordPress.

First, open your template files such as the footer by loading the footer.php file located in your /wp-content/themes/[theme name]/ folder.

Next, we need to insert a very simple PHP function called date() into your page but before we do that, we need to make sure that we open and close the PHP event. To do this, simply open it using <?php and close it using ?>. The date() function itself requires a formating argument, but luckily we’re not meant to remember them all. They can be found on the PHP date() reference page.

As an example, if you want to show the day of the week that it currently is you could open your website and edit it every day (highly impractical) or you could insert the code <?php echo date(‘l’); ?> into your page. Note that I open the PHP event, place the date() function with the argument ‘l’, indicate the end of a line (;) and then close the PHP event. Each of these elements are required to properly format the date.

If you would like to show the current year, simply use: <?php echo date(‘Y’); ?> because Y is the symbol for the year. On the other hand, if you’d like to use something more complex, try <?php echo date(‘l jS \of F Y h:i:s A’); ?> which will return something like Monday 8th of August 2005 03:12:46 PM.

Once you’ve saved your footer.php file, simply re-upload it to your server and voila! Now you can set the date using your server and PHP instead of editing files every day! In more practical terms, it is how you can always have an updated copyright notice of your website without having to remember to update it each January.

Tags: blog, code lt, Content Themes, copyright notice, Current, Date Function, elements, footer, Js, Php Date, php echo, Php File, Php Function, Php Reference, Reference Page, upload
Posted in Design

02
Oct
2009

Photoshop tutorials

6 Comments

One of my dirty little secrets is that I’m a photo junkie. I absolutely love reading magazines like Layers (which btw, you can win a copy of here) which are jammed packed with Photoshop tutorials that make it so even the untrained can learn to be a master of Photoshop. There are even some great Photoshop video tutorial sites out there, so instead of just reading about the methods you can actually watch people put them together.

One of my favorite techniques at the moment is called HDR (How to add impact with HDR) or high dynamic range imaging. This is a process in which images dynamic lighting is adjusted to make blacks appear much darker while also pushing the lights to an extreme. We see it often in movies such as 300, but more commonly in magazine ads these days.

Now the question really is, how do you do it? That’s what I love about the Internet. If you go to Google and ask how to do HDR in Photoshop, it’ll tell you … which means that any young photographer out there (or Photoshop junkie) is able to do just about anything as long as they have access to Google and Photoshop!

I’d love to see some examples of your own HDR work, so if you’ve got any links please feel free to share.

Tags: Dirty Little Secrets, Dynamic Lighting, google, High Dynamic Range, images, Little Secrets, love, Magazine Ads, Magazines, photo junkie, photographer, Photoshop Tutorial, Photoshop Tutorials, video tutorial
Posted in Design

10
Sep
2009

Easy tool for new website owners

4 Comments

I came across a website last night while surfing around for a new photoshop plugin that I thought was kind of cool and wanted to share with you, it’s like an online photoshop for beginners and lets you make funny photos or apply a range of filters to your existing pics. Every day they add new funny pictures effects, which is really cool.

Here’s some examples of what I did just today to give you an idea how easy it is:

Take a look for yourself, it’s a lot of fun. http://en.picjoke.com

Tags: Funny Photos, Funny Pictures, New Pictures, Photoshop Plugin, Surfing, Tool
Posted in Blogging, Design

11
Aug
2009

Five things I wish I could have told myself 10 years ago.

3 Comments

Back when I was a young(ish) pup doing design work in Toronto, I made a lot of bonehead decisions. Most, but not all I came to regret later on and looking back, here are some things that I wish I could tell myself:

Stop chasing technology.

Back in 1998 the big technology was HTML, Flash scripting and Perl but as the Internet began to really take off I was introduced to hundreds of options including several new flavors of HTML, multiple new programming languages (PHP, ASP etc) and new technologies weekly. While it served me well to understand most of these, it was a waste of time to try to follow most of them.

My advice to myself: Stop trying to master multiple technologies. Instead, focus on one and keep your eyes open for signs that it’s time to learn more after you’ve mastered the first.

Listen to your elders.

I appreciate that this is advice every ‘generation’ tries to give to the next but in my case, I really wish somebody had pointed this out to me. Not because those older then me know anything (especially about the web) but because … everybody likes to be listened to.

My advice to myself: Take advise from those who offer it and try to learn as much as you can so that you don’t have to repeat others mistakes.

Invest in plastics.

No, not plastics … the Internet. Well, I did that (as you can tell) but the advice is still sound. More to the point, never be afraid to predict what the future might hold and prepare yourself for it. Luck it appears isn’t random, those who are ready when opportunity knocks are often the ones we later consider “lucky”.

My advice to myself: Invest in the future, live in the present and learn from the past.

Jobs come from people, not companies.

People send you work when you’re competent and charismatic, companies never send you work. I wish I’d known this sooner but apparently, business decisions are made by people based on a number of factors including how well they like you, the quality of your work and how punctual you are.

My advice to myself: Be good like a waiter … get it to them on time, make it look great and keep a smile on your face.

Never be afraid to fail.

In my life I’ve learnt more from failure then I ever did in school. Don’t be afraid to fail, don’t be afraid to fall down and certainly don’t be afraid to look like a fool. Taking chances is how you get ahead in life and the more chances you’re successful at, the further ahead you’ll be.

My advice to myself: Relax, learn, retry.

(where’d I get the awesome photo? Huge thanks to Sara Petagna!)

Tags: 10 Years, advice, Business Decisions, Elders, Invest, jobs, Lot, Multiple Technologies, New Flavors, Perl, Plastics, Programming Languages, Pup, Scripting, signs, technology, toronto, Waste Of Time, When Opportunity Knocks
Posted in Design, HTML Programming, Marketing Advice, Twitter, Web Site Advice

17
Jul
2009

What is HTML?

No Comments

HTML is an acronym for HyperText Markup Language, the basic publishing language of the Internet.

Every computer document needs a way to be read and understood by a computer program, for example Excel spreadsheets are stored in a special file with the extension XLS which stores all the rows, columns, headers, footers, special cells, math equations etc for Excel to read and understand. Likewise, the HTML file format stores everything an Internet capable device needs to know to read and interpret a web document such as a web page.

There are actually a number of types of HTML, the first was created by Tim Berners-Lee in 1980 and composed of 22 tags, these special tags allowed users to define the paragraphs and other structural elements of their document as well as some basic elements for leaving comments and document items such as the title.

Although it’s been almost 30 years since the first standard was published, most of the basic elements of HTML are still used. For example, to give your document a title we still use the <title>My Title</title> tag combination and to form a paragraph, the <p>This is my paragraph</p> tags are used. In a lot of ways, the simplicity of HTML is what has allowed it to be so expandable.

You may have noticed that the examples above use an opening <p> and closing </p> tag to designate objects in the HTML code, this is fairly common and easy to understand principle. Essentially every element on a page should have both an opening and a closing tag to show where it begins and ends.

Common examples of HTML block tags are:

The paragraph – <p>
Unordered (Bullet) Lists – <ul>
Ordered (Numbered) Lists – <ol>
Headings (there are several) – <h1> … <h6>

While the above tags allow us to layout a basic HTML document such as a resume, it’s important to note that there are some additional basic formating tags needed as well. For example, if you would like to bold a word, you will need to use the <b>bold</b> tags.

Speaking of which, since HTML has evolved a long way we can sometimes achieve the same effect with different tags. For example, <b>bold</b> and <strong>strong</strong> have the same effect in most web browsers. Why the difference? The word bold refers to a method of formating, which implies the purpose of HTML is to affect appearance, while strong implies that the selected text be more significant than the surrounding text without assuming design elements.

Let’s look at another example, the HTML formating tag <i>italics</i> forces a web browser to display text as italics but <em>emphasis</em> has the same default effect. While they both force the document to appear the same (with italic text) this is not always the desired effect. Perhaps we would like a word to appear darker or lighter than the words around it when it requires emphasis. So a word that we would assume to be italics is in fact displayed as bold, depending on the formating instructions of the designer.

To format HTML text, we have several possibilities:

bold / strong – <b> <strong>
italics / emphasis – <i> <em>
pre formatted – <pre>

As time moved forward, many additional tags and functions became supported by HTML as some tags became depreciated, others found themselves being introduced.

Tags: Acronym, Basic Elements, Basic Html, Basic Publishing, Capable Device, Computer Document, Computer Program, File Format, Formating, h1, H6, Headings, Html Document, Markup Language, Math Equations, Spreadsheets, Tag Combination, Tim Berners Lee, web document, Xls
Posted in HTML Programming

25
Jun
2009

How to quickly design a quality web site

4 Comments

The first thing that you have to know about building a great looking website is that it’s super easy, super cheap and takes almost no time at all. The basics are already stored on your computer, and those basics can be easily put together like a sandwich to build a great website quickly.

Defining your layout

Step one, let’s decide what your new website is going to look like. Surprisingly, most website designs can be boiled down to just a few basic layouts.

Of course there are plenty more than the few I’ve laid out here but for the purpose of our project, I want to keep this simple and selected the first option, a traditional website layout with a header, footer and two columns.

The HTML used to create this basic web page layout is:

[source lang="html"]
<body>
<div id=’page’>
<div id=’header’>Page Header</div>
<div id=’content’>Content</div>
<div id=’sidebar’>Sidebar</div>
<div id=’footer’>Page Footer</div>
</div>
</body>
[/source]

Preview Page

To format the page properly we also need to add some basic CSS:

[source lang="css"]body {
margin: 0px;
padding: 0px;
text-align: center;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
}
#header {
background-color: #CCCCCC;
clear: both;
height: 100px;
}
#footer {
background-color:#00FFFF;
clear: both;
height: 100px;
}

#sidebar {
background-color:#FFFFCC;
clear: left;
float: left;
width: 200px;
}

#content {
background-color:#ffffff;
clear: right;
float: right;
width: 600px;
}[/source]

Preview Page

As you will now see, the page content is placed in the appropriate areas for our website. For those of you who are clever with CSS, you can change to the second layout by changing the flipping the content and sidebar’s clear/float values. Technically, if you look at the HTML for this page, the sidebar appears to the right of the HTML but is formated with CSS to appear on the left, this is a Search Engine Optimization trick to move our content closer to the top of the page.

Designing the Web Page

The Header

Now that we have a basic layout for our website, we need to add a little bit of flare, to do this we need some color and some texture. The best place to get it? Flickr or other online photo database. In this case, I’m going to use a macro focus pair of blue sneakers from Fey the Ferocious.

What I want to do is use the sneaker photo as both the header and the color scheme for the website, this is make fairly easy since the photo has such rich colors. Let’s get started with the header by adding a title as well as a menu in the code as such:

[source lang="html"]<div id=’header’>
<div id=’logo’><strong>Website Name</strong></div>
<div id=’menu’>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
</div>
[/source]

By adding this simple header structure, we’ve given the HTML everything it needs to build our header. The next step is to add some basic CSS to the file in order to format and structure the piece.

[source lang="css"]#page {
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
font-family: "Lucida Sans", Arial, Helvetica, Geneva, sans-serif;
}
#header {
background-color: #CCCCCC;
clear: both;
}

#logo {
background-image: url(3031455100_f5450c9645_b.jpg);
padding-top: 50px;
padding-bottom: 50px;
padding-left: 50px;
background-position: -200px;
font-size: 24px;
color: #FFFFFF;
}

#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
display: inline;
padding-right: 10px;
}
#menu a {
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}
[/source]

Take care to note that I’ve altered the #header and #page format a little to account for the new items, including the fonts I would like to use.

Here’s what my new header will look like:

Preview Page

The Footer

Once the header is completed, I like to work on the footer next. I’m not entirely sure why I do it this way but I find the footer equally important as the header and sometimes it seems to be an after thought on web pages, so I like to address it while I’m still fresh.

The footer has to contain some basic elements such as copyright and links, to accomplish this here’s the HTML code that I’ll use:

[source lang="html"]<div id=’footer’>

<p>© Copyright 2009, Website Name. All rights reserved.<br />
Header photography by <a href="http://www.flickr.com/photos/renneville/3031455100/">Ferocious Feyrannosaur</a>, <a href="http://www.thisismyurl.com">website design by Christopher Ross.</a><br />
</p>
</div>

[/source]

The CSS for the footer is equally simple:

[source lang="css"]#footer {
clear: both;
height: 100px;
font-size: 10px;
color: #666666;
margin-top: 5px;
padding-top: 5px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
}
#footermenu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#footermenu li {
display: inline;
padding-right: 10px;
}
#footer a {
color: #666666;
text-decoration: none;
}[/source]

Since a footer is the technical, ‘legal’ notes for a website, I make it slightly smaller and lighter as to not distract from the rest of the page. Make note of the changes to the original #footer code as well.

Preview Page

Formating the Sidebar

Before we get into formating the sidebar we need to make sure there is some space to the right of it so that the content doesn’t butt right up against the sidebar content. To do this, we need to add a padding area inside the sidebar along with our new content. To do this, I will add a margin to the boxes we add but first we have to change the basic HTML of the sidebar.

First, let’s add a new division element with the box class and add a level two heading for each, along with a paragraph of test (for now I’ll use Lorem Ipsum) along with the link.

[source lang="html"]<div id=’sidebar’>
<div class="box">
<h2>Item 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent orci lectus, iaculis ut ullamcorper id, porttitor ut dui. <a href="#">Item 1</a></p>
</div>
<div class="box">
<h2>Item 2</h2>
<p>Sed eget placerat elit. Curabitur sit amet ullamcorper massa. Donec id viverra dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Item 2</a></p>
</div>
<div class="box">
<h2>Item 3</h2>
<p>Suspendisse in quam ac magna condimentum fringilla sit amet sed orci. Fusce interdum ligula eget mauris imperdiet iaculis. Donec eu auctor turpis. Donec ullamcorper hendrerit urna quis malesuada. <a href="#">Item 3</a></p>
</div>
<div class="box">
<h2>Item 4</h2>
<p>Quisque blandit, ante eu tempus tempus, massa lectus dignissim ipsum, id interdum dolor mauris non mi. Ut in orci turpis, non tincidunt nunc. In placerat diam in sem cursus dictum. Morbi ac urna urna. Ut nulla tellus, gravida a iaculis ut, tempus et odio. <a href="#">Item 4</a></p>
</div>
</div>[/source]

Trust me, this looks a lot more complicated than it really is! Take a look …

Now we have to add some CSS to format this content:

[source lang="css"]#sidebar {
clear: left;
float: left;
width: 200px;
font-size: 10px;
color: #666666;
padding-bottom: 20px;
}
.box {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
padding-right: 10px;
margin-right: 10px;
}
.box h2 {
color: #3B4A88;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0px;
padding-top: 10px;
padding-bottom: 0px;
}
.box p {
padding-top: 0px;
padding-bottom: 10px;
margin-top: 0px;
margin-bottom: 10px;
}
.box a {
font-weight: bolder;
color: #3B4A88;
text-decoration: none;
}[/source]

Preview Page

The Content

Finally, to complete the webpage we have to add some content. Again, I’ll rely on Lorem Ipsum for the purpose of putting some quick content into the website, you can add your own text later.

Preview Page

There are not a lot of major changes to the content in this design, if it was a client project I’d add a sizable number of CSS modifications in order to format the pages but as a demo of how to quickly design a quality website I think it’s pretty good.

You can look at the website with CSS as well as a version with no CSS to give you an idea of the changes. You’re also welcome to download the source code and use this website template as a basis for your own website.

You might also want to check out a couple simple variations to this theme:

Tags: Auto Text, Background Color, Basic Web, Body Margin, Color Ffffff, Content Background, Div Id, First Option, Header Footer, Html Basic, Layouts, lt, page content, Page Footer, Page Header, quality web, Sandwich, search engine, Web Page Layout, Website Layout
Posted in HTML Programming, Web Site Advice

10
Jun
2009

How to exclude yourself from Google Analytics with WordPress

1 Comment

Without data we’re only guessing so it’s critical that we not only have great data to make decisions with but also that the data we do have is as free from corruption as possible. With that in mind if you run a WordPress website and Google Analytics, you’re most likely skewing your data without realizing it by visiting your own website.

To stop yourself from being counted as a visitor, all you need to do is add a simple piece of code to your websites header.php file that will read:

[source lang="php"]<?php
if (is_user_logged_in() == 1) {
if (wp_get_current_user()->ID == 1) {
setcookie("analyticsexcludeme", "analyticsexcludeme", time()+3600);
}
};
?>[/source]

Make sure the code is placed above the Google Analytics code (which I always like to place in the footer of my websites anyways). Once this code is placed in your header file, your website is updated but you’re not finished yet!

The code is only the first part, it’s what tells Google that you’d like to be excluded but now we need to actually exclude you.

Log into your Analytics account and click Analytics Settings.

Next, open the Filter manager (very bottom right corner).

Finally, add a new Filter with the settings:

This will tell Google to exclude all visitors who have the cookie “analyticsexcludeme” in their web browser, the same cookie we set earlier in the header code section of this tutorial.

Tags: Bottom Right Corner, Current User, Decisions, Filter Manager, footer, Free From Corruption, google, Google Analytics Code, Header Code, Header Php, lt, Own Website, Quot Quot, Setcookie, web browser, WordPress
Posted in HTML Programming, Marketing Advice, Web Site Advice, WordPress Help

13
May
2009

How to create an Aqua button in Adobe Fireworks Video

3 Comments

One of things I promised myself last fall was that I would take a bit more time and start putting up tutorials for you but I’ve been so busy with projects since October that I simply haven’t had a lot of spare time.

This week is different, I’ve just put up a new YouTube video tutorial showing how to create an Apple / Aqua style button in Adobe Fireworks using just three circles.

To help you follow along, here are the steps in non video format …

Create a new document

I choose to do mine as a 200 x 200 pixel document but you can select any size you’d like.

Create a new circle

Add a circle to your document and size it to be the same size as your working area, located at 0,0. This puts it in the top corner.

Create the top glow

Copy (Apple-C) the base circle and past it (Apple-V) to create a second circle. Transform it (Apple-T) to be half the size and push it up near the top of your base circle.

Create a linear gradient, white to white with an opacity of 100% to 10%. Then, add a gaussian blur to the circle to make it blend.

Create the bottom shadow

Copy (Apple-C) the top glow and past it (Apple-V) to create a third circle. Transform it (Apple-T) to be half the size and push it to be bottom of your main circle. Edit the linear gradient, to make it black to black adjusting as you see fit.

Beveling the main circle

To make the main circle appear bevelled, select it and add an inside glow, adjusting the settings to suit your visual needs.

When you’re done what you should have is a pretty nifty and easy glowing button effect for graphics on your website, I’ve included the YouTube video here for you if you’d like to follow along. Please don’t forget to comment or link to other cool tutorials if you’ve enjoyed this one.

Tags: adobe, apple, Aqua Button, Button Graphics, circles, Fireworks Video, Gaussian Blur, Linear Gradient, Opacity, pixel, Shadow Copy, Spare Time, Style Button, Video Format, video tutorial, Youtube Video
Posted in Design

02
May
2009

How to use the heading tag to improve search engine listings

12 Comments

In HTML there are few tags as important as the <h1> tag. It is literally the heading for your page and when we talk about how to structure a document, we’re taught that the <h1> tag should represent the title of the document.

Common Mistakes

Having more than one H1 per page.

A web document can have only one title, and that’s what the H1 tag is meant to be. Instead of having more than one, use the <h2> tag and stylize it with CSS.

Using the H1 tag because you like the font size

The H1 tag is big because it’s meant to be important not because people think it’s pretty. As will all HTML elements, you can use CSS to change the look and feel of tags easily. For example:

[source lang="html"]
<h1>Test Title</h1>
<h2>Test Title Two</h2>
<strong>Test Strong</strong>
[/source]

[source lang="css"]
h1,h2,strong {
font-size: 100px;
font-weight: normal;
}
[/source]

Using the code above will make all H1,H2 and strong (bold) tags throughout a website look identical.

Using the same H1 throughout the site

The purpose of the H1 tag is … as I’ve said to represent the content of a specific page so it’s important that the contents of your heading are unique for each page.

Using the H1 for the wrong content, or not using it at all

If the purpose of a heading tag is to highlight the heading (or title) of the document, then not including one at all will result in search engines being unable to properly understand your content.

Using Heading Tags to separate content

Let’s take a look for example at a simple piece of Lorem Ipsum to see how search engines may see your content with (and without) proper headings.

Example One : No Formating

As you can see from this example, it’s nearly impossible to determine what text is important and which is worthless in this post.

[source lang="html"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sapien nulla, malesuada eu, tincidunt eu, dapibus sed, risus. Curabitur rutrum velit non enim. Duis congue, neque non pharetra blandit, est lectus aliquet purus, id dapibus augue lacus sed sem. Aliquam erat volutpat. Ut hendrerit sapien vitae lacus. Duis libero lectus, varius sit amet, auctor ut, mattis id, magna. In hac habitasse platea dictumst. Aliquam libero neque, interdum id, dignissim id, fermentum eget, tellus. Aliquam eget lorem quis nibh fermentum egestas. Duis id ante sed ligula egestas malesuada. Maecenas pharetra mollis ipsum. Vestibulum dignissim, turpis vel luctus facilisis, dolor mi gravida nisi, ac suscipit enim ipsum vel elit. Aenean mauris purus, convallis ac, pellentesque suscipit, varius in, lacus. Morbi blandit odio quis libero. Nullam gravida rhoncus massa. Fusce ullamcorper. Phasellus sapien nibh, consequat eu, semper in, pretium in, dui. Vivamus scelerisque.
[/source]

Example Two: Simple Text Formating

Now, with paragraph breaks, we can at least start to understand the format but not what is important.

[source lang="html"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed sapien nulla, malesuada eu, tincidunt eu, dapibus sed, risus. Curabitur rutrum velit non enim. Duis congue, neque non pharetra blandit, est lectus aliquet purus, id dapibus augue lacus sed sem. Aliquam erat volutpat. Ut hendrerit sapien vitae lacus. Duis libero lectus, varius sit amet, auctor ut, mattis id, magna. In hac habitasse platea dictumst.

Aliquam libero neque, interdum id, dignissim id, fermentum eget, tellus.

Aliquam eget lorem quis nibh fermentum egestas. Duis id ante sed ligula egestas malesuada. Maecenas pharetra mollis ipsum. Vestibulum dignissim, turpis vel luctus facilisis, dolor mi gravida nisi, ac suscipit enim ipsum vel elit. Aenean mauris purus, convallis ac, pellentesque suscipit, varius in, lacus. Morbi blandit odio quis libero. Nullam gravida rhoncus massa. Fusce ullamcorper. Phasellus sapien nibh, consequat eu, semper in, pretium in, dui. Vivamus scelerisque.
[/source]

Example Three: Formating with Headings

Using both paragraph formating and headers:

[source lang="html"]
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>

<h2>Aliquam libero neque, interdum id, dignissim id, fermentum eget, tellus.</h2>

As you can see, using the heading tag properly in example three allows us to clearly see a separation of content and allows robots such as Google to properly crawl and identify the critical areas of our websites.

You may also care to watch the video Does it matter what order you put header tags in?

Tags: Bold Tags, css, Dap, Elit, Enim, Example Source, Font Size, Font Tag, Formating, H1 Tag, H2, Heading Tags, Headings, html elements, Html Test, Lorem Ipsum, lt, Search Engine Listings, search engines, source code, Tag Search, Test Title, web document
Posted in HTML Programming

25
Apr
2009

Placing Google Analytics Code in a Dreamweaver Template

8 Comments

This is just a quick tip today, I got out of a training session and realized that a lot of people are still having a hard time understand Google Analytics so here are a few things for you to keep in mind.

First, for Analytics to be effective you need to include the code on all your webpages (not just the homepage). To do this in Dreamweaver, follow these simple steps:

copy the code from your Google Analytics home page
open dreamweaver and edit your template file
switch to Code View
place the Analytics code at the bottom of the file, between the </body> and </html> tags

Why between those two tags?

The Google Analytics code works by calling a remote script from Googles servers. Somethings this takes a bit of time, while it’s loading your webpage might stutter so let’s load all the page and display it to users first.

How to add Analytics to WordPress?

If you’re running WordPress, you can follow the steps above pretty well except in your case you’ll want to edit the footer.php which is found in your wp-content/themes/[yourthemename]/ directory.

Tags: Content Themes, directory, Dreamweaver Template, footer, google, Google Analytics Code, Googles, Hard Time, Html Tags, lt, php, Remote Script, Servers, simple steps, Stutter, Training Session
Posted in HTML Programming

23
Apr
2009

How to center a header in HTML without using the center tag

5 Comments

The HTML <center> tag is one of those funny little tags left over from the early days of websites when designers often mixed the publishing of web content with design. These days, it’s much easier to separate content and design by using effective style sheets.

To center any text in HTML and CSS, we can simply add a couple of lines of code to our stylesheet file as follows:

[source lang="css"].center {
text-align:center;
}[/source]
This little code snippet will center the content within a block tag (such as a <p> or <h1>) but only if it already knows the width of the object you’re centering too! To get around this, we can simply add the display:block tag to our CSS:

[source lang="css"].center {
text-align:center;
display: block;
}[/source]
Now our code knows to center text.

To apply it to our HTML code, you need to simply apply the code to an object as a class. For example let’s turn a heading into a centered heading by applying the new class like so:

[source lang="html"]
<h1 class=’center’>This is my header.</h1>
[/source]

It is of course also possible to simply align all <h1> tags to the center by using the code:

[source lang="css"]h1 {
text-align:center;
display: block;
}[/source]

What about converting existing pages?

Luckily if you already have a bunch of documents which use <center> tags there’s fairly simple fix for you to clean up those files. Using a tool like Adobe Dreamweaver you can do bulk search and replace functions across multiple files.

The replace is a two step process. (please backup your site before doing this)

First, let’s replace the phrase </center> with </div> across the entire site. This will change the closing tag (remember all tags come in pairs right?) to be a normal div tag.

Now, let’s replace the phrase <center> with <div class=’center’> to turn the opening tag into a div tag with the center class assigned.

You can now add the .center details to your CSS file and presto, your website is now using the proper center formating!

Tags: adobe, center tag, Code Source, Couple Of Lines, css file, designers, Div Class, Div Tag, Funny, h1, Heading, Html Code, Html Css, Html Tag, lt, Multiple Files, Pairs, phrase, Style Sheets, Text Html, Tool, Web Content, web design
Posted in HTML Programming

05
Apr
2009

Why are websites so hard to make?

22 Comments

Wow, I’ll tell you honestly that one of the questions I tend to get asked a lot (and drives people to my website) is Why is a website so hard to make? Actually, that question (or a version of it) accounts for a few unique visits every day so to help answer the question, I’ve explain a few of the reasons that websites are so hard (or expensive) to build.

First, the Web is inconsistent.

This is possibly the worse news for people just starting out, but it’s the horrible and sad truth. Web sites are nothing more than code, it’s not terribly complicated once you understand the basics of it but it’s still just a bunch of gobbly gook until it’s read by something else … and there’s the problem. Each ’something else’ is different. Web code is read by popular web browsers such as Internet Explorer, Safari, Chrome and FireFox but that’s only the tip of the iceberg because Internet Explorer has several versions in common operation today (versions 5,6,7 and now 8) which all display the web dramatically differently.

Once you get past the basic issue of browsers, you need to think about operating systems. How many computer operating systems can you name? Obviously there’s Windows and Mac right? Great … except … you also have Windows Vista, Windows XP, Windows ME, Windows 2000, Windows NT, Windows 7 and Windows Lite to content with, Macintosh OS X Leopard and Macintosh OS X Pather. That’s got to be it right? Not so fast, what about Linux and Unix? There are hundreds of variations of computer based operating systems, each running one of a dozen web browsers for countless combinations but at least that’s all there is to worry about … except for handhelds (iPhones, BlackBerries, Windows Mobile Devices) and gaming consoles (Nintendo Wii, Microsoft XBox, XBox 360, Sony PSP, Sony Play Station 3) and TV based internet consoles … I hope that I’ve made my point, one of the reasons the Internet is complex to publish for is because there are too many “things” to publish for, instead we’re forced to practice failing gracefully.

The Web lacks a standard language.

Problem number two for somebody just starting out in the great big world of the web is that there is no standard programming language for the Internet. At it’s core, the World Wide Web is programmed in a language called HTML right? Everybody knows this, except it’s wrong.

The web is published in a language called xHTML which is based on HTML, but some people in the community didn’t agree with xHTML so they created other strains of HTML. As a result, we have HTML 1.x, HTML 2.x, HTML 3.x, HTML 4.x, DHTML, xHTML, xHTML 1.1 and xHTML 1.1 SE. Soon we’ll also have xHTML 2.0 as well as xHTML 5.0 … don’t ask.

Now, as we discussed above, there are at least a few dozen major operating systems and each of those has at least a handful of web browsers, plus a ton of mobile devices all designed to interpret some or more of the languages that the web is built on but it’s important to note that not all web browsers agreed on which standards are acceptable or for that matter which codes, structure, text or tags from any standard would be accepted. As a result, a web page developed to be viewed in Microsoft Internet Explorer 5 may (or may not) be visible in other web browsers including other versions of IE.

Scripting on the Web

Now, once you get past the basic problem of coding for some browsers while ignoring others and you pick one of the standards to adhere to, you’ve got to take the time to start writing more than simple content and for that you need what’s called a scripting language of which … there are many.

Most scripting languages such as PHP, Python, ASP, ASP.net etc. execute on the web server (where the website is hosted) but some such as JavaScript execute on the web browser after being downloaded (not to be confused with Java which is not a scripting language but a programming language and completely different). These scripts are what power everything from a simple email form to complex social media giants such as FaceBook.

After you’ve picked the scripting language you wish to use and ensured that it’s compatible with your hosting account (where you store your website for others to access it) you’re all set and ready to start building your first website.

How to handle it all

I’m lucky, I’ve been building websites since 1996 which means that in my very (very) long career I’ve seen countless technologies come, go and die. So my advice to people getting started in the industry is a lot like Benjamin’s in Animal Farm, Web Masters much like Donkeys know that times change but stay the same, simply pick your standards and be the best developer in that selected field. You will be mocked, scorned, insulted and ignored by others in the industry for your choices but in just a few years … everything you know will be outdated and you’ll have to relearn new tools anyways so don’t worry so much.

“Only old Benjamin professed to remember every detail of his long life and to know that things never had been, nor ever could be much better or much worse – hunger, hardship and disappointment being, so he said, the unalterable law of life.”

- George Orwell, Animal Farm,

Tags: advice, book, building, coding, content, create, design, ebook, email, explorer, face, Facebook, firefox, hosting, html, iphone, mac, media, mobile, php, site, social, tag, tags, website
Posted in HTML Programming

01
Apr
2009

How to use the font-flame property in CSS in a graphic

10 Comments

The text-flame effect on graphic files.

In today’s tutorial I want to take a look at how to add flames to web graphics and text using nothing more that CSS. Internet Explorer 7 doesn’t natively support the font-flame CSS function so if you’d like to see the end result you’re going to have to use either FireFox or the latest release from Apple Safari until IE 8 is release (which by the looks of things should be fairly soon.

Setting up a text in HTML

Step one, as always is to setup a piece of text in HTML so you can set the class of a text object as follows:

[source lang="html"]
<div class=’flame’>Hello World</div>
[/source]

I like the effect a lot more on graphic files, so I’ve demo’d it to the right using the logo for Getaway Graphics but the effect is pretty similar on text. To do it to graphic files, you can use very similar code replacing the Hello World text with the location of your graphics file but keep in mind that you’ll need to use a file with transparency such as a PNG or GIF. Also remember the font-flame function is not compatible with font-opacity which will always override the effect.

[source lang="html"]
<div class=’flame’><img scr=’??’></div>
[/source]

Setting up the CSS file

Once you’ve added the appropriate style to your HTML you’ll need to add the CSS to your document in the style section of your header using the following simply CSS:

[source lang="css"].flame {font-flame: solid 10px #990000 #660000;}[/source]

Remember, the first color is for the base of flame, while the second is for the tip, font-flame will automatically gradient the colors for you.

Tags: apple safari, auto, code, colors, content, css, explorer, file, firefox, html, logo, lt, pg, tutoria, tutorial
Posted in HTML Programming

31
Mar
2009

What image format should you use on your website?

16 Comments

There is nothing more complex about publishing on the web than the concept of images, they’re quite possibly the hardest part of HTML for the general public to get their minds around so let’s take a quic look at what makes an image complicated and how we as web designers and publishers can approach them in a simpler way.

Image Format

The first step to web graphics is to appreciate that images come in dozens (or hundreds) of file formats from BMP’s to TIFF’s and everything in between but when it comes to the web, there are really only three formats for you to think about:

The CompuServe Graphics Interchange Format (GIF) format (pronounced giff)
The Joint Photographic Experts Group format, JPG (pronounced jaypeg)
the Portable Network Graphic file format, PNG (pronounced ping)

Close up of the GIF file format

These three file formats encompass the entire spectrum of Internet based graphics. The first format, GIF was introduced way back in the very first days of computer graphics (1987) and allowed people to exchange graphic files via an online community similar to America Online (AOL). The GIF format was limited to 8 bits of color (255) with some reserved for core data. It was a loss-less graphic format ideal for the graphics of 1987 but could hardly produce quality photos.

The GIF format stores each pixel of an image as one of 255 possible colors resulting in a crisp image. The GIF format however also had a number of unique benefits such as the ability to have invisible (alpha) transparent pixels which when place overtop of other colors would allow the backgrounds to remain visible and the capacity to store multiple GIF images in a single file as pages. When displayed in a web browser or other image viewing tool these pages would appear as animations similar to old ‘flip book’ style animations.

In 1992 the Joint Photographic Experts Group created and issued the JPEG standard to the world. These days we tend to call the file format JPG since old Microsoft based computers could only hand three characters as a file extension but the format is also known as .jpg, .jpeg, .jpe, .jif, .jfif and .jfi. The .jpg format was an instant success, it quickly addressed the primary failings of the GIF format by allowing 24 bit graphics (16.7 million colors) and smooth transitions between the these colors using a lossy compression method … which is a fancy way of saying the graphics blended together.

Lossy file saved as both 20% and 80%

In effect, how the JPG standard worked was to rapidly reduce file sizes by averaging the color values of a pixel with those around it. This caused massive reductions in file sizes allowing photographers to post 500kb images in extremely small (20-100kb) files while controlling the loss of quality. To the right you’ll see an image saved at 20% quality to the left and 80% to the right, both the difference in quality and the method JPG uses to reach the results should be evident.

Before I go on, I want to pause and take note of a statement I made in the above description because I’m sure most people missed it or brushed past without much thought … the JPG file format was introduced to the world in 1992. This phrase is critical because it reinforces how much the world has changed in just 17 years. For those of you who are under 20 years old, you’ll most likely have never known a world without Facebook or YouTube but for the rest of us, we sometimes forget the Internet is for all purposes a fairly recent addition to the world. I’m 35 years old and I remember the first JPG photo that I saw, the introduction of this format changed the way we shared images over computers. Notice that I said it changed the way we shared images over computers? There was no Internet, or at least not what you see today.

In 1996, Unisys became uppity and started threatening to sue over the LZW compression found in the GIF format so the world invented the Portable Network Graphic format (PNG), along the way the format improved upon most of the qualities of the GIF and lost the capacity for animation. The PNG format has 8 bit graphics similar to the GIF but also has 24 bit like the JPG and introduced a new level with 32 bit graphics. While it lacks support for animation, it includes transparant pixels like a GIF. Unlike a GIF, where those pixels can be on or off the PNG allows for alpha transparency making the format extremely flexible and also capable of compressing images. The problem with the PNG format, is that it produces large files.

So which is best? Actually that depends entirely on what you want to accomplish with the graphics. As you’ll see from the image above the file size of the graphic can range from ~25k to ~430k depending on the quality you’d like to achieve. Photographers for example should use the JPG compression most often to ensure their images are strong, crisp and colorful while illustrators and others who work with line art will benefit from the GIF format. In the end, practicing and experimenting are the best ways to determine what you should be using.

A quick thank you to the Old Shoe Woman for posting the a wonderful photo Sunlight Under a Live Oak Tree on Flickr for me to use as part of this tutorial.

Tags: content, design, designers, exchange, Facebook, file, flickr, html, images, million, photographer, photographers, photos, png, tutorial, web browser, web design, web designer, web designers, website
Posted in HTML Programming