Basic HTML
Conversazioni75 Books Challenge for 2011
Iscriviti a LibraryThing per pubblicare un messaggio.
Questa conversazione è attualmente segnalata come "addormentata"—l'ultimo messaggio è più vecchio di 90 giorni. Puoi rianimarla postando una risposta.
1TadAD
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.
LibraryThing suppresses most HTML in the forums, but there are a few things you can do.
2TadAD
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">
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
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 somethingstrike through
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
4TadAD
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"
<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
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
<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
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 [
For ] use ]
For < use <
For > use >
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.: á = á. 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.
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 [
For ] use ]
For < use <
For > use >
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.: á = á. 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
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.
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
I added a link to this thread on the wiki for easy access.
9richardderus
Oh good, here it is!
10Matke
I may be in speechless awe for all of next year. Thank you, Tad, for making things manageable.
11Storeetllr
I've SO starred this! Such a great help to have it all in one place!
13sally906
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 :)
I hope the question makes sense :)
14avatiakh
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
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
#15: Kathie, I sent you a PM with all the details.
19elliepotten
Checking in so I can find you again, fast!
20flissp
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
How to you find the work number of a book? This is in regard to the touchstones not working.
23norabelle414
>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
http://www.librarything.com/work/13065
the work number is 13065
24kmartin802
Thanks! That worked great. You do have to remember to follow the work number with two colons though.
27AnneDC
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
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...
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
Or you can hold down the control button when clicking. A menu will pop up and one of the selections will copy the address.
31Smiler69
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
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
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
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
SO helpful thank you
34readers500
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
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
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
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.
38weejane
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!
40keristars
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)
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
@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
Nancy
42weejane
#40 - Thank you!! I'm just not tech savvy which is probably pathetic given the generation I've grown up in.
43keristars
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
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
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
I think everyone can see the pictures, excpet it doesn't show up in the gallery. Maybe you need a second opinion.
47Citizenjoyce
Questo messaggio è stato cancellato dall'autore.
48EBT1002
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
~Ellen
50Storeetllr
New for 2012.
51EBT1002
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
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:
Of course, you can use the code above to make some lines bold, some italicized, etc.
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:
Of course, you can use the code above to make some lines bold, some italicized, etc.
53humouress
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.
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
Thanks, Humouress. Nice and concise.
55Helenliz
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)?
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
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!
58NeverStopTrying
That's a great idea. I found this link on someone else's thread and am mighty grateful.
59Citizenjoyce
>58 NeverStopTrying: and your name is perfectly appropriate for the thread.
60humouress
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
I think the code was https instead of http
61Storeetllr
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!
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
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.
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
>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
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.
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
>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" ?
67humouress
>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)
>66 tymfos: Hah! Thanks ;0)
68norabelle414
>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"
71tymfos
>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
>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.
74tymfos
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
>74 tymfos: When you held your finger on the image and the menu came up, what did you click?
76tymfos
Open in new tab.copied the url of the new page.pasted with the pointy brackets and img src=
77norabelle414
>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
did you use the quote marks around the address in addition to the brackets and ing src= ?
79tymfos
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.
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.
81norabelle414
I found someone with an iPad to help out. Are you using Safari or Chrome as your web browser?