Recalling webpage basics: HTML, CSS, and SVG - JavaScript Tutorial

- [Instructor] To make a dashboard in dc, we first create a webpage in HTML. An HTML page can be edited in the text editor, also known as a code editor. Here we have a text editor on the left and the browser on the right, showing the output of the code. If the contents of the HTML file can form to a set of rules, browser software can interpret the content and transform your HTML code into a webpage, with images, tables and text. The basic rules of an HTML page are, doc type declaration, HTML tags, head tags and body tags. A tag is a hidden keyword contained within angled brackets, which tells the browser what to display. There are opening tags, which have angled brackets and closing tags that have angled brackets and a forward slash. The closing tag tells the browser to end the element given by the opening tags. We also need a character set and title to make our page complete. Now technically in the latest version of HTML, HTML five, you can omit some HTML head and body tags, but it's perfectly legitimate to keep them. The head tags contain information about the page and are not shown in the browser. The body tags contain the bits we see called elements. Because our body tags have no content, the webpage appears blank. When we add code in between the body tags and view the file in the browser, the browser has to work out how to arrange the parts. The first element will appear top left and the browser will draw the following elements to the right and down. So webpages are always drawn bu 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 make different assumptions and therefore display elements differently, much to the annoyance of web developers. Now we've added some content to our body tags. We have p tags, which means paragraph and then we have some div tags, which means division which you can think of as a rectangular block of space on the page. There are lots of other tags available, such as the table, image and headings. Tags can be nested inside each other, so you could put a table in a div or vice versa. When doing this, the opening and closing tags must be wholly contained with no overlap. Each tag will create an HTML element, as the p tags here, have created the paragraph element. An element is a component of a webpage. HTML elements fall into two categories, block and inline. Some elements can take either form, but all of them default to one or the other. Block elements take up a rectangular area within the page and include things like images, tables, divs and paragraphs, which is what we have here. 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, typically within a paragraph element and include things like hyperlinks and spans. Inline elements don't start on a new line and only take up as much space as necessary. Within the paragraph text we have on the left, some text is enclosed in span tags. Span is an inline element. You see that the small red box is covering part of the text on the right. Span allows you to apply specific formatting to a word or words. So let's say that here we are highlighting a word in red. We don't need to supply any position or size information to highlight this word, the browser works it out when it types or renders the page. So if we doubled 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 a number of block elements underneath the paragraph. In this case we have five divs and each div is a block element. We're now formatting these divs have used default settings and scaled to the height of their content which is a single digit and the full width of the page. We can change the width and position of block elements to produce any kind of layout. We're formatting in a language called CSS, which isn't shown here. We are using the same HTML to produce a different layout for our divs, making the blocks different sizes and arranging them in different locations. To make a dashboard in dc, we create a webpage structure in HTML, which is usually a series of divs arranged in a grid. Then we ask dc to output different graphics into each of the divs. In HTML terms, the graphics are svg elements that contain things like circles and rectangles. Svg stands for scalable vector graphic. Dc is quite passive about positioning, the webpage structure has to be robust and well laid out before we even begin dc. To lay out a webpage, we use CSS which stands for cascading style sheets. CSS can make a line fit or thin and fill in a circle red or blue. It also sets the size and positioning of elements, such as divs. Now, dc comes with it's own CSS file, but this is generally for styling and positioning svg elements within a chart, it's not for styling the divs that hold the chart. This CSS code can be pulled into our webpage using a link tag in the head section. When CSS is stored in a separate file and then pulled in like this, it's called external CSS. You could pull in several external CSS files like this, one after the other, but we are not going to do that in this course. We are going to put the extra CSS we need in style tags within the head. Where we put CSS into an HTML page like this is called internal CSS. It's fine to have both kinds of CSS, as long as they don't contain conflicting rules. In lots of dc examples, you might notice that people are using a CSS file called Bootstrap. Bootstrap can help you lay out your webpage without needing to learn CSS. Bootstrap is a completely separate framework to dc though. I will show you how to use Bootstrap in a later chapter, but for most of the course we'll be writing our own style declarations. And one final point. Dc creates svg graphics for us. Svg graphics are a relatively new thing and will only work in the latest version of HTML, which is HTML five. So your users must be using a browser that supports HTML five in order to see your graphics. With an older browser, all they'll see is a blank page.