Lesson 2 (Website Building Class)



lesson 2 introduction

In lesson 1, we went over the creation of posts and pages. This lesson will expand on that and cover a variety of things. We’ll look at different types of formatting, talk about tags, adding images, and a few other functions.

There are one or two functions that you may not have on the free WordPress hosting. I’ve included them anyway as they’re relatively common and related to what was already being discussed.

By the end of this lesson, you should have a much better grasp of how to do things in the WordPress Visual Editor.

lesson 2 emphasis

 

 

Lets start off with something easy like changing the emphasis of your text. There’s a lot of different options with this. In WordPress’s toolbar, you can make your text bolditalicunderline it, or strike through it. You can use them with each other. Emphasis options can be used by either using the buttons on the WordPress toolbar, or using keyboard shortcuts. Keyboard shortcuts are different keys that, when pressed together, perform a function. For example, if I wanted my text to be bold, I would use CTRL + B, which is the shortcut for the bold emphasis. You can see shortcut for functions by hovering your mouse cursor over the button. If the function has a shortcut, it will show up.

If you would like to see a list of keyboard shortcuts, click here. Shortcuts can also be found in the help menu on your toolbar.

lesson 2 heading tags

 

 

On the second row of your toolbar, you should see a dropdown menu. By default, this should be set to the Paragraph option. This menu is used to select the tag for selected text. What is a tag you might ask? Good question!

A tag is a markup of the text on a web page. This means that it tells the web browser how to display your content. Everything that we’re doing in this lesson is a tag. For right now, just understand that tags are inserted into your webpage to format your content. We’ll go deeper into tags, elements, markup languages, and all that fun stuff in a future lesson. There’s no need to overwhelm you with stuff like this right now.

With that said, heading tags tell the browser what the selected text should look like. For example, the text you’re reading now is using the “heading 4” tag. In your actual code, this would be displayed as <h4> for the most part. Heading 2 is being used for the titles for each section of this lesson. This is represented by the <h2> tag. It’s also using the bold and underline tags.

Mess around with the different headings to get a general feel for them. Just write out some text, highlight it, and choose an option from the menu.

lesson 2 lists indent outdent

 

 

Lists are something I use quite a bit on Exoffenders and other sites I work on. You can create ordered or unordered lists. Ordered lists have numbers for each item, while unordered just have a bullet. The examples below will show each type.

Ordered List:

  1. Cheese
  2. Milk
  3. Bread
  4. Eggs
  5. Yogurt

Unordered List:

  • Cheese
  • Milk
  • Bread
  • Eggs
  • Yogurt

 

There are a lot of instances when you may need to use a list on your webpage. There are also additional things you can do with your lists. On your toolbar, there are two options called Outdent and Indent. These do exactly what their name implies, they indent or outdent your text. In a list though, they create more of an outline look if they’re used. By using indent on a numbered list, you can create something like this:

  1.  Cheese
    1. Cheddar
    2. Swiss
    3. Provolone
  2. Milk
    1. Skim
      1. I’m not a fan of skim milk.
    2. 2%
  3. Bread
  4. Eggs
  5. Yogurt

Indenting and Outdenting isn’t exclusive to lists. You can use it on any of your text. The sentences below is formatted using the indent tool.

This is an example of text that is indented. Using the indent tool is for more than just lists.

lesson 2 lists indent outdent

 

 

This is a function that I really don’t use that much, but you may. I see pullquotes used more on news articles when highlighting something from the article. You can use them however you see fit. Depending on your theme, you may not have a pullquote option. I just wanted to include it because it’s a somewhat common feature in themes. Below you’ll see an example of a blockquote and a pullquote:

This text is formatted in a blockquote. It adds a unique look to the text that draws the visitors attention.

This text is formatted in a pullquote. It’s a bit different from a blockquote and is meant to catch a visitors attention. You can change the color of the pullquote to really stand out.Exoffenders.net

Using a block or pullquote tag is the same as using any other tag we’ve covered so far. First, select the text you’d like to set as a quote. Then either click the quote button (pullquote or blockquote) or use the keyboard shortcut. If you find yourself still writing in a quote after you’re finished, just click the button again or use the shortcut. That will end the quote tag.

Pullquotes are short quotations meant to catch the visitors attention. These usually are quotes from the content of the page. If used correctly, they can be very effective at drawing readers into a page’s content.

Did you try to create a pullquote and a lot of weird text appeared around it? Don’t worry, that’s normal. The text that appeared between [brackets] is called shortcode. This is a feature of WordPress. In a nutshell, shortcode is a way to complex things on your page with little effort. Shortcodes will be discussed in later lessons, it’s not something that fully understand right now.

And if you don’t have a pullquote option, don’t worry about shortcodes at all!

lesson 2 blockquote pullquote

 

 

If you’re familiar with Microsoft Word, you should be familiar with text alignment. In the toolbar, you have 4 alignment options. They are align left, center, right, and full. These are pretty much self explanatory aside from the align full tag. What align full does is takes the text and spreads it out. This creates a look like below.

This is an example of text that is using the align full tag. Notice that it changes the spacing between some words. This is done to achieve a look that is, well, full. Some of you may prefer to have your posts and pages formatted like this.

lesson 2 text color

 

 

If you’d like to change the color of your text, you can use the text color tool. This is the button with that has an A with a thick line underneath it. Also, it has a dropdown menu on the right of it. Clicking the dropdown menu will take you to the color selection options. Here you can either pick a common color, or click the more colors option. In the more colors option, you can pick the exact color you want. Also, if you have a color hex code for the desired color, you can enter it there as well.

I would caution against excessive usage of the text color feature. Having several different colors of text on one page tends to look gaudy. This can detract from the content of your site, and turn some visitors away.

lesson 2 links

 

 

Links are a big part of any website. Like it’s name implies, this tag links one page to another. This includes both internal links and outbound links. Internal links are links from one page of your website to another. Outbound links are the opposite. These links go to other websites and resources that are not part of your website. If you were to Google from your website, this would be an outbound link.

Let’s create text link to Google. We’ll use “Click here for Google” as the anchor text. Anchor text is the text that will be used as a link. This text should be relevant to the link itself. Creating a link to Google, but using “Don’t worry, the lessons almost over” isn’t relevant. It can mislead or confuse the visitor. It’s also not very good for search engine rankings. So, we want to link to Google using the anchor text of “Click here for Google.” To do this, type the anchor text and then highlight it.Next, either click the insert/edit link button or use the keyboard shortcut. The button looks like a chain link, and will be greyed out if no text is highlighted. This will bring up a menu with a few different options.

The first is the box labeled URL. URL stands for Uniform Resource Locator and is the web address. For the URL in this case, we would use http://www.google.com. Remember to always put the http:// as it will not work without it. The next option is title, which will give your link a tooltip if the mouse cursor hovers over it. This can be useful to give your visitors more information about the link. Below that is the checkbox for open link in new window/tab. Selecting this checkbox will make the visitors web browser open a new tab for what the link goes to. There are reasons to use and not use this option. Most of the reasons relate to subjects we haven’t touched on yet though. For now, we’ll just say that any internal links should not open a new tab. Any outbound links can open a new tab if you would like it to.

The bottom section is an example of why using a CMS like WordPress is great. The link to existing content section is the easiest way to create internal links. If you have a small site with only a few pages and posts, finding it on the list will be easy. With larger sites with hundreds of pages and posts, scrolling through a list could be time consuming. This is where the search function comes in, which is one of many great benefits of using a CMS like WordPress. If you wanted to create a link to your contact us page, all you would have to do is type the word contact in the search box. Any pages that have the word contact in it will be shown. This will narrow down your search and save you time when making internal links. This function is invaluable when your web site has a lot of content on it.

So now that we’ve covered all of that, let’s get back to creating our link to Google. We type in the anchor text, highlight it, use the link button or shortcut, and the link menu will come up. Type in (or copy and paste) the correct information for the URL and type in your title if you’d like one. Then click the add link button at the bottom and voila! You’ve created your first link.

The remove link function does what it sounds like it should. It removes links. This button can be found to the right of the add link button. To use this, just select the link and use the remove link button.

lesson 2 images

 

 

Images inserted into a post or page are good for a lot of reasons. For one, images can be used to break up the wall of text that was mentioned at the start of the lesson. Inserting images into large amounts of text is a great way to take the visitors attention off all of the text. Understand that sometimes pages upon pages of text can seem daunting. Inserting an image here and there can take that text-heavy appearance away. Images are also great to add if you’d like to give examples of what you’re writing about.

So how do we go about inserting an image into our WordPress page or post? It’s actually quite simple! See that button above the toolbar that says add media? That’s where you do it. When you click on the add media button, a menu comes up. The add media menu on the left has a few different options. For now, we’re only going to focus on two of them. The insert media and insert from URL options. By default, the insert media option should already be selected. This should should you in the center of your screen your media library. On top of your media library are two tabs: upload files and media library. The media library is where you can see all of your uploaded images. This is very useful for images that you use in multiple areas of your website. Your library is more than likely empty as you haven’t uploaded anything yet.

Click the upload files tab, which will take you to a screen that says Drop files anywhere to upload. Underneath that, it has a button that says select files. You can upload your files to your media library one of two ways. The first is to click the button and select the files from your computer that you’d like to upload. The second is actually dragging them into your web browser and dropping them there. Either way works fine. So find an image you’d like to insert into your page, and upload it to your library. Once you have successfully uploaded your file, it will take you back to the library menu.

The uploaded file will appear with a blue checkmark in the top right. This indicates that WordPress will insert this file into your page. To the right of the library is the attachment details section. Here is where you can change some attributes

example of caption

This is an example of an image with a caption added to it

of your images. Adding text to the caption section will have those words appear below the image on the page. The look of this varies a bit between themes, as well as if you have any image plugins. A quick example can be seen on the right.

The Alt Text section is for alternate text if the image cannot be displayed. It’s good practice to set an alt text attribute on all images you use on your web site. It’s a useful tool when you’re working on increasing your site’s rank on search engines like Google and Bing too. You can set your alt text, for now, to something that the image. This is mostly to get you in the habit of setting the attribute for each image. When these lessons start getting into more advanced techniques and optimization, alt attributes will be discussed in more detail.

Under that is the Attachment Display Settings. Here, you can change the alignment of the image, have the image link to something, as well as set the size of the image. The Link To section has a few different options. Choosing the Media File option will only display the image when it is clicked in the browser. The Attachment Page is used for a few different reasons, which will be covered in a future lesson. To see the difference between the media file and the attachment page options, experiment with it. For now, these options don’t really matter too much, and will be elaborated on in an upcoming lesson. The two options I want you to understand are the custom URL and none options. Using the custom URL creates a link to wherever you would like. Unlike the text links that we learned how to create earlier, this uses the image as a link. The none option does just what you would think it does, nothing. Using the none option will insert the image and thats all. Clicking on the image will not take the visitor to a different page.

Feel free to play around with the alignment settings to see how they work in relation to text on your page.

The other area of part I want to explain is the insert from URL option. What this does is inserts an image that is hosted on another website. To do this, simply copy the image’s URL from your web browser into the insert from URL box. If done correctly, the image should appear and additional options will appear. These options are the same as the ones covered for uploaded images.

lesson 2 miscellaneous

 

 

There’s a few things on the toolbar that weren’t covered in the above sections. For these, I’ll just give a brief description of what they do.


Insert Read More Tag – An example of this tag in use would be when your homepage/blog or archives page is set to use post excerpts. Using this tag at the beginning of a post would define what text to show as the excerpt. To learn more about this feature, read this.

Proofread Writing Tool – This is a spelling & grammar check tool. You should always use this, or something like this, on content before you publish it. You only get one chance to make a first impression. If a new visitors first impression is of an article with spelling errors, they may get a bad impression of your site and not return.

Distraction Free Writing – This tool just turns your page editor into a full screen editor. To leave distraction free writing, just click the link that says exit full screen in the top left.

Paste as Text – This is used to paste something as plain text. Often times if you use the copy function on content from another page or document, it also copies the formatting. Using the paste as text option will only paste the plain text of what you copied.

Clear Formatting – This tool will remove any html tags from the selected text. You can use this if you would like to remove any type of tags on it.

Special Characters – This is just a simple way to insert characters like ®, ½, ∏, and much more.

Undo & Redo – These are for when you make a mistake and need to go back. Undo will remove the last action that was done to the page/post you’re working on. Redo will restore the last action.

Help – Displays the help screen for the WordPress editor. This includes a list of keyboard shortcuts if you ever forget one, as well as other helpful information.

lesson 2 final notes

 

 

I tried to stay on track as much as I could with this, and I hope that it was relatively easy to follow. I know that this is a lot of information contained in here, I just wanted to have the text editor tools covered in one lesson. Familiarize yourself with the information provided in this lesson at your own pace. If you rush through this, you may miss a fundamental concept and could get confused in the next lessons.

If you have any questions or need clarification, use the comments section of this page to ask it. I’ll answer it as soon as I can. The comments section of this page will serve as the discussion board for lesson 2. When the actual discussion board is back up and running, a link will replace this paragraph.

I’m glad to have you interested in learning this, and I look forward to working with you further.

lesson 2 what to expect

 

 

Lesson 3 will be focused on web concepts & technologies, website structure, and taking a good look at what makes your website work. This is something that I feel is very important. If you can understand what is going on behind the scenes, you can transfer that knowledge into different areas of development or other CMS. This will open up more possibilities for you.

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *