Getting Acquainted with HTML, CSS, and JavaScript
I n 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 could probably memorize every element of HTML in an afternoon, both CSS and JavaScript are huge topics that take time to master. And although the basics of HTML, CSS, and JavaScript have a pleasingly gentle learning curve, after you get past these ABCs you quickly run into quite a few quirks and gotchas that steepen the ascent.
So, it’s reasonable to ask a basic question right up front: Why may you want to go to the trouble to learn HTML, CSS, and JavaScript? After all, there’s no shortage of templates, web page generators, content management systems, and web designers out there that — with varying degrees of ease, cost, and success — can convert your words and images into honest-to-goodness web pages. Why not take one of these easier paths to putting up a web presence? Good question. And it just may be the case that, if you’re chronically short on time or motivation, one of these let-someone-else-do-most-of-the-work solutions may be the right one for you. For everyone else, here are my reasons — call them the Four Cs — for learning HTML, CSS, and JavaScript to handcraft your own web pages:
Carte blanche: When you build web pages with your bare hands using HTML, CSS, and JavaScript, you have complete freedom over every aspect of your creation: content, colors, fonts, layout, the whole shebang. A new web page is a tabula rasa that you can fill up in whatever way you like.
Creativity: Forging your own web pages means you have the final say (not to mention the first, second, and third say) over not only what you say, but how you say it. You don’t have one hand tied behind your back in the form of someone else’s design or vision. Instead, you can express yourself in whatever way you want to show the world.
Customization: Almost any prefab web page is a rigid construct that offers only the most minimal customizations at creation time, and often no further customizing after the page is published. Forget that! When your pages are handmade, every possibility is open to you from the start and, of course, your pages are always infinitely customizable.
Cost: It may surprise you to learn that the cost of producing your own web pages using HTML, CSS, and JavaScript is effectively nothing. That’s right: zero (0) dollars (or euros or pesos or whatever). How can that be? Because, as I discuss in the section that follows, all you really need to handmake a web page is a text editor, and most of those are free. Yep, you’ll usually need to pay someone to host your pages on the web (check out Book 1, Chapter 3 for the details), but forging those pages is free.
Seeing How It All Works
You know the web. You’ve browsed until your fingers are blue. You’ve experienced the wonder of those websites that are truly spectacular. Now, as you’re about to embark on the journey of learning how to create your own web pages, you may believe that to achieve those amazing effects you need some fancy software. Perhaps a big-time page layout program or maybe a high-end word processor with special add-ins and templates for doing web pages. Or maybe you need a hideously complex and expensive “web page processor” app that offers the requisite bells and whistles needed to crank out perfect and professionallooking pages.
Well, it gives me great pleasure to report that you don’t need any of those things. The only thing you really need to start banging out web pages is a humble text editor. All you have is Windows’ Notepad or the Mac’s TextEdit? Yup, either one will do. (Thankfully, you don’t have to use either of these lowly programs because the world is awash in editors that are designed to make entering and editing HTML, CSS, and JavaScript — and, of course, text — a snap. And most of them are free! Refer to Book 1, Chapter 2 for more info.)
I see by your raised eyebrow that needing only a text editor surprises you. How is it possible, you ask, that the web’s awesome web pages could even remotely be the product of an ignoble text editor? How do you get the magnificence of the web from the mundanity of pure text?
The answer to these questions lies with the app you use to surf the web: the browser. Most web pages are just text with strategically placed HTML (for structure), CSS (for style), and JavaScript (for dynamism) code. In simplest terms, when you navigate to a page, the web browser grabs the page’s text file and dissects the file to look for its HTML, CSS, and JavaScript markings. The browser then uses that code to display — or, as the web geeks say, render — the page accordingly.
For example, you can add special codes inside a text file to specify that you want a particular collection of words or phrases to appear as a bulleted list. When the web browser comes to that part of the file, it dutifully renders those items as a list, bullets and all. The person browsing your page doesn’t get the “render these items as a bulleted list” code; they just get the bulleted list. The web browser performs these and many other transformations behind the scenes. As long as you have the right HTML, CSS, and JavaScript markings in the right places, the browser will render your page the way you want.
To get started, launch a new text file
So, to get to the point at long last, your first step whenever you want to create a web page is to start a new text file. To do that, not surprisingly, you need to fire up your favorite text editor:
Notepad (Windows): In Windows 11, choose Start➪ All Apps➪ Notepad. Notepad displays a brand-new text file automatically when you start the program. You can also fire up a new document by choosing File➪ New.
TextEdit (Mac): Click Search (the magnifying glass) in the menu bar, start typing textedit, and then click TextEdit as soon as it shows up in the search results. In the dialog box that appears, click New Document. You can launch a new text file any time you need one by choosing File➪ New.
Something else: If you have another text editor, launch it the way you normally do and create a new file.
What about using a word processor instead? Well, technically, you could use something like Microsoft Word or Apple Pages, but I don’t recommend it. These programs tend to produce complicated web page files with extra files that do whoknows-what. Do yourself a favor and keep things simple by using a text editor.
If you’d prefer to start playing around right away without having to create any files, there are online tools you can use to mess around with HTML, CSS, and JavaScript without any fuss. Check out the final section of Book 1, Chapter 2 to learn how to do web coding online.
Notes about saving HTML files
While slaving away on the text file that will become your web page, make sure you practice safe computing. That is, make sure you save your work regularly. However, going by the thousands of notes I’ve received from readers, I can tell you that the number-one thing that trips up wet-behind-the-ears webmeisters is improperly saving their HTML files.
To help you easily leap these saving hurdles, here are a few notes to pore over:
The Save command: You save a file by choosing File➪ Save. The first time you do this with a new file, the Save As dialog box shows up for work. You use this dialog box to specify three things: the filename, the file type, and the file’s location on your hard disk. The next few notes discuss some tidbits about the name and type.
Use the right file extension: For garden-variety web pages, your file names must end with either the .htm or the .html file extension (for example, mypage.html). Therefore, when you name your file, be sure to specify either .htm or .html. Many new HTMLers get confused about whether to use .htm or .html when naming their files. Actually, you’re free to use either one because it doesn’t make any difference. That said, most people go with the .html extension. Either way, in this chapter and throughout this book, I refer to such files as “HTML files.”
Use lowercase filenames: The majority of web servers (computers that store web pages) are downright finicky when it comes to uppercase letters versus lowercase letters. For example, the typical server thinks that index.html and INDEX.HTML are two different files. It’s dumb, I know. So to be safe, always enter your filenames using only lowercase letters
Don’t use spaces: Windows and macOS are happy to deal with filenames that include spaces. However, web servers and web browsers can get confused if they come upon a filename that has one or more spaces. So don’t use spaces in your filenames. If you want to separate words in file and directory names, use an underscore (_) or a hyphen (-).
Use the right file type: While in the Save As dialog box, you need to select the correct file type for your HTML file. How you do this depends on what program you’re using. In most programs (including TextEdit), you use the File Format (or Save As Type) list to select Web Page (.html) or something similar, as shown in Figure 1-1. If you’re using Notepad, use the Save As Type list to select All Files (*.*). This ensures that Notepad uses your .htm or .html extension (and not its normal .txt extension).
Save it: When you’ve completed your chores in the Save As dialog box, click Save to save the file.
No comments:
Post a Comment