HTML
This tag belongs to the Additional Tags Category.
Parent tags (more general):
This tag has not been marked common and can't be filtered on (yet).
Works which have used it as a tag:
Pages Navigation
-
Tags
Summary
There are some great quick guides to HTML on A03. This is not one of them - it is a comprehensive guide, dividing all of the available tags into the following categories:
1. Text Formatting (in-line HTML)
2. Page Formatting (block HTML)
3. Tables and Lists
4. Links and ImagesEach tag will have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example.
It will also introduce tag attributes, ways to further refine formatting, for a few simple - but widely applicable - cases.
-
Tags
Summary
As of April 2016, The database that stores works on A03 does not allow emoji. If you try to add an emoji it will end your story there. Any words after the emoji? Poof. Gone. This is a known, if poorly advertised, issue with the archive.
There are some workarounds; you can find them in: How to Make iOS Text messages on A03. But here? Here is for ALL THE EMOJI*.
10 chapters of emoji tables, each with the HTML for putting the emoji into your work and the CSS for putting it into your workskin. Copy-Paste baby. Copy-Paste.
*Does not contain the 2016 Unicode release. You'll have to come up with the code for pickle yourselves.
(Note, because this is 10 chapters of emoji tables, here is a link to the Index Tables (chapter 1) to speed up load times and reduce confusion if you have preferences set to "entire work.")
Series
- Part 11 of AO3 Work Skins/Tutorials
-
Tags
Summary
Primarily just where I share work skin code and discuss ways to improve the Ao3 experience, including:
- Twitter and Instagram like posts
- Non iOS messaging systems
- Avatar and image formatting for script formats.
- Search engine interfaces
- Documentation on AO3 Site SkinsSeries
-
HTML test coding by Grumpy_Old_Snake
Fandoms: Original Work, Undertale, html help, Non-Fiction - Fandom
10 Jul 2017
Tags
Summary
I set out to see if there's a way to create Sans' spread out dramatic speech in a readable way that line-breaks smoothly. I believe I was successful! So here are some instructions.
-
Tags
Summary
a work skin that mimics the program Discord (for chatfics or fics that feature use of it!)
made this skin over a couple days; it won't look good on mobile or with creator's style disabled but the html is pretty easy to customise!
If you use it, crediting and linking back here so other people can find it is appreciated :)
-
Tags
Summary
Some formatting fixes that I've found in real-time. If you comment I'll see if I can help, but no guarantees!
-
Tags
Summary
This is a personal experiment with HTML. It is a very limited list with what I find useful.
Update: Somehow I find more and more stuff useful, so this list is not that limited (and not that private) anymore. I'll improve it with time and according to my needs. I just realized, this will never be "complete" and there is no final number of chapters.
So far that's posted:
Part One: Basics
Part Two: Lines
Part Three: Footnotes and Links
Part Four: Columns and Skins
Part Five: Pictures
Part Six: Choose Your Own Adventure
Part Seven: Chapter Title
Part Eight: The Title, the Username and Links
Part Nine: Boxes (in progress) -
How to Size Images on AO3 by Informative_Dandy
Fandoms: media - Fandom, Meta - Fandom, All - Fandom
22 Jan 2019
Tags
Summary
Learn how to edit the HTML of your image files so they automatically size themselves to fit any screen (both mobile and desktop). It's super EASY!
-
Tags
Summary
Based on phyripo's guide, with some usability improvements made to reblogs and photoset creation.
-
loaf of love by arranonymous (fiqueligia)
Fandoms: Kuroko no Basuke | Kuroko's Basketball
28 Jan 2021
Tags
Summary
[ To you all, Paparazzi ]
-
Tags
Summary
A tutorial for creating and formatting spreadsheets in AO3, using CSS and HTML.
-
Tags
Summary
A short tutorial for creating ruby text (furigana) in AO3, using CSS and HTML.
-
Tags
Summary
A companion to Repository. A comprehensive guide to coding focused solely on emulating Twitter posts for fun or for archiving Twitter fics, up to and including:
- Quote Retweets
- Embedded Images
- Twitter PollsSeries
-
go-black by abracatastrophe (fiqueligia) for homurashunkin
Fandoms: Black Clover - Tabata Yuki (Anime & Manga)
02 Apr 2020
Tags
Summary
Berbekal info dari Gugel yang always listening always understanding, Yuno akhirnya bisa melakukan pemesanan pertamanya.
[ AstaYuno Slight!LichtLumiereRhya ]
-
Tags
Summary
Essentially, I write on a mobile device and therefore have to use HTML instead of rich text. I decided to conduct an experiment and these were the results.
If you're having trouble with formatting, this might help...?
[For HTML basics, click "About" on the hotbar up ^ there, then "FAQ" and find your way from there)
-
Tags
Summary
After missing Rose during a weekend when they should have had a sleep over,
Mx. Lalonde provides Jade with an alternative: to spend the weekend at her place.
Chapter 4: Writing: ±15% | Typed: 5% | Coding: 10%
Est. Publishing Date: 2021*
-
Tags
Summary
Based on gadaursan's "Fire Emblem Support Scripting" work skin, a formatting and CSS to format screenplay and scripts (or dialogue-only/dialogue-heavy stories), but now with some edits: 1) adjusted the images for smaller screens, 2) added a text box/speech bubble, 3) In version 3, added character's name.
-
CSS in Testing by InfinitysWraith
Fandoms: Unspecified Fandom, Workskins - Fandom, Ao3 Skins - Fandom
27 Apr 2021
Tags
Summary
This is a flaming dumpster filled with CSS and HTML experiments. It's not instructional, but I post the code and my own explanations for both our sakes. Feel free to steal the code or ask me questions- I don't know what I'm doing. :)
(Pics are mine though)
Chapter 5 is probably what you're looking for ;)
I'm not going to say I take requests, but I'm always looking for inspiration.
-
Tags
Summary
Any place that you can add text on AO3, you can also add a link.
- summary
- author's note
- comment
- profile
Here's how you do it.
Series
- Part 4 of How to AO3
-
Tags
Summary
Настройка скина для сайта с сортировкой тэгов и русскими названиями категорий в шапках
Series
- Part 1 of Архив на русском
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
Tags
Summary
Izuku (accidentally) starts a cult.One month after @hawks_unofficial's initial viral post, the blog titled "Quirk Analysis Blog for the Future", otherwise known as "Q. A. B.", has gone from an average of 10 views per post to an average of 20,000 views per post.
Midoriya Izuku does not know how to view the impressions analysis for his suddenly popular blog, and only notices that sometimes, people actually comment on his posts now. He does not google himself or his moniker and thus does not see the rise in online articles and speculation.
He is unaware that the "kyuu-ei-bee" he begins to hear about in passing refers to his own blog. He does not have a Twitter account.
At the time, Midoriya Izuku is 15 years old.
-
Tags
Summary
There are some great quick guides to HTML on A03. This is not one of them - it is a comprehensive guide, dividing all of the available tags into the following categories:
1. Text Formatting (in-line HTML)
2. Page Formatting (block HTML)
3. Tables and Lists
4. Links and ImagesEach tag will have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example.
It will also introduce tag attributes, ways to further refine formatting, for a few simple - but widely applicable - cases.
-
Tags
Summary
Primarily just where I share work skin code and discuss ways to improve the Ao3 experience, including:
- Twitter and Instagram like posts
- Non iOS messaging systems
- Avatar and image formatting for script formats.
- Search engine interfaces
- Documentation on AO3 Site SkinsSeries
-
Tags
Summary
Embedding tutorial
-
How to Make iOS Text Messages on AO3 by CodenameCarrot, La_Temperanza
Fandoms: No Fandom
10 Apr 2016
Tags
Summary
This is a tutorial/live example on how to mimic iOS text messages on AO3 without the need to use images. There's also a chapter on how to have emojis displayed on AO3 as well.
Series
- Part 3 of AO3 Work Skins/Tutorials
-
Tags
Summary
iMessage as it looked up through iOS 6.
Series
- Part 2 of Azdaema's AO3 Messaging Skins
Bookmarked by Tiffany
22 May 2021
Bookmarker's Tags:
Bookmarker's Notes
Retro iMessage Skin by Azdaema Codes (Azdaema)
https://github.com/Azdaema/AO3-Skin_Messaging/tree/master/iMessage%20Retro -
Tags
Summary
a work skin that mimics the program Discord (for chatfics or fics that feature use of it!)
made this skin over a couple days; it won't look good on mobile or with creator's style disabled but the html is pretty easy to customise!
If you use it, crediting and linking back here so other people can find it is appreciated :)
-
Workflow from Google Docs to Ao3: A Primer by Jenrose
Fandoms: Archive of Our Own, Google Docs - Fandom
11 Jul 2020
Tags
Summary
Google docs is fantastic for collaborative work, especially for people who work with beta readers. But getting from there to here can be tricky. Abundant screenshots.
-
Tags
Summary
just html things that i've learnt/know. chap 1 is pretty easy, chap 2 is slightly more effort. chap 3 is specifically table of contents (links). no css is used here. i hate css.
kind of redundant i guess? you could probably get a lot more information from other people who know more about this than me. ig this is mostly just for myself :]
-
Tags
Summary
Bored with the default page dividers? This is a tutorial/live example on how customize your page dividers with no images needed (though I do show you how you could use images if you wanted to do such a thing).
Series
- Part 9 of AO3 Work Skins/Tutorials
-
Tags
Summary
Just a quick and dirty HTML reference for AO3, with references to CSS style, HTML style, and other guides.
Series
-
Tags
Summary
There are some great quick guides to HTML on A03. This is not one of them - it is a comprehensive guide, dividing all of the available tags into the following categories:
1. Text Formatting (in-line HTML)
2. Page Formatting (block HTML)
3. Tables and Lists
4. Links and ImagesEach tag will have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example.
It will also introduce tag attributes, ways to further refine formatting, for a few simple - but widely applicable - cases.
-
Tags
Summary
Just a quick and dirty HTML reference for AO3, with references to CSS style, HTML style, and other guides.
Series
-
Tags
Summary
There are some great quick guides to HTML on A03. This is not one of them - it is a comprehensive guide, dividing all of the available tags into the following categories:
1. Text Formatting (in-line HTML)
2. Page Formatting (block HTML)
3. Tables and Lists
4. Links and ImagesEach tag will have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example.
It will also introduce tag attributes, ways to further refine formatting, for a few simple - but widely applicable - cases.
-
Tags
Summary
just html things that i've learnt/know. chap 1 is pretty easy, chap 2 is slightly more effort. chap 3 is specifically table of contents (links). no css is used here. i hate css.
kind of redundant i guess? you could probably get a lot more information from other people who know more about this than me. ig this is mostly just for myself :]
-
How To Change Text on AO3 When the Cursor is Hovering Over It (Or Clicked on Mobile) by La_Temperanza
Fandoms: No Fandom
22 May 2017
Tags
Summary
This a tutorial/live example on how to have text change or appear once a cursor is hovering over it. Helpful for pop-up spoilers, language translations, quick author's notes, etc.
Series
- Part 15 of AO3 Work Skins/Tutorials
-
Tags
Summary
This is a personal experiment with HTML. It is a very limited list with what I find useful.
Update: Somehow I find more and more stuff useful, so this list is not that limited (and not that private) anymore. I'll improve it with time and according to my needs. I just realized, this will never be "complete" and there is no final number of chapters.
So far that's posted:
Part One: Basics
Part Two: Lines
Part Three: Footnotes and Links
Part Four: Columns and Skins
Part Five: Pictures
Part Six: Choose Your Own Adventure
Part Seven: Chapter Title
Part Eight: The Title, the Username and Links
Part Nine: Boxes (in progress)- Language:
- English
- Words:
- 6,530
- Chapters:
- 10/?
- Collections:
- 4
- Comments:
- 29
- Kudos:
- 173
- Bookmarks:
- 204
- Hits:
- 5039
Bookmarked by basically_thearlaich
08 Mar 2021
Bookmarker's Tags:
Bookmarker's Notes
Good overview - links to other works pertaining the ideas presented here!
-
Tags
Summary
This is a live example of how an author can create linked footnotes in their work with only a little bit of HTML and no workskins required. This is best viewed by clicking "Entire Work". While I've included the actual coding in bold and italic once you click "Hide Creator's Style", there's a more detailed explanation here.
EDIT 6/28/17: The third chapter now shows how to use anchor links as an index/table of contents.
Series
- Part 6 of AO3 Work Skins/Tutorials
-
Tags
Summary
Izuku (accidentally) starts a cult.One month after @hawks_unofficial's initial viral post, the blog titled "Quirk Analysis Blog for the Future", otherwise known as "Q. A. B.", has gone from an average of 10 views per post to an average of 20,000 views per post.
Midoriya Izuku does not know how to view the impressions analysis for his suddenly popular blog, and only notices that sometimes, people actually comment on his posts now. He does not google himself or his moniker and thus does not see the rise in online articles and speculation.
He is unaware that the "kyuu-ei-bee" he begins to hear about in passing refers to his own blog. He does not have a Twitter account.
At the time, Midoriya Izuku is 15 years old.
-
Tags
Summary
Just a quick and dirty HTML reference for AO3, with references to CSS style, HTML style, and other guides.
Series