- It is incredibly easy to hack together a page that does roughly what you want it to do.
- It is incredibly hard to tweak a hacked together page to do exactly what you want it to do.
- I need a better way to explain my code.
With that in mind, allow me to introduce my new codeblock widget for this blog. Feel free to click any of the lines to get specific notes. Please give it a go!
- <!DOCTYPE html>
- <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
- <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
- <script src="script.js"></script>
- <link type="text/css" rel="stylesheet" href="stylesheet.css" />
- <title>More Blocks</title>
- <div id="header">
- <h1>Add and Delete Elements</h1>
- <div id="main">
This tag indicates what type of file the browser is parsing. In this case, the document type is "html", which indicates that the document is HTML5.
The <html> and </html> tags are the start and the finish of the page.
The <head> and </head> tags mark the header section of HTML. Here is where you link to scripts and CSS stylesheets, as well as set a page title that will show up on the browser tab.
This line includes the basic jQuery library for use within the page. For more information, check out jQuery.com.
This line includes the jQuery UI library, which provides additional jQuery options. For more information, check out jQueryUI.com.
This is the line to include my custom script, which implements all the cool new stuff I'm playing with.
This line links my custom CSS to the page.
The title of the page.
The <body> and </body> tags mark the content section of HTML. Here we define what we would like to appear on the page itself.
We would like to define a header section of the page. The structure of the header section will be done later using CSS.
A line of text to display in our header section.
A main area for content of the page. There isn't much here at the moment.
For this post and the next couple posts, I'll be using the example page here. The color buttons add draggable blocks to the main content section. You can double-click a block to remove it, or click the clear button to reset the page.