Quick & Dirty HTML Primer

Dragonchilde — Mon, 10 Oct 2011 14:53:19 -0400

Unlike many forums on the web, we do not use the [BB CODE] specification. Here, we use good old-fashioned HTML. This... can be confusing. So, I'm going to do a quick primer of the tags you'll be using most often, and hopefully this will help you post signatures, add emphasis to your posts, and overall look REALLY cool. Links First, is the link. In web designer speak, we use an anchor tag for this... what it means to you is that you can format your links prettily. You can just post the link like so: http://www.nanowrimo.org and the forum will automatically convert it for you. However, you might want to make it clickable, and pretty, so that it doesn't ugly-up your post! Like So. Here's how you do this: <a href="URL">Clickable Text</a> It's important to remember to "close your tag", that is, add a </a> at the end of the text, otherwise everything after it will be clickable. Not pretty at all. ;) You can also do a clickable email link the same way, only instead of using a URL, you'll use the following within the quotation marks: mailto:EMAIL ADDRESS Be wary of this one, though, as any email address you may post on the forum may be harvested by spam bots. It's generally not a wise idea to post your email address unless absolutely necessary. Italics Italics were updated with the new XHTML specifications. The technical term for this is "deprecated". The old tag, , is no longer valid, so it doesn't work. The arcane deity known as the "W3C" decided this is so, so it is. ;) What does this mean to you? Well, it means that to make it work, you have to get with the program, and use their new, approved tag. Italicized Text To do this: Italicized Text Easy-peasy! This one also needs to be closed, or your whole post will be italicized. Bold Text Sometimes, you just gotta shout! Like the italics, the old tag was deprecated. So now, we use a new tag: . To make your text bolder, use the following: Bolded Text This is also a tag that needs to be closed, or your entire post will be bolded. Lists The next bit of code you're like to use is a list. Sometimes, you want to order your thoughts, or you want a bulleted list. These can be simulated with regular characters, such as a dash ( - ) for a bullet, or numbering manually. However, lists offer two advantages: Prettier, easier to read formatting, and autonumbering. If you add an item in the middle of your list, the ordered list option will rearrange your numbers for you, instead of you having to go in and retype them all.

This is an ordered list
Your items will be numbered in order

To do this: <ol> <li>First item</li> <li>Second item</li> </ol>

This is an unordered list
Your items will be presented with bullets

To do this: <ul> <li>First item</li> <li>Second item</li> </ul> The construction of both of these lists is the same, with one small difference. Make sure you use the right opening and closing tags: <ol></ol> for an ordered list, and <ul></ul> for an unordered list. Images We know why you're all here. Admit it; you want a pretty image in your signature, or you want to post an image in your post. Well, this will tell you how to do just that! Before I do, let me remind you of a few guidelines: Keep your images small, and don't use too many. If someone has to scroll past half a screen to get by your signature, a moderator may ask you to remove it. HQ has asked that signature banners be no larger than 500 pixels wide x 100 high and 30kb in size- and that's the combined total of images in your signature. You can add signatures under My NaNoWriMo => Edit User Settings [NOTE: THIS FEATURE IS NOT YET AVAILABLE.] Unlike the other tags, the image tag doesn't need to be closed with a second tag. It's a standalone. If you want to post this: Here is how you do so: <img src="IMG URL" /> Note the little forward slash at the end. ;) That is how you denote a tag that doesn't need to be closed with a second tag. Please note that images must be hosted elsewhere for you to link them. You can use photobucket, a private web host (some don't allow hotlinking, so check with your host - Geocities is one of these that disallows linking from elsewhere.) My personal favorite is TinyPic, because it's quick and easy, and doesn't require a link back like photobucket does. Now, if you really want to get squirrely? You can make your PICTURES clickable, by nesting tags. To do this: <a href="URL you want to link to"><img src="Image URL" /></a> There, that was your not-so-quick, not-so-dirty primer on how to use XHTML on this forum. This will actually work on any web page (except forums that have HTML disabled, of course). If you have questions, feel free to ask!

Re: Quick & Dirty HTML Primer

ObiKimono — Tue, 11 Oct 2011 05:56:02 -0400

Have the strikes been removed?

Re: Quick & Dirty HTML Primer

Lousy Writer 13 — Tue, 11 Oct 2011 07:23:50 -0400

[quote=ObiKimono]Have the strikes been removed?[/quote] Well, strike is supposed to still work... but it appears to be broken. It is in the list of items to be fixed.

Re: Quick & Dirty HTML Primer

Marauders Girl — Wed, 12 Oct 2011 18:14:14 -0400

Okkay for posting pictures? Are you supposed to leave the space in between the quote mark and the forward slash? Or is that space just in there in the above post to keep it from formatting and not letting people be able to see what they're actually supposed to write?

Re: Quick & Dirty HTML Primer

tiakall — Wed, 12 Oct 2011 20:41:57 -0400

Awesome, I miss strikethrough. What about <center>?

Re: Quick & Dirty HTML Primer

Lousy Writer 13 — Wed, 12 Oct 2011 20:58:01 -0400

The spaces are all there just to show the command.

Re: Quick & Dirty HTML Primer

bunnyhero — Wed, 12 Oct 2011 22:44:13 -0400

the and tags aren't actually deprecated, although their use is often discouraged, because they're presentational. but they certainly aren't deprecated in any current HTML or XHTML standard as far as i know. on the other hand, <strike> and <s> are deprecated :)

Re: Quick & Dirty HTML Primer

Absotively — Thu, 13 Oct 2011 11:31:48 -0400

<s> seems to have been un-deprecated for HTML5.

Re: Quick & Dirty HTML Primer

Dragonchilde — Thu, 13 Oct 2011 13:42:10 -0400

Center isn't a working HTML tag here. :) Sorry! We don't have any plans to add it at this time.

Re: Quick & Dirty HTML Primer

Dragonchilde — Thu, 13 Oct 2011 13:43:18 -0400

The space between the quotation mark and the closing slash in the IMAGE tag is indeed appropriate format. I've used ascii arrows so the tag shows exactly how you should copy it. :)

Re: Quick & Dirty HTML Primer

Lousy Writer 13 — Thu, 13 Oct 2011 15:53:46 -0400

Yeah, I think I wasn't clear enough in my response. The spaces in the opening tag are what I was referring to. Sorry about that.

Re: Quick & Dirty HTML Primer

bunnyhero — Thu, 13 Oct 2011 17:05:04 -0400

good to know! now if i could only edit my previous post... ;)

Re: Quick & Dirty HTML Primer

bunnyhero — Thu, 13 Oct 2011 17:05:41 -0400

what about BLINK and MARQUEE? (just kidding! ;)

Re: Quick & Dirty HTML Primer

Absotively — Fri, 14 Oct 2011 00:28:02 -0400

I'm glad you can't. If you did, it'd look like I'm complaining about nothing. :) While I'm nitpicking your previous post: the HTML 5 spec also gives examples of semantic uses of and (and ). So they're not strictly presentational (now), and presumably that's why they aren't deprecated. <blink>, on the other hand, continues to be non-standard. :D

Re: Quick & Dirty HTML Primer

KaitTTT — Wed, 19 Oct 2011 02:06:40 -0400

MUST PRACTICE

Re: Quick & Dirty HTML Primer

KatrinaPink — Thu, 20 Oct 2011 00:23:24 -0400

Is there something comparable to Facebook's "@", which automatically creates a link to a person's profile? Or do I just use the "a href" command?

Re: Quick & Dirty HTML Primer

Keladryie — Thu, 20 Oct 2011 05:25:07 -0400

It's just the ahref command - but that would be really nifty if we could have that! You should suggest it in the Suggestions section of the forums :)

Re: Quick & Dirty HTML Primer

heartsong2000 — Sun, 30 Oct 2011 12:44:59 -0400

Ukaaay! As regards: "You can add signatures under My NaNoWriMo => Edit User Settings" Went there. I don't see anything regarding "signatures." Am I missing something? [Aside from needing another cup of coffee....] Thanks!

Re: Quick & Dirty HTML Primer

Lousy Writer 13 — Sun, 30 Oct 2011 15:07:22 -0400

[quote=heartsong2000] Ukaaay! As regards: "You can add signatures under My NaNoWriMo => Edit User Settings" Went there. I don't see anything regarding "signatures." Am I missing something? [Aside from needing another cup of coffee....] Thanks! [/quote] You're not missing something... something is missing. It's a Known Issue.

Re: Quick & Dirty HTML Primer

DavidConrad — Tue, 01 Nov 2011 07:53:46 -0400

It was always a bit of a mistake to deprecate them. The problem is, you can't decide what's semantic in a vacuum. If you're trying to emphasize something is the wrong choice. It's presentational, not semantic. You should use to indicate emphasis. But if you're trying to italicize something because it's a book title and the Chicago Manual of Style says book titles should be set in italics, you should use . That is then semantic, and would be wrong, because while it commonly is shown with italics, some browser or stylesheet could be set up to show emphasis with bold text, or a larger font size, or something. You can't decide semantic vs. non-semantic without asking, what did the author intend?

Re: Quick & Dirty HTML Primer

Marmite&butter — Tue, 01 Nov 2011 10:45:35 -0400

Okay, testing: http://www.nanowrimo.org

Re: Quick & Dirty HTML Primer

Marmite&butter — Tue, 01 Nov 2011 11:03:09 -0400

Hey, that worked! But still a bit stuck. If I want: http://maps.google.co.uk/maps?q=13+Rosslyn+Road+Twickenham&oe=utf-8&client=firefox-a&hnear=13+Rosslyn+Rd,+Twickenham,+Middlesex+TW1+2AR,+United+Kingdom&gl=uk&t=m&z=16&vpsrc=0 to work as a link I need to put this: Clickable Text around it - the "http://etc etc" replaced "Clickable Text" so http://maps.google.co.uk/maps?q=13+Rosslyn+Road+Twickenham&oe=utf-8&client=firefox-a&hnear=13+Rosslyn+Rd,+Twickenham,+Middlesex+TW1+2AR,+United+Kingdom&gl=uk&t=m&z=16&vpsrc=0 But where do I put the "Like so" so that that is what shows in the post rather than the big long link? I am guessing it is replaces URL (but leaves the " "s on either side). If there is a link below saying "Like so" leading to a google map then it has worked. If it is still the great long thing or the link doesn't work, someone may like to tell me what I've done wrong. http://maps.google.co.uk/maps?q=13+Rosslyn+Road+Twickenham&oe=utf-8&client=firefox-a&hnear=13+Rosslyn+Rd,+Twickenham,+Middlesex+TW1+2AR,+United+Kingdom&gl=uk&t=m&z=16&vpsrc=0 BTW The bit about replacing URL with your own text isn't obvious in the 'Quick & Dirty' guide so clarifying it a bit would help us web incompetents.

Re: Quick & Dirty HTML Primer

Marmite&butter — Tue, 01 Nov 2011 11:04:25 -0400

Nope. None of it works - the links don't go to the right place. Could anyone tell me what to do. And yes, I am really stupid, so please explain it as if to a four year old.

Re: Quick & Dirty HTML Primer

sumerianhaze — Tue, 01 Nov 2011 11:27:14 -0400

Your URL: http://www.cthuugle.com Your text: Ia! Ia! Cthulhu fhtagn! <a href="http://www.cthuugle.com">Ia! Ia! Cthulgu fhtagn!</a> This will give you: Ia! Ia! Cthulgu fhtagn! So, that's: Double quotes around your URL. <a href= before it. > after it. Then your text to display. The closing tag </a> at the end of your display text.

Re: Quick & Dirty HTML Primer

Deadly Ernest — Tue, 01 Nov 2011 18:56:17 -0400

I wish your subject heading was true. Checks of source code sees lists after list of Java Scripts not html code. I'm having a lot of difficulty because you have so many non html calls to third parties it slows loading down to a crawl. Do you really NEED to use Google APIs so much, can't you do things with your own code and not have to use theirs? The real annoying thing is I have to take time to turn off some security settings related to third party calls to access the site. This is going to greatly inhibit my participation and live activity on the site due to the trouble involved and time lost in doing so. What ever happened to people who designed web sites to work totally off their own server? A security conscientious web designer should NOT use third party calls as that's how the bad guys hit people with trojans and virus downloads. Which is why security people tell you to disable third party cookies and third party code calls.

Re: Quick & Dirty HTML Primer

Dragonchilde — Tue, 01 Nov 2011 21:50:29 -0400

[quote=Deadly Ernest] I wish your subject heading was true. Checks of source code sees lists after list of Java Scripts not html code. I'm having a lot of difficulty because you have so many non html calls to third parties it slows loading down to a crawl. Do you really NEED to use Google APIs so much, can't you do things with your own code and not have to use theirs? The real annoying thing is I have to take time to turn off some security settings related to third party calls to access the site. This is going to greatly inhibit my participation and live activity on the site due to the trouble involved and time lost in doing so. What ever happened to people who designed web sites to work totally off their own server? A security conscientious web designer should NOT use third party calls as that's how the bad guys hit people with trojans and virus downloads. Which is why security people tell you to disable third party cookies and third party code calls. [/quote] Deadly Earnest, if you would like to submit some feedback, please do so in the Suggestions forum. This thread is for the discussion of HTML as it relates to formatting on this forum, not third party API usage.

Re: Quick & Dirty HTML Primer

Deadly Ernest — Wed, 02 Nov 2011 02:29:43 -0400

[quote=Dragonchilde] [quote=Deadly Ernest] I wish your subject heading was true. Checks of source code sees lists after list of Java Scripts not html code. I'm having a lot of difficulty because you have so many non html calls to third parties it slows loading down to a crawl. Do you really NEED to use Google APIs so much, can't you do things with your own code and not have to use theirs? The real annoying thing is I have to take time to turn off some security settings related to third party calls to access the site. This is going to greatly inhibit my participation and live activity on the site due to the trouble involved and time lost in doing so. What ever happened to people who designed web sites to work totally off their own server? A security conscientious web designer should NOT use third party calls as that's how the bad guys hit people with trojans and virus downloads. Which is why security people tell you to disable third party cookies and third party code calls. [/quote] Deadly Earnest, if you would like to submit some feedback, please do so in the Suggestions forum. This thread is for the discussion of HTML as it relates to formatting on this forum, not third party API usage. [/quote] G'day Dragonchilde, The is issue seems, to me, to be more of a site problem bug than a site change feedback item. On going to the Tech Help and Bug Report page this seemed the most appropriate thread to comment on. However, since you assure me this belongs on the Feedback forum, I'll make the comment there. Regards, Ernest

Re: Quick & Dirty HTML Primer

Dragonchilde — Wed, 02 Nov 2011 11:12:59 -0400

[quote=Deadly Ernest] [quote=Dragonchilde] [quote=Deadly Ernest] I wish your subject heading was true. Checks of source code sees lists after list of Java Scripts not html code. I'm having a lot of difficulty because you have so many non html calls to third parties it slows loading down to a crawl. Do you really NEED to use Google APIs so much, can't you do things with your own code and not have to use theirs? The real annoying thing is I have to take time to turn off some security settings related to third party calls to access the site. This is going to greatly inhibit my participation and live activity on the site due to the trouble involved and time lost in doing so. What ever happened to people who designed web sites to work totally off their own server? A security conscientious web designer should NOT use third party calls as that's how the bad guys hit people with trojans and virus downloads. Which is why security people tell you to disable third party cookies and third party code calls. [/quote] Deadly Earnest, if you would like to submit some feedback, please do so in the Suggestions forum. This thread is for the discussion of HTML as it relates to formatting on this forum, not third party API usage. [/quote] G'day Dragonchilde, The is issue seems, to me, to be more of a site problem bug than a site change feedback item. On going to the Tech Help and Bug Report page this seemed the most appropriate thread to comment on. However, since you assure me this belongs on the Feedback forum, I'll make the comment there. Regards, Ernest [/quote] This thread is not for general bug reports, it's specifically for the subject of the thread: HTML. If a bug report needs to be made, it needs a separate thread, not a comment on this page. Bug reports made in this thread will not be answered.

Re: Quick & Dirty HTML Primer

TANK Ex Mortis — Fri, 04 Nov 2011 13:14:58 -0400

Is it just me or is href broken? I write: [a href="www.amazon.com/Deadheart-Shelters-Forrest-Armstrong/dp/1933929049/"]The Deadheart Shelters[/a] (replace ['s with <'s), and I get a link to: www.nanowrimo.org/en/forums/[forum name]/threads/www.amazon.com/Deadheart-Shelters-Forrest-Armstrong/dp/1933929049/.

Re: Quick & Dirty HTML Primer

Dragonchilde — Fri, 04 Nov 2011 16:50:40 -0400

[quote=TANK Ex Mortis] Is it just me or is href broken? I write: [a href="www.amazon.com/Deadheart-Shelters-Forrest-Armstrong/dp/1933929049/"]The Deadheart Shelters[/a] (replace ['s with <'s), and I get a link to: www.nanowrimo.org/en/forums/[forum name]/threads/www.amazon.com/Deadheart-Shelters-Forrest-Armstrong/dp/1933929049/. [/quote] You need to add the http:// before the www in the amazon link. if you don't, it thinks it's a relative link, and adds the nanowrimo stuff.

Re: Quick & Dirty HTML Primer

TANK Ex Mortis — Sun, 06 Nov 2011 10:57:52 -0500

Ah, that'd explain it. Firefox has started chopping off the http in the address bar and I didn't notice.

Re: Quick & Dirty HTML Primer

theoretical_cat — Fri, 11 Nov 2011 15:21:11 -0500

~~test~~ They still work, just put <strike>TEXT</strike>

Re: Quick & Dirty HTML Primer

Anahlynn — Wed, 30 Nov 2011 18:53:20 -0500

~~like this?~~

Re: Quick & Dirty HTML Primer

Bewitched.Rhapsody — Sun, 04 Dec 2011 17:55:43 -0500

Umm, how do I make the quotes? O__O

Re: Quick & Dirty HTML Primer

Dragonchilde — Sun, 04 Dec 2011 18:37:36 -0500

[quote=Bewitched.Rhapsody] Umm, how do I make the quotes? O__O [/quote] Simply click the "quote" button under the post you'd like to quote.

Re: Quick & Dirty HTML Primer

Bewitched.Rhapsody — Mon, 05 Dec 2011 13:04:07 -0500

Huh. That's nice to know. XD I knew that quote button was there for some reason. O__O Thanks.

Re: Quick & Dirty HTML Primer

Erecura — Wed, 21 Dec 2011 15:26:39 -0500

I used the and it's huge. Huge. Any way to fix this?

Re: Quick & Dirty HTML Primer

Dragonchilde — Wed, 21 Dec 2011 15:29:16 -0500

[quote=Erecura] I used the and it's huge. Huge. Any way to fix this? [/quote] If the image it large, you'll have to fix that on your end; changing it in the HTML won't change the actual size of the image. The image src tag only reproduces what shows on the host. :)