Book III
Building Websites
When it’s time to build your site, you’ll delve into the world of HTML, CSS, and JavaScript, and possibly also XHTML, HTML5, CSS3, jQuery, and more. Using your preferred HTML editor, you’ll be creating all the individual pages of your site from the optimized graphics you created from your mock-up.
Here you find chapters about adding content to your pages, including text, images, hyperlinks, layers, tables, lists, and media files. You also discover a host of information about working with Cascading Style Sheets to style and position your content in the most user-friendly, accessible, standards-compliant manner. This minibook is rounded out by additional chapters on creating layers-based layouts, working with navigation systems, designing web forms, making your site interactive with JavaScript and jQuery, and discovering how to work efficiently with templates and Server-Side Includes.
Chapter 1: Adding Text, Images, and Links
In This Chapter
Understanding HTML basics Working with semantic markup Inserting text and graphics Hyperlinking text and graphics to other pages Labeling objects in preparation for using CSS, jQuery, and JavaScript Making page content accessible with HTML At this point in the design process, you’ve already discovered a little bit about HTML coding, syntax, and structure. To complement that knowledge, you’ve also made several important decisions about the look and feel of your design and have hopefully already mocked up the home page in your preferred graphics software program and presented your design to your web client for review and approval. In this chapter, you find out how to put all those pieces together into a single HTML document.
To start, you find out about setting up a basic, bare-bones HTML page, which you can use for any web project. After that, the specifics of your particular website come into play. The first couple of times you put a website together can certainly feel daunting, to say the least. That feeling of building a website from scratch can be similar to the feeling a painter has when looking at a fresh blank canvas. Where should you begin? What should you do first? Although no perfect solution exists, try not to let the options overwhelm you. Instead, focus your energies on building that first page. After the first page is built, constructing the rest of the site should come relatively easily.
In addition to the basics, this chapter also covers using meta tags; adding content (such as text and graphics) to the body of the page; creating hyperlinks to other pages from text and graphics; marking up content and labeling objects properly in preparation for using CSS and applying jQuery and JavaScript; and improving page accessibility for all web visitors, both human and machine.
Setting Up Basic HTML
To ensure that your web pages display properly in a browser window, your HTML code must include several necessary components, each of which must be placed in the correct order. As you’ll probably discover with a mistake, when the order is incorrect, whether a tag is misspelled, or whether any of the parts of the code are missing — such as a period (.) or slash (/) — the page will probably not display correctly (or at all) when viewed in different browsers. Even more annoyingly, some browsers might display the page fine, while in other browsers the page looks all crazy and crooked. In fact, the more you understand about building web pages, the quicker you’ll discover that a single page can look very different in different browsers, even when all the HTML, CSS, and JavaScript code is perfectly written!
A good, well-structured web page has six core parts that should flow in the following order:
1. DOCTYPE
2. HTML tags
3. Head tags
4. Title ta...
