Chapter 2. The Structure

Over the course of the next two chapters, we’re going to get an overview of two relatively important client-side topics: HTML and CSS. Because there’s no way that we can cover both of these in detail, these two chapters will be written primarily as a series of hands-on tutorials that will help you learn enough HTML and CSS to support the code examples in the remainder of the book. More Practice and Further Reading will encourage you to explore other resources.

If you’re already familiar with HTML and CSS, it’s likely that you can comfortably move on to Chapter 4, which starts with client-side JavaScript. You may want to scan the chapters and read the summary at the end before doing so.

Hello, HTML!

HTML, which stands for HyperText Markup Language, is a technology that allows us to specify the structure of the visual elements (sometimes referred to as the user interface) of a web application. What do I mean when I say structure? Let’s take a look at a simple example.

To get started, we’ll use the command line to create a directory called Chapter2 in our Projects directory. Recall that we’ll use the mkdir command for that. Next, let’s open that directory in Sublime Text using either the File menu or the shortcut keys. Create a new file called hello.html inside that directory. Type in the contents exactly as you see here:

<!doctype html>
<html>
  <head>
    <title>My First Web App</title>
  </head>

  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Tags Versus Content

As you’re ...

Get Learning Web App Development now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial