HTML Drupal Tutorial 2: More Basics

This is the second in a series of tutorials I’ll be writing on using the Drupal HTML text editor to format web content. The first tutorial covered the basics:

  • Visual vs. text editors
  • Making paragraphs
  • Bolding text
  • Italicizing text
  • Underlining text
  • Creating headers

In this tutorial, I’ll cover some slightly more complicated HTML formatting elements that are still fairly basic.

Complicating the Carets

These more complex elements will require you to use carets in a slightly revised fashion.

For example, say that I want to left justify a paragraph in my post. To do so, I’ll need to put the following caret at the beginning of the paragraph:

image1

This element is a spin on the “<p>” element you’ve seen before, which means that it both 1) creates the paragraph, and 2) right-justifies the paragraph.

To close the “frame” for this right-justified paragraph, you don’t have to use the entire opening element: you only need to use “</p>”. There’s a long and complicated answer as to why this is the case, but for now, just know that whatever comes before that first space in the opening caret element is all you need to include in the closing caret element.

Paragraph Alignment

To left-align a paragraph, use <p align=”left”>:

image2

To right-align a paragraph, use <p align=”right”>:

image3

To center-align a paragraph, use <p align=”center”>:

image4

Creating Hyperlinks

A hyperlink is a selection of text that has a URL embedded in it; this means that, when you click it, it takes you to a new webpage. They’re automatically formatted differently from surrounding text, and are a great way to incorporate web pages into your posts without cluttering it up with messy URLs.

Creating a hyperlink is super simple. Take a look at the image below:

image5

In the image, “URL” denotes the URL of the webpage you want to link to, and “TEXT GOES HERE” denotes what text will show up in your web content.

For example, if I want to create a hyperlink to Google.com with “Google” as the text in my web content, my HTML will look like this:

image6

And remember, the closing caret element here is </a>, because “a” is all that comes before that first space in the caret element.

Listomania

According to Wikipedia, Lisztomania was the intense fan frenzy directed toward Franz Liszt, a mid-19th century composer and pianist, during his performances and social engagements.

Dreamy.

Dreamy.

Listomania, on the other hand, is the phenomenon of creating bullet point and numbered lists in web content. This is spurred by the fact that properly formatted lists are SEO gold.

This means that you shouldn’t just put some • characters in front of your items and call it a day. Take the time to create proper lists, and I promise you’ll reap rewards aplenty.

Making a Bullet Point List

To make a bullet point list, you’ll need to frame the entire list with this caret:

image7

Each item in your list will then need to be framed with this caret:

image8

The final product will look like this:

image9

Making a Numbered List

To make a numbered list, you’ll need to frame the entire with this caret:

image10

Then frame each individual item with the “list” caret featured in the bullet point section.

The final product will look like this:

image11

There are a number of different formats you can use for numbered lists. To learn more about your options, read this post by EchoEcho.

Stay tuned for the next HTML Drupal tutorial in this series.

You may also like

Leave a comment

Need Marketing Help? Let’s Talk.