I've been hard at work creating a reference guide for sheet authors making their first character sheets. The last month I've been hard at work producing the HTML part of the guide, and you can read the posts on my blog . One post will go up tonight and daily next week. If anyone spots typos or has suggestions, feel free to send them my way. Here's the introduction to this part of the guide, from this page: <a href="https://cybersphere.me/html-building-blocks/" rel="nofollow">https://cybersphere.me/html-building-blocks/</a> This chapter is a reference guide to using HTML in character sheet
design. Covering the entirety of HTML is way too big of a task – there
are whole websites devoted to that. Instead, this guide gives you the
specific information you need to do the HTML part of a Roll20 character
sheet.
This section of the Guide could be huge, so it is broken up into several posts:
Headings and Line Breaks : these most basic HTML elements are great for showing what HTML elements look like. Attributes and Inputs : In Roll20, attributes are the most important things on a character sheet, and the most common way to create them is with the Input element. Displaying Text : You need to create decorative text all over the sheet – stat labels, tab headings, and so on. You’ll often need to use the span and textarea elements. Containers and DIVs :
Being able to group related elements together is handy – you might want
to create a stat block, a bio section, an encumbrance section and so
on. You’ll learn about the div , section , and details elements. Choosing from a List: It’s
very handy to be able to choose things from a list – what race are you,
which spell are you using, and so on. If the list is entirely
predefined, use the select element, but if players can add to the list, use datalists . Conditional Inputs:
Sometimes its handy to be able to tick whether something is on or off,
or define a setting from a small group. You’ll learn about checkboxes and radio buttons, and the labels for them. Buttons For Making Rolls: If you want to build rolls into the sheet, you’ll need to learn about roll buttons .
These use Roll20’s dice macro system, and so are unique to Roll20 and
general HTML sites will be no help on figuring out how they work. Images:
You will often want to decorate your sheet with images. You’ll learn
better ways to do this in the next chapter of the guide, on CSS, but
HTML has a way to do this and we’ll cover this here. HTML Fundamentals :This post describes other things about using HTML, like good practices and how to add comments. Character Sheet – HTML Example:
Here’s a simple sheet you can test out yourself, and see some of the
HTML elements described here in use. There’s a HTML file for you to
download and try yourself.
Together these posts make up everything you need to make a functional
sheet. It won’t be pretty – for that, you’ll need chapter 2: CSS.
