HomeLatest ThreadsGreatest ThreadsForums & GroupsMy SubscriptionsMy Posts
DU Home » Latest Threads » Forums & Groups » Main » Welcome & Help (Forum) » Unofficial DU3 Basic HTML...

Sun May 27, 2012, 10:22 AM

Unofficial DU3 Basic HTML Reference Lookup Table

Last edited Tue Oct 22, 2013, 05:48 PM - Edit history (2)

This discussion thread is pinned.
Unofficial DU3 Basic HTML Reference Lookup Table

Special Tags
HREF link with text display
[link:URL|Text]
URL should include the "http://".
Example: [link:http://www.democraticunderground.com|DU3]
Text Formatting
Bold
[b]Text[/b]
Italic
[i]Text[/i]
Underline
[u]Text[/u]
Strikethrough
[strike]Text[/strike]
Non-breaking space
 
Line break
[br /]
Centering (in a post)
[center]Text[/center]
Subscript
[sub]Text[/sub]
Superscript
[sup]Text[/sup]
Highlighting
[div style="display:inline; background-color:#FFFF66;"]Text[/div]
Blockquotes and Post Formatting
Create a styled, indented blockquote
(useful for posting excerpts from articles)
[div class="excerpt"]Text[/div]
Create an indented blockquote
(without color background)
[blockquote]Text[/blockquote]
Horizontal Line
[hr]
Font Tag
Font
[font color="color" size="size" face="face"]Text[/font]
Links, Images, and Videos
Hyperlink
No tags needed - just type the URL starting with http://
Images
No tags needed - just type the URL starting with http://
Images must be in gif, jpeg, or png format
Video Embedding
(YouTube and Vimeo only)
No tags needed - just type the URL starting with http://
Examples:
http://www.youtube.com/watch?v=VyqzPu5pX6U
http://youtu.be/VyqzPu5pX6U
http://vimeo.com/8947397
Formatted List
Unordered Lists with <li>
[ul]
[li]
[li]
...
[/ul]
Ordered Lists with <ol>
[ol]
[li]
[li]
...
[/ol]
Tables
Sorry, tables are not allowed

Suggested permalink to this post:
http://www.democraticunderground.com/?com=view_post&forum=1256&pid=1674#html_lookup_table

46 replies, 15897 views

Reply to this thread

Back to top Alert abuse

Always highlight: 10 newest replies | Replies posted after I mark a forum
Replies to this discussion thread
Arrow 46 replies Author Time Post
Reply Unofficial DU3 Basic HTML Reference Lookup Table (Original post)
Make7 May 2012 OP
rocktivity May 2012 #1
Make7 May 2012 #3
muriel_volestrangler May 2012 #4
Make7 Jun 2012 #6
JustanAngel Sep 2013 #36
maxcopper Jun 2013 #31
JustanAngel Sep 2013 #35
Scuba May 2012 #2
RainDog May 2012 #5
Fortinbras Armstrong Sep 2013 #33
RainDog Sep 2013 #34
Ohio Joe Jun 2012 #7
Lugnut Jun 2012 #8
Lookz Jun 2012 #9
Egalitarian Thug Dec 2012 #10
Make7 Dec 2012 #11
annabanana Dec 2012 #12
Make7 Mar 2013 #13
muriel_volestrangler Mar 2013 #15
Make7 Mar 2013 #16
Agschmid Mar 2013 #14
Make7 Mar 2013 #17
Make7 Apr 2013 #18
lumberjack_jeff Apr 2013 #26
Make7 Apr 2013 #28
lumberjack_jeff Apr 2013 #29
Ptah Apr 2013 #19
RainDog Apr 2013 #20
Make7 Apr 2013 #21
RainDog Apr 2013 #22
Make7 Apr 2013 #23
petronius Apr 2013 #24
Make7 Apr 2013 #25
petronius Apr 2013 #27
TexasTowelie May 2013 #30
params193 Aug 2013 #32
Name removed Sep 2013 #37
Name removed Nov 2013 #38
RainDog Jan 2014 #39
RainDog Jan 2014 #40
Make7 Jan 2014 #41
RainDog Jan 2014 #42
Make7 Jan 2014 #43
RainDog Jan 24 #44
Make7 Jan 25 #45
Paladin Mar 18 #46

Response to Make7 (Original post)

Sun May 27, 2012, 10:27 AM

1. I never thought I'd miss the marquee

Last edited Sat Apr 5, 2014, 11:28 PM - Edit history (4)

Anyhoo, here's how to link to a YouTube page: replace the "watch?v=" with "v".

https://www.youtube.com/v/VyqzPu5pX6U



rocktivity

Reply to this post

Back to top Alert abuse Link here Permalink


Response to rocktivity (Reply #1)

Sun May 27, 2012, 10:53 AM

3. Linking to YouTube or Vimeo without embedding.

Last edited Thu Sep 5, 2013, 05:59 PM - Edit history (1)

YouTube changed their URL handling - need to use html entity instead of URL encode character

To post a link to a video on YouTube without embedding it replace the '?' with '&#x3F;' (its HTML entity):

http://www.youtube.com/watch?v=VyqzPu5pX6U

http://www.youtube.com/watch&#x3F;v=VyqzPu5pX6U


This is also possible with videos on Vimeo by adding a '%3' before the video's number:

http://vimeo.com/8947397

http://vimeo.com/%38947397

This works by creating a URL encode character of the first number of the video's id.

I don't think there is a solution for the marquee tag on DU3 (thank goodness!).

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Reply #3)

Sun May 27, 2012, 01:40 PM

4. How to link to YouTube giving a start time

You can't, as far as I can tell, do this and get it to embed on DU, but this allows you to specify the point at which YouTube starts showing the video (useful for a particular point from a long one. To start at 1 minute 35 seconds:

http://www.youtube.com/watch?t=1m35s&v=VyqzPu5pX6U

The "t=XmYs" must come before the "v="; if it comes after, DU embeds the video but starts at the beginning.

Reply to this post

Back to top Alert abuse Link here Permalink


Response to muriel_volestrangler (Reply #4)

Fri Jun 1, 2012, 03:49 AM

6. There doesn't seem to be a way to embed while adding parameters.

Last edited Thu Sep 5, 2013, 06:24 PM - Edit history (3)

Which is unfortunate since there are quite a few useful parameters one can add to embedded YouTube videos. Here is a page on google that outlines them:


I could not seem to find any information on the parameters available in normal YouTube links. However, since we can't embed a video with extra parameters anyway, by using a different link format that goes to https://www.youtube.com we can use the embedded player parameters. As an example I am going to use the related, start, end, autoplay, autohide controls, and display fullscreen button parameters in a link:


It will only work with https links in that format, it won't work as intended if the link is a regular http address. As luck would have it, DU3 seems to not like https links unless they are in a [link] tag. So this whole thing is perhaps more effort than it is worth - but it may come in handy for a long video where only the relevant portion could be shown by specifying start and end points.

Adding a different link format that works better with the HTML5 player. Same parameters as above just using the embed format to unsecure YouTube site:

http://www.youtube.com/embed/H66LG8k5hS8?rel=0&start=41&end=64&autoplay=1&autohide=1&fs=1

Unfortunately the DU3 software will try to embed that, I used an html entity for the last forward slash in the URL:

http://www.youtube.com/embed&#x2F;H66LG8k5hS8?rel=0&start=41&end=64&autoplay=1&autohide=1&fs=1

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Reply #6)

Thu Sep 5, 2013, 05:06 AM

36. Did you take a class?

Or is this your major? IT Tech? OK, some of it looks a little more complicated.

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Reply #3)

Fri Jun 28, 2013, 06:47 AM

31. welcome & Help

Good to read

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Reply #3)

Thu Sep 5, 2013, 05:02 AM

35. Wow!

Where have you been all my life? No one ever told me this...but it is so simple. Thanks so much!!

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Original post)

Sun May 27, 2012, 10:28 AM

2. Bookmarked. Thank you.

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Original post)

Mon May 28, 2012, 03:53 AM

5. k&r n/t

Reply to this post

Back to top Alert abuse Link here Permalink


Response to RainDog (Reply #5)

Tue Sep 3, 2013, 08:48 PM

33. What does K&R mean?

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Fortinbras Armstrong (Reply #33)

Wed Sep 4, 2013, 12:24 AM

34. kick and recommend

n/t means no text here.

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Original post)

Fri Jun 1, 2012, 11:23 AM

7. Excellent - This should get pinned - nt

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Ohio Joe (Reply #7)

Sun Jun 3, 2012, 01:40 AM

8. Yeah, it should be pinned.

This is good info that should be readily available.

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Original post)

Wed Jun 6, 2012, 08:16 PM

9. Was looking for this

 

+1 for pinning this

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Original post)

Thu Dec 13, 2012, 01:55 PM

10. Would you expand this to include symbols and similar? n/t

 

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Egalitarian Thug (Reply #10)

Thu Dec 20, 2012, 09:06 PM

11. I'm not sure precisely what you mean by symbols.

Most types of symbols that can be used here should be fairly easy to look up via a web search. I've posted the link to the w3schools standard html entity list numerous times and I recall MineralMan doing a post with accented vowels and similar language characters. There are additional pages at w3schools with those and more. If you mean something other than that, please clarify.

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Original post)

Sat Dec 22, 2012, 01:49 PM

12. Mmmph.. Thanks.(Bookmarked) I lost my old

link to this from before.

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Original post)

Sun Mar 10, 2013, 10:53 AM

13. The Meta version of this thread (which came first) at archive.org:

Last edited Sun Mar 10, 2013, 11:27 AM - Edit history (1)

http://web.archive.org/web/20120419091647/http://www.democraticunderground.com/124025017

Perhaps some of the replies in that version may also be useful (e.g. imitating the [pre] tag, issues with code in signatures).

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Reply #13)

Wed Mar 13, 2013, 10:06 PM

15. You're our saviour! I thought that had been lost, since you had to be logged in

to see Meta (or was that just in its latter days?), so that it wouldn't be archived.

Reply to this post

Back to top Alert abuse Link here Permalink


Response to muriel_volestrangler (Reply #15)

Thu Mar 14, 2013, 04:04 PM

16. Meta was viewable to the public for about half a year or so.

Some of the Meta forum (up through May 2012) is archived over there - after that it tries (and fails) to send you to a log in screen.

I remember there being another sub-thread in the Meta HTML Reference thread - but someone else provided the answer before I saw the question and now I can't recall what it was about (font sizes? maybe). There may have been more, but I thought the signature stuff and the [pre] code was worth a link.

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Original post)

Tue Mar 12, 2013, 12:44 PM

14. Kicked to the top! Very helpful. n/t

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Original post)

Thu Mar 14, 2013, 04:09 PM

17. Problems with links and the [link: | ] tag? What to do to fix them.

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Original post)

Thu Apr 4, 2013, 07:02 PM

18. Bored with DU's plain gray excerpt boxes?

Here's one that can be useful for quoting a whole DU post with a title or a DU Mail:

TITLE GOES HERE
[div class="excerpt" style="background-color:#dcdcdc; padding-bottom:5px; border:1px solid #bfbfbf; border-bottom:none; border-radius:0.4615em 0.4615em 0em 0em; box-shadow:3px 3px 3px #999999;"][b]TITLE GOES HERE[/b][/div][div class="excerpt" style="background-color:#f0f0f0; border:1px solid #bfbfbf; border-top:none; border-radius:0em 0em 0.4615em 0.4615em; box-shadow:3px 3px 3px #999999;"]MESSAGE GOES HERE[/div]


And this is what I'm using in my user style sheet (everyone's excerpts look like this in my browser):

[div class="excerpt" style="margin-left:1em; border:1px solid #bfbfbf; border-radius:0.4615em; box-shadow:3px 3px 3px #999999;"][/div]


And I often use this in my own posts as a double check that my excerpt code is actually doing something (i.e. slightly different than my user style sheet excerpt code):

[div class="excerpt" style="margin-left:1em; border:1px solid #bfbfbf; border-radius:0.4615em; box-shadow:-1px -1px 3px #999999 inset;"][/div]


Obviously there are too many possibilities for me to list what you can do by adding a little CSS to an div.excerpt element - for those wanting to try more, w3schools has a good CSS reference guide.

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Reply #18)

Tue Apr 30, 2013, 01:34 PM

26. What is "my user style sheet"? n/t

Reply to this post

Back to top Alert abuse Link here Permalink


Response to lumberjack_jeff (Reply #26)

Tue Apr 30, 2013, 07:27 PM

28. A 'user style sheet' allows you to customize the appearance of elements on a website.

Most websites use style sheets to define how things will look (e.g. fonts, text size and color, borders, alignment and placement of elements, background colors, background images, etc.). For example in DU's main style sheet you can find the rule for excerpts (inserted in a post when you hit the excerpt button or type [div class="excerpt"] [/div] into your message):

div.excerpt {
        display: block;
        background-color: #e6e6e6;
        margin: 0px 0px 0px 0px;
        padding: 10px;
}

A 'user style sheet' is a file that resides on your computer that will tell your browser that you want to substitute the website's style rule for a particular element with something you define yourself. Depending on the browser/platform implementing a user style sheet is very easy or virtual impossible.

Some of the things I am doing on DU with my user style sheet are: hiding signatures, adding a rounded border and drop-shadow to excerpt boxes, right justifying and hiding most of the edit text message and changing the text color to light grey, hiding the post count and profile/mail/journal/ignore icons by the username in posts....

ETA: I guess I should take a screenshot to show what posts look like when I browse DU. This is what my post (before adding this image) looked in my browser:

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Reply #28)

Tue Apr 30, 2013, 08:13 PM

29. Cool! I didn't know that you could substitute a style sheet hosted locally for the site's.

You've given me a great jumping off point to do some additional learning. Thanks!

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Original post)

Sat Apr 20, 2013, 06:30 PM

19. Thanks for this thread, Make7.


Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Original post)

Sun Apr 21, 2013, 06:08 PM

20. embedded links

I know basic html - but when I try to embed using the DU way, the link doesn't show. help.

I put in the http (supplied by DU, don't use /a, as is not done in the sample, to close the link...

Reply to this post

Back to top Alert abuse Link here Permalink


Response to RainDog (Reply #20)

Sun Apr 21, 2013, 08:53 PM

21. There are some issues with links and the [link] tag.

The main problem seems to be the inability of the DU3 software to handle certain characters in the web address and/or text portion correctly - that and it acting a little differently than it did on DU2 (e.g. here you should include the http:// part, there you were supposed to omit it).

I posted a thread about the issues that I know about here.

If you give me an example like this (with a space in the web address so it shows up as text)...

URL = http ://www.democraticunderground.com/
text = DU3's Home Page

... I'll see if I can determine what the issue might be - and get it to look like this: DU3's Home Page.


If the problem is just trying to get the
 link 
button to put the proper code into your post, there are two ways to use it:
  1. Type the text you want to make into a link in your post, highlight that text, hit the
     link 
    button and enter the web address into the popup box. Done.
  2. Hit the
     link 
    button, enter the address into the popup box, type the text you want to link in your post and hit the
     /link 
    button to complete.
Either method should result in code like this:

[link:http://www.example.com|custom text]

(Of course you can always just type the code in instead of using the buttons, that's what I usually do.)

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Reply #21)

Sun Apr 21, 2013, 09:02 PM

22. here's the post

http://www.democraticunderground.com/1120231

where I tried to link. It was supposed to say Book Savoury.

It disappeared when I did the embedded link, so I just posted it "raw."

Reply to this post

Back to top Alert abuse Link here Permalink


Response to RainDog (Reply #22)

Sun Apr 21, 2013, 10:03 PM

23. The plus signs in the web address are making it not work right.

You can replace them with %2B (as explained here in my other thread):

[link:http://www.abebooks.com/servlet/SearchResults?sts=t&tn=THIRTY+WAYS+OF+LOOKING+AT+HILLARY&vci=53462510&x=56&y=19|Book Savoury]

[link:http://www.abebooks.com/servlet/SearchResults?sts=t&tn=THIRTY%2BWAYS%2BOF%2BLOOKING%2BAT%2BHILLARY&vci=53462510&x=56&y=19|Book Savoury]

To give you:



For that particular link, you could also use %20 for spaces instead of the plus signs:

[link:http://www.abebooks.com/servlet/SearchResults?sts=t&tn=THIRTY%20WAYS%20OF%20LOOKING%20AT%20HILLARY&vci=53462510&x=56&y=19|Book Savoury]

To give you:

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Original post)

Mon Apr 29, 2013, 12:10 AM

24. Excellent thread, thank you! And now a question:

Is there any way to enter line breaks into the "About Me" box on the user profile?

Reply to this post

Back to top Alert abuse Link here Permalink


Response to petronius (Reply #24)

Mon Apr 29, 2013, 02:37 AM

25. I haven't been able to get any type of line break to work within the 'About Me' text.

This has been asked in the past a few times and I usually try every way I can think of to get it to work each time someone raises the issue and have yet to succeed.

Maybe post in ATA to see if they'll add some code to recognize line breaks in the 'About Me' text and have the software insert <br> tags to the html source - just like the software will in a regular post. It can't hurt to ask...

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Reply #25)

Tue Apr 30, 2013, 02:42 PM

27. Thanks! Here's the ATA thread I started:

http://www.democraticunderground.com/12591506

Maybe Elad will have some ideas...

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Original post)

Mon May 27, 2013, 06:35 PM

30. Placing code to resize images here to avoid opening more windows.

|div style="width:20%;"| URL |/div|

Substitute braces for vertical pipe, no spaces before or after URL.

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Original post)

Tue Aug 20, 2013, 06:44 AM

32. html

yes very useful information

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Original post)


Response to Make7 (Original post)


Response to Make7 (Original post)

Wed Jan 22, 2014, 01:12 AM

39. I can't post an image in my sig line

without the code showing. above, it says no tags are needed.

I figured out I can't "direct link" or so it seems, so I have to html link. help.

Reply to this post

Back to top Alert abuse Link here Permalink


Response to RainDog (Reply #39)

Wed Jan 22, 2014, 01:13 AM

40. hmmm

now I can't see the url

...and now I can.

sigh

Reply to this post

Back to top Alert abuse Link here Permalink


Response to RainDog (Reply #40)

Wed Jan 22, 2014, 01:35 AM

41. What browser are you using?

I copied the photobucket image URL into my signature and it seems to display fine in FireFox on Windows7.

Maybe just save the image and upload it to imgur.com and use a direct link from them - photobucket does some weird stuff to redirect to their website when you try to open a direct image from your browser's address bar.

Try this image link:

  http://i.imgur.com/EImCc3N.jpg

This is what I put in my signature temporarily (which seems to work - for me at least):

  http://i222.photobucket.com/albums/dd186/parispace/GOGREEN_zpscd5ed324.jpg

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Reply #41)

Wed Jan 22, 2014, 01:39 AM

42. nevermind

I got it to work with an img link. thanks!

Reply to this post

Back to top Alert abuse Link here Permalink


Response to RainDog (Reply #42)

Wed Jan 22, 2014, 01:43 AM

43. The DU software will ignore the [IMG] tags, so it should work without them...

... at least it did for me.


Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Original post)

Fri Jan 24, 2014, 03:18 PM

44. embedding video

Is it possible here to sub the "<" with "
here's the example that's the reason I ask. I didn't try it, tho.

<iframe frameborder="0" width="480" height="270" src="http://www.dailymotion.com/embed/video/xhalb0" allowfullscreen></iframe><br /><a href="http://www.dailymotion.com/video/xhalb0_waking-life_shortfilms" target="_blank">Waking Life</a> <i>by <a href="http://www.dailymotion.com/tvxorissinora" target="_blank">tvxorissinora</a></i>

okay, I did.


Waking Life by

you guys use "|" for anchors, tho, right?

Reply to this post

Back to top Alert abuse Link here Permalink


Response to RainDog (Reply #44)

Sat Jan 25, 2014, 01:11 AM

45. No, an [iframe] tag won't work here. You can only embed videos from YouTube or Vimeo.

Letting people define their own inline frames on a forum would just be asking for trouble. I imagine that is why the Admins decided to give people the ability to embed videos from a couple video sharing sites by making the software recognize those links and auto-inserting the required <iframe> code for those sites. It gives people the option to embed videos but doesn't open the door to crazy stuff that might be possible by allowing the use of an <iframe>.

The anchor tag won't work either. It's not too difficult to change the <a href="URL">TEXT</a> code into [link:URL|TEXT], but once again the DU software limits what one can link to by using the [link:|] tag and parsing the contents and inserting the required <a ...></a> html in a post.

It's been quite a while since I tested for allowed html tags here to check if they added any new ones for our use, but I was pretty confident that as of my last edit to this OP every html tag that works here was listed. They do allow inline style in [div] tags so formatting options are pretty flexible, but as far as embedding content and links - they seem to want to manage that to some degree in order to prevent people (like me) from doing crazy shit.

As far as sharing videos from dailymotion, you're limited to just posting the URL:

  http://www.dailymotion.com/video/xhalb0_waking-life_shortfilms


I remember seeing Waking Life in the theater when it came out - I'm a big fan of Richard Linklater's work. In fact, I think I still have a DVD of that film around here somewhere...

Reply to this post

Back to top Alert abuse Link here Permalink


Response to Make7 (Original post)

Reply to this thread