Most developers or established tutorial makers prefer to write technically advanced and glamorous tutorials like “How To Make A Mentally Disturbed Frog Jump Out Of Your PC Scream with The Help Of jQuery And Some CSS”, or something similar. Sometimes it can be really difficult to find relevant information on the basics – one of the most common questions we get here on Cashrevelations is “how to edit the landing page template”?

This is a short and simple tutorial on how to edit an HTML template – with the help of this tutorial and some practice you can edit landing or squeeze page templates all by yourself.

Finding An HTML Template & Unpacking It

First you need an HTML template you can practice on. You can search on Internet – there are both free and premium alternatives. Or, if you are tired to search the Internet, you can simply go to our Downloads section or to our article 150 Free Landing Page Templates.

Most templates, or any type of file downloads, come packed in a ZIP file and you must unpack them before you can begin to edit them. Right click on the ZIP folder and choose “extract all” – this will open your extraction wizard. Just click “next” and then select the location to extract your templates to. If you have problems with uncompressing (unzip) the templates you could try an online tool like WobZip.org.

Edit The HTML Template

First, make sure your template is an HTML template and nothing else – frequently we get questions from troubled people who try open a PHP page in their browser or try to install a usual HTML template on a WordPress blog or the opposite. The simplest way to test if you have an HTML template is to first locate you template and double click on it – if it opens in your browser and looks like a usual page, then it is an HTML template.

Locate your HTML template and right click on it – choose “Open with Notes” or “Open with WordPad”. By now, you see the source code for the template. Find the text you want to change – remove it and paste or write in your own text. In upper left corner, under File, click Save – it’s important that you save after any changes in your HTML document.

We Repeat:

• Right click on the template
• Choose “Open with Notes” or “Open with WordPad”
• Locate the text you want to change and remove it
• Paste or write in your own text to the template
• Under File (upper left corner), click Save

Open your HTML template in your browser by double clicking on it. If everything looks all right, then you are finished with your editing. But usually it doesn’t look all right at all.

One problem is that text lines often are too long. You can adjust the length of the text lines with a <br /> tag. Just put <br /> where you want to break the text line.

If you want to change the appearance of your template (body color, headline size or text size etc.) you need to change it from the CSS file – most modern landing page or squeeze page templates use CSS for styling. But editing CSS should not make you nervous.

If you make a copy of your template before you begin with your editing, then you can experiment all you want – and it is exactly what you should do. Don’t be afraid to play and change in the CSS code, nothing bad will happen – if something get broken, just make another copy from the original template.

To get information on CSS and how to edit CSS, we suggest you visit CSS Tutorial and CSS Reference by W3Schools. They provide you with information and coding examples in a very pedagogical way – they even have interactive example pages you can practice on.

Summary Of How to Edit An HTML Template

Editing HTML templates – all the process, from downloading and all the way to the ready template – consists of six easy parts:

1. Download A Template
2. Unpack Or Unzip The ZIP Archive
3. Right click on The Template
4. Choose “Open with Notes” Or “Open with WordPad”
5. Paste Or Write In Your Own Text To The Template
6. Under File (Upper Left Corner), Click Save

You have now edited the HTML template all by yourself. It is easy, and you sure will save some money when you don’t need to hire someone to do it for you. The only you need is practice and a bit of patience – and it also doesn’t harm to make a copy of the original template before you start editing.

Building websites is surprisingly much about to find a somewhat logical and effective and visually appealing navigation. Often the menu building efforts end up with a simple ugly list because of lack of time. But one thing is for sure – a good, beautiful and (almost most of all) logical navigation is absolutely essential for your sites usability and appearance.

During our work with CSS and jQuery articles we have seen many good examples of nice and effective navigation solutions. Many of them are relatively easy to implement for your own projects, if you have some basic coding skills and good portion of patience.

CSS3 Framework: With this free CSS3 Menu framework you can create great looking navigations in just a few clicks. The visual design user interface allows you to create menus without the need for complex hand coding. You can download it right HERE.

Cashrevelations presents an adequate selection of jQuery and CSS navigation solutions – 15 effective jQuery and CSS navigation solutions that will effectivize and enhance your website. All these navigation solutions are presented with demo where available.

15 CSS & jQuery Navigation Solutions

1. Background Image Navigation – jQuery
In this tutorial we are going to create a beautiful navigation that has a background image slide effect – by using the Background-Position Animation Plugin. The main idea is to have three list items that contain the same background image but with a different position.
View Demo

2. Slide Down Box Menu – jQuery & CSS3
In this tutorial you will learn how to create a cool and unique sliding box navigation (with submenu box with further links). The main idea is to make a box with the menu item slide out, while a thumbnail pops up in the top of the menu.
View Demo

3. Cufonized Fly-out Menu – jQuery And CSS3
In this tutorial you will learn how to create a full page cufonized menu – when hovering over the menu items we will move a hover-state item that adapts to the width of the current item, and slide out a description bar from the left side of the page.
View Demo

4. CSS3 Mega Drop-Down Menu
In this pedagogic tutorial by Guillaume Marty you will learn how to build a cross-browser, awesome and impressive CSS only drop-down mega menu, using nice CSS3 features – an effective solution to display a lot of content while keeping a clean layout.
View Demo

5. One Page Navigation – jQuery Plugin
This is a practical navigation plugin by Trevor Davis that lets you scroll smoothly when the navigation is clicked – this plugin is built upon the jQuery ScrollTo plugin by Ariel Flesler. The plugin is also available on Github.
View Demo

6. CSS Menu Builder
With this tool you can create a standard compliant xhtml/css menu for your website for free via the online navigation generator. It contains more than a 1000 horizontal, vertical and breadcrumb menus via the CSS Menu Builder. The page downloads a bit slow.

7. Lava-Lamp Style Navigation Menu – jQuery
In this logically done tutorial Jeffrey Way of Nettuts+ will teach you how to build a neat looking lava-lamp style navigation menu for your site using jQuery and CSS. As usual you can download the complete source files.
View Demo

8. Visual CSS QuickMenu
This extensive and practical online tool offers a solution for generating fast and feature rich drop down menus. It produces fast clean Cascading Style Sheet list based menus, even capable of functioning in browsers with the JavaScript disabled.

9. Scrollable Thumbs Menu – jQuery
In this tutorial with downloadable source code you will learn how to build a fixed menu with scrollable thumbs. The idea is to have a menu fixed to the bottom of the page and let a vertical stack of scrollable thumbs appear when hovering over a menu item.
View Demo

10. Easy Accordion – jQuery Plugin
The Easy Accordion plugin by Andrea Cima Serniotti will get your definition lists (DTs) and generate a nice and smooth horizontal accordion. You can then decide to make it a timed slideshow or leave it still. You can download the source files for this plugin.
View Demo

11. Apple-Style Icon Slide Out Navigation – CSS And jQuery
In this tutorial you will learn how to create an Apple-style navigation menu with a twist – it reveals some icons when hovering over it. The icons slide out from the top and when the mouse leaves the link, the icon slides back under the link element.
View Demo

12. Awesome Bubble Navigation – jQuery
In this tutorial you will learn how to create a bubbly navigation with jQuery. The idea is to have some round navigation icons that release a bubble when hovering over them. You will use the jQuery Easing Plugin for a even nicer and improved effect.
View Demo

13. Vertical Scroll Menu – jQuery
In this tutorial with downloadable source code Kevin Liew will teach you how to create a vertical scroll menu. You will also use the jQuery.color plugin to animate the background color changes. The HTML is as simple as possible, and the jQuery and CSS do the rest.
View Demo

14. Elastic Thumbnail Menu – jQuery And CSS
In this easy to follow tutorial Sam Dunn on Build Internet will learn you how to make an elastic and good looking thumbnail menu. The menu magnifies menu items when they are hovered over and the menu items expand upwards.
View Demo

15. Mega Drop Down Menus – CSS And jQuery
In this relatively easy to follow tutorial by Soh Tanaka, you will learn how to make an awesome and practical Mega Drop Down Menu with the help of CSS, jQuery and the Hover Intent jQuery plugin from Cherne.
View Demo

The different CSS and jQuery navigation solutions presented here in this article are not in any particular order – and Cashrevelations is not by any means whatsoever affiliated with any of the authors or service providers.

From the blog Jane’s Ramblings by Jane Finette, Director of European Marketing at Mozilla, we find out that there will be a new learning destination for Firefox soon – called the “School of Firefox”. The School of Firefox will contain lessons, videos and tips on all you need to know about using Firefox.

From Jane’s Ramblings: “Its going to help new Firefox users get set up and familiar with Firefox features fast, and for those of us who think we already know the deal, we hope there’s lots more besides to learn about your fox”.

According to Jane Finette we can expect more news about “School Of Firefox” in the next couple of weeks.

More Firefox Resources:

• Download Firefox browser
• School of Firefox coming soon – Janet’s Ramblings
• Mozilla Firefox – Wikipedia
• History of Mozilla Firefox – Wikipedia

However, everything can´t stay the same at all time and Cashrevelations.com decided to make a simple overview of HTML 5, because sooner or later it will be here anyway. We hope this article gives you some insight into HTML 5.

HTML 5 – The Basics

Wikipedia; HTML 5 is the next version of HTML. HTML 5 specifies two variants of the same language – a “classic” HTML variant known as HTML5 and an XHTML variant known as XHTML5.

HTML 5 provides a number of new elements and attributes that reflect typical usage on modern Web sites. Some of them are semantic replacements for common uses of generic block <div> and inline <span> elements, for example <nav> and <footer>.

Other elements provide new functionality through a standardized interface, such as the elements for multimedia content <audio> and <video>.

Some elements from HTML 4 have been dropped, including purely presentational elements such as <font> and <center>, whose effects are achieved using CSS.

HTML 5 is backwards compatible with the way user agents handle deployed content.

Overview Of New Features In HTML 5

This summary of major new features in HTML 5 is based on Elliotte Rusty Harold’s article New elements in HTML 5. We recommend you to read his article for more details.

New structural elements

• section: Essentially anything that has its own heading in HTML 4
• header: The page header shown on the page; not the same as the head element
• footer: The page footer where the fine print goes
• nav: A collection of links to other pages
• article: An independent entry in a blog, magazine, compendium…

New Block Elements

• aside: Something that’s just outside the main flow of the narrative
• figure: Represents a block-level image, along with a caption
• dialog: Represents a conversation between several people

New inline elements

• time: Indicates a specific moment in history
• meter: Represents a numeric value in a specified range
• progress: Represents the state of an ongoing process

New embedding elements

• video: Allows embedding of arbitrary video formats
• audio: A complementary audio element
• embed: Is used for plugin content

The src, autoplay, autobuffer and controls attributes are common to all media elements.

New interactive elements

• details: Further information that might not be shown by default
• datagrid: Serves the role of a grid control
• menu: Contains command elements
• command: Represents a command the user can invoke

This list is not complete, if you wish to see all new elements and new attributes in HTML 5 we suggest you to go to HTML 5 differences from HTML 4 by W3C.

You might also be interested to download the handy HTML 5 Quick Reference Guide for free from Veign.com (a website design and development company). A compliment to the HTML5 Quick Reference Guide is the newly released CSS 3 Quick Reference Guide.

How Do I Start With HTML 5?

The easiest way to learn something new is just to do it. Reading through a lot of articles and reference material has it’s benefits, but to learn something really quick you need to start coding and experiment right away, without any delays.

Thats way we put together 5 HTML 5 Quick Start recourses. If you are familiar with HTML, we can guarantee that you will have a HTML 5 Valid page online within 2 hours with the help of these recourses alone.

HTML 5 Quick Start Resources

• Download Clean White Video Landing Page
• Download HTML 5 Quick Reference Guide
• Download CSS 3 Quick Reference Guide
• W3Schools HTML 5 Reference
• Markup Validation Service

These resources will give you a starting point for your HTML 5 experience – and you will discover how fun and not at all so hard as it seems if you only read reference material.

Reading On HTML 5

1. A Preview of HTML 5
As both a front-end web developer and a contributor to HTML 5, Lachlan Hunt tells us what we can expect from the emerging markup specification, whose goals include more flexibility and greater interoperability.

2. Yes, You Can Use HTML 5 Today!
Is HTML 5 really too far away to worry about? Bruce Lawson doesn’t think so – you can start using HTML 5′s new structural elements right away.

3. 5 Amazing HTML 5 Features to Look Forward to
Most major browsers implemented some of the features proposed in the HTML 5 draft. Today we will look at 5 of these exciting HTML 5 features and its implementation.

4. Preparing for HTML5 with Semantic Class Names
This is a brief introduction to the new structural elements in the HTML 5 Working Draft, and how to use semantic class names in HTML 4.01 or XHTML 1.0 markup that correspond to the names of those structural elements.

5. HTML 5 Doctor
HTML 5 Doctor publish articles relating to HTML 5 and it’s semantics and how to use them. They also invite questions, in the form of ‘Ask the doctor’ to help answer people’s queries and questions. Answers will be posted in the form of articles for all to learn from.

6. HTML 5 – A vocabulary and associated APIs for HTML and XHTML
Working Draft 23 April 2009. This version: new features are introduced, new elements are introduced based on research into prevailing authoring practices. Special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.

7. WHATWG Wiki
The purpose of the WHATWG Wiki is to create a place for contributors to post and compile their own proposals and ideas regarding WHATWG specifications. You can be a part of our community and making proposals for the next version of HTML5.

8. The Power of HTML 5 and CSS 3
As we continue to push the boundaries of existing languages, HTML 5 and CSS 3 are quickly gaining popularity, revealing their collective power with some exciting new design possibilities.

9. HTML 5 Editor Ian Hickson discusses features
In this interview, HTML 5 Editor Ian Hickson discusses his favorite features, the features he thinks might be most contentious, the pain points he expects HTML 5 will address, and much more.

10. 4 Useful HTML 5 Browser Support Overviews
HTML 5 gives us many advantages. You can use the basic HTML 5 elements like header, nav and footer in all browser at the moment. But there are more cool things.

Videos on HTML 5

1. Web Design Video Blog – HTML 5 Tag Changes
Nick Bavington and James Rinylo from the Creare Group explain the new tags of HTML 5 and the discontinued tags from HTML 4.

2. Web Design Video Blog – Headers & Footers
Nick and James from Creare Group explain how to utilize headers and footers for good web design and SEO. They also look at how they might be implemented in HTML 5.

3. HTML 5 – Features you want desperately but still can’t use
As the HTML 5 effort reaches its first big milestone browsers are starting to implement it. This talk will explore some of the implementations of HTML 5 features.

4. Anne van Kesteren – Video in HTML 5
This talk will focus on the new element introduced by HTML 5 and its associated API – a short introduction to HTML 5 as well as information on recent developments.

5. Editing HTML 5
Ian Hickson, editor of the HTML 5 specification, discusses the tools he uses to gather and respond to feedback and clarifies the whole “when will it be ready?” issue and gives us some details about what part of the spec he is working on now.

Summary

According to some developers it will take a while before HTML 5 is fully implemented – Ian Hickson, co-editor of HTML 5, suggests that we might have to wait till 2022 for the final draft of HTML 5.

Remy Sharp of HTML 5 Doctor writes in his article: “2022 was misinterpreted as the year HTML 5 would be ready. That’s wrong. HTML 5 is ready today”.

The truth is that this October (2009) is the last call for the HTML 5 working draft, and you can use HTML 5 already today. It’s not difficult either, if you have some experience of HTML since before.

Without prior experience of HTML 5 we on Cashrevelations.com decided to make a simple Video Landing Page in HTML 5 – as a quick experiment to find out if it was complicated, difficult and something to be troubled about.

After reading some specifications in the HTML 5 – W3C Working Draft and with help of W3C Markup Validator we did it under 1.5 hour. And the answer to our questions? No, it is not complicated, difficult and something to be troubled about. In fact, it was very easy.

The Video Landing Page in HTML 5 is available for preview and download below.

• Clean White Video Landing Page
• Clean White Video Landing Page Download

There are no reasons for you to not start experimenting with HTML 5 already now – it is easy, there is a lot of interesting new features, there is a huge amount of reference material and, most important, HTML 5 is the future already here.

Related:

• HTML5 and The Future of the Web
• Compatibility tables for features in HTML5
• HTML 5 canvas – the basics
• Cascading Style Sheets – Current Work
• HTML5 / XHTML5 with CSS for Safari, Firefox, Opera & IE

This is what is more commonly known as the 404 Error Page. It’s the page that shows up by default when someone ‘accidentally’ types in the address of the page they are looking for on your site incorrectly. Now, in many cases, it truly happens by mistake. However, in many other instances, people end up on this page because they are snooping around trying to look for your download page or thank you page without having to pay or opt-in.

Why, not capitalize on it whether they are doing it purposely or they are truly ending up there by accident. If you have your own website and it gets traffic, some of your visitors are ending up on that page. Now, if they are seeing the generic message that their browser shows them when it happens, then you are not making good use of your web real estate.

Examples of 404 Error Pages: Productplanner, Apartmenthomeliving.com, Brightkit,
Mundofox.com, RussianTales.se, Jhuskisson.com, RealMacSoftware.com, Gog.com

Every page of your website can put money in your pocket. Even your 404 error page. You can customize that page just like any other page on your website.

• Some ideas to utilize on that page include:
• • Making an special offer at a discounted price
  • Having it be a squeeze page
  • Making it an Adsense pages
  • Redirecting it to a related affiliate product

Those are just a few of the many different, yet profitable types of ways you can make good use of your 404 error page. It won’t make you rich, but it definitely will put some extra money in your account. Maybe it will help you pay one of your bills, or you can just reinvest it into your business.

• Get your hands on Jason Dinner’s 404 Secrets Special Report

Either way, if you don’t customize this page, you can be leaving money on the table. Having something for your visitors to see that end up on that page is extremely more beneficial to you then not having anything on that page.

This is a simple “How to do” report.

Download Here…