From the course: D3.js Essential Training for Data Scientists

Recalling HTML basics - D3.js Tutorial

From the course: D3.js Essential Training for Data Scientists

Start my 1-month free trial

Recalling HTML basics

“

- [Instructor] First off, you need to know how a web page works. D3 creates graphics within a web page, so you can't have D3 without HTML. An HTML page can be edited in a text editor. Here we've got a text editor on the left, and a browser on the right. If the contents of the HTML file conform to a set of rules, browser software can interpret the contents, and transform your HTML code into a web page with images, tables and text. The basic rules of an HTML page are, DOCTYPE declaration, HTML tags, head tags, and body tags. "Tag" is a hidden key word contained within angle brackets, which tells the browser what to display, or how to display it. There are opening tags, which have angle brackets, and closing tags, which have angle brackets, and a forward slash. The closing tag tells the browser to end the element given by the opening tag. We also need a character set, and title, to make our page complete. Now technically in HTML5, you could omit some of these tags. But the structure is going to be useful for us within the course. So this is the smallest valid HTML file we're going to be working with. The head tags contain information about the page, and they're not shown in the browser. The body tags contain the bits we see, called elements. As our body tags on the left here have no content, the web page appears blank. When we add code in between the body tags, and view the file in a browser, the browser has to work out how to arrange the parts. It will draw the first element top left, and the browser will then draw following elements to the right and down. So web pages are always drawn by the browser from top left, to bottom right, following formatting rules that we supply, plus their own assumptions. Different browsers, such as Chrome and Firefox, often apply slightly different rules, and therefore display elements differently, much to the annoyance of web developers. Now we've added some content to our body tags. We've got "p tags", which means paragraph. And then we've got some "div tags", which means division. HTML elements fall into two categories, block, and inline. Some elements can take either form, but all elements default to one or the other. Block elements take up a rectangular area within the page, and include things like images, tables, paragraphs, and divs. Block elements always start on a new line, and default to taking up the full width available. Inline elements occur within a block of text, usually a paragraph, and include things like hyperlinks and spans. Inline elements don't start on a new line, and they only take up as much space as necessary. You can see here that we've placed p tags, a paragraph, at the top of our page, i.e., as the first set of tags within the body tags. Paragraph is a block element, so those four lines on the right, taken together, take up a rectangular space in the browser window. You see that the small red box is covering part of the text. Let's say we formatted our span element, so that it highlights a word in red. We don't need to give any position or size information to place this red box. The browser works it out when it types out the text. So, if we were to double the font size, the red shading would still appear around the correct word. This is true of all inline elements. Looking at the text editor again, you can see that we've placed number of block elements under the paragraph. In this case, we have five divs. Each div is a block element. With no formatting, these divs have used default settings, and scaled to the height of their contents, and the full width of the page. We can change the width and position of block elements to produce any kind of layout. With formatting, not shown here, we use the same HTML to produce a different layout for our divs, making the blocks different sizes, and arranging them in different locations. These concepts will become important shortly, when we start looking an HTML element called SVG. You can't create a D3 graphic, without an SVG element.

Contents