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: https://cybersphere.me/html-building-blocks/
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.
