Building Websites All-in-One For Dummies
Whether complex or simple, websites require that you make decisions — such as color, theme, and tone — and that you juggle many pieces of the project — like code, style sheets, and graphics. Knowing which resources to turn to for help implementing HTML5, and a few key points about incorporating graphics and video, can help you.
Online Resources for Building Websites
Amidst all the clutter on the web lie valuable free online resources for building essential elements of an inviting and accessible website. So that you don’t have to sift through the clutter, here are some of the best.
W3schools.com provides the most extensive online library of code resources, but that library can be overwhelming. The following links take you to some useful landing points to get started:
Instructions on creating a basic HTML page
Copy-and-pasteable HTML5 code and basic tutorials on HTML5’s new tools for media, forms, and page structure
Tutorials on building linked, external CSS style sheets
Basic CSS parameters, syntax, and instructions for adding CSS to web pages
Information about CSS3 effects and transforms (ranging from drop-shadows to rotated type)
The following resources can help you with e-newsletters, blogs, and more:
For organizing contact lists and sending out e-newsletters, the most powerful tool is arguably Constant Contact, but you can use an almost as powerful, and free (for the first 500 contacts), e-mail manager at MailChimp.
The best option for a custom search box for your site is FreeFind, which generates search tools for your site, without using or selling data on who searches for what at your site.
Need a blog? Google’s Blogger is free, easy to set up, and allows you to moderate posted comments.
A simple (and always free) option to link to a map to help clients, customers, and visitors find you in the real world.
Reminders for Preparing Web Graphics and Video
Websites without graphics are almost non-existent these days. When you create graphics, optimize images, or prepare video for a website, the results have to be sharp, detailed, and fast loading. Three popular forms of graphics you use on a website are photo-realistic images, images such as logos with large areas of solid color, and images that are a combination of images and text. Here are some friendly reminders for creating and optimizing graphics for websites:
Optimize photo-realistic images using the JPEG format.
Optimize images with large areas of solid color using the GIF format.
When optimizing graphics that have text overlaid on a photorealistic image, create separate slices for the areas of the image that are photorealistic, and create additional slices for the areas of the image that contain text. Export the areas containing text using the GIF format, and export the photo-realistic areas of the image using the JPEG format.
For high quality JPEG images, use a quality setting of 70 when exporting. For smaller JPEG images, you can get by with a quality setting of 50.
If you’re creating a photo gallery for a product, or for a photographer, export the images in the JPEG format with a quality setting of 80.
When compressing images using the JPEG format, pay careful attention to the edges of objects in the image. When you begin to see pixels, or the edges lack definition, you’ve compressed the image too far.
When exporting images using the GIF file format, use the least number of colors that yields a crisp image and you’ll have a fast loading image.
When you resample images for websites, the maximum resolution you need is 72 pixels per inch.
Websites with no video are becoming rarer. Video is everywhere on the Internet: for entertainment, in ads, to promote rock stars and other artists. When video is well done, it’s a thing of beauty. However there are some things you need to consider when adding video to a web page:
Video takes up lots of bandwith. If the bandwidth for a website is exceeded, the charge can be rather costly. Instead of hosting video on a website, upload it to YouTube, and then embed the video in a webpage or blog.
Don’t violate copyright laws. Don’t copy video from other websites, or other people’s YouTube videos and use them on your website.
Check the license: If you do use a video from a supplier or manufacturer on a commercial website, make sure you are covered by the supplier or manufacturer’s license.
Use a high quality camcorder to record video: No, an iPhone is not a high quality camcorder. If you encode poor quality video for the web, you get poor quality video. Remember the old axiom: Garbage in, garbage out.
Make sure the website viewers have the necessary plug-ins to view the video.
If you create HTML5 pages with video, make sure the intended audience for the site uses HTML5-compliant browsers.
Don’t use transitions when you edit multiple video clips to create a video for the web. Video transitions look great on HD video, but don’t look good when you encode a video for the web.