O'Reilly logo

Web Design All-in-One for Dummies® by Sue Jenkins

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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
Making page content accessible with HTML
A
t this point in the design process, you have 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 Web site come into
play. The first couple of times you put a Web site
together can certainly feel daunting, to say the least.
That feeling of building a Web site 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? While no one perfect
solution exists, try not to let the options over-
whelm you. Instead, focus your energies on building
that first page. After the first page is built, construct-
ing 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 JavaScript; and improving page accessibility for
all Web visitors, both human and machine.
14_417966-bk03ch01.qxp 3/25/09 10:35 PM Page 207
Setting Up Basic HTML
208
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 mis-
take, when the order is incorrect, if a tag is misspelled, or if any of the parts
of the code are missing — like a period (.) or slash (/) — the page will prob-
ably 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:
DOCTYPE
HTML tags
Head tags
Title tags
Meta tags
Body tags
As long as your Web page includes all these parts in the proper order, the
page will have a solid foundation upon which the rest of your content can
gently rest. Without them, your page may not display properly in a browser,
nor communicate clearly to the person, browser, or device displaying the
page, and perhaps worst of all, not provide the details necessary to help vis-
itors find the site in a search engine. Because you clearly would want none
of these problems, you need to follow a few simple rules to ensure that your
pages are properly coded.
Adding the title, DOCTYPE, and metadata
As you find out in Book I, Chapter 4, a Web page uses a simple structure
whereby HTML tags are hierarchically nested between opening and closing
<html> tags, and between those, all the code in the page falls between
either the
<head> or the <body> tags, as follows:
14_417966-bk03ch01.qxp 3/25/09 10:35 PM Page 208

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required