Beginning HTML5 & CSS3 For Dummies® (2013)
Part VI
The Part of Tens
23
Ten Cool HTML Tools and Technologies
In This Chapter
Identifying your HTML toolbox needs
Discovering a favorite HTML editor
Adding a graphics application to your toolbox
Authoring systems for the web
Understanding essential utilities for web publishing
HTML documents are made of plain text, which means you can build one using a no-frills text editor such as Notepad (PC) or TextEdit (Mac). Once upon a time, that was all web authors used. But as the web has evolved, so have the tools used to create web pages. Nowadays, web authoring is complex enough that a simple text editor doesn’t cut it unless
You don’t care (much) about graphics and HTML validation.
You’re on a quick in-and-out mission to make small changes to an existing HTML document.
After you gain more experience with HTML, you’ll build your own HTML toolbox. This chapter is designed to help you stock that toolbox. In fact, some of these tools may already be on your system, quietly waiting to help you create amazing web pages.
When you go shopping for items for your HTML toolbox, look for good buys. Students and educators often qualify for big discounts on major-brand software — if you're in that category, use a search engine to look for "educational software discount." But careful shopping can save anybody money on just about any software purchase. Try comparison-shopping at sites such as CNET Shopper (http://shopper.cnet.com) or PC Magazine (www.pcmag.com/shop).
WYSIWYG HTML Editors
WYSIWYG (what you see is what you get; pronounced wiz-eee-wig) editors do everything but your laundry. Lots of WYSIWYG editors offer code views the way helper editors do (see the following section), plus a lot more.
A WYSIWYG editor creates markup for you while you create and lay out web page content on your monitor, often by dragging and dropping visual elements or working through GUI menus and options. As you work, the WYSIWYG editor shields your eyes from bare markup. These tools are like word processors or page-layout programs; they do lots of work for you.
WYSIWYG editors make your work easier and save hours of endless coding — you have a life, right? — but you should use WYSIWYG editors only during the design stage. For example, you can use a WYSIWYG editor to create a complex table in under a minute during initial design work. Later, when the site is live, you would then use an HTML helper editor to refine and tweak your HTML markup directly.
Dreamweaver
Dreamweaver is among the best of WYSIWYG web development tools for Mac and PC systems. Many (if not most) web developers use Dreamweaver. Dreamweaver is an all-in-one product that supports
Website creation
Maintenance
Content management
The current version, Adobe Dreamweaver CC, belongs to a suite of products — Adobe Creative Cloud, usually abbreviated CC — that work together to provide a full spectrum of Internet solutions. Adobe CC comes in a big bundle that includes such components as InDesign, Photoshop, Illustrator, Acrobat Professional, Dreamweaver, After Effects, Premiere Pro, Soundbooth, Encore, and more. For $50 a month, you can buy the Adobe Creative Cloud Collection and get all these components. For $20 a month, you can get just Dreamweaver CC without the extras.
Dreamweaver features an easy-to-follow GUI so you can style web pages using CSS without even knowing what a style rule is. Many of the benefits of Dreamweaver stem from its sleek user interface and its respect for clean HTML. You can find more information on Dreamweaver by visiting the Adobe website at www.adobe.com/products/dreamweaver.
Other WYSIWYG editors
The following editors have many fans, and both produce great web pages:
KompoZer is a web page editor that offers text and WYSIWYG editors, along with color coding, automatic code completion, HTML validation, nice site management chops, and more good stuff. Plus, it's free. Check it out at http://kompozer.net.
Microsoft Expression Web 4 is a Windows-based web package that offers a code editor (text) and a visual editor (WYSIWYG), along with scripting tools, great graphics support, search engine optimization (SEO) tools, and more. It retails for $150 or so, but if you shop around, you can find it for under $100; there's a free version, too. Check it out at http://msdn.microsoft.com/en-us/expression/cc197140.aspx.
This is just a small sample. For even more WYSIWYG options, try searching for “WYSIWYG HTML editor” on the web.
Helper HTML Editors
An HTML helper works the way it sounds. It helps you create HTML, but it doesn’t do all the markup work for you. HTML is displayed raw — tags and all. You can reach right into the code and tweak it (provided you have this book). This is often called a code view or markup view.
Good helpers save time and lighten your load. Functions like these make HTML development easier and more fun:
Tags are a different color than content.
The spell checker knows tags aren’t misspelled words.
Use a helper editor when you’re building complex tables or multilevel lists. The more complex your markup, the more help a helper editor can provide!
Aptana Studio
Aptana Studio is a full-blown development tool that supports JavaScript, Personal Home Page (PHP), CSS, and HTML. Aptana also provides a very full-featured HTML editor that’s well suited for beginners and professionals. Aptana requires some HTML knowledge to use but assists you at every step.
We like the Aptana interface and its many facilities. You can
Automatically sync directories with your FTP server.
Incorporate all kinds of cool plug-ins. (Aptana is based on Eclipse, a well-known and widely used integrated development environment, or IDE.) Aptana makes it easy to work with other languages, such as Ruby on Rails, jQuery, Python, and more, using widely available plug-ins.
Create, edit, and validate CSS, JavaScript, HTML, and PHP.
Use automatic code completion and text-coloring capabilities to separate HTML, CSS, JavaScript, and so forth.
Take advantage of a huge collection of documentation and tutorials and active community support and interaction.
Aptana is an open source project, which means it's free. You can download Aptana from www.aptana.com. If you're not inclined to tackle a do-it-yourself type of web development environment, check out our other contenders in the following section.
Other helper editors
You can find lots of great HTML helper editors. Here’s our slate of alternatives:
Komodo Edit is a classy, highly functional software package that gets high ratings from everyday users and experts. It’s not WYSIWIG, but it gets the job done. Komodo includes lots of great features and functions, including built-in validators for CSS, HTML, and accessibility features; color coding and tag completion for HTML and XML; multi-file search and replace; and support for web-related languages, such as Perl, Python, Tcl, PHP, JavaScript; and much more.
Komodo Edit is a free, scaled-down version of the $295 Komodo IDE product from ActiveState.com. Unless you also develop software, Komodo Edit should meet your needs well and completely.
Download the free version from www.activestate.com/komodo-edit/downloads. It supports Windows, Mac OS X, and Linux.
HTML-Kit is a compact Windows tool with
• Menu-driven support for both HTML and Cascading Style Sheets (CSS) markup
• A nice preview window for a browser’s-eye view of your markup
If you want to download HTML-Kit, go to www.chami.com/html-kit. You can download a free version or register your copy for $65 and obtain a bunch of extra tools, including a spiffy table designer, a log analyzer, and a nifty graphical HTML/XML editor that lets you view and navigate all those documents through their syntactical structure.
Open Source Notepad++ offers useful and functional support for HTML and CSS, among lots of other languages and markup. Find it at http://notepad-plus-plus.org.
Inexpensive Graphics Editors
Graphics applications are beasts. They can do marvelous things, but figuring out how to use them can be overwhelming at first. Even scaled-down toolsets (such as Photoshop Elements) take time and genuine effort to understand and use well.
If you aren’t artistically inclined, consider paying someone else to do your graphics work. Graphics applications can be pricey and complicated. But you should have some kind of high-function (if not high-end) graphics program to tweak images should you need to. Our highest rating goes to Adobe Photoshop, but considering its cost and the average newbie HTML hacker’s budget, we discuss a lower-cost alternative first.
At around $120 (with discounts as low as $60), Adobe Photoshop Elements is an affordable PC- and Mac-based starter version of the full-blown Photoshop (the gold standard for graphics). You can do almost anything with Photoshop Elements you might need for beginner- or intermediate-level graphics editing.
This product is for you if you want to add images to your site, but you don't want to work with graphics all the time or use fancy special effects. To find out more about Photoshop Elements, visit www.adobe.com/products/photoshop-elements.html.
If you’re really on a tight budget, check out these graphic editors:
Paint Shop Pro Photo X5: This PC-only graphics editor is a good buy because it does nearly everything that Photoshop does and costs less than Photoshop Elements. You need to shop around to find the lowest price, though. (Corel charges $80 or $90 for this package.)
GIMP: If you're really on a shoestring budget, check out the free GNU Image Manipulation Program, better known as GIMP. It's an open source package whose functionality rivals that of Photoshop without the expensive price tag. GIMP supports a user-customizable interface, offers all kinds of sophisticated image and photo enhancements, and includes digital retouching, broad device support, and tons of graphics file formats. It works with Linux, Windows, Mac OS X, Sun OpenSolaris, and the FreeBSD operating systems. Check it out at www.gimp.org and then download it!
Professional Graphics Editors
If you work with photographs or other high-resolution, high-quality images or artwork, you may need one of these web graphics tools.
Adobe Photoshop
If it weren’t so darned expensive, we’d grant top honors to Photoshop CC. Alas, $20 a month is too high for many novices’ budgets. Wondering whether to upgrade from Photoshop Elements? Adobe mentions these capabilities among its top reasons to upgrade:
Improved file browser: Shows and tells you more about more kinds of graphics files and gives you more powerful search tools.
Shadow/Highlight correction: Powerful built-in tools add or manipulate shadows and highlights in images.
More powerful color controls: Color palettes and color-matching tools with detailed controls that Elements lacks.
Text on a path: Full-blown Photoshop lets you define any kind of path graphically and then instructs your text to follow that path. This capability supports fancy layouts that Elements can’t match.
If you need to use sophisticated visual effects, edits, or tweaks on high-resolution photorealistic images, full-blown Photoshop is your best bet. For basic websites, however, Photoshop is overkill — it can do just about anything to photos or images of all kinds, which of course is why it’s the most popular professional graphics editing tool.
Like its little brother Photoshop Elements, full-blown Photoshop works with both Mac and PC operating systems. The current version is Adobe Photoshop CC. It’s included in all of the Adobe product suites.
Photoshop CC add-ons and plug-ins provide specialized functions — such as complex textures or special graphics effects. This extensibility is nice because graphics professionals who need such capabilities can buy them (most cost $100 and up, with $300 being a pretty typical price) and add them without muss or fuss. But those who don’t need them don’t have to pay extra for the base-level software.
Adobe Fireworks
Fireworks is a graphics program designed specifically for web use, so it offers lots of nice features and functions for that purpose. The current version is Adobe Fireworks CC. Fireworks has one killer feature — it lets you save portable network graphics (PNG) files with layers defined that work more or less the same way that Photoshop Document (PSD) files do.
Fireworks is tightly integrated with other Adobe products and therefore is of potentially great interest if you’re using (or considering) Dreamweaver. Simply put, this combination of Adobe products makes it very easy to add graphical spice to web pages.
For more information about Fireworks and related Adobe products, check out www.adobe.com/products/fireworks.
W3C Link Checker
A broken link on your site can be embarrassing. To spare your users the dreaded 404 Object Not Found error message, use a link checker to make sure your links are correctly formatted before and after you publish on the web. Many HTML editors and web servers include built-in local link checkers, and they may even scour the web to check external links.
Other websites may change or disappear after you publish your pages. Regularly check your links to make sure they still work. The worst broken link is one that points to a page on your own site, which is no longer there.
The W3C link-checking tool is free, easy to use, and works surprisingly quickly (thanks to HP donating the servers to support the W3C). Here's how it works: You drop a URL in for a document you want to check, and the tool comes back to you with information about the links it finds on that page. It even does recursive checking if you click the Check Linked Documents check box on the submission page. Try this champion link checker for yourself at http://validator.w3.org/checklink.
You can also download a version of this tool that you can run on your own machine from http://validator.w3.org/docs/checklink.html. You have a couple of download options:
Grab a compiled version for your computer and operating system and run it as-is.
Grab the source code and tweak it for your needs and situation.
Other Link Checkers
The following programs are pretty good link checkers. They just require a little elbow grease to learn and use. Better yet, their price is right: free!
LinkScan/QuickCheck: LinkScan offers a real-time, single-page link check and a free evaluation software package that can handle sites with up to 500,000 documents. It creates an annotated, color-coded listing of each HTML or XHTML document it parses. This software makes it easy to find broken or suspect links, missing image files, and so forth.
Check it out at www.elsop.com/quick.
LinkChecker: LinkChecker offers free, complex, and sophisticated link-checking services, including color-coded output, support for lots of protocols and services, all kinds of URL filters and link-checking controls, cookie checks, HTML and CSS syntax checks, and lots more.
To find out more, take a look at http://wummel.github.io/linkchecker/.
HTML Validators
Validation compares a document to a set of document rules — a Document Type Definition (DTD), an XML Schema, or whatever other rules explicitly describe its syntax and structure. Simply put, validation checks the actual markup and content against the rules that govern it and flags any deviations it finds.
Typically, a document author follows this process:
1. Create an HTML document in an HTML editor.
For example, imagine this step results in a file called mypage.htm.
2. Submit mypage.htm to an HTML or XHTML validation site for inspection and validation.
If any problems or syntax errors are detected, the validator reports such errors in an annotated version of the original HTML document.
3. If the validator reports errors, the author corrects those errors and resubmits the document for validation.
Sometimes, breaking HTML rules is the only way for your page to look right in older web browsers. But document rules exist for a reason: Nonstandard or incorrect HTML markup often produces odd or unpredictable results.
Browsers usually forgive markup errors. Most browsers identify HTML pages without an html element. But someday, markup languages may be so complex and precise that browsers won't be able to guess whether you're publishing in HTML or another markup language. Get the markup right from the beginning and save yourself a bunch of trouble later.
HTML validation is built into many HTML editors, including Dreamweaver and all the other WYSIWIG and HTML Helper tools we mention at the outset of this chapter. You can find validators at
W3C validator: The W3C has a free, web-based validation system available at http://validator.w3.org. It provides copious output about what errors or inconsistencies it finds in your documents until you fix them all. It also includes an option for viewing annotated source code so you can see exactly where it's finding items it doesn't like. This is a great tool, and it is well worth using. This tool is a vital element in building a solid, well-crafted website of any kind, and it helps you fix errors and address browser issues with panache.
Built-in validators: Many tools in this chapter offer HTML validation. These include HTML-Kit, Aptana Studio, Dreamweaver, and Expression Web. Use ’em if you got ’em; get ’em if you don’t!
FTP Clients
After you create your website on your computer, you must share it with the world. So you need a tool to transfer your web pages to your web server. One convenient way to accomplish this task is through FTP (File Transfer Protocol). Many HTML editors include FTP support, but you can also use a separate FTP client to upload and download files to your web server. FTP has been around since the early days of the Internet (way before the web arrived).
After you select a server host and you know how to access a web server (your service provider should supply you with this information), you must upload your pages to that server. That means you need FTP or some reasonable facsimile thereof.
All FTP programs are similar and easy to operate. We recommend these:
FileZilla is a fast, capable, free, open source FTP program with an intuitive drag-and-drop user interface. It's available online at http://filezilla-project.org.
Cyberduck (open source for the Mac) is available at http://cyberduck.ch.
Cute FTP Lite (shareware, costs $25, but offers great functionality and ease of use) is available at www.cuteftp.com.
Fetch for the Mac is located at http://fetchsoftworks.com.
Miscellaneous Helpful Web Tools
Miscellaneous tools can help you manage and control your website. Here, we present you with a collection of items that you can try out to see whether they deliver functionality that justifies downloading, learning, and using them (we think they’re nifty, but, ultimately, that’s up to you to decide):
HTML-Kit supports plug-ins to add functions, such as link checks and spell checks. Most of these plug-ins are free or inexpensive. Check out www.chami.com/html-kit/plugins.
Easy HTML Construction Kit offers a collection of useful conversion, reformatting, and template management tools for a paltry $25 at www.hermetic.ch/html.htm.
Firebug is a Firefox plug-in you can use to help you debug programs and web pages. It lets you click sections of a page and then examine their individual properties and behaviors. Find it at http://getfirebug.com.
Browser Sandbox comes from spoon.net; it provides a tool that lets you run multiple versions of IE, Firefox, Safari, Chrome, and Opera inside the following browsers: IE (6, 7, 8), Firefox (2, 3, 3.5), Safari (3, 4), Chrome (all versions), and Opera (9, 10). Browse tohttp://spoon.net/browsers.
Dropbox makes it easy to synchronize files and directories across multiple computers anywhere on the Internet. It supports Windows, Mac, Linux, and various smartphone operating systems. Look it up at www.dropbox.com.
Google Analytics provides a plethora of statistics about visitors to your website, including user origin, operating system (OS), web browser, and oodles more. Want to understand your audience? Get Google Analytics free at www.google.com/analytics.
Crazy Egg and Clickdensity offer heat maps that illustrate exactly how people are using (and moving through) your website. No matter what or how you think your users might be using your site, these tools tell you what's really happening. Find them at www.crazyegg.com andwww.clickdensity.com.
iPhone Tester and iPad Peek provide helpful tools to see how your website looks on an iPhone and iPad without having to buy or otherwise obtain one. Check them out at www.iphonetester.com and www.ipadpeek.com.