HTML, CSS & JavaScript
Resources
Video Script
In this chapter, we’re going to pivot a bit and start talking about the other most common type of user interfaces for applications today - the web. However, before we can discuss how to make our applications available on the web, we should learn a bit about the underlying technologies that power the World Wide Web today. First up is HTML, or the Hypertext Markup Language. HTML was originally developed along with HTTP by Tim Berners-Lee in the late 1980s as a way to make information more freely available on the early internet. HTML is based on an earlier markup language called the Standardized General Markup Language, which is also the basis of XML. HTML is the language that defines the structure and content of the web page itself, and is usually the best place to start when learning how to write web pages from scratch.
HTML itself consists of a number of elements, or tags. Each element consists of several different parts, as shown here. We typically have a starting tag, which may contain optional data called attributes. Then, after the start tag, we see the content of the element. Elements can be nested inside of each other, so we could include another start tag inside of the content. Once we are done, we include an end tag, which includes a slash to indicate that it is an ending tag. Just like the parentheses in our programming languages, we should have a matching end tag for every start tag, though many web browsers will still render the page as best it can even if the tags don’t quite all match up.
Here’s what a basic HTML page should look line, at least for the latest version of HTML. We start with a special tag that gives the type of the document. For HTML5, we include the <doctype HTML> tag as shown here. Below that, we have a start html tag that begins the page. All of the content in an HTML page should be stored between the start and end html tag. Within that, there are two major sections of an HTML page, the head and body. The head element marks the portion of the page containing data about the page, and all of the content in the head element is not actually shown on the page itself. Inside of the head element, we see the title of the page, which is usually used by the web browser to identify the page in the title bar or tab. You may include other metadata here, such as information about the author of the page or links to relevant CSS documents. After the head element we see the body element, which contains the actual content of the page. This is the portion that is displayed by the web browser itself.
Next, let’s look at CSS, short for Cascading Style Sheets. CSS is used to define the style, or look and feel, of the HTML pages. Typically, CSS information is stored in a separate file from the HTML data, and then that single CSS file can be used by multiple HTML pages. By doing so, you can have a consistent look and feel for all of the pages in a website or web application.
One important thing to know about CSS is the Box Model. This diagram shows the various sizes and measurements applied to an HTML element when it is rendered on the page. First, the position can be determined by the attributes top, right, bottom and left. However, in most cases, this is set automatically by the web browser based on some rules, similar to how we used a layout manager in our earlier GUI projects. Inside of that, we see the margin, which is extra space outside the element to help separate it from other elements. Then we have the border around the element, and the padding inside of that border. Similar to the margin, the padding provides additional space between the edges of the element, represented by the border, and the actual content inside. Finally, the content itself is placed inside, and is measured by the width and height of the content itself. In CSS, we can adjust each one of these measurement to precisely position and display each element on the page.
A basic CSS file looks like this one. At the start, we see a CSS selector, in this case for the h1 element. This means that any h1 element in the page will be given this style. Then, inside the curly braces we see several CSS properties, in this case setting the color to red and the font to bold. There are many different CSS properties that can be edited, and I encourage you to refer to some of the documentation linked in the textbook to learn more. We won’t focus on CSS much in this course, but it is a useful skill to learn. CSS also includes a wide variety of selectors. At the bottom of this slide we see the three basic selectors. We can refer to any HTML element by name, or the ID of an element using the hash symbol. To refer to all elements with a particular class, we use a dot in front of the class name. We can also combine these selectors in a variety of ways to select exactly the elements we want. Again, feel free to refer to the documentation for some examples, and we’ll also see a quick demonstration in the example video for this chapter.
Finally, the third major technology powering the World Wide Web today is JavaScript. JavaScript is a programming language that was developed to allow web pages to be interactive directly within the web browser. Contrary to what you may believe from the name, it isn’t actually related to the Java programming language at all, but it uses a Java-like syntax as well as some concepts from other functional and object-oriented languages. However, the biggest difference is that JavaScript is a fully event-driven programming language, and it is also mostly asynchronous, making it a bit strange to work with if you aren’t used to that paradigm. Today, many web pages include JavaScript to allow the web browser to manipulate what the user sees, which is called the DOM.
What is the DOM? That is the name of the document object model, which is how the data contained in a web page is stored in memory by the web browser. By manipulating the DOM in the browser using JavaScript, we can build fully interactive web applications that live directly in the browser. The DOM itself follows the same hierarchical model established by HTML, and in fact it may look very similar to the structure of an HTML document. Using JavaScript, we can update elements, add new ones, or even completely replace the entire page contents, all based on actions from the user and the code on the website. As with CSS, we won’t work with JavaScript very much in this course, but it is also a great technology to be familiar with when doing web application development.
That’s a quick overview of the basic technologies used in the World Wide Web today. For the rest of this chapter, we’ll look at how we can take the data in our application and use it to create web pages for our users.