HTML For Idiots Like Me
Here's a bunch of random HTML stuff I've learned for both tumblr and ao3 over the past few weeks, explained in as simple of a way as I could explain it. Yeah this has probably be explained a million times before, but I took ages to figure this stuff out, so I figured I'd share it in a simple way I could have used.
How To Do HTML On Tumblr
HTML can only be accessed on tumblr via desktop, afaik it's not possible on mobile.
On desktop, make a post, click on the settings button in the corner and scroll down to where it says "rich text." Switch that to HTML. Paste or type whatever HTML thing you're trying to do, and then switch it back to rich text to see the result!
How To Do HTML On Ao3
Ao3 summaries, start and end notes, and comments are already in HTML! So are the main texts of fics if you don't manually switch it to rich text. So all you have to do is put in the HTML version of what you want, and when you hit post it will show up as intended!
Italics, Bold, Underline, Ect...
Something to note is that HTML starts with the instructions inside of "<>" and ends with the same instructions in "</>" with the slash in front. Examples:
Bold: <b>Wow, I love One Direction</b>
How it will show up: Wow, I love One Direction
With that in mind, here's the start and end HTML for a bunch of basic text formatting tools sites like tumblr have built-in to their rich text, but that you might have to do manually on ao3:
Bold: <b> </b>
Italics: <i> </i>
Underline: <u> </u>
Strikethrough: <del> </del>
Here is a website that shows you the code for various simple and complex HTML thingies. It has an option to show what the results look like, so you can mess with changing the code yourself to get a feel for what works and doesn't work. It's what I used to make this example:
Blockquote
This gets it's own catagory because I LOVE it. What is blockquote? Well, it's what
indented text
is on tumblr, but this gives you a way to do it on ao3! Here's a visual example of how I use it in my ao3 comments when I want to quote lines from the fic:
Important note: Ao3 pfps can sometimes cover indented blockquote text in comments for the first few lines. If you try this and it "doesn't show up," try putting it further down in your comment in case your pfp is hiding it. (Source: me and my stupid ass)
Dropbox
This is one of the more complex examples, but I love knowing how to do it. Want to thank a lot of people or include warnings in the notes of a fic without making a stupidly long note? This gives you a collapsible drop-down box that hides it until clicked!
Now, this is one I recommend copy-pasting rather than memorizing. Here's what the code looks like and here's a link to the page where you can copy-paste it;
And here's how it looks in the start notes of one of my fics on ao3:
If you want to put multiple paragraphs inside of the drop box, you can do <p> and </p> to start and end each paragraph within the box.
Coloured Gradient Text
Y'know, the thing I've been using this whole post for each header. This is a fun one, I really like using it on tumblr. For this one, you can actually use a website, which I'll link here.
When you open the website, you type in whatever text you want to colour, and then you choose the amount of colours and change them to whatever you want the gradient to be. To make the text all one colour, just set the colour number to 2 and make sure they're each set to the same hex code:
After you've got your settings perfect, hit the big GENERATED COLOR FADED TEXT button at the bottom of the screen. You should see something like this:
Copy paste that long ass HTML string in the bottom box. To paste into tumblr, see the above section where I explained how to set your post to HTML. Once set to HTML, paste that long string on a new line, and then switch it back to rich text! From there you can copy/paste the text normally if you need to move it.
Anyway, that's all I've got for now! Hopefully this helps someone because I absolutely could've used this kind of guide, I sort of pieced all of this together through trial and error, as well as pestering my friends who know more than me.
