Learning Web Design: HTML, Graphics, and Animation: A Beginner's Guide to HTML, Graphics, and Beyond (O'Reilly Web studio) [Paperback]

In Learning Web Design, the author of a top-rated web authoring guide (Web Design in a Nutshell) now turns her hand to a beginner's tutorial. The result is a foundation course in HTML, and an ideal starting point for learning how to build web pages.

The book does not attempt to cover every aspect of web authoring, and you should look elsewhere for coverage of technologies like Flash multimedia, Javascript or XML. Instead, Learning Web Design offers sound and thorough coverage of the fundamentals, presented in a friendly and informal style, and underpinned by the author's in-depth knowledge and professionalism.

Some Web authors use design tools, while others prefer to work directly with HTML code. This title takes a balanced view, with how-to explanations for Dreamweaver, GoLive and FrontPage, along with the equivalent HTML. For graphics, Photoshop, Fireworks and Paint Shop Pro are specifically covered.

The book is structured as four parts. The first is an overview, explaining the Web design process. Next comes an HTML tutorial, tackling page formatting, how to include graphics, tables, frames and colours. The third part is a detailed guide to Web graphics, showing how to optimise both appearance and performance. The final section is about usability and design, showing how to create pages to professional standards. There is also a peek at more advanced techniques, showing where to go for more information. The wide-margin layout gives plenty of space for illustrations, some in colour, and there are plentiful tips and references in side-panels. --Tim Anderson

'...then this should be the very first and only book that you need, in learning the basics.' www.four-runner.com 'The bestselling author of Web Design in a Nutshell now offers the perfect manual for anyone starting out in Web design.This is a competent manual that provides a good overview of the relevant skills, but don't expect details on XML. Why buy several books to get started when one is all you need". Computer Arts, July (4/5) 'From registering your domain name to cascading style sheets; with pointers at every section to help the user to find out more; this book should be in every casual web designers library.' Ping, March 2002

By working through this book, you'll develop an impressive and varied skill set...

This book should be in every casual web designers library.

If you want to read only one book, I recommend Learning Web Design which clearly lays out all you need to know in a very accessible way.

I found the tables, tips, and summations on various pages to be excellent…Highly recommend it for beginners.

In Learning Web Design, author Jennifer Niederst shares the knowledge she's gained from years of web design experience, both as a designer and a teacher. This book starts from the beginning-- defining the Internet, the Web, browsers, and URLs -- so you don't need to have any previous knowledge about how the Web works. After reading this book, you'll have a solid foundation in HTML, graphics, and design principles that you can immediately put to use in creating effective web pages. --This text refers to an out of print or unavailable edition of this title.

Jennifer Niederst was one of the first designers for the Web. As the designer of O'Reilly's Global Network Navigator (GNN), the first commercial web site, she has been designing for the Web since 1993. She is the author of Designing for the Web and Web Design in a Nutshell, both by O'Reilly. In writing this book, she draws from her experience teaching hundreds of absolute beginners.

Chapter 6 - Creating a Simple Page (HTML Overview)

In Part I: Getting Started, I provided a general overview of the web design environment. Now that we've covered the big concepts, it's time to roll up our sleeves and get started on the specifics of creating a real web page. It
will be a simple page, but even the most complicated pages are based on the principles described in the following example.

In this chapter, I create a simple web page step by step. The important lessons here are:

• How HTML tagging works
• How an HTML document is structured
• How browsers display tagged documents

Don't worry about learning specific text-formatting tags at this point. All the tags will be discussed in detail in the following chapters. For now, just pay attention to the process and the overall structure of the document. Once you understand the basics, adding tags to your bag of tricks is simple.

Introducing… the HTML Tag
If you've read through Part I of this book, you know web pages are formatted using HTML tags. The characters within the tag are usually an abbreviation of a formatting instruction or an element to add to the page.

Most HTML tags are container tags. They consist of two tags (a beginning and an end tag) that are wrapped around a range of text. The tag instruction applies to all the content contained within the tags. Think of them as
an "on" switch and "off " switch. The end tag looks the same as the start tag, only it begins with a slash ().

A few tags are standalone tags: you just drop them into place where you want an element to appear. They do not have a closing tag. We'll be using both types of tags in the following web page demo.

Assembling a Web Page
We are ready to make a web page. This demonstration has four steps:

Step 1: Setting up the HTML document. You'll learn about the tags used to give an HTML document its structure.

Step 2: Formatting text. We'll use container tags to format the text on the page.

Step 3: Adding graphical elements. We'll use standalone tags to add pictures and rules to the page. We'll also look at how tag attributes work.

Step 4: Adding a hypertext link. Since the Web is about linking, a web page demo would be incomplete without an introduction to linking.

I'll be typing the HTML by hand using an HTML editor called BBEdit (on a Mac). You could also use Allaire HomeSite if you're on a PC. Word processing programs such as Microsoft Word are not appropriate because they add hidden information to the code, and what we're after is pure text
characters (ASCII).

I'll be checking my work in a browser frequently throughout this demonstration — probably more than you would in real life—but since this is a first introduction to HTML, I find it helpful to show the cause and effect of each change.

Step 1: Setting Up the HTML Document
There are two things that make an ordinary text file a browser-readable web document. The document must have a name that ends in .htm or .html in order to be recognized by the browser, and it must contain the basic HTML tags that define the structure of the web document.

Basic structure
Begin a new web document by giving it a skeleton.
There are really only two parts to an HTML document: the head (also called the header) and the body. The head contains information about the document (its title, for instance); the body contains the actual content of the document. The structure of the document is identified by using the , , and container tags.

1 First, tell the browser that the text is in HTML format by labeling the entire document as "HTML." Place the "start HTML" tag (HTML>) at the very beginning of the text and the "end HTML" tag (/HTML>) at the end.

2 The …/HEAD>tags define the beginning and end of the head section of the document. Right now, that section is empty.

3 The …/BODY>tags define the body of the document. This is where we'll put the contents of the page; that is, everything we want to display in the browser window.