A good CMS makes it easy to post articles to your website. But what exactly are you posting? Several paragraphs of text. And if that text isn't formatted correctly, your lovely article will look broken on your website.
The good news: if you learn to write in HTML, your article will look great. With a few basic concepts, you'll be writing in HTML in no time.
HTML: Language of the Web Browser
"HTML" stands for "HyperText Markup Language." Basically, it's a language for marking up your text, so it can do fancy things like look bold or link to some other site.
HTML is the basic language of your browser. We use many programming languages for the Internet (PHP, Perl, Ruby, and others), but they all ultimately spit out HTML. (Well, or JavaScript, but let's keep this simple.)
Your browser takes the HTML, and makes it into a pretty web page.
Learn to write in HTML, and you'll know exactly what you're telling the browser to do.
HTML Marks Up Ordinary Text
HTML is a markup language, so most "HTML" is just plain text. For instance, this is perfectly good HTML:
Hello. I am HTML. Exciting. Yep. Amazing.
But wait, you say. That doesn't look like a computer language! It looks like English!
Yes. Now you know the great secret. HTML (when used properly) is readable text.
Learn From Your Word Processor Experience
Of course, we want more than plain text. We want, say, italics.
You already know how to get italics in a word processor program (like Microsoft Word, or the free LibreOffice).
You press the little I button.
Everything you type from then on is in italics. You can type for pages. How do you stop this festival of emphasis? Press the I button again. Now your font is back to normal.
If you go back to the middle of the italicized words and add some text, it will also be in italics.
There's a kind of italics zone between the starting point, where you "turned on" italics, and the ending point, where you turned them off.
Unfortunately, these endpoints are invisible.
Invisible endpoints can cause a lot of pain. It's all too easy to turn italics off, then make some misstep with the cursor and find you're still in italics. You try to turn them off again, but somehow you moved again, so turning them off really toggles them on ... it's a mess.
HTML Uses "Tags"
HTML also uses endpoints. The difference is that In HTML, you can see these endpoints. You type them in. They're called tags.
Let's say you want to spruce up that earlier example. You want to italicize the word "Exciting." You would type in <i>Exciting</i>. Like this:
Hello. I am HTML. <i>Exciting</i>. Yep. Amazing.
You would save that in your text editor, then copy and paste the HTML into the "new article" box in your CMS. When the browser showed the page, it would look like this:
Hello. I am HTML. Exciting. Yep. Amazing.
Unlike a word processor, you don't see the italics as you type them. You type the tags. The browser reads the tags, makes them invisible, and follows their instructions.
It can be annoying to see all those tags, but the right text editor makes this much easier.
Opening and Closing Tags
Look again at the <i> and </i> tags. The <i> turns on italics, just like your first click of the I button. The </i> turns off italics, like your second click.
Instead of clicking a button, you're typing in little tags. An opening tag to start italics, a closing tag to stop them.
Note the difference between the tags. The closing </i> has a /, a slash. All closing tags in HTML will have that slash.
Don't Forget the Closing Tag
Closing tags are rather important. What if you forget the closing </i>, like this?
Hello. I am HTML. <i>Exciting. Yep. Amazing.
It's like you forgot to click the I again to turn italics off.
You'll get this:
Hello. I am HTML. Exciting. Yep. Amazing.
A single missed tag can turn your entire article, or even the rest of the page, into a river of italics.
This is probably both the easiest and the most unnerving beginner's mistake you can make. But it's easy to fix. Just pop in the closing tag.
Now Learn Some Tags
Congratulations! You understand basic HTML!
Ordinary text marked up with opening and closing tags. That's pretty much it.
Now go learn some basic HTML tags. (You may want to get a decent text editor first.)
0 comments:
Post a Comment