#HTML tags for divs

[mountmortar]

i love it when federal sites haven't updated their code since like. 2003 or something

[fingertipsmp3]

This thing I've just coded for my assignment is genuinely dogshit but I think I kind of have to just submit it 🫠

[uroboros-if]

Fade to Black Macro

Demo

I have finally turned my fade to black transitions into a somewhat easy to use macro!! :) I am not sure if this has been done before!

Customizable fade times

Built to be compatible with backward and forward buttons (mostly!)

Works across all screen sizes

Note: This is only for SugarCube.

Setup

Copy and paste this Pastebin to your Story JavaScript.

Copy and paste this Pastebin to your Story Stylesheet.

Make a new passage titled exactly as "black_fade". Add the passage tag, "black-fade". Inside, write <div id="black"></div>. Super important! Copy below identically.

After this, your installment of the macro should be complete!

Usage

In the passages where you will be fading from and where you will be fading to, tag it as "passage-fade". For example, I want to transition from "p1" to "p2" with a black fade. Thus, both p1 and p2 should have the tag.

In the passage where you will be fading from, write <<fadestart>>.

Use the <<link>> macro to link to your destination. Inside the link macro, use <<passagefade "[passage name]" [fade time]>> where [passage name] is the passage you want to go to, and fade time is how long the black fade will be in miliseconds. (1000ms = 1s). However, do NOT put the passage you will be going to in the <> macro itself. See below:

Here, I want to go to the passage "p2". Do NOT write <<link "Next passage" "p2">><</link>>. Do not provide the destination passage in the link macro itself. The macro <<passagefade>> will handle it for you if you specify the passage name in the first argument.

Once you do all this, you should be able to sit back and happily use it as you please!

Problems?

Make sure you have the passage "black_fade" titled exactly like that.

Also make sure it has <div id="black"></div> and nothing more!

Make sure "black_fade" is tagged with "black-fade".

Make sure you used <<fadestart>> in the passage you are transitioning from.

Make sure you are correctly using the macro <<passagefade>>. You specify time in miliseconds; it should not have "ms" or "s" included in the argument. It should just be the number (e.g. 4000 for 4 seconds).

Make sure the passages you are fading from and to are tagged with "passage-fade".

There may be CSS/HTML that is interfering with the look of the fade!

There may be other JavaScript code interering with the current code.

If you are having problems, please let me take a look at your Stylesheet or let me know what template you are using! However, I highly recommend looking at the playable and downloadable demo.

(This macro is free to use, free to copy for all commercial and non-commercial projects with no additional fees. Credit is appreciated!)

[izicodes]

Convert HTML to Image: A Step-by-Step Guide ✨

Do you want to turn some HTML code you've made that's on your website and have a way to convert it into an image for you to save?

Well, look no further! I too wanted to do the same thing but funny enough, there weren't any straightforward tutorials out there that could show you how! After hours of searching, I finally discovered the solution~!

This is an old tutorial I made 🐼

💛 Set your environment

Before we dive into the conversion process, I'll assume you already have your HTML code ready. What you want to learn is how to turn it into an image file. You should have a good grasp of HTML and JavaScript. For this tutorial, we'll use the following HTML code example:

We won't include the CSS code, as it doesn't affect this tutorial. The JavaScript file (script.js) at the bottom of the body element is where we'll add the functionality for the conversion.

Your page should resemble the following:

As you can see, the "Click me" button will handle the conversion. We aim to convert everything within the div.info-div into an image.

💛 Using the html2canvas JavaScript Library

The html2canvas library allows you to take screenshots of webpages and target specific elements on a screen. Here are the steps to include the library in your project:

The steps to put the library in your project:

Visit the html2canvas website for more information.

Copy the CDN link from here

and include it in a script tag in your project's head tag in the HTML file:

That's it for including the library on the HTML side. Now, let's move on to the JavaScript code.

💛 JavaScript Functionality

Here's the JavaScript code to handle the conversion:

In this code, I want to turn the whole div.info-div into an image, I put it into a variable in const div = document.querySelector(".info-div");.

I also put the button into a variable in const button = document.querySelector("button");

I added a click event listener to the button so when the user clicks the button, it will follow the code inside of the event listener!

You can find similar code like this in the documentation of the html2canvas library:

What is happening here is:

We add the div (or what the element we want to take an image of) into the html2canvas([element]).then((canvas)

Added the image file type url to a variable = const imageDataURL = canvas.toDataURL("image/png"); - You can replace the png to other image file types such as jpg, jpeg etc

Created an anchor/link tag, added the href attribute to imageDataURL

The download attribute is where we will give the default name to the image file, I added "dog.png"

Perform the click() function to the anchor tag so it starts to download the image we created

And that's it!

💛 The End

And that's it! You've successfully learned how to turn your HTML into an image. It's a great way to save and share your web content in a unique format.

If you have any questions or need further clarification, please comfortable to ask. Enjoy converting your HTML into images! 💖🐼

[juney-blues]

ever since i made THIS POST a lot of people have been asking for a tutorial, even though in pretty much all of the screenshots i included the specific part of inspect element showing exactly what i edited.

so buckle the fuck up I guess because the tumblr userbase want to find out how to make html pages unusable and who am I to deny you.

get ready for Baby's First HTML and CSS tutorial lmao

ok so first things first we need to go over BASIC HTML

html is made up of these things called "tags" which specify certain parts of the web page, such as

HEADERS (<h1> through <h6> in terms of importance)

PARAGRAPHS (<p>paragraph here</p>)

LINKS (<a href="linkhere"></a>)

BOLDED SECTIONS OF TEXT(<b>bold here</b>)

and a bunch of other stuff,

by default however, specifying all of this just gives us a plain white page with plain black text of varying sizes

that's of course, no fucking good, and sucks shit, so the arbiters of html decided to let us STYLE certain elements, by adding a STYLE parameter to the tag

this can change any number of elements about how things are formatted.

text colour, page colour, font, size, spacing between elements, text alignment, you name it? you can change it!

you might've noticed that, certain elements are nested in other elements

and that any changes that apply to one element, apply to everything included under that element!

how convenient!

anyway this method of styling things by adding a style=" " to their tags is called "in-line style"

i think because the "style" goes "in" the "line"

it's generally ALSO a pain in the ass to style an entire website like this and should be exclusively reserved for small changes that you only want to apply to specific parts of the page.

for any real change in style you want to create a <style> section in your page's header!

this can be used to make changes to how all elements of a type in your page are displayed

or even add new elements with whatever wacky styling you want that can be used with the <div> tag!

wow! isn't css just dandy!

and hell you can even use External CSS™ if you're making multiple pages and want them all to have a consistent theme, by pointing to a .CSS file (which is basically just a <style> header without the <style> tags lmao

ok this is all well and good and very interesting if, say, you're making your own website

*cough*neocities*cough*itsreallycoolandfree*cough*

but you came here because you want to FUCK UP A WEBSITE and make it look STUPID!!

so this is where the transform css property comes in~

you can read up on it HERE if you want the details but basically it allows you to apply mathematical transformations to any html element you want,

all of these fun bastards,

they can be really useful if you're doing some complicated stupid bullshit like me

OR for having fun >:)

if you'll remember, earlier i said that css properties apply to literally everything nested in an element,

and you MIGHT notice, that literally everything in pretty much all html files, is nested in an <html> tag

you can use style=" " or regular css on pretty much ANY html tag,

INCLUDING HTML!

ok ok that was a lot of buildup for something that i could've explained in one or two lines, but i gave you all this fundamental knowledge for a reason,

well, two reasons, go make a neocities

CHAPTER 2: THIS POST HAS CHAPTERS NOW

CSS KEY FRAMES BABYYYY

THESE FUCKERS DON'T WORK AS INLINE STYLING

I HAD TO TEACH YOU HOW CSS WORKED, TO GIVE YOU THE KNOWLEDGE YOU NEED, TO ANIMATE PAGES. TO MAKE THE FUCKERY COMPLETE!!!!

OKAY SO AGAIN READ UP ON THIS IF YOU WANT THE FULLEST POSSIBLE UNDERSTANDING

BUT WHAT KEYFRAMES ALLOW YOU TO DO, IS ANIMATE CSS PROPERTIES

and then make a class, which calls that animation...

and then assign that class. to your html tag.

and then vomit forever

we can do it in 3d too,

the only limit is your imagination... (and how many parameters you want to look up on w3schools and mozilla mdn web docs)

CHAPTER 3: APPLYING IN PRACTICE

ok now the fun thing about all of this, is you can apply it to your blog theme, literally right now

like literally RIGHT now

like step one, make sure you have a custom blog theme enabled in your settings, because that's turned off by default for some reason

step 2: edit theme

step 3: edit html:

step 4: apply knowledge in practice >:)

[iapislazuli]

would you be willing to share a neocities tutorial?

WELL basics i know of CSS/HTML (and i must stress this is BASICS, i am also a n00b) that would have saved me a LOT of headache is the code will have a <head> and <body> section

the <head> section will contain the CSS styling, and the <body> contains the actual content of the site. for example, to create the boxes containing text, this is a <style> tag within my <head> section, containing the CSS specifications for the default font color and size, as well as the box's size and border.

then, in the <body> section i can put <div id="box"> tag, telling the code "hey, this part of the CSS is what i want this to look like"

mines all super messy because i patchworked it together/wrote it from scratch and know nothing about html lol. last time i did anything like this was coding my deviantart page in 2014. but this was the biggest hurdle for me that was making me not understand what was going on

[transienturl]

You know what, I'll bother making this post. It's long overdue.

PSA: Please don't install uBlock Origin rules for Tumblr that use :nth-of-type(), and please remove or fix any you have installed. They can and will hide the wrong things. I'll show you a few alternatives below.

First, an example of how we get here. I've used the uBlock Origin element picker to try to hide the "Get a Domain" sidebar item:

With some different adjustments of the sliders, it gave me these two snippets, one of which targeted a whole bunch of sidebar items, and the other of which selected the right one. Great, right? Read on.

www.tumblr.com##li.g8SYn.IYrO9:nth-of-type(7) www.tumblr.com##.gM9qK > li.g8SYn.IYrO9

As you can see, these both target a particular kind of sidebar item via "li.g8SYn.IYrO9"—fine—and as you can probably guess, the second one counts them all up and hides the seventh it finds.

This is bad, because what it actually hides depends on exactly how many sidebar items there are! Users can "snooze" Tumblr Live, which will make an item appear or disappear, and users with/without Ad-Free subscriptions will have or not have another. I have seen many, many people accidentally hide their activity, messages, inbox, etc using someone else's rule that's supposed to hide Live. Worse, some rules intended for e.g. recommended post carousels that use nth-of-type translate to something like "hide item number three on the dashboard no matter what it is," which will lead to a seemingly random post on your dashboard disappearing!

This isn't a problem specific to Tumblr, of course—I personally think uBlock Origin should never autogenerate these rules—but Tumblr has a ton of elements that aren't in fixed positions, so I feel comfortable wording that PSA the way I did. On a very static site, those rules might be fine. Here they almost always aren't.

So how do we fix this? First of all, as a developer of XKit Rewritten (check out @addons!), I must suggest you check if it has a feature to do what you want. Plenty of times it won't, though, and if not, we want to make a rule that hides an element based on what it is, not where it is. Here are three ways to make a robust rule:

First, I'll right-click the element I want and use the inspect element tool in my browser's developer tools to look at the element I really want (Firefox and Chrome/Edge/Opera have different but overall similar interfaces for this):

The HTML looks, for reference, like this (Tumblr sucks at code blocks but I'll try):

<li class="IYrO9 g8SYn" title="Get a domain"> <a class="tDT48" href="/domains"> <div class="kn4U3"> <svg> <use href="#managed-icon__earth"></use> </svg> </div> <div class="a132D"> <span class="ZC1wz">Get a domain</span> <!-- other unimportant stuff removed--> </div> </a> </li>

What's something unique about this element, preferably about the outermost element, and preferably contained within the <angle brackets> (HTML tags)? In this case, we have it easy: title="Get a domain" is definitely unambiguous and fulfills all of those three. If you're very familiar with web design using CSS, you'll know how to target that; if you've vaguely heard of CSS, you may be able to look at a reference sheet of CSS selectors, see [attribute=value], and figure it out, and if neither is true, I'll spoil it for you and say that we just put it in square brackets in this case.

So—taking the rule uBlock Origin made, removing the :nth-of-type() and replacing it with our better selector—here's our first working, bug-free uBlock Origin rule:

##li.g8SYn.IYrO9[title="Get a domain"]

Okay, great. But what if we didn't have that attribute to target? What if our top-level element looks the same as the other ones? What if we want this rule to work if we change our Tumblr language to Spanish? Let's move on to :has().

:has() is a CSS selector (supported in uBlock Origin even in browsers where you can't use it for web development yet, i.e. Firefox), that lets you check the contents of an element for whatever is in the parentheses. Let's assume that Tumblr would never make two sidebar items with the same icon, and target that href="#managed-icon__earth" property:

##li.g8SYn.IYrO9:has([href="#managed-icon__earth"])

Yep, that works too!

Finally, what if we couldn't use either of those because we need to target the content of the page that's not contained within the <angle brackets>? We can take a look at the uBlock Origin documentation and find that it has something for that too: :has-text(). You can do very powerful things with this (e.g. you can sort of implement Blacklist entirely using uBlock Origin using something like article:has-text), but it doesn't perform well and can pretty easily be used incorrectly, so I'd suggest you avoid it when possible.

However, let's try using it here to target the "Get a domain" label text:

##li.g8SYn.IYrO9:has-text(Get a domain)

And that also works!

With these techniques, you should be able to target any specific thing you'd want to hide without using any fragile positional selectors. If you're going to share your uBlock Origin rules with others, please make use of this! If you're just using your rules for yourself, then hopefully I've given you enough information so that you can understand what a rule does and decide for yourself if it's worth bothering to fix (menu item order might not change that often, so maybe you're fine with certain rules being a bit prone to breakage; if your rule hides the first post in your timeline you really do need to fix that one!)

-

And, of course, a note for you web developers out there: :has() isn't natively supported in Firefox quite yet, so you can't really use it (I would not recommend using JQuery's simulated version—it's not quite the same). And :has-text() is just not a thing for CSS at all. Just use javascript at that point! Edit: No longer true in 2024; style away!

Final note: any rule with a random 5-character string like g8SYn will eventually break when Tumblr rebuilds its CSS map, though they haven't done that in ages. But when they do: no, it's not "Tumblr devs breaking our rules because they hate us." (Yes, I hear that sentiment a lot in contexts when it almost always makes zero sense.) If you're fairly experienced with CSS you can sometimes make Stylus/uBlock Origin rules that don't reference any, but it's usually convoluted and more trouble than it's worth.

[thegrayascendancy-if]

Hello, wanted to say I read and loved the demo. Very well done. I just had a few questions, would love to know what Twine Template you use, especially at the beginning. Where you have the character creator, I love that the box around your selection changes to say/match what you chose. Such as depending on what skin color I choose it changes to signify that. Would love to know if you would share how you did that. I look forward to future updates! Best of luck.

Thank you! 🤍

I'm using the default template for SugarCube, if I remember correctly. Glad that you liked the box effect, it was my solution to reducing the number of passages whilst still allowing the validation of user input in character creation.

I did it through a combination of HTML tags and SugarCube native macros. Technical stuff under the cut:

Here is an example for eye color:

<fieldset class="charbox"><legend id="chareyes" class="chartxt">$p.appearance.eyes</legend> <div class="charoptions">Your eyes are: <<link "hazel">><<set $p.appearance.eyes to "hazel">><<replace "#chareyes">>$p.appearance.eyes<</replace>><</link>> <<link "brown">><<set $p.appearance.eyes to "brown">><<replace "#chareyes">>$p.appearance.eyes<</replace>><</link>> [rest of the options removed for brevity]</div> </fieldset>

The fieldset and the legend HTML tags together form a single box, a so-called legend, which I declare per attribute such as name, skin color, etc. You need a fieldset to make legend work iirc, but legend is where that text is displayed and it is positioned on the box frame by default. Important here is to give a unique ID to the legend tag ("chareyes" in this case), as we are interested in manipulating the text shown in it depending on our box.

In the sample above, the options I present for the eye color are listed within the Twine <<link>> tags. For these links there is no target passage to go to. Instead, you can see it is coded to do two things upon clicking the respective option. One, setting a game variable to the selected color.

<<set $p.appearance.eyes to "brown">>

Two, triggering a replace command to change the value shown in the legend to the description of the selected eye color according to the variable we have set in the same line. This is the bit you are asking about:

<<replace "#chareyes">>$p.appearance.eyes<</replace>>

Replace triggers without changing passages, so this way you can adjust multiple variables on a single "page". You'd obviously need to adjust the corresponding CSS classes to make it look the desired way, but the mechanics are serviced with just this idea above.

Hope this helps!

[fearoffun]

hi there!! there isn’t a need to publish this ask I literally just am so curious if you had any resource or tutorial regarding your neocities! I’m sorry if this is so out of the blue but I saw your site and really adored the layout!! I’m specifically just wondering about the method you used for your blog posts - I’ve found some recommended ways to do it but i feel like yours is integrated really well imo :) also if you’re not comfortable answering or anything that’s totally fine lol pls don’t feel obligated. lastly your art is so gorg!!!

i'm finally going to answer this ask...!! it's going to be a very long read so i'll keep it all under this cut

i know you are specifically curious about the blog posts page but i figured this was a great time to thoroughly explain my website layout too since i had another person asking about it (i'll put that at the bottom though) :D

please bear with me btw because i... i have never made a tutorial like this before LOL

--

blog posts guide

1. scrollbox

i made a super low effort format for my blog entries. i honestly just wanted it to be a super simple scrollable box with all of my entries being in one general place. CSS to do this, i created an all encompassing <div class> that had the styling property of overflow.

fyi, i also added a <div class> within the scrollbox class that would handle the padding but TBH i'm not sure... i needed to make an entire class for that LOL REFERENCES - scroll box

2. date & time

HTML ok honestly i just used a <p> element and made it bold....

3. images (optional)

HTML i don't always attach an image to my entries but when i want to, i use this <div class> that sits below my date & time. i style it with an <img class> that i created and add an <alt text> too to make it more accessible!

CSS this is what the <img class> looks like. i like my images centered and on their own "line."

4. status

HTML again, another <div class> specifically made for the status. i just made the font size smaller to visually differentiate it from the actual entry itself.

5. blog entry text

HTML my blog entries are simply typed up between <p> tags and i use <br> to start a new line... it literally just looks like this LOL....

THAT'S ALL...>!!!!!! :)

--

website guide

1. general page layout

HTML in order to establish where i want all of my blog's content to lie, i created a <div class> specifically to store it all.

CSS the styling for it is pretty simple! just setting a max-width to limit the size of everything that will be in it and also centering the page with the margin.

2. sidebar

HTML my sidebar just comprises of a heading tag and navigation links.

CSS this is all personal taste aside from the fixed position

REFERENCES - fixed sidebar - responsive sidebar

3. main content

HTML because everything is stored in the <div class="content">, the sidebar and the page contents are limited to the constraints of the it.

that is all pt. 2...... bless <3

[niceinchnails]

thinking about making a site when im older similar to rentry and txties but more customizable and you can make static html pages. no seperate css/style tag (eg <style>body{color:blue}</style>) but you can include the style in the divs within the html itself (<div style="color:blue">). Unless there is already a site like that

[tippenfunkaport]

I’m not sure if this is a good account to ask this but I’m trying to figure out how to get images to work on AO3. It’s some big complicated thing where you need to put the image on an image hosting site and link the image URL, but I’m not sure which one would work?

Legit AO3 basically just gives a list like “don’t use these ones” but not a list of reliable sites one could use.

I just found your account going through AO3 tags on here but do you happen to know any good sites?

That’s all, sorry for bothering you <3 have a good day/night :)

So you need to host the image somewhere. That's what those recommendations are. And one of those places is Tumblr itself so that is what I usually use because it's just easier and I am lazy (plus I'm usually going to post the image there anyway so two birds, one stone). So I make the post for the fic with the image on tumblr, save it as a draft, grab the image link, put it into the fic, and then post the Tumblr post.

But what you probably want is the actual HTML code which is just...

<img src="IMAGE LINK GOES HERE">

And that is literally all you need. Just switch to HTML view on the fic on AO3, put that into the test where you want it, switch back to the preview version and you should be good to go.

Now, if you want to get fancy you can do stuff like specify the width (add "width="75%" or whatever % or pixel size you want after image in that code above) or center it (put a div or p tag around the image code like <p align="center">[image code from above]</p> or just the same thing with div replacing the p) or even add a border (add border="2" after "img") or whatever thickness you wish but, at the most basic, the image code is all you need.

Fun fact! This is also how you can insert GIFs in your author notes and comments!

Does this help?

[gummiewerm]

you probably get this all the time but your neocities site is so amazing, do you have any advice/resources for people who are new to html/css or just coding in general, i eventually really want to achieve the same sort of perfectly cluttered vibes but I don't know where to start 😵‍💫 your site is seriously impressive!

aw thank you!!!

main html/css advice would be if you don't know how to do something/something breaks, search it on the internet! w3 schools and stack exchange are your best friends. also like everyone on neocities im gonna point you towards sadgrl, who has a ton of resources for this kind of stuff. my in general coding advice would be to start with a relatively easy language, but imo html is a PERFECT starting point so you're already on the right track.

AS FOR WEBSITE SPECIFIC ADVICE.... I have a few things :)

1. GO INTO IT KNOWING WHAT YOU WANT TO MAKE AND HOW YOU WANT IT TO LOOK!! this saves SO much time and heartache. I spent maybe a good 4 months debating what I wanted my site to look like before I actually started coding, and I'm glad I did. which brings me to my next point..

2. draw out a thumbnail of what you want your site to look like! try drawing a few different ideas too, it'll save you time if you draw them instead of code them in.

[Image description: A pencil and paper thumbnail for the site on the left, and the finished site on the right. The overall layout is the same for both.]

3. i highly recommend learning how to use iframes if you plan on doing a container-based layout! this is especially useful for graphic heavy sites like mine since it helps cut down on loading times

4. position: absolute and left:...px/top:...px are your besties. this positions a div wherever you want on the page (relative to the dimensions of whatever div its in) and keeps it there. great for positioning images like stickers!

5. this might just be a me thing but REUSE YOUR CSS CLASSES AS MUCH AS POSSIBLE AND CUSTOMIZE THEM WITH HTML... if it's like 1-3 properties difference I don't like to make a new class because after a while the stylesheet gets rather lengthy. my stylesheet on odditycommoddity is so fucking messy because I didn't know i could do this starting out lmao

6. last one and most important imo.... USE AND EXTERNAL CODE EDITOR!!!!!! WHY DOES EVERYONE USE THE NEOCITIES EDITOR IT SUCKS ASS.. check out BRACKETS, it's open source and free and very sexy. if you're on a chrome book check out PHEONIX, which is web-based and by the same people. using an external editor makes it easier to jump between files, and it keeps your site from updating while it's half baked.

in terms of stylization advice/"How To Make Shit Cluttered", treat your web page like a scrapbook! hoard transparent pngs! put them all over your site like stickers! use patterns for the backgrounds instead of solid colors! whenever I make a new page on the site, i think of it as "digital scrapbooking" since it's basically the same thing as doing a physical collage.

some good resources for that would be gifcities, transparentstickers, other people's graphics pages, but you can also find some good stuff in just the "transparent" tag here on Tumblr. the only thing is I would advise against taking an artist's transparents on here + follow usage rules for transparents if theyre there, obviously regular nettiquette applies.

uhh that’s all i can really think of! have fun and good luck webmastering!!

[Image description: A divider gif of a worm wriggling across the screen. End ID]

[streetlights-was-taken]

Hi, sorry to interrupt, but I was looking at your fics, which are really good, and I came across something that I see in a lot of other fanfics and I don't know how to do it. How did you manage to set it indented?

hello! thank you for reading my fics, it means a lot!

I need to know what you mean by "indented." do you mean something like this summary?

tumblr editor calls this "indented" for some reason, but what it's really called are "blockquotes." you don't need fancy css for this since it's available with just html. you can code it using the blockquote tag.

on the other hand, maybe you mean indenting as in adding spacing like in this chat?

in this case, then yes you do need to add css to your workskin. here are the relevant parts of the code.

so the important things here are:

put your elements inside a container with the .chat class (or any other class name of your choosing)

make sure .chat has margin set to auto and width set to less than 100%.

I hope I was able to answer your question! I'm not sure if there are other examples of indenting that I used in fics; if you meant something else, just let me know so I can answer the question properly! 🙇🏻

the rest of my workskin code is always available to use as a reference (copy paste if you want): AO3 demo, html code, css code.

something extra under the cut:

bonus:

the above is a modified version of what I'm doing. I actually combined both methods in one, but that gets a little bit more complicated and it's probably more than what you need. I'll add the full code here under the cut if anyone's interested.

to note:

notice that I replaced the div containers with blockquote in the html. however, with workskins turned on, you won't see it! that's because I'm hiding it specifically when workskin is turned on.

but if someone reads my fic with workskins turned off (the "hide creator's style" button AO3 provides at the top of the fic), then none of my styling will show up. I still want to make the grouping of the chat text and timestamp clear though, so I put them in blockquotes for this purpose.

here's how it looks like with and without workskins. I want to make sure that my fics are readable even if someone turns off workskins, or if they download my fic as an epub/pdf (which IIRC removes all the css styling as well).

[izicodes]

hi. im learning html by myself and i was wondering if it was necessary to know every tag? like do i need to dedicate time to learn as many tags as possible or are the basic ones enough?

Hiya!! It's great to hear that you're learning HTML on your own!! Props to you! I hope it's going well for you!

To answer your question, it's not necessary to know every single HTML tag. In fact, even experienced web developers don't necessarily know every single tag, as there are many that are rarely used - I know for sure that the other developers on my team don't know them all and would have to search it to see if it's a real tag or not 😅

However, it's important to have a good understanding of the basic HTML tags and their attributes, as these are the building blocks of any web page. Some of the most important tags to learn include:

html, head

title, meta

h1 h6

p

a

img, figure, figurecaption

ul , ol, li

div, span, section, main, article, footer, nav

table, tr, td, thead, tbody, tfoot

form, input, textarea, select

Note >> Some are semantic tags, tags that provide meaning to the content they contain. They describe the purpose or role of the content, rather than just its appearance. Helps with accessibility for those who might have difficulty navigating the web.

Here is a link to an HTML5 Cheat book that includes a page about the most common HTML tags: 'A Developer's Paradise: The Ultimate HTML5 Cheat Sheet' - [LINK]

But I hope this helps! Good luck and don't worry - the more you code in HTML and with the tags, the more they become second nature!! Repeating a process over and over again helps with memory! 👏🏾💗

[intercal]

ChatGPT excels at making small one-off programming examples. if I need some random idea put into code, I can just ask it in plain english something like "write some example HTML that will divide the screen in half horizontally with each half in two <div> tags" and it does it perfectly on the first try. I don't have to crawl through a stackoverflow thread that was written in 2011 that half-answers my question, I can get chatgpt to give me an answer. And if the answer is wrong, I can just make it generate another one or tell it how it's wrong and it's usually very good at fixing itself

[scenegraph]

look out, everyone, he's transparent!

...i still cannot find a straight answer from google as to whether you can put <div> html tags into the ao3s or not. either the names/epithets need to be baked into the image or they don't! it is a mystery. tragically, it is also wednesday workday, so i am not about to find out.