Lateral Code
A Web Development Blog Focused on Code and Technology
Currently Browsing: Home » 2009 » January
Archive for January, 2009
Placing Links In Images
By Karthik Viswanathan on Thursday, January 29th, 2009 | Tags: css, html, tutorial | 1 Comment »
Many of us love to use vivid, clean images to enhance a website design. Unfortunately, it may be necessary to embed links into such an image, which can be a hassle.
In this article, we will present a quick and easy way to add links to your images using a small amount of HTML markup and CSS.
To begin, we must initialize our HTML. For this example, we will use the logo presented by Patrick Lin in his previous article:
It contains the following HTML:
<div id="logo">
<h1><a href="/" title="Home Page"><span>Sample Logo</span></a></h1>
</div>Creating Clever Logo Banners
By Patrick Lin on Monday, January 26th, 2009 | Tags: css, html, tutorial | 3 Comments »
Good designs are always clever. They need something to help them stand out from the rest. Here’s how to create a clever logo banner that looks good and is SEO Friendly, like the one Lateral Code uses, using an image and some clever CSS.
The first step is to create the banner. For demonstration purposes, the following banner will be used:
This is the markup involved:
<div id="logo">
<h1><a href="/" title="Home Page"><span>Sample Logo</span></a></h1>
</div>
5 Simple CSS Tricks
By Karthik Viswanathan on Friday, January 23rd, 2009 | Tags: css, html | 1 Comment »
CSS can be the key to make or break a site design. To enable you to create and edit your own template, we have decided to present 5 Simple CSS tricks. Please feel free to directly use the code shown here in your own site.
- Reset Values
Many web browsers have default CSS settings for HTML elements. Unfortunately, these settings differ across each browser. In order to maintain a similar look of your site in multiple browsers, resetting these values is a must. Here is a quick reset snippet commonly used:
* { margin: 0; padding: 0; }
Building a contact form with HTML and PHP
By Patrick Lin on Monday, January 19th, 2009 | Tags: html, php | 5 Comments »
A while back, my colleague Karthik posted a CSS styled form. This time, I am going to show how to build the backend of an HTML form using PHP.
To begin with, you can take the code from Karthik’s example and paste it into a file called ‘contact.php’ or a name of your own choosing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" >
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Form Styling!</title>
</head>
<body>
<h2>Input Form</h2>
<form id="input-form" name="input-form">
<label for="first-name">First Name: </label>
<input type="text" id="first-name" name="first-name" class="field" />
<label for="last-name">Last Name: </label>
<input type="text" id="last-name" name="last-name" class="field" />
<label for="e-mail">E-mail: </label>
<input type="text" id="e-mail" name="e-mail" class="field" />
<label for="text">Message: </label>
<textarea id="text" name="text" class="field"></textarea>
<input type="submit" id="submit" name="submit" value="Submit" />
</form>
</body>
</html>5 Great WordPress Plugins
By Karthik Viswanathan on Sunday, January 18th, 2009 | Tags: wordpress | 3 Comments »
A simple and easy way to start blogging is by using WordPress. Many themes and plugins are available to meet most every need. In this post, we will present 5 unique plugins that are great additions to any site.
- Google XML Sitemaps
Search Engines play a large role in the amount of traffic your site obtains. Google, one of the main search engines, enables the use of Sitemaps, or a list of links that pertain to a site. There are many benefits for using Sitemaps:
- Faster crawling/indexing of your site in Google
- Ability to index pages that are never linked to internally/externally. Google can only find pages on your site by following links. If you provide a Sitemap, their crawler is able to find pages that are not linked to, but are listed in your sitemap.
- Prioritizing content becomes possible. If some of your pages are very important to your site, it would be preferable for Google to visit/update them more often. This is where priority becomes important.
Google XML Sitemaps automates this whole process for you. All you need to do is provide some information about your prioritizing needs and other options. We personally love this plugin and use it on our site.