2.2 - HTML and CSS

HTML (hypertext markup language) and CSS (cascading style sheets) are used to describe web pages. HTML describes the content of the page while CSS describes the formatting of various elements on the page. If a web page is designed with special care, the HTML code that describes the content of a page can remain static, while the CSS style sheets might change based on the target screen size. That is, the web page would have the same content, but could have very different layouts for a large desktop computer screen as compared to a mobile phone screen.

Since our goal in these tutorials is to learn 3D computer graphics, please don’t try to become an expert web designer at this time. To build WebGL programs you only need to understand the basics of HTML and CSS code.

As with all software development, when you design a web page you should start with a very simple HTML document and add complexity a little at a time.

Tutorials

Basic HTML and CSS can be learned from many on-line tutorials. Please use the tutorials at code academy to learn how to create basic HTML and CSS code. Note that you can change from one lesson to the next using the table of contents popup menu in the lower left corner of the interface.

Assignment

Build a web page for your 3D Tetris game. Refer to the assignment for specific requirements for the game interface.

HTML Coding Standards

These coding standards were introduced in section 1, but please study them again after you have studied HTML and CSS.

  • Always declare the document type as the first line in your document: <!doctype html>

  • Use lower case element names: <p>, <div>

  • Close all elements: <p> ... </p>

  • Close empty elements: <br />

  • Use lowercase attribute names: <div class="...">

  • Quote all attribute values for consistency: <div class="...">

  • Don’t use spaces around equal signs: <div class="...">

  • Try to avoid code lines longer than 80 characters

  • For readability, add blank lines to separate large or logical code blocks.

  • For readability, add 2 spaces of indentation for code inside a parent element. Do not use TAB characters.

  • Always include a <html>, <head> and <body> tag.

  • Always include the language, character encoding, and <title>:

    <!doctype html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

  • Include appropriate comments: <!-- This is a comment -->

  • Use simple syntax for linking style sheets: <link rel="stylesheet" href="styles.css">

  • Use simple syntax for loading external scripts: <script src="myscript.js">

  • Use the same naming convention in HTML as JavaScript

  • Always use lower case file names

  • Use consistent file name extensions: .html, .css, .js, .frag, .vert, .obj, .mtl

Next Section - 2.3 - JavaScript Language