30,99 €
Mehr erfahren.
- Herausgeber: John Wiley & Sons
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Speak the languages that power the web With more high-paying web development jobs opening every day, people with coding and web/app building skills are having no problems finding employment. If you're a would-be developer looking to gain the know-how to build the interfaces, databases, and other features that run modern websites, web apps, and mobile apps, look no further. Web Coding & Development All-in-One For Dummies is your go-to interpreter for speaking the languages that handle those tasks. Get started with a refresher on the rules of coding before diving into the languages that build interfaces, add interactivity to the web, or store and deliver data to sites. When you're ready, jump into guidance on how to put it all together to build a site or create an app. * Get the lowdown on coding basics * Review HTML and CSS * Make sense of JavaScript, jQuery, PHP, and MySQL * Create code for web and mobile apps There's a whole world of opportunity out there for developers--and this fast-track boot camp is here to help you acquire the skills you need to take your career to new heights!
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 1010
Veröffentlichungsjahr: 2018
Ähnliche
Web Coding & Development All-in-One For Dummies®
Published by: John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, www.wiley.com
Copyright © 2018 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. 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: THE PUBLISHER AND THE AUTHOR 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 WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ.
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: 2018935649
ISBN: 978-1-119-47392-3; ISBN: 978-1-119-47383-1 (ePDF); ISBN: 978-1-119-47379-4 (ePub)
Web Coding & Development All-in-One For Dummies®
To view this book's Cheat Sheet, simply go to www.dummies.com and search for “Web Coding & Development All-in-One For Dummies Cheat Sheet” in the Search box.
Table of Contents
Cover
Introduction
About This Book
Foolish Assumptions
Icons Used in This Book
Beyond the Book
Book 1: Getting Ready to Code for the Web
Chapter 1: How Web Coding and Development Work
The Nuts and Bolts of Web Coding and Development
Understanding the Front End: HTML and CSS
Understanding the Back End: PHP and MySQL
How It All Fits Together: JavaScript and jQuery
How Dynamic Web Pages Work
What Is a Web App?
What Is a Mobile Web App?
What’s the Difference between Web Coding and Web Development?
Chapter 2: Setting Up Your Web Development Home
What Is a Local Web Development Environment?
Do You Need a Local Web Development Environment?
Setting Up the XAMPP for Windows Development Environment
Setting Up the XAMPP for OS X Development Environment
Choosing Your Text Editor
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
Book 2: Coding the Front End, Part 1: HTML & CSS
Chapter 1: Structuring the Page with HTML
Getting the Hang of HTML
Understanding Tag Attributes
Learning the Fundamental Structure of an HTML5 Web Page
Some Notes on Structure versus Style
Applying the Basic Text Tags
Creating Links
Building Bulleted and Numbered Lists
Inserting Special Characters
Inserting Images
Carving Up the Page
Chapter 2: Styling the Page with CSS
Figuring Out Cascading Style Sheets
Getting the Hang of CSS Rules and Declarations
Adding Styles to a Page
Styling Page Text
Working with Colors
Getting to Know the Web Page Family
Using CSS Selectors
Revisiting the Cascade
Chapter 3: Sizing and Positioning Page Elements
Learning about the CSS Box Model
Styling Sizes
Adding Padding
Building Borders
Making Margins
Getting a Grip on Page Flow
Floating Elements
Positioning Elements
Chapter 4: Creating the Page Layout
What Is Page Layout?
Laying Out Page Elements with Floats
Laying Out Page Elements with Inline Blocks
Making Flexible Layouts with Flexbox
Shaping the Overall Page Layout with CSS Grid
Providing Fallbacks for Page Layouts
Book 3: Coding the Front End, Part 2: JavaScript
Chapter 1: An Overview of JavaScript
JavaScript: Controlling the Machine
What Is a Programming Language?
Is JavaScript Hard to Learn?
What Can You Do with JavaScript?
What Can’t You Do with JavaScript?
What Do You Need to Get Started?
Basic Script Construction
Adding Comments to Your Code
Creating External JavaScript Files
Chapter 2: Understanding Variables
What Is a Variable?
Naming Variables: Rules and Best Practices
Understanding Literal Data Types
JavaScript Reserved Words
JavaScript 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
Understanding JavaScript’s Control Structures
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
Understanding Local versus Global Variables
Using Recursive Functions
Chapter 6: Working with Objects
What Is an Object?
The JavaScript Object Hierarchy
Manipulating Object Properties
Working with Object Methods
Playing Around with the window Object
Programming the document Object
Chapter 7: Working with Arrays
What Is an Array?
Declaring an Array
Populating an Array with Data
Creating Multidimensional Arrays
Using the Array Object
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: 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
Top Ten Most Common JavaScript Errors
Top Ten Most Common JavaScript Error Messages
Book 4: Coding the Front End, Part 3: jQuery
Chapter 1: Developing Pages Faster with jQuery
Getting Started with jQuery
Selecting Elements with jQuery
Manipulating Page Elements with jQuery
Modifying CSS with jQuery
Tweaking HTML Attributes with jQuery
Chapter 2: Livening Up Your Page with Events and Animation
Building Reactive Pages with Events
Building Lively Pages with Animation
Chapter 3: Getting to Know jQuery UI
What’s the Deal with jQuery UI?
Getting Started with jQuery UI
Working with the jQuery UI Widgets
Introducing jQuery UI Effects
Taking a Look at jQuery UI Interactions
Book 5: Coding the Back End: PHP and MySQL
Chapter 1: Learning PHP Coding Basics
Understanding How PHP Scripts Work
Learning the Basic Syntax of PHP Scripts
Declaring PHP Variables
Building PHP Expressions
Outputting Text and Tags
Working with PHP Arrays
Controlling the Flow of Your PHP Code
Working with PHP Functions
Working with PHP Objects
Debugging PHP
Chapter 2: Building and Querying MySQL Databases
What Is MySQL?
Introducing phpMyAdmin
Creating a MySQL Database and Its Tables
Querying MySQL Data
Chapter 3: Using PHP to Access MySQL Data
Understanding the Role of PHP and MySQL in Your Web App
Using PHP to Access MySQL Data
Creating and Running Insert, Update, and Delete Queries
Separating Your MySQL Login Credentials
Book 6: Coding Dynamic Web Pages
Chapter 1: Melding PHP and JavaScript with Ajax and JSON
What Is Ajax?
Making Ajax Calls with jQuery
Introducing JSON
Returning Ajax Data as JSON Text
Chapter 2: Building and Processing Web Forms
What Is a Web Form?
Understanding How Web Forms Work
Building an HTML5 Web Form
Handling and Triggering Form Events
Submitting the Form
Chapter 3: Validating Form Data
Validating Form Data in the Browser
Validating Form Data on the Server
Regular Expressions Reference
Book 7: Coding Web Apps
Chapter 1: Planning a Web App
What Is a Web App?
Planning Your Web App: The Basics
Planning Your Web App: Responsiveness
Planning Your Web App: Accessibility
Planning Your Web App: Security
Chapter 2: Laying the Foundation
Setting Up the Directory Structure
Creating the Database and Tables
Getting Some Back-End Code Ready
Creating the App Startup Files
Chapter 3: Managing Data
Handling Data the CRUD Way
Creating New Data
Reading and Displaying Data
Updating and Editing Data
Deleting Data
Chapter 4: Managing App Users
Configuring the Home Page
Setting Up the Back End to Handle Users
Signing Up a New User
Signing a User In and Out
Resetting a Forgotten Password
Deleting a User
Book 8: Coding Mobile Web Apps
Chapter 1: Exploring Mobile-First Web Development
What Is Mobile-First Web Development?
Learning the Principles of Mobile-First Development
Going Mobile Faster with jQuery Mobile
Working with Images in a Mobile App
Storing User Data in the Browser
Chapter 2: Building a Mobile Web App
Building the Button Builder App
Getting Some Help from the Web
Building the App: HTML
Building the App: CSS
Building the App: JavaScript and jQuery
About the Author
Connect with Dummies
Index
End User License Agreement
Guide
Cover
Table of Contents
Begin Reading
Pages
iii
iv
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
38
39
40
41
42
43
44
45
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
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
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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
249
250
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
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
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
426
427
428
429
430
431
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
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
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
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
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
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
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
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
813
814
815
816
817
818
Introduction
When the web first came to the attention of the world’s non-geeks back in the mid-1990s, the vastness and variety of its treasures were a wonder to behold. However, it didn’t take long before a few courageous and intrepid souls dug a little deeper into this phenomenon and discovered something truly phenomenal: They could make web pages, too!
Why was that so amazing? Well, think back to those old days and think, in particular, of what it meant to create what we now call content. Think about television shows, radio programs, magazines, newspapers, books, and the other media of the time. The one thing they all had in common was that their creation was a decidedly uncommon thing. It required a team of professionals, a massive distribution system, and a lot of money. In short, it wasn’t something that your average Okie from Muskogee would have any hope of duplicating.
The web appeared to change all of that because learning HTML was within the grasp of anybody who could feed himself, it had a built-in massive distribution system (the Internet, natch), and it required little or no money. For the first time in history, content was democratized and was no longer defined as the sole province of governments and mega-corporations.
Then reality set in.
People soon realized that merely building a website wasn’t enough to attract “eyeballs,” as the marketers say. A site had to have interesting, useful, or fun content, or people would stay away in droves. Not only that, but this good content had to be combined with a solid site design, which meant that web designers needed a thorough knowledge of HTML and CSS.
But, alas, eventually even all of that was not enough. To make their websites dynamic and interesting, to make their sites easy to navigate, and to give their sites those extra bells and whistles that surfers had come to expect, something more than content, HTML, and CSS was needed.
That missing link was code.
What we’ve all learned the hard way over the past few years is that you simply can’t put together a world-class website unless you have some coding prowess in your site design toolkit. You need to know how to program your way out of the basic problems that afflict most sites; how to use scripting to go beyond the inherent limitations of HTML and CSS; and how to use code to send and receive data from a web server. And it isn’t enough just to copy the generic scripts that are available on the web and paste them into your pages. First of all, most of those scripts are very poorly written, and second of all, they invariably need some customization to work properly on your site.
About This Book
My goal in this book is to give you a complete education on web coding and development. You learn how to set up the tools you need, how to use HTML and CSS to design and build your site, how to use JavaScript and jQuery to program your pages, and how to use PHP and MySQL to program your web server. My aim is to show you that these technologies aren’t hard to learn, and that even the greenest rookie programmers can learn how to put together web 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).
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
Book 2
, then settle in with
Book 3
and beyond.
If you’ve done some JavaScript coding already, I suggest working quickly through the material in
Book 3
, then dig into
Book 4
a little slower if you don’t already know jQuery. You’ll then be ready to branch out and explore the rest of the book as you see fit.
If you’re a relatively experienced JavaScript programmer, use
Books 3
and
4
as a refresher, then tackle
Book 5
to learn how to code the back end. I’ve got a few tricks in there that you might find interesting. After that, feel free to consider the rest of the book a kind of coding smorgasbord that you can sample as your web development taste buds dictate.
Foolish Assumptions
This book is not a primer on the Internet or on using the World Wide Web. This is a coding and development book, 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’ve never coded before!”
If you’ve never done a stitch of computer programming before, even if you’re not quite sure what programming really is, don’t worry about it for a second because I had you in mind when I wrote this book. For too many years programming has been the property of “hackers” and other technowizards. That made some sense because the programming languages they were using — with bizarre names such as C++ and Perl — were exceedingly difficult to learn, and even harder to master.
This book’s main coding technologies — HTML, CSS, JavaScript, jQuery, PHP, and MySQL — are different. They’re nowhere near as hard to learn as those for-nerds-only languages. I honestly believe that anyone can become a savvy and successful web coder, and this book is, I hope, the proof of that assertion. Just follow along, examine my code carefully (particularly in the first few chapters), and practice what you learn, and you will master web coding and development.
“I have coded before!”
What if you’ve done some programming in the past? For example, you might have dipped a toe or two in the JavaScript waters already, or you might have dabbled with HTML and CSS. Will this book be too basic for you? No, not at all. My other main goal in this book is to provide you with a ton of truly useful examples that you can customize and incorporate into your own site. The book’s first few chapters start slowly to avoid scaring off those new to this programming business. But once you get past the basics, I introduce you to lots of great techniques and tricks that will take your web coding skills to a higher level.
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 here:
mcfedries.com/webcodingfordummies
The examples are organized by book and then by chapter within each book. For each example, you can view the code, copy it to your computer’s clipboard, and run the code in the browser.
The WebDev Workshop:
To edit the book’s examples and try your own code and see instant results, fire up the following site:
webdev.mcfedries.com
You won’t break anything, so feel free to use the site run some experiments and play around with HTML, CSS, JavaScript, and jQuery.
Book 1
Getting Ready to Code for the Web
Contents at a Glance
Chapter 1: How Web Coding and Development Work
The Nuts and Bolts of Web Coding and Development
Understanding the Front End: HTML and CSS
Understanding the Back End: PHP and MySQL
How It All Fits Together: JavaScript and jQuery
How Dynamic Web Pages Work
What Is a Web App?
What Is a Mobile Web App?
What’s the Difference between Web Coding and Web Development?
Chapter 2: Setting Up Your Web Development Home
What Is a Local Web Development Environment?
Do You Need a Local Web Development Environment?
Setting Up the XAMPP for Windows Development Environment
Setting Up the XAMPP for OS X Development Environment
Choosing Your Text Editor
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 1
How Web Coding and Development Work
IN THIS CHAPTER
Learning how the web works
Understanding the front-end technologies of HTML and CSS
Understanding the back-end technologies of MySQL and PHP
Figuring out how JavaScript fits into all of this
Learning about dynamic web pages, web apps, and mobile web apps
More than mere consumers of technology, we are makers, adapting technology to our needs and integrating it into our lives.
— DALE DOUGHERTY
The 1950s were a hobbyist’s paradise with magazines such as Mechanix Illustrated and Popular Science showing the do-it-yourselfer how to build a go-kart for the kids and how to soup up a lawnmower with an actual motor! Sixty years later, we’re now firmly entrenched in the age of do-it-yourself tech, where folks indulge their inner geek to engage in various forms of digital tinkering and hacking. The personification of this high-tech hobbyist renaissance is the maker, a modern artisan who lives to create things, rather than merely consume them. Today’s makers exhibit a wide range of talents, but the skill most sought-after not only by would-be makers themselves, but by the people who hire them, is web coding and development.
Have you ever visited a website and thought, “Hey, I can do better than that!”? Have you found yourself growing tired of merely reading text and viewing images that someone else has put on the web? Is there something creative in you — stories, images, expertise, opinions — that you want to share with the world? If you answered a resounding “Yes!” to any of these questions, then congratulations: You have everything you need to get started with web coding and development. You have, in short, the makings of a maker.
The Nuts and Bolts of Web Coding and Development
If, as the King said very gravely in Lewis Carroll’s Alice in Wonderland, it’s best to “begin at the beginning,” then you’ve come to the right place. My goal here is to get you off on the right foot by showing you what web coding and web development are.
How the web works
Before you can understand web coding and development, you need to take a step back and understand a bit about how the web itself works. In particular, you need to know what happens behind the scenes when you click a link or type a web page address into your browser. Fortunately, you don’t need to be a network engineer to understand this stuff, because I can explain the basics without much in the way of jargon. Here’s a high-level blow-by-blow of what happens:
You tell the web browser the web page you want to visit.
You do that either by clicking a link to the page or by typing the location — known as the uniform resource locator or URL (usually pronounced “you-are-ell,” but also sometimes “earl”) — into the browser’s address bar (see Figure 1-1).
The browser decodes the URL.
Decoding the URL means two things: First, it checks the prefix of the URL to see what type of resource you’re requesting; this is usually http:// or https://, both of which indicate that the resource is a web page. Second, it gets the URL's domain name — the something.com or whatever.org part — and asks the domain name system (DNS) to translate this into a unique location — called the IP (Internet Protocol) address — for the web server that hosts the page (see Figure 1-2).
The browser contacts the web server and requests the web page.
With the web server's unique IP address in hand, the web browser sets up a communications channel with the server and then uses that channel to send along a request for the web page (see Figure 1-3).
The web server decodes the page request.
Decoding the page request involves a number of steps. First, if the web server is shared between multiple user accounts, the server begins by locating the user account that owns the requested page. The server then uses the page address to find the directory that holds the page and the file in which the page code is stored (see Figure 1-4).
The web server sends the web page file to the web browser (see
Figure 1-5
).
The web browser decodes the web page file.
Decoding the page file means looking for text to display, instructions on how to display that text, and other resources required by the page, such as images and fonts (see Figure 1-6).
If the web page requires more resources, the web browser asks the server to pass along those resources (see
Figure 1-7
).
For each of the requested resources, the web server locates the associated file and sends it to the browser (see
Figure 1-8
).
The web browser gathers up all the text, images, and other resources and displays the page in all its digital splendor in the browser’s content window (see
Figure 1-9
).
FIGURE 1-1: One way to get to a web page is to type the URL in the browser’s address bar.
FIGURE 1-2: The browser extracts the prefix, domain, and the server address from the URL.
FIGURE 1-3: The browser asks the web server for the web page.
FIGURE 1-4: The server uses the page request to get the account, directory, and filename.
FIGURE 1-5: The web server sends the requested web page file to the browser.
FIGURE 1-6: The web browser scours the page file to see if it needs anything else from the server.
FIGURE 1-7: The web browser goes back to the server to ask for the other data needed to display the web page.
FIGURE 1-8: The web server sends the browser the rest of the requested files.
FIGURE 1-9: At long last, the web browser displays the web page.
How the web works, take two
Another way to look at this process is to think of the web as a giant mall or shopping center, where each website is a storefront in that mall. When you request a web page from a particular site, the browser takes you into that site’s store and asks the clerk for the web page. The clerk goes into the back of the store, locates the page, and hands it to the browser. The browser checks the page and asks for any other needed files, which the clerk retrieves from the back. This process is repeated until the browser has everything it needs, and it then puts all the page pieces together for you, right there in the front of the store.
This metaphor might seem a bit silly, but it serves to introduce yet another metaphor, which itself illustrates one of the most important concepts in web development. In the same way that our website store has a front and a back, so, too, is web development separated into a front end and a back end:
Front end:
That part of the web page that the web browser displays in the browser window. That is, it’s the page stuff you see and interact with.
Back end:
That part of the web page that resides on the web server. That is, it’s the page stuff that the server gathers based on the requests it receives from the browser.
As a consumer of web pages, you only ever deal with the front end, and even then you only passively engage with the page by reading its content, looking at its images, or clicking its links or buttons.
However, as a maker of web pages — that is, as a web developer — your job entails dealing with both the front end and the back end. Moreover, that job includes coding what others see on the front end, coding how the server gathers its data on the back end, and coding the intermediate tasks that tie the two together.
Understanding the Front End: HTML and CSS
As I mention in the previous section, the front end of the web development process involves what users see and interact with in the web browser window. It’s the job of the web developer to take a page design — which you might come up with yourself, but is more often something cooked up by a creative type who specializes in web design — and make it web-ready. Getting a design ready for the web means translating the design into the code required for the browser to display the page somewhat faithfully. (I added the hedge word “somewhat” there because it’s not always easy to take a design that looks great in Photoshop or Illustrator and make it look just as good on the web. However, with the techniques you learn in this book, you’ll almost always be able to come pretty close.)
You need code to create the front end of a web page because without it your page will be quite dull. For example, consider the following text:
COPENHAGEN—Researchers from Aalborg University announced today that they have finally discovered the long sought-after Soup-Nuts Continuum. Scientists around the world have been searching for this elusive item ever since Albert Einstein's mother-in-law proposed its existence in 1922.
"Today is an incredible day for the physics community and for humanity as a whole," said senior researcher Lars Grüntwerk. "Today, for the first time in history, we are on the verge of knowing everything from soup to, well, you know, nuts."
If you plop that text onto the web, you get the result shown in Figure 1-10. As you can see, the text is very plain, and the browser didn’t even bother to include the paragraph break.
FIGURE 1-10: Text-only web pages are dishwater-dull.
So, if you can’t just throw naked text onto the web, what’s a would-be web developer to do? Ah, that’s where you start earning your web scout merit badges by adding code that tells the browser how you want the text displayed. That code comes in two flavors: structure and formatting.
Adding structure: HTML
The first thing you usually do to code a web page is give it some structure. This means breaking up the text into paragraphs, adding special sections such as a header and footer, organizing text into bulleted or numbered lists, dividing the page into columns, and much more. The web coding technology that governs these and other web page structures is called (deep breath) Hypertext Markup Language, or HTML, for short.
HTML consists of a few dozen special symbols called tags that you sprinkle strategically throughout the page. For example, if you want to tell the web browser that a particular chunk of text is a separate paragraph, you place the <p> tag (the p here is short for paragraph) before the text and the </p> tag after the text.
In the code that follows, I've added these paragraph tags to the plain text that I show earlier. As you can see in Figure 1-11, the web browser displays the text as two separate paragraphs, no questions asked.
<p>
COPENHAGEN—Researchers from Aalborg University announced today that they have finally discovered the long sought-after Soup-Nuts Continuum. Scientists around the world have been searching for this elusive item ever since Albert Einstein's mother-in-law proposed its existence in 1922.
</p>
<p>
"Today is an incredible day for the physics community and for humanity as a whole," said senior researcher Lars Grüntwerk. "Today, for the first time in history, we are on the verge of knowing everything from soup to, well, you know, nuts."
</p>
FIGURE 1-11: Adding paragraph tags to the text separates the text into two paragraphs.
HTML is one of the fundamental topics of web development, and you learn all about it in Book 2, Chapter 1.
Adding style: CSS
HTML takes care of the structure of the page, but if you want to change the formatting of the page, then you need to turn to a second front-end technology: cascading style sheets, known almost universally as just CSS. With CSS in hand, you can play around with the page colors and fonts, you can add margins and borders around things, and you can mess with the position and dimensions of page elements.
CSS consists of a large number of properties that enable you to customize many aspects of the page to make it look the way you want. For example, the width property lets you specify how wide a page element should be; the font-family property enables you to specify a typeface for an element; and the font-size property lets you dictate the type size of an element. Here's some CSS code that applies all three of these properties to every p element (that is, every <p> tag) that appears in a page (note that px is short for pixels):
p {
width: 700px;
font-family: sans-serif;
font-size: 24px;
}
When used with the sample text from the previous two sections, you get the much nicer-looking text shown in Figure 1-12.
FIGURE 1-12: With the judicious use of a few CSS properties, you can greatly improve the look of a page.
CSS is a cornerstone of web development. You learn much more about it in Book 2, Chapters 2, 3, and 4.
Understanding the Back End: PHP and MySQL
Many web pages are all about the front end. That is, they consist of nothing but text that has been structured by HTML tags and styled by CSS properties, plus a few extra files such as images and fonts. Sure, all these files are transferred from the web server to the browser, but that’s the extent of the back end’s involvement.
These simple pages are ideal when you have content that doesn’t change very often, if ever. With these so-called static pages, you plop in your text, add some HTML and CSS, perhaps point to an image or two, and you’re done.
But there’s another class of page that has content that changes frequently. It could be posts added once or twice a day, or sports or weather updates added once or twice an hour. With these so-called dynamic pages, you might have some text, HTML, CSS, and other content that’s static, but you almost certainly don’t want to be updating the changing content by hand.
Rather than making constant manual changes to such pages, you can convince the back end to do it for you. You do that by taking advantage of two popular back-end technologies: MySQL and PHP.
Storing data on the server: MySQL
MySQL is a relational database management system that runs on the server. You use it to store the data you want to use as the source for some (or perhaps even all) of the data you want to display on your web page. Using a tool called Structured Query Language (SQL, pronounced “ess-kew-ell,” or sometimes “sequel”), you can specify which subset of your data you want to use.
If phrases such as “relational database management system” and “Structured Query Language” have you furrowing your brow, don’t sweat it: I explain all in Book 5, Chapter 2.
Accessing data on the server: PHP
PHP is a programming language used on the server. It’s a very powerful and full-featured language, but for the purposes of this book, you use PHP mostly to interact with MySQL databases. You can use PHP to extract from MySQL the subset of data you want to display, manipulate that data into a form that’s readable by the front end, and then send the data to the browser.
You learn about the PHP language in Book 5, Chapter 1, and you learn how to use PHP to access MySQL data in Book 5, Chapter 3.
How Dynamic Web Pages Work
It’s one thing to know about HTML and CSS and PHP and all the rest, but it’s quite another to actually do something useful with these technologies. That, really, is the goal of this book, and to that end the book spends several chapters later covering how to create wonderful things called dynamic web pages. A dynamic web page is one that includes content that, rather than being hard-wired into the page, is generated on-the-fly from the web server. This means the page content can change based on a request by the user, by data being added to or modified on the server, or in response to some event, such as the clicking of a button or link.
It likely sounds a bit like voodoo to you now, so perhaps a bit more detail is in order. For example, suppose you want to use a web page to display some data that resides on the server. Here’s a general look at the steps involved in that process:
JavaScript determines the data that it needs from the server.
JavaScript has various ways it can do this, such as extracting the information from the URL, reading an item the user has selected from a list, or responding to a click from the user.
JavaScript sends a request for that data to the server.
In most cases, and certainly in every case you see in this book, JavaScript sends this request by calling a PHP script on the server.
The PHP script receives the request and passes it along to MySQL.
The PHP script uses the information obtained from JavaScript to create an SQL command that MySQL can understand.
MySQL uses the SQL command to extract the required information from the database and then return that data to the PHP script.
The PHP script manipulates the returned MySQL data into a form that JavaScript can use.
JavaScript can’t read raw MySQL data, so one of PHP’s most important tasks is to convert that data into a format called JavaScript Object Notation (JSON, for short, and pronounced like the name Jason) that JavaScript is on friendly terms with (see Book 6, Chapter 1 for more about this process).
PHP sends the JSON data back to JavaScript.
JavaScript displays the data on the web page.
One of the joys of JavaScript is that you get tremendous control over how you display the data to the user. Through existing HTML and CSS, and by manipulating these and other web page elements using JavaScript, you can show your data in the best possible light.
To expand on these steps and learn how to create your own dynamic web pages, check out the three chapters in Book 6.
What Is a Web App?
You no doubt have a bunch of apps residing on your smartphone. If you use Windows 10 on your PC, then you have not only the pre-installed apps such as Mail and Calendar, but you might also have one or more apps downloaded from the Windows Store. If the Mac is more your style, then you’re probably quite familiar with apps such as Music and Messages, and you might have installed a few others from the App Store. We live, in other words, in a world full of apps which, in the context of your phone or computer, are software programs dedicated to a single topic or task.
So what then is a web app? It’s actually something very similar to an app on a device or PC. That is, it’s a website, built using web technologies such as HTML, CSS, and JavaScript, that has two main characteristics:
The web app is focused on a single topic or task.
The web app offers some sort of interface that enables the user to operate the app in one or more ways.
In short, a web app is a website that looks and acts like an app on a device or computer. This is opposed to a regular website, which usually tackles several topics or tasks and has an interface that for the most part only enables users to navigate the site.
To get the scoop on building your very own web apps, head on over to the four chapters in Book 7.
What Is a Mobile Web App?
In late 2016, the world reached a milestone of sorts when the percentage of people accessing the web via mobile devices such as smartphones and tablets surpassed the percentage of people doing the web thing using desktops and notebooks. The gap between mobile web users and everyone else has only widened since then, so it’s safe to say that we live in a mobile web world now.
What does that mean for you as a web developer? It means you can’t afford to ignore mobile users when you build your web pages. It means you can’t code your web pages using a gigantic desktop monitor and assume that everything will look great on a relatively tiny smartphone screen. It means that you’d do well to embrace the mobile web in a big old bear hug by creating not just web apps, but mobile web apps. What’s the difference? A mobile web app is the same as a web app — that is, it has content and an interface dedicated to a single topic or task — but with a design built from the ground up to look good and work well in a mobile device. This is known as the mobile-first approach to web development, and it’s one of the hottest topics in the web coding world.
To learn how to create your own mobile web apps, look no farther than the two chapters in Book 8.
What’s the Difference between Web Coding and Web Development?
After all this talk of HTML, CSS, MySQL, JavaScript, and jQuery, after the bird’s-eye view of dynamic sites, web apps, and mobile web apps, you might be wondering when the heck I’m going to answer the most pressing question of the all: What in the name of Sir Tim Berners-Lee (inventor of the web) is the difference between web coding and web development?
I’m glad you asked! Some people would probably answer that question by saying that there’s no real difference at all, because “web coding” and “web development” are two ways of referring to the same thing: Creating web pages using programming tools.
Hey, it’s a free country, but to my mind I think there’s a useful distinction to be made between web coding and web development:
Web coding
is the pure programming part of creating a web page, particularly using JavaScript/jQuery on the front end and PHP on the back end.
Web development
is the complete web page creation package, from building a page with HTML tags, to formatting the page with CSS, to storing data on the back end with MySQL, to accessing that data with PHP, to bridging the front and back ends using JavaScript and jQuery.
However you look at it, this book teaches you everything you need to know to become both a web coder and a web developer.
Chapter 2
Setting Up Your Web Development Home
IN THIS CHAPTER
Understanding the need for a web development environment
Gathering the tools you need for a local development setup
Installing a local web development environment on a Windows PC
Installing a local web development environment on a Mac
Learning what to look for in a good text editor
He is happiest, be he king or peasant, who finds peace in his home.
— JOHANN WOLFGANG VON GOETHE
One of the truly amazing things about web development is that, with the exception of the databases on the server, all you ever work with are basic text files. But surely all the structure you add with HTML tags requires some obscure and complex file type? No way, José: It’s text all the way down. What about all that formatting stuff associated with CSS? Nope: nothing but text. PHP? Text. JavaScript and jQuery? Text and, again, text.
What this text-only landscape means is that you don’t need any highfalutin, high-priced software to develop for the web. A humble text editor is all you require to dip a toe or two in the web coding waters.
But what if you want to get more than your feet wet in web coding? What if you want to dive in, swim around, perhaps do a little snorkeling? Ah, then you need to take things up a notch or three and set up a proper web development environment on your computer. This will give you everything you need to build, test, and refine your web development projects. In this chapter, you get your web coding adventure off to a rousing start by exploring how to set up a complete web development environment on your Windows PC or Mac.
What Is a Local Web Development Environment?
In programming circles, an integrated development environment (IDE) is a collection of software programs that make it easy and efficient to write code. Most development environments are tailored to a particular programming language and come with tools for editing, testing, and compiling code (that is, converting the code to its final form as an application).
In the web coding game, we don’t have IDEs, per se, but we do have a similar beast called a local web development environment, which is also a collection of software. It usually includes the following:
A web server
A relational database management system (RDBMS) to run on the web server
A server-side programming language
An interface for controlling (starting, stopping, and so on) the web server
An interface for accessing and manipulating the RDBMS
