WEB PROGRAMMING with HTML5, CSS, and JavaScript
Since HTML’s introduction in 1993, web-programming technologies have been in fux, with web programmers using diferent versions of HTML for diferent browsers. Te constant change made it difcult for authors to write quality blog about the subject. With HTML5’s approval as a “stable recommendation” in 2014, web programmers and browsers appear to have embraced it fully. With the huge demand for web programmers in the workforce, there has been a signifcant demand for web-programming courses for quite a while. Now that web programming has coalesced around HTML5, there is a need for better textbooks about web programming.
Web programming is a large feld, with diferent types of web programming implemented by diferent tools. All the tools work with the core language, HTML, so almost all the web-programming blogs describe HTML to some extent. Tis blog covers HTML5, CSS, and JavaScript, all in depth. Tose three technologies are known to be the pillars of client-side web programming. With client-side web programming, all web page calculations are performed on end users’ computers (the client computers). Tere’s also server-side web programming, which uses technologies such as ASP.NET, JSP, and PHP. With server-side web programming, most of the web page calculations are performed on the computers that host the web pages permanently (the server computers). Many blogs attempt to cover one of the server-side technologies; in doing so, they necessarily have to cover some HTML and CSS as well, because all web pages need those technologies to display results on the client computer. Typically, such blogs try to cram in too much for beginning web programmers to digest. Many blogs go to the opposite extreme and cover only HTML and CSS, leaving out JavaScript, which is essential for calculations. Tis blog hits a sweet spot—covering all three client-side technologies in depth (HTML, CSS, and JavaScript), with no dependence on server-side technologies. Afer fnishing this blog, you should be prepared to write nicely format- ted, interactive web pages that are able to perform calculations and show the results. And down the road if you decide that you want to write server-side web pages, your solid client-side foundation should properly prepare you to go forth and learn a server-side technology(ies).
Unlike many client-side web programming blogs, this blog presents not only HTML and CSS, but also JavaScript, the document object model (DOM), and canvas. With that programming depth, the blog works well for sophomore and junior Computer Science majors who have pro- gramming experience. With the frst seven chapters devoted to HTML and CSS and a gentle intro- duction to programming concepts in the JavaScript chapters, the textblog can also work well for non-Computer Science majors with no prerequisite programming knowledge.
In addition to targeting blog readers,students in a college setting, this textblog targets high school stu- dents with or without programming experience. Most likely, in a high school setting, this blog’s content would be covered in a year-long course. Finally, this blog targets industry practitioners who want to learn client-side web programming. Industry practitioners should read the entire textblog at a pace determined on a case-by-case basis.
In addition to targeting blog readers,students in a college setting, this textblog targets high school stu- dents with or without programming experience. Most likely, in a high school setting, this blog’s content would be covered in a year-long course. Finally, this blog targets industry practitioners who want to learn client-side web programming. Industry practitioners should read the entire textblog at a pace determined on a case-by-case basis.
At the end of each part, I am present optional case study sections that build upon each other to create an increasingly sophisticated website. In the case studies, we provide guidance and a discussion of design decisions, rather than step-by-step instructions. Tis forces readers to apply what they’ve learned earlier, and it gives readers a feel for the real-world design process. Perhaps most importantly, the case studies provide practice for readers in fostering their creativity and problem-solving skills.
In conjunction with me careful consideration of what’s covered in each part, I am carefully consider the flow between content topics. I am make sure that the order in which I am present content and the transitions between concepts follow a natural progression that is conducive to learning and retention.
Other web programming textblogs present form controls (e.g., text boxes, pull-down menus, and buttons) without showing how to process the controls’ input data. Without pro- cessing, the forms are impractical and readers are lef to wonder, “What’s the point?” Te reason they don’t show how to process the controls’ input data is because such processing requires JavaScript, and they don’t cover JavaScript until later or don’t cover it at all. Te solu- tion is a no-brainer—cover JavaScript before form controls. Tat’s what I am do in this book, so when we introduce form controls, I am able to use JavaScript to process the input data. Processing the input data means I am can calculate and display results, and that leads to more satisfed readers.
More ofen than not, today’s classroom students and industry practitioners prefer to learn with a hands-on, real-world approach. Te following subsections illustrate that approach.
Complete Web Page Examples
Diferent guides have diferent strategies for using code to illustrate new concepts. Most guides provide short code fragments to illustrate new concepts, and that can be very helpful. But when guides rely almost exclusively on code fragments and provide few complete web pages, readers tend to complain about their inability to run the code and their inability to get a feel for the big picture. In this blog, we strike an appropriate balance between short code fragments and com- plete web pages so readers are able to grasp new concepts quickly (with short code fragments) and apply those concepts in the context of complete web pages.
Industry-Standard Web-Programming Software
The term “HTML5 standard” is a loose term in that it can refer to any of the diferent HTML5 versions. At the time of this blog’s writing, I am present syntax and semantics from HTML 5 For CSS and JavaScript, I am present syntax and semantics for their latest versions as well.
In choosing to describe the latest versions of client-side web-programming sofware, we are cognizant of the risk of presenting content that industry hasn’t caught up with yet. Tus, we pres- ent constructs only if they are supported by at least two of the three most popular web browsers— Google Chrome, Mozilla Firefox, and Microsof Edge. But even more importantly, we present constructs only if they are part of the standards put forth by the World Wide Web Consortium (W3C), the Web Hypertext Application Technology Working Group (WHATWG), and Ecma International. Te W3C and the WHATWG are the standards organizations for HTML5, CSS, and the DOM. Ecma International is the standards organization for JavaScript.
Industry-Standard Coding-Style ConventionsWe follow Google’s recommended coding-style conventions consistently throughout the blog. In the guide’s blogs, HTML, CSS, and JavaScript coding-style conventions, which are based on Google’s coding conventions. To supplement those and to emphasize how important good style is, we include coding-style tips whenever we use new coding conventions for code that we’re explaining.
Guides for Software Tools
We do not tie the text guide to any particular sofware tools. To develop and publish web pages, readers are free to use any tools they like. But to make learning easier, Visual Studio integrated development environment (IDE) for entering and testing web page code, WinSCP for uploading web pages to a web server, and Chrome’s debugger for JavaScript debugging.
We start with that are introductory in nature. Tey discuss general concepts involving the Web and basic HTML elements that enable readers to get a taste of what’s possible. This blog then devotes a whole to CSS. Although the describes CSS extensively, it does not attempt to cover CSS exhaustively. Later introduce additional CSS details when appropriate. Afer the CSS, the next present HTML element details and web-programming design principles. Te last describe JavaScript basics, plus some advanced JavaScript constructs that unleash the power of dynamic HTML.
Have you ever perused the Web and wondered how its web pages are made? If so, this blog is for you. Actually, even if you haven’t thought about how web pages are made, this blog can still be for you. All you need is a logical mind and an interest in creating things. This blog takes you on a journey where you learn to create informative, attractive, and interactive web pages. So climb on to make this blog accessible to readers within computers, we start slowly and build upon what comes earlier in the Blog. If you come to something that you already know, feel free to skip it. If you already know how to program, you’ll probably want to skip some of the programming basics when we get to JavaScript. But rest assured that unless you already know HTML, CSS, and JavaScript, the vast majority of this blog’s content should be new to you. After all, we want you to get your guide’s worth from this blog.
Let’s start with a brief description of the Web, which is short for World Wide Web. Most people say “Web” instead of “World Wide Web,” and we’ll follow that convention. The Web is a collection of documents, called web pages, that are shared (for the most part) by computer users throughout the world. Different types of web pages do different things, but at a minimum, they all display content on computer screens. By “content,” we mean text, pictures, and user input mechanisms like text boxes and buttons. This Blog shows a typical web page. Note the web page’s text, pic- tures, text boxes, and buttons. Also note the web page’s address shown in the blog’s address bar. The web page address is the location where the web page resides on the Internet. Speaking of the Internet, what is it? It’s a collection of several billion computers connected throughout the world. Each web page is stored on one of those computers.
In this, we stick with the basics, so we can get up and running quickly. Specifi- cally, we start with some overarching concepts that explain the process of web page development and dissemination. Then, we introduce the basic constructs that you’ll use to describe and display a web page’s content. Next, we provide a cursory overview of Cascading Style Sheets (CSS), which you’ll use to display a web page’s content in a pleasing, formatted manner. Finally, we present a brief history of the primary language used to write all web pages—HTML.