<div>

This is the main HTML tag that we will use in this book. We will use it to position <canvas> on the HTML page.

Example 1-2 uses a <div> tag to position the words “Hello World!” on the screen, as shown in Figure 1-2.

HTML5 Hello World! with a <div>

Figure 1-2. HTML5 Hello World! with a <div>

Example 1-2. HTML5 Hello World!

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH1EX2: Hello World HTML Page With A DIV </title>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
Hello World!
</div>
</body>
</html>

The style="position: absolute; top: 50px; left: 50px;" code is an example of inline CSS in an HTML page. It tells the browser to render the content at the absolute position of 50 pixels from the top of the page and 50 pixels from the left of the page.

Warning

This <div> might position the Canvas in the web browser, but it will not help us when we try to capture mouse clicks on the Canvas. In Chapter 5, we will discuss a way to both position the Canvas and capture mouse clicks in the correct locations.

Get HTML5 Canvas, 2nd Edition 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