Blogger's Guide to HTML by Dan Gookin

Blogger’s Guide to HTML By Dan Gookin Blogger’s Guide to HTML Page 1 Introduction Welcome to you basic blogger’s guide for HTML formatting. Over the next few pages you’ll learn the simple codes required to format your text, insert web links, and add pictures to your posts. Hopefully I can answer some of the questions you’ve had about how others do the fancy stuff, and can show how they do it! Honestly, it’s no big secret, and it’s not that difficult. Soon you’ll be posting like an expert. If you’d like to keep this guide handy, then I suggest that you print it out. Better still, print it on some three-hole punch paper for easy binding. Or just print the Quick Ref at the back. The information here is provided free, though if you’d like to make a suggested donation of $1.25, it would gladly be accepted. See http://www.wambooli.com/donate. Thank you! Dan Gookin [email protected] Blogger’s Guide to HTML By Dan Gookin First edition, March 2007 Copyright © 2007 by Quantum Particle Bottling Co. This document may be distributed freely with the following restrictions: • You cannot charge to access or copy this document. • You cannot modify this document. • You cannot reproduce or use any part or portion of this document in another media without written permission of the author. Notes, corrections and errata may be sent to [email protected]. Check http://www.wambooli.com/help/bloggers/ for the latest edition of this document as well as a handy test-your-HTML thingy, and other helpful information. Blogger’s Guide to HTML Page 2 Contents Introduction ...............................................................................2 The HTML Thing ......................................................................4 Simple Text Formatting ..........................................................5 Examples of how this stupid thing works .............................................................5 Things to remember .................................................................................................5 Bold text .....................................................................................................................6 Italic text ....................................................................................................................6 Strikethrough text ....................................................................................................6 Combining Text Formats .........................................................................................7 Formatting Text Color and Size .............................................8 Big text .......................................................................................................................8 Small text ..................................................................................................................8 Colored text ...............................................................................................................9 Different fonts .........................................................................................................10 Monospaced text (Courier font shortcut) ...........................................................11 Paragraph Formatting .......................................................... 12 Adding a line break ................................................................................................13 Centering paragraphs ............................................................................................14 Inserting block quotes ...........................................................................................15 Using Heading tags ................................................................................................16 Adding a Web Page Link ...................................................... 17 The easy way to add a web page reference ..........................................................17 Adding a basic link .................................................................................................17 Adding a link that opens in another window (“pops”) ......................................19 Inserting an Image ................................................................. 20 An example where the image is already on the Internet ...................................20 Using an Image Hosting Service ..........................................................................22 Setting the image’s size ..........................................................................................23 Inserting Special Characters ................................................ 24 Getting More Information ................................................... 25 Appendix A. Blogger’s HTML Command Quick Ref ....... 26 Blogger’s Guide to HTML Page 3 The HTML Thing Most blogs or on-line forums allow you to use basic HTML text formatting commands within the body of the message you type. Knowing these commands means you can add more spice and emphasis to your posts. But what are the commands? How do they work? To get started, you need to know a little bit about HTML, the text-formatting “language” used on the World Wide Web. You probably don’t care to know what HTML stands for. Good. HTML stands for HyperText Markup Language. It ‘s not a programming language. You don’t need to know any math to use HTML. You need only memorize a few simple things. Trust me, it’s not that complex. HTML uses tags to control text. The tags tells the web browser that displays a web page how to format the text, whether to insert a link, image, table or other things too complex and boring for a blog. Each tag is framed by a pair of angle brackets: < > These commonly known as the less-than and greater-than symbols. They’re found on your computer keyboard near the right shift key, above the comma and period keys. Between the brackets are the actual codes that format text or insert a link or image into your post. The tag consists of the text between the brackets. Sometimes there’s a lot of text, sometimes there’s just a single letter. It all depends on what the tag controls. Blogger’s Guide to HTML Page 4 Simple Text Formatting Basic text formatting involves using simple HTML tags. I call them “on/off tags.” The first tag sets the text format. Any text appearing after the tag appears in that format. Then the second tag unsets the text format. You must remember to use the second tag to stop the formatting from running amok! Examples of how this stupid thing works For example, the tag sets bold text. Type , then the text to appear in bold, then type to turn off bold text. Like this: I’m very angry at you. When the text appears in the blog or forum, it looks like this: I’m very angry at you. But remember that when you type, you don’t see the formatting, only the tags. You can also use lower case text in the tags: I’m very angry at you. Again the text looks like this: I’m very angry at you. I prefer to use ALL CAPS in my tags so that they’re easier to find, and so I don’t confuse them with the surrounding text. Things to remember Tags appear between angle brackets. Text formatting tags come in pairs. The first tag turns on a text format. The second tag turns off the text format. (It’s usually when someone forgets the second tag, or screws up the tag, that text formatting runs amok in a blog.) Generally speaking, the closing tag is the same as the first tag, but the formatting command is preceded by a slash, /. Don’t forget that closing tag or the text on the page runs amok! If the blog or forum has a Preview feature, use it! Even the pros get confused with tags. When you preview you can confirm that you’ve formatted everything properly. Blogger’s Guide to HTML Page 5 Bold text To make text bold, the and tags are used. turns bold on. turns bold off. You type: I’m done with this topic! They’ll see: I’m done with this topic! Italic text To make text italic, the and tags are used.. turns italics on. turns italics off. You type: I’m done with this topic! They’ll see: I’m done with this topic! Strikethrough text To make text strikethrough, the <STRIKE> and </STRIKE> tags are used. <STRIKE> turns strikethrough on. </STRIKE> turns strikethrough off. You type: I’ll try to be <STRIKE>nasty</STRIKE> nice just this once! They’ll see: I’ll try to be nasty nice just this once! Before you go nuts with <STRIKE> note that this tag isn’t properly interpreted by some web browsers. When it is, you get strikethrough text. When the tag isn’t supported, you get an explosion of strikethrough text all over the page. Ugly. Ugly. Ugly. Blogger’s Guide to HTML Page 6 Combining Text Formats It’s possible to use more than one tag at a time to slap multiple formats on your text. For example to mix bold and italic text you use two tags. You type: I’ve had it up to here! They’ll see: I’ve had it up to here! The tag turns on bold text. Then the tag turns on italics. Because the tag has already marked the text bold, the result is bold-italic text. At the end of the line, the tag turns off bold text. Note that the tags are nested. That is, the tag is turned off first because the italic format is “inside” the bold format. While this isn’t a terrible rule to break, the Web Formatting Powers That Be prefer you to properly nest any multiple formatting tags. Blogger’s Guide to HTML Page 7 Formatting Text Color and Size There’s a healthy list of HTML tags available, though using some of them is really too complex (or

Load more