Basic HTML tutorial

by

HTML stands for “hyper-text markup language.”

The idea of a markup comes from typesetting, where editors had to indicate to printers where to print text in italics or in bold. They would take a page and mark it up, underlining words that should be italicized, for instance, like this:

a marked up text, shamelessly lifted from technical-expressions.com

The WordPress text editor — which I strongly encourage you to use, instead of the visual editor — works much the same way. First, you enter your text without any formatting.

Then, you can highlight words that should be italicized or bolded. Click on the “i” button for italics or the “b” button for bold. You’ll notice that the text is not italicized or bolded. Instead, the editor will add markups, so

example

becomes

<em>example</em>

when you press “i” for italics.

When you click on “publish,” that text will then be rendered

example

Similarly, when you press “b” for bold, the editor will add markups like this

<strong>example</strong>

which renders like this

example

The first markup consists of a less-than sign, then instructions for rendering, then a greater-than sign. The second markup (which indicates where to stop altering the text) includes a forward slash after the less-than sign.

I encourage you to play around with this. Try a block quote, or try embedding a link by highlighting a word and clicking on “link.” Follow the instructions and see how it marks up your text.

If you’d like more tutorials, I highly recommend W3Schools.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s