Permalink
Browse files

more html

  • Loading branch information...
1 parent 7ac2639 commit 80a4f7df2fac429effb618f0d6a5349f77d07d2a @capnmidnight committed Aug 9, 2012
Showing with 50 additions and 72 deletions.
  1. +50 −72 pong-tutorial.html
View
@@ -1,73 +1,51 @@
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="UTF-8">
- <title>Ping Pong</title>
-</head>
-<body>
-</body>
-</html>
-
-<!-- The first thing I do whenever I create a new HTML file is to setup the
-basic structure. The !DOCTYPE comes first, that tells the browser we're using
-HTML5. The character set declaration of UTF-8 isn't strictly necessary, but it
-plays nice with people in other countries. I give my page a title (shows up in
-the title bar if the window, or in the tab handle of tabbed browsers), and then
-finish up with a space defined for the body.
-
-This is basically the bare minimum for getting a page together. You have to have
-these tags, at the least, to satisfy the browser. The browser can make guesses
-as to what you mean if you leave out the !DOCTYPE at the top and the meta tag
-in the head, but you may not like the result.
-
-If you are using Cloud9 right now, you can click the Preview menu item above and
-you will see nothing but a blank, white screen.
-
-The !DOCTYPE *must* be the first line in the file. Some browsers will trigger
-themselves into a "quirks mode" if it isn't. There is a root <html> tag in which
-everything goes. Other than the !DOCTYPE specification and this comment tag, the
-HTML tag is the only tag that is allowed at the very top level.
-
-Think of HTML tags as branches on a tree. Drawn as a graph, the document might
-look like this:
-
-!DOCTYPE html
- | / \
- | / \
- @html head body
- / \
- / \
- meta title
- / |
- / |
- @charset "Ping Pong"
- |
- |
- "UTF-8"
-
-HTML tags start with an open angle bracket ( < ), followed by the tag name
-( meta ), then any attributes that the tag might have ( charset ), and then
-finished with a closing angle bracket ( > ). Some tags--such as the html, head,
-title, and body tags--take internal content and so require an ending tag to
-match their opening tag. The ending tag is similar to the opening tag in that it
-starts and ends with angle brackets, with the exception that a forward slash ( / )
-comes after the first angle bracket and before the name of the tag.
-
-It's good practice to never overlap opening and closing tags. For example, the
-tag for "bold" is <strong> and the tag for "italic" is <em>. If you want a mix
-of bold and italic text, you might be tempted to use something like:
-
- <strong>just bold <em>bold and italic</strong> just italic</em>
-
-Because the <em> tag was opened after the <strong> tag was opened, you should
-close the <em> tag before the <strong> tag is closed. The above example is more
-appropriately done (for the sake of tag nesting, not for the sake of styling)
-
- <strong>just bold <em>bold and italic</em></strong> <em>just italic</em>
-
-If you work to try to do things the correct way, you will find fewer problems
-with your code in the long run, and it will work for much longer. It's good to
-experiment and break the rules when you're learning, but it's usually best to
-take that learning and rework it to get it back in line with the standards.
-
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>Ping Pong</title>
+ <style type="text/css"></style>
+ <script type="text/javascript"></script>
+</head>
+<body>
+ <div id="board">
+ <div id="player1" class="paddle"></div>
+ <div id="player2" class="paddle"></div>
+ <div id="score1" class="score"></div>
+ <div id="score2" class="score"></div>
+ <div id="top" class="wall"></div>
+ <div id="bottom" class="wall"></div>
+ <div id="seperator"></div>
+ </div>
+</body>
+</html>
+
+<!-- After I have the HTML5 supporting template up, I block out more of
+the HTML.
+
+I've got a place holder for the style, script, and game board, as well
+as placeholders for all of the game pieces.
+
+It might not stay this way by the end. For example, I might decide to do
+the graphics in HTML5 rather than Dynamic HTML, but doing it in this way
+helps me think the problem through.
+
+The type attribute on the style and script tags are MIME type specifiers.
+There are a lot of MIME types, and sometimes you will need to know the
+exact MIME type for a file. This list is handy:
+
+ http://www.iana.org/assignments/media-types/index.html
+
+Most of these you will probably never use.
+
+The div (for "division") tag is a general purpose "box" that is used in
+HTML to hold things. The "id" attribute is used to uniquely identify
+that particular box; no two div tags should have the same id. The class
+attribute is used by CSS to style a wide variety of elements with the
+same features; multiple HTML tags may use the same class name, and even
+may use multiple class names, separated by a space, to combine the
+effects of multiples CSS classes.
+
+At this point, there still isn't anything to see, but soon it will take
+shape.
+
-->

0 comments on commit 80a4f7d

Please sign in to comment.