How to Dreamwidth: Coding

So if you guys are like me, it's been a while since you really had to use HTML. DW has a rich text editor, but for the love of God don't use it, it'll bloat your post with like 8738527323 extra lines of nonsense and if you try and post a fic that way half the time it kicks you over the character limit, and it spaces the linebreaks out way too wide, and it's just a bad look. Instead, let's get back up on this bicycle we surely still remember how to ride! We just need a refresher course!

I figure everybody remembers the basics: <i>for italics</i>; <b>for bold</b>; <u>for underline</u>. These stack, so you can do bold, italic, underlined text. Other fun text-modifying tags are <sup> and <sub>, which create ^superscript and _subscript. There's also <s>strikeout</s> text, which ~~looks like this~~, and you can also change the size of your text by utilizing <big>, <small>, or <font size=#>.

Some other cool stuff you can do with your text: <h1>headings!</h1> These come in a variety of sizes!

Extra Large

Large

Medium

Small

Extra Small

I mean this might as well be regular text at this point.

These are useful for breaking stuff into sections, and can be further modified using alignment tags, which we'll get to shortly. One of my personal favorite things has always been the scrolling <marquee> tag.
Which does this! How fun is that??

So let's combine what we've learned and see what sort of monstrosity we can come up with. [Vader voice]

^NOOOOOOOOOOOOO_OOOOOOOOOOOOO!!!!

You can also change the color of your text, using the <font color=> tag and a color name or hex code. There are also some generators floating around that will do fancy rainbow gradients for you and generate text you can paste. You can use the <mark> tag to highlight stuff, but only in yellow, so far as I know.

You'll also want to familiarize yourself with the <cut> function, which is essentially a Tumblr Readmore. You can place a cut tag anywhere in your document to cut everything after it to not show on the front page, and you can create cut titles as well, <cut text="clever cut text goes here">. Additionally, you can create multiple cuts within your post by closing each one (</cut>) and then creating a new one. To link to specific cut points, you simply copy the main entry URL and add #cutid1 or whatever applicable cut number directly afterward. You can see the difference if you access this entry versus this entry after the cut.

Another useful tag is the <hr> tag, which creates a divider line, as shown below.

Alignment

All HTML is inherently lawful evil, however you can tweak the alignment of your text as necessary to create the layout and visual appearance you prefer. The easiest way to do this, I find, is by using the basic <center> tag, to center text, and a <div> tag for everything else.

This text is aligned to the right. You can do this by surrounding your text with a <div align=right> tag.
Aligning left doesn't do anything, as that is the default.

This text is justified. No, I don't mean it exists for a good and valid reason. Justified text is like the text in a book: it creates a nice, straight margin on both sides, instead of the usual jagged edge on the right side. It can be very aesthetically pleasing, but for some reason it's frowned upon in certain circles, apparently it makes you look pretentious. You, too, can look pretentious by surrounding your text with a <div align=justify> tag!

Indentation is another thing you can utilize, but that's a bit more advanced, so if you want to indent something to make it stand out, I recommend using the <blockquote> tag. Useful for quoting, citation, flashbacks, and many other things!

There are lots of other things you can do using the <div> tag, but these are more advanced functions, so we'll save those for another time if you like.

Embedding

Embedding links and images are crucial tools, but they are deceptively simple!

To hotlink, surround the text you want highlighted as a link with a <a href=> tag. This hotlinks to Google. Make sure you close the tag with only </a>, you don't have to include the href part in the closure tag. If you'd like the link to open in a new window, you can modify the tag to read <a href=URL taget="blank">. Clicking this will open a new window!

To embed an image, use the <img src=> tag. Images can also be resized, as well as centered or aligned. The image below is coded <img src=URL width=350 align="right">.

Be warned that changing the alignment of an image can often make the text around it wrap weird, as this demonstrates, so I recommend sticking to just using <center> before an image tag until you get the hang of more advanced alignment features. The embedded image includes a tag for a margin so the words don't cram up against it, but I don't recommend fussing with that until you are confident in your more basic skills, as it has been known to trigger homicidal tendencies when formatting doesn't work as expected.

Dreamwidth also has an uploader service where you can host your images if you prefer not to use Imgur or Photobucket. Dear God, please don't use Photobucket. You can read about using this service here. It will generate a thumbnail for you and everything, which is pretty neat!

There are some more advanced things you can do with HTML as well, but unless you're writing up some super fancy manifesto or something, it's really not necessary to know all of it. If you're interested in reading more about the fun things you can do with HTML, though, W3Docs has a ton of info that is easy to navigate. You can also do tables on DW, but they're... more complicated and can be very frustrating if you're unfamiliar with how easily they um. Break. So if we all pass HTML 101, I can put up some table tutorials to spice things up, but for now I don't want us to get ahead of ourselves. ♥ Happy journaling!

Dreamwidth for Noobs Part 3