HTML and CSS design and build websites

Recommendations

Info

Summary FLASH, VIDEO & AUDIO XX XX X X XX Flash allows you to add animations, video and audio to the web. Flash is not supported on iPhone or iPad. HTML5 introduces new and elements for adding video and audio to web pages, but these are only supported in the latest browsers. Browsers that support the HTML5 elements do not all support the same video and audio formats, so you need to supply your files in different formats to ensure that everyone can see/hear them.
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 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

HTML and CSS design and build websites

Create successful ePaper yourself

Delete template?

Save as template?