- Page 3 and 4: HTML & CSS Design and Build Website
- Page 5 and 6: Credits For John Wiley & Sons, Inc.
- Page 7: Contents Introduction Chapter 1: St
- Page 10 and 11: Firstly, thank you for picking up t
- Page 12 and 13: Is it hard to Learn? Many books tha
- Page 14 and 15: How People Access the Web Before we
- Page 16 and 17: How the Web Works When you visit a
- Page 19 and 20: 1 Structure XX XX XX Understanding
- Page 21 and 22: STRUCTURE 14
- Page 23 and 24: STRUCTURE 16
- Page 25 and 26: STRUCTURE 18
- Page 27 and 28: HTML Describes the Structure of Pag
- Page 29 and 30: Tags act like containers. They tell
- Page 31 and 32: Character left-angle bracket (less
- Page 33 and 34: HTML5 allows you to use uppercase a
- Page 35 and 36: Anything written between the tags
- Page 37 and 38: Article 3 Go to the File menu and s
- Page 39 and 40: Article 3 Now go to the File menu a
- Page 41 and 42: altering one template is a lot easi
- Page 43: STRUCTURE 36
- Page 48 and 49: When creating a web page, you add t
- Page 50 and 51: Headings HTML has six "levels
- Page 52 and 53: Bold & Italic By enclosing words i
- Page 54 and 55: White Space In order to make code e
- Page 56 and 57: Visual Editors & Their Code views C
- Page 58 and 59: Strong & Emphasis The use of the
- Page 60 and 61: Abbreviations & Acronyms If you us
- Page 62 and 63: Author Details The element has qu
- Page 64 and 65: 57 TEXT
- Page 67: Summary TEXT XX XX HTML elements ar
- Page 70 and 71: There are lots of occasions when we
- Page 72 and 73: Ordered Lists The ordered list is
- Page 74 and 75: Definition Lists The definition li
- Page 76 and 77: 69 LISTS
- Page 79: Summary LISTS XX XX XX XX XX There
- Page 82 and 83: Links are the defining feature of t
- Page 84 and 85: Writing Links Links are created usi
- Page 86 and 87: Linking to Other Sites Links are c
- Page 88 and 89: Directory Structure On larger websi
- Page 90 and 91: Relative URLs Relative URLs can be
- Page 92 and 93: Email Links mailto: To create a lin
- Page 94 and 95: Linking to a Specific Part of the S
- Page 96 and 97:
89 LINKS
- Page 99:
Summary LINKS X X Links are created
- Page 102 and 103:
There are many reasons why you migh
- Page 104 and 105:
Choosing Images for Your Site A pic
- Page 106 and 107:
Adding Images To add an image into
- Page 108 and 109:
Where to Place Images in Your Code
- Page 110 and 111:
Old Code: Aligning Images Horizonta
- Page 112 and 113:
Old Code: Aligning Images Verticall
- Page 114 and 115:
Three Rules for Creating Images The
- Page 116:
Image Formats: JPEG Whenever you ha
- Page 119 and 120:
Use GIF or PNG format when saving i
- Page 121 and 122:
Cropping Images When cropping image
- Page 123 and 124:
Vector Images Vector images differ
- Page 125 and 126:
Transparency Creating an image that
- Page 127 and 128:
HTML5: Figure Article and Figure Ca
- Page 129:
Example IMAGES Images Th
- Page 133 and 134:
6 Tables XX XX XX How to create tab
- Page 135 and 136:
TABLES 128
- Page 137 and 138:
What's a Table? A table represents
- Page 139 and 140:
Table Headings Article HTML chapter
- Page 141 and 142:
Spanning Article Rows HTML chapter-
- Page 143 and 144:
Article Result Some of the HTML edi
- Page 145 and 146:
Old Article Code: Border & Backgrou
- Page 147:
Example TABLES Tables Home
- Page 151 and 152:
7 Forms XX XX XX How to collect inf
- Page 153 and 154:
FORMS 146
- Page 155 and 156:
Form Controls There are several typ
- Page 157 and 158:
A form may have several form contro
- Page 159 and 160:
Text Article Input HTML chapter-07/
- Page 161 and 162:
Text Article Area HTML chapter-07/t
- Page 163 and 164:
Checkbox Article HTML chapter-07/ch
- Page 165 and 166:
Multiple Select Article Box HTML ch
- Page 167 and 168:
Submit Article Button HTML chapter-
- Page 169 and 170:
Button & Article hidden Controls HT
- Page 171 and 172:
Grouping Article Form Elements HTML
- Page 173 and 174:
HTML5: Date Article Input HTML chap
- Page 175 and 176:
HTML5: Search Article Input HTML ch
- Page 177 and 178:
Example FORMS This example shows a
- Page 179:
Example FORMS Would you visit again
- Page 183 and 184:
8 Extra Markup XX XX XX Specifying
- Page 185 and 186:
EXTRA MARKUP 178
- Page 187 and 188:
The examples in this book all follo
- Page 189 and 190:
Comments Article in HTML HTML chapt
- Page 191 and 192:
Class Attribute Article HTML chapte
- Page 193 and 194:
Inline Elements Article HTML chapte
- Page 195 and 196:
Grouping Article Text & Elements In
- Page 197 and 198:
Article HTML chapter-08/iframes-con
- Page 199 and 200:
Article HTML chapter-08/meta.html
- Page 201 and 202:
Less-than sign < < ¢ Cent s
- Page 203:
Example EXTRA MARKUP Contact Th
- Page 207 and 208:
9 Flash, Video & Audio XX XX X X Ho
- Page 209 and 210:
FLASH, VIDEO & AUDIO 202
- Page 211 and 212:
Use of Flash Since 2005, a number o
- Page 213 and 214:
Video sharing sites offer alternati
- Page 215 and 216:
Article Result In this example, the
- Page 217 and 218:
Using Hosted Video Services The eas
- Page 219 and 220:
Adding a Flash Article Video to You
- Page 221 and 222:
HTML5: Adding Article Video to Your
- Page 223 and 224:
HTML5: Combining Flash & HTML5 Vide
- Page 225 and 226:
Adding a Article FLash MP3 Player H
- Page 227 and 228:
HTML5: Multiple Article Audio Sourc
- Page 229:
Example FLASH, VIDEO & AUDIO This e
- Page 233 and 234:
10 Introducing CSS XX XX XX What CS
- Page 235 and 236:
INTRODUCING CSS 228
- Page 237 and 238:
CSS allows you to create rules that
- Page 239 and 240:
CSS Properties Affect How Elements
- Page 241 and 242:
Example INTRODUCING CSS Here you ca
- Page 243 and 244:
Using Internal Article CSS HTML + C
- Page 245 and 246:
Selector Meaning Example Universal
- Page 247 and 248:
Inheritance Article HTML chapter-10
- Page 249:
Different versions of CSS & Browser
- Page 253 and 254:
11 Color XX XX XX How to specify co
- Page 255 and 256:
COLOR 248
- Page 257 and 258:
Background Article Color background
- Page 259 and 260:
RGB Values Values for red, green, a
- Page 261 and 262:
CSS3: Opacity Article opacity, rgba
- Page 263 and 264:
CSS3: HSL Article & HSLA hsl, hsla
- Page 265 and 266:
Example COLOR This example shows a
- Page 267:
Example COLOR p.ten { background-co
- Page 271 and 272:
12 Text XX XX XX Size and typeface
- Page 273 and 274:
TEXT 266
- Page 275 and 276:
The xyz ascender above the cap heig
- Page 277 and 278:
Monospace Cursive Fantasy Every let
- Page 279 and 280:
If you design on a Mac, it is impor
- Page 281 and 282:
Size of Article Type font-size CSS
- Page 283 and 284:
Units of Type Size Pixels Percentag
- Page 285 and 286:
Understanding Article Font Formats
- Page 287 and 288:
Article Italic font-style CSS .cred
- Page 289 and 290:
Underline & Article Strike text-dec
- Page 291 and 292:
Letter & Word Spacing Article lette
- Page 293 and 294:
Vertical Alignment Article vertical
- Page 295 and 296:
CSS3: Drop Shadow Article text-shad
- Page 297 and 298:
Styling Article Links :link, :visit
- Page 299 and 300:
Attribute Selectors You met the mos
- Page 301 and 302:
Example TEXT This example combines
- Page 303:
Example TEXT Briards A Heart wrapp
- Page 307 and 308:
13 Boxes XX XX XX Controlling size
- Page 309 and 310:
BOXES 302
- Page 311 and 312:
Limiting Article Width min-width, m
- Page 313 and 314:
Overflowing Content Article overflo
- Page 315 and 316:
White space & Vertical Margin With
- Page 317 and 318:
Border Article Style border-style H
- Page 319 and 320:
Shorthand Article border HTML chapt
- Page 321 and 322:
Article Margin margin HTML chapter-
- Page 323 and 324:
IE6 Box Article Model Result IN IE6
- Page 325 and 326:
Hiding Article Boxes visibility HTM
- Page 327 and 328:
CSS3: Box Shadows Article box-shado
- Page 329 and 330:
CSS3: Elliptical Article Shapes bor
- Page 331 and 332:
Example BOXES In this example, you
- Page 333:
Example BOXES a { color: #000000; t
- Page 337 and 338:
14 Lists, Tables and Forms XX XX XX
- Page 339 and 340:
LISTS, TABLES AND FORMS 332
- Page 341 and 342:
Images for Bullets Article list-sty
- Page 343 and 344:
List Shorthand Article list-style H
- Page 345 and 346:
Article CSS body { font-family: Ari
- Page 347 and 348:
Gaps Between Article Cells border-s
- Page 349 and 350:
Styling Text Article Inputs CSS cha
- Page 351 and 352:
Styling Fieldsets Article & Legends
- Page 353 and 354:
Aligning Article Form Controls: Sol
- Page 355 and 356:
Web Developer Toolbar This helpful
- Page 357 and 358:
Example LISTS, TABLES AND FORMS Thi
- Page 359 and 360:
Example LISTS, TABLES AND FORMS tr.
- Page 361:
Example LISTS, TABLES AND FORMS Sat
- Page 365 and 366:
15 Layout XX XX XX Controlling the
- Page 367 and 368:
LAYOUT 360
- Page 369 and 370:
Containing Elements If one block-le
- Page 371 and 372:
To indicate where a box should be p
- Page 373 and 374:
Relative Positioning Article positi
- Page 375 and 376:
Fixed Positioning Article position:
- Page 377 and 378:
Floating Elements Article float HTM
- Page 379 and 380:
Clearing Article Floats clear HTML
- Page 381 and 382:
Parents of Floated Article Elements
- Page 383 and 384:
Article HTML chapter-15/columns-thr
- Page 385 and 386:
Screen Resolution Resolution refers
- Page 387 and 388:
The shaded area is hidden by the co
- Page 389 and 390:
Liquid Layouts Lorem Ipsum Lorem
- Page 391 and 392:
Article CSS body { width: 960px; ma
- Page 393 and 394:
Article CSS body { width: 90%; marg
- Page 395 and 396:
Example Grid LAYOUT 388
- Page 397 and 398:
These two pages illustrate a 960 pi
- Page 399 and 400:
Using the 960.GS Grid Below you can
- Page 401 and 402:
Article CSS * { font-family: Arial,
- Page 403 and 404:
Multiple Style Article Sheets link
- Page 405 and 406:
Example LAYOUT This example demonst
- Page 407 and 408:
Example LAYOUT padding: 45px 0px 0p
- Page 409:
Example LAYOUT More Articles O
- Page 413 and 414:
16 Images XX XX XX Controlling size
- Page 415 and 416:
IMAGES 408
- Page 417 and 418:
Article Result First you need to de
- Page 419 and 420:
Centering Article images Using CSS
- Page 421 and 422:
Repeating Article Images background
- Page 423 and 424:
shorthand Article background CSS ch
- Page 425 and 426:
Article Complete Image Sprite Resul
- Page 427 and 428:
Contrast of background images If yo
- Page 429 and 430:
Example IMAGES This example demonst
- Page 431:
Example IMAGES Here is a selec
- Page 435 and 436:
17 HTML5 Layout XX XX XX HTML5 layo
- Page 437 and 438:
HTML5 LAYOUT 430
- Page 439 and 440:
New Html5 Layout Elements HTML5 int
- Page 441 and 442:
Navigation Article HTML chapter-17
- Page 443 and 444:
Article Asides HTML chapter-17/exa
- Page 445 and 446:
Heading Groups Article HTML chapte
- Page 447 and 448:
Sectioning Elements Article HTML c
- Page 449 and 450:
Helping Article Older Browsers Unde
- Page 451 and 452:
Example HTML5 LAYOUT This example s
- Page 453 and 454:
Example HTML5 LAYOUT color: #ffffff
- Page 455:
Example HTML5 LAYOUT A five week in
- Page 459 and 460:
18 Process & Design XX XX XX How to
- Page 461 and 462:
PROCESS 454
- Page 463 and 464:
Invent some fictional visitors from
- Page 465 and 466:
What Your Visitors are Trying to Ac
- Page 467 and 468:
How Often People Will Visit Your Si
- Page 469 and 470:
Example Site Map Home About Article
- Page 471 and 472:
Example Wireframe PROCESS 464
- Page 473 and 474:
Let's look at an example of how des
- Page 475 and 476:
Visual hierarchy refers to the orde
- Page 477 and 478:
We naturally observe similarities i
- Page 479:
A large site may have primary, seco
- Page 483 and 484:
19 Practical Information XX XX XX S
- Page 485 and 486:
PRACTICAL INFORMATION 478
- Page 487 and 488:
On-Page SEO In every page of your w
- Page 489 and 490:
4: Compare It is very unlikely that
- Page 491 and 492:
How Many People Are Coming to Your
- Page 493 and 494:
Where Are Your Visitors Coming From
- Page 495 and 496:
Email accounts Most hosting compani
- Page 497:
There are a wide variety of sites t
- Page 501 and 502:
Index XX XX XX A-Z HTML & CSS short
- Page 503 and 504:
design 467, 469 hex codes 249, 252
- Page 505 and 506:
Google analytics 483-486 Google map
- Page 507 and 508:
notepad 29-30 notepad++ 29 O obliqu
- Page 509 and 510:
V value attribute 155, 156, 157, 16
- Page 511 and 512:
LAYOUT The design looks bigger/smal
- Page 513 and 514:
HTML Attributes action 151 align 10