Element: anything from the start tag to the end tag.
Tag: a piece of markup language that is used to indicate the beginning and end of an html element in an html document.
Example:
<p> your text here </p>
<header><;/header> - Represents a container for introductory content or a set of navigation links. Usually contains one or more heading elements (<h1> - <h6>), logo or icon, or authorship information.
<;h#></h#> - header element. The higher the number, the greater the importance. Only use one <h1> element per page. There can only be six. Main topic on a web page. When visitors to your website see the h1's, it draws attention as it stands out the most on the page as it generally appears as a larger font size and in bold.
<p></p> - paragraph. used to create a paragraph of text on websites. Always starts on a new line. A lot of browsers add some white space (a margin) before and after a paragraph.
<;!-- ____: _______ --> - comment. Used to notate code with text that will not appear on the website/browser display. It allows you to make code inactive. You can use them to explain your code, which can help you when you edit the source code at a later date.
<main></main> - an element that identifies a content area. The main element. Specifies the main content of a document. This type of element/tag makes your html easier to read and helps with Sear Engine Optimization and accessibility. Should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms. When you put things inside the main element, this is called nesting. Nesting elements should be placed two spaces further to the right from the element they are nested in. This spacing is called indentation and is used to make html easier to read.
Example:
<main>
<h1>Tumblr Meme App</h1>
<h2>Tumblr Photos</h2>
<!-- TODO: Add link to Tumblr photos -->
<;p>See more Tumblr memes in our gallery</p>
</main>
<img> - used to images to your website. This element has an opening tag without a closing tag. A tag for an element without a closing tag is called a self-closing tag.
I have read a lot of fanfic. A lot of that fanfic was on my phone. Most images posted on AO3 don’t scale down so that you can see the whole picture on your phone screen: instead, you see the leftmost edge of the picture and have to scroll horizontally (and sometimes vertically, too) to see the whole thing. If it’s downloaded as a PDF, you’ll the huge picture as normal-sized with a narrow column of text underneath its leftmost edge. But the whole thing probably looks normal on a computer screen, so the poster may not even realize that not everyone is seeing it right.
I’m going to tell you, as a potential poster of images (with or without fics) on AO3, how to avoid this pitfall. Say you’re a writer and some lovely artist made you art, either as part of a Big Bang or a commission or just because they loved your fic THAT MUCH. You want to show it off the best you can, right?
The solution is simple. Are you using the rich text button to add the image? Enter the percent of your screen you want the image to cover in the width box, as a percent. Try “75%” to start with, and adjust as necessary for your particular image.
If you want to go into the html:
HTML
...isn’t much harder. If you go to the html tab, your image html will look something like < img src=“LINKHERE” alt=“DESCRIPTION” width=“700″ height=“430″ / > . There may be other stuff around it as well, but that’s the basic image html. You may or may not see alt, width, or height: that’s okay, you can add them in or take them out, as you like. You should put a few words describing the image into the alt=“DESCRIPTION HERE” bit, in case the image won’t load, or for vision-impaired people using a screenreader.
Now, the part you really want is the width=“XXX” bit. If there’s no percent sign, the number represents pixels, and it will not scale to different sized screens. Replace whatever’s in those quotes with the percent of the screen you want your image to take up. I use 75% a lot, but 100% or 43% are valid choices, depending exactly how you want the image to look. Try putting in a value and then saving, and looking at it on multiple screens, if you can. You can add width=“75%” into your image html, if there’s not a width term already there.
You’ll also want to take out the height=“XXX” bit entirely, probably. Only if you actually want your image squished from its original dimensions do you need this, and you should change it to a percentage, too, in that case.
Speaking of original dimensions, there is no reason you need to be uploading an enormous image in the first place, and eat up your readers’ bandwidth. Resize your image down to ~800px, which is about the widest they will appear on AO3 anyway, before you try to upload or embed them.
At least for my iPhone, I can always zoom in on a picture, but I can’t zoom out on one that’s bigger than the text column. This is a weird quirk of the AO3 site, and I don’t know if it’s the same on Android or not: maybe someone will comment to say.
Work Skins:
The one flaw of the above method is that you often have to compromise between the perfect size for small screens and what’s perfect for large screens, and on very large screens, images could get blown up so that they are way too big. If you’re willing to use a work skin, you can have the best of both worlds: a statically sized image that only starts to shrink when it’s about to overflow a smaller screen.
Create a new Work Skin, name it, and copy/paste the following into it: #workskin img { display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; } (Thanks, @chiisana-sukima!) Then save, and apply your new work skin to your story with images: in New Work/Edit Work, look for "Select Work Skin” (at the bottom of the Associations box, right above the Privacy box and the box the actual text of your work goes in). The above code will both center your images and prevent them from overflowing, so if you don’t want them centered, strip out the ‘margin’ terms.
Caveat: this is great for all sizes of screens, but work skins won’t affect downloads like PDFs, or anyone who has work skins toggled off. The good news is that if you have properly resized your image to ~800px so that it’s not enormous, PDFs will be minimally affected.
There’s another work skin method if you want to specify in pixels how big your image should be instead of just using the original size: this AO3 tutorial shows you how to set that up!
ETA: @museaway has a great video guide to setting up skins here!
Creating a site skin for all the fics you read: You can put the same code you put in the work skin into a sitewide skin, so that whenever you are logged in, you can read on your mobile device or any other screen without having images overflow the border.
Long story short, use percentages for width. Really, that one simple thing will make a huge difference. Your mobile readers will thank you!
hi just a quick reminder that i made a new sideblog with some amazing editors and it's about boy groups!! here it is if you want to follow (do it or i'll feed you all to daehyun) anddddd we're accepting requests!!! so please go on if you have any ;u; you can ask for whatever you want as long as it has to do with boy groups ok
