- 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 47 and 48:
2 Text XX XX XX Headings and paragr
- Page 49 and 50:
TEXT 42
- Page 51 and 52:
Paragraphs Article HTML chapter-02/
- Page 53 and 54:
Superscript Article & Subscript HTM
- Page 55 and 56:
Line Breaks Article & Horizontal Ru
- Page 57 and 58:
Semantic Markup There are some text
- Page 59 and 60:
Quotations Article HTML chapter-02/
- Page 61 and 62:
Citations Article & Definitions HTM
- Page 63 and 64:
Changes to Content Article HTML cha
- Page 65:
Example TEXT This is a very simple
- Page 69 and 70:
3 Lists XX XX XX Numbered lists Bul
- Page 71 and 72:
LISTS 64
- Page 73 and 74:
Unordered Article Lists HTML chapte
- Page 75 and 76:
Nested Article Lists HTML chapter-0
- Page 77:
Example LISTS Here you can see a ma
- Page 81 and 82:
4 Links XX XX XX Creating links bet
- Page 83 and 84:
LINKS 76
- Page 85 and 86:
The text between the opening tag a
- Page 87 and 88:
Linking to Other Article Pages on t
- Page 89 and 90:
Parent The examplearts folder is a
- Page 91 and 92:
Relative Link Type example (from di
- Page 93 and 94:
Opening Article Links in a New Wind
- Page 95 and 96:
Linking to a Specific Article Part
- Page 97:
Example LINKS This example is of a
- Page 101 and 102:
5 Images XX XX XX How to add images
- Page 103 and 104:
IMAGES 96
- Page 105 and 106:
Storing Images on Your Site If you
- Page 107 and 108:
Height & Article Width of Images HT
- Page 109 and 110:
Article Result Where you place the
- Page 111 and 112:
Article Result This looks a lot nea
- Page 113 and 114:
Article Result The value of top pla
- Page 115 and 116:
Tools to Edit & Save Images There a
- Page 118 and 119:
DESIGN RESEARCH Image Formats: GIF
- Page 120 and 121:
Image Dimensions The images you use
- Page 122 and 123:
Image Resolution Images created for
- Page 124 and 125:
Animated GIFs Animated GIFs show se
- Page 126 and 127:
Examining Images on the Web Checkin
- Page 128 and 129:
In this example, the logo is a GIF
- Page 131:
Summary IMAGES X X XX XX XX The el
- Page 134 and 135:
There are several types of informat
- Page 136 and 137:
129 TABLES
- Page 138 and 139:
Basic Table Structure The element
- Page 140 and 141:
Spanning ColumnS Sometimes you may
- Page 142 and 143:
Long Tables There are three element
- Page 144 and 145:
Old Code: Width & Spacing There are
- Page 146 and 147:
This example shows a table for cust
- Page 149:
Summary TABLES X X XX XX XX The el
- Page 152 and 153:
Traditionally, the term 'form' has
- Page 154 and 155:
Why Forms? The best known form on t
- Page 156 and 157:
How Forms Work A user fills in a fo
- Page 158 and 159:
Form Structure Form controls live
- Page 160 and 161:
Password Input type="password" Whe
- Page 162 and 163:
Radio Button type="radio" Radio bu
- Page 164 and 165:
Drop Down List Box A drop down lis
- Page 166 and 167:
File Input Box If you want to allo
- Page 168 and 169:
Image Button type="image" If you w
- Page 170 and 171:
Labelling Form Controls When intro
- Page 172 and 173:
HTML5: Form Validation You have pro
- Page 174 and 175:
HTML5: Email & URL Input HTML5 has
- Page 176 and 177:
169 FORMS
- Page 178 and 179:
Example FORMS Forms Your Det
- Page 181:
Summary FORMS XX XX XX XX Whenever
- Page 184 and 185:
At this point, we have covered the
- Page 186 and 187:
The Evolution of HTML Since the web
- Page 188 and 189:
DOCTYPEs Because there have been se
- Page 190 and 191:
ID Attribute Every HTML element can
- Page 192 and 193:
Block Elements Some elements will a
- Page 194 and 195:
Grouping Text & Elements In a Block
- Page 196 and 197:
IFrames An iframe is like a little
- Page 198 and 199:
Information About Your Pages The
- Page 200 and 201:
Escape Characters There are some ch
- Page 202 and 203:
This example starts by using a DOCT
- Page 205:
Summary EXTRA MARKUP X X DOCTYPES t
- Page 208 and 209:
Flash is a very popular technology
- Page 210 and 211:
How Flash Works Since the late 1990
- Page 212 and 213:
Timeline: Flash, VidEo & Audio Web
- Page 214 and 215:
Adding a Flash Movie to Your Web Pa
- Page 216 and 217:
Understanding Video Formats and Pla
- Page 218 and 219:
Preparing a Flash Video for Your Si
- Page 220 and 221:
HTML5: Preparing Video for Your Pag
- Page 222 and 223:
HTML5: Multiple Video Sources To s
- Page 224 and 225:
Adding Audio to Web Pages By far th
- Page 226 and 227:
HTML5: Adding HTML5 Audio to Your P
- Page 228 and 229:
221 FLASH, VIDEO & AUDIO
- Page 231:
Summary FLASH, VIDEO & AUDIO XX XX
- Page 234 and 235:
In this section, we will look at ho
- Page 236 and 237:
Understanding CSS: Thinking Inside
- Page 238 and 239:
CSS Associates Style rules with HTM
- Page 240 and 241:
233 INTRODUCING CSS
- Page 242 and 243:
Using External CSS The element ca
- Page 244 and 245:
CSS Selectors There are many differ
- Page 246 and 247:
How Css Rules Cascade If there are
- Page 248 and 249:
Why use External Style Sheets? When
- Page 251:
Summary INTRODUCING CSS XX XX XX XX
- Page 254 and 255:
Color can really bring your pages t
- Page 256 and 257:
Foreground Color color The color pr
- Page 258 and 259:
Understanding Color Every color on
- Page 260 and 261:
Contrast When picking foreground an
- Page 262 and 263:
CSS3: HSL Colors CSS3 introduces an
- Page 264 and 265:
257 COLOR
- Page 266 and 267:
Example COLOR Color body { back
- Page 269:
Summary COLOR XX XX XX XX XX XX Col
- Page 272 and 273:
The properties that allow you to co
- Page 274 and 275:
Typeface Terminology Serif Serif fo
- Page 276 and 277:
Choosing a Typeface for your Websit
- Page 278 and 279:
Techniques That Offer a Wider Choic
- Page 280 and 281:
Specifying Typefaces font-family Th
- Page 282 and 283:
Type Scales You may have noticed th
- Page 284 and 285: More Font Choice @font-face @font-f
- Page 286 and 287: Bold font-weight The font-weight pr
- Page 288 and 289: UpperCase & LowerCase text-transfor
- Page 290 and 291: Leading line-height Leading (pronou
- Page 292 and 293: Alignment text-align The text-align
- Page 294 and 295: Indenting Text text-indent The text
- Page 296 and 297: First Letter or Line :first-letter,
- Page 298 and 299: Responding to Users :hover, :active
- Page 300 and 301: 293 TEXT
- Page 302 and 303: Example TEXT Text body { paddin
- Page 305: Summary TEXT XX XX XX XX XX There a
- Page 308 and 309: At the beginning of this section on
- Page 310 and 311: Article Box Dimensions width, heigh
- Page 312 and 313: Article Limiting Height min-height,
- Page 314 and 315: Border, Margin & Padding Every box
- Page 316 and 317: Article Border Width border-width T
- Page 318 and 319: Article Border Color border-color Y
- Page 320 and 321: Article Padding padding The padding
- Page 322 and 323: Article Centering Content If you wa
- Page 324 and 325: Article Change Inline/Block display
- Page 326 and 327: Article CSS3: Border Images border-
- Page 328 and 329: Article CSS3: Rounded Corners borde
- Page 330 and 331: 323 BOXES
- Page 332 and 333: Example BOXES Boxes body { font
- 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