25,99 €
Mehr erfahren.
- Herausgeber: John Wiley & Sons
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
- Veröffentlichungsjahr: 2023
A thorough and helpful reference for aspiring website builders Looking to start an exciting new career in front-end web building and design? Or maybe you just want to develop a new skill and create websites for fun. Whatever your reasons, it's never been easier to start learning how to build websites from scratch than with help from HTML, CSS, & JavaScript All-in-One For Dummies. This book has the essentials you need to wrap your head around the key ingredients of website design and creation. You'll learn to build attractive, useful, and easy-to-navigate websites by combining HTML, CSS, and JavaScript into fun and practical creations. Using the 6 books compiled within this comprehensive collection, you'll discover how to make static and dynamic websites, complete with intuitive layouts and cool animations. The book also includes: * Incorporate the latest approaches to HTML, CSS, and JavaScript, including those involving new markup, page styles, interactivity, and more * Step-by-step instructions for new site creators explaining the very basics of page layouts and animations * Easy-to-follow advice for adjusting page color and background, adding widgets to a site, and getting rid of all the bugs that affect site performance * Bonus 6th book available at https://www.wiley.com/en-us/HTML%2C+CSS%2C+%26amp%3B+JavaScript+All+in+One+For+Dummies-p-9781394164721. Web development is a fun, interesting, and challenging skill that can lead to a lucrative career (if you're so inclined). And with the right help, almost anyone can learn to create engaging websites from scratch. So, grab a copy of HTML, CSS, & JavaScript All-in-One For Dummies and you'll be designing and building before you know it!
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 1094
Ähnliche
HTML, CSS, & JavaScript® All-in-One For Dummies®
Published by: John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, www.wiley.com
Copyright © 2023 by John Wiley & Sons, Inc., Hoboken, New Jersey
Published simultaneously in Canada
No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without the prior written permission of the Publisher. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions.
Trademarks: Wiley, For Dummies, the Dummies Man logo, Dummies.com, Making Everything Easier, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and may not be used without written permission. JavaScript is a registered trademark of Oracle America, Inc. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in this book.
LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: WHILE THE PUBLISHER AND AUTHORS HAVE USED THEIR BEST EFFORTS IN PREPARING THIS WORK, THEY MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES REPRESENTATIVES, WRITTEN SALES MATERIALS OR PROMOTIONAL STATEMENTS FOR THIS WORK. THE FACT THAT AN ORGANIZATION, WEBSITE, OR PRODUCT IS REFERRED TO IN THIS WORK AS A CITATION AND/OR POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE PUBLISHER AND AUTHORS ENDORSE THE INFORMATION OR SERVICES THE ORGANIZATION, WEBSITE, OR PRODUCT MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING PROFESSIONAL SERVICES. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR YOUR SITUATION. YOU SHOULD CONSULT WITH A SPECIALIST WHERE APPROPRIATE. FURTHER, READERS SHOULD BE AWARE THAT WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ. NEITHER THE PUBLISHER NOR AUTHORS SHALL BE LIABLE FOR ANY LOSS OF PROFIT OR ANY OTHER COMMERCIAL DAMAGES, INCLUDING BUT NOT LIMITED TO SPECIAL, INCIDENTAL, CONSEQUENTIAL, OR OTHER DAMAGES.
For general information on our other products and services, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002. For technical support, please visit https://hub.wiley.com/community/support/dummies.
Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with standard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http://booksupport.wiley.com. For more information about Wiley products, visit www.wiley.com.
Library of Congress Control Number: 2023940485
ISBN 978-1-394-16468-4 (pbk); ISBN 978-1-394-16497-4 (ebk); ISBN 978-1-394-16472-1 (ebk)
HTML, CSS, & JavaScript® All-in-One For Dummies®
To view this book's Cheat Sheet, simply go to www.dummies.com and search for “HTML, CSS, & JavaScript All-in-One For Dummies Cheat Sheet” in the Search box.
Table of Contents
Cover
Title Page
Copyright
Introduction
About This Book
Foolish Assumptions
Icons Used in This Book
Beyond the Book
Book 1: Getting Started
Chapter 1: Getting Acquainted with HTML, CSS, and JavaScript
What Do HTML, CSS, and JavaScript Do, Exactly?
Why Learn HTML, CSS, and JavaScript?
Seeing How It All Works
Adding Structure with HTML
Adding Style with CSS
Adding Dynamism with JavaScript
Chapter 2: Getting Ready to Code
Setting Up Your Test Browsers
Creating Your Local Folders
Choosing Your Text Editor
What Else Do You Need?
Using the WebDev Workbench
Chapter 3: Finding and Setting Up a Web Host
Understanding Web Hosting Providers
A Buyer’s Guide to Web Hosting
Finding a Web Host
Finding Your Way around Your New Web Home
Chapter 4: Testing and Validating Your Code
Cross-Browser Testing Your Code
Understanding Validation
Don’t Skip Validation!
Validating Your HTML Code
Validating Your CSS Code
Validating Your JavaScript Code
Book 2: Learning HTML Basics
Chapter 1: Building Good Bones: Structuring the Page
Getting to Know HTML’s Basic Structure Tags
Carving Up the Page
Commenting Your Code
Chapter 2: Adding Links, Lists, and Other Text Tidbits
Applying the Basic Text Tags
Creating Links
Building Bulleted and Numbered Lists
Inserting Special Characters
A Few More HTML Text Tags to Know
Chapter 3: Working with Images, Video, and other Media
Inserting Images
Embedding Videos
Embedding Audio Snippets
Chapter 4: Building Tables with Your Bare Hands
What Is a Table?
Web Woodworking: How to Build a Table
Adding More Table Elements
Table Refinishing: Styling Your Tables
Chapter 5: Using Forms to Make a Page Interactive
What Is a Web Form?
Building a Web Form
Chapter 6: Making Your Web Pages Accessible
Why to Make Your Pages Accessible
Understanding Web Accessibility
Making Your Page Structure Accessible
Making Text Accessible
Making Media Accessible
Buffing Up Your Page Accessibility Semantics
Making Your Pages Keyboard-Friendly
Ensuring Sufficient Color Contrast
Validating the Accessibility of a Page
Book 3: Learning CSS Basics
Chapter 1: Figuring Out the CSS Box Model
Thinking Outside (but Also Inside) the Box Model
A Brief Digression on Whitespace
Adding Padding
Putting a Border on It
Manipulating Element Margins
Styling Element Sizes
Chapter 2: Getting to Know the CSS Selectors
Introducing Yourself to the Web Page Family
What’s All This About a Selector?
Learning the Standard Selectors
Selecting Descendants, Children, and Siblings
Selecting Elements by Attribute
Chapter 3: Pseudo School: Learning Pseudo-Classes and Pseudo-Elements
Scratching Your Head Over Pseudo-Classes
Getting Up to Speed with Pseudo-Elements
Chapter 4: Making CSS Make Sense
Commenting Your CSS Code
Using a CSS Reset
Debugging CSS
Popping the Hood: How Styles Get Applied
Chapter 5: Taking the Measure of CSS
Getting Comfy with CSS Measurement Units
Checking Out the Absolute Measurement Units
Getting to Know the Relative Measurement Units
Here's Looking at View(port Measurement Units)
Calculating with CSS
Chapter 6: Fancifying Pages with Colors and Backgrounds
Specifying Colors in CSS
Using Color to Spruce Up Your Text
Styling an Element’s Background
Impressing Your Friends with Color Gradients
Setting Border Colors
Playing with Colors in the Dev Tools
Chapter 7: Taking Your Text Up a Notch with Web Typography
Taking Care of Your Text
The Typographic Trinity: Setting Type Size, Line Height, and Line Length
Applying Text Styles
More Typographical Trickery
Giving Your Links a Makeover
Messing with Alignment
Book 4: Building Dynamic Pages with JavaScript
Chapter 1: JavaScript: The Bird’s-Eye View
What Is Web Coding?
What Is a Programming Language?
Is JavaScript Hard to Learn?
What You Can Do with JavaScript
What You Can’t Do with JavaScript
What Do You Need to Get Started?
Dealing with a Couple of Exceptional Cases
Adding Comments to Your Code
Creating External JavaScript Files
Chapter 2: Understanding Variables
Understanding Variables
Naming Variables: Rules and Best Practices
Understanding Literal Data Types
JavaScript Reserved Words
JavaScript and HTML Keywords
Chapter 3: Building Expressions
Understanding Expression Structure
Building Numeric Expressions
Building String Expressions
Building Comparison Expressions
Building Logical Expressions
Understanding Operator Precedence
Chapter 4: Controlling the Flow of JavaScript
Making True/False Decisions with if Statements
Branching with if…else Statements
Making Multiple Decisions
Understanding Code Looping
Using while Loops
Using for Loops
Using do…while Loops
Controlling Loop Execution
Avoiding Infinite Loops
Chapter 5: Harnessing the Power of Functions
What Is a Function?
The Structure of a Function
Where Do You Put a Function?
Calling a Function
Passing Values to Functions
Returning a Value from a Function
Getting Your Head around Anonymous Functions
Moving to Arrow Functions
Running Functions in the Future
Understanding Variable Scope
Using Recursive Functions
Chapter 6: Playing with the Document Object Model
Working with Objects
Getting to Know the Document Object Model
Specifying Elements
Traversing the DOM
Manipulating Elements
Modifying CSS with JavaScript
Tweaking HTML Attributes with JavaScript
Building Reactive Pages with Events
Chapter 7: Working with Arrays
What Is an Array?
Declaring an Array
Populating an Array with Data
How Do I Iterate Thee? Let Me Count the Ways
Creating Multidimensional Arrays
Manipulating Arrays
Chapter 8: Manipulating Strings, Dates, and Numbers
Manipulating Text with the String Object
Dealing with Dates and Times
Working with Numbers: The Math Object
Chapter 9: Storing User Data in the Browser
Understanding Web Storage
Introducing JSON
Adding Data to Web Storage
Getting Data from Web Storage
Removing Data from Web Storage
Chapter 10: Debugging Your Code
Understanding JavaScript’s Error Types
Getting to Know Your Debugging Tools
Debugging with the Console
Pausing Your Code
Stepping Through Your Code
Monitoring Script Values
More Debugging Strategies
The Ten Most Common JavaScript Errors
The Ten Most Common JavaScript Error Messages
Chapter 11: Processing Form Data
Looking at the HTMLFormElement Object
Taking a Peek at the HTMLInputElement Object
Programming Text Fields
Coding Checkboxes
Dealing with Radio Buttons
Programming Selection Lists
Handling and Triggering Form Events
Creating Keyboard Shortcuts for Form Controls
Dealing with the Form Data
Book 5: Looking Good with Layouts
Chapter 1: Exploring Some Layout Basics
Getting a Grip on Page Flow
Floating Elements
Positioning Elements
Stacking Elements
Chapter 2: Getting Fancy with Flexbox
Introducing Flexbox
Do I Still Need Flexbox Now That CSS Grid Is Here?
Setting Up and Configuring Flex Containers
Taking Control of Flex Items
Chapter 3: Laying Out a Page with CSS Grid
Introducing CSS Grid
Setting Up the Grid Container
Specifying the Grid Rows and Columns
Taking Control: Assigning Grid Items
Getting Your Grid Ducks in a Row (or a Column): Aligning Things
Chapter 4: Creating Responsive Layouts
What is a Responsive Layout?
Going with the Flow: Fluid Layouts
Querying Your Way to Responsiveness: Adaptive Layouts
Working with Images Responsively
Exploring the Principles of Mobile-First Development
Index
About the Author
Connect with Dummies
End User License Agreement
List of Tables
Book 1 Chapter 4
TABLE 4-1 Browser Market Share (March 2023)
Book 2 Chapter 6
TABLE 6-1 Landmark ARIA Roles
TABLE 6-2 Section Structure Roles without HTML Equivalents
TABLE 6-3 Section Structure Roles with HTML Equivalents
TABLE 6-4 Widget Roles Without HTML Equivalents
TABLE 6-5 Widget Roles with HTML Equivalents
Book 3 Chapter 1
TABLE 1-1 The
padding
Shorthand Property
TABLE 1-2 The Extended
border-radius
Shorthand Property
TABLE 1-3 The
margin
Shorthand Property
Book 3 Chapter 2
TABLE 2-1 CSS Attribute Selectors
Book 3 Chapter 3
TABLE 3-1 Form Element State Pseudo-Classes
TABLE 3-2 Link-Related Pseudo-Classes
Book 3 Chapter 4
TABLE 4-1 The Declaration Type/Origin Type Weight Hierarchy
Book 3 Chapter 5
TABLE 5-1 CSS Absolute Measurement Units
TABLE 5-2 CSS Relative Measurement Units
TABLE 5-3 CSS Viewport Measurement Units
Book 4 Chapter 2
TABLE 2-1 Common JavaScript Escape Sequences
TABLE 2-2 JavaScript’s Reserved Words
TABLE 2-3 JavaScript and HTML Keywords
Book 4 Chapter 3
TABLE 3-1 The JavaScript Arithmetic Operators
TABLE 3-2 The JavaScript Arithmetic Assignment Operators
TABLE 3-3 The JavaScript Comparison Operators
TABLE 3-4 The JavaScript Logical Operators
TABLE 3-5 Truth Table for the AND (
&&
) Operator
TABLE 3-6 Truth Table for the OR (
||
) Operator
TABLE 3-7 Truth Table for the NOT (
!
) Operator
TABLE 3-8 Some Sample Results for the Previous Code
TABLE 3-9 The JavaScript Order of Precedence for Operators
Book 4 Chapter 6
TABLE 6-1 Useful Properties of the document Object
Book 4 Chapter 8
TABLE 8-1 String Object Methods for Searching for Substrings
TABLE 8-2 String Object Methods for Extracting Substrings
TABLE 8-3 Arguments Associated with the Date Object
TABLE 8-4 Date Object Methods That Extract Date Values
TABLE 8-5 Date Object Methods That Set Date Values
TABLE 8-6 Some Properties of the Math Object
TABLE 8-7 Some Methods of the Math Object
Book 5 Chapter 2
TABLE 2-1 The
flex
Shorthand Property
Book 5 Chapter 4
TABLE 4-1 CSS Viewport Measurement Units
TABLE 4-2 New CSS Viewport Measurement Units
TABLE 4-3 CSS Container Query Measurement Units
Guide
Cover
Title Page
Copyright
Table of Contents
Begin Reading
Index
About the Author
Pages
i
ii
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
Introduction
Let me start off this book by letting you in on a little secret. If you talk to or read things written by people who make websites for a living, it’s all “HTML this” and “CSS that.” They go on and on about “tags” and “properties” and “collapsing margins” and blah blah blah. It can be more than a little intimidating, so you can easily come away with the idea that crafting a web page is really hard. You may end up believing that creating stuff for the web is a for-geeks-with-CS-graduate-degrees-only business.
Okay, it’s time for that secret I just promised you. Ready? Come closer. Closer. Okay:
*whispers* Learning how to build web pages is not hard.
Sure, it sounds hard; and if you’ve ever taken a peek at some web page code, it certainly looks hard; and, I’ll admit, building a huge and insanely complex site like Amazon or Instagram really is hard. But creating a personal website? Not hard. Fabricating a site to showcase a hobby? Not hard. Crafting some pages for a local charity, team, or small business? You got it: Not hard!
Still don’t believe me? That’s okay, I get it: HTML, CSS, and JavaScript — the technologies that enable anyone to assemble web pages — have a reputation problem. After all, so the thinking goes, people have used HTML, CSS, and JavaScript to sculpt some truly sensational sites, so of course such sophistication must come with a near-vertical learning curve. Duh.
For years now I’ve talked to many smart people who believed all that and who therefore wouldn’t even dream of building a web page from scratch. How many awesome websites never got built because their would-be builders thought HTML, CSS, and JavaScript were well beyond their capabilities? Why is no one talking about how accessible these technologies really are?
After asking myself these questions over and over, I finally decided to do something about it. I decided to write this book, the aim of which is to prove to everyone — yes, even skeptical you — that the technologies behind the web are approachable, straightforward, and readily learnable.
About This Book
Welcome, then, to HTML, CSS, and JavaScript All-in-One For Dummies. This book gives you a complete education on the technologies that enable anyone to craft professional-looking web pages. You learn how to set up the tools you need, how to use HTML and CSS to design and build your site, and how to use JavaScript to program your pages. My goal is to show you that these technologies aren’t hard to learn, and that even the greenest rookie web designer can learn how to put together pages that will amaze their family and friends (and themselves).
If you’re looking for lots of programming history, computer science theory, and long-winded explanations of concepts, I’m sorry, but you won’t find it here. My philosophy throughout this book comes from Linus Torvalds, the creator of the Linux operating system: “Talk is cheap. Show me the code.” I explain what needs to be explained and then I move on without further ado (or, most of the time, without any ado at all) to examples and scripts that do more to illuminate a concept that any verbose explanations I could muster (and believe me, I can muster verbosity with the best of them).
Getting started with the book
How you approach this book depends on your current level of web coding expertise (or lack thereof):
If you’re just starting out, begin at the beginning with
Book 1
and work at your own pace sequentially through to
Books 2
and
3
. This will give you all the knowledge you need to pick and choose what you want to learn throughout the rest of the book.
If you know HTML and CSS, you can probably get away with taking a fast look at
Books 2
and
3
, and then settle in with
Book 4
and beyond.
If you’ve done some JavaScript coding already, I suggest working quickly through the material in
Book 4
, and then exploring the rest of the minibooks as you see fit.
My “No AI” guarantee
As I began updating this edition of the book, the world was awash in posts and talk and endless speculation about artificial intelligence, to the point where it seemed we’d soon be welcoming our new AI overlords. That’s not likely to happen anytime soon, but AI is here to stay and has already established itself as a significant part of many people’s workday routines.
I’ve been as enamored of ChatGPT and its ilk as the biggest AI boosters. I use AI for entertainment and curiosity, but I don’t use it for work. That is to say that not one word of the text, code, or examples used in this book has been generated by AI. Everything you read here is, for good or ill, the product of my warped-from-birth brain.
Foolish Assumptions
This book is not a primer on the internet or on using the World Wide Web. This is a book on building web pages, pure and simple. This means I assume the following:
You know how to operate a basic text editor, and how to get around the operating system and file system on your computer.
You have an internet connection.
You know how to use your web browser.
Yep, that’s it.
I should mention here that this book is all about coding what web nerds call the front end, which means the stuff you see in your web browser. The web also has a back end, which refers to what happens on the web server. I don’t get into any back-end coding in this book. If you’re interested in that part of the web, may I not-so-humbly suggest my book Web Coding and Development All-in-One For Dummies (Wiley).
Icons Used in This Book
This icon points out juicy tidbits that are likely to be repeatedly useful to you — so please don’t forget them.
Think of these icons as the fodder of advice columns. They offer (hopefully) wise advice or a bit more information about a topic under discussion.
Look out! In this book, you see this icon when I’m trying to help you avoid mistakes that can cost you time, money, or embarrassment.
When you see this icon, you’ve come across material that isn’t critical to understand but will satisfy the curious. Think “inquiring minds want to know” when you see this icon.
Beyond the Book
Some extra content for this book is available on the web. Go online to find the following:
The examples used in the book: You can find these in either of the following places:
My website:
https://paulmcfedries.com/htmlcssjsfd
GitHub:
https://github.com/paulmcfe/html-css-js-fd
The examples are organized by book and then by chapter within each minibook. For each example, you can view the code, copy it to your computer’s clipboard, and run the code in the browser.
The Web Dev Workbench: To try your own HTML, CSS, and JavaScript code and see instant results, fire up the following site:
https://webdevworkshop.io/wb
You won’t break anything, so feel free to use the site to run some experiments and play around with HTML, CSS, and JavaScript.
Bonus chapters:
I had much more to tell you than I could fit in this book, so go to
www.dummies.com/go/htmlcss&javascriptaiofd
to download additional chapters that will show you some amazingly powerful techniques and animations to raise your CSS game.
Cheat Sheet:
Go to
www.dummies.com
and search
HTML, CSS, & JavaScript All-in-One For Dummies
to find the Cheat Sheet for this book. Here you’ll find a ready-to-roll HTML template for a basic web page, a set of 15 essential CSS selectors, and ten powerful JavaScript debugging strategies.
Book 1
Getting Started
Contents at a Glance
Chapter 1: Getting Acquainted with HTML, CSS, and JavaScript
What Do HTML, CSS, and JavaScript Do, Exactly?
Why Learn HTML, CSS, and JavaScript?
Seeing How It All Works
Adding Structure with HTML
Adding Style with CSS
Adding Dynamism with JavaScript
Chapter 2: Getting Ready to Code
Setting Up Your Test Browsers
Creating Your Local Folders
Choosing Your Text Editor
What Else Do You Need?
Using the WebDev Workbench
Chapter 3: Finding and Setting Up a Web Host
Understanding Web Hosting Providers
A Buyer’s Guide to Web Hosting
Finding a Web Host
Finding Your Way around Your New Web Home
Chapter 4: Testing and Validating Your Code
Cross-Browser Testing Your Code
Understanding Validation
Don’t Skip Validation!
Validating Your HTML Code
Validating Your CSS Code
Validating Your JavaScript Code
Chapter 1
Getting Acquainted with HTML, CSS, and JavaScript
IN THIS CHAPTER
Finding out a bit about what you’re getting yourself into
Befriending HTML
Introducing yourself to CSS
Shaking hands with JavaScript
Well begun is half done.
— ANCIENT GREEK PROVERB
In the early days of the internet in general and of the web in particular, people often used the abbreviation RTFM, which stood for (in the bowdlerized version), read the freaking manual. In days of yore, software programs came with little booklets — called manuals — that described the workings of the program. Look-before-you-leap types would carefully read the manual and would therefore know how to use the program. But a sizable proportion of the population would rather leap than look, meaning they would just start using the software, poking around willy-nilly to try to make things happen. Those dedicated leapers would inevitably end up on message boards or forums, desperately seeking solutions to the problems their haphazard experimenting caused them. The answer, more than often than not, was a simple one: “RTFM!”
This book is a sort of manual writ large for using HTML, CSS, and JavaScript. However, and this is particularly true if you’re just getting started with coding web pages, if there’s any part of the book that fits the RTFM credo, it’s this chapter. Everything you learn in this chapter acts as a kind of home base for the explorations that come later, especially in Book 2 and beyond.
In this chapter, you learn the basic concepts behind HTML, CSS, and JavaScript, get a better understanding of how they work, and get started exploring these powerful technologies.
What Do HTML, CSS, and JavaScript Do, Exactly?
If you’re new to the world of weaving web pages, you may be asking yourself a very basic — but a very astute — question about HTML, CSS, and JavaScript: What do they do?
The bird’s-eye view is that HTML, CSS, and JavaScript are the technologies behind what appears when you visit a page on the web. Sure, your trusty web browser shows you the page text and images, but the way in which the text and images are presented to you is a function of the page’s underlying HTML, CSS, and JavaScript code. These technologies have three separate but interrelated functions:
Structure:
The basic scaffolding of the page, such as the page headings, the text paragraphs, and where the images appear. This is the realm of HTML.
Style:
How the page looks, including the fonts, colors, and margins. This is the bailiwick of CSS.
Dynamism:
Extras that make the page perform actions such as interacting with the user, “listening” for mouse clicks and keypresses, and writing content to the page based on certain conditions. This is the job of JavaScript.
That’s the big picture. I get into all this in a bit more detail later in this chapter (starting with HTML in the “Adding Structure with HTML” section).
Why Learn HTML, CSS, and JavaScript?
I mention in the Introduction that learning HTML, CSS, and JavaScript isn’t hard. That’s still true, but I must admit that it doesn’t tell the entire story. Yes, learning these technologies isn’t hard, but it’s certainly not trivial, either. Although you
