potofsoup

[DW for tumblrites masterpost]

Here are 3 places to go to start posting:
- when you sign in, the home page has a quick posting box
- on any page, go to the top bar and there is a "post" button
- You can go to the "Create" Menu and select "Post Entry"

Look at the stuff at the top above the box:

- You can choose whether to post to your blog, or to one of the communities that you've "Joined"
- You can select icons, or backdate (or future-date) things.
- On the right-hand side, there's 3 links to help you with HTML!

The stuff below the posting box allow you to fine-tune your settings and tags.

In the posting box, they auto-format new lines (whenever you hit "Enter"), as well as any links that start with http. (So dreamwidth.org doesn't get magically linked, but http://dreamwidth.org does.)

Quick Start Guide

To create the little username linky, you do <user name="username">

To make a cut, you put this at where you want to cut to start: <cut text="teaser words for the cut">
And you put this when you want to end the cut: </cut>

To make a link: <a href="website link">link text for clicking</a>

To post an small image: <img src="image link">

To post an big image: <img src="image link" width="100%">

Finally, before I launch into some HTML basics, I want to point out the Rich Text Posting:

Basically, if all of this html stuff scares you, you can literally use tumblr as a way to draft your post, then copy the whole shebang and paste it into the Rich Text view. It'll come out looking a tad funky, but it *works*.

Anyways, onto HTML basics:

Note: these are the quick-and-dirty html stuff. We're pretending that CSS doesn't exist, and that half of these tags aren't "deprecated" -- hey, it works, right?

What are HTML tags?
Basically, the browser is dumb and needs really explicit instructions. How do you give those instructions? You put them in these little <> brackets. The <> brackets tell the browser that there's some special instructions inside that it should start doing. To stop the browser from doing it, you add another <> bracket, this time with a / in it to mean "stop".

Here's an example:
Usually when typing, I do *bold* with the stars. But in HTML, I do bold like this: bold. Remember: "b" means bold, and "/" means stop. So, translated, it's saying: "bold!" and then later, "stop bold!"
These tags can be nested, so you can have something that's bold, underline, and italics: blah blah, which looks like this: blah blah. Notice how each "start doing this" tag has to have its own "stop doing this" tag.

Okay, so here are some basic tags for styling words:

b = bold
i = italic
u = underline
s = ~~strikethrough~~
small = make font smaller
big = make font bigger
h1 = make this a level 1 (giant) heading (I'm not showing these because it'd mess with the paragraph)
h3 = make this a level 3 (medium) heading

(I put the whole thing into a <blockquote> tag, which does that indenting.)

But wait! Images and Links are also tags!
So tags can also have additional attributes -- basically more instructions for the browser. For example, here is an image tag: <img>. By itself it doesn't do anything, because the browser only knows that there is an image there, but ... Where is the image from? How big is it? The browser's like ... ¯\_(ツ)_/¯

So you gotta tell the browser these things by adding attributes in this format:
<img src="http://website.com/image.jpg">
src is short for "source", and you have to have the equal sign *and* the quotes, because the browser is dumb.

And you can keep adding attributes, so an image tag might look like this:
<img src="http://website.com/image.jpg">
<img src="http://website.com/image.jpg" width="50"> (width is 50 pixels -- it automatically adjusts the height for you)
<img src="http://website.com/image.jpg" width="30%"> (width is a % of the area that it's in, so it resizes as you resize the browser)

Here's how these images look using the little subscribe button image:

A similar set of attributes go with the link tag. The link tag is "a", short for "anchor".

So:
href = http reference = the link URL, or where it goes when clicked.
name = name of the anchor, basically a way to create in-page locations

The fastest way to do a link is:
<a href="http://google.com">LINKY</a>. That looks like this: LINKY.

Note that I closed the anchor tag at the end -- if you don't, everything becomes a link.

Also, remember that tags can be nested! So you can create a bold, italic, underlined link. Or an image that is a link! :)

DW-specific tags: the CUT and the USER NAME
Finally, I want to go into a little more detail about the DW-specific tags.

The <user> tag can take the "name" and the site attribute:

<user name="potofsoup"> becomes

potofsoup

<user name="potofsoup2" site="tumblr"> becomes

potofsoup2
(remember that you click the name to go to their blog, click the little person icon to go to the profile, and hover over the little person icon for a menu of helpful links)

The <cut> tag has the optional attribute of "text", which allows you to change whatever you want the cut tag to say. REMEMBER TO CLOSE THE CUT TAG. That way, a post can have multiple cuts:
here is a regular cut
you make this with: <cut text="this cut has specialized text">

A few things to note about cut tags:
- If you click on the little triangle next to the cut link, it opens it up in-page. If you click on the link itself, you leave the reading page.
- The blog post direct link doesn't show any cut tags
- The link text you put in your cut tag doesn't actually show up in your post. So often I do this: <cut tag="Read this:">Read this: so that if someone is reading the post directly, they won't be confused by the sudden topic change.