Basic HTML

Conversazioni75 Books Challenge for 2011

Iscriviti a LibraryThing per pubblicare un messaggio.

Basic HTML

Questa conversazione è attualmente segnalata come "addormentata"—l'ultimo messaggio è più vecchio di 90 giorni. Puoi rianimarla postando una risposta.

1TadAD
Modificato: Dic 17, 2010, 10:00 am

Jim asked me to re-do this for the new group.

LibraryThing suppresses most HTML in the forums, but there are a few things you can do.

2TadAD
Modificato: Dic 17, 2010, 10:03 am

To put an image, such as a book cover, in your post

The most basic format for an image is:

<img src="URL_HERE">

Replace URL_HERE with the full location on the Web of your image.

An example would be:

<img src="http://images.amazon.com/images/P/1933372826.01._SY190_SCLZZZZZZZ_.jpg">

Which comes out as:



To get the URL you need for the image

Find the image on the Web. Right click on it and:

- If you use Firefox, select "Copy Image Location"
- If you use Chrome, select "Copy Image URL"
- If you use Safari, select "Copy Image Address"
- If you use IE, select "Properties" then highlight the Address field and press Ctrl-C

Two tips on book covers

1) Covers stored on LibraryThing (member uploaded covers) may be removed from the server's cache if no one has looked at the book's pages lately. If you're using it in your post when this happens, people will start seeing the little red X. You can avoid this by using Amazon covers if they are what you want.

2) Some Amazon book covers don't make it over to LibraryThing's list...I don't know why, it's just so.

Even if they don't show up on the Change Cover page, you can still get at them by using a URL with the ISBN in it. Use the URL I gave in the sample code above, replacing 1933372826 with the 10-digit version of the ISBN. It usually works.

How to resize an image if it's too big and is distorting the posts

Scale the image either horizontally or vertically—only do one or you'll distort the picture—by using height="YOUR_SIZE" or width="YOUR_SIZE" in the code. Replace YOUR_SIZE with the number of pixels you want that dimension to be...the other will scale in proportion.

Here's an example...first full size:

<img src="http://images.amazon.com/images/P/1933372826.01._SY190_SCLZZZZZZZ_.jpg">



Then only 50 pixels high instead of 190.

<img height="50" src="http://images.amazon.com/images/P/1933372826.01._SY190_SCLZZZZZZZ_.jpg">



3TadAD
Dic 17, 2010, 9:21 am

To make things bold, italic, etc.

Use <b>your text</b> to make something bold

Use <i>your text</i> to make something italic

Use <u>your text</u> to make something underlined

Use <strike>your text</strike> to make something strike through

4TadAD
Modificato: Dic 17, 2010, 10:04 am

To put a link to any Web page in your post

<a href="URL_HERE">YOUR_TEXT</a>

Replace URL_HERE with the full address of the Web page. Replace YOUR_TEXT with whatever you want the link to say.

For example:

Last year's group is found <a href="http://www.librarything.com/groups/75booksin2010#forums">here</a>.

becomes

Last year's group is found here.

To link to a specific message in a thread

You can link to a thread using the above command. If you want to link to a specific message in a thread, add a # sign at the end of the URL and then the post number. It will look something like this:

The message explaining this last year was <a href="http://www.librarything.com/topic/80911#1689475">here</a>.

The message explaining this last year was here.

How to get the post's number

Right click on the part of the post's title that says "Message XX" and:

- If you use Firefox select "Copy Link Location"
- If you use Chrome select "Copy link address"
- If you use Safari select "Copy Link"
- If you use IE select "Copy shortcut"

5TadAD
Dic 17, 2010, 9:41 am

How to put a length quote in your post

<blockquote>YOUR_QUOTE</blockquote>

For example:

<blockquote>When in the Course of human events it becomes necessary for one people to dissolve the political bands which have connected them with another and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.</blockquote>

becomes

When in the Course of human events it becomes necessary for one people to dissolve the political bands which have connected them with another and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.

6TadAD
Modificato: Dic 17, 2010, 10:05 am

How to put reserved characters into your post

If you want to put square brackets in your post and are having problems because LibraryThing thinks you're specifying a touchstone, or angle brackets are getting turned into HTML commands, use the following escape sequences:

For [ use &#91;
For ] use &#93;
For < use &lt;
For > use &gt;

While I'm at it, foreign characters, or any character, can be entered this way using escape sequences of the format &#XXX; where 'XXX' is the numeric code of the character, e.g.: &#225; = á. However, it's much easier (if you're on Windows) to just bring up the character map application (Programs/Accessories/System Tools/Character Map) and select the characters you want into the clipboard.

7TadAD
Modificato: Dic 17, 2010, 10:06 am

Not really HTML, but related—touchstones not working

A common question is about touchstones not being found when you type them. You can try to force LibraryThing to create a proper touchstone by inserting the Work Number for the book before the title. Instead of typing [War and Peace], try [995::War and Peace].

It doesn't always work, but has a reasonable success rate for me.

8alcottacre
Dic 17, 2010, 11:13 am

I added a link to this thread on the wiki for easy access.

9richardderus
Dic 18, 2010, 8:07 am

Oh good, here it is!

10Matke
Dic 24, 2010, 9:21 pm

I may be in speechless awe for all of next year. Thank you, Tad, for making things manageable.

11Storeetllr
Dic 25, 2010, 3:01 pm

I've SO starred this! Such a great help to have it all in one place!

12drneutron
Dic 25, 2010, 3:31 pm

Thanks, Tad!

13sally906
Dic 25, 2010, 6:03 pm

Quick question. When I want to put an image on a post I understand I HTML the picture address (url) but is there a spot where I can store images for myself to use whenever so I don't have to search each time?

I hope the question makes sense :)

14avatiakh
Dic 25, 2010, 7:21 pm

There is a 'junk drawer' on your profile page, when you upload images to your profile's member gallery you can choose this option. I haven't used it yet, but most people seem to find it easily enough.

15kageeh
Dic 26, 2010, 4:03 pm

How does one create one's own thread to keep track of the challenge books? And how does one add one of those adorable book tickers? I am technologically challenged even though I live on my computer. I still have to label my cords.

16alcottacre
Dic 27, 2010, 12:44 am

#15: Kathie, I sent you a PM with all the details.

17Whisper1
Gen 1, 2011, 8:03 pm

Thanks Tad!

18scvlad
Gen 2, 2011, 1:32 pm

Thanks for this. Very useful for those of us who don't HTML often.

19elliepotten
Gen 6, 2011, 10:01 am

Checking in so I can find you again, fast!

20flissp
Gen 11, 2011, 10:46 am

Re Msg7 - if that fix doesn't work, something I've done in the past is just search for the book and copy the web page in instead (see Msg4)...

21kmartin802
Feb 4, 2011, 12:58 pm

How to you find the work number of a book? This is in regard to the touchstones not working.

22mamzel
Feb 4, 2011, 1:23 pm

Have you the touchstones again? They seem to be fine today. Whew!

23norabelle414
Feb 4, 2011, 2:08 pm

>21 kmartin802: It's in the URL of the book, right after the word "work". For example:

http://www.librarything.com/work/13065
the work number is 13065

24kmartin802
Feb 4, 2011, 2:33 pm

Thanks! That worked great. You do have to remember to follow the work number with two colons though.

25Kassilem
Feb 4, 2011, 3:14 pm

Thanks! This was a big help

26BONS
Feb 6, 2011, 7:41 pm

**bump**

27AnneDC
Feb 9, 2011, 5:10 pm

Does anyone know how to get the URL for an image (to copy it into a posting) if you don't have the option to "right-click?" I work on a MacBook, and the very helpful directions above (#2) seem to require a mouse with two buttons.

28jolerie
Feb 9, 2011, 5:14 pm

Hey Anne,

For a Macbook you can right click by doing the 2 finger tap on the scroll pad and then clicking on the clickable part of the scroll pad(one finger at a time-which essentially equals a right click) and then you click on "Copy Image Address" and then paste it into your HTML code.
Or just click on the image and copy the address at the top and paste accordingly. Hopefully that makes sense...

29drneutron
Feb 9, 2011, 5:30 pm

Or you can hold down the control button when clicking. A menu will pop up and one of the selections will copy the address.

30jolerie
Feb 9, 2011, 5:52 pm

>#29 I knew there was another easier way :) The things you can learn on LT...haha

31Smiler69
Modificato: Feb 14, 2011, 6:53 pm

For some reason, I can't get the touchstones for authors working when I put in double brackets. What am I doing wrong?

ETA: I've figured it out. When the author touchstone doesn't work (shows up in red type), you have to insert the author's last and first name in one word. For example [[Agatha Christie]] doesn't seem to work with simple double brackets, so you can enter it like so:

[[christieagatha::Agatha Christie]] which will give you the link to the author page: Agatha Christie

32Mr.Durick
Feb 16, 2011, 4:08 pm

Smiler69, yes and no.

When the author touchstone fails, often it can be rejuvenated with the URL author name for the instance of the author that is relevant. That is often first name then last name, but when it matters I check. There's often a middle initial or some other variation.

Robert

33carolinegerardo
Feb 17, 2011, 1:09 pm

SO helpful thank you

34readers500
Mar 7, 2011, 12:19 am

I am a new member and also am wondering how to do this as I would like to join a challenge and post a ticker. Would you please send me the information also? Thanks!

35TadAD
Mar 7, 2011, 8:42 am

Since no one else seems to be answering:

1) Go www.tickerfactory.com
2) Scroll down and click on Objects/Actions Counter
3) Fill out the PIN and the value fields, click Next
4) Work through the rest of the configuration pages, clicking Next after each one
5) When you get to the page that says "Cut and paste code for most boards and web pages" put your cursor in the field that says HTML, hit Ctrl-A, then Ctrl-C
6) Go to your thread and paste what you have in the clipboard into a post

36mamzel
Mar 7, 2011, 4:59 pm

To join this or any other challenge, go to the home page of the challenge (group, forum, etc.) and at the top of the threads you will see a link to "post a new topic". Think carefully what you want to name your thread since you can't go back and fix it. It's always nice to include your user name in the title, too. You can put your new ticker in the first message.

37lit_chick
Mar 13, 2011, 5:44 pm

Thank you, Tad. I've got this page bookmarked until I get my "LT" legs! SO helpful!

38weejane
Mar 21, 2011, 8:04 pm

Okay, so maybe this was covered some where and I missed it, but how can I post an image from my computer (MacBook) to my thread? I've tried copy and pasting and dragging into the message box, but I just can't figure out. I'm just not super-tech savvy. Thanks!

39TadAD
Mar 21, 2011, 8:13 pm

Questo messaggio è stato cancellato dall'autore.

40keristars
Modificato: Mar 21, 2011, 8:17 pm

You can't. You'll need to upload it to an image server first - the easiest way would be to upload it to your LT Junk Drawer. You do that by going to your member gallery, uploading a picture, and assigning it to the junk drawer (unless you don't care if it's in your regular member gallery). Then, you'll be able to get the http:// code to use in your post.

Edit: TadAD, it looks like there aren't any instructions for how to get the image onto the web. It's a common error for people fairly new to message boards to not realize that just putting the image from their computer into the box won't work, and it needs to be uploaded somewhere first. (I've seen people tell me they copied the instructions exactly, only for the source for the image be something like C:\Windows\Users\Public\My Pictures\18204830405.jpg)

41lit_chick
Mar 21, 2011, 8:21 pm

@40 keristars Thank you for the tip about junk drawer! That's one (of many things) I haven't yet discovered about LT. I've successfully tracked down images online and copied them into posts, but junk drawer is a fab tip : ).

Nancy

42weejane
Mar 21, 2011, 8:56 pm

#40 - Thank you!! I'm just not tech savvy which is probably pathetic given the generation I've grown up in.

43keristars
Mar 21, 2011, 9:14 pm

42> Don't worry! I've had to explain it to plenty of people in their teens and twenties - it's not really intuitive, especially not now with how internet-connected everything is out of the box.

44lauralkeet
Mar 21, 2011, 9:16 pm

The LT Junk Drawer is a great invention. Before that we had to use another photo service, like Photobucket or Flickr. I use Photobucket and have continued to do so, since I sometimes share photos with friends who aren't on LT. I just mention this for those who may already be using one of those sites for other reasons.

45lit_chick
Mar 21, 2011, 9:24 pm

One further question re junk drawer: can other LT members view my junk? or are there settings for that? (ooops, that's two questions). Anyway, thank you. Everyone is so helpful; you are appreciated!

46DragonFreak
Mar 22, 2011, 10:03 am

I think everyone can see the pictures, excpet it doesn't show up in the gallery. Maybe you need a second opinion.

47Citizenjoyce
Mar 27, 2011, 8:52 pm

Questo messaggio è stato cancellato dall'autore.

48EBT1002
Lug 21, 2011, 7:17 pm

Just got directed here and I'm so absolutely starring this thread. I use a MacBook and I'm determined to upload and insert a picture of my beloved Edgar in this month's TIOLI challenge. Thank you,TadAD, for doing a thread of various tech instructions!
~Ellen

49EBT1002
Mar 2, 2012, 12:24 pm

bump

50Storeetllr
Mar 2, 2012, 3:45 pm

New for 2012.

51EBT1002
Nov 10, 2012, 11:41 am

I think there are other threads with hints about basic html, but I thought I would bump this one in case anyone is looking for it.

52rretzler
Nov 11, 2012, 11:42 am

Numbered Lists

One thing that I haven't really seen on any of the threads about basic html is how to do a numbered list. I know a lot of people use them, especially in this group, but haven't seen anything. (I could be wrong about there being something about numbered lists, but a quick search didn't find them.)

So, here goes. In order to make a numbered list:

<ol>
<li>[Name of Book 1]</li>
<li>[Name of Book 2]</li>
</ol>



That will give you:


  1. Name of Book 1

  2. Name of Book 2



Of course, you can use the code above to make some lines bold, some italicized, etc.

53humouress
Nov 3, 2013, 10:40 am

I thought I'd try to collate everything into a wiki, here.

Please feel free to add / improve things; I've just copied posts across and tried to tweak the formatting, which isn't always working.

54Citizenjoyce
Nov 3, 2013, 12:07 pm

Thanks, Humouress. Nice and concise.

55Helenliz
Nov 3, 2013, 12:23 pm

Indeed, nice to have it all in one place.
Is it possible to put a bookmark or other signpost on a Wiki page, so I can jump straight to it if I want to refer to it (which I will, I can't ever remember all the gubbins I have to type to post a picture or a link)?

56drneutron
Nov 3, 2013, 2:57 pm

This is awesome! I'm going to put a link to this on the 2013 group page so folks can get there quick. Plus I'll link on the 2013 group wiki!

57gennyt
Nov 4, 2013, 4:25 am

#55 You could put a link on the notes module on your home page.

58NeverStopTrying
Mar 23, 2015, 11:03 am

That's a great idea. I found this link on someone else's thread and am mighty grateful.

59Citizenjoyce
Mar 23, 2015, 1:18 pm

>58 NeverStopTrying: and your name is perfectly appropriate for the thread.

60humouress
Modificato: Apr 1, 2015, 5:26 am

I need some help with adding one of my photos to a post. I've managed to upload the photo to my junk drawer (and you don't want to know the trauma that caused). Then I tried clicking on the photo in my junk drawer to get the address code and pasted that into the (img SRC =" ") thingy in pointy brackets. (I think you understand why I'm technologically challenged.) but that just shows up as a blank box.

I think the code was https instead of http

61Storeetllr
Modificato: Apr 2, 2015, 2:19 pm

Hi, Nina ~ Here's how I do it: upload the image to Photobucket; click on it; select the HTML link which copies it; and paste the link in your LT post. (See first image below.) I know there are other ways, but this is the easiest I've found.

If the image is too big, you'll have to resize it. Just add height="xxx" where "xxx" is the pixels you want (i.e., 250, 350, 400). Add it at the end of the link before the first greater than bracket. (See second image below.) I always "Preview" the post before posting to check it's the size that I really want.





Hope this helps!

62tymfos
Modificato: Apr 2, 2015, 9:04 pm

Above suggestion should work OK, but if you've already got it in your junk drawer I personally wouldn't use photobucket. Did you RIGHT click on the image? That's important as a left click with the mouse won't do it. Depending on your browser, you should get an option to either copy the url or at least bring up the url (web address) to highlight and copy. Try selecting "properties" if nothing else looks right in the options when you right click. And there should be no need to resize if you use from the junk drawer.

I think I'm remembering right.

If that doesn't work then maybe the photobucket thingy is worth a try. I never tried it that way.

63norabelle414
Apr 3, 2015, 8:38 am

>60 humouress: Could you try posting the photo here, so we can see exactly what's going wrong? Then, if it still shows up as a blank box, post just the address code (without any brackets or quotation marks or anything)

64humouress
Modificato: Apr 3, 2015, 6:42 pm

Thanks, everyone. I realised that the address from the junk drawer isn't a jpeg, so that might be part of the problem. Still no idea how to solve it, so any help is appreciated.

ETA: >63 norabelle414: Thanks, Nora. Here's the address http://www.librarything.com/pic/4785908

>61 Storeetllr: Thanks Mary. I do have a Flickr (or something) account somewhere, but I thought using the junk drawer would be easier. If this doesn't work, I'll have to go and dig it up, I suppose.

>62 tymfos: Thanks, Terri. I'm actually working on an ipad, using Safari, so I can't right or left click. I only get an option to 'save image' or 'copy' if I touch the photo.

65norabelle414
Apr 3, 2015, 10:09 pm

>64 humouress: What happens if you HOLD your finger on the photo? Do you get a pop-up that says something like "Copy image URL" or "open image in new tab" ?

66tymfos
Apr 3, 2015, 10:17 pm

Oh! I never figured out how to post pics with an iPad. Good luck!

67humouress
Modificato: Apr 4, 2015, 2:13 pm

>65 norabelle414: Yes I do, Nora. If I go back to the junk drawer, I can get the 'open image in new tab', but that just opens the photo again. I still can't see a way to getting an address that will work to post it in a thread.

>66 tymfos: Hah! Thanks ;0)

68norabelle414
Apr 4, 2015, 2:38 pm

>67 humouress: If you click "open image in new tab", then you can use the address of that new tab to enter into the {img src="URL_HERE"} part. The address of the new tab should end in ".jpg"

69ronincats
Apr 5, 2015, 12:52 am

70humouress
Apr 5, 2015, 12:09 pm

Thanks Roni. Now, how did you do that?

71tymfos
Apr 10, 2015, 7:56 pm

>68 norabelle414: Roni how do you get the open on a new tab thing with an iPad where there's no right click? I can't seem to do anything with the photos in my junk drawer when I'm on iPad.

72norabelle414
Modificato: Apr 10, 2015, 9:17 pm

>71 tymfos: Instead of right clicking, on something like a phone or an iPad you HOLD your finger down on the item in question. When you do so you should get a menu with options like "save image", "open image in new tab", etc.

73tymfos
Apr 10, 2015, 9:49 pm

Ok, I got it.

Testing

74tymfos
Modificato: Apr 10, 2015, 9:52 pm

That didn't work. I got the menu and did open in new tab and copied what was in the address for the new page, but it didnt have JPEG in the address.

75norabelle414
Apr 10, 2015, 9:52 pm

>74 tymfos: When you held your finger on the image and the menu came up, what did you click?

76tymfos
Modificato: Apr 10, 2015, 9:55 pm

Open in new tab.copied the url of the new page.pasted with the pointy brackets and img src=

77norabelle414
Apr 10, 2015, 9:56 pm

>76 tymfos: It might be opening the image in a new tab, but not switching you to that tab. Do you know how to switch tabs in your iPad browser? (I've never used an iPad before so I don't know)

78ronincats
Apr 10, 2015, 10:00 pm

did you use the quote marks around the address in addition to the brackets and ing src= ?

79tymfos
Modificato: Apr 10, 2015, 10:10 pm

I went to the new tab that opened, just gave me the page in my junk drawer like if you want to edit the image.

I got an address much like the one displayed in >64 humouress:

I hate iPads for stuff like this. I can get photos into my junk drawer with it but if I want a photo in my thread I get to a real computer to do the html.

80tymfos
Modificato: Apr 10, 2015, 10:09 pm

>78 ronincats: No. I've never done that when I've posted from my computer, so not for this either.

.

81norabelle414
Apr 10, 2015, 10:11 pm

I found someone with an iPad to help out. Are you using Safari or Chrome as your web browser?

82tymfos
Apr 10, 2015, 10:14 pm

No more time for this. Just wanted to try to help humouress, and was curious if there was a way, but must sign off

83humouress
Apr 11, 2015, 12:47 pm

Thanks, everyone, for trying to help.

I use Safari as my browser.