HTML Drupal Tutorial 1: The Basics

The first time I had to format a blog post in Drupal, it took me a solid two hours to research the basic HTML functions I needed to make it presentable. All that time on Google, just to find out how to make a few paragraphs look good. You shouldn’t have to waste so much time figuring out the basics of HTML formatting.

To help you along in the formatting process, I’m putting together a series of HTML Drupal tutorials. In this article, I’ll focus on some of the most common text formatting tips.

Starting Out: Visual vs. Text Editors

There are two types of web content editors you can use: visual editors and text editors.

A text editor allows you to make changes directly to your web content’s source code (HTML, CSS, etc.). This is the type of editor for which these tutorials will come in handy.

A visual editor allows you to see what your content will look like once your content has been formatted and published. Typically, it functions like a word processing program (like Microsoft Word): you’ll have a menu that allows you to format your text, create lists, insert hyperlinks, and so on. Whenever you make an edit using the visual editor, the changes will automatically be transferred to your content’s source code.

Visual editors are much friendlier to regular users like you and me, but they’re not always the best option to format web content. Your menu might not offer the formatting option you need, or (if you’re like me) you’ll get frustrated trying to make what seems like a very straightforward edit and just want to go in and do it yourself. In any case, it’s good to know how to use a text editor.

What’s a Caret?

Hello World

The caret is the essential building block of HTML formatting. Every formatting option is placed within a set of carets: making a paragraph, list, hyperlink, embedded video, anything you do with your text will require the use of carets.

 

For example, take the paragraph I just wrote. If you look at its source code, you’ll see the following:
image2

Carets are used in two places here: with <p> and with <i>. <p> is used to create paragraphs, and <i> is used to create italicized font.

In each instance, there is a caret element that begins the formatting and a caret element that closes the element. Whenever you are coding with HTML, you need an opening and closing caret element to “frame” the text, image, video, or other component. The closing caret will be very similar to the opening caret, with a backslash (“/”) in from of the element within the carets.

Now, with that out of the way, let’s look at some of the more common formatting elements.

Paragraphs

To create a paragraph, use <p>:
paragraph

Bold Text

To make text bold, use <b>:

image5_bold

Italicized Text

To italicize text, use <i>:
Italics

Underlined text

To underline text, use <u>:

underline

Headers!

You probably noticed that each section of this post begins with a title that’s formatted differently from the body text. That’s because those aren’t just any type of text: they’re ­headers.

Headers are an easy way to create sections within articles. More importantly, they play a significant role in search engine optimization (SEO) for web content. Putting important keywords in your headers makes your content more likely to appear in a web search for whatever topic you’re writing about. They also improve your content’s CSS flexibility and make any future proofing you do easier.

There are six types of headers that you can use in Drupal posts. The headers get smaller the lower their number goes; header 1 is the largest, then header 2, and so on to header 6.

To make a header, use <h#> (# is a number between 1 and 6):

Header

 

You may also like

Leave a comment