HTML and CSS design and build websites

Recommendations

Info

E e-commerce 33 editing content 56 56 56 editing images 108 editing pages in a CMS 33 elements 52 definition of 20, 24, 38 diagram of 23, 24 elliptical shapes 322 email input 167 email links 85 embossed borders 310 emphasis 51 empty-cells property 339 empty elements 48 ems (for font sizes) 274, 276 ems (unit of measurement boxes) 303 encoding 209 entity references 193–194 equality selector 292 escape characters/codes 193–194 existence selector 292 exit pages 485 expires (meta information) 192 external style sheets (when to use) 241 F fantasy typefaces 270 file input / upload box 159 fixed positioning 364, 368 fixed width layouts 381, 383–384 flash 200–223 adding a flash movie to your page 207–208 declining usage 204 flash movies 203 flash player 203 flashvars 212, 218 flash video 211 how flash works 203 params 218 swfobject 207–208, 211, 218 uses of 204 flash of unstyled content 278 float property 364, 370–375 float property (images) 411 FLV (video format) 211 folder structure 81-84 images 98 fonts choosing a typeface 269 font sizes 276 fontsquirrel.com 277 specifying a font 273 preferences / font stack 269 styles / terminology 267–268 type scales 275 weights 268 font-face property 271 font-family property 271, 273 font-size property 274, 276 font-weight property 279 for attribute 163 foreground color 249 forward slash 24, 48, 84 formatting code 47 forms 144–173 how forms work 149–150 what HTML forms are 145 where to position labels 163 why use forms 147 162 164 151 155, 159, 160-162, 166 163 164 157 157 element 154 type attribute 155 type="checkbox" 156 type="date" 166 type="email" 167 type="file" 159 type="hidden" 162 type="image" 161 type="radio" 155 type="search" 168 types of form control 148 type="submit" 160 type="text" 152 type="url" 167 action attribute 151 checked attribute 155, 156 cols attribute 154 for attribute 163 id attribute 151, 163 maxlength attribute 152 method attribute 151 multiple attribute 158 name attribute 152, 155, 156, 157, 160 rows attribute 154 selected attribute 157 size attribute 152, 158 value attribute 155, 156, 157, 160 aligning form controls 345 changing submit button on hover 343 form validation 165 get method 151 grouping form elements 164 hidden form controls 162 hover styles 342 image buttons 161 name/value pairs 150 placeholder text 168 rounded corners on text inputs 342 styling with CSS 341–346 submit button 160 form validation 165 frameborder attribute 190 FTP 489–490 full screen layouts 382 G general sibling selector 238 GIF 111 animated GIFs 117 GIMP 108 global attributes 183 INDEX
Google analytics 483–486 Google maps 189 Google web fonts 277 gradients 419 greater than symbol 194 grids 387–390, 463 grouping and similarity 469, 469–470 grouping / chunking 465 grouping elements () 187 grouping inline elements () 188 H hCard 55 headings 22, 43 438 height attribute 100, 214 height property 303 height property (images) 409–410 height iframe 189 hex codes 249, 252 hidden form controls 162 hiding content 317, 318 home pages 81, 82 horizontal rules 48 hosted video 210 href 77, 79, 88, 235 hsl / hsla 255–256 HTML what is HTML? 6 HTML 4 179 HTML5, 179 DOCTYPE declaration 181 differences from XHTML 179 HTML5 179 Comparison with HTML 4 179 (HTML5 block level links) 441 432-439 436 217–220 119, 422, 439 119, 422, 439 432 432, 433 438 432, 434 433, 437 215, 220 213–216 autoplay attribute 219 controls attribute 219 loop attribute 219 preload attribute 219 scrolling attribute 190 seamless attribute 190 src attribute (audio) 219 date input 166 email input 167 search input 168 URL input 167 form validation 165 placeholder text 168 helping older browser understand 442 HTML5 shiv / shim 442 layout 428–449 HTML5 layout 428–449 HTTP get method 151 post method 151, 159 HTTP headers 151 Secure Sockets Layer (SSL) 153 http-equiv attribute 192 hue 252, 255 I id attribute 87, 88, 151, 163, 183 id attribute (layout) 431 id selector 238 IE6 box model 316 image button 161 image resolution 115 images 95–120 99, 100 439 119, 439 src attribute 99 alt text 99, 480 aligning images 103–105, 412 aligning images with CSS 411 background-images 413-416 (gradients) 419 indenting text 287 border-images 319 bullet points 334 choosing images and stock photography 97 copyright 97 cursors 347 dimensions 100, 107, 113–114 in CSS 409–410 editing images 108, 113–114, 116, 117 image formats 107 animated GIFs 117 bitmap 115 GIF 111, 115, 118 JPEG 109–110, 115 PNG 112, 115, 118 SVG 116 transparent GIF/PNGs 118 vector formats 116 resolution 107, 115 orientation (landscape/ portrait) 114 position in surrounding text 101 preparing for the web 107 rollovers 417 sprites 417 titles 99 indenting code 47 indenting text 287 index.html 81, 82 information hierarchy 465–466 inheritance (CSS) 239 inline elements 102, 186, 229, 317, 361 Internet Service Provider (ISP) 10 IP address 10 italic text 45 51 font-style property 280 45 INDEX
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 335:
Summary BOXES XX XX XX XX XX XX XX
Page 338 and 339:
There are several CSS properties th
Page 340 and 341:
Article Bullet Point Styles list-st
Page 342 and 343:
Article Positioning the Marker list
Page 344 and 345:
Article Table Properties You have a
Page 346 and 347:
Article Border on Empty Cells empty
Page 348 and 349:
Styling Forms Nobody I know enjoys
Page 350 and 351:
Article Styling Submit Buttons Here
Page 352 and 353:
Article Aligning Form Controls: Pro
Page 354 and 355:
Article Cursor Styles cursor The cu
Page 356 and 357:
349 LISTS, TABLES AND FORMS
Page 358 and 359:
Example LISTS, TABLES AND FORMS
Page 360 and 361:
Example LISTS, TABLES AND FORMS bac
Page 363:
Summary LISTS, TABLES AND FORMS XX
Page 366 and 367:
In this chapter we are going to loo
Page 368 and 369:
Key Concepts in Positioning Element
Page 370 and 371:
Controlling the Position of Element
Page 372 and 373:
Article Normal Flow position:static
Page 374 and 375:
Article Absolute Positioning positi
Page 376 and 377:
Article Overlapping Elements z-inde
Page 378 and 379:
Article Using Float to Place Elemen
Page 380 and 381:
Article Parents of Floated Elements
Page 382 and 383:
Article Creating Multi-Column Layou
Page 384 and 385:
Screen Sizes Different visitors to
Page 386 and 387:
Page Sizes Because screen sizes and
Page 388 and 389:
Fixed Width Layouts Fixed width lay
Page 390 and 391:
Article Fixed Width Layout To creat
Page 392 and 393:
Article Liquid Layout The liquid la
Page 394 and 395:
Layout Grids Composition in any vis
Page 396 and 397:
Possible Layouts: 960 Pixel wide 12
Page 398 and 399:
CSS Frameworks CSS frameworks aim t
Page 400 and 401:
Article Grid-Based Layout Using 960
Page 402 and 403:
Article Multiple Style Sheets @impo
Page 404 and 405:
397 LAYOUT
Page 406 and 407:
Example LAYOUT
Page 408 and 409:
Example LAYOUT .more-articles p:las
Page 411:
Summary LAYOUT X X elements are of
Page 414 and 415:
Controlling the size and alignment
Page 416 and 417:
Article Controlling sizes of images
Page 418 and 419:
Article AligNing images Using CSS I
Page 420 and 421:
Background Images background-image
Page 422 and 423:
Background Position background-posi
Page 424 and 425:
Article Image Rollovers & Sprites U
Page 426 and 427:
Article CSS3: Gradients background-
Page 428 and 429:
421 IMAGES
Page 430 and 431:
Example IMAGES Images body { co
Page 433:
Summary IMAGES XX XX XX XX XX XX Yo
Page 436 and 437:
HTML5 is introducing a new set of e
Page 438 and 439:
Traditional HTML Layouts For a long
Page 440 and 441:
Headers & Footers The and eleme
Page 442 and 443:
Articles The element acts as a co
Page 444 and 445:
Sections The element groups relat
Page 446 and 447:
Figures You already met the elem
Page 448 and 449:
Linking Around Block-Level Elements
Page 450 and 451:
443 HTML5 LAYOUT
Page 452 and 453:
Example HTML5 LAYOUT HTML5 Layou
Page 454 and 455: Example HTML5 LAYOUT margin: 10px 0
Page 457: Summary HTML5 LAYOUT XX XX XX XX Th
Page 460 and 461: This section discusses a process th
Page 462 and 463: Who is the Site For? Every website
Page 464 and 465: Why People Visit YOUR Website Now t
Page 466 and 467: What Information Your Visitors Need
Page 468 and 469: Site Maps Now that you know what ne
Page 470 and 471: WireFrames A wireframe is a simple
Page 472 and 473: Getting your message across using d
Page 474 and 475: Visual hierarchy Most web users do
Page 476 and 477: grouping and Similarity When making
Page 478 and 479: Designing Navigation Site navigatio
Page 481: Summary PROCESS & Design XX XX XX X
Page 484 and 485: To wrap up the book we are going to
Page 486 and 487: Search Engine Optimization (SEO) SE
Page 488 and 489: How to Identify Keywords and Phrase
Page 490 and 491: Analytics: Learning about your Visi
Page 492 and 493: What Are Your Visitors Looking At?
Page 494 and 495: Domain Names & Hosting In order to
Page 496 and 497: FTP & Third Party Tools To transfer
Page 499: Summary PRACTICAL INFORMATION XX XX
Page 502 and 503: # symbol (links) 87, 88 _blank 86
Page 506 and 507: J JavaScript 208, 212, 218 JPEG 109
Page 508 and 509: send to back 369 serif typefaces 26
Page 510 and 511: TroubleShooting Here are a few prob
Page 512 and 513: HTML Elements 77, 79, 85, 441 53
Page 514: CSS Properties background-attachmen
show all

HTML and CSS design and build websites

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?