Tuesday, August 6, 2013

Extremely Basic HTML for People Allergic to Code


Doha 12 by Lance Charnes

Guest post by Lance Charnes

Be afraid. I’m going to talk to you about the Hypertext Markup Language, which you’ve probably seen referred to in a zillion places as HTML, the language that underpins web pages. Everything you’re seeing on this page (and any other one on the web) is built from HTML or one of its spawn.

Here’s the good news: as an author, you don’t need to be able to build websites in HTML. Let Wordpress or Blogger take care of all that plumbing.

Here’s the bad news: as an author, you still need to know some basics about it.

Why? First, a number of blogging platforms (such as this one) and social media sites (such as Goodreads) let you use a stripped-down subset of HTML to make your posts more attractive and useful. Second, those e-books piling up on your Nook or Kindle are essentially very long web pages; if you’re producing e-books, you’re going to need to do some basic HTML twiddling in order to fix problems.

HTML is, as its name suggests, a markup language. This means that you add it to your plain text to get text effects (bold, italics), alignment or page placement (paragraphing, block quotes), and add web-friendly extras (hyperlinks, images).

Most HTML tags have a start and end; the text they affect comes in between. HTML tags are enclosed in angle brackets (< and >); the end tag has a slash ( / ). For example:

<z>This is in zebra stripes</z> (okay, not really, but that’s what tags look like)

You can add several tags to a single piece of text. You do this by enclosing each pair of tags with another pair of tags. For example:

<yellow><z>This text is in yellow zebra stripes</z></yellow>

It’s best to keep the start and end tags in reverse order. Doing something like this:

<yellow><z>This text is in yellow zebra stripes</yellow></z>

will (at best) not work, or (at worst) do something unexpected and freaky, depending on how sensitive your browser or display platform is.

Following are the most common text-effect tags. This list is from Goodreads; different sites use different subsets, so you’ll want to preview your post to make sure it comes out the way you want. (Note: the spaces between the angle brackets and the tags are there so Blogger won’t interpret them as tags. Leave out the spaces when you use them for real.)

  • bold text: < b >text< /b >
  • italic text: < i >text< /i >
  • underline text: < u >text< /u >
  • strikeout text: < s >text< /s >

Alignment tags tend to work best on blocks of text, that is, paragraphs or paragraph-like chunks. The most common ones include:

  • paragraph: < p >text< /p >
  • blockquote: < blockquote >text< /blockquote >
  • preformatted text: < pre >text< /pre > (most useful for verse and other things that need line breaks in specific places)

Note the “paragraph” tag. Most blogging platforms are well-behaved enough to not need this. However, some applications (such as the Ingram catalog – ask me how I know) require this if your text isn’t to collapse into a single ginormous, unreadable paragraph.

Web links and embedded images work like this:

  • link: < a href="full URL to link to" >my link text< /a >
  • image: < img src="web address for the image" width="n" height="n" alt="description"/ > (width and height are the number of pixels (n) the image should occupy; alt is a description of the image. All three are optional, but recommended.)

Yes, you can set a picture to be a link; just put the < img > command where you see “my link text” in the < a > tag example. Also, notice that the < img > tag doesn’t have an end tag; everything is contained within the angle brackets.

Some message boards and forums (like KBoards) use a different-but-similar scheme for their posts. Instead of angle brackets, they use square brackets ( [ ] ). Their post editors usually have all the controls you need to do what you need to.

This is most of what you need in order to use the mini-HTML that shows up in Blogger, Wordpress, and other like-minded sites. There’s a lot more going on in your e-books, and that’s fodder for other posts if you’re interested.

Lance Charnes is the author of international thrillers Doha 12 and South. For more about Lance and his novels, read an interview with Lance here. Doha 12 and Lance's contact/order info are also available on our "Find a Book" page, here.

4 comments:

  1. Hi Lance - huge thanks. I now understand why I need that silly / at the end of my tags.

    Now if you can help me fix the font size on my blogger site, I'll buy you a beer. For some reason, I can't find the < font 12 > or whatever in the HTML code. Any ideas?

    Many thanks for the great, concise post.

    -Sara

    ReplyDelete
  2. Sorry I didn't answer earlier -- things got busy suddenly.

    I'm not familiar with how Blogger maintains the styles of its blogs. However, I know that WordPress is based on templates (called "themes") that are CSS style sheets (a newfangled extension of HTML). There may be a similar concept in Blogger, and there would be the place to look.

    If so, what you'd be looking for would be a line that looks like this:

    font-size:12.0pt

    where the number following the colon is the size in points. There will likely be a bunch of them; you may need to do some experimenting to find the right one(s).

    If Blogger has a admin dashboard or control panel, fish around to see if it has controls for the text size in the template/theme/whatever they call it.

    If you can't fix your current template, you might need to find another.

    Sorry I can't be more specific -- I've never seen the insides of a Blogger site.

    ReplyDelete
  3. Sara, to change font size in Blogger posts you don't need to go into the HTML at all. At the top of each post as you're writing it is an icon you can use to make the text various sizes. If you're trying to change the size of other fonts, I assume you can find it in the advanced settings but I haven't tried :)

    ReplyDelete
  4. My brother suggested I mіght like thіs website. Ңe wɑs oոce totally riǥht.
    Tɦis submit trսly madе my day. You cann't cοnsider simply ɦow so much time I had spent fօr thiѕ info!
    Tɦanks!

    ReplyDelete