been taken in the preparation of the book, neither theor entity with respect to any loss or damage caused

Proofreader: Patricia Pane

or alleged to be caused directly or indirectly by the

Indexer: Rebecca Plunkett

instructions contained in this book or by the computersoftware and hardware products described in it.

Cover & Interior Designer: Jonathon Wolfer

TrademarksMany of the designations used by manufacturers andsellers to distinguish their products are claimed astrademarks. Where those designations appear in thisbook, and Peachpit was aware of a trademark claim,ISBN 13: 978-0-321-91893-2

the designations appear as requested by the owner of

ISBN 10:

identified throughout this book are used in editorial

the trademark. All other product names and services

0-321-91893-2

fashion only and for the benefit of such companies with987654321

no intention of infringement of the trademark. No such

Printed and bound in the United States of America

endorsement or other affiliation with this book.

use, or the use of any trade name, is intended to convey

ii

M e ta I n f o r m at i o n

To my grandmother, Nonnie; you pushed me to never stop learning.And to my wife, Erica; you always sustain me.

iii

F O U N D AT I O N S O F W E B D E S I G N

I hear and I forget. I seeand I remember. I do andI understand.~ Confucius

iv

M e ta I n f o r m at i o n

Ack n owle d g m e nt s

I don’t know if I can thank enough people (or thank them enough) for allthe support they’ve provided during the writing of this book. If I leavesomeone out, just let me know on Twitter @coldcoffee!First off, I give thanks to my Creator, who has sustained me throughoutthe writing of this book—all things are truly possible.Thank you to my amazing, beautiful, and patient wife, Erica, andwonderful kids, Dylan and Natalie, who have been a tremendous supportand were extremely accommodating while I worked long hours writingthis book. I’m going to be ever so grateful to be a part of the familyagain. I also give thanks to my mother-in-law, Mary, who helped watchthe kids when my wife needed a break—you are truly a gift!I’d like to thank my team at Peachpit Press: Michael Nolan, who tooka chance on an unknown teacher; and Margaret Anderson, an amazingdevelopmental editor, who helped to make my words clearer than Icould have done on my own, kept me on task, and rapped my knuckleswhen necessary. I owe a great debt to Chris Mills, my tech editor, whohas always been one of my web heroes, for all his suggestions andcorrections. Thank you to Katerina Malone, Jennifer Needham, andPatricia J. Pane, who caught all big, small, and in-between mistakes,and Rebecca Plunkett for indexing the book.

v

Thanks also to my friends—Marc & Sharon, Kai & Kristi,Rob & Sara, Rudy & Stefanie, Tracy & Lori, Brad & Lori,and many others—who constantly gave me support andencouragement.Thank you to my students—all of you whom I’ve taughtover the past six years—who were the inspiration behindthis book. Special thanks go to Jonathon Wolfer, mylongtime student, who designed my book.To iconmonstr (http://iconmonstr.com/) for many of theicons at the start of each chapter and within Chapter 13.To the brilliant and funny Dr. Leslie Jensen-Inman, whosaw something in me I didn’t and recommended me toMichael Nolan: I’m so thankful for our email conversation,which began two years ago, about elevating web designin higher education—and for (most of all) your friendship.Heartfelt thanks to my mom and dad for all those yearsof support and love … I sure wish dad could have livedto see his youngest getting a book published.

I am always doing thatwhich I can not do, inorder that I may learnhow to do it.~ Pablo Picasso

x

Introduction

W e lco m e to

Fou n datio n sOf W e b D e sig n :HTML & CSSSince Sir Tim Berners-Lee, a researchscientist, proposed and developed aninternet-based hypertext system backin 1989, and then, in the early 1990s,developed the first HTML documents,HTML has been the backbone forcreating websites. While style sheetshave been a part of markup languagessince the 1980s, CSS (Cascading StyleSheets), which was created to separatepresentation (design) from content(markup documents), was first adoptedin the mid-1990s; since then, CSS hasbecome the standard styling languagefor the Web. Today, HTML and CSSneed to be a part of every hobby andprofessional web designer’s toolkit.

Who This BookIs ForThis book is written primarily for twotypes of readers:• Absolute beginners at hand-codingHTML and CSS• Those who have used a drag-anddrop website-builder application, butmay have little to no idea what allthose letters (p, q, b, etc.), numbers(h1, h2, etc.), and words (strong, span,div, etc.) inside the angled brackets(< >) really areYou may wish to learn HTML andCSS to help build a personal website(professional or for family) or to look totake a step toward working in the field ofweb design. Either way, I believe you’llfind this book, and the accompanyingresources, to be helpful in your journey.

ObjectivesThe objective of Foundations of WebDesign: HTML & CSS is to providea fundamental knowledge of HTML(Hypertext Markup Language) and CSS(Cascading Style Sheets). Learning isaccomplished through hands-on codingdemonstrations—in the book and inonline video tutorials—and challenges.Additionally,youcandownloadassignments in which you’ll be askedto develop a basic website basedupon chapter material, a one-pagepromotional site for a midterm project,and a personal website—professional,family, or client—for your final project.Online AssignmentReviewsIf you are a self-learner—and

not in a classroom directed byan instructor—you will be able

to submit your work online forquestions and reviews.

xi

F O U N D AT I O N S O F W E B D E S I G N

Description

Conventions Used

The different parts of this book workto build your knowledge and skill ina slightly different manner than otherbooks of this type.

Part 1: BasicsIn Chapters 1-5, you’ll learn the basicsof creating and coding HTML andCSS documents. While it may seemvery elementary, it lays an importantfoundation for the subsequent chapters.Part 2: Working TogetherIn Chapters 6-8, you will start to seehow HTML and CSS work together indeveloping more complex web pagesthrough the use of attributes, selectors,typography, and the all-important boxmodel. This is either where it “clicks” formany students or where they become“lost.” Make sure you take your timeand work through each demonstration(multiple times, if necessary).

Code ExamplesPart 3: Layout andInteractivity

HTML code that is being used as acurrent example is a bright blue color:

Chapters 9-12 will teach you how tocreate layouts that are responsivefor different devices, how to developnavigation elements that help users findinformation on your website, and how todesign and use forms.

This is a header

Part 4: Next Step

This is a paragraph

Chapters 13 and 14 talk about the tasksthat are involved in developing a websitefrom beginning to end, and aboutadditional skills a web designer needs—giving you a foretaste of what you can donext and pointing toward where you canlearn those skills.

xii

HTML code that has been previouslyshown but is part of a new example isshown in a muted blue color:

This is a header

Introduction

FilesWhen downloading files, you’ll find theyare all compressed in the .zip formatand will need to be uncompressed (orextracted) prior to use.

CSS code that is being used as a currentexample is a bright magenta color:h1 {color: orange;}

CSS code that has been previouslyshown but is part of a new example isshown in a muted magenta color:

Sometimes lines of code are intended tobe written on a single line, but the bookrequires a line wrap. An arrow shows wherea line break occurs for print formattingpurposes only and should be ignored.

h1 {font-size: 2em;

Tip: Tips & notes provide reminders

about the current topic or step.

a ZIP file.

When referencing folder and documentnames for demonstration, the names willbe in bold lettering:foldernamedocument.html

If you see a forward slash (/) betweentwo names

}

if you do not know how to uncompress

document.css

color: orange;

Tips & Notes

Need Help Extracting? Video

tutorials are available on the website

SidebarsSidebars help you learn more about

a topic through related information.

xiii

fowd_ch02_folder/01-book.htmlit’s telling you that the document (01book.html) is located in a specific folder(fowd_ch02_folder).

F O U N D AT I O N S O F W E B D E S I G N

R equir e m e nt s

Browser

Internet Explorer

In order to work through the assignmentsand projects in this book, you do notneed expensive software or hardware.

It would be best to download one ortwomodern—standards-compliant—browsers such as Chrome, Firefox, orOpera (Figure 1). All of these can beinstalled on Linux, Mac, and Windowssystems. The screenshots you’ll seein this book were primarily taken whileusing Opera on Mac, unless otherwisenoted.

If you’re a Windows user, you might

Text EditorYou will need a code text editor—not a texteditor that came with your computer—to write HTML and CSS. An excellent,and free, editor I would recommend isKomodo Edit (http://activestate.com/komodo-edit) for Windows, Mac, andLinux. Other free alternatives includeNotepad++ for Windows, TextWranglerfor Mac, and Bluefish for Linux.

Note: The website has links and

tutorials to help you install and set

be accustomed to using Internet

Explorer (referred to throughout

this book as IE). It’s fine to continue

using it, but the examples in this

book will primarily work for version8 (IE8) and above. Microsoft hasstopped

supporting

IE6,

and

IE7 lags behind web standards

common in most browsers. Checkyour version of IE by selectingAbout Internet Explorer under theHelp tab (Figure 2).

Figure 1Chrome, Firefox, and Opera are opensource browsers that keep current withmany web standards and are available onmultiple operating systems.

SafariIf you’re a Mac user, Safari is pre-

installed on your computer andhas kept up good support of web

up Komodo Edit.

standards. However, make sure

Image Editor

If you have Photoshop or PhotoshopElements, those are fine but a bit muchfor what you need at this point. Pixlr(http://pixlr.com/editor/) is a great freeapplication that works directly in yourbrowser. Additional image editors areincluded on the website.

a Windows operating system to run

Note: It’s beyond the scope of

this book to have Mac users set upInternet Explorer. Windows users alsocannot install the latest version ofSafari. There’s more on multi-browsertesting in Chapter 13 on the website.

xiv

your version of Safari is as up to

date as possible. At minimum,

you should have Safari 5, but itwould be best to have Safari 6.

To check your version of Safari,

simply select About Safari underthe Safari menu (Figure 3).

Introduction

Web Hosting & DomainRegistration

Book + Website =Enhanced Learning

In the final set of assignments andprojects, you will need to host yourwebsite online. Instructions on how toregister a domain name, set up a freehosting account, and uploading files aresupplied on the corresponding website.

What’s different about this book?While the book does contain a substantialamount of information and examplesby itself, it’s not intended to be a bulky,comprehensive resource on its own.The corresponding website, found athttp://foundationsofwebdesign.com,provides a great deal of additionalmaterial:

Chapter DownloadsFigure 2How to check your version of IE.

At the beginning of a chapter that hasfiles and documents to download, you’llsee the following message:Chapter Code

Forums and ResourcesAdditionally, the website has a forumwhere you can answer questions,submit website assignments for review,download assignments, and findadditional resources related to eachchapter topic.Video DemonstrationsVideo tutorials are provided for eachchapter to enhance and reinforce what istaught in the book. Why the combinationof print and video? We learn best whenwe can combine the use of as manysenses as possible, and, between thebook and videos, I’m hoping (for most ofyou) to hit at least three (sight, hearing,and touch) of the five senses. The videosalso supply a few advantages:• You see me walk through each step ofa demonstration.

The code examples for this chapter

can be downloaded from the website

• You work right along with the video.

(http://foundationsofwebdesign.com).

• You can pause and replay if anythingdoesn’t make sense.

Figure 3How to check your version of Safari.

xv

F O U N D AT I O N S O F W E B D E S I G N

Structure

Teachers

Flipped Classroom

How should you approach the material?

If you’re a teacher and wish to adopt thistextbook for your class, I’ve provided thefollowing materials to download from thewebsite:

My

• Course syllabus

projects during the class time.

1. Read through the chapter and workthrough the demonstrations.2. Watch the videos and work throughthe demonstrations.3. Work on the assignment/projects(PDFs available on the site).

classes

use

the

“flipped

classroom” model, which means

students read and watch video

demonstrations outside of classand work on assignments and

This allows the teacher to work

• Assignments

as a guide and revisit concepts

students don’t understand. There

• Two projects

is more information online, and

• Rubrics for gradingThese documents can be modified to fityour class needs.

xv i

I am happy to talk to you aboutthis model if you’re interested infinding out more.

If you hold a cat by the tailyou learn things you cannotlearn any other way.~ Mark Twain

xv ii

This page intentionally left blank

This page intentionally left blank

TA B L E S

Ta bles

0445

F O U N D AT I O N S O F W E B D E S I G N

Chapter CodeThe code examples for this chaptercan be downloaded from the website(http://foundationsofwebdesign.com).

What are HTML tables used for? Thinkof spreadsheets or data you want toorganize and present. Maybe you havestatistics, a schedule, or a project youneed to organize. Let’s see how eachelement is used.

Ta b le E le m e nt

Table Headings

The table element allows you to arrangeand present data in rows and columns ofcells. However, it can’t do much without itssupporting cast: the tr (table row), td (tabledata cell), and th (table header) elements.So, let’s start out by using these basicelements with some common attributes.

The th element holds the heading of eachcolumn. Let’s say you’re developinga reading list of your favorite booksand you want columns for the authors,for the book titles, and for indicating ifyou’ve read each book.

Step 4.1.1Open the table.html document in thefowd_ch04_folder and enter a tableelement inside the div element.

Step 4.1.2Add the three th elements with thecolumn topics within the

tags.

Author(s)

Book Title

Read?

46

Save your document and view the resultin the browser (Figure 4.1).

TA B L E S

Years Past

Table Rows

Did you know that web designers

way—before there was adequate

The tr element defines the rows of yourtable. While the three th elements alreadydisplay as a “row,” the tr element givesstructure and meaning to a row—and atable can have lots of rows.

layout looked the same from

used to design layouts using table

elements! Well, it’s not so crazyconsidering that tables were one

CSS support—to make sure yourbrowser to browser. However, in

modern web design, page layoutis not the purpose of tables.

Author(s)

Book Title

Read?

John Steinbeck

Author(s)

Book Title

Read?

The Grapes of WrathYes

The next row will add data about one ofyour favorite books. The data for eachbook will be contained in a row, betweena set of

tags. The first bookis John Steinbeck’s The Grapes of Wrath,which you will affirm you’ve read.

Figure 4.1Table headers are bold by default.

Figure 4.2Unstructured table row.47

When you view this site, notice that thedata is above (not below) each headingand not within the borders of your table(Figure 4.2).In order to get the data in the correctspot, you need to add another set oftags around each piece of data using thetd element.

F O U N D AT I O N S O F W E B D E S I G N

Table Data Cell

Table Border

The td element defines the cells of yourtable and contains your data.

In order to see your table a little moreeasily, you’re going to add a borderaround it. Although we’ve not discussedCSS (Cascading Style Sheets), thismethod is best for displaying borders.

Step 4.1.3In the example, the book’s name, theauthor’s name, and your “yes” or “no”(whether or not you’ve read the book)are your data. Each item of data needsto be within a td element.

Author(s)

Step 4.1.4Add styles, within the tagslocated in the head element, to show theborder for the table, th, and td elementswithin your HTML document (Figure 4.4).