duckett

Recommendations

Info

Summary EXTRA MARKUP X X DOCTYPES tell browsers which version of HTML you are using. XX XX X X You can add comments to your code between the markers. The id and class attributes allow you to identify particular elements. The and elements allow you to group block-level and inline elements together. X X cut windows into your web pages through which other pages can be displayed. X X XX The tag allows you to supply all kinds of information about your web page. Escape characters are used to include special characters in your pages such as , and ©.
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 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
show all

duckett

Create successful ePaper yourself

Delete template?

Save as template?