Html and Css Used in This Book
HTML AND CSS USED IN THIS BOOK
We will be using very simple HTML (Hypertext Markup Language) and styling it with a minimal amount of CSS (Cascading Style Sheets) in this book. Even if you have never created a webpage before, you should be able to get up to speed with this in a couple of minutes, so let’s take a quick look at what you need to know now.
HTML
HTML is the language used to create webpages.
Here’s a bare minimum HTML document representing a webpage:
<!DOCTYPE html>
<html>
<head>
<title>My Fancy Website</title>
</head>
<body>
<h1>My Fancy Website</h1>
</body>
</html>
You can save this in a file called myFancyWebPage.html, using any text editor, and open it up in any web browser, and “Hey presto!”, you have a webpage!
In the above example,
<!DOCTYPE html> marks that we are starting a new HTML file.
Next, inside the file, we have a
<html></html> element, meaning that the page starts with <html> and ends with </html>, and inside that, we have a <head></head> element and a <body></body> element. Nearly all elements in HTML files work like this, starting with <elementName> and ending with </elementName>.
The
<title></title> element describes what will show up in the URL bar at the top of the browsers, and the <h1></h1> element defines the largest size of heading available, usually the one that you want to appear at the top of the page.
What Goes in the <head>?
The
<head> element generally contains things that tell the browser what the page should look like, and how it should behave.
Here’s what we’ll need to add to our
<head> section:<head>
<title>Discoverthreejs.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8" />
<link rel="icon" href="https://discoverthreejs.com/favicon.ico" type="image/x-icon">
<script src="https://threejs.org/build/three.js"></script>
<link href="styles/main.css" rel="stylesheet" type="text/css">
</head>
We already mentioned that whatever we put in the
<title> will show up in the URL bar of the browsers.
Next up a are couple of
<meta> tags. In a professional website you’ll probably end up with quite a few of these, since they are used for things like describing how your website will look in a Google search, or when linked to on social media, but for our purposes we just need two, which are the bare minimum need to make sure that our website will behave consistently across many devices:- the Viewport meta tag. This only applies to mobile devices, which render the page in a virtual viewport:
width=device-width: render the page at the same width as the deviceinitial-scale=1: set the initial scale to 1
- the
<meta charset>element tells the browser how to decode the HTML document itself.
Next, there’s a
<link rel="icon", which is linking to the favicon of this site. It’s not completely necessary, but you know… branding.
Of most interest to us is the script tag which will include three.js in our HTML page. We’re loading it directly from the threejs.org website here, as described in the previous chapter. In Section Two, we’ll switch to using JavaScript Modules and remove this line from our HTML.
Finally, we’re linking to a style sheet called main.css, which we’ll describe below. This file is located in a folder called styles/, relative to our HTML file.
That’s it for the
<head> section. We may add a few more <script> tags in some examples, but nothing else.
And What Goes in the <body>?
The
<body> element generally contains things that we want our site’s visitors to be able to see.<body>
<h1><a href="https://discoverthreejs.com/">Discoverthreejs.com</a> Ch 1.1 Your First Scene</h1>
<div id="scene-container">
<!-- This div will hold our scene-->
</div>
<script src="js/app.js"></script>
</body>
The body section is also very simple - first of all, there’s the
<h1> main title, which we’ve already described. This time we’ve added an <a> element, which means a link, which will direct users back to the main site. The hrefattribute tells the browser what the link should point to.
Following this, we’ve added a
<div> element, which is a basic divider element. It doesn’t tell the browser anything about how to display what goes inside, it just says that it’s somehow separate from the things around it. We’ve given this one an ID, scene-container, and we’ll use this ID as a hook to connect our JavaScript app onto and tell it where to put the 3D scene.
We’ve also put a helpful comment inside this
<div>. Comments in HTML are defined like this:<!--
Nothing inside here will show up on the web page
-->
Finally, we’re including another
<script> element. This time we’re pointing it to a local file called app.js, which contains all the JavaScript that we will write.
In the first section, we’ll write all our JavaScript into one single file. In the second section, we’ll use modules to split our code across several files, however, we will still link to the main one of these files in our HTML.
What’s Missing?
There’s one important thing missing from this picture, and that’s the
<canvas> element, which we’ll add inside the <div id="scene-container"> using JavaScript. Once we’ve done that, it will look like this:<div id="scene-container">
<canvas></canvas>
</div>
All three.js WebGL scenes get drawn into a
<canvas> element like this one.
A
<canvas> is basically an empty rectangular box, that’s quite separate from the rest of the HTML. We pass control of what goes inside this box over to WebGL, and WebGL, in turn, uses our graphics card to generate images, or a sequence of images in the case of an animation, which then gets drawn into the empty rectangle.
In fact, all HTML elements are just rectangles! That’s right, every single webpage is just made up of a load of rectangular elements stacked on top of each other.
The web would be a very boring place if that’s all there was to it though. Fortunately, we can control the way that these rectangles look, giving them rounded edges and shadows, animating them and so on using a style sheet. In our case, our style sheet is called
main.css and we’ve linked to it in the <head> section. Let’s take a look inside it now.CSS
Nearly all of the examples in this book take up the whole webpage, so we don’t need to do anything fancy with regards to styling our page. We want to make sure that the
<body> element takes up the whole screen, that the <canvas> element fills the whole body, and that the <h1> heading gets drawn on top of the <canvas> and not underneath it. Aside from that, we want our text to be white and centered in the screen, we want to style the link to discoverthree.com a little bit… and that’s about it.
Let’s take a quick look at what we need to put inside the main.css stylesheet in order to achieve all of that.
body {
margin: 0;
overflow: hidden;
color: white;
text-align: center;
}
h1 {
position: absolute;
width: 100%;
z-index: 1;
font-size: 1.5rem;
}
a {
color: white;
}
a:hover{
color: purple;
}
#scene-container {
position: absolute;
width: 100%;
height: 100%;
}
In the body tag, we’re overriding the default browser styling, telling it not to add margins, and also telling it to hide unsightly scrollbars using
overflow: hidden. Then we’re setting the text color and text alignment, which will then be applied to all the child elements as well.
Next up, in the heading selector, we’re using absolute positioning, which means “relative to the containing element, in this case, the body. We’re setting the font size a bit smaller than the default, and then, most importantly, we’re setting the
z-index which controls what order the elements gets drawn in. If we didn’t add this, the heading would be drawn first, and then the <canvas> would get drawn on top of it, so it would be invisible!
Next up, we’re setting the link color to white, and then saying that whenever the mouse hovers over it we want it to turn purple.
Finally, the
# symbol is used to represent an ID, so #scene-container controls the appearance of <div id="scene-container">. IDs are used to represent unique elements - that means that you should never have two elements with the same ID in your page.
If you do need multiple similar elements then you would use classes instead. We could define a div that represented an article class using
<div class="article"> and then in the CSS would style this using:.article {
color: black;
}
In this case, we could add any number of articles to our page and they will all have black text.
Back to our
#scene-container - we’re again giving it absolute positioning and setting it’s width and height both to 100%, meaning that it will take up 100% of the parent element, in this case, the body.
With that out of the way, our page is ready to go! In later chapters we will add some more CSS since we’ll need to add some controls like sliders and buttons to our page, but it won’t get much more complicated than this. Everything else that we do will be done in JavaScript, so, let’s turn our attention to the JavaScript that we’ll be using in this book next.
Comments
Post a Comment