::|CONTENTS
- Overview
- New Additions
- Old Subtractions
- Tools
- See also
HTML5 battles on BotB are the successor to
HTML battles and, as such, are similar to them whilst incorporating many of the new standards of the modern web, most notably the tags of the massive upgrade that is HTML 5.
Often, your submission will rely heavily on using and abusing JavaScript to the fullest extent you can manage within an hour. More likely than not, the host will allow for external JavaScript libraries (eg. jquery, vanilla.js, AngularJS) to speed up production and add improved functionality to your websites.
Overview
In HTML5 battles,
BotBrs code something from scratch in an hour using the HTML language. Cascading Style Sheets (CSS) and JavaScript (ask your host if they allow
jquery if you want to use it) are permitted; Flash, Java, and anything else that requires a plugin are not (video and audio tags ARE allowed however, this
is HTML5 afterall). The submitted file must either be a standalone .html file or a .zip file containing the main .html file and other assets.
All resources (images, stylesheets, JavaScript, etc.) used within the entry must be the author's own work (and, in the case of
OHBs, created during the entry period). Hotlinking to files on the Internet is prohibited, since it wastes bandwidth from the host, is prone to breaking, and would likely break one of the other rules as is. This means that resources utilizing server connections (such as PHP code) is forbidden as well.
New Additions
HTML5 has different standards than HTML; adding and removing features that separate it from the past allow it to be the standard of the modern web. Here's some essential info for some of these standards.
- Documents now require a doctype and a character set to be declared at the beginning, before the <html> tag and in the head tags respectively. Usually <!DOCTYPE html> and <meta charset="UTF-8"> will suffice.
- <title></title> is now required in the head tags.
New elements added for better structure: - <section> represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
- <article> represents an independent piece of content of a document, such as a blog entry or newspaper article.
- <main> can be used as a container for the dominant contents of another element, such as the main content of the page. In W3C HTML5 and W3C HTML 5.1, only one such element is allowed in a document.
- <header> represents a group of introductory or navigational aids.
- <footer> represents a footer for a section and can contain information about the author, copyright information, etc.
- <nav> represents a section of the document intended for navigation, entirely seperate from <header>.
New elements added for functionality: - <video> and <audio> tags have been added to supplant the need for external plugins in order to play multimedia.
- <time> attributes a machine-readable date to a string of text.
- And most importantly, <canvas>.
Many other elements were added too but are too numerous to list.
Mozilla Developer Network has more detailed documentation on this subject.
Old Subtractions
Now for one of the most important parts, as well as the most difficult part for HTML 4 veterans...what is
illegal to use in HTML5. Since HTML5 is all about moving forward, that means some things needed to be left behind in 2002. If you like that good old fashioned Web 1.0 look, you need to make sure your styling is done in CSS with the new standards cause the tags that define the old web have pretty much been gutted from HTML 5.
basefont, big, center
good bye friend )':, font, strike, tt, frame, frameset, marquee
NOOOOOOO D':, noframes, the align attribute (eg <p align=right>), the background attribute on body, the bgcolor attribute, cellpadding and cellspacing on table, height on td and th, and width on hr, table, td, and th.
Various other elements and attributes were removed which can be read about
here.
Tools
Unlike HTML (which has solely one type of way to create entries in), HTML 5 has many different ways of creating entries that are much more modern and varied than its predecessor. However, in terms of coding in general, the base tool used is generally the same.
PLAIN TEXT EDITORS
Plain text editors are as described on the label; they're editors that rely on the code text of the document, rather than the layout of the document. They're the simplest tools to use out of the bunch and, as such, allow for greater amounts of freedom when it comes to the code of a page, especially when CSS and game developing is involved. However, as such, people will have to solely rely on their knowledge of HTML 5 in order to create an entry.
LIST OF POPULAR TOOLS
-
Brackets, the most modern example of a plain text editor. Built for developing HTML5 documents and has WYSIWYG
previewing, not editing, for web pages. Recommended for n00bs who know the language well. Previewing requires Google Chrome to work.
-
Notepad++, the most robust text editor out there. Has autofill and markup settings for most languages -- HTML, CSS, and JavaScript included.
-
Your built in text editor, the most convenient option. Recommended for hardcore n00bs who love editing HTMLs like it's 1993. B)
From here, there are two ways HTML 5 tools go, in terms of direction: website design, and game development.
WYSIWYG EDITORS
WYSIWYG stands for "What You See Is What You Get". In short, these are the Microsoft Word to the above's Notepad, allowing live document editing, drag and drop capabilities, and more intuitive controls that attract first-time developers. However, as such, that means that most of the people that use WYSIWYG editors are likely to be n00bs who don't know what they're doing. It'd be wise to get to know these programs first before going ahead and using them, lest ye dare to break one of the sacred considerations and incur the wrath of all who may see. It's also good to remember that most, if not all WYSIWYG editors, have a source tab that shows the code of your page.
LIST OF POPULAR TOOLS
-
BlueGriffon, the most popular out of all the choices for free WYSIWYG editor. Uses the Gecko Engine also used by Firefox and Netscape. Requires license to access all features, such as a more responsive design and EPUB support.
-
Froala WYSIWYG Editor, an editor made entirely in JavaScript. Requires a proprietary license to use outside of free trial period.
-
SeaMonkey, the community run web suite originally developed by Mozilla. Includes a robust WYSIWYG editor known as the Composer with quick image resizing, CSS support, and a DOM Inspector for checking entries. It also has an IRC client.
There are tons of other ones -- such as CoffeeCup, Mobirise, and Dreamweaver -- however, these three are the most widely suitable and available tools for making entries with.
GAME ENGINES
HTML 5 entries are not
strictly limited to websites, unlike its predecessor. The vast majority of HTML 5 entries and battles nowadays will most likely be games and game jams, hence why the format is not in the WebDevist category. A few people (those who know HTML as their second language) have their games developed by hand, upon their own blood sweat and tears on Notepad. However, most people will likely go to one of the following game engines in order to develop their games.
NOTE: Many game engine exports do not work with browser security restrictions against disallowing local file access. The workarounds for this include starting a localhost server in the game's root directory, or configuring your browser to allow local file access.
LIST OF POPULAR ENGINES
-
Puzzlescript, a game engine based on Sokoban. Most games made with this engine will be puzzle games, though platformers are possible with clever programming. This engine does not require any local file access, so the workaround hacks described above are not required.
-
Stencyl, a game engine built for platformers. Uses a Scratch-like interface for developing games and, as such, is the n00b's first choice for developing an entry.
-
GameMaker Studio, the industry (read: rich man's) option. $200 for license.
- (not tested yet) it seems that html5 entries can be done on Scratch! -
https://sheeptester.github.io/htmlifier/ -
https://scratch.mit.edu/projects/editor/?tutorial=getStarted
See also
w3schools is an extensive database of HTML education and is the prime starting place for HTML n00bz. There is also the
Mozilla Development Network Web Documentation for reference and further documentation once you've finished learning about it.
